@axis-ds/ui-react 1.3.0 → 1.5.0

package/README.md

@@ -10,6 +10,26 @@ npm install @axis-ds/ui-react @axis-ds/tokens @axis-ds/theme
 pnpm add @axis-ds/ui-react @axis-ds/tokens @axis-ds/theme
 ```
 
+## Tailwind 연동
+
+### Tailwind CSS 4
+
+Tailwind CSS 4(`@import "tailwindcss"`, create-next-app 15.5 기본)에서는 `@import "tailwindcss"` 가 있는 전역 CSS 에 두 줄을 더합니다.
+
+```css
+/* app/globals.css */
+@import "tailwindcss";
+@import "@axis-ds/tokens/css/tailwind4";
+@import "@axis-ds/ui-react/tailwind.css";
+```
+
+- `@axis-ds/ui-react/tailwind.css` 는 스타일 규칙 없이 `@source "./dist"` 한 줄만 담습니다. Tailwind 4 는 `node_modules` 를 스캔하지 않아서, 이 줄이 없으면 컴포넌트가 쓰는 `bg-[var(--axis-button-bg-default)]` 같은 클래스가 생성되지 않고 Button 배경이 투명해집니다. 경로는 파일 기준 상대 경로라 npm · pnpm 설치 모두 동작합니다.
+- `@import "tailwindcss"` 가 있는 같은 파일에서 import 합니다. 다른 CSS 파일이나 JS/TSX 에서 import 하면 스캔 경로가 그 컴파일에 들어가지 않습니다.
+- `@axis-ds/tokens/css/tailwind4` 는 `rounded-md` · `font-mono` 등을 AXIS 변수로 매핑하고 토큰 변수(`css` · `css/shadcn`)를 base 레이어로 함께 불러옵니다. 아래 Tailwind 3 의 `@axis-ds/tokens/css/shadcn` import 는 넣지 않습니다(레이어 없이 넣으면 `border-red-500` 같은 테두리색 유틸리티가 무효가 됩니다). 브랜드 CSS · create-next-app 기본 `:root` 와의 충돌은 `@axis-ds/tokens` README 를 참고하세요.
+- `@axis-ds/agentic-ui` 도 쓰면 `@import "@axis-ds/agentic-ui/tailwind.css";` 를 함께 넣습니다.
+
+### Tailwind CSS 3
+
 CSS Variables 설정:
 
 ```css
@@ -17,6 +37,15 @@ CSS Variables 설정:
 @import '@axis-ds/tokens/css/shadcn';
 ```
 
+`tailwind.config` 에는 `@axis-ds/tokens/tailwind` preset 과 함께 컴포넌트 파일을 `content` 에 넣습니다.
+
+```js
+content: [
+  "./src/**/*.{js,ts,jsx,tsx}",
+  "./node_modules/@axis-ds/ui-react/**/*.{js,jsx}",
+],
+```
+
 ## 사용법
 
 ```tsx
