@karakuri-ui/react 0.2.3 → 0.3.0

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

@@ -0,0 +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":[]}

package/dist/components/ui/avatar.mjs

@@ -0,0 +1,204 @@
+"use client";
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cva } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+const avatarVariants = cva(
+  "relative inline-flex items-center justify-center overflow-hidden bg-background-muted select-none",
+  {
+    variants: {
+      size: {
+        xs: "w-6 h-6",
+        // 24px
+        sm: "w-8 h-8",
+        // 32px
+        default: "w-10 h-10",
+        // 40px
+        lg: "w-12 h-12",
+        // 48px
+        xl: "w-16 h-16",
+        // 64px
+        "2xl": "w-20 h-20"
+        // 80px
+      },
+      shape: {
+        circle: "rounded-full",
+        square: "rounded-xl"
+      }
+    },
+    defaultVariants: { size: "default", shape: "circle" }
+  }
+);
+const statusDotSizes = {
+  xs: "w-1.5 h-1.5",
+  sm: "w-2 h-2",
+  default: "w-2.5 h-2.5",
+  lg: "w-3 h-3",
+  xl: "w-3.5 h-3.5",
+  "2xl": "w-4 h-4"
+};
+const statusColors = {
+  online: "bg-success",
+  offline: "bg-text-muted",
+  busy: "bg-error",
+  away: "bg-warning"
+};
+const fallbackFontSizes = {
+  xs: "text-2xs",
+  sm: "text-xs",
+  default: "text-sm",
+  lg: "text-base",
+  xl: "text-xl",
+  "2xl": "text-2xl"
+};
+const groupNegativeMargins = {
+  xs: "-space-x-1.5",
+  sm: "-space-x-2",
+  default: "-space-x-2.5",
+  lg: "-space-x-3",
+  xl: "-space-x-4",
+  "2xl": "-space-x-5"
+};
+const avatarColors = [
+  { vivid: { bg: "bg-[#DC2626]", text: "text-white" }, soft: { bg: "bg-[#FEE2E2]", text: "text-[#DC2626]" } },
+  // red
+  { vivid: { bg: "bg-[#EA580C]", text: "text-white" }, soft: { bg: "bg-[#FFEDD5]", text: "text-[#EA580C]" } },
+  // orange
+  { vivid: { bg: "bg-[#D97706]", text: "text-white" }, soft: { bg: "bg-[#FEF3C7]", text: "text-[#B45309]" } },
+  // amber
+  { vivid: { bg: "bg-[#CA8A04]", text: "text-white" }, soft: { bg: "bg-[#FEF9C3]", text: "text-[#A16207]" } },
+  // yellow
+  { vivid: { bg: "bg-[#059669]", text: "text-white" }, soft: { bg: "bg-[#D1FAE5]", text: "text-[#047857]" } },
+  // emerald
+  { vivid: { bg: "bg-[#0D9488]", text: "text-white" }, soft: { bg: "bg-[#CCFBF1]", text: "text-[#0F766E]" } },
+  // teal
+  { vivid: { bg: "bg-[#0891B2]", text: "text-white" }, soft: { bg: "bg-[#CFFAFE]", text: "text-[#0E7490]" } },
+  // cyan
+  { vivid: { bg: "bg-[#2563EB]", text: "text-white" }, soft: { bg: "bg-[#DBEAFE]", text: "text-[#1D4ED8]" } },
+  // blue
+  { vivid: { bg: "bg-[#4F46E5]", text: "text-white" }, soft: { bg: "bg-[#E0E7FF]", text: "text-[#4338CA]" } },
+  // indigo
+  { vivid: { bg: "bg-[#7C3AED]", text: "text-white" }, soft: { bg: "bg-[#EDE9FE]", text: "text-[#6D28D9]" } },
+  // violet
+  { vivid: { bg: "bg-[#9333EA]", text: "text-white" }, soft: { bg: "bg-[#F3E8FF]", text: "text-[#7E22CE]" } },
+  // purple
+  { vivid: { bg: "bg-[#DB2777]", text: "text-white" }, soft: { bg: "bg-[#FCE7F3]", text: "text-[#BE185D]" } }
+  // pink
+];
+function getAvatarInitials(name, maxChars = 2) {
+  const trimmed = name.trim();
+  if (!trimmed) return "";
+  const cjkRegex = /[\u3000-\u9fff\uac00-\ud7af\uff00-\uffef]/;
+  if (cjkRegex.test(trimmed.charAt(0))) {
+    return trimmed.slice(0, maxChars);
+  }
+  const parts = trimmed.split(/[\s\-_.]+/).filter(Boolean);
+  if (parts.length === 1) {
+    return parts[0].charAt(0).toUpperCase();
+  }
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase().slice(0, maxChars);
+}
+function getAvatarColor(name, variant = "vivid") {
+  let hash = 5381;
+  for (let i = 0; i < name.length; i++) {
+    hash = (hash << 5) + hash ^ name.charCodeAt(i);
+  }
+  return avatarColors[(hash >>> 0) % avatarColors.length][variant];
+}
+const Avatar = React.forwardRef(({ className, size, shape, status, children, ...props }, ref) => {
+  const resolvedSize = size || "default";
+  if (!status) {
+    return /* @__PURE__ */ React.createElement(
+      AvatarPrimitive.Root,
+      {
+        ref,
+        className: cn(avatarVariants({ size, shape }), className),
+        ...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]
+      )
+    }
+  ));
+});
+Avatar.displayName = "Avatar";
+const AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  AvatarPrimitive.Image,
+  {
+    ref,
+    className: cn("object-cover w-full h-full", className),
+    ...props
+  }
+));
+AvatarImage.displayName = "AvatarImage";
+const AvatarFallback = React.forwardRef(({ className, size, name, colorized, colorVariant = "vivid", children, ...props }, ref) => {
+  const resolvedSize = size || "default";
+  const colorKey = name || colorized;
+  const color = colorKey ? getAvatarColor(colorKey, colorVariant) : null;
+  const resolvedChildren = children ?? (name ? getAvatarInitials(name) : void 0);
+  return /* @__PURE__ */ React.createElement(
+    AvatarPrimitive.Fallback,
+    {
+      ref,
+      className: cn(
+        "flex items-center justify-center w-full h-full font-semibold",
+        color ? [color.bg, color.text] : "bg-background-muted text-text-muted",
+        fallbackFontSizes[resolvedSize],
+        className
+      ),
+      ...props
+    },
+    resolvedChildren
+  );
+});
+AvatarFallback.displayName = "AvatarFallback";
+const AvatarGroup = React.forwardRef(
+  ({ className, max, size = "default", shape = "circle", children, ...props }, ref) => {
+    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(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center",
+          groupNegativeMargins[size],
+          "[&>*]:ring-2 [&>*]:ring-background",
+          className
+        ),
+        ...props
+      },
+      visibleChildren,
+      overflowCount > 0 && /* @__PURE__ */ React.createElement(Avatar, { size, shape }, /* @__PURE__ */ React.createElement(AvatarFallback, { size }, "+", overflowCount))
+    );
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+export {
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+  avatarColors,
+  avatarVariants,
+  getAvatarColor,
+  getAvatarInitials
+};
+//# sourceMappingURL=avatar.mjs.map

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

