feat: seperator component

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",

src/App.tsx

@@ -17,6 +17,8 @@ import {
   Tooltip,
   HoverCard,
   Skeleton,
+  Separator,
+  Block,
 } from "@Components/ui";
 
 const App = () => (
@@ -196,6 +198,33 @@ const App = () => (
         <Skeleton className="h-4 w-[200px]" />
       </div>
     </Flex>
+
+    <Flex asElement="section" className="mt-10">
+      <Block>
+        <Block className="space-y-1">
+          <Typography
+            asElement="h4"
+            className="text-sm font-medium leading-none"
+          >
+            Radix Primitives
+          </Typography>
+          <Typography asElement="p" className="text-sm text-muted">
+            An open-source UI component library.
+          </Typography>
+        </Block>
+        <Separator className="my-4" />
+        <Flex
+          asElement="div"
+          className="flex h-5 items-center space-x-4 text-sm"
+        >
+          <Typography asElement="span">Blog</Typography>
+          <Separator orientation="vertical" />
+          <Typography asElement="span">Docs</Typography>
+          <Separator orientation="vertical" />
+          <Typography asElement="span">Source</Typography>
+        </Flex>
+      </Block>
+    </Flex>
   </Container>
 );
 

src/components/ui/Block/Block.tsx

@@ -28,7 +28,7 @@ const Block = forwardRef<AnyType, BlockProps>(
       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}

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<typeof SeparatorPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };

src/components/ui/Separator/index.ts

@@ -0,0 +1 @@
+export * from "./Separator";

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}

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<ColorVariantsType, ClassType> = {
+type Variants = Exclude<ColorVariantsType, "background">;
+
+const HeadingVariants: Record<Variants, ClassType> = {
   default: "text-heading",
   accent: "text-accent",
   destructive: "text-destructive",
@@ -26,7 +29,7 @@ const HeadingVariants: Record<ColorVariantsType, ClassType> = {
   secondary: "text-secondary",
 } as const;
 
-const TextVariants: Record<ColorVariantsType, ClassType> = {
+const TextVariants: Record<Variants, ClassType> = {
   default: "text-text",
   accent: "text-accent",
   destructive: "text-destructive",

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";

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