@mieweb/ui 0.2.4 → 0.3.0-dev.60

package/dist/chunk-B43FRU5R.js

@@ -0,0 +1,247 @@
+import { Input } from './chunk-XHESCAUE.js';
+import { formatPhoneNumber, unformatPhoneNumber, isValidPhoneNumber } from './chunk-CEHWXAAI.js';
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var PhoneInput = React.forwardRef(
+  ({
+    value = "",
+    onChange,
+    onFormattedChange,
+    validateOnBlur,
+    className,
+    onBlur,
+    hasError,
+    error,
+    ...props
+  }, ref) => {
+    const [displayValue, setDisplayValue] = React.useState(
+      () => formatPhoneNumber(value)
+    );
+    const [localError, setLocalError] = React.useState();
+    React.useEffect(() => {
+      setDisplayValue(formatPhoneNumber(value));
+    }, [value]);
+    const handleChange = (e) => {
+      const formatted = formatPhoneNumber(e.target.value);
+      setDisplayValue(formatted);
+      const unformatted = unformatPhoneNumber(formatted);
+      onChange?.(unformatted);
+      onFormattedChange?.(formatted);
+      if (localError) {
+        setLocalError(void 0);
+      }
+    };
+    const handleBlur = (e) => {
+      onBlur?.(e);
+      if (validateOnBlur) {
+        const unformatted = unformatPhoneNumber(displayValue);
+        if (unformatted.length > 0 && !isValidPhoneNumber(displayValue)) {
+          setLocalError("Please enter a valid 10-digit phone number");
+        } else {
+          setLocalError(void 0);
+        }
+      }
+    };
+    return /* @__PURE__ */ jsx(
+      Input,
+      {
+        ref,
+        type: "tel",
+        inputMode: "numeric",
+        autoComplete: "tel-national",
+        placeholder: "(555) 555-5555",
+        value: displayValue,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        hasError: hasError || !!localError,
+        error: error || localError,
+        className: cn(className),
+        ...props
+      }
+    );
+  }
+);
+PhoneInput.displayName = "PhoneInput";
+var PHONE_TYPES = [
+  { value: "cell", label: "Cell" },
+  { value: "landline", label: "Landline" },
+  { value: "home", label: "Home" },
+  { value: "work", label: "Work" },
+  { value: "fax", label: "Fax" }
+];
+function PhoneInputGroup({
+  value,
+  onChange,
+  minEntries = 1,
+  maxEntries = 5,
+  required = false,
+  disabled = false,
+  validateOnBlur = false,
+  label,
+  typeLabels,
+  className
+}) {
+  const phones = React.useMemo(() => {
+    if (value.length >= minEntries) return value;
+    const padding = Array(minEntries - value.length).fill(null).map(() => ({ number: "", type: "cell" }));
+    return [...value, ...padding];
+  }, [value, minEntries]);
+  const handlePhoneChange = (index, number) => {
+    const updated = [...phones];
+    updated[index] = { ...updated[index], number };
+    onChange(updated);
+  };
+  const handleTypeChange = (index, type) => {
+    const updated = [...phones];
+    updated[index] = { ...updated[index], type };
+    onChange(updated);
+  };
+  const handleAdd = () => {
+    if (phones.length < maxEntries) {
+      onChange([...phones, { number: "", type: "cell" }]);
+    }
+  };
+  const handleRemove = (index) => {
+    if (phones.length > minEntries) {
+      onChange(phones.filter((_, i) => i !== index));
+    }
+  };
+  const getTypeLabel = (type) => {
+    if (typeLabels?.[type]) return typeLabels[type];
+    return PHONE_TYPES.find((t) => t.value === type)?.label || type;
+  };
+  const canAdd = phones.length < maxEntries;
+  const canRemove = phones.length > minEntries;
+  return /* @__PURE__ */ jsx("div", { "data-slot": "phone-group", className: cn("space-y-3", className), children: phones.map((phone, index) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "phone-row",
+      className: "flex items-start gap-2",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+          PhoneInput,
+          {
+            label: index === 0 ? label : void 0,
+            value: phone.number,
+            onChange: (num) => handlePhoneChange(index, num),
+            disabled,
+            validateOnBlur,
+            required: required && index === 0
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "w-24 shrink-0 sm:w-32", children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: `phone-type-${index}`, className: "sr-only", children: "Phone type" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              id: `phone-type-${index}`,
+              "data-slot": "phone-type-select",
+              value: phone.type,
+              onChange: (e) => handleTypeChange(index, e.target.value),
+              disabled,
+              className: cn(
+                "h-10 w-full rounded-md border px-3 py-2 text-sm",
+                "border-gray-300 bg-white text-gray-900",
+                "focus:border-brand-500 focus:ring-brand-500/20 focus:ring-2 focus:outline-none",
+                "disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
+                "dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100",
+                "dark:focus:border-brand-400 dark:focus:ring-brand-400/20",
+                index === 0 && label ? "mt-[26px]" : ""
+              ),
+              children: PHONE_TYPES.map((type) => /* @__PURE__ */ jsx("option", { value: type.value, children: getTypeLabel(type.value) }, type.value))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "phone-action",
+            className: cn(
+              "flex shrink-0 items-center",
+              index === 0 && label ? "mt-[26px]" : ""
+            ),
+            children: index === 0 ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-slot": "phone-add-btn",
+                onClick: handleAdd,
+                disabled: disabled || !canAdd,
+                className: cn(
+                  "rounded-full p-2 transition-colors",
+                  "text-brand-600 hover:bg-brand-50",
+                  "disabled:cursor-not-allowed disabled:text-gray-300 disabled:hover:bg-transparent",
+                  "dark:text-brand-400 dark:hover:bg-brand-900/20",
+                  "dark:disabled:text-gray-600"
+                ),
+                "aria-label": "Add phone number",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    "data-slot": "phone-add-icon",
+                    className: "h-5 w-5",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M12 4v16m8-8H4"
+                      }
+                    )
+                  }
+                )
+              }
+            ) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                "data-slot": "phone-remove-btn",
+                onClick: () => handleRemove(index),
+                disabled: disabled || !canRemove,
+                className: cn(
+                  "rounded-full p-2 transition-colors",
+                  "text-red-600 hover:bg-red-50",
+                  "disabled:cursor-not-allowed disabled:text-gray-300 disabled:hover:bg-transparent",
+                  "dark:text-red-400 dark:hover:bg-red-900/20",
+                  "dark:disabled:text-gray-600"
+                ),
+                "aria-label": "Remove phone number",
+                children: /* @__PURE__ */ jsx(
+                  "svg",
+                  {
+                    "data-slot": "phone-remove-icon",
+                    className: "h-5 w-5",
+                    fill: "none",
+                    viewBox: "0 0 24 24",
+                    stroke: "currentColor",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M20 12H4"
+                      }
+                    )
+                  }
+                )
+              }
+            )
+          }
+        )
+      ]
+    },
+    index
+  )) });
+}
+PhoneInputGroup.displayName = "PhoneInputGroup";
+
+export { PhoneInput, PhoneInputGroup };
+//# sourceMappingURL=chunk-B43FRU5R.js.map
+//# sourceMappingURL=chunk-B43FRU5R.js.map