@@ -29,6 +58,51 @@ export default function App() {
 }
 ```
 
+## 서버 컴포넌트 (Next.js App Router)
+
+1.5.0 부터 `"use client"` 를 쓰지 않은 서버 컴포넌트(create-next-app 기본 `app/page.tsx` · `app/layout.tsx`)에서 바로 import 해 렌더할 수 있습니다. 루트(`@axis-ds/ui-react`)와 서브패스(`@axis-ds/ui-react/button` 등) 결과가 같습니다.
+
+```tsx
+// app/page.tsx (서버 컴포넌트)
+import { Avatar, Button, Card, buttonVariants, cn } from '@axis-ds/ui-react';
+
+export default function Page() {
+  return (
+    <Card className={cn('p-6')}>
+      <Avatar src="/me.png" alt="프로필" fallback="AX" />
+      <Button>저장</Button>
+      <a className={buttonVariants({ variant: 'outline' })} href="/docs">문서</a>
+    </Card>
+  );
+}
+```
+
+**클라이언트 경계가 있는 컴포넌트**: 아래는 패키지 안에 `"use client"` 경계가 있어 서버 컴포넌트가 렌더하면 그 부분만 브라우저에서 hydrate 됩니다. 쓰는 쪽에서 따로 할 일은 없습니다.
+
+| 경계 | 컴포넌트 |
+|---|---|
+| 모듈 전체(패키지 `dist` 파일에 `"use client"`) | `Avatar`(이미지 로드 오류 상태와 대체 표시), `Command` · `CommandInput` · `CommandList` · `CommandEmpty` · `CommandGroup` · `CommandItem` · `CommandSeparator`(cmdk) |
+| Radix 부분만(Radix 패키지 자체의 `"use client"`) | Accordion · Checkbox · Collapsible · Dialog · Dropdown Menu · Label · Popover · Radio Group · Scroll Area · Select · Separator · Sheet · Slider · Switch · Tabs · Toast · Toggle · Tooltip. 래퍼는 서버에서 렌더되고 Radix 부분이 클라이언트 참조가 됩니다 |
+| 없음(서버에서 렌더) | Alert · Badge · Breadcrumb · Button · Card · Input · Progress · Skeleton · Table · Textarea |
+
+판단 기준은 `useState` · `useEffect` · `useContext` · `createContext` 같은 클라이언트 전용 API, DOM 이벤트 핸들러를 직접 만드는 코드, `"use client"` 모듈 내보내기의 점 접근(`Command.Input` 등)입니다. 지시문을 붙이는 파일 목록은 패키지 소스 `scripts/client-modules.mjs` 한 곳에서 관리합니다.
+
+**서버에서 호출할 수 있는 함수**: `cn` 과 `*Variants` 7개(`alertVariants` · `avatarVariants` · `badgeVariants` · `buttonVariants` · `progressVariants` · `progressIndicatorVariants` · `toggleVariants`), 합 8개 함수는 서버 컴포넌트에서 직접 호출할 수 있습니다. 이 함수들을 담은 파일과 루트 배럴에는 `"use client"` 를 두지 않습니다. `avatarVariants` 는 `Avatar` 컴포넌트와 파일을 나눠 서버 호출을 유지했습니다(import 경로 · 이름은 그대로).
+
+**서버 컴포넌트에서 함수 prop 은 넘길 수 없습니다**: `onClick` · `onCheckedChange` · `onSelect` 같은 함수는 서버에서 클라이언트로 직렬화할 수 없어 React 가 오류를 냅니다(React Server Components 규칙이며 이 패키지의 제약이 아닙니다). 핸들러가 필요하면 그 부분을 `"use client"` 파일로 만들고 그 안에서 AXIS 컴포넌트를 씁니다.
+
+```tsx
+// app/save-button.tsx
+'use client';
+import { Button } from '@axis-ds/ui-react';
+
+export function SaveButton() {
+  return <Button onClick={() => console.log('저장')}>저장</Button>;
+}
+```
+
+- 서버 컴포넌트가 루트 배럴을 import 하면 Radix 컴포넌트의 클라이언트 참조가 함께 실려 First Load JS 가 커질 수 있습니다(1.4.0 에도 있던 현상). 크기가 중요하면 서브패스(`@axis-ds/ui-react/button`)로 import 합니다.
+
 ## 컴포넌트 목록
 
 Accordion, Alert, Avatar, Breadcrumb, Button, Card, Checkbox, Collapsible, Command, Dialog, Dropdown Menu, Input, Popover, Progress, Radio Group, Scroll Area, Sheet, Skeleton, Slider, Switch, Table, Textarea, Toggle, Tooltip

package/dist/accordion/index.js

@@ -26,8 +26,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/accordion/index.tsx
 var accordion_exports = {};
 __export(accordion_exports, {
   Accordion: () => Accordion,
@@ -36,41 +34,25 @@ __export(accordion_exports, {
   AccordionTrigger: () => AccordionTrigger
 });
 module.exports = __toCommonJS(accordion_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var AccordionPrimitive = __toESM(require("@radix-ui/react-accordion"));
-
-// src/utils.ts
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-var isArbitraryShadowWithHint = (value) => /^\[shadow:.+\]$/.test(value);
-var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
-  extend: {
-    classGroups: {
-      shadow: [{ shadow: [isArbitraryShadowWithHint] }]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge((0, import_clsx.clsx)(inputs));
-}
-
-// src/accordion/index.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Accordion = AccordionPrimitive.Root;
-var AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var import_utils = require("../utils.js");
+const Accordion = AccordionPrimitive.Root;
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   AccordionPrimitive.Item,
   {
     ref,
-    className: cn("border-b border-[var(--axis-border-default)]", className),
+    className: (0, import_utils.cn)("border-b border-[var(--axis-border-default)]", className),
     ...props
   }
 ));
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
   AccordionPrimitive.Trigger,
   {
     ref,
-    className: cn(
+    className: (0, import_utils.cn)(
       "flex flex-1 items-center justify-between py-4 font-medium transition-all",
       "text-[var(--axis-text-primary)]",
       "hover:underline",
@@ -100,13 +82,13 @@ var AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref)
   }
 ) }));
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   AccordionPrimitive.Content,
   {
     ref,
     className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: cn("pb-4 pt-0", className), children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_utils.cn)("pb-4 pt-0", className), children })
   }
 ));
 AccordionContent.displayName = "AccordionContent";

package/dist/accordion/index.mjs

@@ -1,10 +1,61 @@
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger
-} from "../chunk-2OEPKE4D.mjs";
-import "../chunk-ZIF4PLK3.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { cn } from "../utils.mjs";
+const Accordion = AccordionPrimitive.Root;
+const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Item,
+  {
+    ref,
+    className: cn("border-b border-[var(--axis-border-default)]", className),
+    ...props
+  }
+));
+AccordionItem.displayName = "AccordionItem";
+const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+  AccordionPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex flex-1 items-center justify-between py-4 font-medium transition-all",
+      "text-[var(--axis-text-primary)]",
+      "hover:underline",
+      "[&[data-state=open]>svg]:rotate-180",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          className: "shrink-0 text-[var(--axis-text-secondary)] transition-transform duration-200",
+          children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+        }
+      )
+    ]
+  }
+) }));
+AccordionTrigger.displayName = "AccordionTrigger";
+const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+  AccordionPrimitive.Content,
+  {
+    ref,
+    className: "overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    ...props,
+    children: /* @__PURE__ */ jsx("div", { className: cn("pb-4 pt-0", className), children })
+  }
+));
+AccordionContent.displayName = "AccordionContent";
 export {
   Accordion,
   AccordionContent,

package/dist/alert/index.js

@@ -26,8 +26,6 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/alert/index.tsx
 var alert_exports = {};
 __export(alert_exports, {
   Alert: () => Alert,
@@ -36,27 +34,11 @@ __export(alert_exports, {
   alertVariants: () => alertVariants
 });
 module.exports = __toCommonJS(alert_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var import_class_variance_authority = require("class-variance-authority");
-
-// src/utils.ts
-var import_clsx = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-var isArbitraryShadowWithHint = (value) => /^\[shadow:.+\]$/.test(value);
-var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
-  extend: {
-    classGroups: {
-      shadow: [{ shadow: [isArbitraryShadowWithHint] }]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge((0, import_clsx.clsx)(inputs));
-}
-
-// src/alert/index.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var alertVariants = (0, import_class_variance_authority.cva)(
+var import_utils = require("../utils.js");
+const alertVariants = (0, import_class_variance_authority.cva)(
   "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-current",
   {
     // 아이콘은 기본 클래스 [&>svg]:text-current로 변형의 글자색(text-*)을 따른다.
@@ -76,32 +58,32 @@ var alertVariants = (0, import_class_variance_authority.cva)(
     }
   }
 );
-var Alert = React.forwardRef(
+const Alert = React.forwardRef(
   ({ className, variant, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
       ref,
       role: "alert",
-      className: cn(alertVariants({ variant }), className),
+      className: (0, import_utils.cn)(alertVariants({ variant }), className),
       ...props
     }
   )
 );
 Alert.displayName = "Alert";
-var AlertTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "h5",
   {
     ref,
-    className: cn("mb-1 font-medium leading-none tracking-tight", className),
+    className: (0, import_utils.cn)("mb-1 font-medium leading-none tracking-tight", className),
     ...props
   }
 ));
 AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   "div",
   {
     ref,
-    className: cn("text-sm [&_p]:leading-relaxed", className),
+    className: (0, import_utils.cn)("text-sm [&_p]:leading-relaxed", className),
     ...props
   }
 ));

package/dist/alert/index.mjs

@@ -1,10 +1,57 @@
-import {
-  Alert,
-  AlertDescription,
-  AlertTitle,
-  alertVariants
-} from "../chunk-Z4P43F5J.mjs";
-import "../chunk-ZIF4PLK3.mjs";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../utils.mjs";
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-current",
+  {
+    // 아이콘은 기본 클래스 [&>svg]:text-current로 변형의 글자색(text-*)을 따른다.
+    // 라이트 icon-success(#22C55E) · icon-warning(#EAB308)은 상태 배경 대비가 2.18:1 · 1.85:1로
+    // 비텍스트 기준 3:1에 못 미치므로 아이콘 색에 쓰지 않는다(글자색은 4.76:1 이상).
+    variants: {
+      variant: {
+        default: "bg-[var(--axis-surface-default)] text-[var(--axis-text-primary)] border-[var(--axis-border-default)]",
+        info: "bg-[var(--axis-surface-info)] text-[var(--axis-text-info)] border-[var(--axis-border-info)]",
+        success: "bg-[var(--axis-surface-success)] text-[var(--axis-text-success)] border-[var(--axis-border-success)]",
+        warning: "bg-[var(--axis-surface-warning)] text-[var(--axis-text-warning)] border-[var(--axis-border-warning)]",
+        destructive: "bg-[var(--axis-surface-error)] text-[var(--axis-text-error)] border-[var(--axis-border-error)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+const Alert = React.forwardRef(
+  ({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      role: "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props
+    }
+  )
+);
+Alert.displayName = "Alert";
+const AlertTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "h5",
+  {
+    ref,
+    className: cn("mb-1 font-medium leading-none tracking-tight", className),
+    ...props
+  }
+));
+AlertTitle.displayName = "AlertTitle";
+const AlertDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn("text-sm [&_p]:leading-relaxed", className),
+    ...props
+  }
+));
+AlertDescription.displayName = "AlertDescription";
 export {
   Alert,
   AlertDescription,

package/dist/avatar/avatar.d.mts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { avatarVariants } from './variants.mjs';
+import 'class-variance-authority/types';
+
+/**
+ * Avatar 컴포넌트 Props
+ * @property size - 아바타 크기 (sm, default, lg, xl)
+ */
+interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
+    /** 이미지 소스 URL */
+    src?: string;
+    /** 대체 텍스트 */
+    alt?: string;
+    /** 이미지 로드 실패 시 표시할 fallback 텍스트 */
+    fallback?: string;
+}
+/**
+ * 사용자 프로필 이미지를 표시하는 아바타 컴포넌트
+ * 이미지 로드 실패 시 이니셜 fallback을 표시한다.
+ */
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Avatar, type AvatarProps };

package/dist/avatar/avatar.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { avatarVariants } from './variants.js';
+import 'class-variance-authority/types';
+
+/**
+ * Avatar 컴포넌트 Props
+ * @property size - 아바타 크기 (sm, default, lg, xl)
+ */
+interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
+    /** 이미지 소스 URL */
+    src?: string;
+    /** 대체 텍스트 */
+    alt?: string;
+    /** 이미지 로드 실패 시 표시할 fallback 텍스트 */
+    fallback?: string;
+}
+/**
+ * 사용자 프로필 이미지를 표시하는 아바타 컴포넌트
+ * 이미지 로드 실패 시 이니셜 fallback을 표시한다.
+ */
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Avatar, type AvatarProps };

package/dist/avatar/avatar.js

@@ -0,0 +1,70 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var avatar_exports = {};
+__export(avatar_exports, {
+  Avatar: () => Avatar
+});
+module.exports = __toCommonJS(avatar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var React = __toESM(require("react"));
+var import_utils = require("../utils.js");
+var import_variants = require("./variants.js");
+const Avatar = React.forwardRef(
+  ({ className, size, src, alt, fallback, ...props }, ref) => {
+    const [hasError, setHasError] = React.useState(false);
+    const initials = React.useMemo(() => {
+      if (fallback) return fallback;
+      if (!alt) return "?";
+      return alt.split(" ").map((word) => word[0]).join("").toUpperCase().slice(0, 2);
+    }, [alt, fallback]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_utils.cn)((0, import_variants.avatarVariants)({ size, className })),
+        ...props,
+        children: src && !hasError ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "img",
+          {
+            src,
+            alt: alt || "Avatar",
+            className: "aspect-square h-full w-full object-cover",
+            onError: () => setHasError(true)
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex h-full w-full items-center justify-center bg-[var(--axis-surface-tertiary)] text-[var(--axis-text-secondary)] font-medium", children: initials })
+      }
+    );
+  }
+);
+Avatar.displayName = "Avatar";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Avatar
+});

package/dist/{chunk-OQGMQL2A.mjs → avatar/avatar.mjs}

@@ -1,28 +1,9 @@
-import {
-  cn
-} from "./chunk-ZIF4PLK3.mjs";
-
-// src/avatar/index.tsx
-import * as React from "react";
-import { cva } from "class-variance-authority";
+"use client";
 import { jsx } from "react/jsx-runtime";
-var avatarVariants = cva(
-  "relative flex shrink-0 overflow-hidden rounded-full bg-[var(--axis-surface-secondary)]",
-  {
-    variants: {
-      size: {
-        sm: "h-8 w-8 text-xs",
-        default: "h-10 w-10 text-sm",
-        lg: "h-12 w-12 text-base",
-        xl: "h-16 w-16 text-lg"
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var Avatar = React.forwardRef(
+import * as React from "react";
+import { cn } from "../utils.mjs";
+import { avatarVariants } from "./variants.mjs";
+const Avatar = React.forwardRef(
   ({ className, size, src, alt, fallback, ...props }, ref) => {
     const [hasError, setHasError] = React.useState(false);
     const initials = React.useMemo(() => {
@@ -50,8 +31,6 @@ var Avatar = React.forwardRef(
   }
 );
 Avatar.displayName = "Avatar";
-
 export {
-  avatarVariants,
   Avatar
 };

package/dist/avatar/index.d.mts

@@ -1,26 +1,5 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import * as React from 'react';
-import { VariantProps } from 'class-variance-authority';
-
-declare const avatarVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | "xl" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-/**
- * Avatar 컴포넌트 Props
- * @property size - 아바타 크기 (sm, default, lg, xl)
- */
-interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
-    /** 이미지 소스 URL */
-    src?: string;
-    /** 대체 텍스트 */
-    alt?: string;
-    /** 이미지 로드 실패 시 표시할 fallback 텍스트 */
-    fallback?: string;
-}
-/**
- * 사용자 프로필 이미지를 표시하는 아바타 컴포넌트
- * 이미지 로드 실패 시 이니셜 fallback을 표시한다.
- */
-declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
-
-export { Avatar, type AvatarProps, avatarVariants };
+export { Avatar, AvatarProps } from './avatar.mjs';
+export { avatarVariants } from './variants.mjs';
+import 'react';
+import 'class-variance-authority';
+import 'class-variance-authority/types';

package/dist/avatar/index.d.ts

@@ -1,26 +1,5 @@
-import * as class_variance_authority_types from 'class-variance-authority/types';
-import * as React from 'react';
-import { VariantProps } from 'class-variance-authority';
-
-declare const avatarVariants: (props?: ({
-    size?: "default" | "sm" | "lg" | "xl" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-/**
- * Avatar 컴포넌트 Props
- * @property size - 아바타 크기 (sm, default, lg, xl)
- */
-interface AvatarProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarVariants> {
-    /** 이미지 소스 URL */
-    src?: string;
-    /** 대체 텍스트 */
-    alt?: string;
-    /** 이미지 로드 실패 시 표시할 fallback 텍스트 */
-    fallback?: string;
-}
-/**
- * 사용자 프로필 이미지를 표시하는 아바타 컴포넌트
- * 이미지 로드 실패 시 이니셜 fallback을 표시한다.
- */
-declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
-
-export { Avatar, type AvatarProps, avatarVariants };
+export { Avatar, AvatarProps } from './avatar.js';
+export { avatarVariants } from './variants.js';
+import 'react';
+import 'class-variance-authority';
+import 'class-variance-authority/types';