@xonic0506/sonic-ui 0.4.1 → 0.4.3

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-variants.d.ts

@@ -0,0 +1,5 @@
+/** 링크를 버튼 모양으로 그릴 때: <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;

package/dist/components/button-variants.js

@@ -0,0 +1,26 @@
+import { cva as e } from "class-variance-authority";
+//#region src/components/button-variants.ts
+var t = e("sn:box-border sn:inline-flex sn:items-center sn:justify-center sn:gap-2 sn:whitespace-nowrap sn:rounded-md sn:border sn:border-transparent sn:font-sans sn:cursor-pointer sn:select-none sn:transition-colors sn:duration-(--sn-duration-fast) sn:ease-standard sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus sn:data-disabled:not-data-loading:cursor-not-allowed sn:data-disabled:not-data-loading:opacity-(--sn-opacity-disabled) sn:data-loading:cursor-progress sn:[&_svg]:pointer-events-none sn:[&_svg]:shrink-0", {
+	variants: {
+		variant: {
+			primary: "sn:bg-primary sn:text-on-primary sn:hover:not-data-disabled:bg-primary-hover",
+			secondary: "sn:border-default sn:bg-surface sn:text-default sn:hover:not-data-disabled:bg-subtle",
+			ghost: "sn:bg-transparent sn:text-default sn:hover:not-data-disabled:bg-subtle",
+			danger: "sn:bg-danger sn:text-on-danger"
+		},
+		size: {
+			sm: "sn:h-7 sn:px-2 sn:text-label sn:[&_svg]:size-4",
+			md: "sn:h-8 sn:px-3 sn:text-body-strong sn:[&_svg]:size-4",
+			lg: "sn:h-10 sn:px-4 sn:text-body-strong sn:[&_svg]:size-5",
+			"icon-sm": "sn:size-7 sn:p-0 sn:[&_svg]:size-4",
+			"icon-md": "sn:size-8 sn:p-0 sn:[&_svg]:size-4",
+			"icon-lg": "sn:size-10 sn:p-0 sn:[&_svg]:size-5"
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "md"
+	}
+});
+//#endregion
+export { t as buttonVariants };

package/dist/components/button.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 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

@@ -1,35 +1,14 @@
 "use client";
 import { cn as e } from "../lib/cn.js";
-import * as t from "react";
-import { Button as n } from "@base-ui/react/button";
-import { cva as r } from "class-variance-authority";
+import { buttonVariants as t } from "./button-variants.js";
+import * as n from "react";
+import { Button as r } from "@base-ui/react/button";
 import { LoaderCircle as i } from "lucide-react";
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/button.tsx
-var c = r("sn:box-border sn:inline-flex sn:items-center sn:justify-center sn:gap-2 sn:whitespace-nowrap sn:rounded-md sn:border sn:border-transparent sn:font-sans sn:cursor-pointer sn:select-none sn:transition-colors sn:duration-(--sn-duration-fast) sn:ease-standard sn:focus-visible:outline-2 sn:focus-visible:outline-offset-2 sn:focus-visible:outline-focus sn:data-disabled:not-data-loading:cursor-not-allowed sn:data-disabled:not-data-loading:opacity-(--sn-opacity-disabled) sn:data-loading:cursor-progress sn:[&_svg]:pointer-events-none sn:[&_svg]:shrink-0", {
-	variants: {
-		variant: {
-			primary: "sn:bg-primary sn:text-on-primary sn:hover:not-data-disabled:bg-primary-hover",
-			secondary: "sn:border-default sn:bg-surface sn:text-default sn:hover:not-data-disabled:bg-subtle",
-			ghost: "sn:bg-transparent sn:text-default sn:hover:not-data-disabled:bg-subtle",
-			danger: "sn:bg-danger sn:text-on-danger"
-		},
-		size: {
-			sm: "sn:h-7 sn:px-2 sn:text-label sn:[&_svg]:size-4",
-			md: "sn:h-8 sn:px-3 sn:text-body-strong sn:[&_svg]:size-4",
-			lg: "sn:h-10 sn:px-4 sn:text-body-strong sn:[&_svg]:size-5",
-			"icon-sm": "sn:size-7 sn:p-0 sn:[&_svg]:size-4",
-			"icon-md": "sn:size-8 sn:p-0 sn:[&_svg]:size-4",
-			"icon-lg": "sn:size-10 sn:p-0 sn:[&_svg]:size-5"
-		}
-	},
-	defaultVariants: {
-		variant: "primary",
-		size: "md"
-	}
-}), l = t.forwardRef(function({ variant: t, size: r, className: l, render: u, loading: d, disabled: f, children: p, ...m }, h) {
+var c = n.forwardRef(function({ variant: n, size: c, className: l, render: u, loading: d, disabled: f, children: p, ...m }, h) {
 	let g = /* @__PURE__ */ o(i, { className: "sn:animate-[sn-spin_var(--sn-duration-loop)_linear_infinite] sn:motion-reduce:animate-none" });
