@pk-design/react-tailwind 1.6.0 → 1.7.0

package/dist/es/components/BodyText/BodyText.js

@@ -0,0 +1,57 @@
+import React__default, { forwardRef } from 'react';
+import { buildClassName } from '../../utils/build-classname.js';
+
+const sizeClassMap = {
+    xs: 'text-xs/5',
+    sm: 'text-sm/6',
+    md: 'text-base/7',
+    lg: 'text-lg/8',
+    xl: 'text-xl/9',
+};
+const weightClassMap = {
+    light: 'font-light',
+    normal: 'font-normal',
+    medium: 'font-medium',
+    semibold: 'font-semibold',
+    bold: 'font-bold',
+};
+const alignClassMap = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+    justify: 'text-justify',
+};
+const clampClassMap = {
+    1: 'line-clamp-1',
+    2: 'line-clamp-2',
+    3: 'line-clamp-3',
+    4: 'line-clamp-4',
+};
+const BodyText = forwardRef((props, ref) => {
+    const { as = 'p', size, weight, small = false, strong = false, muted = false, error = false, success = false, warning = false, info = false, inline = false, invert = false, align, truncate = false, clamp, className, children, ...rest } = props;
+    const textColorClass = error
+        ? 'text-[var(--ui-text-danger)]'
+        : success
+            ? 'text-[var(--ui-success)]'
+            : warning
+                ? 'text-[var(--ui-warning)]'
+                : info
+                    ? 'text-[var(--ui-info)]'
+                    : muted
+                        ? invert
+                            ? 'text-gray-300 dark:text-gray-600'
+                            : 'text-[var(--ui-text-muted)]'
+                        : invert
+                            ? 'text-white dark:text-black'
+                            : 'text-[var(--ui-text)]';
+    return React__default.createElement(as, {
+        ref,
+        className: buildClassName(textColorClass, size ? sizeClassMap[size] : small && 'text-sm/6', weight ? weightClassMap[weight] : strong && 'font-semibold', align && alignClassMap[align], inline && 'inline-flex items-center gap-2', truncate && 'truncate', clamp && clampClassMap[clamp], className),
+        ...rest,
+        children,
+    });
+});
+BodyText.displayName = 'BodyText';
+
+export { BodyText };
+//# sourceMappingURL=BodyText.js.map

