feat: separator section and variant.

Author: SupakornNetsuwan

examples/ui-playground/src/app/playground/shadcn/page-sidebar.tsx

@@ -27,6 +27,7 @@ const navigationItems = [
   { href: '#link', label: 'Link' },
   { href: '#pagination', label: 'Pagination' },
   { href: '#progress', label: 'Progress' },
+  { href: '#separator', label: 'Separator' },
   { href: '#select', label: 'Select' },
   { href: '#slider', label: 'Slider' },
   { href: '#switch', label: 'Switch' },

examples/ui-playground/src/app/playground/shadcn/page.tsx

@@ -20,6 +20,7 @@ import { PaginationSection } from './pagination-section'
 import { ProgressSection } from './progress-section'
 import { RichTextSection } from './rich-text-section'
 import { SelectSection } from './select-section'
+import { SeparatorSection } from './separator-section'
 import { SliderSection } from './slider-section'
 import { SwitchSection } from './switch-section'
 import { TableSection } from './table-section'
@@ -73,7 +74,7 @@ export default function ComboboxPage() {
         <Typography type="h2" weight="bold" id="input-otp">
           Input OTP
         </Typography>
-        <InputOtpSection />A
+        <InputOtpSection />
         <Typography type="h2" weight="bold" id="link">
           Link
         </Typography>
@@ -94,6 +95,10 @@ export default function ComboboxPage() {
           Slider
         </Typography>
         <SliderSection />
+        <Typography type="h2" weight="bold" id="separator">
+          Separator
+        </Typography>
+        <SeparatorSection />
         <Typography type="h2" weight="bold" id="switch">
           Switch
         </Typography>

examples/ui-playground/src/app/playground/shadcn/separator-section.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+
+import { Separator, Typography } from '@genseki/react/v2'
+
+import { PlaygroundCard } from '~/src/components/card'
+
+function BasicSeparatorExamples() {
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center gap-4">
+        <span className="text-sm text-muted-foreground">Left content</span>
+        <Separator className="flex-1" />
+        <span className="text-sm text-muted-foreground">Right content</span>
+      </div>
+      <div className="flex h-24 items-center gap-4">
+        <span className="text-sm text-muted-foreground">Top</span>
+        <Separator orientation="vertical" className="h-full" />
+        <span className="text-sm text-muted-foreground">Bottom</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-sm text-muted-foreground">Left content</span>
+        <Separator variant="dashed" className="flex-1" />
+        <span className="text-sm text-muted-foreground">Right content</span>
+      </div>
+      <div className="flex h-24 items-center gap-4">
+        <span className="text-sm text-muted-foreground">Top</span>
+        <Separator variant="dashed" orientation="vertical" className="h-full" />
+        <span className="text-sm text-muted-foreground">Bottom</span>
+      </div>
+    </div>
+  )
+}
+
+export function SeparatorSection() {
+  return (
+    <div className="grid gap-8">
+      <PlaygroundCard title="Separator" categoryTitle="Component">
+        <Typography type="body" className="text-muted-foreground mb-4">
+          Visual dividers for grouping content horizontally or vertically.
+        </Typography>
+        <div className="p-4 bg-secondary w-full rounded-lg">
+          <BasicSeparatorExamples />
+        </div>
+      </PlaygroundCard>
+    </div>
+  )
+}

packages/react/v2/components/primitives/separator.tsx

@@ -2,28 +2,44 @@
 import React from 'react'
 
 import * as SeparatorPrimitive from '@radix-ui/react-separator'
-
-import { cn } from '../../../src/react/utils/cn'
+import { cva, type VariantProps } from 'class-variance-authority'
 
 /**
  * Shadcn component
  */
 
+const separator = cva('shrink-0', {
+  variants: {
+    variant: {
+      solid:
+        'bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+      dashed: `bg-size-[12px_12px] bg-repeat
+        data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=horizontal]:bg-[linear-gradient(to_right,var(--color-border-primary)_50%,transparent_50%)]
+        data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px data-[orientation=vertical]:bg-[linear-gradient(to_bottom,var(--color-border-primary)_50%,transparent_50%)]
+        `,
+    },
+  },
+  defaultVariants: {
+    variant: 'solid',
+  },
+})
+
+type SeparatorProps = React.ComponentProps<typeof SeparatorPrimitive.Root> &
+  VariantProps<typeof separator>
+
 function Separator({
   className,
   orientation = 'horizontal',
+  variant,
   decorative = true,
   ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+}: SeparatorProps) {
   return (
     <SeparatorPrimitive.Root
       data-slot="separator"
       decorative={decorative}
       orientation={orientation}
-      className={cn(
-        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
-        className
-      )}
+      className={separator({ variant, className })}
       {...props}
     />
   )