@karakuri-ui/react 0.3.3 → 0.3.4

package/dist/components/ui/alert.mjs

@@ -1,12 +1,28 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils";
-const InfoIcon = ({ className }) => /* @__PURE__ */ React.createElement("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React.createElement("path", { d: "M12 16v-4" }), /* @__PURE__ */ React.createElement("path", { d: "M12 8h.01" }));
-const SuccessIcon = ({ className }) => /* @__PURE__ */ React.createElement("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React.createElement("path", { d: "m9 12 2 2 4-4" }));
-const WarningIcon = ({ className }) => /* @__PURE__ */ React.createElement("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }), /* @__PURE__ */ React.createElement("path", { d: "M12 9v4" }), /* @__PURE__ */ React.createElement("path", { d: "M12 17h.01" }));
-const ErrorIcon = ({ className }) => /* @__PURE__ */ React.createElement("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "10" }), /* @__PURE__ */ React.createElement("path", { d: "M12 8v5" }), /* @__PURE__ */ React.createElement("path", { d: "M12 16h.01" }));
-const DefaultCloseIcon = ({ className }) => /* @__PURE__ */ React.createElement("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }));
+const InfoIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+] });
+const SuccessIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx("path", { d: "m9 12 2 2 4-4" })
+] });
+const WarningIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+] });
+const ErrorIcon = ({ className }) => /* @__PURE__ */ jsxs("svg", { className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 8v5" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 16h.01" })
+] });
+const DefaultCloseIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) });
 const STATUS_ICONS = {
   info: InfoIcon,
   success: SuccessIcon,
@@ -106,7 +122,7 @@ const Alert = React.forwardRef(
     const role = color === "error" ? "alert" : "status";
     const colorClasses = colorMap[color][variant];
     const StatusIcon = STATUS_ICONS[color];
-    return /* @__PURE__ */ React.createElement(AlertContext.Provider, { value: { variant, color, size } }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(AlertContext.Provider, { value: { variant, color, size }, children: /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
@@ -116,32 +132,34 @@ const Alert = React.forwardRef(
           colorClasses,
           className
         ),
-        ...props
-      },
-      !hideIcon && /* @__PURE__ */ React.createElement("span", { className: "shrink-0" }, icon || /* @__PURE__ */ React.createElement(StatusIcon, { className: ICON_SIZE_MAP[size] })),
-      /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, children),
-      closable && /* @__PURE__ */ React.createElement(
-        "button",
-        {
-          type: "button",
-          className: cn(
-            "shrink-0 rounded-md p-1 opacity-70 hover:opacity-100 transition-opacity focus-visible:focus-ring",
-            "group-has-[[data-alert-description]]:absolute",
-            size === "sm" ? "group-has-[[data-alert-description]]:top-2 group-has-[[data-alert-description]]:right-2" : "group-has-[[data-alert-description]]:top-3 group-has-[[data-alert-description]]:right-3"
-          ),
-          onClick: onClose,
-          "aria-label": "Close"
-        },
-        closeIcon || /* @__PURE__ */ React.createElement(DefaultCloseIcon, { className: "icon-sm" })
-      )
-    ));
+        ...props,
+        children: [
+          !hideIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icon || /* @__PURE__ */ jsx(StatusIcon, { className: ICON_SIZE_MAP[size] }) }),
+          /* @__PURE__ */ jsx("div", { className: "flex-1 min-w-0", children }),
+          closable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "shrink-0 rounded-md p-1 opacity-70 hover:opacity-100 transition-opacity focus-visible:focus-ring",
+                "group-has-[[data-alert-description]]:absolute",
+                size === "sm" ? "group-has-[[data-alert-description]]:top-2 group-has-[[data-alert-description]]:right-2" : "group-has-[[data-alert-description]]:top-3 group-has-[[data-alert-description]]:right-3"
+              ),
+              onClick: onClose,
+              "aria-label": "Close",
+              children: closeIcon || /* @__PURE__ */ jsx(DefaultCloseIcon, { className: "icon-sm" })
+            }
+          )
+        ]
+      }
+    ) });
   }
 );
 Alert.displayName = "Alert";
 const AlertTitle = React.forwardRef(
   ({ className, ...props }, ref) => {
     const { size } = useAlertContext();
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "h5",
       {
         ref,
@@ -155,7 +173,7 @@ AlertTitle.displayName = "AlertTitle";
 const AlertDescription = React.forwardRef(
   ({ className, ...props }, ref) => {
     const { variant, size } = useAlertContext();
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "p",
       {
         ref,

package/dist/components/ui/alert.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/alert.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Built-in status icons (no external dependency) ──────────────\n// All icons: Lucide-compatible 24×24 viewBox, strokeWidth=2, rounded caps/joins\n// Info = circle + \"i\" | Success = circle + check | Warning = triangle + \"!\" | Error = circle + small ×\nconst InfoIcon = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <circle cx=\"12\" cy=\"12\" r=\"10\" />\n    <path d=\"M12 16v-4\" />\n    <path d=\"M12 8h.01\" />\n  </svg>\n)\n\nconst SuccessIcon = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <circle cx=\"12\" cy=\"12\" r=\"10\" />\n    <path d=\"m9 12 2 2 4-4\" />\n  </svg>\n)\n\nconst WarningIcon = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n    <path d=\"M12 9v4\" />\n    <path d=\"M12 17h.01\" />\n  </svg>\n)\n\nconst ErrorIcon = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <circle cx=\"12\" cy=\"12\" r=\"10\" />\n    <path d=\"M12 8v5\" />\n    <path d=\"M12 16h.01\" />\n  </svg>\n)\n\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n)\n\n// ─── Status icon mapping ─────────────────────────────────────────\nconst STATUS_ICONS: Record<AlertColor, React.FC<{ className?: string }>> = {\n  info: InfoIcon,\n  success: SuccessIcon,\n  warning: WarningIcon,\n  error: ErrorIcon,\n}\n\n// ─── Color × Variant class mapping ──────────────────────────────\n// Uses semantic tokens (*.tint, text-text-*) — same pattern as Badge\nconst colorMap = {\n  info: {\n    default: 'bg-info-tint text-text-info border-info/20',\n    outline: 'bg-transparent text-text-info border-info',\n    filled: 'bg-info text-info-foreground border-transparent',\n  },\n  success: {\n    default: 'bg-success-tint text-text-success border-success/20',\n    outline: 'bg-transparent text-text-success border-success',\n    filled: 'bg-success text-success-foreground border-transparent',\n  },\n  warning: {\n    default: 'bg-warning-tint text-text-warning border-warning/20',\n    outline: 'bg-transparent text-text-warning border-warning',\n    filled: 'bg-warning text-warning-foreground border-transparent',\n  },\n  error: {\n    default: 'bg-error-tint text-text-error border-error/20',\n    outline: 'bg-transparent text-text-error border-error',\n    filled: 'bg-error text-error-foreground border-transparent',\n  },\n} as const\n\n// ─── Alert variants ──────────────────────────────────────────────\nconst alertVariants = cva(\n  'group relative flex items-center border w-full [&:has([data-alert-description])]:items-start',\n  {\n    variants: {\n      size: {\n        sm: 'gap-2 p-3 text-sm',\n        default: 'gap-2.5 p-4 text-md',\n        lg: 'gap-3 p-5 text-md',\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      radius: 'lg',\n    },\n  }\n)\n\n// ─── Size-dependent class maps ──────────────────────────────────\nconst ICON_SIZE_MAP = {\n  sm: 'icon-sm',                // 16px\n  default: 'w-[18px] h-[18px]', // 18px — TOKEN-EXCEPTION: no 18px icon token\n  lg: 'icon-md',                // 20px\n} as const\n\nconst TITLE_SIZE_MAP = {\n  sm: 'text-sm font-semibold leading-4 tracking-tight',\n  default: 'font-semibold leading-[18px] tracking-tight',\n  lg: 'text-base font-semibold leading-5 tracking-tight',\n} as const\n\nconst DESC_SIZE_MAP = {\n  sm: 'text-xs mt-0.5',\n  default: 'text-sm mt-1',\n  lg: 'text-md mt-1.5',\n} as const\n\n// ─── Types ───────────────────────────────────────────────────────\nexport type AlertVariant = 'default' | 'outline' | 'filled'\nexport type AlertColor = 'info' | 'success' | 'warning' | 'error'\nexport type AlertSize = 'sm' | 'default' | 'lg'\n\n// ─── Context ─────────────────────────────────────────────────────\ninterface AlertContextValue {\n  variant: AlertVariant\n  color: AlertColor\n  size: AlertSize\n}\n\nconst AlertContext = React.createContext<AlertContextValue>({\n  variant: 'default',\n  color: 'info',\n  size: 'default',\n})\n\nfunction useAlertContext() {\n  return React.useContext(AlertContext)\n}\n\n// ═══════════════════════════════════════════════════════════════════\n// Alert\n// ═══════════════════════════════════════════════════════════════════\n\n// ─── Alert ───────────────────────────────────────────────────────\nexport interface AlertProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {\n  /** Visual style */\n  variant?: AlertVariant\n  /** Semantic color (determines icon, colors, and ARIA role) */\n  color?: AlertColor\n  /** Size */\n  size?: AlertSize\n  /** Closable — shows close button */\n  closable?: boolean\n  /** Close callback */\n  onClose?: () => void\n  /** Custom close icon */\n  closeIcon?: React.ReactNode\n  /** Custom status icon (overrides default) */\n  icon?: React.ReactNode\n  /** Hide the status icon entirely */\n  hideIcon?: boolean\n}\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({\n    className,\n    variant = 'default',\n    color = 'info',\n    size = 'default',\n    radius,\n    closable = false,\n    onClose,\n    closeIcon,\n    icon,\n    hideIcon = false,\n    children,\n    ...props\n  }, ref) => {\n    // error → role=\"alert\" (assertive), others → role=\"status\" (polite)\n    const role = color === 'error' ? 'alert' : 'status'\n    const colorClasses = colorMap[color][variant]\n    const StatusIcon = STATUS_ICONS[color]\n\n    return (\n      <AlertContext.Provider value={{ variant, color, size }}>\n        <div\n          ref={ref}\n          role={role}\n          className={cn(\n            alertVariants({ size, radius }),\n            colorClasses,\n            className,\n          )}\n          {...props}\n        >\n          {/* Icon */}\n          {!hideIcon && (\n            <span className=\"shrink-0\">\n              {icon || <StatusIcon className={ICON_SIZE_MAP[size]} />}\n            </span>\n          )}\n\n          {/* Content area */}\n          <div className=\"flex-1 min-w-0\">\n            {children}\n          </div>\n\n          {/* Close button */}\n          {closable && (\n            <button\n              type=\"button\"\n              className={cn(\n                'shrink-0 rounded-md p-1 opacity-70 hover:opacity-100 transition-opacity focus-visible:focus-ring',\n                'group-has-[[data-alert-description]]:absolute',\n                size === 'sm'\n                  ? 'group-has-[[data-alert-description]]:top-2 group-has-[[data-alert-description]]:right-2'\n                  : 'group-has-[[data-alert-description]]:top-3 group-has-[[data-alert-description]]:right-3',\n              )}\n              onClick={onClose}\n              aria-label=\"Close\"\n            >\n              {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n            </button>\n          )}\n        </div>\n      </AlertContext.Provider>\n    )\n  }\n)\nAlert.displayName = 'Alert'\n\n// ─── AlertTitle ──────────────────────────────────────────────────\nexport interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nconst AlertTitle = React.forwardRef<HTMLHeadingElement, AlertTitleProps>(\n  ({ className, ...props }, ref) => {\n    const { size } = useAlertContext()\n    return (\n      <h5\n        ref={ref}\n        className={cn(TITLE_SIZE_MAP[size], className)}\n        {...props}\n      />\n    )\n  }\n)\nAlertTitle.displayName = 'AlertTitle'\n\n// ─── AlertDescription ────────────────────────────────────────────\nexport interface AlertDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst AlertDescription = React.forwardRef<HTMLParagraphElement, AlertDescriptionProps>(\n  ({ className, ...props }, ref) => {\n    const { variant, size } = useAlertContext()\n    return (\n      <p\n        ref={ref}\n        data-alert-description=\"\"\n        className={cn(\n          DESC_SIZE_MAP[size],\n          variant === 'filled' ? 'opacity-90' : 'opacity-80',\n          className,\n        )}\n        {...props}\n      />\n    )\n  }\n)\nAlertDescription.displayName = 'AlertDescription'\n\n// ─── Exports ─────────────────────────────────────────────────────\nexport {\n  Alert,\n  AlertTitle,\n  AlertDescription,\n  alertVariants,\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/alert.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Built-in status icons (no external dependency) ──────────────\n// All icons: Lucide-compatible 24×24 viewBox, strokeWidth=2, rounded caps/joins\n// Info = circle + \"i\" | Success = circle + check | Warning = triangle + \"!\" | Error = circle + small ×\nconst InfoIcon = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <circle cx=\"12\" cy=\"12\" r=\"10\" />\n    <path d=\"M12 16v-4\" />\n    <path d=\"M12 8h.01\" />\n  </svg>\n)\n\nconst SuccessIcon = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <circle cx=\"12\" cy=\"12\" r=\"10\" />\n    <path d=\"m9 12 2 2 4-4\" />\n  </svg>\n)\n\nconst WarningIcon = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <path d=\"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3\" />\n    <path d=\"M12 9v4\" />\n    <path d=\"M12 17h.01\" />\n  </svg>\n)\n\nconst ErrorIcon = ({ className }: { className?: string }) => (\n  <svg className={className} viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth={2} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <circle cx=\"12\" cy=\"12\" r=\"10\" />\n    <path d=\"M12 8v5\" />\n    <path d=\"M12 16h.01\" />\n  </svg>\n)\n\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n  <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n    <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n  </svg>\n)\n\n// ─── Status icon mapping ─────────────────────────────────────────\nconst STATUS_ICONS: Record<AlertColor, React.FC<{ className?: string }>> = {\n  info: InfoIcon,\n  success: SuccessIcon,\n  warning: WarningIcon,\n  error: ErrorIcon,\n}\n\n// ─── Color × Variant class mapping ──────────────────────────────\n// Uses semantic tokens (*.tint, text-text-*) — same pattern as Badge\nconst colorMap = {\n  info: {\n    default: 'bg-info-tint text-text-info border-info/20',\n    outline: 'bg-transparent text-text-info border-info',\n    filled: 'bg-info text-info-foreground border-transparent',\n  },\n  success: {\n    default: 'bg-success-tint text-text-success border-success/20',\n    outline: 'bg-transparent text-text-success border-success',\n    filled: 'bg-success text-success-foreground border-transparent',\n  },\n  warning: {\n    default: 'bg-warning-tint text-text-warning border-warning/20',\n    outline: 'bg-transparent text-text-warning border-warning',\n    filled: 'bg-warning text-warning-foreground border-transparent',\n  },\n  error: {\n    default: 'bg-error-tint text-text-error border-error/20',\n    outline: 'bg-transparent text-text-error border-error',\n    filled: 'bg-error text-error-foreground border-transparent',\n  },\n} as const\n\n// ─── Alert variants ──────────────────────────────────────────────\nconst alertVariants = cva(\n  'group relative flex items-center border w-full [&:has([data-alert-description])]:items-start',\n  {\n    variants: {\n      size: {\n        sm: 'gap-2 p-3 text-sm',\n        default: 'gap-2.5 p-4 text-md',\n        lg: 'gap-3 p-5 text-md',\n      },\n      radius: {\n        none: 'rounded-none',\n        sm: 'rounded-sm',\n        base: 'rounded',\n        md: 'rounded-md',\n        lg: 'rounded-lg',\n        xl: 'rounded-xl',\n        '2xl': 'rounded-2xl',\n        '3xl': 'rounded-3xl',\n        full: 'rounded-full',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      radius: 'lg',\n    },\n  }\n)\n\n// ─── Size-dependent class maps ──────────────────────────────────\nconst ICON_SIZE_MAP = {\n  sm: 'icon-sm',                // 16px\n  default: 'w-[18px] h-[18px]', // 18px — TOKEN-EXCEPTION: no 18px icon token\n  lg: 'icon-md',                // 20px\n} as const\n\nconst TITLE_SIZE_MAP = {\n  sm: 'text-sm font-semibold leading-4 tracking-tight',\n  default: 'font-semibold leading-[18px] tracking-tight',\n  lg: 'text-base font-semibold leading-5 tracking-tight',\n} as const\n\nconst DESC_SIZE_MAP = {\n  sm: 'text-xs mt-0.5',\n  default: 'text-sm mt-1',\n  lg: 'text-md mt-1.5',\n} as const\n\n// ─── Types ───────────────────────────────────────────────────────\nexport type AlertVariant = 'default' | 'outline' | 'filled'\nexport type AlertColor = 'info' | 'success' | 'warning' | 'error'\nexport type AlertSize = 'sm' | 'default' | 'lg'\n\n// ─── Context ─────────────────────────────────────────────────────\ninterface AlertContextValue {\n  variant: AlertVariant\n  color: AlertColor\n  size: AlertSize\n}\n\nconst AlertContext = React.createContext<AlertContextValue>({\n  variant: 'default',\n  color: 'info',\n  size: 'default',\n})\n\nfunction useAlertContext() {\n  return React.useContext(AlertContext)\n}\n\n// ═══════════════════════════════════════════════════════════════════\n// Alert\n// ═══════════════════════════════════════════════════════════════════\n\n// ─── Alert ───────────────────────────────────────────────────────\nexport interface AlertProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {\n  /** Visual style */\n  variant?: AlertVariant\n  /** Semantic color (determines icon, colors, and ARIA role) */\n  color?: AlertColor\n  /** Size */\n  size?: AlertSize\n  /** Closable — shows close button */\n  closable?: boolean\n  /** Close callback */\n  onClose?: () => void\n  /** Custom close icon */\n  closeIcon?: React.ReactNode\n  /** Custom status icon (overrides default) */\n  icon?: React.ReactNode\n  /** Hide the status icon entirely */\n  hideIcon?: boolean\n}\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({\n    className,\n    variant = 'default',\n    color = 'info',\n    size = 'default',\n    radius,\n    closable = false,\n    onClose,\n    closeIcon,\n    icon,\n    hideIcon = false,\n    children,\n    ...props\n  }, ref) => {\n    // error → role=\"alert\" (assertive), others → role=\"status\" (polite)\n    const role = color === 'error' ? 'alert' : 'status'\n    const colorClasses = colorMap[color][variant]\n    const StatusIcon = STATUS_ICONS[color]\n\n    return (\n      <AlertContext.Provider value={{ variant, color, size }}>\n        <div\n          ref={ref}\n          role={role}\n          className={cn(\n            alertVariants({ size, radius }),\n            colorClasses,\n            className,\n          )}\n          {...props}\n        >\n          {/* Icon */}\n          {!hideIcon && (\n            <span className=\"shrink-0\">\n              {icon || <StatusIcon className={ICON_SIZE_MAP[size]} />}\n            </span>\n          )}\n\n          {/* Content area */}\n          <div className=\"flex-1 min-w-0\">\n            {children}\n          </div>\n\n          {/* Close button */}\n          {closable && (\n            <button\n              type=\"button\"\n              className={cn(\n                'shrink-0 rounded-md p-1 opacity-70 hover:opacity-100 transition-opacity focus-visible:focus-ring',\n                'group-has-[[data-alert-description]]:absolute',\n                size === 'sm'\n                  ? 'group-has-[[data-alert-description]]:top-2 group-has-[[data-alert-description]]:right-2'\n                  : 'group-has-[[data-alert-description]]:top-3 group-has-[[data-alert-description]]:right-3',\n              )}\n              onClick={onClose}\n              aria-label=\"Close\"\n            >\n              {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n            </button>\n          )}\n        </div>\n      </AlertContext.Provider>\n    )\n  }\n)\nAlert.displayName = 'Alert'\n\n// ─── AlertTitle ──────────────────────────────────────────────────\nexport interface AlertTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nconst AlertTitle = React.forwardRef<HTMLHeadingElement, AlertTitleProps>(\n  ({ className, ...props }, ref) => {\n    const { size } = useAlertContext()\n    return (\n      <h5\n        ref={ref}\n        className={cn(TITLE_SIZE_MAP[size], className)}\n        {...props}\n      />\n    )\n  }\n)\nAlertTitle.displayName = 'AlertTitle'\n\n// ─── AlertDescription ────────────────────────────────────────────\nexport interface AlertDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nconst AlertDescription = React.forwardRef<HTMLParagraphElement, AlertDescriptionProps>(\n  ({ className, ...props }, ref) => {\n    const { variant, size } = useAlertContext()\n    return (\n      <p\n        ref={ref}\n        data-alert-description=\"\"\n        className={cn(\n          DESC_SIZE_MAP[size],\n          variant === 'filled' ? 'opacity-90' : 'opacity-80',\n          className,\n        )}\n        {...props}\n      />\n    )\n  }\n)\nAlertDescription.displayName = 'AlertDescription'\n\n// ─── Exports ─────────────────────────────────────────────────────\nexport {\n  Alert,\n  AlertTitle,\n  AlertDescription,\n  alertVariants,\n}\n"],"mappings":";AAUE,SACE,KADF;AARF,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAKnB,MAAM,WAAW,CAAC,EAAE,UAAU,MAC5B,qBAAC,SAAI,WAAsB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAa,GAAG,eAAc,SAAQ,gBAAe,SAAQ,eAAY,QACxJ;AAAA,sBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,EAC/B,oBAAC,UAAK,GAAE,aAAY;AAAA,EACpB,oBAAC,UAAK,GAAE,aAAY;AAAA,GACtB;AAGF,MAAM,cAAc,CAAC,EAAE,UAAU,MAC/B,qBAAC,SAAI,WAAsB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAa,GAAG,eAAc,SAAQ,gBAAe,SAAQ,eAAY,QACxJ;AAAA,sBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,EAC/B,oBAAC,UAAK,GAAE,iBAAgB;AAAA,GAC1B;AAGF,MAAM,cAAc,CAAC,EAAE,UAAU,MAC/B,qBAAC,SAAI,WAAsB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAa,GAAG,eAAc,SAAQ,gBAAe,SAAQ,eAAY,QACxJ;AAAA,sBAAC,UAAK,GAAE,4EAA2E;AAAA,EACnF,oBAAC,UAAK,GAAE,WAAU;AAAA,EAClB,oBAAC,UAAK,GAAE,cAAa;AAAA,GACvB;AAGF,MAAM,YAAY,CAAC,EAAE,UAAU,MAC7B,qBAAC,SAAI,WAAsB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAa,GAAG,eAAc,SAAQ,gBAAe,SAAQ,eAAY,QACxJ;AAAA,sBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,EAC/B,oBAAC,UAAK,GAAE,WAAU;AAAA,EAClB,oBAAC,UAAK,GAAE,cAAa;AAAA,GACvB;AAGF,MAAM,mBAAmB,CAAC,EAAE,UAAU,MACpC,oBAAC,SAAI,WAAsB,MAAK,QAAO,SAAQ,aAAY,QAAO,gBAAe,aAAa,GAAG,eAAY,QAC3G,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,wBAAuB,GAC9E;AAIF,MAAM,eAAqE;AAAA,EACzE,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,OAAO;AACT;AAIA,MAAM,WAAW;AAAA,EACf,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,SAAS;AAAA,IACP,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,EACV;AACF;AAGA,MAAM,gBAAgB;AAAA,EACpB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,SAAS;AAAA,QACT,IAAI;AAAA,MACN;AAAA,MACA,QAAQ;AAAA,QACN,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,OAAO;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAGA,MAAM,gBAAgB;AAAA,EACpB,IAAI;AAAA;AAAA,EACJ,SAAS;AAAA;AAAA,EACT,IAAI;AAAA;AACN;AAEA,MAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAEA,MAAM,gBAAgB;AAAA,EACpB,IAAI;AAAA,EACJ,SAAS;AAAA,EACT,IAAI;AACN;AAcA,MAAM,eAAe,MAAM,cAAiC;AAAA,EAC1D,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AACR,CAAC;AAED,SAAS,kBAAkB;AACzB,SAAO,MAAM,WAAW,YAAY;AACtC;AA4BA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC;AAAA,IACC;AAAA,IACA,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AAET,UAAM,OAAO,UAAU,UAAU,UAAU;AAC3C,UAAM,eAAe,SAAS,KAAK,EAAE,OAAO;AAC5C,UAAM,aAAa,aAAa,KAAK;AAErC,WACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,SAAS,OAAO,KAAK,GACnD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW;AAAA,UACT,cAAc,EAAE,MAAM,OAAO,CAAC;AAAA,UAC9B;AAAA,UACA;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAGH;AAAA,WAAC,YACA,oBAAC,UAAK,WAAU,YACb,kBAAQ,oBAAC,cAAW,WAAW,cAAc,IAAI,GAAG,GACvD;AAAA,UAIF,oBAAC,SAAI,WAAU,kBACZ,UACH;AAAA,UAGC,YACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA,SAAS,OACL,4FACA;AAAA,cACN;AAAA,cACA,SAAS;AAAA,cACT,cAAW;AAAA,cAEV,uBAAa,oBAAC,oBAAiB,WAAU,WAAU;AAAA;AAAA,UACtD;AAAA;AAAA;AAAA,IAEJ,GACF;AAAA,EAEJ;AACF;AACA,MAAM,cAAc;AAKpB,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,KAAK,IAAI,gBAAgB;AACjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,eAAe,IAAI,GAAG,SAAS;AAAA,QAC5C,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAKzB,MAAM,mBAAmB,MAAM;AAAA,EAC7B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,SAAS,KAAK,IAAI,gBAAgB;AAC1C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,0BAAuB;AAAA,QACvB,WAAW;AAAA,UACT,cAAc,IAAI;AAAA,UAClB,YAAY,WAAW,eAAe;AAAA,UACtC;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;","names":[]}

package/dist/components/ui/avatar.js

@@ -39,6 +39,7 @@ __export(avatar_exports, {
   getAvatarInitials: () => getAvatarInitials
 });
 module.exports = __toCommonJS(avatar_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
 var React = __toESM(require("react"));
 var AvatarPrimitive = __toESM(require("@radix-ui/react-avatar"));
 var import_class_variance_authority = require("class-variance-authority");
@@ -148,37 +149,40 @@ function getAvatarColor(name, variant = "vivid") {
 const Avatar = React.forwardRef(({ className, size, shape, status, children, ...props }, ref) => {
   const resolvedSize = size || "default";
   if (!status) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       AvatarPrimitive.Root,
       {
         ref,
         className: (0, import_utils.cn)(avatarVariants({ size, shape }), className),
-        ...props
-      },
-      children
+        ...props,
+        children
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement("span", { className: "relative inline-flex" }, /* @__PURE__ */ React.createElement(
-    AvatarPrimitive.Root,
-    {
-      ref,
-      className: (0, import_utils.cn)(avatarVariants({ size, shape }), className),
-      ...props
-    },
-    children
-  ), /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: (0, import_utils.cn)(
-        "absolute bottom-0 right-0 rounded-full ring-2 ring-background",
-        statusDotSizes[resolvedSize],
-        statusColors[status]
-      )
-    }
-  ));
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "relative inline-flex", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      AvatarPrimitive.Root,
+      {
+        ref,
+        className: (0, import_utils.cn)(avatarVariants({ size, shape }), className),
+        ...props,
+        children
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "span",
+      {
+        className: (0, import_utils.cn)(
+          "absolute bottom-0 right-0 rounded-full ring-2 ring-background",
+          statusDotSizes[resolvedSize],
+          statusColors[status]
+        )
+      }
+    )
+  ] });
 });
 Avatar.displayName = "Avatar";
-const AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
   AvatarPrimitive.Image,
   {
     ref,
@@ -192,7 +196,7 @@ const AvatarFallback = React.forwardRef(({ className, size, name, colorized, col
   const colorKey = name || colorized;
   const color = colorKey ? getAvatarColor(colorKey, colorVariant) : null;
   const resolvedChildren = children ?? (name ? getAvatarInitials(name) : void 0);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     AvatarPrimitive.Fallback,
     {
       ref,
@@ -202,9 +206,9 @@ const AvatarFallback = React.forwardRef(({ className, size, name, colorized, col
         fallbackFontSizes[resolvedSize],
         className
       ),
-      ...props
-    },
-    resolvedChildren
+      ...props,
+      children: resolvedChildren
+    }
   );
 });
 AvatarFallback.displayName = "AvatarFallback";
@@ -213,7 +217,7 @@ const AvatarGroup = React.forwardRef(
     const childArray = React.Children.toArray(children);
     const visibleChildren = max ? childArray.slice(0, max) : childArray;
     const overflowCount = max ? childArray.length - max : 0;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "div",
       {
         ref,
@@ -223,10 +227,15 @@ const AvatarGroup = React.forwardRef(
           "[&>*]:ring-2 [&>*]:ring-background",
           className
         ),
-        ...props
-      },
-      visibleChildren,
-      overflowCount > 0 && /* @__PURE__ */ React.createElement(Avatar, { size, shape }, /* @__PURE__ */ React.createElement(AvatarFallback, { size }, "+", overflowCount))
+        ...props,
+        children: [
+          visibleChildren,
+          overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Avatar, { size, shape, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AvatarFallback, { size, children: [
+            "+",
+            overflowCount
+          ] }) })
+        ]
+      }
     );
   }
 );

