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);
}
}