@xonic0506/sonic-ui 0.4.1 → 0.4.2

package/DESIGN.md

@@ -320,6 +320,8 @@ Figma Core 페이지의 컴포넌트 속성 이름 = React props 이름이에요
 | ghost | 없음 | `text/default` | 없음 | `bg/subtle` |
 | danger | `bg/danger` | `text/on-danger` | 없음 | 없음 (v0.1에는 danger hover 토큰이 없음) |
 
+**페이지 이동은 버튼 모양이어도 링크예요.** `<Button render={<a />}>`는 `<a>`에 `role="button"`이 붙어 화면 낭독기가 버튼으로 읽어요. 링크 요소에 `buttonVariants({ variant, size })` 클래스만 입혀요: `<NextLink href="/" className={buttonVariants({ variant: 'secondary' })}>홈으로 가기</NextLink>`.
+
 공통: radius `radius/md`, 아이콘과 글자 사이 `space/2`, disabled는 `opacity/disabled`(45%), focus는 2px `border/focus` + offset 2px, 색 전환은 `duration/fast`.
 
 ### Input
@@ -481,7 +483,7 @@ const retryRef = useRef<HTMLButtonElement>(null);
 ```tsx
 // Next.js app/not-found.tsx
 export default function NotFound() {
-  return <ErrorPage status={404} action={<Button render={<NextLink href="/" />}>홈으로 가기</Button>} />;
+  return <ErrorPage status={404} action={<NextLink href="/" className={buttonVariants()}>홈으로 가기</NextLink>} />;
 }
 ```
 
@@ -829,7 +831,7 @@ Sonic 팀은 Figma Pro 요금제라 Code Connect(Organization 이상)를 쓸 수
 
 | Figma 컴포넌트 (Core 페이지) | node id | 코드 | 파일 |
 |---|---|---|---|
-| Button | `5:52` | `<Button variant size disabled>` | `src/components/button.tsx` |
+| Button | `5:52` | `<Button variant size disabled>` (페이지 이동은 링크에 `buttonVariants({ variant, size })`) | `src/components/button.tsx` |
 | Button Icon | `23:2294` | `<Button size="icon-*" variant disabled aria-label>` + 아이콘 자식 | `src/components/button.tsx` |
 | Input | `5:61` | `<Input invalid disabled placeholder>` | `src/components/input.tsx` |
 | Text | `5:110` | `<Text variant tone as>` | `src/components/text.tsx` |

package/dist/components/button.d.ts

@@ -1,8 +1,13 @@
 import * as React from 'react';
+/** 링크를 버튼 모양으로 그릴 때: <NextLink className={buttonVariants({ variant: 'secondary' })} /> */
+export declare const buttonVariants: (props?: ({
+    variant?: "danger" | "ghost" | "primary" | "secondary" | null | undefined;
+    size?: "icon-lg" | "icon-md" | "icon-sm" | "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ButtonBaseProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'className'> {
     variant?: 'primary' | 'secondary' | 'ghost' | 'danger';
     className?: string;
-    /** 다른 요소로 렌더링할 때 (예: render={<a href="/" />}) */
+    /** 다른 요소로 렌더링할 때. 링크는 role="button"이 붙으니 buttonVariants를 쓰세요 */
     render?: React.ReactElement;
     /** 진행 중: 스피너 표시, 클릭 막기, 포커스 유지, aria-busy */
     loading?: boolean;

package/dist/components/button.js

@@ -46,4 +46,4 @@ var c = r("sn:box-border sn:inline-flex sn:items-center sn:justify-center sn:gap
 	});
 });
 //#endregion
-export { l as Button };
+export { l as Button, c as buttonVariants };

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Button, type ButtonProps } from './components/button';
+export { Button, buttonVariants, type ButtonProps } from './components/button';
 export { Input, type InputProps } from './components/input';
 export { Textarea, type TextareaProps } from './components/textarea';
 export { Checkbox, CheckboxGroup, type CheckboxProps, type CheckboxGroupProps } from './components/checkbox';

package/dist/index.js

@@ -1,32 +1,32 @@
 "use client";