package/dist/components/ui/avatar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as AvatarPrimitive from '@radix-ui/react-avatar'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Avatar root variants\nconst avatarVariants = cva(\n  'relative inline-flex items-center justify-center overflow-hidden bg-background-muted select-none',\n  {\n    variants: {\n      size: {\n        xs:      'w-6 h-6',        // 24px\n        sm:      'w-8 h-8',        // 32px\n        default: 'w-10 h-10',      // 40px\n        lg:      'w-12 h-12',      // 48px\n        xl:      'w-16 h-16',      // 64px\n        '2xl':   'w-20 h-20',      // 80px\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-xl',\n      },\n    },\n    defaultVariants: { size: 'default', shape: 'circle' },\n  }\n)\n\n// Status dot sizes per avatar size\nconst statusDotSizes = {\n  xs:      'w-1.5 h-1.5',\n  sm:      'w-2 h-2',\n  default: 'w-2.5 h-2.5',\n  lg:      'w-3 h-3',\n  xl:      'w-3.5 h-3.5',\n  '2xl':   'w-4 h-4',\n}\n\n// Status dot colors\nconst statusColors = {\n  online:  'bg-success',\n  offline: 'bg-text-muted',\n  busy:    'bg-error',\n  away:    'bg-warning',\n}\n\n// Fallback font sizes per avatar size\nconst fallbackFontSizes = {\n  xs:      'text-2xs',\n  sm:      'text-xs',\n  default: 'text-sm',\n  lg:      'text-base',\n  xl:      'text-xl',\n  '2xl':   'text-2xl',\n}\n\n// Negative margin per size for AvatarGroup overlap\nconst groupNegativeMargins = {\n  xs:      '-space-x-1.5',\n  sm:      '-space-x-2',\n  default: '-space-x-2.5',\n  lg:      '-space-x-3',\n  xl:      '-space-x-4',\n  '2xl':   '-space-x-5',\n}\n\n// Colorized fallback palette (12 colors × 2 variants) — exception 13 in TOKEN-EXCEPTIONS.md\nconst avatarColors = [\n  { vivid: { bg: 'bg-[#DC2626]', text: 'text-white' }, soft: { bg: 'bg-[#FEE2E2]', text: 'text-[#DC2626]' } },  // red\n  { vivid: { bg: 'bg-[#EA580C]', text: 'text-white' }, soft: { bg: 'bg-[#FFEDD5]', text: 'text-[#EA580C]' } },  // orange\n  { vivid: { bg: 'bg-[#D97706]', text: 'text-white' }, soft: { bg: 'bg-[#FEF3C7]', text: 'text-[#B45309]' } },  // amber\n  { vivid: { bg: 'bg-[#CA8A04]', text: 'text-white' }, soft: { bg: 'bg-[#FEF9C3]', text: 'text-[#A16207]' } },  // yellow\n  { vivid: { bg: 'bg-[#059669]', text: 'text-white' }, soft: { bg: 'bg-[#D1FAE5]', text: 'text-[#047857]' } },  // emerald\n  { vivid: { bg: 'bg-[#0D9488]', text: 'text-white' }, soft: { bg: 'bg-[#CCFBF1]', text: 'text-[#0F766E]' } },  // teal\n  { vivid: { bg: 'bg-[#0891B2]', text: 'text-white' }, soft: { bg: 'bg-[#CFFAFE]', text: 'text-[#0E7490]' } },  // cyan\n  { vivid: { bg: 'bg-[#2563EB]', text: 'text-white' }, soft: { bg: 'bg-[#DBEAFE]', text: 'text-[#1D4ED8]' } },  // blue\n  { vivid: { bg: 'bg-[#4F46E5]', text: 'text-white' }, soft: { bg: 'bg-[#E0E7FF]', text: 'text-[#4338CA]' } },  // indigo\n  { vivid: { bg: 'bg-[#7C3AED]', text: 'text-white' }, soft: { bg: 'bg-[#EDE9FE]', text: 'text-[#6D28D9]' } },  // violet\n  { vivid: { bg: 'bg-[#9333EA]', text: 'text-white' }, soft: { bg: 'bg-[#F3E8FF]', text: 'text-[#7E22CE]' } },  // purple\n  { vivid: { bg: 'bg-[#DB2777]', text: 'text-white' }, soft: { bg: 'bg-[#FCE7F3]', text: 'text-[#BE185D]' } },  // pink\n] as const\n\nexport type AvatarColorVariant = 'vivid' | 'soft'\n\n/** Extract initials from a name string (e.g. \"John Doe\" → \"JD\", \"김민수\" → \"김민\") */\nfunction getAvatarInitials(name: string, maxChars = 2): string {\n  const trimmed = name.trim()\n  if (!trimmed) return ''\n\n  // CJK: use first character(s) directly\n  const cjkRegex = /[\\u3000-\\u9fff\\uac00-\\ud7af\\uff00-\\uffef]/\n  if (cjkRegex.test(trimmed.charAt(0))) {\n    return trimmed.slice(0, maxChars)\n  }\n\n  // Split on spaces, hyphens, underscores, dots\n  const parts = trimmed.split(/[\\s\\-_.]+/).filter(Boolean)\n  if (parts.length === 1) {\n    return parts[0].charAt(0).toUpperCase()\n  }\n\n  // First + last part initials\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0))\n    .toUpperCase()\n    .slice(0, maxChars)\n}\n\n/** Hash a name string to a deterministic avatar color pair (djb2 xor variant) */\nfunction getAvatarColor(name: string, variant: AvatarColorVariant = 'vivid') {\n  let hash = 5381\n  for (let i = 0; i < name.length; i++) {\n    hash = ((hash << 5) + hash) ^ name.charCodeAt(i)\n  }\n  return avatarColors[(hash >>> 0) % avatarColors.length][variant]\n}\n\nexport type AvatarSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl'\nexport type AvatarShape = 'circle' | 'square'\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'\n\nexport interface AvatarProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {\n  status?: AvatarStatus\n}\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, size, shape, status, children, ...props }, ref) => {\n  const resolvedSize = size || 'default'\n\n  if (!status) {\n    return (\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={cn(avatarVariants({ size, shape }), className)}\n        {...props}\n      >\n        {children}\n      </AvatarPrimitive.Root>\n    )\n  }\n\n  // Wrap with an outer span so the status dot is not clipped by overflow-hidden\n  return (\n    <span className=\"relative inline-flex\">\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={cn(avatarVariants({ size, shape }), className)}\n        {...props}\n      >\n        {children}\n      </AvatarPrimitive.Root>\n      <span\n        className={cn(\n          'absolute bottom-0 right-0 rounded-full ring-2 ring-background',\n          statusDotSizes[resolvedSize],\n          statusColors[status]\n        )}\n      />\n    </span>\n  )\n})\nAvatar.displayName = 'Avatar'\n\nexport interface AvatarImageProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {}\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn('object-cover w-full h-full', className)}\n    {...props}\n  />\n))\nAvatarImage.displayName = 'AvatarImage'\n\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {\n  size?: AvatarSize\n  /** Shorthand: auto-generates initials + color from a name. Children override auto-initials. */\n  name?: string\n  /** Pass a name/key to enable colorized mode. The string is hashed to pick a deterministic color. */\n  colorized?: string\n  /** Color style: \"vivid\" (strong bg + white text) or \"soft\" (pastel bg + dark text). Default: \"vivid\" */\n  colorVariant?: AvatarColorVariant\n}\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, size, name, colorized, colorVariant = 'vivid', children, ...props }, ref) => {\n  const resolvedSize = size || 'default'\n  const colorKey = name || colorized\n  const color = colorKey ? getAvatarColor(colorKey, colorVariant) : null\n  const resolvedChildren = children ?? (name ? getAvatarInitials(name) : undefined)\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      className={cn(\n        'flex items-center justify-center w-full h-full font-semibold',\n        color ? [color.bg, color.text] : 'bg-background-muted text-text-muted',\n        fallbackFontSizes[resolvedSize],\n        className\n      )}\n      {...props}\n    >\n      {resolvedChildren}\n    </AvatarPrimitive.Fallback>\n  )\n})\nAvatarFallback.displayName = 'AvatarFallback'\n\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  max?: number\n  size?: AvatarSize\n  shape?: AvatarShape\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  ({ className, max, size = 'default', shape = 'circle', children, ...props }, ref) => {\n    const childArray = React.Children.toArray(children)\n    const visibleChildren = max ? childArray.slice(0, max) : childArray\n    const overflowCount = max ? childArray.length - max : 0\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex items-center',\n          groupNegativeMargins[size],\n          '[&>*]:ring-2 [&>*]:ring-background',\n          className\n        )}\n        {...props}\n      >\n        {visibleChildren}\n        {overflowCount > 0 && (\n          <Avatar size={size} shape={shape}>\n            <AvatarFallback size={size}>+{overflowCount}</AvatarFallback>\n          </Avatar>\n        )}\n      </div>\n    )\n  }\n)\nAvatarGroup.displayName = 'AvatarGroup'\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, avatarVariants, avatarColors, getAvatarColor, getAvatarInitials }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as AvatarPrimitive from '@radix-ui/react-avatar'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Avatar root variants\nconst avatarVariants = cva(\n  'relative inline-flex items-center justify-center overflow-hidden bg-background-muted select-none',\n  {\n    variants: {\n      size: {\n        xs:      'w-6 h-6',        // 24px\n        sm:      'w-8 h-8',        // 32px\n        default: 'w-10 h-10',      // 40px\n        lg:      'w-12 h-12',      // 48px\n        xl:      'w-16 h-16',      // 64px\n        '2xl':   'w-20 h-20',      // 80px\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-xl',\n      },\n    },\n    defaultVariants: { size: 'default', shape: 'circle' },\n  }\n)\n\n// Status dot sizes per avatar size\nconst statusDotSizes = {\n  xs:      'w-1.5 h-1.5',\n  sm:      'w-2 h-2',\n  default: 'w-2.5 h-2.5',\n  lg:      'w-3 h-3',\n  xl:      'w-3.5 h-3.5',\n  '2xl':   'w-4 h-4',\n}\n\n// Status dot colors\nconst statusColors = {\n  online:  'bg-success',\n  offline: 'bg-text-muted',\n  busy:    'bg-error',\n  away:    'bg-warning',\n}\n\n// Fallback font sizes per avatar size\nconst fallbackFontSizes = {\n  xs:      'text-2xs',\n  sm:      'text-xs',\n  default: 'text-sm',\n  lg:      'text-base',\n  xl:      'text-xl',\n  '2xl':   'text-2xl',\n}\n\n// Negative margin per size for AvatarGroup overlap\nconst groupNegativeMargins = {\n  xs:      '-space-x-1.5',\n  sm:      '-space-x-2',\n  default: '-space-x-2.5',\n  lg:      '-space-x-3',\n  xl:      '-space-x-4',\n  '2xl':   '-space-x-5',\n}\n\n// Colorized fallback palette (12 colors × 2 variants) — exception 13 in TOKEN-EXCEPTIONS.md\nconst avatarColors = [\n  { vivid: { bg: 'bg-[#DC2626]', text: 'text-white' }, soft: { bg: 'bg-[#FEE2E2]', text: 'text-[#DC2626]' } },  // red\n  { vivid: { bg: 'bg-[#EA580C]', text: 'text-white' }, soft: { bg: 'bg-[#FFEDD5]', text: 'text-[#EA580C]' } },  // orange\n  { vivid: { bg: 'bg-[#D97706]', text: 'text-white' }, soft: { bg: 'bg-[#FEF3C7]', text: 'text-[#B45309]' } },  // amber\n  { vivid: { bg: 'bg-[#CA8A04]', text: 'text-white' }, soft: { bg: 'bg-[#FEF9C3]', text: 'text-[#A16207]' } },  // yellow\n  { vivid: { bg: 'bg-[#059669]', text: 'text-white' }, soft: { bg: 'bg-[#D1FAE5]', text: 'text-[#047857]' } },  // emerald\n  { vivid: { bg: 'bg-[#0D9488]', text: 'text-white' }, soft: { bg: 'bg-[#CCFBF1]', text: 'text-[#0F766E]' } },  // teal\n  { vivid: { bg: 'bg-[#0891B2]', text: 'text-white' }, soft: { bg: 'bg-[#CFFAFE]', text: 'text-[#0E7490]' } },  // cyan\n  { vivid: { bg: 'bg-[#2563EB]', text: 'text-white' }, soft: { bg: 'bg-[#DBEAFE]', text: 'text-[#1D4ED8]' } },  // blue\n  { vivid: { bg: 'bg-[#4F46E5]', text: 'text-white' }, soft: { bg: 'bg-[#E0E7FF]', text: 'text-[#4338CA]' } },  // indigo\n  { vivid: { bg: 'bg-[#7C3AED]', text: 'text-white' }, soft: { bg: 'bg-[#EDE9FE]', text: 'text-[#6D28D9]' } },  // violet\n  { vivid: { bg: 'bg-[#9333EA]', text: 'text-white' }, soft: { bg: 'bg-[#F3E8FF]', text: 'text-[#7E22CE]' } },  // purple\n  { vivid: { bg: 'bg-[#DB2777]', text: 'text-white' }, soft: { bg: 'bg-[#FCE7F3]', text: 'text-[#BE185D]' } },  // pink\n] as const\n\nexport type AvatarColorVariant = 'vivid' | 'soft'\n\n/** Extract initials from a name string (e.g. \"John Doe\" → \"JD\", \"김민수\" → \"김민\") */\nfunction getAvatarInitials(name: string, maxChars = 2): string {\n  const trimmed = name.trim()\n  if (!trimmed) return ''\n\n  // CJK: use first character(s) directly\n  const cjkRegex = /[\\u3000-\\u9fff\\uac00-\\ud7af\\uff00-\\uffef]/\n  if (cjkRegex.test(trimmed.charAt(0))) {\n    return trimmed.slice(0, maxChars)\n  }\n\n  // Split on spaces, hyphens, underscores, dots\n  const parts = trimmed.split(/[\\s\\-_.]+/).filter(Boolean)\n  if (parts.length === 1) {\n    return parts[0].charAt(0).toUpperCase()\n  }\n\n  // First + last part initials\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0))\n    .toUpperCase()\n    .slice(0, maxChars)\n}\n\n/** Hash a name string to a deterministic avatar color pair (djb2 xor variant) */\nfunction getAvatarColor(name: string, variant: AvatarColorVariant = 'vivid') {\n  let hash = 5381\n  for (let i = 0; i < name.length; i++) {\n    hash = ((hash << 5) + hash) ^ name.charCodeAt(i)\n  }\n  return avatarColors[(hash >>> 0) % avatarColors.length][variant]\n}\n\nexport type AvatarSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl'\nexport type AvatarShape = 'circle' | 'square'\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'\n\nexport interface AvatarProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {\n  status?: AvatarStatus\n}\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, size, shape, status, children, ...props }, ref) => {\n  const resolvedSize = size || 'default'\n\n  if (!status) {\n    return (\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={cn(avatarVariants({ size, shape }), className)}\n        {...props}\n      >\n        {children}\n      </AvatarPrimitive.Root>\n    )\n  }\n\n  // Wrap with an outer span so the status dot is not clipped by overflow-hidden\n  return (\n    <span className=\"relative inline-flex\">\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={cn(avatarVariants({ size, shape }), className)}\n        {...props}\n      >\n        {children}\n      </AvatarPrimitive.Root>\n      <span\n        className={cn(\n          'absolute bottom-0 right-0 rounded-full ring-2 ring-background',\n          statusDotSizes[resolvedSize],\n          statusColors[status]\n        )}\n      />\n    </span>\n  )\n})\nAvatar.displayName = 'Avatar'\n\nexport interface AvatarImageProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {}\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn('object-cover w-full h-full', className)}\n    {...props}\n  />\n))\nAvatarImage.displayName = 'AvatarImage'\n\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {\n  size?: AvatarSize\n  /** Shorthand: auto-generates initials + color from a name. Children override auto-initials. */\n  name?: string\n  /** Pass a name/key to enable colorized mode. The string is hashed to pick a deterministic color. */\n  colorized?: string\n  /** Color style: \"vivid\" (strong bg + white text) or \"soft\" (pastel bg + dark text). Default: \"vivid\" */\n  colorVariant?: AvatarColorVariant\n}\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, size, name, colorized, colorVariant = 'vivid', children, ...props }, ref) => {\n  const resolvedSize = size || 'default'\n  const colorKey = name || colorized\n  const color = colorKey ? getAvatarColor(colorKey, colorVariant) : null\n  const resolvedChildren = children ?? (name ? getAvatarInitials(name) : undefined)\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      className={cn(\n        'flex items-center justify-center w-full h-full font-semibold',\n        color ? [color.bg, color.text] : 'bg-background-muted text-text-muted',\n        fallbackFontSizes[resolvedSize],\n        className\n      )}\n      {...props}\n    >\n      {resolvedChildren}\n    </AvatarPrimitive.Fallback>\n  )\n})\nAvatarFallback.displayName = 'AvatarFallback'\n\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  max?: number\n  size?: AvatarSize\n  shape?: AvatarShape\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  ({ className, max, size = 'default', shape = 'circle', children, ...props }, ref) => {\n    const childArray = React.Children.toArray(children)\n    const visibleChildren = max ? childArray.slice(0, max) : childArray\n    const overflowCount = max ? childArray.length - max : 0\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex items-center',\n          groupNegativeMargins[size],\n          '[&>*]:ring-2 [&>*]:ring-background',\n          className\n        )}\n        {...props}\n      >\n        {visibleChildren}\n        {overflowCount > 0 && (\n          <Avatar size={size} shape={shape}>\n            <AvatarFallback size={size}>+{overflowCount}</AvatarFallback>\n          </Avatar>\n        )}\n      </div>\n    )\n  }\n)\nAvatarGroup.displayName = 'AvatarGroup'\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, avatarVariants, avatarColors, getAvatarColor, getAvatarInitials }\n"],"mappings":"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","names":[]}

package/dist/components/ui/avatar.mjs

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cva } from "class-variance-authority";
@@ -108,37 +109,40 @@ function getAvatarColor(name, variant = "vivid") {
 const Avatar = React.forwardRef(({ className, size, shape, status, children, ...props }, ref) => {
   const resolvedSize = size || "default";
   if (!status) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       AvatarPrimitive.Root,
       {
         ref,
         className: cn(avatarVariants({ size, shape }), className),
-        ...props
-      },
-      children
+        ...props,
+        children
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement("span", { className: "relative inline-flex" }, /* @__PURE__ */ React.createElement(
-    AvatarPrimitive.Root,
-    {
-      ref,
-      className: cn(avatarVariants({ size, shape }), className),
-      ...props
-    },
-    children
-  ), /* @__PURE__ */ React.createElement(
-    "span",
-    {
-      className: cn(
-        "absolute bottom-0 right-0 rounded-full ring-2 ring-background",
-        statusDotSizes[resolvedSize],
-        statusColors[status]
-      )
-    }
-  ));
+  return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex", children: [
+    /* @__PURE__ */ jsx(
+      AvatarPrimitive.Root,
+      {
+        ref,
+        className: cn(avatarVariants({ size, shape }), className),
+        ...props,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "absolute bottom-0 right-0 rounded-full ring-2 ring-background",
+          statusDotSizes[resolvedSize],
+          statusColors[status]
+        )
+      }
+    )
+  ] });
 });
 Avatar.displayName = "Avatar";
