@pk-design/react-tailwind 1.6.0 → 1.7.0

package/dist/cjs/components/Accordion/Accordion.js

@@ -0,0 +1,61 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var buildClassname = require('../../utils/build-classname.js');
+var ChevronDown = require('../Icons/ChevronDown.svg.js');
+
+const CONTAINER_CLASS = {
+    bordered: 'rounded-lg border border-[var(--ui-border)] divide-y divide-[var(--ui-border)] bg-white dark:bg-gray-800 overflow-hidden',
+    separated: 'space-y-2',
+    plain: 'divide-y divide-[var(--ui-border)]',
+};
+const ITEM_CLASS = {
+    bordered: '',
+    separated: 'rounded-lg border border-[var(--ui-border)] bg-white dark:bg-gray-800 overflow-hidden',
+    plain: '',
+};
+const HEADER_CLASS = 'flex w-full items-center justify-between gap-2 py-3 px-4 text-left text-sm font-medium ' +
+    'text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700/50 ' +
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--ui-focus-ring)] ' +
+    'disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none ' +
+    'transition-colors duration-150 cursor-pointer';
+const Accordion = ({ items, type = 'single', variant = 'bordered', collapsible = true, defaultOpenIds, openIds: controlledOpenIds, onChange, expandIcon, className = '', titleClass = '', panelClass = '', }) => {
+    const baseId = React.useId();
+    const resolvedItems = React.useMemo(() => items.map((item, index) => { var _a; return ({ ...item, id: (_a = item.id) !== null && _a !== void 0 ? _a : index }); }), [items]);
+    const [uncontrolledOpenIds, setUncontrolledOpenIds] = React.useState(defaultOpenIds !== null && defaultOpenIds !== void 0 ? defaultOpenIds : []);
+    const isControlled = controlledOpenIds !== undefined;
+    const openIds = isControlled ? controlledOpenIds : uncontrolledOpenIds;
+    const toggle = (id) => {
+        const isOpen = openIds.includes(id);
+        const next = type === 'single'
+            ? isOpen
+                ? collapsible
+                    ? []
+                    : openIds
+                : [id]
+            : isOpen
+                ? openIds.filter((openId) => openId !== id)
+                : [...openIds, id];
+        if (next === openIds)
+            return;
+        if (!isControlled)
+            setUncontrolledOpenIds(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    };
+    const renderIndicator = (isOpen) => {
+        if (typeof expandIcon === 'function')
+            return expandIcon(isOpen);
+        return (jsxRuntime.jsx("span", { className: buildClassname.buildClassName('inline-flex shrink-0 transition-transform duration-200', isOpen && 'rotate-180'), children: expandIcon !== null && expandIcon !== void 0 ? expandIcon : jsxRuntime.jsx(ChevronDown.default, { className: "size-4 stroke-gray-500 dark:stroke-gray-400" }) }));
+    };
+    return (jsxRuntime.jsx("div", { className: buildClassname.buildClassName(CONTAINER_CLASS[variant], className), children: resolvedItems.map((item) => {
+            const isOpen = openIds.includes(item.id);
+            const headerId = `${baseId}-${item.id}-header`;
+            const panelId = `${baseId}-${item.id}-panel`;
+            return (jsxRuntime.jsxs("div", { className: ITEM_CLASS[variant], children: [jsxRuntime.jsx("h3", { className: "m-0", children: jsxRuntime.jsxs("button", { type: "button", id: headerId, "aria-expanded": isOpen, "aria-controls": panelId, disabled: item.disabled, onClick: () => toggle(item.id), className: buildClassname.buildClassName(HEADER_CLASS, titleClass, item.titleClass), children: [jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [item.icon && jsxRuntime.jsx("span", { className: "inline-flex shrink-0", children: item.icon }), item.title] }), renderIndicator(isOpen)] }) }), jsxRuntime.jsx("div", { id: panelId, role: "region", "aria-labelledby": headerId, className: buildClassname.buildClassName('grid transition-[grid-template-rows] duration-200 ease-in-out', isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'), children: jsxRuntime.jsx("div", { className: "overflow-hidden", children: jsxRuntime.jsx("div", { className: buildClassname.buildClassName('px-4 pt-2 pb-4 text-sm text-gray-600 dark:text-gray-300', panelClass, item.panelClass), children: item.content }) }) })] }, item.id));
+        }) }));
+};
+Accordion.displayName = 'Accordion';
+
+exports.Accordion = Accordion;
+//# sourceMappingURL=Accordion.js.map

package/dist/cjs/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import React, { useId, useMemo, useState } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport ChevronDownIcon from '../Icons/ChevronDown.svg'\nimport type { AccordionItem, AccordionProps, AccordionVariant } from './Accordion.types'\n\nconst CONTAINER_CLASS: Record<AccordionVariant, string> = {\n  bordered:\n    'rounded-lg border border-[var(--ui-border)] divide-y divide-[var(--ui-border)] bg-white dark:bg-gray-800 overflow-hidden',\n  separated: 'space-y-2',\n  plain: 'divide-y divide-[var(--ui-border)]',\n}\n\nconst ITEM_CLASS: Record<AccordionVariant, string> = {\n  bordered: '',\n  separated:\n    'rounded-lg border border-[var(--ui-border)] bg-white dark:bg-gray-800 overflow-hidden',\n  plain: '',\n}\n\nconst HEADER_CLASS =\n  'flex w-full items-center justify-between gap-2 py-3 px-4 text-left text-sm font-medium ' +\n  'text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700/50 ' +\n  'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--ui-focus-ring)] ' +\n  'disabled:opacity-40 disabled:cursor-not-allowed disabled:pointer-events-none ' +\n  'transition-colors duration-150 cursor-pointer'\n\nexport const Accordion: React.FC<AccordionProps> = ({\n  items,\n  type = 'single',\n  variant = 'bordered',\n  collapsible = true,\n  defaultOpenIds,\n  openIds: controlledOpenIds,\n  onChange,\n  expandIcon,\n  className = '',\n  titleClass = '',\n  panelClass = '',\n}) => {\n  const baseId = useId()\n\n  const resolvedItems = useMemo(\n    () => items.map((item, index) => ({ ...item, id: item.id ?? index })),\n    [items],\n  )\n\n  const [uncontrolledOpenIds, setUncontrolledOpenIds] = useState<Array<string | number>>(\n    defaultOpenIds ?? [],\n  )\n\n  const isControlled = controlledOpenIds !== undefined\n  const openIds = isControlled ? controlledOpenIds : uncontrolledOpenIds\n\n  const toggle = (id: string | number) => {\n    const isOpen = openIds.includes(id)\n    const next =\n      type === 'single'\n        ? isOpen\n          ? collapsible\n            ? []\n            : openIds\n          : [id]\n        : isOpen\n          ? openIds.filter((openId) => openId !== id)\n          : [...openIds, id]\n\n    if (next === openIds) return\n    if (!isControlled) setUncontrolledOpenIds(next)\n    onChange?.(next)\n  }\n\n  const renderIndicator = (isOpen: boolean) => {\n    if (typeof expandIcon === 'function') return expandIcon(isOpen)\n\n    return (\n      <span\n        className={buildClassName(\n          'inline-flex shrink-0 transition-transform duration-200',\n          isOpen && 'rotate-180',\n        )}\n      >\n        {expandIcon ?? <ChevronDownIcon className=\"size-4 stroke-gray-500 dark:stroke-gray-400\" />}\n      </span>\n    )\n  }\n\n  return (\n    <div className={buildClassName(CONTAINER_CLASS[variant], className)}>\n      {resolvedItems.map((item: AccordionItem & { id: string | number }) => {\n        const isOpen = openIds.includes(item.id)\n        const headerId = `${baseId}-${item.id}-header`\n        const panelId = `${baseId}-${item.id}-panel`\n\n        return (\n          <div key={item.id} className={ITEM_CLASS[variant]}>\n            <h3 className=\"m-0\">\n              <button\n                type=\"button\"\n                id={headerId}\n                aria-expanded={isOpen}\n                aria-controls={panelId}\n                disabled={item.disabled}\n                onClick={() => toggle(item.id)}\n                className={buildClassName(HEADER_CLASS, titleClass, item.titleClass)}\n              >\n                <span className=\"flex items-center gap-2\">\n                  {item.icon && <span className=\"inline-flex shrink-0\">{item.icon}</span>}\n                  {item.title}\n                </span>\n                {renderIndicator(isOpen)}\n              </button>\n            </h3>\n\n            <div\n              id={panelId}\n              role=\"region\"\n              aria-labelledby={headerId}\n              className={buildClassName(\n                'grid transition-[grid-template-rows] duration-200 ease-in-out',\n                isOpen ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',\n              )}\n            >\n              <div className=\"overflow-hidden\">\n                <div\n                  className={buildClassName(\n                    'px-4 pt-2 pb-4 text-sm text-gray-600 dark:text-gray-300',\n                    panelClass,\n                    item.panelClass,\n                  )}\n                >\n                  {item.content}\n                </div>\n              </div>\n            </div>\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nAccordion.displayName = 'Accordion'\n"],"names":["useId","useMemo","useState","_jsx","buildClassName","ChevronDownIcon","_jsxs"],"mappings":"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"}

package/dist/cjs/components/ActionSheet/ActionSheet.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Drawer = require('../Drawer/Drawer.js');
+var Button = require('../Button/Button.js');
+var buildClassname = require('../../utils/build-classname.js');
+
+function ActionSheet({ isOpen, onClose, title, description, actions, showCancelButton = true, cancelLabel = 'Cancel', onCancel, closeOnBackdropClick = true, dragHandle = true, panelClass = '', containerClass = '', }) {
+    const handleItemClick = (action) => {
+        var _a;
+        if (action.disabled)
+            return;
+        (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+        onClose();
+    };
+    const handleCancelClick = () => {
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+        onClose();
+    };
+    return (jsxRuntime.jsx(Drawer.Drawer, { isOpen: isOpen, onClose: onClose, align: "bottom", closeOnOutsideClick: closeOnBackdropClick, showCloseButton: false, dragHandle: dragHandle, panelClass: buildClassname.buildClassName('rounded-t-2xl max-h-[85vh] overflow-hidden', panelClass), "data-testid": "action-sheet-drawer", children: jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('space-y-4 py-1', containerClass), "data-testid": "action-sheet", children: [(title || description) && (jsxRuntime.jsxs("div", { className: "text-center px-4 pb-2 border-b border-[var(--ui-border-muted)]", children: [title && (jsxRuntime.jsx("h3", { className: "text-sm font-bold text-gray-900 dark:text-white truncate", children: title })), description && (jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate", children: description }))] })), jsxRuntime.jsx("div", { className: "space-y-1 bg-gray-50 dark:bg-gray-800/60 p-1.5 rounded-2xl border border-[var(--ui-border-muted)]", children: actions.map((action) => {
+                        const isDanger = action.theme === 'danger';
+                        const isPrimary = action.theme === 'primary';
+                        return (jsxRuntime.jsxs("button", { type: "button", disabled: action.disabled, onClick: () => handleItemClick(action), className: buildClassname.buildClassName('w-full flex items-center gap-3.5 p-3 rounded-xl text-left transition-all duration-150 group cursor-pointer', action.disabled && 'opacity-50 cursor-not-allowed pointer-events-none', !action.disabled &&
+                                (isDanger
+                                    ? 'hover:bg-red-50 dark:hover:bg-red-950/40 text-red-600 dark:text-red-400 font-semibold'
+                                    : isPrimary
+                                        ? 'hover:bg-blue-50 dark:hover:bg-blue-950/40 text-blue-600 dark:text-blue-400 font-semibold'
+                                        : 'hover:bg-white dark:hover:bg-gray-800 text-gray-800 dark:text-gray-200 font-medium')), "data-testid": `action-sheet-item-${action.id}`, children: [action.icon && (jsxRuntime.jsx("span", { className: buildClassname.buildClassName('shrink-0 text-base transition-colors', isDanger
+                                        ? 'text-red-500 dark:text-red-400'
+                                        : isPrimary
+                                            ? 'text-blue-500 dark:text-blue-400'
+                                            : 'text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200'), children: action.icon })), jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntime.jsx("div", { className: "text-sm truncate", children: action.label }), action.description && (jsxRuntime.jsx("div", { className: "text-xs text-gray-400 dark:text-gray-500 truncate font-normal mt-0.5", children: action.description }))] })] }, action.id));
+                    }) }), showCancelButton && (jsxRuntime.jsx("div", { className: "pt-1", children: jsxRuntime.jsx(Button.Button, { theme: "secondary", size: "lg", fullWidth: true, onClick: handleCancelClick, className: "font-semibold text-sm rounded-xl py-3", "data-testid": "action-sheet-cancel-btn", children: cancelLabel }) }))] }) }));
+}
+ActionSheet.displayName = 'ActionSheet';
+
+exports.ActionSheet = ActionSheet;
+//# sourceMappingURL=ActionSheet.js.map

package/dist/cjs/components/ActionSheet/ActionSheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionSheet.js","sources":["../../../../../src/components/ActionSheet/ActionSheet.tsx"],"sourcesContent":["import React from 'react'\nimport type { ActionSheetProps } from './ActionSheet.types'\nimport { Drawer } from '../Drawer'\nimport { Button } from '../Button'\nimport { buildClassName } from '../../utils/build-classname'\n\nexport function ActionSheet({\n  isOpen,\n  onClose,\n  title,\n  description,\n  actions,\n  showCancelButton = true,\n  cancelLabel = 'Cancel',\n  onCancel,\n  closeOnBackdropClick = true,\n  dragHandle = true,\n  panelClass = '',\n  containerClass = '',\n}: ActionSheetProps) {\n  const handleItemClick = (action: (typeof actions)[0]) => {\n    if (action.disabled) return\n    action.onClick?.()\n    onClose()\n  }\n\n  const handleCancelClick = () => {\n    onCancel?.()\n    onClose()\n  }\n\n  return (\n    <Drawer\n      isOpen={isOpen}\n      onClose={onClose}\n      align=\"bottom\"\n      closeOnOutsideClick={closeOnBackdropClick}\n      showCloseButton={false}\n      dragHandle={dragHandle}\n      panelClass={buildClassName('rounded-t-2xl max-h-[85vh] overflow-hidden', panelClass)}\n      data-testid=\"action-sheet-drawer\"\n    >\n      <div className={buildClassName('space-y-4 py-1', containerClass)} data-testid=\"action-sheet\">\n        {/* Header Title & Description */}\n        {(title || description) && (\n          <div className=\"text-center px-4 pb-2 border-b border-[var(--ui-border-muted)]\">\n            {title && (\n              <h3 className=\"text-sm font-bold text-gray-900 dark:text-white truncate\">{title}</h3>\n            )}\n            {description && (\n              <p className=\"text-xs text-gray-500 dark:text-gray-400 mt-0.5 truncate\">\n                {description}\n              </p>\n            )}\n          </div>\n        )}\n\n        {/* Action Items Group */}\n        <div className=\"space-y-1 bg-gray-50 dark:bg-gray-800/60 p-1.5 rounded-2xl border border-[var(--ui-border-muted)]\">\n          {actions.map((action) => {\n            const isDanger = action.theme === 'danger'\n            const isPrimary = action.theme === 'primary'\n\n            return (\n              <button\n                key={action.id}\n                type=\"button\"\n                disabled={action.disabled}\n                onClick={() => handleItemClick(action)}\n                className={buildClassName(\n                  'w-full flex items-center gap-3.5 p-3 rounded-xl text-left transition-all duration-150 group cursor-pointer',\n                  action.disabled && 'opacity-50 cursor-not-allowed pointer-events-none',\n                  !action.disabled &&\n                    (isDanger\n                      ? 'hover:bg-red-50 dark:hover:bg-red-950/40 text-red-600 dark:text-red-400 font-semibold'\n                      : isPrimary\n                        ? 'hover:bg-blue-50 dark:hover:bg-blue-950/40 text-blue-600 dark:text-blue-400 font-semibold'\n                        : 'hover:bg-white dark:hover:bg-gray-800 text-gray-800 dark:text-gray-200 font-medium'),\n                )}\n                data-testid={`action-sheet-item-${action.id}`}\n              >\n                {action.icon && (\n                  <span\n                    className={buildClassName(\n                      'shrink-0 text-base transition-colors',\n                      isDanger\n                        ? 'text-red-500 dark:text-red-400'\n                        : isPrimary\n                          ? 'text-blue-500 dark:text-blue-400'\n                          : 'text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200',\n                    )}\n                  >\n                    {action.icon}\n                  </span>\n                )}\n                <div className=\"min-w-0 flex-1\">\n                  <div className=\"text-sm truncate\">{action.label}</div>\n                  {action.description && (\n                    <div className=\"text-xs text-gray-400 dark:text-gray-500 truncate font-normal mt-0.5\">\n                      {action.description}\n                    </div>\n                  )}\n                </div>\n              </button>\n            )\n          })}\n        </div>\n\n        {/* Bottom Separate Cancel Button */}\n        {showCancelButton && (\n          <div className=\"pt-1\">\n            <Button\n              theme=\"secondary\"\n              size=\"lg\"\n              fullWidth\n              onClick={handleCancelClick}\n              className=\"font-semibold text-sm rounded-xl py-3\"\n              data-testid=\"action-sheet-cancel-btn\"\n            >\n              {cancelLabel}\n            </Button>\n          </div>\n        )}\n      </div>\n    </Drawer>\n  )\n}\n\nActionSheet.displayName = 'ActionSheet'\n"],"names":["_jsx","Drawer","buildClassName","_jsxs","Button"],"mappings":"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"}

package/dist/cjs/components/Alert/Alert.js

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var buildClassname = require('../../utils/build-classname.js');
+var BadgeCheck = require('../Icons/BadgeCheck.svg.js');
+var CircleX = require('../Icons/CircleX.svg.js');
+var CircleAlert = require('../Icons/CircleAlert.svg.js');
+var Info = require('../Icons/Info.svg.js');
+var X = require('../Icons/X.svg.js');
+var Button = require('../Button/Button.js');
+
+const AlertTypeIconMap = {
+    success: BadgeCheck.default,
+    danger: CircleX.default,
+    warning: CircleAlert.default,
+    info: Info.default,
+};
+const TypeClassMap = {
+    success: 'bg-[var(--ui-success-light)] ring-[var(--ui-success-ring-subtle)] text-[var(--ui-success-text)]',
+    danger: 'bg-[var(--ui-danger-light)] ring-[var(--ui-danger-ring-subtle)] text-[var(--ui-danger-text)]',
+    warning: 'bg-[var(--ui-warning-light)] ring-[var(--ui-warning-ring-subtle)] text-[var(--ui-warning-text)]',
+    info: 'bg-[var(--ui-info-light)] ring-[var(--ui-info-ring-subtle)] text-[var(--ui-info-text)]',
+};
+const Alert = React.forwardRef((props, ref) => {
+    const { type = 'info', className, message, children, removable = false, onRemove, icon, title, ...restProps } = props;
+    const DefaultIcon = AlertTypeIconMap[type] || Info.default;
+    const iconNode = icon !== undefined ? (icon) : (jsxRuntime.jsx(DefaultIcon, { className: "size-5 shrink-0", "data-testid": `alert-${type}-icon` }));
+    return (jsxRuntime.jsxs("div", { ref: ref, className: buildClassname.buildClassName('flex items-center justify-between rounded-md p-3 text-sm ring-1 ring-inset gap-2', TypeClassMap[type], className), ...restProps, children: [jsxRuntime.jsxs("span", { className: "inline-flex items-start gap-2 min-w-0", children: [iconNode && jsxRuntime.jsx("span", { className: "shrink-0 inline-flex mt-0.5", children: iconNode }), jsxRuntime.jsxs("span", { className: "inline-flex flex-col gap-0.5 min-w-0", children: [title && jsxRuntime.jsx("span", { className: "font-semibold", children: title }), jsxRuntime.jsx("span", { className: "inline-flex items-center", children: message !== null && message !== void 0 ? message : children })] })] }), removable && (jsxRuntime.jsx(Button.Button, { iconOnly: true, "aria-label": "Dismiss alert", size: "xs", variant: "plain", theme: "secondary", className: "hover:bg-black/10 dark:hover:bg-white/10 shrink-0", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), "data-testid": "alert-remove-btn", children: jsxRuntime.jsx(X.default, { className: "size-4.5", "data-testid": "alert-remove-icon" }) }))] }));
+});
+Alert.displayName = 'Alert';
+
+exports.Alert = Alert;
+//# sourceMappingURL=Alert.js.map

package/dist/cjs/components/Alert/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sources":["../../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport BadgeCheckIcon from '../Icons/BadgeCheck.svg'\nimport CircleXIcon from '../Icons/CircleX.svg'\nimport CircleAlertIcon from '../Icons/CircleAlert.svg'\nimport InfoIcon from '../Icons/Info.svg'\nimport XIcon from '../Icons/X.svg'\nimport { Button } from '../Button'\nimport type { AlertProps } from './Alert.types'\n\nconst AlertTypeIconMap = {\n  success: BadgeCheckIcon,\n  danger: CircleXIcon,\n  warning: CircleAlertIcon,\n  info: InfoIcon,\n}\n\nconst TypeClassMap = {\n  success:\n    'bg-[var(--ui-success-light)] ring-[var(--ui-success-ring-subtle)] text-[var(--ui-success-text)]',\n  danger:\n    'bg-[var(--ui-danger-light)] ring-[var(--ui-danger-ring-subtle)] text-[var(--ui-danger-text)]',\n  warning:\n    'bg-[var(--ui-warning-light)] ring-[var(--ui-warning-ring-subtle)] text-[var(--ui-warning-text)]',\n  info: 'bg-[var(--ui-info-light)] ring-[var(--ui-info-ring-subtle)] text-[var(--ui-info-text)]',\n}\n\nexport const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {\n  const {\n    type = 'info',\n    className,\n    message,\n    children,\n    removable = false,\n    onRemove,\n    icon,\n    title,\n    ...restProps\n  } = props\n\n  const DefaultIcon = AlertTypeIconMap[type] || InfoIcon\n  const iconNode =\n    icon !== undefined ? (\n      icon\n    ) : (\n      <DefaultIcon className=\"size-5 shrink-0\" data-testid={`alert-${type}-icon`} />\n    )\n\n  return (\n    <div\n      ref={ref}\n      className={buildClassName(\n        'flex items-center justify-between rounded-md p-3 text-sm ring-1 ring-inset gap-2',\n        TypeClassMap[type],\n        className,\n      )}\n      {...restProps}\n    >\n      <span className=\"inline-flex items-start gap-2 min-w-0\">\n        {iconNode && <span className=\"shrink-0 inline-flex mt-0.5\">{iconNode}</span>}\n        <span className=\"inline-flex flex-col gap-0.5 min-w-0\">\n          {title && <span className=\"font-semibold\">{title}</span>}\n          <span className=\"inline-flex items-center\">{message ?? children}</span>\n        </span>\n      </span>\n      {removable && (\n        <Button\n          iconOnly\n          aria-label=\"Dismiss alert\"\n          size=\"xs\"\n          variant=\"plain\"\n          theme=\"secondary\"\n          className=\"hover:bg-black/10 dark:hover:bg-white/10 shrink-0\"\n          onClick={() => onRemove?.()}\n          data-testid=\"alert-remove-btn\"\n        >\n          <XIcon className=\"size-4.5\" data-testid=\"alert-remove-icon\" />\n        </Button>\n      )}\n    </div>\n  )\n})\n\nAlert.displayName = 'Alert'\n"],"names":["BadgeCheckIcon","CircleXIcon","CircleAlertIcon","InfoIcon","forwardRef","_jsx","_jsxs","buildClassName","Button","XIcon"],"mappings":";;;;;;;;;;;;AAUA,MAAM,gBAAgB,GAAG;AACvB,IAAA,OAAO,EAAEA,kBAAc;AACvB,IAAA,MAAM,EAAEC,eAAW;AACnB,IAAA,OAAO,EAAEC,mBAAe;AACxB,IAAA,IAAI,EAAEC,YAAQ;CACf;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,OAAO,EACL,iGAAiG;AACnG,IAAA,MAAM,EACJ,8FAA8F;AAChG,IAAA,OAAO,EACL,iGAAiG;AACnG,IAAA,IAAI,EAAE,wFAAwF;CAC/F;AAEM,MAAM,KAAK,GAAGC,gBAAU,CAA6B,CAAC,KAAK,EAAE,GAAG,KAAI;IACzE,MAAM,EACJ,IAAI,GAAG,MAAM,EACb,SAAS,EACT,OAAO,EACP,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,GAAG,SAAS,EACb,GAAG,KAAK;IAET,MAAM,WAAW,GAAG,gBAAgB,CAAC,IAAI,CAAC,IAAID,YAAQ;IACtD,MAAM,QAAQ,GACZ,IAAI,KAAK,SAAS,IAChB,IAAI,KAEJE,cAAA,CAAC,WAAW,EAAA,EAAC,SAAS,EAAC,iBAAiB,EAAA,aAAA,EAAc,CAAA,MAAA,EAAS,IAAI,CAAA,KAAA,CAAO,EAAA,CAAI,CAC/E;IAEH,QACEC,eAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,6BAAc,CACvB,kFAAkF,EAClF,YAAY,CAAC,IAAI,CAAC,EAClB,SAAS,CACV,EAAA,GACG,SAAS,EAAA,QAAA,EAAA,CAEbD,eAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,uCAAuC,EAAA,QAAA,EAAA,CACpD,QAAQ,IAAID,yBAAM,SAAS,EAAC,6BAA6B,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAQ,EAC5EC,eAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,sCAAsC,EAAA,QAAA,EAAA,CACnD,KAAK,IAAID,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,eAAe,EAAA,QAAA,EAAE,KAAK,EAAA,CAAQ,EACxDA,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,0BAA0B,EAAA,QAAA,EAAE,OAAO,KAAA,IAAA,IAAP,OAAO,cAAP,OAAO,GAAI,QAAQ,EAAA,CAAQ,CAAA,EAAA,CAClE,CAAA,EAAA,CACF,EACN,SAAS,KACRA,cAAA,CAACG,aAAM,EAAA,EACL,QAAQ,EAAA,IAAA,EAAA,YAAA,EACG,eAAe,EAC1B,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,WAAW,EACjB,SAAS,EAAC,mDAAmD,EAC7D,OAAO,EAAE,MAAM,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,EAAI,EAAA,aAAA,EACf,kBAAkB,EAAA,QAAA,EAE9BH,cAAA,CAACI,SAAK,EAAA,EAAC,SAAS,EAAC,UAAU,EAAA,aAAA,EAAa,mBAAmB,EAAA,CAAG,EAAA,CACvD,CACV,CAAA,EAAA,CACG;AAEV,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/cjs/components/Badge/Badge.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var buildClassname = require('../../utils/build-classname.js');
+var X = require('../Icons/X.svg.js');
+var TextContent = require('../TextContent/TextContent.js');
+
+const ThemeClassMap = {
+    success: 'bg-[var(--ui-success-light)] text-[var(--ui-success-text)] ring-[var(--ui-success-ring-subtle)]',
+    danger: 'bg-[var(--ui-danger-light)] text-[var(--ui-danger-text)] ring-[var(--ui-danger-ring-subtle)]',
+    warning: 'bg-[var(--ui-warning-light)] text-[var(--ui-warning-text)] ring-[var(--ui-warning-ring-subtle)]',
+    info: 'bg-[var(--ui-info-light)] text-[var(--ui-info-text)] ring-[var(--ui-info-ring-subtle)]',
+    primary: 'bg-[var(--ui-info-light)] text-[var(--ui-info-text)] ring-[var(--ui-info-ring-subtle)]',
+    secondary: 'bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 ring-[var(--ui-secondary-ring-subtle)]',
+};
+const SIZE_CLASS = {
+    sm: 'text-xs py-0.5 px-2',
+    md: 'text-xs py-1 px-3',
+};
+const Badge = React.forwardRef((props, ref) => {
+    const { theme = 'info', className, children, removable = false, rounded = false, onRemove, size = 'md', icon, ...restProps } = props;
+    return (jsxRuntime.jsxs(TextContent.TextContent, { ref: ref, className: buildClassname.buildClassName('inline-flex items-center gap-1 font-medium ring-1 ring-inset', SIZE_CLASS[size], ThemeClassMap[theme] || ThemeClassMap.info, rounded ? 'rounded-full' : 'rounded-md', icon ? 'pl-2' : '', removable ? 'pr-1' : '', className), "data-testid": `badge-${theme}`, ...restProps, children: [icon && jsxRuntime.jsx("span", { className: "shrink-0 inline-flex", children: icon }), children, removable && (jsxRuntime.jsx(X.default, { className: "size-4 shrink-0 hover:bg-black/10 dark:hover:bg-white/10 rounded-sm cursor-pointer", role: "button", tabIndex: 0, "aria-label": "Remove", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        onRemove === null || onRemove === void 0 ? void 0 : onRemove();
+                    }
+                } }))] }));
+});
+Badge.displayName = 'Badge';
+
+exports.Badge = Badge;
+//# sourceMappingURL=Badge.js.map

package/dist/cjs/components/Badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport { buildClassName } from '../../utils/build-classname'\nimport XIcon from '../Icons/X.svg'\nimport { BadgeProps } from './Badge.types'\nimport { TextContent } from '../TextContent'\n\nconst ThemeClassMap: Record<string, string> = {\n  success:\n    'bg-[var(--ui-success-light)] text-[var(--ui-success-text)] ring-[var(--ui-success-ring-subtle)]',\n  danger:\n    'bg-[var(--ui-danger-light)] text-[var(--ui-danger-text)] ring-[var(--ui-danger-ring-subtle)]',\n  warning:\n    'bg-[var(--ui-warning-light)] text-[var(--ui-warning-text)] ring-[var(--ui-warning-ring-subtle)]',\n  info: 'bg-[var(--ui-info-light)] text-[var(--ui-info-text)] ring-[var(--ui-info-ring-subtle)]',\n  primary: 'bg-[var(--ui-info-light)] text-[var(--ui-info-text)] ring-[var(--ui-info-ring-subtle)]',\n  secondary:\n    'bg-gray-50 dark:bg-gray-700 text-gray-700 dark:text-gray-200 ring-[var(--ui-secondary-ring-subtle)]',\n}\n\nconst SIZE_CLASS = {\n  sm: 'text-xs py-0.5 px-2',\n  md: 'text-xs py-1 px-3',\n}\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>((props, ref) => {\n  const {\n    theme = 'info',\n    className,\n    children,\n    removable = false,\n    rounded = false,\n    onRemove,\n    size = 'md',\n    icon,\n    ...restProps\n  } = props\n\n  return (\n    <TextContent\n      ref={ref}\n      className={buildClassName(\n        'inline-flex items-center gap-1 font-medium ring-1 ring-inset',\n        SIZE_CLASS[size],\n        ThemeClassMap[theme] || ThemeClassMap.info,\n        rounded ? 'rounded-full' : 'rounded-md',\n        icon ? 'pl-2' : '',\n        removable ? 'pr-1' : '',\n        className,\n      )}\n      data-testid={`badge-${theme}`}\n      {...restProps}\n    >\n      {icon && <span className=\"shrink-0 inline-flex\">{icon}</span>}\n      {children}\n      {removable && (\n        <XIcon\n          className=\"size-4 shrink-0 hover:bg-black/10 dark:hover:bg-white/10 rounded-sm cursor-pointer\"\n          role=\"button\"\n          tabIndex={0}\n          aria-label=\"Remove\"\n          onClick={() => onRemove?.()}\n          onKeyDown={(e: React.KeyboardEvent) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault()\n              onRemove?.()\n            }\n          }}\n        />\n      )}\n    </TextContent>\n  )\n})\n\nBadge.displayName = 'Badge'\n"],"names":["forwardRef","_jsxs","TextContent","buildClassName","_jsx","XIcon"],"mappings":";;;;;;;;AAMA,MAAM,aAAa,GAA2B;AAC5C,IAAA,OAAO,EACL,iGAAiG;AACnG,IAAA,MAAM,EACJ,8FAA8F;AAChG,IAAA,OAAO,EACL,iGAAiG;AACnG,IAAA,IAAI,EAAE,wFAAwF;AAC9F,IAAA,OAAO,EAAE,wFAAwF;AACjG,IAAA,SAAS,EACP,qGAAqG;CACxG;AAED,MAAM,UAAU,GAAG;AACjB,IAAA,EAAE,EAAE,qBAAqB;AACzB,IAAA,EAAE,EAAE,mBAAmB;CACxB;AAEM,MAAM,KAAK,GAAGA,gBAAU,CAA8B,CAAC,KAAK,EAAE,GAAG,KAAI;AAC1E,IAAA,MAAM,EACJ,KAAK,GAAG,MAAM,EACd,SAAS,EACT,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,IAAI,EACJ,GAAG,SAAS,EACb,GAAG,KAAK;IAET,QACEC,eAAA,CAACC,uBAAW,EAAA,EACV,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,6BAAc,CACvB,8DAA8D,EAC9D,UAAU,CAAC,IAAI,CAAC,EAChB,aAAa,CAAC,KAAK,CAAC,IAAI,aAAa,CAAC,IAAI,EAC1C,OAAO,GAAG,cAAc,GAAG,YAAY,EACvC,IAAI,GAAG,MAAM,GAAG,EAAE,EAClB,SAAS,GAAG,MAAM,GAAG,EAAE,EACvB,SAAS,CACV,EAAA,aAAA,EACY,CAAA,MAAA,EAAS,KAAK,CAAA,CAAE,EAAA,GACzB,SAAS,EAAA,QAAA,EAAA,CAEZ,IAAI,IAAIC,cAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,sBAAsB,YAAE,IAAI,EAAA,CAAQ,EAC5D,QAAQ,EACR,SAAS,KACRA,cAAA,CAACC,SAAK,EAAA,EACJ,SAAS,EAAC,oFAAoF,EAC9F,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EAAA,YAAA,EACA,QAAQ,EACnB,OAAO,EAAE,MAAM,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,EAAI,EAC3B,SAAS,EAAE,CAAC,CAAsB,KAAI;AACpC,oBAAA,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;wBACtC,CAAC,CAAC,cAAc,EAAE;AAClB,wBAAA,QAAQ,KAAA,IAAA,IAAR,QAAQ,KAAA,MAAA,GAAA,MAAA,GAAR,QAAQ,EAAI;oBACd;AACF,gBAAA,CAAC,EAAA,CACD,CACH,CAAA,EAAA,CACW;AAElB,CAAC;AAED,KAAK,CAAC,WAAW,GAAG,OAAO;;;;"}

package/dist/cjs/components/Banner/Banner.js

@@ -0,0 +1,41 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var TriangleAlert = require('../Icons/TriangleAlert.svg.js');
+var CircleX = require('../Icons/CircleX.svg.js');
+var CircleCheck = require('../Icons/CircleCheck.svg.js');
+var Info = require('../Icons/Info.svg.js');
+var X = require('../Icons/X.svg.js');
+var buildClassname = require('../../utils/build-classname.js');
+var Button = require('../Button/Button.js');
+
+const sizeMap = {
+    xs: 'size-4',
+    sm: 'size-5',
+    md: 'size-6',
+    lg: 'size-8',
+    xl: 'size-10',
+};
+const IconMap = {
+    info: Info.default,
+    error: CircleX.default,
+    success: CircleCheck.default,
+    warning: TriangleAlert.default,
+};
+const TypeClassMap = {
+    info: 'bg-[var(--ui-info-light)] ring-[var(--ui-info-ring-subtle)] text-[var(--ui-info-text)]',
+    error: 'bg-[var(--ui-danger-light)] ring-[var(--ui-danger-ring-subtle)] text-[var(--ui-danger-text)]',
+    success: 'bg-[var(--ui-success-light)] ring-[var(--ui-success-ring-subtle)] text-[var(--ui-success-text)]',
+    warning: 'bg-[var(--ui-warning-light)] ring-[var(--ui-warning-ring-subtle)] text-[var(--ui-warning-text)]',
+};
+const Banner = React.forwardRef((props, ref) => {
+    const { type = 'info', iconSize = 'sm', children, icon, removable = false, onRemove, className, ...restProps } = props;
+    const DefaultIcon = IconMap[type];
+    const iconNode = icon !== undefined ? (icon) : (jsxRuntime.jsx(DefaultIcon, { "data-testid": `banner-${type}-icon`, className: buildClassname.buildClassName('shrink-0', sizeMap[iconSize]) }));
+    return (jsxRuntime.jsxs("div", { ref: ref, className: buildClassname.buildClassName('text-sm rounded-md flex w-full p-3 items-center gap-3 ring-1 ring-inset', TypeClassMap[type], className), "data-testid": `banner-${type}`, ...restProps, children: [iconNode, jsxRuntime.jsx("div", { className: "flex items-center w-full justify-between", children: children }), removable && (jsxRuntime.jsx(Button.Button, { iconOnly: true, "aria-label": "Dismiss banner", size: "xs", variant: "plain", theme: "secondary", className: "hover:bg-black/10 dark:hover:bg-white/10 shrink-0", onClick: () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(), "data-testid": "banner-remove-btn", children: jsxRuntime.jsx(X.default, { className: "size-4.5", "data-testid": "banner-remove-icon" }) }))] }));
+});
+Banner.displayName = 'Banner';
+
+exports.Banner = Banner;
+//# sourceMappingURL=Banner.js.map

package/dist/cjs/components/Banner/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","sources":["../../../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import React, { forwardRef } from 'react'\nimport TriangleAlertIcon from '../Icons/TriangleAlert.svg'\nimport CircleXIcon from '../Icons/CircleX.svg'\nimport CircleCheckIcon from '../Icons/CircleCheck.svg'\nimport InfoIcon from '../Icons/Info.svg'\nimport XIcon from '../Icons/X.svg'\nimport { buildClassName } from '../../utils/build-classname'\nimport { Button } from '../Button'\nimport { BannerProps } from './Banner.types'\n\nconst sizeMap = {\n  xs: 'size-4',\n  sm: 'size-5',\n  md: 'size-6',\n  lg: 'size-8',\n  xl: 'size-10',\n}\n\nconst IconMap = {\n  info: InfoIcon,\n  error: CircleXIcon,\n  success: CircleCheckIcon,\n  warning: TriangleAlertIcon,\n}\n\nconst TypeClassMap = {\n  info: 'bg-[var(--ui-info-light)] ring-[var(--ui-info-ring-subtle)] text-[var(--ui-info-text)]',\n  error:\n    'bg-[var(--ui-danger-light)] ring-[var(--ui-danger-ring-subtle)] text-[var(--ui-danger-text)]',\n  success:\n    'bg-[var(--ui-success-light)] ring-[var(--ui-success-ring-subtle)] text-[var(--ui-success-text)]',\n  warning:\n    'bg-[var(--ui-warning-light)] ring-[var(--ui-warning-ring-subtle)] text-[var(--ui-warning-text)]',\n}\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>((props, ref) => {\n  const {\n    type = 'info',\n    iconSize = 'sm',\n    children,\n    icon,\n    removable = false,\n    onRemove,\n    className,\n    ...restProps\n  } = props\n\n  const DefaultIcon = IconMap[type]\n  const iconNode =\n    icon !== undefined ? (\n      icon\n    ) : (\n      <DefaultIcon\n        data-testid={`banner-${type}-icon`}\n        className={buildClassName('shrink-0', sizeMap[iconSize])}\n      />\n    )\n\n  return (\n    <div\n      ref={ref}\n      className={buildClassName(\n        'text-sm rounded-md flex w-full p-3 items-center gap-3 ring-1 ring-inset',\n        TypeClassMap[type],\n        className,\n      )}\n      data-testid={`banner-${type}`}\n      {...restProps}\n    >\n      {iconNode}\n      <div className=\"flex items-center w-full justify-between\">{children}</div>\n      {removable && (\n        <Button\n          iconOnly\n          aria-label=\"Dismiss banner\"\n          size=\"xs\"\n          variant=\"plain\"\n          theme=\"secondary\"\n          className=\"hover:bg-black/10 dark:hover:bg-white/10 shrink-0\"\n          onClick={() => onRemove?.()}\n          data-testid=\"banner-remove-btn\"\n        >\n          <XIcon className=\"size-4.5\" data-testid=\"banner-remove-icon\" />\n        </Button>\n      )}\n    </div>\n  )\n})\n\nBanner.displayName = 'Banner'\n"],"names":["InfoIcon","CircleXIcon","CircleCheckIcon","TriangleAlertIcon","forwardRef","_jsx","buildClassName","_jsxs","Button","XIcon"],"mappings":";;;;;;;;;;;;AAUA,MAAM,OAAO,GAAG;AACd,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,QAAQ;AACZ,IAAA,EAAE,EAAE,SAAS;CACd;AAED,MAAM,OAAO,GAAG;AACd,IAAA,IAAI,EAAEA,YAAQ;AACd,IAAA,KAAK,EAAEC,eAAW;AAClB,IAAA,OAAO,EAAEC,mBAAe;AACxB,IAAA,OAAO,EAAEC,qBAAiB;CAC3B;AAED,MAAM,YAAY,GAAG;AACnB,IAAA,IAAI,EAAE,wFAAwF;AAC9F,IAAA,KAAK,EACH,8FAA8F;AAChG,IAAA,OAAO,EACL,iGAAiG;AACnG,IAAA,OAAO,EACL,iGAAiG;CACpG;AAEM,MAAM,MAAM,GAAGC,gBAAU,CAA8B,CAAC,KAAK,EAAE,GAAG,KAAI;IAC3E,MAAM,EACJ,IAAI,GAAG,MAAM,EACb,QAAQ,GAAG,IAAI,EACf,QAAQ,EACR,IAAI,EACJ,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,SAAS,EACT,GAAG,SAAS,EACb,GAAG,KAAK;AAET,IAAA,MAAM,WAAW,GAAG,OAAO,CAAC,IAAI,CAAC;AACjC,IAAA,MAAM,QAAQ,GACZ,IAAI,KAAK,SAAS,IAChB,IAAI,KAEJC,cAAA,CAAC,WAAW,EAAA,EAAA,aAAA,EACG,CAAA,OAAA,EAAU,IAAI,CAAA,KAAA,CAAO,EAClC,SAAS,EAAEC,6BAAc,CAAC,UAAU,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC,EAAA,CACxD,CACH;AAEH,IAAA,QACEC,eAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAED,6BAAc,CACvB,yEAAyE,EACzE,YAAY,CAAC,IAAI,CAAC,EAClB,SAAS,CACV,EAAA,aAAA,EACY,CAAA,OAAA,EAAU,IAAI,CAAA,CAAE,KACzB,SAAS,EAAA,QAAA,EAAA,CAEZ,QAAQ,EACTD,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0CAA0C,YAAE,QAAQ,EAAA,CAAO,EACzE,SAAS,KACRA,cAAA,CAACG,aAAM,IACL,QAAQ,EAAA,IAAA,EAAA,YAAA,EACG,gBAAgB,EAC3B,IAAI,EAAC,IAAI,EACT,OAAO,EAAC,OAAO,EACf,KAAK,EAAC,WAAW,EACjB,SAAS,EAAC,mDAAmD,EAC7D,OAAO,EAAE,MAAM,QAAQ,KAAA,IAAA,IAAR,QAAQ,uBAAR,QAAQ,EAAI,iBACf,mBAAmB,EAAA,QAAA,EAE/BH,eAACI,SAAK,EAAA,EAAC,SAAS,EAAC,UAAU,iBAAa,oBAAoB,EAAA,CAAG,GACxD,CACV,CAAA,EAAA,CACG;AAEV,CAAC;AAED,MAAM,CAAC,WAAW,GAAG,QAAQ;;;;"}

package/dist/cjs/components/BodyText/BodyText.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var React = require('react');
+var buildClassname = require('../../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 = React.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.createElement(as, {
+        ref,
+        className: buildClassname.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';
+
+exports.BodyText = BodyText;
+//# sourceMappingURL=BodyText.js.map

package/dist/cjs/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":["forwardRef","buildClassName"],"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,GAAGA,gBAAU,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,OAAO,KAAK,CAAC,aAAa,CAAC,EAAE,EAAE;QAC7B,GAAG;QACH,SAAS,EAAEC,6BAAc,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/cjs/components/BottomNavigation/BottomNavigation.js

@@ -0,0 +1,52 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var buildClassname = require('../../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 (jsxRuntime.jsx("nav", { "aria-label": "Bottom Navigation", className: buildClassname.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 (jsxRuntime.jsxs("button", { type: "button", disabled: item.disabled, onClick: () => handleTabClick(item), className: buildClassname.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 && (jsxRuntime.jsx("span", { className: buildClassname.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') })), jsxRuntime.jsxs("div", { className: buildClassname.buildClassName('relative inline-flex items-center justify-center transition-all duration-200', activeIndicatorStyle === 'pill'
+                            ? buildClassname.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: [jsxRuntime.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 && (jsxRuntime.jsx("span", { className: buildClassname.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 && (jsxRuntime.jsx("span", { className: buildClassname.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 && (jsxRuntime.jsx("span", { className: buildClassname.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';
+
+exports.BottomNavigation = BottomNavigation;
+//# sourceMappingURL=BottomNavigation.js.map

package/dist/cjs/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","buildClassName","_jsxs"],"mappings":"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"}

package/dist/cjs/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,63 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var buildClassname = require('../../utils/build-classname.js');
+var Slash = require('../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 (jsxRuntime.jsx(Slash.default, { "data-testid": testId, className: buildClassname.buildClassName(SIZE_ICON_CLASS[size] || 'size-3.5', 'text-gray-400 dark:text-gray-500 shrink-0 select-none', className) }));
+    }
+    if (separator === 'chevron') {
+        return (jsxRuntime.jsx("svg", { "data-testid": testId, className: buildClassname.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: jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) }));
+    }
+    if (separator === 'dot') {
+        return (jsxRuntime.jsx("span", { "data-testid": testId, className: buildClassname.buildClassName('size-1 rounded-full bg-gray-400 dark:bg-gray-500 shrink-0 select-none mx-0.5', className) }));
+    }
+    return (jsxRuntime.jsx("span", { "data-testid": testId, className: buildClassname.buildClassName('shrink-0 select-none', className), children: separator }));
+}
+const Breadcrumb = React.forwardRef((props, ref) => {
+    const { items = [], render, separator = 'slash', size = 'md', maxItems, className, itemClass, activeItemClass, separatorClass, ...navProps } = props;
+    const [expanded, setExpanded] = React.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 (jsxRuntime.jsx("nav", { ref: ref, "aria-label": "Breadcrumb", "data-testid": "breadcrumb-container", className: buildClassname.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 (jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2 relative group/ellipsis", children: [jsxRuntime.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" }), jsxRuntime.jsx(RenderSeparator, { separator: separator, size: size, index: index, className: separatorClass })] }, "breadcrumb-collapsed"));
+                }
+                return null;
+            }
+            const defaultContent = isLast ? (jsxRuntime.jsx("span", { className: buildClassname.buildClassName('text-gray-900 dark:text-white font-semibold', activeItemClass, item.className), children: item.text })) : item.to ? (jsxRuntime.jsx("a", { href: item.to, className: buildClassname.buildClassName('hover:text-blue-600 dark:hover:text-blue-400 transition-colors', itemClass, item.className), children: item.text })) : (jsxRuntime.jsx("span", { className: buildClassname.buildClassName(itemClass, item.className), children: item.text }));
+            return (jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", "data-testid": `breadcrumb-item-${item.key}`, children: [jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5", ...(isLast ? { 'aria-current': 'page' } : {}), children: [item.icon && jsxRuntime.jsx("span", { className: "shrink-0 text-gray-400", children: item.icon }), isLast ? (defaultContent) : render ? (jsxRuntime.jsx("span", { className: buildClassname.buildClassName(itemClass, item.className), children: render(item) })) : (defaultContent)] }), !isLast && (jsxRuntime.jsx(RenderSeparator, { separator: separator, size: size, index: index, className: separatorClass }))] }, item.key));
+        }) }));
+});
+Breadcrumb.displayName = 'Breadcrumb';
+
+exports.Breadcrumb = Breadcrumb;
+//# sourceMappingURL=Breadcrumb.js.map

package/dist/cjs/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","buildClassName","forwardRef","useState","_jsxs"],"mappings":"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"}