Initial commit: HMDesignSystem baseline

src/components/label.stories.tsx

@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/react-vite"
+import { Input, Label } from "@hm-design/ui"
+import { StateBoard } from "@/components/story-board"
+import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
+
+// Label has no standalone ui_viz spec. Its typography and color are the Field Label role owned by Input / Textarea
+// (14/20/500, color.fg.secondary). Required star and messages are composed here as a consumer would (not part of Label).
+
+const meta = {
+  title: "Components/Form/Label",
+  component: Label,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "Field Label 14/20/500, 색 color.fg.secondary (ui_viz input.md §9, §10). Radix Label의 htmlFor·클릭 시 컨트롤 focus 동작을 유지합니다. Required 별표·문구는 Label이 아닌 소비 조합입니다.",
+      },
+    },
+  },
+} satisfies Meta<typeof Label>
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const All: Story = {
+  name: "Label",
+  parameters: { layout: "fullscreen", controls: { disable: true } },
+  render: () => (
+    <StoryPage>
+      <StoryPageHeader
+        kicker={STORY_KICKER.components}
+        title="Label"
+        description="입력 컨트롤의 이름입니다. Field Label 14/20/500을 쓰며, htmlFor로 연결하면 라벨 클릭 시 컨트롤로 focus가 이동합니다."
+      />
+      <StorySection title="Overview">
+        <StateBoard
+          states={[
+            {
+              id: "default",
+              label: "Default · htmlFor",
+              noteAfter: true,
+              note: "라벨을 클릭하면 연결된 입력으로 focus가 이동합니다.",
+              children: (
+                <div className="grid max-w-sm gap-2">
+                  <Label htmlFor="label-default">Project name</Label>
+                  <Input id="label-default" size="medium" placeholder="Enter a project name" />
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="States">
+        <StateBoard
+          states={[
+            {
+              id: "disabled",
+              label: "Disabled (peer-disabled, shadcn 기본)",
+              noteAfter: true,
+              note: "Disabled 연동은 ui_viz Label에 정의가 없어 shadcn 기본(peer-disabled)을 유지합니다.",
+              children: (
+                <div className="grid max-w-sm gap-2">
+                  <Input id="label-disabled" size="medium" disabled defaultValue="Unavailable" className="peer order-2" />
+                  <Label htmlFor="label-disabled" className="order-1">
+                    Project name
+                  </Label>
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+      <StorySection title="Usage" description="Required 별표는 Label이 아닌 소비 조합입니다. 긴 라벨은 줄바꿈됩니다.">
+        <StateBoard
+          states={[
+            {
+              id: "required",
+              label: "Required (소비 조합)",
+              children: (
+                <div className="grid max-w-sm gap-2">
+                  <Label htmlFor="label-required">
+                    Project name
+                    <span aria-hidden="true" className="text-destructive">
+                      *
+                    </span>
+                  </Label>
+                  <Input id="label-required" size="medium" required />
+                </div>
+              ),
+            },
+            {
+              id: "long",
+              label: "Long Label",
+              children: (
+                <div className="grid max-w-[220px] gap-2">
+                  <Label htmlFor="label-long">A very long label text that wraps to multiple lines</Label>
+                  <Input id="label-long" size="medium" />
+                </div>
+              ),
+            },
+          ]}
+        />
+      </StorySection>
+    </StoryPage>
+  ),
+}