package/dist/chunk-B43FRU5R.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PhoneInput/PhoneInput.tsx"],"names":[],"mappings":"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","file":"chunk-B43FRU5R.js","sourcesContent":["import * as React from 'react';\nimport { cn } from '../../utils/cn';\nimport {\n  formatPhoneNumber,\n  unformatPhoneNumber,\n  isValidPhoneNumber,\n} from '../../utils/phone';\nimport { Input, type InputProps } from '../Input';\n\nexport interface PhoneInputProps extends Omit<\n  InputProps,\n  'type' | 'onChange' | 'value'\n> {\n  /** The phone number value (can be formatted or unformatted) */\n  value?: string;\n  /** Callback fired when the value changes, receives the unformatted value */\n  onChange?: (value: string) => void;\n  /** Callback fired when the formatted value changes */\n  onFormattedChange?: (formattedValue: string) => void;\n  /** Whether to validate and show error state for incomplete phone numbers */\n  validateOnBlur?: boolean;\n}\n\n/**\n * A phone number input that automatically formats to US format: (XXX) XXX-XXXX\n *\n * @example\n * ```tsx\n * const [phone, setPhone] = useState('');\n * <PhoneInput\n *   label=\"Phone Number\"\n *   value={phone}\n *   onChange={setPhone}\n *   validateOnBlur\n * />\n * ```\n */\nconst PhoneInput = React.forwardRef<HTMLInputElement, PhoneInputProps>(\n  (\n    {\n      value = '',\n      onChange,\n      onFormattedChange,\n      validateOnBlur,\n      className,\n      onBlur,\n      hasError,\n      error,\n      ...props\n    },\n    ref\n  ) => {\n    const [displayValue, setDisplayValue] = React.useState(() =>\n      formatPhoneNumber(value)\n    );\n    const [localError, setLocalError] = React.useState<string | undefined>();\n\n    // Sync external value changes\n    React.useEffect(() => {\n      setDisplayValue(formatPhoneNumber(value));\n    }, [value]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      const formatted = formatPhoneNumber(e.target.value);\n      setDisplayValue(formatted);\n\n      const unformatted = unformatPhoneNumber(formatted);\n      onChange?.(unformatted);\n      onFormattedChange?.(formatted);\n\n      // Clear error when user starts typing again\n      if (localError) {\n        setLocalError(undefined);\n      }\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n      onBlur?.(e);\n\n      if (validateOnBlur) {\n        const unformatted = unformatPhoneNumber(displayValue);\n        if (unformatted.length > 0 && !isValidPhoneNumber(displayValue)) {\n          setLocalError('Please enter a valid 10-digit phone number');\n        } else {\n          setLocalError(undefined);\n        }\n      }\n    };\n\n    return (\n      <Input\n        ref={ref}\n        type=\"tel\"\n        inputMode=\"numeric\"\n        autoComplete=\"tel-national\"\n        placeholder=\"(555) 555-5555\"\n        value={displayValue}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        hasError={hasError || !!localError}\n        error={error || localError}\n        className={cn(className)}\n        {...props}\n      />\n    );\n  }\n);\n\nPhoneInput.displayName = 'PhoneInput';\n\n// =============================================================================\n// Phone Types\n// =============================================================================\n\nexport type PhoneType = 'cell' | 'landline' | 'home' | 'work' | 'fax';\n\nexport interface PhoneEntry {\n  number: string;\n  type: PhoneType;\n}\n\nconst PHONE_TYPES: { value: PhoneType; label: string }[] = [\n  { value: 'cell', label: 'Cell' },\n  { value: 'landline', label: 'Landline' },\n  { value: 'home', label: 'Home' },\n  { value: 'work', label: 'Work' },\n  { value: 'fax', label: 'Fax' },\n];\n\n// =============================================================================\n// PhoneInputGroup\n// =============================================================================\n\nexport interface PhoneInputGroupProps {\n  /** Array of phone entries */\n  value: PhoneEntry[];\n  /** Callback when phone entries change */\n  onChange: (phones: PhoneEntry[]) => void;\n  /** Minimum number of phone entries (default: 1) */\n  minEntries?: number;\n  /** Maximum number of phone entries (default: 5) */\n  maxEntries?: number;\n  /** Whether the first entry is required */\n  required?: boolean;\n  /** Whether all inputs are disabled */\n  disabled?: boolean;\n  /** Validate on blur */\n  validateOnBlur?: boolean;\n  /** Label for the phone input */\n  label?: string;\n  /** Labels for type options (for i18n) */\n  typeLabels?: Record<PhoneType, string>;\n  /** Custom className */\n  className?: string;\n}\n\n/**\n * A group of phone inputs with type selection and add/remove functionality.\n *\n * @example\n * ```tsx\n * const [phones, setPhones] = useState<PhoneEntry[]>([\n *   { number: '', type: 'cell' }\n * ]);\n *\n * <PhoneInputGroup\n *   value={phones}\n *   onChange={setPhones}\n *   required\n * />\n * ```\n */\nfunction PhoneInputGroup({\n  value,\n  onChange,\n  minEntries = 1,\n  maxEntries = 5,\n  required = false,\n  disabled = false,\n  validateOnBlur = false,\n  label,\n  typeLabels,\n  className,\n}: PhoneInputGroupProps) {\n  // Ensure we always have at least minEntries\n  const phones = React.useMemo(() => {\n    if (value.length >= minEntries) return value;\n    const padding: PhoneEntry[] = Array(minEntries - value.length)\n      .fill(null)\n      .map(() => ({ number: '', type: 'cell' as PhoneType }));\n    return [...value, ...padding];\n  }, [value, minEntries]);\n\n  const handlePhoneChange = (index: number, number: string) => {\n    const updated = [...phones];\n    updated[index] = { ...updated[index], number };\n    onChange(updated);\n  };\n\n  const handleTypeChange = (index: number, type: PhoneType) => {\n    const updated = [...phones];\n    updated[index] = { ...updated[index], type };\n    onChange(updated);\n  };\n\n  const handleAdd = () => {\n    if (phones.length < maxEntries) {\n      onChange([...phones, { number: '', type: 'cell' }]);\n    }\n  };\n\n  const handleRemove = (index: number) => {\n    if (phones.length > minEntries) {\n      onChange(phones.filter((_, i) => i !== index));\n    }\n  };\n\n  const getTypeLabel = (type: PhoneType): string => {\n    if (typeLabels?.[type]) return typeLabels[type];\n    return PHONE_TYPES.find((t) => t.value === type)?.label || type;\n  };\n\n  const canAdd = phones.length < maxEntries;\n  const canRemove = phones.length > minEntries;\n\n  return (\n    <div data-slot=\"phone-group\" className={cn('space-y-3', className)}>\n      {phones.map((phone, index) => (\n        <div\n          key={index}\n          data-slot=\"phone-row\"\n          className=\"flex items-start gap-2\"\n        >\n          {/* Phone number input */}\n          <div className=\"flex-1\">\n            <PhoneInput\n              label={index === 0 ? label : undefined}\n              value={phone.number}\n              onChange={(num) => handlePhoneChange(index, num)}\n              disabled={disabled}\n              validateOnBlur={validateOnBlur}\n              required={required && index === 0}\n            />\n          </div>\n\n          {/* Type selector */}\n          <div className=\"w-24 shrink-0 sm:w-32\">\n            <label htmlFor={`phone-type-${index}`} className=\"sr-only\">\n              Phone type\n            </label>\n            <select\n              id={`phone-type-${index}`}\n              data-slot=\"phone-type-select\"\n              value={phone.type}\n              onChange={(e) =>\n                handleTypeChange(index, e.target.value as PhoneType)\n              }\n              disabled={disabled}\n              className={cn(\n                'h-10 w-full rounded-md border px-3 py-2 text-sm',\n                'border-gray-300 bg-white text-gray-900',\n                'focus:border-brand-500 focus:ring-brand-500/20 focus:ring-2 focus:outline-none',\n                'disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500',\n                'dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100',\n                'dark:focus:border-brand-400 dark:focus:ring-brand-400/20',\n                index === 0 && label ? 'mt-[26px]' : ''\n              )}\n            >\n              {PHONE_TYPES.map((type) => (\n                <option key={type.value} value={type.value}>\n                  {getTypeLabel(type.value)}\n                </option>\n              ))}\n            </select>\n          </div>\n\n          {/* Add/Remove buttons */}\n          <div\n            data-slot=\"phone-action\"\n            className={cn(\n              'flex shrink-0 items-center',\n              index === 0 && label ? 'mt-[26px]' : ''\n            )}\n          >\n            {index === 0 ? (\n              <button\n                type=\"button\"\n                data-slot=\"phone-add-btn\"\n                onClick={handleAdd}\n                disabled={disabled || !canAdd}\n                className={cn(\n                  'rounded-full p-2 transition-colors',\n                  'text-brand-600 hover:bg-brand-50',\n                  'disabled:cursor-not-allowed disabled:text-gray-300 disabled:hover:bg-transparent',\n                  'dark:text-brand-400 dark:hover:bg-brand-900/20',\n                  'dark:disabled:text-gray-600'\n                )}\n                aria-label=\"Add phone number\"\n              >\n                <svg\n                  data-slot=\"phone-add-icon\"\n                  className=\"h-5 w-5\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M12 4v16m8-8H4\"\n                  />\n                </svg>\n              </button>\n            ) : (\n              <button\n                type=\"button\"\n                data-slot=\"phone-remove-btn\"\n                onClick={() => handleRemove(index)}\n                disabled={disabled || !canRemove}\n                className={cn(\n                  'rounded-full p-2 transition-colors',\n                  'text-red-600 hover:bg-red-50',\n                  'disabled:cursor-not-allowed disabled:text-gray-300 disabled:hover:bg-transparent',\n                  'dark:text-red-400 dark:hover:bg-red-900/20',\n                  'dark:disabled:text-gray-600'\n                )}\n                aria-label=\"Remove phone number\"\n              >\n                <svg\n                  data-slot=\"phone-remove-icon\"\n                  className=\"h-5 w-5\"\n                  fill=\"none\"\n                  viewBox=\"0 0 24 24\"\n                  stroke=\"currentColor\"\n                >\n                  <path\n                    strokeLinecap=\"round\"\n                    strokeLinejoin=\"round\"\n                    strokeWidth={2}\n                    d=\"M20 12H4\"\n                  />\n                </svg>\n              </button>\n            )}\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n\nPhoneInputGroup.displayName = 'PhoneInputGroup';\n\nexport { PhoneInput, PhoneInputGroup };\n"]}

package/dist/{chunk-XXOBTAKA.js → chunk-BBQZNIB4.js}

@@ -93,6 +93,7 @@ var Card = React.forwardRef(
           accent && "pl-4",
           className
         ),
+        "data-slot": "card",
         "data-loading": loading || void 0,
         "aria-busy": loading || void 0,
         ...props,
@@ -120,6 +121,7 @@ var CardHeader = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   "div",
   {
     ref,
+    "data-slot": "card-header",
     className: cn("flex flex-col gap-1.5 pb-4", className),
     ...props
   }
@@ -129,6 +131,7 @@ var CardTitle = React.forwardRef(({ className, children, ...props }, ref) => /*
   "h3",
   {
     ref,
+    "data-slot": "card-title",
     className: cn(
       "text-lg leading-none font-semibold tracking-tight",
       className
@@ -142,17 +145,27 @@ var CardDescription = React.forwardRef(({ className, ...props }, ref) => /* @__P
   "p",
   {
     ref,
+    "data-slot": "card-description",
     className: cn("text-muted-foreground text-sm", className),
     ...props
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    "data-slot": "card-content",
+    className: cn("", className),
+    ...props
+  }
+));
 CardContent.displayName = "CardContent";
 var CardFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
+    "data-slot": "card-footer",
     className: cn("flex items-center pt-4", className),
     ...props
   }
@@ -170,6 +183,7 @@ var CardMedia = React.forwardRef(
       "div",
       {
         ref,
+        "data-slot": "card-media",
         className: cn(
           "relative -mx-4 -mt-4 overflow-hidden first:rounded-t-xl",
           className
@@ -216,6 +230,7 @@ var CardBadge = React.forwardRef(
       "span",
       {
         ref,
+        "data-slot": "card-badge",
         className: cn(
           "absolute z-10 rounded-md px-2 py-1 text-xs font-medium",
           variantClasses[variant],
@@ -242,6 +257,7 @@ var CardActions = React.forwardRef(
       "div",
       {
         ref,
+        "data-slot": "card-actions",
         className: cn(
           "flex items-center gap-2 pt-4",
           alignClasses[align],
@@ -258,6 +274,7 @@ var CardDivider = React.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   "hr",
   {
     ref,
+    "data-slot": "card-divider",
     className: cn("border-border -mx-4 my-4", className),
     ...props
   }
@@ -282,51 +299,60 @@ var CardCollapsible = React.forwardRef(
         setInternalExpanded(!expanded);
       }
     };
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("", className), ...props, children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: handleToggle,
-          className: "text-primary-600 focus-visible:ring-primary-500 flex items-center gap-1 rounded text-sm hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
-          "aria-expanded": expanded,
-          children: typeof trigger === "string" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            expanded ? "Show less" : trigger,
-            /* @__PURE__ */ jsx(
-              "svg",
-              {
-                className: cn(
-                  "h-4 w-4 transition-transform",
-                  expanded && "rotate-180"
-                ),
-                fill: "none",
-                stroke: "currentColor",
-                viewBox: "0 0 24 24",
-                children: /* @__PURE__ */ jsx(
-                  "path",
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "card-collapsible",
+        className: cn("", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleToggle,
+              className: "text-primary-600 focus-visible:ring-primary-500 flex items-center gap-1 rounded text-sm hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+              "aria-expanded": expanded,
+              children: typeof trigger === "string" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                expanded ? "Show less" : trigger,
+                /* @__PURE__ */ jsx(
+                  "svg",
                   {
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round",
-                    strokeWidth: 2,
-                    d: "M19 9l-7 7-7-7"
+                    className: cn(
+                      "h-4 w-4 transition-transform",
+                      expanded && "rotate-180"
+                    ),
+                    fill: "none",
+                    stroke: "currentColor",
+                    viewBox: "0 0 24 24",
+                    children: /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        strokeWidth: 2,
+                        d: "M19 9l-7 7-7-7"
+                      }
+                    )
                   }
                 )
-              }
-            )
-          ] }) : trigger
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "grid transition-all duration-300 ease-in-out",
-            expanded ? "mt-3 grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+              ] }) : trigger
+            }
           ),