@@ -0,0 +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":[]}

package/dist/components/ui/badge.d.mts

@@ -0,0 +1,31 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const badgeVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    radius?: "sm" | "lg" | "base" | "md" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type BadgeVariant = 'solid' | 'subtle' | 'outline';
+type BadgeColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+type BadgeSize = 'sm' | 'default' | 'lg';
+type BadgeRadius = 'sm' | 'base' | 'md' | 'lg' | 'full';
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+    /** Visual style */
+    variant?: BadgeVariant;
+    /** Semantic color */
+    color?: BadgeColor;
+    /** Leading icon slot */
+    icon?: React.ReactNode;
+    /** Show a status dot before text */
+    dot?: boolean;
+    /** Show a remove button */
+    removable?: boolean;
+    /** Callback when remove button is clicked */
+    onRemove?: () => void;
+    /** Render as child element (Slot pattern) */
+    asChild?: boolean;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Badge, type BadgeColor, type BadgeProps, type BadgeRadius, type BadgeSize, type BadgeVariant, badgeVariants };

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,31 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare const badgeVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+    radius?: "sm" | "lg" | "base" | "md" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type BadgeVariant = 'solid' | 'subtle' | 'outline';
+type BadgeColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+type BadgeSize = 'sm' | 'default' | 'lg';
+type BadgeRadius = 'sm' | 'base' | 'md' | 'lg' | 'full';
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+    /** Visual style */
+    variant?: BadgeVariant;
+    /** Semantic color */
+    color?: BadgeColor;
+    /** Leading icon slot */
+    icon?: React.ReactNode;
+    /** Show a status dot before text */
+    dot?: boolean;
+    /** Show a remove button */
+    removable?: boolean;
+    /** Callback when remove button is clicked */
+    onRemove?: () => void;
+    /** Render as child element (Slot pattern) */
+    asChild?: boolean;
+}
+declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
+
+export { Badge, type BadgeColor, type BadgeProps, type BadgeRadius, type BadgeSize, type BadgeVariant, badgeVariants };