package/dist/es/components/BodyText/BodyText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BodyText.js","sources":["../../../../../src/components/BodyText/BodyText.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { BodyTextAlign, BodyTextProps, BodyTextSize, BodyTextWeight } from './BodyText.types'\n\nconst sizeClassMap: Record<BodyTextSize, string> = {\n  xs: 'text-xs/5',\n  sm: 'text-sm/6',\n  md: 'text-base/7',\n  lg: 'text-lg/8',\n  xl: 'text-xl/9',\n}\n\nconst weightClassMap: Record<BodyTextWeight, string> = {\n  light: 'font-light',\n  normal: 'font-normal',\n  medium: 'font-medium',\n  semibold: 'font-semibold',\n  bold: 'font-bold',\n}\n\nconst alignClassMap: Record<BodyTextAlign, string> = {\n  left: 'text-left',\n  center: 'text-center',\n  right: 'text-right',\n  justify: 'text-justify',\n}\n\nconst clampClassMap = {\n  1: 'line-clamp-1',\n  2: 'line-clamp-2',\n  3: 'line-clamp-3',\n  4: 'line-clamp-4',\n}\n\nexport const BodyText = forwardRef<HTMLParagraphElement, BodyTextProps>((props, ref) => {\n  const {\n    as = 'p',\n    size,\n    weight,\n    small = false,\n    strong = false,\n    muted = false,\n    error = false,\n    success = false,\n    warning = false,\n    info = false,\n    inline = false,\n    invert = false,\n    align,\n    truncate = false,\n    clamp,\n    className,\n    children,\n    ...rest\n  } = props\n\n  const textColorClass = error\n    ? 'text-[var(--ui-text-danger)]'\n    : success\n      ? 'text-[var(--ui-success)]'\n      : warning\n        ? 'text-[var(--ui-warning)]'\n        : info\n          ? 'text-[var(--ui-info)]'\n          : muted\n            ? invert\n              ? 'text-gray-300 dark:text-gray-600'\n              : 'text-[var(--ui-text-muted)]'\n            : invert\n              ? 'text-white dark:text-black'\n              : 'text-[var(--ui-text)]'\n\n  return React.createElement(as, {\n    ref,\n    className: buildClassName(\n      textColorClass,\n      size ? sizeClassMap[size] : small && 'text-sm/6',\n      weight ? weightClassMap[weight] : strong && 'font-semibold',\n      align && alignClassMap[align],\n      inline && 'inline-flex items-center gap-2',\n      truncate && 'truncate',\n      clamp && clampClassMap[clamp],\n      className,\n    ),\n    ...rest,\n    children,\n  })\n})\n\nBodyText.displayName = 'BodyText'\n"],"names":["React"],"mappings":";;;AAIA,MAAM,YAAY,GAAiC;AACjD,IAAA,EAAE,EAAE,WAAW;AACf,IAAA,EAAE,EAAE,WAAW;AACf,IAAA,EAAE,EAAE,aAAa;AACjB,IAAA,EAAE,EAAE,WAAW;AACf,IAAA,EAAE,EAAE,WAAW;CAChB;AAED,MAAM,cAAc,GAAmC;AACrD,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,QAAQ,EAAE,eAAe;AACzB,IAAA,IAAI,EAAE,WAAW;CAClB;AAED,MAAM,aAAa,GAAkC;AACnD,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,MAAM,EAAE,aAAa;AACrB,IAAA,KAAK,EAAE,YAAY;AACnB,IAAA,OAAO,EAAE,cAAc;CACxB;AAED,MAAM,aAAa,GAAG;AACpB,IAAA,CAAC,EAAE,cAAc;AACjB,IAAA,CAAC,EAAE,cAAc;AACjB,IAAA,CAAC,EAAE,cAAc;AACjB,IAAA,CAAC,EAAE,cAAc;CAClB;AAEM,MAAM,QAAQ,GAAG,UAAU,CAAsC,CAAC,KAAK,EAAE,GAAG,KAAI;AACrF,IAAA,MAAM,EACJ,EAAE,GAAG,GAAG,EACR,IAAI,EACJ,MAAM,EACN,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,KAAK,EACb,KAAK,GAAG,KAAK,EACb,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,KAAK,EACZ,MAAM,GAAG,KAAK,EACd,MAAM,GAAG,KAAK,EACd,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,GAAG,KAAK;IAET,MAAM,cAAc,GAAG;AACrB,UAAE;AACF,UAAE;AACA,cAAE;AACF,cAAE;AACA,kBAAE;AACF,kBAAE;AACA,sBAAE;AACF,sBAAE;AACA,0BAAE;AACA,8BAAE;AACF,8BAAE;AACJ,0BAAE;AACA,8BAAE;8BACA,uBAAuB;AAErC,IAAA,OAAOA,cAAK,CAAC,aAAa,CAAC,EAAE,EAAE;QAC7B,GAAG;QACH,SAAS,EAAE,cAAc,CACvB,cAAc,EACd,IAAI,GAAG,YAAY,CAAC,IAAI,CAAC,GAAG,KAAK,IAAI,WAAW,EAChD,MAAM,GAAG,cAAc,CAAC,MAAM,CAAC,GAAG,MAAM,IAAI,eAAe,EAC3D,KAAK,IAAI,aAAa,CAAC,KAAK,CAAC,EAC7B,MAAM,IAAI,gCAAgC,EAC1C,QAAQ,IAAI,UAAU,EACtB,KAAK,IAAI,aAAa,CAAC,KAAK,CAAC,EAC7B,SAAS,CACV;AACD,QAAA,GAAG,IAAI;QACP,QAAQ;AACT,KAAA,CAAC;AACJ,CAAC;AAED,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/es/components/BottomNavigation/BottomNavigation.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { buildClassName } from '../../utils/build-classname.js';
+
+function BottomNavigation({ items, activeId, onChange, fixed = true, showLabels = 'always', theme = 'light', activeIndicatorStyle = 'line', containerClass = '', itemClass = '', }) {
+    const handleTabClick = (item) => {
+        var _a;
+        if (item.disabled)
+            return;
+        (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
+        onChange(item.id);
+    };
+    const themeStyles = {
+        light: 'bg-white dark:bg-gray-900 border-t border-[var(--ui-border)] text-gray-600 dark:text-gray-400',
+        dark: 'bg-gray-900 text-gray-400 border-t border-gray-800',
+        primary: 'bg-blue-600 text-blue-100 border-t border-blue-700',
+    }[theme];
+    return (jsx("nav", { "aria-label": "Bottom Navigation", className: buildClassName('w-full flex items-center justify-around select-none shadow-lg transition-colors relative', fixed && 'fixed bottom-0 left-0 right-0 z-40', 'pb-[env(safe-area-inset-bottom,6px)] px-2', themeStyles, containerClass), "data-testid": "bottom-navigation", children: items.map((item) => {
+            const isActive = item.id === activeId;
+            const showLabelText = showLabels === 'always' || (showLabels === 'active' && isActive);
+            const activeItemColor = {
+                light: 'text-blue-600 dark:text-blue-400 font-bold',
+                dark: 'text-white font-bold',
+                primary: 'text-white font-bold',
+            }[theme];
+            const inactiveItemColor = {
+                light: 'text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-medium',
+                dark: 'text-gray-400 hover:text-gray-200 font-medium',
+                primary: 'text-blue-200 hover:text-white font-medium',
+            }[theme];
+            const pillActiveStyles = {
+                light: 'bg-blue-100 dark:bg-blue-950/80 text-blue-600 dark:text-blue-400 shadow-xs scale-105',
+                dark: 'bg-gray-800 text-white ring-1 ring-gray-700 shadow-xs scale-105',
+                primary: 'bg-white/25 text-white shadow-xs scale-105',
+            }[theme];
+            const badgeColor = {
+                danger: 'bg-red-500 text-white',
+                info: 'bg-blue-500 text-white',
+                success: 'bg-emerald-500 text-white',
+            }[item.badgeVariant || 'danger'];
+            return (jsxs("button", { type: "button", disabled: item.disabled, onClick: () => handleTabClick(item), className: buildClassName('flex-1 flex flex-col items-center justify-center pt-2 pb-1.5 px-1 transition-all duration-200 relative cursor-pointer group', item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none', isActive ? activeItemColor : inactiveItemColor, itemClass), "data-testid": `bottom-nav-item-${item.id}`, "aria-selected": isActive, children: [activeIndicatorStyle === 'line' && isActive && (jsx("span", { className: buildClassName('absolute -top-[1px] h-0.75 w-9 rounded-full transition-all duration-200 z-10', theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400') })), jsxs("div", { className: buildClassName('relative inline-flex items-center justify-center transition-all duration-200', activeIndicatorStyle === 'pill'
+                            ? buildClassName('px-4 py-1 rounded-full', isActive
+                                ? pillActiveStyles
+                                : 'group-hover:bg-gray-100/50 dark:group-hover:bg-gray-800/40')
+                            : 'px-1 py-0.5'), children: [jsx("span", { className: "text-xl transition-transform duration-150 group-active:scale-95", children: isActive && item.activeIcon ? item.activeIcon : item.icon }), item.badge !== undefined && item.badge !== null && (jsx("span", { className: buildClassName('absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full text-[10px] font-bold flex items-center justify-center shadow-xs z-10', badgeColor), "data-testid": `bottom-nav-badge-${item.id}`, children: item.badge }))] }), showLabelText && (jsx("span", { className: buildClassName('text-[11px] leading-tight mt-1 truncate max-w-full transition-colors duration-150', isActive ? 'font-bold' : 'font-medium opacity-90'), children: item.label })), activeIndicatorStyle === 'dot' && isActive && (jsx("span", { className: buildClassName('size-1.5 rounded-full mt-1 transition-all duration-200', theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400') }))] }, item.id));
+        }) }));
+}
+BottomNavigation.displayName = 'BottomNavigation';
+
+export { BottomNavigation };
+//# sourceMappingURL=BottomNavigation.js.map

package/dist/es/components/BottomNavigation/BottomNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BottomNavigation.js","sources":["../../../../../src/components/BottomNavigation/BottomNavigation.tsx"],"sourcesContent":["import React from 'react'\nimport type { BottomNavigationProps, BottomNavigationItem } from './BottomNavigation.types'\nimport { buildClassName } from '../../utils/build-classname'\n\nexport function BottomNavigation({\n  items,\n  activeId,\n  onChange,\n  fixed = true,\n  showLabels = 'always',\n  theme = 'light',\n  activeIndicatorStyle = 'line',\n  containerClass = '',\n  itemClass = '',\n}: BottomNavigationProps) {\n  const handleTabClick = (item: BottomNavigationItem) => {\n    if (item.disabled) return\n    item.onClick?.()\n    onChange(item.id)\n  }\n\n  const themeStyles = {\n    light:\n      'bg-white dark:bg-gray-900 border-t border-[var(--ui-border)] text-gray-600 dark:text-gray-400',\n    dark: 'bg-gray-900 text-gray-400 border-t border-gray-800',\n    primary: 'bg-blue-600 text-blue-100 border-t border-blue-700',\n  }[theme]\n\n  return (\n    <nav\n      aria-label=\"Bottom Navigation\"\n      className={buildClassName(\n        'w-full flex items-center justify-around select-none shadow-lg transition-colors relative',\n        fixed && 'fixed bottom-0 left-0 right-0 z-40',\n        'pb-[env(safe-area-inset-bottom,6px)] px-2',\n        themeStyles,\n        containerClass,\n      )}\n      data-testid=\"bottom-navigation\"\n    >\n      {items.map((item) => {\n        const isActive = item.id === activeId\n        const showLabelText = showLabels === 'always' || (showLabels === 'active' && isActive)\n\n        const activeItemColor = {\n          light: 'text-blue-600 dark:text-blue-400 font-bold',\n          dark: 'text-white font-bold',\n          primary: 'text-white font-bold',\n        }[theme]\n\n        const inactiveItemColor = {\n          light:\n            'text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 font-medium',\n          dark: 'text-gray-400 hover:text-gray-200 font-medium',\n          primary: 'text-blue-200 hover:text-white font-medium',\n        }[theme]\n\n        const pillActiveStyles = {\n          light:\n            'bg-blue-100 dark:bg-blue-950/80 text-blue-600 dark:text-blue-400 shadow-xs scale-105',\n          dark: 'bg-gray-800 text-white ring-1 ring-gray-700 shadow-xs scale-105',\n          primary: 'bg-white/25 text-white shadow-xs scale-105',\n        }[theme]\n\n        const badgeColor = {\n          danger: 'bg-red-500 text-white',\n          info: 'bg-blue-500 text-white',\n          success: 'bg-emerald-500 text-white',\n        }[item.badgeVariant || 'danger']\n\n        return (\n          <button\n            key={item.id}\n            type=\"button\"\n            disabled={item.disabled}\n            onClick={() => handleTabClick(item)}\n            className={buildClassName(\n              'flex-1 flex flex-col items-center justify-center pt-2 pb-1.5 px-1 transition-all duration-200 relative cursor-pointer group',\n              item.disabled && 'opacity-40 cursor-not-allowed pointer-events-none',\n              isActive ? activeItemColor : inactiveItemColor,\n              itemClass,\n            )}\n            data-testid={`bottom-nav-item-${item.id}`}\n            aria-selected={isActive}\n          >\n            {/* Active Indicator Bar on Top Border */}\n            {activeIndicatorStyle === 'line' && isActive && (\n              <span\n                className={buildClassName(\n                  'absolute -top-[1px] h-0.75 w-9 rounded-full transition-all duration-200 z-10',\n                  theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400',\n                )}\n              />\n            )}\n\n            {/* Icon & Badge Container */}\n            <div\n              className={buildClassName(\n                'relative inline-flex items-center justify-center transition-all duration-200',\n                activeIndicatorStyle === 'pill'\n                  ? buildClassName(\n                      'px-4 py-1 rounded-full',\n                      isActive\n                        ? pillActiveStyles\n                        : 'group-hover:bg-gray-100/50 dark:group-hover:bg-gray-800/40',\n                    )\n                  : 'px-1 py-0.5',\n              )}\n            >\n              <span className=\"text-xl transition-transform duration-150 group-active:scale-95\">\n                {isActive && item.activeIcon ? item.activeIcon : item.icon}\n              </span>\n\n              {/* Notification Badge */}\n              {item.badge !== undefined && item.badge !== null && (\n                <span\n                  className={buildClassName(\n                    'absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full text-[10px] font-bold flex items-center justify-center shadow-xs z-10',\n                    badgeColor,\n                  )}\n                  data-testid={`bottom-nav-badge-${item.id}`}\n                >\n                  {item.badge}\n                </span>\n              )}\n            </div>\n\n            {/* Label */}\n            {showLabelText && (\n              <span\n                className={buildClassName(\n                  'text-[11px] leading-tight mt-1 truncate max-w-full transition-colors duration-150',\n                  isActive ? 'font-bold' : 'font-medium opacity-90',\n                )}\n              >\n                {item.label}\n              </span>\n            )}\n\n            {/* Active Dot Indicator */}\n            {activeIndicatorStyle === 'dot' && isActive && (\n              <span\n                className={buildClassName(\n                  'size-1.5 rounded-full mt-1 transition-all duration-200',\n                  theme === 'primary' ? 'bg-white' : 'bg-blue-600 dark:bg-blue-400',\n                )}\n              />\n            )}\n          </button>\n        )\n      })}\n    </nav>\n  )\n}\n\nBottomNavigation.displayName = 'BottomNavigation'\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/es/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useState } from 'react';
+import { buildClassName } from '../../utils/build-classname.js';
+import SvgSlash from '../Icons/Slash.svg.js';
+
+const SIZE_CONTAINER_CLASS = {
+    sm: 'text-xs gap-1.5',
+    md: 'text-sm gap-2',
+    lg: 'text-base gap-2.5',
+};
+const SIZE_ICON_CLASS = {
+    sm: 'size-3',
+    md: 'size-3.5',
+    lg: 'size-4',
+};
+function RenderSeparator({ separator, size, index, className, }) {
+    const testId = `breadcrumb-divider-${index}`;
+    if (separator === 'slash' || !separator) {
+        return (jsx(SvgSlash, { "data-testid": testId, className: buildClassName(SIZE_ICON_CLASS[size] || 'size-3.5', 'text-gray-400 dark:text-gray-500 shrink-0 select-none', className) }));
+    }
+    if (separator === 'chevron') {
+        return (jsx("svg", { "data-testid": testId, className: buildClassName(SIZE_ICON_CLASS[size] || 'size-3.5', 'text-gray-400 dark:text-gray-500 shrink-0 select-none', className), fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) }));
+    }
+    if (separator === 'dot') {
+        return (jsx("span", { "data-testid": testId, className: buildClassName('size-1 rounded-full bg-gray-400 dark:bg-gray-500 shrink-0 select-none mx-0.5', className) }));
+    }
+    return (jsx("span", { "data-testid": testId, className: buildClassName('shrink-0 select-none', className), children: separator }));
+}
+const Breadcrumb = forwardRef((props, ref) => {
+    const { items = [], render, separator = 'slash', size = 'md', maxItems, className, itemClass, activeItemClass, separatorClass, ...navProps } = props;
+    const [expanded, setExpanded] = useState(false);
+    const count = items.length;
+    const shouldTruncate = maxItems !== undefined && maxItems > 1 && count > maxItems && !expanded;
+    const getVisibleItems = () => {
+        if (!shouldTruncate)
+            return items;
+        // Always keep 1st item and last 1-2 items
+        const firstItem = items[0];
+        const lastItems = items.slice(count - (maxItems - 1));
+        return [firstItem, ...lastItems];
+    };
+    const hiddenItems = shouldTruncate ? items.slice(1, count - (maxItems - 1)) : [];
+    getVisibleItems();
+    return (jsx("nav", { ref: ref, "aria-label": "Breadcrumb", "data-testid": "breadcrumb-container", className: buildClassName('flex flex-wrap items-center text-gray-600 dark:text-gray-300 font-medium', SIZE_CONTAINER_CLASS[size] || SIZE_CONTAINER_CLASS.md, className), ...navProps, children: items.map((item, index) => {
+            const isLast = index === count - 1;
+            const isCollapsedMiddle = shouldTruncate && index > 0 && index < count - (maxItems - 1);
+            if (isCollapsedMiddle) {
+                if (index === 1) {
+                    // Render the single '...' collapse pill
+                    return (jsxs("span", { className: "inline-flex items-center gap-2 relative group/ellipsis", children: [jsx("button", { type: "button", onClick: () => setExpanded(true), className: "px-1.5 py-0.5 rounded-md text-xs font-semibold bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors cursor-pointer", "aria-label": `Expand ${hiddenItems.length} hidden breadcrumbs`, title: `Show ${hiddenItems.length} hidden levels`, children: "\u2022\u2022\u2022" }), jsx(RenderSeparator, { separator: separator, size: size, index: index, className: separatorClass })] }, "breadcrumb-collapsed"));
+                }
+                return null;
+            }
+            const defaultContent = isLast ? (jsx("span", { className: buildClassName('text-gray-900 dark:text-white font-semibold', activeItemClass, item.className), children: item.text })) : item.to ? (jsx("a", { href: item.to, className: buildClassName('hover:text-blue-600 dark:hover:text-blue-400 transition-colors', itemClass, item.className), children: item.text })) : (jsx("span", { className: buildClassName(itemClass, item.className), children: item.text }));
+            return (jsxs("span", { className: "inline-flex items-center gap-2", "data-testid": `breadcrumb-item-${item.key}`, children: [jsxs("span", { className: "inline-flex items-center gap-1.5", ...(isLast ? { 'aria-current': 'page' } : {}), children: [item.icon && jsx("span", { className: "shrink-0 text-gray-400", children: item.icon }), isLast ? (defaultContent) : render ? (jsx("span", { className: buildClassName(itemClass, item.className), children: render(item) })) : (defaultContent)] }), !isLast && (jsx(RenderSeparator, { separator: separator, size: size, index: index, className: separatorClass }))] }, item.key));
+        }) }));
+});
+Breadcrumb.displayName = 'Breadcrumb';
+
+export { Breadcrumb };
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/es/components/Breadcrumb/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sources":["../../../../../src/components/Breadcrumb/Breadcrumb.tsx"],"sourcesContent":["import { forwardRef, useState, type ReactNode } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport SlashIcon from '../Icons/Slash.svg'\nimport type { BreadcrumbItem, BreadcrumbProps } from './Breadcrumb.types'\n\nconst SIZE_CONTAINER_CLASS: Record<string, string> = {\n  sm: 'text-xs gap-1.5',\n  md: 'text-sm gap-2',\n  lg: 'text-base gap-2.5',\n}\n\nconst SIZE_ICON_CLASS: Record<string, string> = {\n  sm: 'size-3',\n  md: 'size-3.5',\n  lg: 'size-4',\n}\n\nfunction RenderSeparator({\n  separator,\n  size,\n  index,\n  className,\n}: {\n  separator: BreadcrumbProps['separator']\n  size: 'sm' | 'md' | 'lg'\n  index: number\n  className?: string\n}) {\n  const testId = `breadcrumb-divider-${index}`\n\n  if (separator === 'slash' || !separator) {\n    return (\n      <SlashIcon\n        data-testid={testId}\n        className={buildClassName(\n          SIZE_ICON_CLASS[size] || 'size-3.5',\n          'text-gray-400 dark:text-gray-500 shrink-0 select-none',\n          className,\n        )}\n      />\n    )\n  }\n\n  if (separator === 'chevron') {\n    return (\n      <svg\n        data-testid={testId}\n        className={buildClassName(\n          SIZE_ICON_CLASS[size] || 'size-3.5',\n          'text-gray-400 dark:text-gray-500 shrink-0 select-none',\n          className,\n        )}\n        fill=\"none\"\n        viewBox=\"0 0 24 24\"\n        stroke=\"currentColor\"\n        strokeWidth={2}\n      >\n        <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n      </svg>\n    )\n  }\n\n  if (separator === 'dot') {\n    return (\n      <span\n        data-testid={testId}\n        className={buildClassName(\n          'size-1 rounded-full bg-gray-400 dark:bg-gray-500 shrink-0 select-none mx-0.5',\n          className,\n        )}\n      />\n    )\n  }\n\n  return (\n    <span data-testid={testId} className={buildClassName('shrink-0 select-none', className)}>\n      {separator}\n    </span>\n  )\n}\n\nexport const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>((props, ref) => {\n  const {\n    items = [],\n    render,\n    separator = 'slash',\n    size = 'md',\n    maxItems,\n    className,\n    itemClass,\n    activeItemClass,\n    separatorClass,\n    ...navProps\n  } = props\n\n  const [expanded, setExpanded] = useState(false)\n  const count = items.length\n  const shouldTruncate = maxItems !== undefined && maxItems > 1 && count > maxItems && !expanded\n\n  const getVisibleItems = () => {\n    if (!shouldTruncate) return items\n    // Always keep 1st item and last 1-2 items\n    const firstItem = items[0]\n    const lastItems = items.slice(count - (maxItems - 1))\n    return [firstItem, ...lastItems]\n  }\n\n  const hiddenItems = shouldTruncate ? items.slice(1, count - (maxItems - 1)) : []\n  const visibleItems = getVisibleItems()\n\n  return (\n    <nav\n      ref={ref}\n      aria-label=\"Breadcrumb\"\n      data-testid=\"breadcrumb-container\"\n      className={buildClassName(\n        'flex flex-wrap items-center text-gray-600 dark:text-gray-300 font-medium',\n        SIZE_CONTAINER_CLASS[size] || SIZE_CONTAINER_CLASS.md,\n        className,\n      )}\n      {...navProps}\n    >\n      {items.map((item, index) => {\n        const isLast = index === count - 1\n        const isCollapsedMiddle = shouldTruncate && index > 0 && index < count - (maxItems - 1)\n\n        if (isCollapsedMiddle) {\n          if (index === 1) {\n            // Render the single '...' collapse pill\n            return (\n              <span\n                key=\"breadcrumb-collapsed\"\n                className=\"inline-flex items-center gap-2 relative group/ellipsis\"\n              >\n                <button\n                  type=\"button\"\n                  onClick={() => setExpanded(true)}\n                  className=\"px-1.5 py-0.5 rounded-md text-xs font-semibold bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-300 transition-colors cursor-pointer\"\n                  aria-label={`Expand ${hiddenItems.length} hidden breadcrumbs`}\n                  title={`Show ${hiddenItems.length} hidden levels`}\n                >\n                  •••\n                </button>\n                <RenderSeparator\n                  separator={separator}\n                  size={size}\n                  index={index}\n                  className={separatorClass}\n                />\n              </span>\n            )\n          }\n          return null\n        }\n\n        const defaultContent = isLast ? (\n          <span\n            className={buildClassName(\n              'text-gray-900 dark:text-white font-semibold',\n              activeItemClass,\n              item.className,\n            )}\n          >\n            {item.text}\n          </span>\n        ) : item.to ? (\n          <a\n            href={item.to}\n            className={buildClassName(\n              'hover:text-blue-600 dark:hover:text-blue-400 transition-colors',\n              itemClass,\n              item.className,\n            )}\n          >\n            {item.text}\n          </a>\n        ) : (\n          <span className={buildClassName(itemClass, item.className)}>{item.text}</span>\n        )\n\n        return (\n          <span\n            key={item.key}\n            className=\"inline-flex items-center gap-2\"\n            data-testid={`breadcrumb-item-${item.key}`}\n          >\n            <span\n              className=\"inline-flex items-center gap-1.5\"\n              {...(isLast ? { 'aria-current': 'page' as const } : {})}\n            >\n              {item.icon && <span className=\"shrink-0 text-gray-400\">{item.icon}</span>}\n              {isLast ? (\n                defaultContent\n              ) : render ? (\n                <span className={buildClassName(itemClass, item.className)}>{render(item)}</span>\n              ) : (\n                defaultContent\n              )}\n            </span>\n            {!isLast && (\n              <RenderSeparator\n                separator={separator}\n                size={size}\n                index={index}\n                className={separatorClass}\n              />\n            )}\n          </span>\n        )\n      })}\n    </nav>\n  )\n})\n\nBreadcrumb.displayName = 'Breadcrumb'\n"],"names":["_jsx","SlashIcon","_jsxs"],"mappings":"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"}

package/dist/es/components/Button/Button.js

@@ -0,0 +1,116 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { buildClassName } from '../../utils/build-classname.js';
+import { Loader } from '../Loader/index.js';
+import { TextContent } from '../TextContent/TextContent.js';
+
+/**
+ * Tailwind CSS classes for theme + variant combinations.
+ */
+const THEMED_BTN_CLASS = {
+    primary: {
+        default: 'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:bg-[var(--ui-primary-disabled)]',
+        outlined: 'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)] disabled:border-[var(--ui-primary-disabled)]',
+        plain: 'text-[var(--ui-primary-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)]',
+    },
+    danger: {
+        default: 'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:bg-[var(--ui-danger-disabled)]',
+        outlined: 'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)] disabled:border-[var(--ui-danger-disabled)]',
+        plain: 'text-[var(--ui-danger-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)]',
+    },
+    secondary: {
+        default: 'text-gray-700 bg-white border border-[var(--ui-border)] hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:bg-gray-200 dark:disabled:bg-gray-700',
+        outlined: 'text-gray-700 hover:text-white border border-[var(--ui-border)] hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400 disabled:border-[var(--ui-border-muted)]',
+        plain: 'text-gray-700 hover:bg-black/5 dark:text-gray-200 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400',
+    },
+    success: {
+        default: 'text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:bg-emerald-300 dark:disabled:bg-emerald-900',
+        outlined: 'text-emerald-600 hover:text-white border border-emerald-600 hover:bg-emerald-600 dark:text-emerald-400 dark:border-emerald-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:opacity-50',
+        plain: 'text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:opacity-50',
+    },
+    warning: {
+        default: 'text-white bg-amber-500 hover:bg-amber-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:bg-amber-300 dark:disabled:bg-amber-900',
+        outlined: 'text-amber-600 hover:text-white border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:opacity-50',
+        plain: 'text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:opacity-50',
+    },
+};
+const LOADER_TEXT_CLASS = {
+    primary: {
+        default: 'text-white',
+        outlined: 'text-[var(--ui-primary-text)]',
+        plain: 'text-[var(--ui-primary-text)]',
+    },
+    danger: {
+        default: 'text-white',
+        outlined: 'text-[var(--ui-danger-text)]',
+        plain: 'text-[var(--ui-danger-text)]',
+    },
+    secondary: {
+        default: 'text-gray-700 dark:text-white',
+        outlined: 'text-gray-700 dark:text-gray-200',
+        plain: 'text-gray-700 dark:text-gray-200',
+    },
+    success: {
+        default: 'text-white',
+        outlined: 'text-emerald-600 dark:text-emerald-400',
+        plain: 'text-emerald-600 dark:text-emerald-400',
+    },
+    warning: {
+        default: 'text-white',
+        outlined: 'text-amber-600 dark:text-amber-400',
+        plain: 'text-amber-600 dark:text-amber-400',
+    },
+};
+/**
+ * Generate size classes.
+ */
+const getBtnSizeClasses = (size, iconOnly = false) => {
+    switch (size) {
+        case 'xs':
+            return iconOnly ? 'h-7 w-7 p-1 rounded-sm text-xs' : 'h-7 px-2.5 rounded-sm gap-1 text-xs';
+        case 'sm':
+            return iconOnly ? 'h-8 w-8 p-1.5 rounded text-sm' : 'h-8 px-3 rounded gap-1.5 text-sm';
+        case 'md':
+            return iconOnly ? 'h-9 w-9 p-2 rounded-md text-sm' : 'h-9 px-4 rounded-md gap-2 text-sm';
+        case 'lg':
+            return iconOnly
+                ? 'h-10 w-10 p-2.5 rounded-lg text-base'
+                : 'h-10 px-5 rounded-lg gap-2 text-base';
+    }
+};
+/**
+ * Base shared tailwind classes.
+ */
+const BASE_BTN_CLASS = 'font-medium flex items-center justify-center shrink-0 cursor-pointer ' +
+    'disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-75 ' +
+    'active:scale-[0.98] transition-all duration-150 ease-out focus:outline-none';
+const Button = forwardRef(({ as, type, ...props }, ref) => {
+    const { className = '', children, theme = 'primary', variant = 'default', size = 'md', leftIcon, rightIcon, fullWidth = false, loading = false, loadingText = '', rounded = false, disabled, iconOnly = false, noOutlineOnFocus = false, ...restProps } = props;
+    const Component = as || 'button';
+    // Accessibility guard for icon-only buttons
+    if (iconOnly && !restProps['aria-label']) {
+        console.warn('[ui] <Button iconOnly> requires aria-label for accessibility.');
+    }
+    const resolvedDisabled = disabled || loading;
+    // Clean invalid props when not rendering a real button
+    const { type: _ignoreType, disabled: _ignoreDisabled, ...cleanRest } = restProps;
+    const buttonSpecificProps = Component === 'button'
+        ? {
+            type: type !== null && type !== void 0 ? type : 'button',
+            disabled: resolvedDisabled,
+        }
+        : {};
+    const classes = useMemo(() => buildClassName(BASE_BTN_CLASS, THEMED_BTN_CLASS[theme][variant], getBtnSizeClasses(size, iconOnly), !noOutlineOnFocus && 'focus:outline focus:outline-2 focus:outline-offset-2', rounded && 'rounded-full', fullWidth && 'w-full', variant === 'default' && 'shadow-xs hover:shadow-none disabled:shadow-none', className), [theme, variant, size, iconOnly, rounded, fullWidth, noOutlineOnFocus, className]);
+    /**
+     * SPECIAL CASE: iconOnly + loading → show spinner only
+     */
+    if (loading && iconOnly) {
+        return (jsx(Component, { ref: ref, className: classes, ...buttonSpecificProps, ...cleanRest, children: jsx(Loader, { "data-testid": "btn-loader-icon", size: "xs", className: buildClassName(LOADER_TEXT_CLASS[theme][variant]) }) }));
+    }
+    const loaderIcon = (jsx(Loader, { "data-testid": "btn-loader-icon", size: "xs", className: buildClassName(LOADER_TEXT_CLASS[theme][variant]) }));
+    return (jsx(Component, { ref: ref, className: classes, ...buttonSpecificProps, ...cleanRest, children: loading && !loadingText ? (jsxs("span", { className: "flex items-center gap-2", "aria-live": "polite", children: [loaderIcon, children] })) : loading && loadingText ? (jsxs("span", { className: "flex items-center gap-2", "aria-live": "polite", children: [loaderIcon, jsx(TextContent, { className: buildClassName(LOADER_TEXT_CLASS[theme][variant]), children: loadingText })] })) : (jsxs(Fragment, { children: [leftIcon && jsx("span", { className: "shrink-0 flex items-center", children: leftIcon }), children, rightIcon && jsx("span", { className: "shrink-0 flex items-center", children: rightIcon })] })) }));
+});
+Button.displayName = 'Button';
+
+export { Button };
+//# sourceMappingURL=Button.js.map

package/dist/es/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../../../src/components/Button/Button.tsx"],"sourcesContent":["import React, { ElementType, forwardRef, useMemo } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Loader } from '../Loader'\nimport { TextContent } from '../TextContent'\nimport type { ButtonComponent, ButtonProps, ButtonSize, ThemedButtonClass } from './Button.types'\nimport type { PolymorphicRef } from '../common-type'\n\n/**\n * Tailwind CSS classes for theme + variant combinations.\n */\nconst THEMED_BTN_CLASS: ThemedButtonClass = {\n  primary: {\n    default:\n      'text-white bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:bg-[var(--ui-primary-disabled)]',\n    outlined:\n      'text-[var(--ui-primary-text)] hover:text-white border border-[var(--ui-primary)] hover:bg-[var(--ui-primary)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)] disabled:border-[var(--ui-primary-disabled)]',\n    plain:\n      'text-[var(--ui-primary-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-primary-ring)] disabled:text-[var(--ui-primary-disabled)]',\n  },\n  danger: {\n    default:\n      'text-white bg-[var(--ui-danger)] hover:bg-[var(--ui-danger-hover)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:bg-[var(--ui-danger-disabled)]',\n    outlined:\n      'text-[var(--ui-danger-text)] hover:text-white border border-[var(--ui-danger)] hover:bg-[var(--ui-danger)] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)] disabled:border-[var(--ui-danger-disabled)]',\n    plain:\n      'text-[var(--ui-danger-text)] hover:bg-black/5 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-danger-ring)] disabled:text-[var(--ui-danger-disabled)]',\n  },\n  secondary: {\n    default:\n      'text-gray-700 bg-white border border-[var(--ui-border)] hover:bg-gray-100 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:bg-gray-200 dark:disabled:bg-gray-700',\n    outlined:\n      'text-gray-700 hover:text-white border border-[var(--ui-border)] hover:bg-gray-700 dark:text-gray-200 dark:hover:text-white dark:hover:bg-gray-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400 disabled:border-[var(--ui-border-muted)]',\n    plain:\n      'text-gray-700 hover:bg-black/5 dark:text-gray-200 dark:hover:bg-gray-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[var(--ui-focus-ring)] disabled:text-gray-400',\n  },\n  success: {\n    default:\n      'text-white bg-emerald-600 hover:bg-emerald-700 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:bg-emerald-300 dark:disabled:bg-emerald-900',\n    outlined:\n      'text-emerald-600 hover:text-white border border-emerald-600 hover:bg-emerald-600 dark:text-emerald-400 dark:border-emerald-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:opacity-50',\n    plain:\n      'text-emerald-600 hover:bg-emerald-50 dark:text-emerald-400 dark:hover:bg-emerald-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-emerald-500 disabled:opacity-50',\n  },\n  warning: {\n    default:\n      'text-white bg-amber-500 hover:bg-amber-600 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:bg-amber-300 dark:disabled:bg-amber-900',\n    outlined:\n      'text-amber-600 hover:text-white border border-amber-500 hover:bg-amber-500 dark:text-amber-400 dark:border-amber-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:opacity-50',\n    plain:\n      'text-amber-600 hover:bg-amber-50 dark:text-amber-400 dark:hover:bg-amber-950/40 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-amber-500 disabled:opacity-50',\n  },\n}\n\nconst LOADER_TEXT_CLASS: ThemedButtonClass = {\n  primary: {\n    default: 'text-white',\n    outlined: 'text-[var(--ui-primary-text)]',\n    plain: 'text-[var(--ui-primary-text)]',\n  },\n  danger: {\n    default: 'text-white',\n    outlined: 'text-[var(--ui-danger-text)]',\n    plain: 'text-[var(--ui-danger-text)]',\n  },\n  secondary: {\n    default: 'text-gray-700 dark:text-white',\n    outlined: 'text-gray-700 dark:text-gray-200',\n    plain: 'text-gray-700 dark:text-gray-200',\n  },\n  success: {\n    default: 'text-white',\n    outlined: 'text-emerald-600 dark:text-emerald-400',\n    plain: 'text-emerald-600 dark:text-emerald-400',\n  },\n  warning: {\n    default: 'text-white',\n    outlined: 'text-amber-600 dark:text-amber-400',\n    plain: 'text-amber-600 dark:text-amber-400',\n  },\n}\n\n/**\n * Generate size classes.\n */\nconst getBtnSizeClasses = (size: ButtonSize, iconOnly = false) => {\n  switch (size) {\n    case 'xs':\n      return iconOnly ? 'h-7 w-7 p-1 rounded-sm text-xs' : 'h-7 px-2.5 rounded-sm gap-1 text-xs'\n\n    case 'sm':\n      return iconOnly ? 'h-8 w-8 p-1.5 rounded text-sm' : 'h-8 px-3 rounded gap-1.5 text-sm'\n\n    case 'md':\n      return iconOnly ? 'h-9 w-9 p-2 rounded-md text-sm' : 'h-9 px-4 rounded-md gap-2 text-sm'\n\n    case 'lg':\n      return iconOnly\n        ? 'h-10 w-10 p-2.5 rounded-lg text-base'\n        : 'h-10 px-5 rounded-lg gap-2 text-base'\n  }\n}\n\n/**\n * Base shared tailwind classes.\n */\nconst BASE_BTN_CLASS =\n  'font-medium flex items-center justify-center shrink-0 cursor-pointer ' +\n  'disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-75 ' +\n  'active:scale-[0.98] transition-all duration-150 ease-out focus:outline-none'\n\nexport const Button = forwardRef(\n  <C extends ElementType = 'button'>(\n    { as, type, ...props }: ButtonProps<C>,\n    ref: PolymorphicRef<C>,\n  ) => {\n    const {\n      className = '',\n      children,\n      theme = 'primary',\n      variant = 'default',\n      size = 'md',\n      leftIcon,\n      rightIcon,\n      fullWidth = false,\n      loading = false,\n      loadingText = '',\n      rounded = false,\n      disabled,\n      iconOnly = false,\n      noOutlineOnFocus = false,\n      ...restProps\n    } = props\n\n    const Component = as || 'button'\n\n    // Accessibility guard for icon-only buttons\n    if (iconOnly && !(restProps as Record<string, unknown>)['aria-label']) {\n      console.warn('[ui] <Button iconOnly> requires aria-label for accessibility.')\n    }\n\n    const resolvedDisabled = disabled || loading\n\n    // Clean invalid props when not rendering a real button\n    const { type: _ignoreType, disabled: _ignoreDisabled, ...cleanRest } = restProps\n\n    const buttonSpecificProps =\n      Component === 'button'\n        ? {\n            type: type ?? 'button',\n            disabled: resolvedDisabled,\n          }\n        : {}\n\n    const classes = useMemo(\n      () =>\n        buildClassName(\n          BASE_BTN_CLASS,\n          THEMED_BTN_CLASS[theme][variant],\n          getBtnSizeClasses(size, iconOnly),\n          !noOutlineOnFocus && 'focus:outline focus:outline-2 focus:outline-offset-2',\n          rounded && 'rounded-full',\n          fullWidth && 'w-full',\n          variant === 'default' && 'shadow-xs hover:shadow-none disabled:shadow-none',\n          className,\n        ),\n      [theme, variant, size, iconOnly, rounded, fullWidth, noOutlineOnFocus, className],\n    )\n\n    /**\n     * SPECIAL CASE: iconOnly + loading → show spinner only\n     */\n    if (loading && iconOnly) {\n      return (\n        <Component ref={ref} className={classes} {...buttonSpecificProps} {...cleanRest}>\n          <Loader\n            data-testid=\"btn-loader-icon\"\n            size=\"xs\"\n            className={buildClassName(LOADER_TEXT_CLASS[theme][variant])}\n          />\n        </Component>\n      )\n    }\n\n    const loaderIcon = (\n      <Loader\n        data-testid=\"btn-loader-icon\"\n        size=\"xs\"\n        className={buildClassName(LOADER_TEXT_CLASS[theme][variant])}\n      />\n    )\n\n    return (\n      <Component ref={ref} className={classes} {...buttonSpecificProps} {...cleanRest}>\n        {loading && !loadingText ? (\n          <span className=\"flex items-center gap-2\" aria-live=\"polite\">\n            {loaderIcon}\n            {children}\n          </span>\n        ) : loading && loadingText ? (\n          <span className=\"flex items-center gap-2\" aria-live=\"polite\">\n            {loaderIcon}\n            <TextContent className={buildClassName(LOADER_TEXT_CLASS[theme][variant])}>\n              {loadingText}\n            </TextContent>\n          </span>\n        ) : (\n          <>\n            {leftIcon && <span className=\"shrink-0 flex items-center\">{leftIcon}</span>}\n            {children}\n            {rightIcon && <span className=\"shrink-0 flex items-center\">{rightIcon}</span>}\n          </>\n        )}\n      </Component>\n    )\n  },\n) as ButtonComponent\n\nButton.displayName = 'Button'\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/es/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,98 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, Children, isValidElement, cloneElement } from 'react';
+import { buildClassName } from '../../utils/build-classname.js';
+
+const EDGE_ROUNDING = {
+    horizontal: {
+        xs: { first: 'rounded-l-sm rounded-r-none', last: 'rounded-r-sm rounded-l-none' },
+        sm: { first: 'rounded-l rounded-r-none', last: 'rounded-r rounded-l-none' },
+        md: { first: 'rounded-l-md rounded-r-none', last: 'rounded-r-md rounded-l-none' },
+        lg: { first: 'rounded-l-lg rounded-r-none', last: 'rounded-r-lg rounded-l-none' },
+    },
+    vertical: {
+        xs: { first: 'rounded-t-sm rounded-b-none', last: 'rounded-b-sm rounded-t-none' },
+        sm: { first: 'rounded-t rounded-b-none', last: 'rounded-b rounded-t-none' },
+        md: { first: 'rounded-t-md rounded-b-none', last: 'rounded-b-md rounded-t-none' },
+        lg: { first: 'rounded-t-lg rounded-b-none', last: 'rounded-b-lg rounded-t-none' },
+    },
+};
+const PILL_EDGE_ROUNDING = {
+    horizontal: { first: 'rounded-l-full rounded-r-none', last: 'rounded-r-full rounded-l-none' },
+    vertical: { first: 'rounded-t-full rounded-b-none', last: 'rounded-b-full rounded-t-none' },
+};
+const getEdgeRoundingClass = ({ index, count, size, orientation, pill, }) => {
+    if (count <= 1)
+        return '';
+    if (index !== 0 && index !== count - 1)
+        return 'rounded-none';
+    const position = index === 0 ? 'first' : 'last';
+    return pill
+        ? PILL_EDGE_ROUNDING[orientation][position]
+        : EDGE_ROUNDING[orientation][size][position];
+};
+const ButtonGroup = ({ children, orientation = 'horizontal', theme = 'secondary', variant = 'default', size = 'md', value, onChange, disabled: groupDisabled = false, rounded = false, fullWidth = false, label, className = '', }) => {
+    const isVertical = orientation === 'vertical';
+    const items = useMemo(() => Children.toArray(children).filter(isValidElement), [children]);
+    const count = items.length;
+    const isToggleMode = value !== undefined;
+    return (jsx("div", { role: "group", "aria-label": label, className: buildClassName('inline-flex items-stretch', isVertical ? 'flex-col' : 'flex-row', fullWidth && 'flex w-full', className), children: items.map((child, index) => {
+            var _a, _b, _c, _d, _e, _f, _g, _h;
+            const childProps = child.props;
+            const childSize = (_a = childProps.size) !== null && _a !== void 0 ? _a : size;
+            const childDisabled = (_b = childProps.disabled) !== null && _b !== void 0 ? _b : groupDisabled;
+            // Resolve item value for toggle mode
+            const itemVal = (_d = (_c = childProps.value) !== null && _c !== void 0 ? _c : childProps.id) !== null && _d !== void 0 ? _d : (typeof childProps.children === 'string' || typeof childProps.children === 'number'
+                ? childProps.children
+                : index);
+            const isSelected = isToggleMode
+                ? Array.isArray(value)
+                    ? value.includes(itemVal)
+                    : value === itemVal
+                : false;
+            const resolvedTheme = isToggleMode
+                ? isSelected
+                    ? ((_e = childProps.theme) !== null && _e !== void 0 ? _e : 'primary')
+                    : ((_f = childProps.theme) !== null && _f !== void 0 ? _f : 'secondary')
+                : ((_g = childProps.theme) !== null && _g !== void 0 ? _g : theme);
+            const resolvedVariant = (_h = childProps.variant) !== null && _h !== void 0 ? _h : variant;
+            const handleClick = (e) => {
+                var _a;
+                (_a = childProps.onClick) === null || _a === void 0 ? void 0 : _a.call(childProps, e);
+                if (isToggleMode && !childDisabled) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(itemVal);
+                }
+            };
+            return cloneElement(child, {
+                theme: resolvedTheme,
+                variant: resolvedVariant,
+                size: childSize,
+                disabled: childDisabled,
+                ...(isToggleMode ? { 'aria-pressed': isSelected } : {}),
+                onClick: handleClick,
+                className: buildClassName(childProps.className, getEdgeRoundingClass({
+                    index,
+                    count,
+                    size: childSize,
+                    orientation,
+                    pill: rounded,
+                }), count > 1 && [
+                    'relative shadow-none hover:z-10 focus:z-10 focus-visible:z-10',
+                    isSelected && 'z-10',
+                    index > 0 && (isVertical ? '-mt-px' : '-ml-px'),
+                    index > 0 &&
+                        resolvedVariant === 'default' &&
+                        (isVertical
+                            ? resolvedTheme === 'primary' || resolvedTheme === 'danger'
+                                ? 'border-t border-white/25 dark:border-white/20'
+                                : 'border-t border-[var(--ui-border)]'
+                            : resolvedTheme === 'primary' || resolvedTheme === 'danger'
+                                ? 'border-l border-white/25 dark:border-white/20'
+                                : 'border-l border-[var(--ui-border)]'),
+                ], fullWidth && 'flex-1'),
+            });
+        }) }));
+};
+ButtonGroup.displayName = 'ButtonGroup';
+
+export { ButtonGroup };
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/es/components/ButtonGroup/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sources":["../../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import React, { Children, cloneElement, isValidElement, useMemo } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { ButtonSize, ButtonTheme } from '../Button/Button.types'\nimport type { ButtonGroupOrientation, ButtonGroupProps } from './ButtonGroup.types'\n\nconst EDGE_ROUNDING: Record<\n  ButtonGroupOrientation,\n  Record<ButtonSize, { first: string; last: string }>\n> = {\n  horizontal: {\n    xs: { first: 'rounded-l-sm rounded-r-none', last: 'rounded-r-sm rounded-l-none' },\n    sm: { first: 'rounded-l rounded-r-none', last: 'rounded-r rounded-l-none' },\n    md: { first: 'rounded-l-md rounded-r-none', last: 'rounded-r-md rounded-l-none' },\n    lg: { first: 'rounded-l-lg rounded-r-none', last: 'rounded-r-lg rounded-l-none' },\n  },\n  vertical: {\n    xs: { first: 'rounded-t-sm rounded-b-none', last: 'rounded-b-sm rounded-t-none' },\n    sm: { first: 'rounded-t rounded-b-none', last: 'rounded-b rounded-t-none' },\n    md: { first: 'rounded-t-md rounded-b-none', last: 'rounded-b-md rounded-t-none' },\n    lg: { first: 'rounded-t-lg rounded-b-none', last: 'rounded-b-lg rounded-t-none' },\n  },\n}\n\nconst PILL_EDGE_ROUNDING: Record<ButtonGroupOrientation, { first: string; last: string }> = {\n  horizontal: { first: 'rounded-l-full rounded-r-none', last: 'rounded-r-full rounded-l-none' },\n  vertical: { first: 'rounded-t-full rounded-b-none', last: 'rounded-b-full rounded-t-none' },\n}\n\nconst getEdgeRoundingClass = ({\n  index,\n  count,\n  size,\n  orientation,\n  pill,\n}: {\n  index: number\n  count: number\n  size: ButtonSize\n  orientation: ButtonGroupOrientation\n  pill: boolean\n}) => {\n  if (count <= 1) return ''\n  if (index !== 0 && index !== count - 1) return 'rounded-none'\n\n  const position = index === 0 ? 'first' : 'last'\n  return pill\n    ? PILL_EDGE_ROUNDING[orientation][position]\n    : EDGE_ROUNDING[orientation][size][position]\n}\n\nexport const ButtonGroup: React.FC<ButtonGroupProps> = ({\n  children,\n  orientation = 'horizontal',\n  theme = 'secondary',\n  variant = 'default',\n  size = 'md',\n  value,\n  onChange,\n  disabled: groupDisabled = false,\n  rounded = false,\n  fullWidth = false,\n  label,\n  className = '',\n}) => {\n  const isVertical = orientation === 'vertical'\n  const items = useMemo(() => Children.toArray(children).filter(isValidElement), [children])\n  const count = items.length\n  const isToggleMode = value !== undefined\n\n  return (\n    <div\n      role=\"group\"\n      aria-label={label}\n      className={buildClassName(\n        'inline-flex items-stretch',\n        isVertical ? 'flex-col' : 'flex-row',\n        fullWidth && 'flex w-full',\n        className,\n      )}\n    >\n      {items.map((child, index) => {\n        const childProps = child.props as Record<string, any>\n        const childSize = (childProps.size as ButtonSize) ?? size\n        const childDisabled = childProps.disabled ?? groupDisabled\n\n        // Resolve item value for toggle mode\n        const itemVal =\n          childProps.value ??\n          childProps.id ??\n          (typeof childProps.children === 'string' || typeof childProps.children === 'number'\n            ? childProps.children\n            : index)\n\n        const isSelected = isToggleMode\n          ? Array.isArray(value)\n            ? value.includes(itemVal)\n            : value === itemVal\n          : false\n\n        const resolvedTheme: ButtonTheme = isToggleMode\n          ? isSelected\n            ? (childProps.theme ?? 'primary')\n            : (childProps.theme ?? 'secondary')\n          : (childProps.theme ?? theme)\n\n        const resolvedVariant = childProps.variant ?? variant\n\n        const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n          childProps.onClick?.(e)\n          if (isToggleMode && !childDisabled) {\n            onChange?.(itemVal)\n          }\n        }\n\n        return cloneElement(child as React.ReactElement<Record<string, unknown>>, {\n          theme: resolvedTheme,\n          variant: resolvedVariant,\n          size: childSize,\n          disabled: childDisabled,\n          ...(isToggleMode ? { 'aria-pressed': isSelected } : {}),\n          onClick: handleClick,\n          className: buildClassName(\n            childProps.className,\n            getEdgeRoundingClass({\n              index,\n              count,\n              size: childSize,\n              orientation,\n              pill: rounded,\n            }),\n            count > 1 && [\n              'relative shadow-none hover:z-10 focus:z-10 focus-visible:z-10',\n              isSelected && 'z-10',\n              index > 0 && (isVertical ? '-mt-px' : '-ml-px'),\n              index > 0 &&\n                resolvedVariant === 'default' &&\n                (isVertical\n                  ? resolvedTheme === 'primary' || resolvedTheme === 'danger'\n                    ? 'border-t border-white/25 dark:border-white/20'\n                    : 'border-t border-[var(--ui-border)]'\n                  : resolvedTheme === 'primary' || resolvedTheme === 'danger'\n                    ? 'border-l border-white/25 dark:border-white/20'\n                    : 'border-l border-[var(--ui-border)]'),\n            ],\n            fullWidth && 'flex-1',\n          ),\n        })\n      })}\n    </div>\n  )\n}\n\nButtonGroup.displayName = 'ButtonGroup'\n"],"names":["_jsx"],"mappings":"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"}

package/dist/es/components/Card/Card.js

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { buildClassName } from '../../utils/build-classname.js';
+
+const RADIUS_CLASS = {
+    none: 'rounded-none',
+    sm: 'rounded-sm',
+    md: 'rounded-md',
+    lg: 'rounded-lg',
+    xl: 'rounded-xl',
+    '2xl': 'rounded-2xl',
+};
+const ASPECT_RATIO_CLASS = {
+    auto: 'aspect-auto',
+    square: 'aspect-square',
+    video: 'aspect-video',
+    wide: 'aspect-[21/9]',
+};
+function ChevronRightIcon({ className = 'size-4' }) {
+    return (jsx("svg", { className: className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }));
+}
+const Card = forwardRef(({ as, ...props }, ref) => {
+    const { variant = 'outlined', radius = 'xl', hoverable = false, clickable = false, selected = false, bordered = true, compact = false, zeroPadding = false, title, subtitle, leading, trailing, badge, showChevron = false, children, onClick, ...rest } = props;
+    const Component = as || 'div';
+    const { className, ...cleanRest } = rest;
+    const isClickable = clickable || Boolean(onClick);
+    const isOutlined = variant === 'outlined' && bordered;
+    const isElevated = variant === 'elevated';
+    const isFilled = variant === 'filled';
+    const isGhost = variant === 'ghost';
+    const classes = buildClassName('block transition-all duration-150 select-none', RADIUS_CLASS[radius] || RADIUS_CLASS.xl, zeroPadding ? '' : compact ? 'p-3 sm:p-4' : 'p-5 sm:p-6', 
+    // Surface variants
+    isOutlined && 'bg-white dark:bg-gray-900 border border-[var(--ui-border)]', isElevated &&
+        'bg-white dark:bg-gray-900 border border-[var(--ui-border)] shadow-md shadow-gray-200/50 dark:shadow-none', isFilled && 'bg-gray-50/80 dark:bg-gray-800/60 border border-transparent', isGhost && 'bg-transparent border border-transparent', 
+    // Hoverable & Clickable mobile/web touch states
+    hoverable && 'hover:bg-gray-100/80 dark:hover:bg-gray-800/80', isClickable &&
+        'cursor-pointer hover:-translate-y-0.5 hover:shadow-lg active:scale-[0.99] active:bg-gray-100 dark:active:bg-gray-800/90', selected && 'ring-2 ring-[var(--ui-primary)] border-[var(--ui-primary)]', className);
+    const hasHeaderRow = title || subtitle || leading || trailing || badge || showChevron;
+    return (jsxs(Component, { ref: ref, className: classes, onClick: onClick, ...cleanRest, children: [hasHeaderRow && (jsxs("div", { className: buildClassName('flex items-center gap-3 w-full min-w-0', children && 'mb-3'), children: [leading && jsx("div", { className: "shrink-0 flex items-center justify-center", children: leading }), jsxs("div", { className: "flex-1 min-w-0 text-left", children: [jsxs("div", { className: "flex items-center gap-2 flex-wrap", children: [title && (jsx("span", { className: "text-sm font-semibold text-gray-900 dark:text-white truncate", children: title })), badge] }), subtitle && (jsx("div", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate", children: subtitle }))] }), (trailing || showChevron) && (jsxs("div", { className: "shrink-0 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400", children: [trailing, showChevron && jsx(ChevronRightIcon, { className: "size-4 text-gray-400" })] }))] })), children] }));
+});
+const CardHeader = ({ className, bordered = false, children, ...props }) => (jsx("div", { className: buildClassName('flex items-center justify-between gap-4 mb-4', bordered && 'pb-4 border-b border-[var(--ui-border)]', className), ...props, children: children }));
+const CardTitle = ({ className, as: Component = 'h3', children, ...props }) => (jsx(Component, { className: buildClassName('text-lg font-semibold text-gray-900 dark:text-white tracking-tight', className), ...props, children: children }));
+const CardDescription = ({ className, children, ...props }) => (jsx("p", { className: buildClassName('text-sm text-gray-500 dark:text-gray-400 font-normal mt-1', className), ...props, children: children }));
+const CardContent = ({ className, children, ...props }) => (jsx("div", { className: buildClassName('space-y-3', className), ...props, children: children }));
+const CardFooter = ({ className, bordered = false, children, ...props }) => (jsx("div", { className: buildClassName('flex items-center justify-end gap-3 mt-4', bordered && 'pt-4 border-t border-[var(--ui-border)]', className), ...props, children: children }));
+const CardMedia = ({ className, aspectRatio = 'video', alt = '', ...props }) => (jsx("div", { className: buildClassName('overflow-hidden -mx-5 -mt-5 mb-4 sm:-mx-6 sm:-mt-6', className), children: jsx("img", { alt: alt, className: buildClassName('w-full object-cover', ASPECT_RATIO_CLASS[aspectRatio] || ASPECT_RATIO_CLASS.video), ...props }) }));
+Card.Header = CardHeader;
+Card.Title = CardTitle;
+Card.Description = CardDescription;
+Card.Content = CardContent;
+Card.Body = CardContent;
+Card.Footer = CardFooter;
+Card.Media = CardMedia;
+Card.displayName = 'Card';
+
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardMedia, CardTitle };
+//# sourceMappingURL=Card.js.map

package/dist/es/components/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../../../src/components/Card/Card.tsx"],"sourcesContent":["import { ElementType, forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type {\n  CardComponent,\n  CardContentProps,\n  CardDescriptionProps,\n  CardFooterProps,\n  CardHeaderProps,\n  CardMediaProps,\n  CardProps,\n  CardTitleProps,\n} from './Card.types'\nimport type { PolymorphicRef } from '../common-type'\n\nconst RADIUS_CLASS: Record<string, string> = {\n  none: 'rounded-none',\n  sm: 'rounded-sm',\n  md: 'rounded-md',\n  lg: 'rounded-lg',\n  xl: 'rounded-xl',\n  '2xl': 'rounded-2xl',\n}\n\nconst ASPECT_RATIO_CLASS: Record<string, string> = {\n  auto: 'aspect-auto',\n  square: 'aspect-square',\n  video: 'aspect-video',\n  wide: 'aspect-[21/9]',\n}\n\nfunction ChevronRightIcon({ className = 'size-4' }: { className?: string }) {\n  return (\n    <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\">\n      <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M9 5l7 7-7 7\" />\n    </svg>\n  )\n}\n\nexport const Card = forwardRef(\n  <C extends ElementType = 'div'>({ as, ...props }: CardProps<C>, ref: PolymorphicRef<C>) => {\n    const {\n      variant = 'outlined',\n      radius = 'xl',\n      hoverable = false,\n      clickable = false,\n      selected = false,\n      bordered = true,\n      compact = false,\n      zeroPadding = false,\n      title,\n      subtitle,\n      leading,\n      trailing,\n      badge,\n      showChevron = false,\n      children,\n      onClick,\n      ...rest\n    } = props\n\n    const Component = as || 'div'\n    const { className, ...cleanRest } = rest as { className?: string }\n\n    const isClickable = clickable || Boolean(onClick)\n    const isOutlined = variant === 'outlined' && bordered\n    const isElevated = variant === 'elevated'\n    const isFilled = variant === 'filled'\n    const isGhost = variant === 'ghost'\n\n    const classes = buildClassName(\n      'block transition-all duration-150 select-none',\n      RADIUS_CLASS[radius] || RADIUS_CLASS.xl,\n      zeroPadding ? '' : compact ? 'p-3 sm:p-4' : 'p-5 sm:p-6',\n\n      // Surface variants\n      isOutlined && 'bg-white dark:bg-gray-900 border border-[var(--ui-border)]',\n      isElevated &&\n        'bg-white dark:bg-gray-900 border border-[var(--ui-border)] shadow-md shadow-gray-200/50 dark:shadow-none',\n      isFilled && 'bg-gray-50/80 dark:bg-gray-800/60 border border-transparent',\n      isGhost && 'bg-transparent border border-transparent',\n\n      // Hoverable & Clickable mobile/web touch states\n      hoverable && 'hover:bg-gray-100/80 dark:hover:bg-gray-800/80',\n      isClickable &&\n        'cursor-pointer hover:-translate-y-0.5 hover:shadow-lg active:scale-[0.99] active:bg-gray-100 dark:active:bg-gray-800/90',\n      selected && 'ring-2 ring-[var(--ui-primary)] border-[var(--ui-primary)]',\n\n      className,\n    )\n\n    const hasHeaderRow = title || subtitle || leading || trailing || badge || showChevron\n\n    return (\n      <Component ref={ref} className={classes} onClick={onClick} {...cleanRest}>\n        {hasHeaderRow && (\n          <div\n            className={buildClassName('flex items-center gap-3 w-full min-w-0', children && 'mb-3')}\n          >\n            {leading && <div className=\"shrink-0 flex items-center justify-center\">{leading}</div>}\n            <div className=\"flex-1 min-w-0 text-left\">\n              <div className=\"flex items-center gap-2 flex-wrap\">\n                {title && (\n                  <span className=\"text-sm font-semibold text-gray-900 dark:text-white truncate\">\n                    {title}\n                  </span>\n                )}\n                {badge}\n              </div>\n              {subtitle && (\n                <div className=\"text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate\">\n                  {subtitle}\n                </div>\n              )}\n            </div>\n            {(trailing || showChevron) && (\n              <div className=\"shrink-0 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400\">\n                {trailing}\n                {showChevron && <ChevronRightIcon className=\"size-4 text-gray-400\" />}\n              </div>\n            )}\n          </div>\n        )}\n        {children}\n      </Component>\n    )\n  },\n) as unknown as CardComponent\n\nexport const CardHeader = ({\n  className,\n  bordered = false,\n  children,\n  ...props\n}: CardHeaderProps) => (\n  <div\n    className={buildClassName(\n      'flex items-center justify-between gap-4 mb-4',\n      bordered && 'pb-4 border-b border-[var(--ui-border)]',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n)\n\nexport const CardTitle = ({\n  className,\n  as: Component = 'h3',\n  children,\n  ...props\n}: CardTitleProps) => (\n  <Component\n    className={buildClassName(\n      'text-lg font-semibold text-gray-900 dark:text-white tracking-tight',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </Component>\n)\n\nexport const CardDescription = ({ className, children, ...props }: CardDescriptionProps) => (\n  <p\n    className={buildClassName(\n      'text-sm text-gray-500 dark:text-gray-400 font-normal mt-1',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </p>\n)\n\nexport const CardContent = ({ className, children, ...props }: CardContentProps) => (\n  <div className={buildClassName('space-y-3', className)} {...props}>\n    {children}\n  </div>\n)\n\nexport const CardFooter = ({\n  className,\n  bordered = false,\n  children,\n  ...props\n}: CardFooterProps) => (\n  <div\n    className={buildClassName(\n      'flex items-center justify-end gap-3 mt-4',\n      bordered && 'pt-4 border-t border-[var(--ui-border)]',\n      className,\n    )}\n    {...props}\n  >\n    {children}\n  </div>\n)\n\nexport const CardMedia = ({\n  className,\n  aspectRatio = 'video',\n  alt = '',\n  ...props\n}: CardMediaProps) => (\n  <div className={buildClassName('overflow-hidden -mx-5 -mt-5 mb-4 sm:-mx-6 sm:-mt-6', className)}>\n    <img\n      alt={alt}\n      className={buildClassName(\n        'w-full object-cover',\n        ASPECT_RATIO_CLASS[aspectRatio] || ASPECT_RATIO_CLASS.video,\n      )}\n      {...props}\n    />\n  </div>\n)\n\nCard.Header = CardHeader\nCard.Title = CardTitle\nCard.Description = CardDescription\nCard.Content = CardContent\nCard.Body = CardContent\nCard.Footer = CardFooter\nCard.Media = CardMedia\n\nCard.displayName = 'Card'\n"],"names":["_jsx","_jsxs"],"mappings":"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"}