-import { Button as e } from "./components/button.js";
-import { Input as t } from "./components/input.js";
-import { Textarea as n } from "./components/textarea.js";
-import { Checkbox as r, CheckboxGroup as i } from "./components/checkbox.js";
-import { Radio as a, RadioGroup as o } from "./components/radio-group.js";
-import { Switch as s } from "./components/switch.js";
-import { Select as c } from "./components/select.js";
-import { Text as l } from "./components/text.js";
-import { Card as u, CardBody as d, CardDescription as f, CardFooter as p, CardHeader as m, CardTitle as h } from "./components/card.js";
-import { Avatar as g } from "./components/avatar.js";
-import { Field as _ } from "./components/field.js";
-import { Skeleton as v } from "./components/skeleton.js";
-import { EmptyState as y } from "./components/empty-state.js";
-import { ErrorState as b } from "./components/error-state.js";
-import { ErrorPage as x } from "./components/error-page.js";
-import { Dialog as S, DialogClose as C, DialogDescription as w, DialogFooter as T, DialogPopup as E, DialogTitle as D, DialogTrigger as O } from "./components/dialog.js";
-import { AlertDialog as k, AlertDialogClose as A, AlertDialogDescription as j, AlertDialogFooter as M, AlertDialogPopup as N, AlertDialogTitle as P, AlertDialogTrigger as F } from "./components/alert-dialog.js";
-import { Menu as I, MenuItem as L, MenuPopup as R, MenuSeparator as z, MenuTrigger as B } from "./components/menu.js";
-import { Popover as V, PopoverClose as H, PopoverDescription as U, PopoverPopup as W, PopoverTitle as G, PopoverTrigger as K } from "./components/popover.js";
-import { Tooltip as q } from "./components/tooltip.js";
-import { Tab as J, Tabs as Y, TabsList as X, TabsPanel as Z } from "./components/tabs.js";
-import { Separator as Q } from "./components/separator.js";
-import { ToastProvider as $, useToast as ee } from "./components/toast.js";
-import { Badge as te } from "./components/badge.js";
-import { Progress as ne } from "./components/progress.js";
-import { Link as re } from "./components/link.js";
-import { Table as ie, TableBody as ae, TableCell as oe, TableHead as se, TableHeader as ce, TableRow as le } from "./components/table.js";
-import { ToggleGroup as ue, ToggleGroupItem as de } from "./components/toggle-group.js";
-import { Accordion as fe, AccordionItem as pe, AccordionPanel as me, AccordionTrigger as he } from "./components/accordion.js";
-import { FileDropzone as ge, FileList as _e, formatBytes as ve } from "./components/file-upload.js";
-export { fe as Accordion, pe as AccordionItem, me as AccordionPanel, he as AccordionTrigger, k as AlertDialog, A as AlertDialogClose, j as AlertDialogDescription, M as AlertDialogFooter, N as AlertDialogPopup, P as AlertDialogTitle, F as AlertDialogTrigger, g as Avatar, te as Badge, e as Button, u as Card, d as CardBody, f as CardDescription, p as CardFooter, m as CardHeader, h as CardTitle, r as Checkbox, i as CheckboxGroup, S as Dialog, C as DialogClose, w as DialogDescription, T as DialogFooter, E as DialogPopup, D as DialogTitle, O as DialogTrigger, y as EmptyState, x as ErrorPage, b as ErrorState, _ as Field, ge as FileDropzone, _e as FileList, t as Input, re as Link, I as Menu, L as MenuItem, R as MenuPopup, z as MenuSeparator, B as MenuTrigger, V as Popover, H as PopoverClose, U as PopoverDescription, W as PopoverPopup, G as PopoverTitle, K as PopoverTrigger, ne as Progress, a as Radio, o as RadioGroup, c as Select, Q as Separator, v as Skeleton, s as Switch, J as Tab, ie as Table, ae as TableBody, oe as TableCell, se as TableHead, ce as TableHeader, le as TableRow, Y as Tabs, X as TabsList, Z as TabsPanel, l as Text, n as Textarea, $ as ToastProvider, ue as ToggleGroup, de as ToggleGroupItem, q as Tooltip, ve as formatBytes, ee as useToast };
+import { Button as e, buttonVariants as t } from "./components/button.js";
+import { Input as n } from "./components/input.js";
+import { Textarea as r } from "./components/textarea.js";
+import { Checkbox as i, CheckboxGroup as a } from "./components/checkbox.js";
+import { Radio as o, RadioGroup as s } from "./components/radio-group.js";
+import { Switch as c } from "./components/switch.js";
+import { Select as l } from "./components/select.js";
+import { Text as u } from "./components/text.js";
+import { Card as d, CardBody as f, CardDescription as p, CardFooter as m, CardHeader as h, CardTitle as g } from "./components/card.js";
+import { Avatar as _ } from "./components/avatar.js";
+import { Field as v } from "./components/field.js";
+import { Skeleton as y } from "./components/skeleton.js";
+import { EmptyState as b } from "./components/empty-state.js";
+import { ErrorState as x } from "./components/error-state.js";
+import { ErrorPage as S } from "./components/error-page.js";
+import { Dialog as C, DialogClose as w, DialogDescription as T, DialogFooter as E, DialogPopup as D, DialogTitle as O, DialogTrigger as k } from "./components/dialog.js";
+import { AlertDialog as A, AlertDialogClose as j, AlertDialogDescription as M, AlertDialogFooter as N, AlertDialogPopup as P, AlertDialogTitle as F, AlertDialogTrigger as I } from "./components/alert-dialog.js";
+import { Menu as L, MenuItem as R, MenuPopup as z, MenuSeparator as B, MenuTrigger as V } from "./components/menu.js";
+import { Popover as H, PopoverClose as U, PopoverDescription as W, PopoverPopup as G, PopoverTitle as K, PopoverTrigger as q } from "./components/popover.js";
+import { Tooltip as J } from "./components/tooltip.js";
+import { Tab as Y, Tabs as X, TabsList as Z, TabsPanel as Q } from "./components/tabs.js";
+import { Separator as $ } from "./components/separator.js";
+import { ToastProvider as ee, useToast as te } from "./components/toast.js";
+import { Badge as ne } from "./components/badge.js";
+import { Progress as re } from "./components/progress.js";
+import { Link as ie } from "./components/link.js";
+import { Table as ae, TableBody as oe, TableCell as se, TableHead as ce, TableHeader as le, TableRow as ue } from "./components/table.js";
+import { ToggleGroup as de, ToggleGroupItem as fe } from "./components/toggle-group.js";
+import { Accordion as pe, AccordionItem as me, AccordionPanel as he, AccordionTrigger as ge } from "./components/accordion.js";
+import { FileDropzone as _e, FileList as ve, formatBytes as ye } from "./components/file-upload.js";
+export { pe as Accordion, me as AccordionItem, he as AccordionPanel, ge as AccordionTrigger, A as AlertDialog, j as AlertDialogClose, M as AlertDialogDescription, N as AlertDialogFooter, P as AlertDialogPopup, F as AlertDialogTitle, I as AlertDialogTrigger, _ as Avatar, ne as Badge, e as Button, d as Card, f as CardBody, p as CardDescription, m as CardFooter, h as CardHeader, g as CardTitle, i as Checkbox, a as CheckboxGroup, C as Dialog, w as DialogClose, T as DialogDescription, E as DialogFooter, D as DialogPopup, O as DialogTitle, k as DialogTrigger, b as EmptyState, S as ErrorPage, x as ErrorState, v as Field, _e as FileDropzone, ve as FileList, n as Input, ie as Link, L as Menu, R as MenuItem, z as MenuPopup, B as MenuSeparator, V as MenuTrigger, H as Popover, U as PopoverClose, W as PopoverDescription, G as PopoverPopup, K as PopoverTitle, q as PopoverTrigger, re as Progress, o as Radio, s as RadioGroup, l as Select, $ as Separator, y as Skeleton, c as Switch, Y as Tab, ae as Table, oe as TableBody, se as TableCell, ce as TableHead, le as TableHeader, ue as TableRow, X as Tabs, Z as TabsList, Q as TabsPanel, u as Text, r as Textarea, ee as ToastProvider, de as ToggleGroup, fe as ToggleGroupItem, J as Tooltip, t as buttonVariants, ye as formatBytes, te as useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xonic0506/sonic-ui",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Figma-first personal design system (Base UI + Tailwind v4, prebuilt CSS)",
   "license": "MIT",
   "repository": {