-	return /* @__PURE__ */ o(n, {
+	return /* @__PURE__ */ o(r, {
 		ref: h,
 		render: u,
 		nativeButton: !u || u.type === "button",
@@ -37,13 +16,13 @@ var c = r("sn:box-border sn:inline-flex sn:items-center sn:justify-center sn:gap
 		focusableWhenDisabled: d,
 		"aria-busy": d || void 0,
 		"data-loading": d ? "" : void 0,
-		className: e(c({
-			variant: t,
-			size: r
+		className: e(t({
+			variant: n,
+			size: c
 		}), l),
 		...m,
-		children: d && r?.startsWith("icon-") ? g : d ? /* @__PURE__ */ s(a, { children: [g, p] }) : p
+		children: d && c?.startsWith("icon-") ? g : d ? /* @__PURE__ */ s(a, { children: [g, p] }) : p
 	});
 });
 //#endregion
-export { l as Button };
+export { c as Button };

package/dist/components/illustration.js

@@ -1,4 +1,3 @@
-"use client";
 //#region src/components/illustration.ts
 var e = {
 	empty: new URL("../illustrations/empty.webp", import.meta.url).href,

package/dist/components/popup-styles.js

@@ -1,4 +1,3 @@
-"use client";
 //#region src/components/popup-styles.ts
 var e = "sn:box-border sn:min-w-(--anchor-width) sn:max-h-(--available-height) sn:overflow-y-auto sn:origin-(--transform-origin) sn:rounded-lg sn:border sn:border-default sn:bg-surface sn:p-1 sn:font-sans sn:text-body sn:text-default sn:outline-none sn:transition-[opacity,scale] sn:duration-(--sn-duration-normal) sn:ease-standard sn:data-starting-style:scale-98 sn:data-starting-style:opacity-0 sn:data-ending-style:scale-98 sn:data-ending-style:opacity-0 sn:motion-reduce:transition-none", t = "sn:group sn:flex sn:h-8 sn:cursor-default sn:items-center sn:gap-2 sn:rounded-md sn:px-2 sn:outline-none sn:select-none sn:data-highlighted:bg-subtle sn:data-disabled:opacity-(--sn-opacity-disabled) sn:[&_svg]:size-4 sn:[&_svg]:shrink-0", n = "sn:box-border sn:inline-flex sn:size-4 sn:shrink-0 sn:items-center sn:justify-center sn:rounded-sm sn:border sn:border-strong sn:bg-surface sn:text-on-primary sn:[&_svg]:size-3";
 //#endregion

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export { Button, type ButtonProps } from './components/button';
+export { buttonVariants } from './components/button-variants';
 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 { buttonVariants as e } from "./components/button-variants.js";
+import { Button 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, t 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, e as buttonVariants, ye as formatBytes, te as useToast };

package/dist/lib/cn.js

@@ -1,4 +1,3 @@
-"use client";
 import { extendTailwindMerge as e } from "tailwind-merge";
 //#region src/lib/cn.ts
 var t = e({

package/package.json

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