-const AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   AvatarPrimitive.Image,
   {
     ref,
@@ -152,7 +156,7 @@ const AvatarFallback = React.forwardRef(({ className, size, name, colorized, col
   const colorKey = name || colorized;
   const color = colorKey ? getAvatarColor(colorKey, colorVariant) : null;
   const resolvedChildren = children ?? (name ? getAvatarInitials(name) : void 0);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     AvatarPrimitive.Fallback,
     {
       ref,
@@ -162,9 +166,9 @@ const AvatarFallback = React.forwardRef(({ className, size, name, colorized, col
         fallbackFontSizes[resolvedSize],
         className
       ),
-      ...props
-    },
-    resolvedChildren
+      ...props,
+      children: resolvedChildren
+    }
   );
 });
 AvatarFallback.displayName = "AvatarFallback";
@@ -173,7 +177,7 @@ const AvatarGroup = React.forwardRef(
     const childArray = React.Children.toArray(children);
     const visibleChildren = max ? childArray.slice(0, max) : childArray;
     const overflowCount = max ? childArray.length - max : 0;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "div",
       {
         ref,
@@ -183,10 +187,15 @@ const AvatarGroup = React.forwardRef(
           "[&>*]:ring-2 [&>*]:ring-background",
           className
         ),
-        ...props
-      },
-      visibleChildren,
-      overflowCount > 0 && /* @__PURE__ */ React.createElement(Avatar, { size, shape }, /* @__PURE__ */ React.createElement(AvatarFallback, { size }, "+", overflowCount))
+        ...props,
+        children: [
+          visibleChildren,
+          overflowCount > 0 && /* @__PURE__ */ jsx(Avatar, { size, shape, children: /* @__PURE__ */ jsxs(AvatarFallback, { size, children: [
+            "+",
+            overflowCount
+          ] }) })
+        ]
+      }
     );
   }
 );

