@mzc-fe/design-system 0.0.11-rc.0 → 0.0.11-rc.2

package/dist/components/accordion/accordion.d.ts

@@ -22,7 +22,8 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion";
  * @param props.onValueChange - 열린 아이템이 변경될 때 호출되는 콜백
  * @param props.disabled - 모든 아이템을 비활성화합니다
  */
-declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export type AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root>;
+export declare function Accordion({ ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
 /**
  * 아코디언의 개별 아이템을 나타내는 컴포넌트입니다.
  * 각 아이템은 고유한 value를 가져야 합니다.
@@ -32,7 +33,8 @@ declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPr
  * @param props.disabled - 이 아이템만 비활성화합니다
  * @param props.className - 추가 CSS 클래스
  */
-declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): import("react/jsx-runtime").JSX.Element;
+export type AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>;
+export declare function AccordionItem({ className, ...props }: AccordionItemProps): import("react/jsx-runtime").JSX.Element;
 /**
  * 아코디언 아이템을 열고 닫는 트리거 버튼입니다.
  * 클릭하면 해당 아이템의 콘텐츠가 펼쳐지거나 접힙니다.
@@ -43,7 +45,8 @@ declare function AccordionItem({ className, ...props }: React.ComponentProps<typ
  * @param props.className - 추가 CSS 클래스
  * @param props.disabled - 트리거를 비활성화합니다
  */
-declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+export type AccordionTriggerProps = React.ComponentProps<typeof AccordionPrimitive.Trigger>;
+export declare function AccordionTrigger({ className, children, ...props }: AccordionTriggerProps): import("react/jsx-runtime").JSX.Element;
 /**
  * 아코디언 아이템의 접히는 콘텐츠 영역입니다.
  * 트리거를 클릭하면 애니메이션과 함께 펼쳐지거나 접힙니다.
@@ -53,5 +56,5 @@ declare function AccordionTrigger({ className, children, ...props }: React.Compo
  * @param props.className - 내부 콘텐츠 래퍼에 적용될 추가 CSS 클래스
  * @param props.forceMount - 닫힌 상태에서도 DOM에 마운트 유지 (애니메이션용)
  */
-declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export type AccordionContentProps = React.ComponentProps<typeof AccordionPrimitive.Content>;
+export declare function AccordionContent({ className, children, ...props }: AccordionContentProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/accordion/accordion.js

@@ -1,14 +1,14 @@
 import { jsx as o, jsxs as a } from "react/jsx-runtime";
 import "react";
-import * as r from "@radix-ui/react-accordion";
+import * as n from "@radix-ui/react-accordion";
 import { ChevronDownIcon as s } from "lucide-react";
 import { cn as i } from "../../lib/utils.js";
 function f({ ...e }) {
-  return /* @__PURE__ */ o(r.Root, { "data-slot": "accordion", ...e });
+  return /* @__PURE__ */ o(n.Root, { "data-slot": "accordion", ...e });
 }
 function u({ className: e, ...t }) {
   return /* @__PURE__ */ o(
-    r.Item,
+    n.Item,
     {
       "data-slot": "accordion-item",
       className: i("border-border border-b last:border-b-0", e),
@@ -16,30 +16,33 @@ function u({ className: e, ...t }) {
     }
   );
 }
-function p({ className: e, children: t, ...n }) {
-  return /* @__PURE__ */ o(r.Header, { className: "flex", children: /* @__PURE__ */ a(
-    r.Trigger,
+function p({ className: e, children: t, ...r }) {
+  return /* @__PURE__ */ o(n.Header, { className: "flex", children: /* @__PURE__ */ a(
+    n.Trigger,
     {
       "data-slot": "accordion-trigger",
       className: i(
-        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "[&[data-state=open]>svg]:rotate-180",
         e
       ),
-      ...n,
+      ...r,
       children: [
         t,
-        /* @__PURE__ */ o(s, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" })
+        /* @__PURE__ */ o(s, { className: "text-muted-foreground pointer-events-none size-4 shrink-0 transition-transform duration-200" })
       ]
     }
   ) });
 }
-function b({ className: e, children: t, ...n }) {
+function b({ className: e, children: t, ...r }) {
   return /* @__PURE__ */ o(
-    r.Content,
+    n.Content,
     {
       "data-slot": "accordion-content",
       className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
-      ...n,
+      ...r,
       children: /* @__PURE__ */ o("div", { className: i("pt-0 pb-4", e), children: t })
     }
   );

package/dist/components/alert/alert.d.ts

@@ -3,7 +3,7 @@ import * as React from "react";
 /**
  * Alert 컴포넌트의 스타일 변형을 정의합니다.
  */
-declare const alertVariants: (props?: ({
+export declare const alertVariants: (props?: ({
     variant?: "default" | "destructive" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
@@ -22,19 +22,18 @@ declare const alertVariants: (props?: ({
  * @param props.variant - 'default' | 'destructive' 스타일 변형
  * @param props.className - 추가 CSS 클래스
  */
-declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
+export declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): import("react/jsx-runtime").JSX.Element;
 /**
  * Alert의 제목을 표시하는 컴포넌트입니다.
  *
  * @param props.className - 추가 CSS 클래스
  * @param props.children - 제목 텍스트
  */
-declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 /**
  * Alert의 상세 설명을 표시하는 컴포넌트입니다.
  *
  * @param props.className - 추가 CSS 클래스
  * @param props.children - 설명 내용
  */
-declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-export { Alert, AlertTitle, AlertDescription };
+export declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/components/alert/alert.js

@@ -5,7 +5,7 @@ import { cn as a } from "../../lib/utils.js";
 const l = i(
   [
     "relative w-full grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr]",
-    "px-4 py-3 gap-y-0.5 has-[>svg]:gap-x-3",
+    "px-4 py-3 gap-y-1 has-[>svg]:gap-x-3",
     "border-border border rounded-lg",
     "text-sm",
     "items-start",
@@ -52,5 +52,6 @@ function u({ className: t, ...r }) {
 export {
   g as Alert,
   u as AlertDescription,
-  m as AlertTitle
+  m as AlertTitle,
+  l as alertVariants
 };

package/dist/components/alert-dialog/alert-dialog.d.ts

@@ -23,27 +23,37 @@ import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
  * </AlertDialog>
  * ```
  */
-declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
+export type AlertDialogProps = React.ComponentProps<typeof AlertDialogPrimitive.Root>;
+export declare function AlertDialog({ ...props }: AlertDialogProps): import("react/jsx-runtime").JSX.Element;
+export type AlertDialogTriggerProps = React.ComponentProps<typeof AlertDialogPrimitive.Trigger>;
+export declare function AlertDialogTrigger({ ...props }: AlertDialogTriggerProps): import("react/jsx-runtime").JSX.Element;
+export type AlertDialogPortalProps = React.ComponentProps<typeof AlertDialogPrimitive.Portal>;
+export declare function AlertDialogPortal({ ...props }: AlertDialogPortalProps): import("react/jsx-runtime").JSX.Element;
+export type AlertDialogOverlayProps = React.ComponentProps<typeof AlertDialogPrimitive.Overlay>;
+export declare function AlertDialogOverlay({ className, ...props }: AlertDialogOverlayProps): import("react/jsx-runtime").JSX.Element;
+export type AlertDialogContentProps = React.ComponentProps<typeof AlertDialogPrimitive.Content>;
 /**
  * AlertDialog의 메인 콘텐츠 영역입니다.
  * 자동으로 Overlay와 Portal을 포함합니다.
  */
-declare function AlertDialogContent({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;
-declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Description>): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDialogContent({ className, ...props }: AlertDialogContentProps): import("react/jsx-runtime").JSX.Element;
+export type AlertDialogHeaderProps = React.ComponentProps<"div">;
+export declare function AlertDialogHeader({ className, ...props }: AlertDialogHeaderProps): import("react/jsx-runtime").JSX.Element;
+export type AlertDialogFooterProps = React.ComponentProps<"div">;
+export declare function AlertDialogFooter({ className, ...props }: AlertDialogFooterProps): import("react/jsx-runtime").JSX.Element;
+export type AlertDialogTitleProps = React.ComponentProps<typeof AlertDialogPrimitive.Title>;
+export declare function AlertDialogTitle({ className, ...props }: AlertDialogTitleProps): import("react/jsx-runtime").JSX.Element;
+export type AlertDialogDescriptionProps = React.ComponentProps<typeof AlertDialogPrimitive.Description>;
+export declare function AlertDialogDescription({ className, ...props }: AlertDialogDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export type AlertDialogActionProps = React.ComponentProps<typeof AlertDialogPrimitive.Action>;
 /**
  * AlertDialog의 확인 버튼입니다.
  * 클릭 시 다이얼로그가 닫히고 지정된 액션이 실행됩니다.
  */
-declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Action>): import("react/jsx-runtime").JSX.Element;
+export declare function AlertDialogAction({ className, ...props }: AlertDialogActionProps): import("react/jsx-runtime").JSX.Element;
+export type AlertDialogCancelProps = React.ComponentProps<typeof AlertDialogPrimitive.Cancel>;
 /**
  * AlertDialog의 취소 버튼입니다.
  * 클릭 시 다이얼로그가 닫히고 아무 작업도 수행하지 않습니다.
  */
-declare function AlertDialogCancel({ className, ...props }: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>): import("react/jsx-runtime").JSX.Element;
-export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };
+export declare function AlertDialogCancel({ className, ...props }: AlertDialogCancelProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/alert-dialog/alert-dialog.js

@@ -18,7 +18,8 @@ function s({ className: t, ...a }) {
     {
       "data-slot": "alert-dialog-overlay",
       className: l(
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        "fixed inset-0 z-50 bg-black/50",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
         t
       ),
       ...a
@@ -73,10 +74,7 @@ function D({ className: t, ...a }) {
     }
   );
 }
-function b({
-  className: t,
-  ...a
-}) {
+function b({ className: t, ...a }) {
   return /* @__PURE__ */ e(
     o.Description,
     {

package/dist/components/avatar/avatar.d.ts

@@ -1,5 +1,9 @@
+import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
+export declare const avatarVariants: (props?: ({
+    size?: 8 | 12 | 10 | 9 | 6 | 5 | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
  * 사용자의 프로필 이미지나 이니셜을 표시하는 아바타 컴포넌트입니다.
  *
@@ -11,7 +15,9 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar";
  * </Avatar>
  * ```
  */
-declare function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>): import("react/jsx-runtime").JSX.Element;
-declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>): import("react/jsx-runtime").JSX.Element;
-export { Avatar, AvatarImage, AvatarFallback };
+export type AvatarProps = React.ComponentProps<typeof AvatarPrimitive.Root> & VariantProps<typeof avatarVariants>;
+export declare function Avatar({ className, size, ...props }: AvatarProps): import("react/jsx-runtime").JSX.Element;
+export type AvatarImageProps = React.ComponentProps<typeof AvatarPrimitive.Image>;
+export declare function AvatarImage({ className, ...props }: AvatarImageProps): import("react/jsx-runtime").JSX.Element;
+export type AvatarFallbackProps = React.ComponentProps<typeof AvatarPrimitive.Fallback>;
+export declare function AvatarFallback({ className, ...props }: AvatarFallbackProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/avatar/avatar.js

@@ -1,54 +1,55 @@
 import { jsx as e } from "react/jsx-runtime";
 import "react";
 import * as r from "@radix-ui/react-avatar";
-import { cn as l } from "../../lib/utils.js";
-function m({
-  className: a,
-  ...t
-}) {
+import { cva as o } from "class-variance-authority";
+import { cn as s } from "../../lib/utils.js";
+const l = o("group relative flex shrink-0 overflow-clip rounded-full", {
+  variants: {
+    size: {
+      12: "size-12",
+      10: "size-10",
+      9: "size-9",
+      8: "size-8",
+      6: "size-6",
+      5: "size-5"
+    }
+  },
+  defaultVariants: {
+    size: 8
+  }
+});
+function c({ className: t, size: a, ...i }) {
   return /* @__PURE__ */ e(
     r.Root,
     {
       "data-slot": "avatar",
-      className: l(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
-        a
-      ),
-      ...t
+      "data-size": a ?? 8,
+      className: s(l({ size: a, className: t })),
+      ...i
     }
   );
 }
-function n({
-  className: a,
-  ...t
-}) {
-  return /* @__PURE__ */ e(
-    r.Image,
-    {
-      "data-slot": "avatar-image",
-      className: l("aspect-square size-full", a),
-      ...t
-    }
-  );
+function v({ className: t, ...a }) {
+  return /* @__PURE__ */ e(r.Image, { "data-slot": "avatar-image", className: s("aspect-square size-full", t), ...a });
 }
-function f({
-  className: a,
-  ...t
-}) {
+function d({ className: t, ...a }) {
   return /* @__PURE__ */ e(
     r.Fallback,
     {
       "data-slot": "avatar-fallback",
-      className: l(
-        "bg-muted flex size-full items-center justify-center rounded-full",
-        a
+      className: s(
+        "flex size-full items-center justify-center rounded-full",
+        "bg-muted text-foreground text-sm",
+        "group-data-[size='5']:text-xs",
+        t
       ),
-      ...t
+      ...a
     }
   );
 }
 export {
-  m as Avatar,
-  f as AvatarFallback,
-  n as AvatarImage
+  c as Avatar,
+  d as AvatarFallback,
+  v as AvatarImage,
+  l as avatarVariants
 };

package/dist/components/badge/badge.js

@@ -6,8 +6,8 @@ import { cn as s } from "../../lib/utils.js";
 const d = n(
   [
     "inline-flex items-center justify-center px-2 py-0.5 w-fit shrink-0 gap-1 overflow-hidden",
-    "text-xs font-medium whitespace-nowrap",
-    "rounded-full border border-border",
+    "text-xs font-semibold whitespace-nowrap",
+    "rounded-md border border-border",
     "transition-[color,box-shadow]",
     "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
     "aria-invalid:ring-error/20 aria-invalid:border-error",
@@ -32,10 +32,10 @@ const d = n(
     }
   }
 );
-function v({ className: r, variant: e, asChild: o = !1, ...a }) {
+function l({ className: r, variant: e, asChild: o = !1, ...a }) {
   return /* @__PURE__ */ i(o ? t : "span", { "data-slot": "badge", className: s(d({ variant: e }), r), ...a });
 }
 export {
-  v as Badge,
+  l as Badge,
   d as badgeVariants
 };

package/dist/components/breadcrumb/breadcrumb.d.ts

@@ -17,18 +17,17 @@ import * as React from "react";
  * </Breadcrumb>
  * ```
  */
-declare function Breadcrumb({ ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
+export declare function Breadcrumb({ ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
 /** 브레드크럼 아이템들을 감싸는 리스트입니다. */
-declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">): import("react/jsx-runtime").JSX.Element;
 /** 브레드크럼 개별 아이템입니다. */
-declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
 /** 클릭 가능한 브레드크럼 링크입니다. */
-declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
+export declare function BreadcrumbLink({ asChild, className, ...props }: React.ComponentProps<"a"> & {
     asChild?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 /** 현재 페이지를 나타내는 비활성 텍스트입니다. */
-declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
 /** 아이템 사이의 구분자입니다. */
-declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
-declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
-export { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage, BreadcrumbSeparator, BreadcrumbEllipsis, };
+export declare function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;

package/dist/components/breadcrumb/breadcrumb.js

@@ -6,20 +6,20 @@ import { cn as t } from "../../lib/utils.js";
 function f({ ...r }) {
   return /* @__PURE__ */ a("nav", { "aria-label": "breadcrumb", "data-slot": "breadcrumb", ...r });
 }
-function g({ className: r, ...e }) {
+function x({ className: r, ...e }) {
   return /* @__PURE__ */ a(
     "ol",
     {
       "data-slot": "breadcrumb-list",
       className: t(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        "text-muted-foreground flex flex-wrap items-center gap-2.5 text-sm break-words",
         r
       ),
       ...e
     }
   );
 }
-function x({ className: r, ...e }) {
+function g({ className: r, ...e }) {
   return /* @__PURE__ */ a(
     "li",
     {
@@ -67,7 +67,7 @@ function B({
       "data-slot": "breadcrumb-separator",
       role: "presentation",
       "aria-hidden": "true",
-      className: t("[&>svg]:size-3.5", e),
+      className: t("[&>svg]:size-[15px]", e),
       ...n,
       children: r ?? /* @__PURE__ */ a(i, {})
     }
@@ -95,9 +95,9 @@ function k({
 export {
   f as Breadcrumb,
   k as BreadcrumbEllipsis,
-  x as BreadcrumbItem,
+  g as BreadcrumbItem,
   h as BreadcrumbLink,
-  g as BreadcrumbList,
+  x as BreadcrumbList,
   N as BreadcrumbPage,
   B as BreadcrumbSeparator
 };

package/dist/components/button/button.d.ts

@@ -2,10 +2,11 @@ import { VariantProps } from 'class-variance-authority';
 import * as React from "react";
 export declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-xs" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
+    loading?: boolean;
 };
 /**
  * 클릭 가능한 버튼 컴포넌트입니다.
@@ -19,7 +20,8 @@ export type ButtonProps = React.ComponentProps<"button"> & VariantProps<typeof b
  * ```
  *
  * @param props.variant - 버튼 스타일: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
- * @param props.size - 버튼 크기: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-lg'
+ * @param props.size - 버튼 크기: 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm' | 'icon-xs' | 'icon-lg'
  * @param props.asChild - true면 자식 요소로 렌더링 (링크 등)
+ * @param props.loading - true면 로딩 스피너 표시 및 비활성화
  */
-export declare function Button({ className, variant, size, asChild, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ className, variant, size, asChild, loading, children, disabled, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/button/button.js

@@ -1,13 +1,15 @@
-import { jsx as n } from "react/jsx-runtime";
+import { jsx as u, jsxs as l } from "react/jsx-runtime";
 import "react";
-import { Slot as a } from "@radix-ui/react-slot";
-import { cva as s } from "class-variance-authority";
-import { cn as d } from "../../lib/utils.js";
-const g = s(
+import { Slot as b } from "@radix-ui/react-slot";
+import { cva as p } from "class-variance-authority";
+import { cn as c } from "../../lib/utils.js";
+import { Spinner as v } from "../spinner/spinner.js";
+const g = p(
   [
     "inline-flex items-center justify-center gap-2 shrink-0 rounded-md",
     "whitespace-nowrap text-sm font-medium",
     "transition-all",
+    "active:opacity-60",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
     "outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
@@ -39,6 +41,7 @@ const g = s(
         lg: ["h-10 rounded-md px-6", "has-[>svg]:px-4"],
         icon: ["size-9"],
         "icon-sm": ["size-8"],
+        "icon-xs": ["size-6 p-1"],
         "icon-lg": ["size-10"]
       }
     },
@@ -48,19 +51,45 @@ const g = s(
     }
   }
 );
-function f({ className: o, variant: r = "default", size: e = "default", asChild: i = !1, ...t }) {
-  return /* @__PURE__ */ n(
-    i ? a : "button",
+function z({
+  className: t,
+  variant: r = "default",
+  size: e = "default",
+  asChild: i = !1,
+  loading: o = !1,
+  children: n,
+  disabled: a,
+  ...s
+}) {
+  const d = i ? b : "button";
+  return i ? /* @__PURE__ */ u(
+    d,
     {
       "data-slot": "button",
       "data-variant": r,
       "data-size": e,
-      className: d(g({ variant: r, size: e, className: o })),
-      ...t
+      disabled: a || o,
+      className: c(g({ variant: r, size: e, className: t })),
+      ...s,
+      children: n
+    }
+  ) : /* @__PURE__ */ l(
+    d,
+    {
+      "data-slot": "button",
+      "data-variant": r,
+      "data-size": e,
+      disabled: a || o,
+      className: c(g({ variant: r, size: e, className: t })),
+      ...s,
+      children: [
+        o && /* @__PURE__ */ u(v, { className: "size-4" }),
+        n
+      ]
     }
   );
 }
 export {
-  f as Button,
+  z as Button,
   g as buttonVariants
 };

package/dist/components/card/card.d.ts

@@ -14,11 +14,10 @@ import * as React from "react";
  * </Card>
  * ```
  */
-declare function Card({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function CardAction({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function CardContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };
+export declare function Card({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare function CardAction({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare function CardContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;

package/dist/components/card/card.js

@@ -22,7 +22,7 @@ function c({ className: t, ...r }) {
     {
       "data-slot": "card-header",
       className: o(
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
         t
       ),
       ...r

package/dist/components/checkbox/checkbox.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+export type CheckboxProps = React.ComponentProps<typeof CheckboxPrimitive.Root>;
 /**
  * 선택/해제가 가능한 체크박스 컴포넌트입니다.
  *
@@ -9,5 +10,4 @@ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
  * <label htmlFor="terms">이용약관에 동의합니다</label>
  * ```
  */
-declare function Checkbox({ className, checked, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
-export { Checkbox };
+export declare function Checkbox({ className, checked, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/collapsible/collapsible.d.ts

@@ -15,4 +15,7 @@ declare function Collapsible({ ...props }: React.ComponentProps<typeof Collapsib
 declare function CollapsibleTrigger({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): import("react/jsx-runtime").JSX.Element;
 /** 접혔다 펼쳐지는 콘텐츠 영역입니다. */
 declare function CollapsibleContent({ ...props }: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): import("react/jsx-runtime").JSX.Element;
+export type CollapsibleProps = React.ComponentProps<typeof CollapsiblePrimitive.Root>;
+export type CollapsibleTriggerProps = React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>;
+export type CollapsibleContentProps = React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>;
 export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/components/collapsible/collapsible.js

@@ -1,31 +1,13 @@
 import { jsx as o } from "react/jsx-runtime";
 import * as t from "@radix-ui/react-collapsible";
-function i({
-  ...l
-}) {
+function i({ ...l }) {
   return /* @__PURE__ */ o(t.Root, { "data-slot": "collapsible", ...l });
 }
-function r({
-  ...l
-}) {
-  return /* @__PURE__ */ o(
-    t.CollapsibleTrigger,
-    {
-      "data-slot": "collapsible-trigger",
-      ...l
-    }
-  );
+function r({ ...l }) {
+  return /* @__PURE__ */ o(t.CollapsibleTrigger, { "data-slot": "collapsible-trigger", ...l });
 }
-function a({
-  ...l
-}) {
-  return /* @__PURE__ */ o(
-    t.CollapsibleContent,
-    {
-      "data-slot": "collapsible-content",
-      ...l
-    }
-  );
+function a({ ...l }) {
+  return /* @__PURE__ */ o(t.CollapsibleContent, { "data-slot": "collapsible-content", ...l });
 }
 export {
   i as Collapsible,