feat: integrate latest HMDesign design system updates

src/components/toggle.stories.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react"
 import type { Meta, StoryObj } from "@storybook/react-vite"
 import { BoldIcon, ItalicIcon, StarIcon } from "lucide-react"
-import { Toggle } from "@hm-design/ui"
+import { Toggle, ToggleGroup, ToggleGroupItem } from "@hm-design/ui"
 import { StateBoard } from "@/components/story-board"
 import { STORY_KICKER, StoryPage, StoryPageHeader, StorySection } from "@/components/story-page"
 
@@ -110,9 +110,16 @@ export const All: Story = {
       <StoryPageHeader
         kicker={STORY_KICKER.components}
         title="Toggle"
-        description="눌림(On) 상태를 유지하는 단일 버튼입니다."
+        description="Toggle과 Toggle Group은 눌림(On) 상태를 공유합니다. Default·Outline, Off·On·Disabled와 키보드 Focus를 같은 기준으로 비교합니다."
       />
       <StorySection title="Overview">{board("offon")}</StorySection>
+      <StorySection title="단독 · 연결 그룹" description="단독 Toggle은 독립 선택입니다. spacing=0 그룹은 연결 형태이며 single은 하나, multiple은 여러 항목을 선택합니다.">
+        <div className="grid gap-4">
+          <div><p className="mb-2">단독 · 독립 선택</p><Toggle variant="outline">알림</Toggle></div>
+          <div><p className="mb-2">연결 그룹 · 단일 선택</p><ToggleGroup type="single" variant="outline" defaultValue="left" aria-label="정렬"><ToggleGroupItem value="left">왼쪽</ToggleGroupItem><ToggleGroupItem value="center">가운데</ToggleGroupItem><ToggleGroupItem value="right">오른쪽</ToggleGroupItem></ToggleGroup></div>
+          <div><p className="mb-2">연결 그룹 · 다중 선택</p><ToggleGroup type="multiple" variant="outline" defaultValue={["bold"]} aria-label="글자 스타일"><ToggleGroupItem value="bold">굵게</ToggleGroupItem><ToggleGroupItem value="italic">기울임</ToggleGroupItem></ToggleGroup></div>
+        </div>
+      </StorySection>
       <StorySection title="Sizes">
         <Sizes />
       </StorySection>