diff --git a/package.json b/package.json index 436bf01..12c4edb 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@radix-ui/react-dialog": "^1.1.1", "@radix-ui/react-hover-card": "^1.1.1", "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.2", "class-variance-authority": "^0.7.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d177ce9..8b470d7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ importers: '@radix-ui/react-icons': specifier: ^1.3.0 version: 1.3.0(react@18.3.1) + '@radix-ui/react-separator': + specifier: ^1.1.0 + version: 1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@radix-ui/react-slot': specifier: ^1.1.0 version: 1.1.0(@types/react@18.3.3)(react@18.3.1) @@ -865,6 +868,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-separator@1.1.0': + resolution: {integrity: sha512-3uBAs+egzvJBDZAzvb/n4NxxOYpnspmWxO2u5NbZ8Y6FM/NdrGSF9bop3Cf6F6C71z1rTSn8KV0Fo2ZVd79lGA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-slot@1.1.0': resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==} peerDependencies: @@ -3686,6 +3702,15 @@ snapshots: '@types/react': 18.3.3 '@types/react-dom': 18.3.0 + '@radix-ui/react-separator@1.1.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': + dependencies: + '@radix-ui/react-primitive': 2.0.0(@types/react-dom@18.3.0)(@types/react@18.3.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + optionalDependencies: + '@types/react': 18.3.3 + '@types/react-dom': 18.3.0 + '@radix-ui/react-slot@1.1.0(@types/react@18.3.3)(react@18.3.1)': dependencies: '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.3.3)(react@18.3.1) diff --git a/src/App.tsx b/src/App.tsx index f806572..d2fbd76 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -17,6 +17,8 @@ import { Tooltip, HoverCard, Skeleton, + Separator, + Block, } from "@Components/ui"; const App = () => ( @@ -196,6 +198,33 @@ const App = () => ( + + + + + + Radix Primitives + + + An open-source UI component library. + + + + + Blog + + Docs + + Source + + + ); diff --git a/src/components/ui/Block/Block.tsx b/src/components/ui/Block/Block.tsx index ab5627f..b4bde11 100644 --- a/src/components/ui/Block/Block.tsx +++ b/src/components/ui/Block/Block.tsx @@ -28,7 +28,7 @@ const Block = forwardRef( aria-describedby={ariaDescribedBy} aria-live={ariaLive} role={role} - className={cn("p-4", border && "border border-border-red", className)} + className={cn(border && "border border-border-red", className)} {...rest} > {children} diff --git a/src/components/ui/Separator/Separator.tsx b/src/components/ui/Separator/Separator.tsx new file mode 100644 index 0000000..36d4418 --- /dev/null +++ b/src/components/ui/Separator/Separator.tsx @@ -0,0 +1,28 @@ +import * as SeparatorPrimitive from "@radix-ui/react-separator"; +import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react"; +import { cn } from "@Utils/className"; + +const Separator = forwardRef< + ElementRef, + ComponentPropsWithoutRef +>( + ( + { className, orientation = "horizontal", decorative = true, ...props }, + ref + ) => ( + + ) +); +Separator.displayName = SeparatorPrimitive.Root.displayName; + +export { Separator }; diff --git a/src/components/ui/Separator/index.ts b/src/components/ui/Separator/index.ts new file mode 100644 index 0000000..4060cb5 --- /dev/null +++ b/src/components/ui/Separator/index.ts @@ -0,0 +1 @@ +export * from "./Separator"; diff --git a/src/components/ui/Typography/Typography.tsx b/src/components/ui/Typography/Typography.tsx index 547955e..e125e73 100644 --- a/src/components/ui/Typography/Typography.tsx +++ b/src/components/ui/Typography/Typography.tsx @@ -38,7 +38,9 @@ const Typography = ({ "flex", asElementObject[Element], border && "border border-red", - isHeading(Element) ? HeadingVariants[variants] : TextVariants[variants], + isHeading(Element) + ? HeadingVariants[variants as keyof typeof HeadingVariants] + : TextVariants[variants as keyof typeof HeadingVariants], className )} {...rest} diff --git a/src/components/ui/Typography/utils/TypographyClasses.ts b/src/components/ui/Typography/utils/TypographyClasses.ts index 9aa3328..9e86c5e 100644 --- a/src/components/ui/Typography/utils/TypographyClasses.ts +++ b/src/components/ui/Typography/utils/TypographyClasses.ts @@ -5,6 +5,7 @@ type asElementObjectType = { // eslint-disable-next-line no-unused-vars [key in asTypographyType]: ClassType; }; + const asElementObject: asElementObjectType = { h1: "text-4xl font-extrabold leading-tight tracking-tight", h2: "text-3xl font-bold leading-snug tracking-tight", @@ -17,7 +18,9 @@ const asElementObject: asElementObjectType = { strong: "text-base font-semibold leading-normal tracking-normal", } as const; -const HeadingVariants: Record = { +type Variants = Exclude; + +const HeadingVariants: Record = { default: "text-heading", accent: "text-accent", destructive: "text-destructive", @@ -26,7 +29,7 @@ const HeadingVariants: Record = { secondary: "text-secondary", } as const; -const TextVariants: Record = { +const TextVariants: Record = { default: "text-text", accent: "text-accent", destructive: "text-destructive", diff --git a/src/components/ui/index.ts b/src/components/ui/index.ts index cd279fa..20eb135 100644 --- a/src/components/ui/index.ts +++ b/src/components/ui/index.ts @@ -15,3 +15,4 @@ export { ContextMenu } from "./ContextMenu"; export { Tooltip } from "./ToolTip"; export { HoverCard } from "./HoverCard"; export { Skeleton } from "./Skeleton"; +export { Separator } from "./Separator"; diff --git a/src/tailwind.css b/src/tailwind.css index 64b1e54..e2037a6 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -17,6 +17,7 @@ --destructive-light: 0, 84.2%, 60.2%; --input-light: 216, 12.2%, 83.9%; --model-overlay-light: 0, 0%, 0%; + --border-light: 240, 5.9%, 90%; /* Dark theme colors */ --background-dark: 222.2, 84%, 4.9%; @@ -29,6 +30,7 @@ --destructive-dark: 346.8, 77.2%, 49.8%; --input-dark: 215.3, 25%, 26.7%; --model-overlay-dark: 0, 0%, 0%; + --border-dark: 240, 3.7%, 15.9%; /* Default to light theme values */ --background: var(--background-light); @@ -41,6 +43,7 @@ --destructive: var(--destructive-light); --input: var(--input-light); --model-overlay: var(--model-overlay-light); + --border: var(--border-light); } /* Dark theme overrides */ @@ -55,6 +58,7 @@ --destructive: var(--destructive-dark); --input: var(--input-dark); --model-overlay: var(--model-overlay-dark); + --border: var(--border-dark); } }