Initial commit: HMDesignSystem baseline

src/components/separator.stories.tsx

@@ -0,0 +1,89 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Separator } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+const meta = {
+  title: "Components/Data & Display/Separator",
+  component: Separator,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "현재 HM 규격: 1px 선, 색은 pale warm neutral(Primitive 참조). Radix Separator의 orientation과 decorative(기본 true) API를 유지합니다. decorative=false이면 role=separator가 노출됩니다.",
+      },
+    },
+  },
+  argTypes: { orientation: { control: "inline-radio", options: ["horizontal", "vertical"] }, decorative: { control: "boolean" } },
+} satisfies Meta<typeof Separator>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Separator",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Separator"
+        description="콘텐츠 사이를 나누는 선입니다. 기본은 장식용(decorative)이며 접근성 트리에 노출되지 않습니다."
+      />
+      <StorySection title="Overview">
+        <StateBoard
+          min={280}
+          states={[
+            {
+              id: "horizontal",
+              label: "Horizontal",
+              children: (
+                <div className="grid gap-3 text-sm">
+                  <span>Above</span>
+                  <Separator />
+                  <span>Below</span>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Variants">
+        <StateBoard
+          min={280}
+          states={[
+            {
+              id: "vertical",
+              label: "Vertical (flex row)",
+              children: (
+                <div className="flex h-6 items-center gap-3 text-sm">
+                  <span>Left</span>
+                  <Separator orientation="vertical" />
+                  <span>Middle</span>
+                  <Separator orientation="vertical" />
+                  <span>Right</span>
+                </div>
+              ),
+            },
+            {
+              id: "semantic",
+              label: "Semantic (decorative=false)",
+              noteAfter: true,
+              note: "decorative=false는 role=separator와 aria-orientation을 노출합니다.",
+              children: (
+                <div className="grid gap-3 text-sm">
+                  <span>Section A</span>
+                  <Separator decorative={false} />
+                  <span>Section B</span>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+    </StoryPage>
+  ),
+}
+
+export const Horizontal: Story = { tags: ["verification"], render: () => <div className="max-w-xs"><Separator /></div> }
+export const Vertical: Story = { tags: ["verification"], render: () => <div className="flex h-8 items-center"><Separator orientation="vertical" /></div> }