-          children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children })
-        }
-      )
-    ] });
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "grid transition-all duration-300 ease-in-out",
+                expanded ? "mt-3 grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
+              ),
+              children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children })
+            }
+          )
+        ]
+      }
+    );
   }
 );
 CardCollapsible.displayName = "CardCollapsible";
@@ -336,6 +362,7 @@ var CardStat = React.forwardRef(
       "div",
       {
         ref,
+        "data-slot": "card-stat",
         className: cn("flex items-start gap-3", className),
         ...props,
         children: [
@@ -386,5 +413,5 @@ var CardStat = React.forwardRef(
 CardStat.displayName = "CardStat";
 
 export { Card, CardActions, CardBadge, CardCollapsible, CardContent, CardDescription, CardDivider, CardFooter, CardHeader, CardMedia, CardStat, CardTitle, cardAccentVariants, cardVariants };
-//# sourceMappingURL=chunk-XXOBTAKA.js.map
-//# sourceMappingURL=chunk-XXOBTAKA.js.map
+//# sourceMappingURL=chunk-BBQZNIB4.js.map
+//# sourceMappingURL=chunk-BBQZNIB4.js.map

package/dist/chunk-BBQZNIB4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Card/Card.tsx"],"names":[],"mappings":"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","file":"chunk-BBQZNIB4.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst cardVariants = cva(\n  [\n    'rounded-xl bg-card text-card-foreground',\n    'border border-border',\n    'relative overflow-hidden',\n  ],\n  {\n    variants: {\n      padding: {\n        none: 'p-0',\n        sm: 'p-3',\n        md: 'p-4',\n        lg: 'p-6',\n        xl: 'p-8',\n      },\n      variant: {\n        default: 'shadow-card',\n        elevated: 'shadow-lg border-0',\n        outlined: 'shadow-none border-2',\n        ghost: 'shadow-none border-0 bg-transparent',\n        filled: 'shadow-none border-0 bg-muted',\n      },\n      interactive: {\n        true: [\n          'transition-all duration-200',\n          'hover:shadow-md hover:border-primary-200',\n          'dark:hover:border-primary-800',\n          'cursor-pointer',\n          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2',\n        ],\n        false: '',\n      },\n      selected: {\n        true: 'ring-2 ring-primary-500 border-primary-500',\n        false: '',\n      },\n      orientation: {\n        vertical: 'flex flex-col',\n        horizontal: 'flex flex-row',\n      },\n    },\n    defaultVariants: {\n      padding: 'md',\n      variant: 'default',\n      interactive: false,\n      selected: false,\n      orientation: 'vertical',\n    },\n  }\n);\n\nconst cardAccentVariants = cva('absolute left-0 top-0 bottom-0 w-1', {\n  variants: {\n    color: {\n      primary: 'bg-primary-500',\n      success: 'bg-success',\n      warning: 'bg-warning',\n      destructive: 'bg-destructive',\n      info: 'bg-primary-200',\n    },\n  },\n});\n\nexport interface CardProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof cardVariants> {\n  /** Semantic HTML element to render as */\n  as?: 'div' | 'article' | 'section' | 'aside';\n  /** Accent color bar on the left side */\n  accent?: 'primary' | 'success' | 'warning' | 'destructive' | 'info';\n  /** Loading state - shows skeleton overlay */\n  loading?: boolean;\n}\n\n/**\n * A card container component for grouping related content.\n *\n * @example\n * ```tsx\n * <Card padding=\"lg\" variant=\"elevated\">\n *   <CardHeader>\n *     <CardTitle>Card Title</CardTitle>\n *   </CardHeader>\n *   <CardContent>Card content goes here</CardContent>\n * </Card>\n * ```\n */\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      className,\n      padding,\n      variant,\n      interactive,\n      selected,\n      orientation,\n      accent,\n      loading,\n      as: Component = 'div',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <Component\n        ref={ref}\n        className={cn(\n          cardVariants({\n            padding,\n            variant,\n            interactive,\n            selected,\n            orientation,\n          }),\n          accent && 'pl-4',\n          className\n        )}\n        data-slot=\"card\"\n        data-loading={loading || undefined}\n        aria-busy={loading || undefined}\n        {...props}\n      >\n        {accent && (\n          <div\n            className={cn(cardAccentVariants({ color: accent }))}\n            aria-hidden=\"true\"\n          />\n        )}\n        {loading && (\n          <div className=\"bg-card/80 absolute inset-0 z-10 flex items-center justify-center backdrop-blur-sm\">\n            <div className=\"flex gap-1\">\n              <div className=\"bg-primary-500 h-2 w-2 animate-bounce rounded-full [animation-delay:-0.3s]\" />\n              <div className=\"bg-primary-500 h-2 w-2 animate-bounce rounded-full [animation-delay:-0.15s]\" />\n              <div className=\"bg-primary-500 h-2 w-2 animate-bounce rounded-full\" />\n            </div>\n          </div>\n        )}\n        {children}\n      </Component>\n    );\n  }\n);\n\nCard.displayName = 'Card';\n\n/**\n * Header section of a Card\n */\nconst CardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"card-header\"\n    className={cn('flex flex-col gap-1.5 pb-4', className)}\n    {...props}\n  />\n));\n\nCardHeader.displayName = 'CardHeader';\n\n/**\n * Title for a Card\n */\nconst CardTitle = React.forwardRef<\n  globalThis.HTMLHeadingElement,\n  React.HTMLAttributes<globalThis.HTMLHeadingElement>\n>(({ className, children, ...props }, ref) => (\n  <h3\n    ref={ref}\n    data-slot=\"card-title\"\n    className={cn(\n      'text-lg leading-none font-semibold tracking-tight',\n      className\n    )}\n    {...props}\n  >\n    {children}\n  </h3>\n));\n\nCardTitle.displayName = 'CardTitle';\n\n/**\n * Description text for a Card\n */\nconst CardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    data-slot=\"card-description\"\n    className={cn('text-muted-foreground text-sm', className)}\n    {...props}\n  />\n));\n\nCardDescription.displayName = 'CardDescription';\n\n/**\n * Main content area of a Card\n */\nconst CardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"card-content\"\n    className={cn('', className)}\n    {...props}\n  />\n));\n\nCardContent.displayName = 'CardContent';\n\n/**\n * Footer section of a Card\n */\nconst CardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"card-footer\"\n    className={cn('flex items-center pt-4', className)}\n    {...props}\n  />\n));\n\nCardFooter.displayName = 'CardFooter';\n\n/**\n * Image/Media section for a Card - typically used at the top\n */\nexport interface CardMediaProps extends React.ImgHTMLAttributes<HTMLImageElement> {\n  /** Aspect ratio of the media */\n  aspectRatio?: 'video' | 'square' | 'wide' | 'auto';\n  /** Optional overlay content */\n  overlay?: React.ReactNode;\n}\n\nconst CardMedia = React.forwardRef<HTMLDivElement, CardMediaProps>(\n  ({ className, aspectRatio = 'video', overlay, src, alt, ...props }, ref) => {\n    const aspectClasses = {\n      video: 'aspect-video',\n      square: 'aspect-square',\n      wide: 'aspect-[21/9]',\n      auto: '',\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-media\"\n        className={cn(\n          'relative -mx-4 -mt-4 overflow-hidden first:rounded-t-xl',\n          className\n        )}\n      >\n        <img\n          src={src}\n          alt={alt}\n          className={cn('w-full object-cover', aspectClasses[aspectRatio])}\n          {...props}\n        />\n        {overlay && (\n          <div className=\"absolute inset-0 flex items-end bg-gradient-to-t from-neutral-900/60 to-transparent p-4\">\n            {overlay}\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n\nCardMedia.displayName = 'CardMedia';\n\n/**\n * Badge/Label component for Cards\n */\nexport interface CardBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Badge color variant */\n  variant?: 'default' | 'primary' | 'success' | 'warning' | 'destructive';\n  /** Position of the badge */\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';\n}\n\nconst CardBadge = React.forwardRef<HTMLSpanElement, CardBadgeProps>(\n  (\n    {\n      className,\n      variant = 'default',\n      position = 'top-right',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const variantClasses = {\n      default: 'bg-muted text-muted-foreground',\n      primary: 'bg-primary-500 text-white',\n      success: 'bg-success text-success-foreground',\n      warning: 'bg-warning text-warning-foreground',\n      destructive: 'bg-destructive text-destructive-foreground',\n    };\n\n    const positionClasses = {\n      'top-left': 'top-2 left-2',\n      'top-right': 'top-2 right-2',\n      'bottom-left': 'bottom-2 left-2',\n      'bottom-right': 'bottom-2 right-2',\n    };\n\n    return (\n      <span\n        ref={ref}\n        data-slot=\"card-badge\"\n        className={cn(\n          'absolute z-10 rounded-md px-2 py-1 text-xs font-medium',\n          variantClasses[variant],\n          positionClasses[position],\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </span>\n    );\n  }\n);\n\nCardBadge.displayName = 'CardBadge';\n\n/**\n * Actions area for Card buttons/links\n */\nexport interface CardActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Alignment of actions */\n  align?: 'left' | 'center' | 'right' | 'between' | 'around';\n}\n\nconst CardActions = React.forwardRef<HTMLDivElement, CardActionsProps>(\n  ({ className, align = 'right', children, ...props }, ref) => {\n    const alignClasses = {\n      left: 'justify-start',\n      center: 'justify-center',\n      right: 'justify-end',\n      between: 'justify-between',\n      around: 'justify-around',\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-actions\"\n        className={cn(\n          'flex items-center gap-2 pt-4',\n          alignClasses[align],\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nCardActions.displayName = 'CardActions';\n\n/**\n * Divider line within a Card\n */\nconst CardDivider = React.forwardRef<\n  globalThis.HTMLHRElement,\n  React.HTMLAttributes<globalThis.HTMLHRElement>\n>(({ className, ...props }, ref) => (\n  <hr\n    ref={ref}\n    data-slot=\"card-divider\"\n    className={cn('border-border -mx-4 my-4', className)}\n    {...props}\n  />\n));\n\nCardDivider.displayName = 'CardDivider';\n\n/**\n * Collapsible content section for Cards\n */\nexport interface CardCollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Whether the content is expanded */\n  expanded?: boolean;\n  /** Callback when expand state changes */\n  onExpandChange?: (expanded: boolean) => void;\n  /** Trigger element/text for expanding */\n  trigger?: React.ReactNode;\n}\n\nconst CardCollapsible = React.forwardRef<HTMLDivElement, CardCollapsibleProps>(\n  (\n    {\n      className,\n      expanded: controlledExpanded,\n      onExpandChange,\n      trigger = 'Show more',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const [internalExpanded, setInternalExpanded] = React.useState(false);\n    const isControlled = controlledExpanded !== undefined;\n    const expanded = isControlled ? controlledExpanded : internalExpanded;\n\n    const handleToggle = () => {\n      if (isControlled) {\n        onExpandChange?.(!expanded);\n      } else {\n        setInternalExpanded(!expanded);\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-collapsible\"\n        className={cn('', className)}\n        {...props}\n      >\n        <button\n          type=\"button\"\n          onClick={handleToggle}\n          className=\"text-primary-600 focus-visible:ring-primary-500 flex items-center gap-1 rounded text-sm hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\"\n          aria-expanded={expanded}\n        >\n          {typeof trigger === 'string' ? (\n            <>\n              {expanded ? 'Show less' : trigger}\n              <svg\n                className={cn(\n                  'h-4 w-4 transition-transform',\n                  expanded && 'rotate-180'\n                )}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M19 9l-7 7-7-7\"\n                />\n              </svg>\n            </>\n          ) : (\n            trigger\n          )}\n        </button>\n        <div\n          className={cn(\n            'grid transition-all duration-300 ease-in-out',\n            expanded\n              ? 'mt-3 grid-rows-[1fr] opacity-100'\n              : 'grid-rows-[0fr] opacity-0'\n          )}\n        >\n          <div className=\"overflow-hidden\">{children}</div>\n        </div>\n      </div>\n    );\n  }\n);\n\nCardCollapsible.displayName = 'CardCollapsible';\n\n/**\n * Stat/Metric display for Cards\n */\nexport interface CardStatProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** The main value/number */\n  value: React.ReactNode;\n  /** Label describing the stat */\n  label: string;\n  /** Trend indicator */\n  trend?: { value: number; label?: string };\n  /** Icon to display */\n  icon?: React.ReactNode;\n}\n\nconst CardStat = React.forwardRef<HTMLDivElement, CardStatProps>(\n  ({ className, value, label, trend, icon, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-slot=\"card-stat\"\n        className={cn('flex items-start gap-3', className)}\n        {...props}\n      >\n        {icon && (\n          <div className=\"bg-primary-500/10 text-primary-600 rounded-lg p-2\">\n            {icon}\n          </div>\n        )}\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"text-2xl font-bold tracking-tight\">{value}</div>\n          <div className=\"text-muted-foreground text-sm\">{label}</div>\n          {trend && (\n            <div\n              className={cn(\n                'mt-1 flex items-center gap-1 text-sm',\n                trend.value >= 0 ? 'text-success' : 'text-destructive'\n              )}\n            >\n              <svg\n                className={cn('h-4 w-4', trend.value < 0 && 'rotate-180')}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                viewBox=\"0 0 24 24\"\n              >\n                <path\n                  strokeLinecap=\"round\"\n                  strokeLinejoin=\"round\"\n                  strokeWidth={2}\n                  d=\"M5 10l7-7m0 0l7 7m-7-7v18\"\n                />\n              </svg>\n              <span>{Math.abs(trend.value)}%</span>\n              {trend.label && (\n                <span className=\"text-muted-foreground\">{trend.label}</span>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n);\n\nCardStat.displayName = 'CardStat';\n\nexport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n  CardMedia,\n  CardBadge,\n  CardActions,\n  CardDivider,\n  CardCollapsible,\n  CardStat,\n  cardVariants,\n  cardAccentVariants,\n};\n"]}

package/dist/{chunk-PEFJAWNR.cjs → chunk-BWYYA3LQ.cjs}

@@ -44,14 +44,28 @@ function Breadcrumb({
     ];
   }, [items, maxItems]);
   const defaultSeparator = /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, { className: "text-muted-foreground h-4 w-4 shrink-0" });
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex flex-wrap items-center gap-1.5", children: displayedItems.map((item, index) => {
-    const isLast = index === displayedItems.length - 1;
-    const isEllipsis = item.isEllipsis;
-    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-1.5", children: [
-      index > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: separator || defaultSeparator }),
-      isEllipsis ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground text-sm", children: "..." }) : isLast || !item.href ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { item }) : renderLink ? renderLink(item, index) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { item })
-    ] }, index);
-  }) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "data-slot": "breadcrumb", "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "ol",
+    {
+      "data-slot": "breadcrumb-list",
+      className: "flex flex-wrap items-center gap-1.5",
+      children: displayedItems.map((item, index) => {
+        const isLast = index === displayedItems.length - 1;
+        const isEllipsis = item.isEllipsis;
+        return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-1.5", children: [
+          index > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "breadcrumb-separator", "aria-hidden": "true", children: separator || defaultSeparator }),
+          isEllipsis ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-slot": "breadcrumb-ellipsis",
+              className: "text-muted-foreground text-sm",
+              children: "..."
+            }
+          ) : isLast || !item.href ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { item }) : renderLink ? /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "breadcrumb-link", children: renderLink(item, index) }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { item })
+        ] }, index);
+      })
+    }
+  ) });
 }
 Breadcrumb.displayName = "Breadcrumb";
 function BreadcrumbLink({ item }) {
@@ -59,6 +73,7 @@ function BreadcrumbLink({ item }) {
     "a",
     {
       href: item.href,
+      "data-slot": "breadcrumb-link",
       className: chunkOR5DRJCW_cjs.cn(
         "inline-flex items-center gap-1.5",
         "text-muted-foreground text-sm",
@@ -76,6 +91,7 @@ function BreadcrumbPage({ item }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
+      "data-slot": "breadcrumb-page",
       className: "text-foreground inline-flex items-center gap-1.5 text-sm font-medium",
       "aria-current": "page",
       children: [
@@ -117,5 +133,5 @@ function BreadcrumbSlash({ className }) {
 
 exports.Breadcrumb = Breadcrumb;
 exports.BreadcrumbSlash = BreadcrumbSlash;
-//# sourceMappingURL=chunk-PEFJAWNR.cjs.map
-//# sourceMappingURL=chunk-PEFJAWNR.cjs.map
+//# sourceMappingURL=chunk-BWYYA3LQ.cjs.map
+//# sourceMappingURL=chunk-BWYYA3LQ.cjs.map

package/dist/chunk-BWYYA3LQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Breadcrumb/Breadcrumb.tsx"],"names":["React","jsx","jsxs","cn"],"mappings":"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","file":"chunk-BWYYA3LQ.cjs","sourcesContent":["import * as React from 'react';\nimport { cn } from '../../utils/cn';\n\n// ============================================================================\n// Breadcrumb Types\n// ============================================================================\n\nexport interface BreadcrumbItem {\n  /** Label for the breadcrumb item */\n  label: string;\n  /** URL to navigate to (optional for the last item) */\n  href?: string;\n  /** Icon to display before the label */\n  icon?: React.ReactNode;\n}\n\n// ============================================================================\n// Breadcrumb Component\n// ============================================================================\n\nexport interface BreadcrumbProps {\n  /** Array of breadcrumb items */\n  items: BreadcrumbItem[];\n  /** Custom separator between items */\n  separator?: React.ReactNode;\n  /** Maximum items to display (collapses middle items) */\n  maxItems?: number;\n  /** Custom renderer for links */\n  renderLink?: (item: BreadcrumbItem, index: number) => React.ReactNode;\n  /** Additional class name */\n  className?: string;\n}\n\n/**\n * A navigation breadcrumb component.\n *\n * @example\n * ```tsx\n * <Breadcrumb\n *   items={[\n *     { label: 'Home', href: '/' },\n *     { label: 'Products', href: '/products' },\n *     { label: 'Category', href: '/products/category' },\n *     { label: 'Current Item' },\n *   ]}\n * />\n * ```\n */\nfunction Breadcrumb({\n  items,\n  separator,\n  maxItems,\n  renderLink,\n  className,\n}: BreadcrumbProps) {\n  // Collapse items if maxItems is specified\n  const displayedItems = React.useMemo(() => {\n    if (!maxItems || items.length <= maxItems) {\n      return items;\n    }\n\n    // Show first item, ellipsis, and last (maxItems - 2) items\n    const firstItem = items[0];\n    const lastItems = items.slice(-(maxItems - 1));\n\n    return [\n      firstItem,\n      { label: '...', isEllipsis: true } as BreadcrumbItem & {\n        isEllipsis?: boolean;\n      },\n      ...lastItems,\n    ];\n  }, [items, maxItems]);\n\n  const defaultSeparator = (\n    <ChevronRightIcon className=\"text-muted-foreground h-4 w-4 shrink-0\" />\n  );\n\n  return (\n    <nav data-slot=\"breadcrumb\" aria-label=\"Breadcrumb\" className={className}>\n      <ol\n        data-slot=\"breadcrumb-list\"\n        className=\"flex flex-wrap items-center gap-1.5\"\n      >\n        {displayedItems.map((item, index) => {\n          const isLast = index === displayedItems.length - 1;\n          const isEllipsis = (item as BreadcrumbItem & { isEllipsis?: boolean })\n            .isEllipsis;\n\n          return (\n            <li key={index} className=\"flex items-center gap-1.5\">\n              {index > 0 && (\n                <span data-slot=\"breadcrumb-separator\" aria-hidden=\"true\">\n                  {separator || defaultSeparator}\n                </span>\n              )}\n              {isEllipsis ? (\n                <span\n                  data-slot=\"breadcrumb-ellipsis\"\n                  className=\"text-muted-foreground text-sm\"\n                >\n                  ...\n                </span>\n              ) : isLast || !item.href ? (\n                <BreadcrumbPage item={item} />\n              ) : renderLink ? (\n                <span data-slot=\"breadcrumb-link\">\n                  {renderLink(item, index)}\n                </span>\n              ) : (\n                <BreadcrumbLink item={item} />\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n\nBreadcrumb.displayName = 'Breadcrumb';\n\n// ============================================================================\n// Breadcrumb Link (Internal)\n// ============================================================================\n\ninterface BreadcrumbLinkProps {\n  item: BreadcrumbItem;\n}\n\nfunction BreadcrumbLink({ item }: BreadcrumbLinkProps) {\n  return (\n    <a\n      href={item.href}\n      data-slot=\"breadcrumb-link\"\n      className={cn(\n        'inline-flex items-center gap-1.5',\n        'text-muted-foreground text-sm',\n        'hover:text-foreground transition-colors',\n        'focus-visible:ring-ring rounded focus-visible:ring-2 focus-visible:outline-none'\n      )}\n    >\n      {item.icon}\n      {item.label}\n    </a>\n  );\n}\n\n// ============================================================================\n// Breadcrumb Page (Current Page - Internal)\n// ============================================================================\n\ninterface BreadcrumbPageProps {\n  item: BreadcrumbItem;\n}\n\nfunction BreadcrumbPage({ item }: BreadcrumbPageProps) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      className=\"text-foreground inline-flex items-center gap-1.5 text-sm font-medium\"\n      aria-current=\"page\"\n    >\n      {item.icon}\n      {item.label}\n    </span>\n  );\n}\n\n// ============================================================================\n// Chevron Icon\n// ============================================================================\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      <path d=\"m9 18 6-6-6-6\" />\n    </svg>\n  );\n}\n\n// ============================================================================\n// Slash Separator Component\n// ============================================================================\n\nfunction BreadcrumbSlash({ className }: { className?: string }) {\n  return (\n    <span\n      className={cn('text-muted-foreground mx-1', className)}\n      aria-hidden=\"true\"\n    >\n      /\n    </span>\n  );\n}\n\nexport { Breadcrumb, BreadcrumbSlash };\n"]}