package/dist/components/ui/badge.js

@@ -0,0 +1,205 @@
+"use strict";
+"use client";
+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 badge_exports = {};
+__export(badge_exports, {
+  Badge: () => Badge,
+  badgeVariants: () => badgeVariants
+});
+module.exports = __toCommonJS(badge_exports);
+var React = __toESM(require("react"));
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var import_utils = require("../../lib/utils");
+const colorMap = {
+  default: {
+    solid: "bg-foreground text-background",
+    subtle: "bg-background-muted text-foreground",
+    outline: "border-border text-foreground"
+  },
+  primary: {
+    solid: "bg-primary text-primary-foreground",
+    subtle: "bg-primary-tint text-text-primary",
+    outline: "border-primary text-text-primary"
+  },
+  success: {
+    solid: "bg-success text-success-foreground",
+    subtle: "bg-success-tint text-text-success",
+    outline: "border-success text-text-success"
+  },
+  warning: {
+    solid: "bg-warning text-warning-foreground",
+    subtle: "bg-warning-tint text-text-warning",
+    outline: "border-warning text-text-warning"
+  },
+  error: {
+    solid: "bg-error text-error-foreground",
+    subtle: "bg-error-tint text-text-error",
+    outline: "border-error text-text-error"
+  },
+  info: {
+    solid: "bg-info text-info-foreground",
+    subtle: "bg-info-tint text-text-info",
+    outline: "border-info text-text-info"
+  }
+};
+const badgeVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center whitespace-nowrap font-semibold transition-colors select-none",
+  {
+    variants: {
+      size: {
+        sm: "h-5 min-w-5 px-1.5 text-2xs gap-1",
+        // 20px height, 6px paddingX, 11px font
+        default: "h-6 min-w-6 px-2 text-xs gap-1",
+        // 24px height, 8px paddingX, 12px font
+        lg: "h-7 min-w-7 px-2.5 text-sm gap-1.5"
+        // 28px height, 10px paddingX, 13px font
+      },
+      radius: {
+        sm: "rounded-sm",
+        // 2px
+        base: "rounded",
+        // 4px
+        md: "rounded-md",
+        // 6px
+        lg: "rounded-lg",
+        // 8px
+        full: "rounded-full"
+        // 9999px
+      }
+    },
+    defaultVariants: {
+      size: "default",
+      radius: "full"
+    }
+  }
+);
+const badgeIconSizes = {
+  sm: "icon-2xs",
+  // 12px
+  default: "icon-2xs",
+  // 12px
+  lg: "icon-xs"
+  // 14px
+};
+const badgeDotSizes = {
+  sm: "w-1 h-1",
+  default: "w-1.5 h-1.5",
+  lg: "w-1.5 h-1.5"
+};
+const dotColorMap = {
+  default: "bg-foreground",
+  primary: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  error: "bg-error",
+  info: "bg-info"
+};
+const Badge = React.forwardRef(
+  ({
+    className,
+    variant = "subtle",
+    color = "default",
+    size,
+    radius,
+    icon,
+    dot = false,
+    removable = false,
+    onRemove,
+    asChild = false,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "span";
+    const resolvedSize = size || "default";
+    const colorClasses = colorMap[color][variant];
+    const outlineClasses = variant === "outline" ? "border bg-transparent" : "";
+    const dotColor = variant === "solid" ? "bg-current" : dotColorMap[color];
+    return /* @__PURE__ */ React.createElement(
+      Comp,
+      {
+        ref,
+        className: (0, import_utils.cn)(
+          badgeVariants({ size, radius }),
+          colorClasses,
+          outlineClasses,
+          className
+        ),
+        ...props
+      },
+      dot && /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: (0, import_utils.cn)("shrink-0 rounded-full", badgeDotSizes[resolvedSize], dotColor),
+          "aria-hidden": "true"
+        }
+      ),
+      icon && /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          className: (0, import_utils.cn)("shrink-0 [&>svg]:w-full [&>svg]:h-full", badgeIconSizes[resolvedSize]),
+          "aria-hidden": "true"
+        },
+        icon
+      ),
+      children,
+      removable && /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          className: "shrink-0 -mr-0.5 ml-0.5 rounded-full p-0.5 opacity-70 hover:opacity-100 transition-opacity focus-visible:focus-ring",
+          onClick: (e) => {
+            e.stopPropagation();
+            onRemove?.();
+          },
+          "aria-label": "Remove"
+        },
+        /* @__PURE__ */ React.createElement(
+          "svg",
+          {
+            className: "w-3 h-3",
+            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" })
+        )
+      )
+    );
+  }
+);
+Badge.displayName = "Badge";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Badge,
+  badgeVariants
+});
+//# sourceMappingURL=badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/badge.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Badge color maps for variant × color combinations\n// Uses semantic tokens (*.tint, text-text-*) for v4 dark mode compatibility\nconst colorMap = {\n  default: {\n    solid: 'bg-foreground text-background',\n    subtle: 'bg-background-muted text-foreground',\n    outline: 'border-border text-foreground',\n  },\n  primary: {\n    solid: 'bg-primary text-primary-foreground',\n    subtle: 'bg-primary-tint text-text-primary',\n    outline: 'border-primary text-text-primary',\n  },\n  success: {\n    solid: 'bg-success text-success-foreground',\n    subtle: 'bg-success-tint text-text-success',\n    outline: 'border-success text-text-success',\n  },\n  warning: {\n    solid: 'bg-warning text-warning-foreground',\n    subtle: 'bg-warning-tint text-text-warning',\n    outline: 'border-warning text-text-warning',\n  },\n  error: {\n    solid: 'bg-error text-error-foreground',\n    subtle: 'bg-error-tint text-text-error',\n    outline: 'border-error text-text-error',\n  },\n  info: {\n    solid: 'bg-info text-info-foreground',\n    subtle: 'bg-info-tint text-text-info',\n    outline: 'border-info text-text-info',\n  },\n} as const\n\nconst badgeVariants = cva(\n  'inline-flex items-center justify-center whitespace-nowrap font-semibold transition-colors select-none',\n  {\n    variants: {\n      size: {\n        sm: 'h-5 min-w-5 px-1.5 text-2xs gap-1',       // 20px height, 6px paddingX, 11px font\n        default: 'h-6 min-w-6 px-2 text-xs gap-1',      // 24px height, 8px paddingX, 12px font\n        lg: 'h-7 min-w-7 px-2.5 text-sm gap-1.5',       // 28px height, 10px paddingX, 13px font\n      },\n      radius: {\n        sm: 'rounded-sm',       // 2px\n        base: 'rounded',        // 4px\n        md: 'rounded-md',       // 6px\n        lg: 'rounded-lg',       // 8px\n        full: 'rounded-full',   // 9999px\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n      radius: 'full',\n    },\n  }\n)\n\n// Icon sizes per badge size\nconst badgeIconSizes = {\n  sm: 'icon-2xs',      // 12px\n  default: 'icon-2xs', // 12px\n  lg: 'icon-xs',       // 14px\n} as const\n\n// Dot sizes per badge size\nconst badgeDotSizes = {\n  sm: 'w-1 h-1',\n  default: 'w-1.5 h-1.5',\n  lg: 'w-1.5 h-1.5',\n} as const\n\n// Dot colors per color (matches the solid background)\nconst dotColorMap = {\n  default: 'bg-foreground',\n  primary: 'bg-primary',\n  success: 'bg-success',\n  warning: 'bg-warning',\n  error: 'bg-error',\n  info: 'bg-info',\n} as const\n\nexport type BadgeVariant = 'solid' | 'subtle' | 'outline'\nexport type BadgeColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info'\nexport type BadgeSize = 'sm' | 'default' | 'lg'\nexport type BadgeRadius = 'sm' | 'base' | 'md' | 'lg' | 'full'\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {\n  /** Visual style */\n  variant?: BadgeVariant\n  /** Semantic color */\n  color?: BadgeColor\n  /** Leading icon slot */\n  icon?: React.ReactNode\n  /** Show a status dot before text */\n  dot?: boolean\n  /** Show a remove button */\n  removable?: boolean\n  /** Callback when remove button is clicked */\n  onRemove?: () => void\n  /** Render as child element (Slot pattern) */\n  asChild?: boolean\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({\n    className,\n    variant = 'subtle',\n    color = 'default',\n    size,\n    radius,\n    icon,\n    dot = false,\n    removable = false,\n    onRemove,\n    asChild = false,\n    children,\n    ...props\n  }, ref) => {\n    const Comp = asChild ? Slot : 'span'\n    const resolvedSize = size || 'default'\n\n    // Color classes from variant × color map\n    const colorClasses = colorMap[color][variant]\n    // Outline variant needs border\n    const outlineClasses = variant === 'outline' ? 'border bg-transparent' : ''\n\n    // Dot color: in solid variant use currentColor (white/foreground), otherwise use semantic color\n    const dotColor = variant === 'solid' ? 'bg-current' : dotColorMap[color]\n\n    return (\n      <Comp\n        ref={ref}\n        className={cn(\n          badgeVariants({ size, radius }),\n          colorClasses,\n          outlineClasses,\n          className\n        )}\n        {...props}\n      >\n        {dot && (\n          <span\n            className={cn('shrink-0 rounded-full', badgeDotSizes[resolvedSize], dotColor)}\n            aria-hidden=\"true\"\n          />\n        )}\n        {icon && (\n          <span\n            className={cn('shrink-0 [&>svg]:w-full [&>svg]:h-full', badgeIconSizes[resolvedSize])}\n            aria-hidden=\"true\"\n          >\n            {icon}\n          </span>\n        )}\n        {children}\n        {removable && (\n          <button\n            type=\"button\"\n            className=\"shrink-0 -mr-0.5 ml-0.5 rounded-full p-0.5 opacity-70 hover:opacity-100 transition-opacity focus-visible:focus-ring\"\n            onClick={(e) => {\n              e.stopPropagation()\n              onRemove?.()\n            }}\n            aria-label=\"Remove\"\n          >\n            <svg\n              className=\"w-3 h-3\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n              strokeWidth={2}\n              aria-hidden=\"true\"\n            >\n              <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n            </svg>\n          </button>\n        )}\n      </Comp>\n    )\n  }\n)\nBadge.displayName = 'Badge'\n\nexport { Badge, badgeVariants }\n"],"mappings":"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","names":[]}