package/dist/components/ui/avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ui/avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as AvatarPrimitive from '@radix-ui/react-avatar'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Avatar root variants\nconst avatarVariants = cva(\n  'relative inline-flex items-center justify-center overflow-hidden bg-background-muted select-none',\n  {\n    variants: {\n      size: {\n        xs:      'w-6 h-6',        // 24px\n        sm:      'w-8 h-8',        // 32px\n        default: 'w-10 h-10',      // 40px\n        lg:      'w-12 h-12',      // 48px\n        xl:      'w-16 h-16',      // 64px\n        '2xl':   'w-20 h-20',      // 80px\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-xl',\n      },\n    },\n    defaultVariants: { size: 'default', shape: 'circle' },\n  }\n)\n\n// Status dot sizes per avatar size\nconst statusDotSizes = {\n  xs:      'w-1.5 h-1.5',\n  sm:      'w-2 h-2',\n  default: 'w-2.5 h-2.5',\n  lg:      'w-3 h-3',\n  xl:      'w-3.5 h-3.5',\n  '2xl':   'w-4 h-4',\n}\n\n// Status dot colors\nconst statusColors = {\n  online:  'bg-success',\n  offline: 'bg-text-muted',\n  busy:    'bg-error',\n  away:    'bg-warning',\n}\n\n// Fallback font sizes per avatar size\nconst fallbackFontSizes = {\n  xs:      'text-2xs',\n  sm:      'text-xs',\n  default: 'text-sm',\n  lg:      'text-base',\n  xl:      'text-xl',\n  '2xl':   'text-2xl',\n}\n\n// Negative margin per size for AvatarGroup overlap\nconst groupNegativeMargins = {\n  xs:      '-space-x-1.5',\n  sm:      '-space-x-2',\n  default: '-space-x-2.5',\n  lg:      '-space-x-3',\n  xl:      '-space-x-4',\n  '2xl':   '-space-x-5',\n}\n\n// Colorized fallback palette (12 colors × 2 variants) — exception 13 in TOKEN-EXCEPTIONS.md\nconst avatarColors = [\n  { vivid: { bg: 'bg-[#DC2626]', text: 'text-white' }, soft: { bg: 'bg-[#FEE2E2]', text: 'text-[#DC2626]' } },  // red\n  { vivid: { bg: 'bg-[#EA580C]', text: 'text-white' }, soft: { bg: 'bg-[#FFEDD5]', text: 'text-[#EA580C]' } },  // orange\n  { vivid: { bg: 'bg-[#D97706]', text: 'text-white' }, soft: { bg: 'bg-[#FEF3C7]', text: 'text-[#B45309]' } },  // amber\n  { vivid: { bg: 'bg-[#CA8A04]', text: 'text-white' }, soft: { bg: 'bg-[#FEF9C3]', text: 'text-[#A16207]' } },  // yellow\n  { vivid: { bg: 'bg-[#059669]', text: 'text-white' }, soft: { bg: 'bg-[#D1FAE5]', text: 'text-[#047857]' } },  // emerald\n  { vivid: { bg: 'bg-[#0D9488]', text: 'text-white' }, soft: { bg: 'bg-[#CCFBF1]', text: 'text-[#0F766E]' } },  // teal\n  { vivid: { bg: 'bg-[#0891B2]', text: 'text-white' }, soft: { bg: 'bg-[#CFFAFE]', text: 'text-[#0E7490]' } },  // cyan\n  { vivid: { bg: 'bg-[#2563EB]', text: 'text-white' }, soft: { bg: 'bg-[#DBEAFE]', text: 'text-[#1D4ED8]' } },  // blue\n  { vivid: { bg: 'bg-[#4F46E5]', text: 'text-white' }, soft: { bg: 'bg-[#E0E7FF]', text: 'text-[#4338CA]' } },  // indigo\n  { vivid: { bg: 'bg-[#7C3AED]', text: 'text-white' }, soft: { bg: 'bg-[#EDE9FE]', text: 'text-[#6D28D9]' } },  // violet\n  { vivid: { bg: 'bg-[#9333EA]', text: 'text-white' }, soft: { bg: 'bg-[#F3E8FF]', text: 'text-[#7E22CE]' } },  // purple\n  { vivid: { bg: 'bg-[#DB2777]', text: 'text-white' }, soft: { bg: 'bg-[#FCE7F3]', text: 'text-[#BE185D]' } },  // pink\n] as const\n\nexport type AvatarColorVariant = 'vivid' | 'soft'\n\n/** Extract initials from a name string (e.g. \"John Doe\" → \"JD\", \"김민수\" → \"김민\") */\nfunction getAvatarInitials(name: string, maxChars = 2): string {\n  const trimmed = name.trim()\n  if (!trimmed) return ''\n\n  // CJK: use first character(s) directly\n  const cjkRegex = /[\\u3000-\\u9fff\\uac00-\\ud7af\\uff00-\\uffef]/\n  if (cjkRegex.test(trimmed.charAt(0))) {\n    return trimmed.slice(0, maxChars)\n  }\n\n  // Split on spaces, hyphens, underscores, dots\n  const parts = trimmed.split(/[\\s\\-_.]+/).filter(Boolean)\n  if (parts.length === 1) {\n    return parts[0].charAt(0).toUpperCase()\n  }\n\n  // First + last part initials\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0))\n    .toUpperCase()\n    .slice(0, maxChars)\n}\n\n/** Hash a name string to a deterministic avatar color pair (djb2 xor variant) */\nfunction getAvatarColor(name: string, variant: AvatarColorVariant = 'vivid') {\n  let hash = 5381\n  for (let i = 0; i < name.length; i++) {\n    hash = ((hash << 5) + hash) ^ name.charCodeAt(i)\n  }\n  return avatarColors[(hash >>> 0) % avatarColors.length][variant]\n}\n\nexport type AvatarSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl'\nexport type AvatarShape = 'circle' | 'square'\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'\n\nexport interface AvatarProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {\n  status?: AvatarStatus\n}\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, size, shape, status, children, ...props }, ref) => {\n  const resolvedSize = size || 'default'\n\n  if (!status) {\n    return (\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={cn(avatarVariants({ size, shape }), className)}\n        {...props}\n      >\n        {children}\n      </AvatarPrimitive.Root>\n    )\n  }\n\n  // Wrap with an outer span so the status dot is not clipped by overflow-hidden\n  return (\n    <span className=\"relative inline-flex\">\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={cn(avatarVariants({ size, shape }), className)}\n        {...props}\n      >\n        {children}\n      </AvatarPrimitive.Root>\n      <span\n        className={cn(\n          'absolute bottom-0 right-0 rounded-full ring-2 ring-background',\n          statusDotSizes[resolvedSize],\n          statusColors[status]\n        )}\n      />\n    </span>\n  )\n})\nAvatar.displayName = 'Avatar'\n\nexport interface AvatarImageProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {}\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn('object-cover w-full h-full', className)}\n    {...props}\n  />\n))\nAvatarImage.displayName = 'AvatarImage'\n\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {\n  size?: AvatarSize\n  /** Shorthand: auto-generates initials + color from a name. Children override auto-initials. */\n  name?: string\n  /** Pass a name/key to enable colorized mode. The string is hashed to pick a deterministic color. */\n  colorized?: string\n  /** Color style: \"vivid\" (strong bg + white text) or \"soft\" (pastel bg + dark text). Default: \"vivid\" */\n  colorVariant?: AvatarColorVariant\n}\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, size, name, colorized, colorVariant = 'vivid', children, ...props }, ref) => {\n  const resolvedSize = size || 'default'\n  const colorKey = name || colorized\n  const color = colorKey ? getAvatarColor(colorKey, colorVariant) : null\n  const resolvedChildren = children ?? (name ? getAvatarInitials(name) : undefined)\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      className={cn(\n        'flex items-center justify-center w-full h-full font-semibold',\n        color ? [color.bg, color.text] : 'bg-background-muted text-text-muted',\n        fallbackFontSizes[resolvedSize],\n        className\n      )}\n      {...props}\n    >\n      {resolvedChildren}\n    </AvatarPrimitive.Fallback>\n  )\n})\nAvatarFallback.displayName = 'AvatarFallback'\n\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  max?: number\n  size?: AvatarSize\n  shape?: AvatarShape\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  ({ className, max, size = 'default', shape = 'circle', children, ...props }, ref) => {\n    const childArray = React.Children.toArray(children)\n    const visibleChildren = max ? childArray.slice(0, max) : childArray\n    const overflowCount = max ? childArray.length - max : 0\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex items-center',\n          groupNegativeMargins[size],\n          '[&>*]:ring-2 [&>*]:ring-background',\n          className\n        )}\n        {...props}\n      >\n        {visibleChildren}\n        {overflowCount > 0 && (\n          <Avatar size={size} shape={shape}>\n            <AvatarFallback size={size}>+{overflowCount}</AvatarFallback>\n          </Avatar>\n        )}\n      </div>\n    )\n  }\n)\nAvatarGroup.displayName = 'AvatarGroup'\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, avatarVariants, avatarColors, getAvatarColor, getAvatarInitials }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../../src/components/ui/avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as AvatarPrimitive from '@radix-ui/react-avatar'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Avatar root variants\nconst avatarVariants = cva(\n  'relative inline-flex items-center justify-center overflow-hidden bg-background-muted select-none',\n  {\n    variants: {\n      size: {\n        xs:      'w-6 h-6',        // 24px\n        sm:      'w-8 h-8',        // 32px\n        default: 'w-10 h-10',      // 40px\n        lg:      'w-12 h-12',      // 48px\n        xl:      'w-16 h-16',      // 64px\n        '2xl':   'w-20 h-20',      // 80px\n      },\n      shape: {\n        circle: 'rounded-full',\n        square: 'rounded-xl',\n      },\n    },\n    defaultVariants: { size: 'default', shape: 'circle' },\n  }\n)\n\n// Status dot sizes per avatar size\nconst statusDotSizes = {\n  xs:      'w-1.5 h-1.5',\n  sm:      'w-2 h-2',\n  default: 'w-2.5 h-2.5',\n  lg:      'w-3 h-3',\n  xl:      'w-3.5 h-3.5',\n  '2xl':   'w-4 h-4',\n}\n\n// Status dot colors\nconst statusColors = {\n  online:  'bg-success',\n  offline: 'bg-text-muted',\n  busy:    'bg-error',\n  away:    'bg-warning',\n}\n\n// Fallback font sizes per avatar size\nconst fallbackFontSizes = {\n  xs:      'text-2xs',\n  sm:      'text-xs',\n  default: 'text-sm',\n  lg:      'text-base',\n  xl:      'text-xl',\n  '2xl':   'text-2xl',\n}\n\n// Negative margin per size for AvatarGroup overlap\nconst groupNegativeMargins = {\n  xs:      '-space-x-1.5',\n  sm:      '-space-x-2',\n  default: '-space-x-2.5',\n  lg:      '-space-x-3',\n  xl:      '-space-x-4',\n  '2xl':   '-space-x-5',\n}\n\n// Colorized fallback palette (12 colors × 2 variants) — exception 13 in TOKEN-EXCEPTIONS.md\nconst avatarColors = [\n  { vivid: { bg: 'bg-[#DC2626]', text: 'text-white' }, soft: { bg: 'bg-[#FEE2E2]', text: 'text-[#DC2626]' } },  // red\n  { vivid: { bg: 'bg-[#EA580C]', text: 'text-white' }, soft: { bg: 'bg-[#FFEDD5]', text: 'text-[#EA580C]' } },  // orange\n  { vivid: { bg: 'bg-[#D97706]', text: 'text-white' }, soft: { bg: 'bg-[#FEF3C7]', text: 'text-[#B45309]' } },  // amber\n  { vivid: { bg: 'bg-[#CA8A04]', text: 'text-white' }, soft: { bg: 'bg-[#FEF9C3]', text: 'text-[#A16207]' } },  // yellow\n  { vivid: { bg: 'bg-[#059669]', text: 'text-white' }, soft: { bg: 'bg-[#D1FAE5]', text: 'text-[#047857]' } },  // emerald\n  { vivid: { bg: 'bg-[#0D9488]', text: 'text-white' }, soft: { bg: 'bg-[#CCFBF1]', text: 'text-[#0F766E]' } },  // teal\n  { vivid: { bg: 'bg-[#0891B2]', text: 'text-white' }, soft: { bg: 'bg-[#CFFAFE]', text: 'text-[#0E7490]' } },  // cyan\n  { vivid: { bg: 'bg-[#2563EB]', text: 'text-white' }, soft: { bg: 'bg-[#DBEAFE]', text: 'text-[#1D4ED8]' } },  // blue\n  { vivid: { bg: 'bg-[#4F46E5]', text: 'text-white' }, soft: { bg: 'bg-[#E0E7FF]', text: 'text-[#4338CA]' } },  // indigo\n  { vivid: { bg: 'bg-[#7C3AED]', text: 'text-white' }, soft: { bg: 'bg-[#EDE9FE]', text: 'text-[#6D28D9]' } },  // violet\n  { vivid: { bg: 'bg-[#9333EA]', text: 'text-white' }, soft: { bg: 'bg-[#F3E8FF]', text: 'text-[#7E22CE]' } },  // purple\n  { vivid: { bg: 'bg-[#DB2777]', text: 'text-white' }, soft: { bg: 'bg-[#FCE7F3]', text: 'text-[#BE185D]' } },  // pink\n] as const\n\nexport type AvatarColorVariant = 'vivid' | 'soft'\n\n/** Extract initials from a name string (e.g. \"John Doe\" → \"JD\", \"김민수\" → \"김민\") */\nfunction getAvatarInitials(name: string, maxChars = 2): string {\n  const trimmed = name.trim()\n  if (!trimmed) return ''\n\n  // CJK: use first character(s) directly\n  const cjkRegex = /[\\u3000-\\u9fff\\uac00-\\ud7af\\uff00-\\uffef]/\n  if (cjkRegex.test(trimmed.charAt(0))) {\n    return trimmed.slice(0, maxChars)\n  }\n\n  // Split on spaces, hyphens, underscores, dots\n  const parts = trimmed.split(/[\\s\\-_.]+/).filter(Boolean)\n  if (parts.length === 1) {\n    return parts[0].charAt(0).toUpperCase()\n  }\n\n  // First + last part initials\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0))\n    .toUpperCase()\n    .slice(0, maxChars)\n}\n\n/** Hash a name string to a deterministic avatar color pair (djb2 xor variant) */\nfunction getAvatarColor(name: string, variant: AvatarColorVariant = 'vivid') {\n  let hash = 5381\n  for (let i = 0; i < name.length; i++) {\n    hash = ((hash << 5) + hash) ^ name.charCodeAt(i)\n  }\n  return avatarColors[(hash >>> 0) % avatarColors.length][variant]\n}\n\nexport type AvatarSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl' | '2xl'\nexport type AvatarShape = 'circle' | 'square'\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'\n\nexport interface AvatarProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {\n  status?: AvatarStatus\n}\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, size, shape, status, children, ...props }, ref) => {\n  const resolvedSize = size || 'default'\n\n  if (!status) {\n    return (\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={cn(avatarVariants({ size, shape }), className)}\n        {...props}\n      >\n        {children}\n      </AvatarPrimitive.Root>\n    )\n  }\n\n  // Wrap with an outer span so the status dot is not clipped by overflow-hidden\n  return (\n    <span className=\"relative inline-flex\">\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={cn(avatarVariants({ size, shape }), className)}\n        {...props}\n      >\n        {children}\n      </AvatarPrimitive.Root>\n      <span\n        className={cn(\n          'absolute bottom-0 right-0 rounded-full ring-2 ring-background',\n          statusDotSizes[resolvedSize],\n          statusColors[status]\n        )}\n      />\n    </span>\n  )\n})\nAvatar.displayName = 'Avatar'\n\nexport interface AvatarImageProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image> {}\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn('object-cover w-full h-full', className)}\n    {...props}\n  />\n))\nAvatarImage.displayName = 'AvatarImage'\n\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {\n  size?: AvatarSize\n  /** Shorthand: auto-generates initials + color from a name. Children override auto-initials. */\n  name?: string\n  /** Pass a name/key to enable colorized mode. The string is hashed to pick a deterministic color. */\n  colorized?: string\n  /** Color style: \"vivid\" (strong bg + white text) or \"soft\" (pastel bg + dark text). Default: \"vivid\" */\n  colorVariant?: AvatarColorVariant\n}\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, size, name, colorized, colorVariant = 'vivid', children, ...props }, ref) => {\n  const resolvedSize = size || 'default'\n  const colorKey = name || colorized\n  const color = colorKey ? getAvatarColor(colorKey, colorVariant) : null\n  const resolvedChildren = children ?? (name ? getAvatarInitials(name) : undefined)\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      className={cn(\n        'flex items-center justify-center w-full h-full font-semibold',\n        color ? [color.bg, color.text] : 'bg-background-muted text-text-muted',\n        fallbackFontSizes[resolvedSize],\n        className\n      )}\n      {...props}\n    >\n      {resolvedChildren}\n    </AvatarPrimitive.Fallback>\n  )\n})\nAvatarFallback.displayName = 'AvatarFallback'\n\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  max?: number\n  size?: AvatarSize\n  shape?: AvatarShape\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  ({ className, max, size = 'default', shape = 'circle', children, ...props }, ref) => {\n    const childArray = React.Children.toArray(children)\n    const visibleChildren = max ? childArray.slice(0, max) : childArray\n    const overflowCount = max ? childArray.length - max : 0\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex items-center',\n          groupNegativeMargins[size],\n          '[&>*]:ring-2 [&>*]:ring-background',\n          className\n        )}\n        {...props}\n      >\n        {visibleChildren}\n        {overflowCount > 0 && (\n          <Avatar size={size} shape={shape}>\n            <AvatarFallback size={size}>+{overflowCount}</AvatarFallback>\n          </Avatar>\n        )}\n      </div>\n    )\n  }\n)\nAvatarGroup.displayName = 'AvatarGroup'\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, avatarVariants, avatarColors, getAvatarColor, getAvatarInitials }\n"],"mappings":"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","names":[]}