@pk-design/react-tailwind 1.7.0 → 1.7.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/cjs/components/Dropdown/Dropdown.js +2 -2
  2. package/dist/cjs/components/Dropdown/Dropdown.js.map +1 -1
  3. package/dist/es/components/Dropdown/Dropdown.js +2 -2
  4. package/dist/es/components/Dropdown/Dropdown.js.map +1 -1
  5. package/dist/react-tailwind.cjs.js +2 -2
  6. package/dist/react-tailwind.cjs.js.map +1 -1
  7. package/dist/react-tailwind.es.js +2 -2
  8. package/dist/react-tailwind.es.js.map +1 -1
  9. package/package.json +1 -1
package/dist/cjs/components/Dropdown/Dropdown.js CHANGED
@@ -30,7 +30,7 @@ const Dropdown = ({ triggerButton, renderTriggerButton, className, items, render
30
30
  variant: (_b = triggerButton.props.variant) !== null && _b !== void 0 ? _b : variant,
31
31
  size: (_c = triggerButton.props.size) !== null && _c !== void 0 ? _c : size,
32
32
  disabled: (_d = triggerButton.props.disabled) !== null && _d !== void 0 ? _d : disabled,
33
- }) })) : (jsxRuntime.jsx(react.MenuButton, { as: React.Fragment, children: triggerButton })), jsxRuntime.jsx(react.MenuItems, { transition: transition, anchor: anchor, className: buildClassname.buildClassName('origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50', 'border border-[var(--ui-border)] bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200', 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0', '[--anchor-gap:--spacing(1)]', widthClass, itemsContainerClass), "data-testid": "dropdown-items", as: "ul", children: items.map((item, idx) => (jsxRuntime.jsxs(React.Fragment, { children: [item.groupTitle && (jsxRuntime.jsx("li", { className: "px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none", "data-testid": `dropdown-group-${item.id}`, children: item.groupTitle }, `group-${item.id}`)), jsxRuntime.jsx(react.MenuItem, { as: "li", disabled: item.disabled, children: ({ disabled, active }) => (jsxRuntime.jsx("div", { onClick: () => {
33
+ }) })) : (jsxRuntime.jsx(react.MenuButton, { as: React.Fragment, children: triggerButton })), jsxRuntime.jsx(react.MenuItems, { transition: transition, anchor: anchor, className: buildClassname.buildClassName('origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50', 'border border-[var(--ui-border)] bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200', 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0', '[--anchor-gap:--spacing(1)]', widthClass, itemsContainerClass), "data-testid": "dropdown-items", as: "ul", children: items.map((item, idx) => (jsxRuntime.jsxs(React.Fragment, { children: [item.groupTitle && (jsxRuntime.jsx("li", { className: "px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none", "data-testid": `dropdown-group-${item.id}`, children: item.groupTitle }, `group-${item.id}`)), !item.divider && (jsxRuntime.jsx(react.MenuItem, { as: "li", disabled: item.disabled, children: ({ disabled, active }) => (jsxRuntime.jsx("div", { onClick: () => {
34
34
  var _a;
35
35
  if (!disabled) {
36
36
  (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
@@ -42,7 +42,7 @@ const Dropdown = ({ triggerButton, renderTriggerButton, className, items, render
42
42
  : 'hover:bg-rose-50 dark:hover:bg-rose-950/40')
43
43
  : buildClassname.buildClassName('text-gray-700 dark:text-gray-200', active
44
44
  ? 'bg-gray-100 dark:bg-gray-700/80'
45
- : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80'), disabled && 'opacity-40 cursor-not-allowed pointer-events-none', menuItemClass), "data-testid": `dropdown-item-${item.id}`, children: renderItem ? (renderItem(item)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [item.icon && (jsxRuntime.jsx("span", { className: buildClassname.buildClassName('shrink-0', item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500'), children: item.icon })), jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [item.label && jsxRuntime.jsx("span", { className: "font-medium truncate", children: item.label }), item.description && (jsxRuntime.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500 font-normal truncate", children: item.description }))] })] }), item.shortcut && (jsxRuntime.jsx("kbd", { className: "shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-[var(--ui-border-muted)] text-gray-400 dark:text-gray-400", children: item.shortcut }))] })) })) }), item.divider && idx < items.length - 1 && (jsxRuntime.jsx("li", { className: "my-1 h-px bg-gray-200/80 dark:bg-gray-700/80", "data-testid": "dropdown-divider" }, `divider-${item.id}`))] }, item.id))) })] }));
45
+ : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80'), disabled && 'opacity-40 cursor-not-allowed pointer-events-none', menuItemClass), "data-testid": `dropdown-item-${item.id}`, children: renderItem ? (renderItem(item)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [item.icon && (jsxRuntime.jsx("span", { className: buildClassname.buildClassName('shrink-0', item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500'), children: item.icon })), jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [item.label && (jsxRuntime.jsx("span", { className: "font-medium truncate", children: item.label })), item.description && (jsxRuntime.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500 font-normal truncate", children: item.description }))] })] }), item.shortcut && (jsxRuntime.jsx("kbd", { className: "shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-[var(--ui-border-muted)] text-gray-400 dark:text-gray-400", children: item.shortcut }))] })) })) })), item.divider && idx < items.length - 1 && (jsxRuntime.jsx("li", { className: "my-1 h-px bg-gray-200/80 dark:bg-gray-700/80", "data-testid": "dropdown-divider" }, `divider-${item.id}`))] }, item.id))) })] }));
46
46
  };
47
47
  Dropdown.displayName = 'Dropdown';
48
48
 
package/dist/cjs/components/Dropdown/Dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.js","sources":["../../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Fragment, cloneElement, isValidElement } from 'react'\nimport { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { DropdownItem, DropdownProps } from './Dropdown.types'\n\nconst WIDTH_CLASS: Record<string, string> = {\n auto: 'w-auto min-w-[120px]',\n sm: 'w-44',\n md: 'w-56',\n lg: 'w-64',\n xl: 'w-72',\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n triggerButton,\n renderTriggerButton,\n className,\n items,\n renderItem,\n itemsContainerClass,\n transition = true,\n anchor = 'bottom start',\n width = 'md',\n menuItemClass,\n onMenuClick,\n ...restProps\n}: DropdownProps & Record<string, any>) => {\n const widthClass = WIDTH_CLASS[width] || width || WIDTH_CLASS.md\n const { theme, variant, size, disabled } = restProps\n\n return (\n <Menu as=\"div\" className=\"relative inline-block\">\n {/* Trigger */}\n {renderTriggerButton ? (\n <MenuButton as={Fragment}>\n {(state) => {\n const rendered = renderTriggerButton(state)\n if (isValidElement(rendered) && className) {\n return cloneElement(rendered as React.ReactElement<any>, {\n className: buildClassName((rendered.props as any).className, className),\n })\n }\n return rendered as React.ReactElement\n }}\n </MenuButton>\n ) : isValidElement(triggerButton) ? (\n <MenuButton as={Fragment}>\n {cloneElement(triggerButton as React.ReactElement<any>, {\n className: buildClassName((triggerButton.props as any).className, className),\n theme: (triggerButton.props as any).theme ?? theme,\n variant: (triggerButton.props as any).variant ?? variant,\n size: (triggerButton.props as any).size ?? size,\n disabled: (triggerButton.props as any).disabled ?? disabled,\n })}\n </MenuButton>\n ) : (\n <MenuButton as={Fragment}>{triggerButton}</MenuButton>\n )}\n\n {/* Dropdown Panel */}\n <MenuItems\n transition={transition}\n anchor={anchor}\n className={buildClassName(\n 'origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50',\n 'border border-[var(--ui-border)] bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200',\n 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0',\n '[--anchor-gap:--spacing(1)]',\n widthClass,\n itemsContainerClass,\n )}\n data-testid=\"dropdown-items\"\n as=\"ul\"\n >\n {items.map((item: DropdownItem, idx: number) => (\n <Fragment key={item.id}>\n {item.groupTitle && (\n <li\n key={`group-${item.id}`}\n className=\"px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none\"\n data-testid={`dropdown-group-${item.id}`}\n >\n {item.groupTitle}\n </li>\n )}\n <MenuItem as=\"li\" disabled={item.disabled}>\n {({ disabled, active }) => (\n <div\n onClick={() => {\n if (!disabled) {\n item.onClick?.(item)\n onMenuClick?.(item, idx)\n }\n }}\n className={buildClassName(\n 'flex items-center justify-between gap-3 w-full px-2.5 py-1.5 rounded-lg text-sm transition-colors cursor-pointer select-none',\n item.danger\n ? buildClassName(\n 'text-rose-600 dark:text-rose-400',\n active\n ? 'bg-rose-50 dark:bg-rose-950/40'\n : 'hover:bg-rose-50 dark:hover:bg-rose-950/40',\n )\n : buildClassName(\n 'text-gray-700 dark:text-gray-200',\n active\n ? 'bg-gray-100 dark:bg-gray-700/80'\n : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80',\n ),\n disabled && 'opacity-40 cursor-not-allowed pointer-events-none',\n menuItemClass,\n )}\n data-testid={`dropdown-item-${item.id}`}\n >\n {renderItem ? (\n renderItem(item)\n ) : (\n <>\n <div className=\"flex items-center gap-2.5 min-w-0 flex-1\">\n {item.icon && (\n <span\n className={buildClassName(\n 'shrink-0',\n item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500',\n )}\n >\n {item.icon}\n </span>\n )}\n <div className=\"flex flex-col min-w-0\">\n {item.label && <span className=\"font-medium truncate\">{item.label}</span>}\n {item.description && (\n <span className=\"text-xs text-gray-400 dark:text-gray-500 font-normal truncate\">\n {item.description}\n </span>\n )}\n </div>\n </div>\n {item.shortcut && (\n <kbd className=\"shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-[var(--ui-border-muted)] text-gray-400 dark:text-gray-400\">\n {item.shortcut}\n </kbd>\n )}\n </>\n )}\n </div>\n )}\n </MenuItem>\n {item.divider && idx < items.length - 1 && (\n <li\n key={`divider-${item.id}`}\n className=\"my-1 h-px bg-gray-200/80 dark:bg-gray-700/80\"\n data-testid=\"dropdown-divider\"\n />\n )}\n </Fragment>\n ))}\n </MenuItems>\n </Menu>\n )\n}\n\nDropdown.displayName = 'Dropdown'\n"],"names":["_jsxs","Menu","_jsx","MenuButton","Fragment","isValidElement","cloneElement","buildClassName","MenuItems","MenuItem","_Fragment"],"mappings":"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"}
1
+ {"version":3,"file":"Dropdown.js","sources":["../../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Fragment, cloneElement, isValidElement } from 'react'\nimport { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { DropdownItem, DropdownProps } from './Dropdown.types'\n\nconst WIDTH_CLASS: Record<string, string> = {\n auto: 'w-auto min-w-[120px]',\n sm: 'w-44',\n md: 'w-56',\n lg: 'w-64',\n xl: 'w-72',\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n triggerButton,\n renderTriggerButton,\n className,\n items,\n renderItem,\n itemsContainerClass,\n transition = true,\n anchor = 'bottom start',\n width = 'md',\n menuItemClass,\n onMenuClick,\n ...restProps\n}: DropdownProps & Record<string, any>) => {\n const widthClass = WIDTH_CLASS[width] || width || WIDTH_CLASS.md\n const { theme, variant, size, disabled } = restProps\n\n return (\n <Menu as=\"div\" className=\"relative inline-block\">\n {/* Trigger */}\n {renderTriggerButton ? (\n <MenuButton as={Fragment}>\n {(state) => {\n const rendered = renderTriggerButton(state)\n if (isValidElement(rendered) && className) {\n return cloneElement(rendered as React.ReactElement<any>, {\n className: buildClassName((rendered.props as any).className, className),\n })\n }\n return rendered as React.ReactElement\n }}\n </MenuButton>\n ) : isValidElement(triggerButton) ? (\n <MenuButton as={Fragment}>\n {cloneElement(triggerButton as React.ReactElement<any>, {\n className: buildClassName((triggerButton.props as any).className, className),\n theme: (triggerButton.props as any).theme ?? theme,\n variant: (triggerButton.props as any).variant ?? variant,\n size: (triggerButton.props as any).size ?? size,\n disabled: (triggerButton.props as any).disabled ?? disabled,\n })}\n </MenuButton>\n ) : (\n <MenuButton as={Fragment}>{triggerButton}</MenuButton>\n )}\n\n {/* Dropdown Panel */}\n <MenuItems\n transition={transition}\n anchor={anchor}\n className={buildClassName(\n 'origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50',\n 'border border-[var(--ui-border)] bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200',\n 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0',\n '[--anchor-gap:--spacing(1)]',\n widthClass,\n itemsContainerClass,\n )}\n data-testid=\"dropdown-items\"\n as=\"ul\"\n >\n {items.map((item: DropdownItem, idx: number) => (\n <Fragment key={item.id}>\n {item.groupTitle && (\n <li\n key={`group-${item.id}`}\n className=\"px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none\"\n data-testid={`dropdown-group-${item.id}`}\n >\n {item.groupTitle}\n </li>\n )}\n {!item.divider && (\n <MenuItem as=\"li\" disabled={item.disabled}>\n {({ disabled, active }) => (\n <div\n onClick={() => {\n if (!disabled) {\n item.onClick?.(item)\n onMenuClick?.(item, idx)\n }\n }}\n className={buildClassName(\n 'flex items-center justify-between gap-3 w-full px-2.5 py-1.5 rounded-lg text-sm transition-colors cursor-pointer select-none',\n item.danger\n ? buildClassName(\n 'text-rose-600 dark:text-rose-400',\n active\n ? 'bg-rose-50 dark:bg-rose-950/40'\n : 'hover:bg-rose-50 dark:hover:bg-rose-950/40',\n )\n : buildClassName(\n 'text-gray-700 dark:text-gray-200',\n active\n ? 'bg-gray-100 dark:bg-gray-700/80'\n : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80',\n ),\n disabled && 'opacity-40 cursor-not-allowed pointer-events-none',\n menuItemClass,\n )}\n data-testid={`dropdown-item-${item.id}`}\n >\n {renderItem ? (\n renderItem(item)\n ) : (\n <>\n <div className=\"flex items-center gap-2.5 min-w-0 flex-1\">\n {item.icon && (\n <span\n className={buildClassName(\n 'shrink-0',\n item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500',\n )}\n >\n {item.icon}\n </span>\n )}\n <div className=\"flex flex-col min-w-0\">\n {item.label && (\n <span className=\"font-medium truncate\">{item.label}</span>\n )}\n {item.description && (\n <span className=\"text-xs text-gray-400 dark:text-gray-500 font-normal truncate\">\n {item.description}\n </span>\n )}\n </div>\n </div>\n {item.shortcut && (\n <kbd className=\"shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-[var(--ui-border-muted)] text-gray-400 dark:text-gray-400\">\n {item.shortcut}\n </kbd>\n )}\n </>\n )}\n </div>\n )}\n </MenuItem>\n )}\n {item.divider && idx < items.length - 1 && (\n <li\n key={`divider-${item.id}`}\n className=\"my-1 h-px bg-gray-200/80 dark:bg-gray-700/80\"\n data-testid=\"dropdown-divider\"\n />\n )}\n </Fragment>\n ))}\n </MenuItems>\n </Menu>\n )\n}\n\nDropdown.displayName = 'Dropdown'\n"],"names":["_jsxs","Menu","_jsx","MenuButton","Fragment","isValidElement","cloneElement","buildClassName","MenuItems","MenuItem"],"mappings":"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"}
package/dist/es/components/Dropdown/Dropdown.js CHANGED
@@ -28,7 +28,7 @@ const Dropdown = ({ triggerButton, renderTriggerButton, className, items, render
28
28
  variant: (_b = triggerButton.props.variant) !== null && _b !== void 0 ? _b : variant,
29
29
  size: (_c = triggerButton.props.size) !== null && _c !== void 0 ? _c : size,
30
30
  disabled: (_d = triggerButton.props.disabled) !== null && _d !== void 0 ? _d : disabled,
31
- }) })) : (jsx(MenuButton, { as: Fragment, children: triggerButton })), jsx(MenuItems, { transition: transition, anchor: anchor, className: buildClassName('origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50', 'border border-[var(--ui-border)] bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200', 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0', '[--anchor-gap:--spacing(1)]', widthClass, itemsContainerClass), "data-testid": "dropdown-items", as: "ul", children: items.map((item, idx) => (jsxs(Fragment, { children: [item.groupTitle && (jsx("li", { className: "px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none", "data-testid": `dropdown-group-${item.id}`, children: item.groupTitle }, `group-${item.id}`)), jsx(MenuItem, { as: "li", disabled: item.disabled, children: ({ disabled, active }) => (jsx("div", { onClick: () => {
31
+ }) })) : (jsx(MenuButton, { as: Fragment, children: triggerButton })), jsx(MenuItems, { transition: transition, anchor: anchor, className: buildClassName('origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50', 'border border-[var(--ui-border)] bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200', 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0', '[--anchor-gap:--spacing(1)]', widthClass, itemsContainerClass), "data-testid": "dropdown-items", as: "ul", children: items.map((item, idx) => (jsxs(Fragment, { children: [item.groupTitle && (jsx("li", { className: "px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none", "data-testid": `dropdown-group-${item.id}`, children: item.groupTitle }, `group-${item.id}`)), !item.divider && (jsx(MenuItem, { as: "li", disabled: item.disabled, children: ({ disabled, active }) => (jsx("div", { onClick: () => {
32
32
  var _a;
33
33
  if (!disabled) {
34
34
  (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
@@ -40,7 +40,7 @@ const Dropdown = ({ triggerButton, renderTriggerButton, className, items, render
40
40
  : 'hover:bg-rose-50 dark:hover:bg-rose-950/40')
41
41
  : buildClassName('text-gray-700 dark:text-gray-200', active
42
42
  ? 'bg-gray-100 dark:bg-gray-700/80'
43
- : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80'), disabled && 'opacity-40 cursor-not-allowed pointer-events-none', menuItemClass), "data-testid": `dropdown-item-${item.id}`, children: renderItem ? (renderItem(item)) : (jsxs(Fragment$1, { children: [jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [item.icon && (jsx("span", { className: buildClassName('shrink-0', item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500'), children: item.icon })), jsxs("div", { className: "flex flex-col min-w-0", children: [item.label && jsx("span", { className: "font-medium truncate", children: item.label }), item.description && (jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500 font-normal truncate", children: item.description }))] })] }), item.shortcut && (jsx("kbd", { className: "shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-[var(--ui-border-muted)] text-gray-400 dark:text-gray-400", children: item.shortcut }))] })) })) }), item.divider && idx < items.length - 1 && (jsx("li", { className: "my-1 h-px bg-gray-200/80 dark:bg-gray-700/80", "data-testid": "dropdown-divider" }, `divider-${item.id}`))] }, item.id))) })] }));
43
+ : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80'), disabled && 'opacity-40 cursor-not-allowed pointer-events-none', menuItemClass), "data-testid": `dropdown-item-${item.id}`, children: renderItem ? (renderItem(item)) : (jsxs(Fragment$1, { children: [jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [item.icon && (jsx("span", { className: buildClassName('shrink-0', item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500'), children: item.icon })), jsxs("div", { className: "flex flex-col min-w-0", children: [item.label && (jsx("span", { className: "font-medium truncate", children: item.label })), item.description && (jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500 font-normal truncate", children: item.description }))] })] }), item.shortcut && (jsx("kbd", { className: "shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-[var(--ui-border-muted)] text-gray-400 dark:text-gray-400", children: item.shortcut }))] })) })) })), item.divider && idx < items.length - 1 && (jsx("li", { className: "my-1 h-px bg-gray-200/80 dark:bg-gray-700/80", "data-testid": "dropdown-divider" }, `divider-${item.id}`))] }, item.id))) })] }));
44
44
  };
45
45
  Dropdown.displayName = 'Dropdown';
46
46
 
package/dist/es/components/Dropdown/Dropdown.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Dropdown.js","sources":["../../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Fragment, cloneElement, isValidElement } from 'react'\nimport { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { DropdownItem, DropdownProps } from './Dropdown.types'\n\nconst WIDTH_CLASS: Record<string, string> = {\n auto: 'w-auto min-w-[120px]',\n sm: 'w-44',\n md: 'w-56',\n lg: 'w-64',\n xl: 'w-72',\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n triggerButton,\n renderTriggerButton,\n className,\n items,\n renderItem,\n itemsContainerClass,\n transition = true,\n anchor = 'bottom start',\n width = 'md',\n menuItemClass,\n onMenuClick,\n ...restProps\n}: DropdownProps & Record<string, any>) => {\n const widthClass = WIDTH_CLASS[width] || width || WIDTH_CLASS.md\n const { theme, variant, size, disabled } = restProps\n\n return (\n <Menu as=\"div\" className=\"relative inline-block\">\n {/* Trigger */}\n {renderTriggerButton ? (\n <MenuButton as={Fragment}>\n {(state) => {\n const rendered = renderTriggerButton(state)\n if (isValidElement(rendered) && className) {\n return cloneElement(rendered as React.ReactElement<any>, {\n className: buildClassName((rendered.props as any).className, className),\n })\n }\n return rendered as React.ReactElement\n }}\n </MenuButton>\n ) : isValidElement(triggerButton) ? (\n <MenuButton as={Fragment}>\n {cloneElement(triggerButton as React.ReactElement<any>, {\n className: buildClassName((triggerButton.props as any).className, className),\n theme: (triggerButton.props as any).theme ?? theme,\n variant: (triggerButton.props as any).variant ?? variant,\n size: (triggerButton.props as any).size ?? size,\n disabled: (triggerButton.props as any).disabled ?? disabled,\n })}\n </MenuButton>\n ) : (\n <MenuButton as={Fragment}>{triggerButton}</MenuButton>\n )}\n\n {/* Dropdown Panel */}\n <MenuItems\n transition={transition}\n anchor={anchor}\n className={buildClassName(\n 'origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50',\n 'border border-[var(--ui-border)] bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200',\n 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0',\n '[--anchor-gap:--spacing(1)]',\n widthClass,\n itemsContainerClass,\n )}\n data-testid=\"dropdown-items\"\n as=\"ul\"\n >\n {items.map((item: DropdownItem, idx: number) => (\n <Fragment key={item.id}>\n {item.groupTitle && (\n <li\n key={`group-${item.id}`}\n className=\"px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none\"\n data-testid={`dropdown-group-${item.id}`}\n >\n {item.groupTitle}\n </li>\n )}\n <MenuItem as=\"li\" disabled={item.disabled}>\n {({ disabled, active }) => (\n <div\n onClick={() => {\n if (!disabled) {\n item.onClick?.(item)\n onMenuClick?.(item, idx)\n }\n }}\n className={buildClassName(\n 'flex items-center justify-between gap-3 w-full px-2.5 py-1.5 rounded-lg text-sm transition-colors cursor-pointer select-none',\n item.danger\n ? buildClassName(\n 'text-rose-600 dark:text-rose-400',\n active\n ? 'bg-rose-50 dark:bg-rose-950/40'\n : 'hover:bg-rose-50 dark:hover:bg-rose-950/40',\n )\n : buildClassName(\n 'text-gray-700 dark:text-gray-200',\n active\n ? 'bg-gray-100 dark:bg-gray-700/80'\n : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80',\n ),\n disabled && 'opacity-40 cursor-not-allowed pointer-events-none',\n menuItemClass,\n )}\n data-testid={`dropdown-item-${item.id}`}\n >\n {renderItem ? (\n renderItem(item)\n ) : (\n <>\n <div className=\"flex items-center gap-2.5 min-w-0 flex-1\">\n {item.icon && (\n <span\n className={buildClassName(\n 'shrink-0',\n item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500',\n )}\n >\n {item.icon}\n </span>\n )}\n <div className=\"flex flex-col min-w-0\">\n {item.label && <span className=\"font-medium truncate\">{item.label}</span>}\n {item.description && (\n <span className=\"text-xs text-gray-400 dark:text-gray-500 font-normal truncate\">\n {item.description}\n </span>\n )}\n </div>\n </div>\n {item.shortcut && (\n <kbd className=\"shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-[var(--ui-border-muted)] text-gray-400 dark:text-gray-400\">\n {item.shortcut}\n </kbd>\n )}\n </>\n )}\n </div>\n )}\n </MenuItem>\n {item.divider && idx < items.length - 1 && (\n <li\n key={`divider-${item.id}`}\n className=\"my-1 h-px bg-gray-200/80 dark:bg-gray-700/80\"\n data-testid=\"dropdown-divider\"\n />\n )}\n </Fragment>\n ))}\n </MenuItems>\n </Menu>\n )\n}\n\nDropdown.displayName = 'Dropdown'\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":";;;;;AAKA,MAAM,WAAW,GAA2B;AAC1C,IAAA,IAAI,EAAE,sBAAsB;AAC5B,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;AACV,IAAA,EAAE,EAAE,MAAM;CACX;AAEM,MAAM,QAAQ,GAA4B,CAAC,EAChD,aAAa,EACb,mBAAmB,EACnB,SAAS,EACT,KAAK,EACL,UAAU,EACV,mBAAmB,EACnB,UAAU,GAAG,IAAI,EACjB,MAAM,GAAG,cAAc,EACvB,KAAK,GAAG,IAAI,EACZ,aAAa,EACb,WAAW,EACX,GAAG,SAAS,EACwB,KAAI;;AACxC,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,IAAI,KAAK,IAAI,WAAW,CAAC,EAAE;IAChE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,SAAS;IAEpD,QACEA,IAAA,CAAC,IAAI,EAAA,EAAC,EAAE,EAAC,KAAK,EAAC,SAAS,EAAC,uBAAuB,EAAA,QAAA,EAAA,CAE7C,mBAAmB,IAClBC,GAAA,CAAC,UAAU,EAAA,EAAC,EAAE,EAAE,QAAQ,EAAA,QAAA,EACrB,CAAC,KAAK,KAAI;AACT,oBAAA,MAAM,QAAQ,GAAG,mBAAmB,CAAC,KAAK,CAAC;AAC3C,oBAAA,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,SAAS,EAAE;wBACzC,OAAO,YAAY,CAAC,QAAmC,EAAE;4BACvD,SAAS,EAAE,cAAc,CAAE,QAAQ,CAAC,KAAa,CAAC,SAAS,EAAE,SAAS,CAAC;AACxE,yBAAA,CAAC;oBACJ;AACA,oBAAA,OAAO,QAA8B;gBACvC,CAAC,EAAA,CACU,IACX,cAAc,CAAC,aAAa,CAAC,IAC/BA,GAAA,CAAC,UAAU,EAAA,EAAC,EAAE,EAAE,QAAQ,EAAA,QAAA,EACrB,YAAY,CAAC,aAAwC,EAAE;oBACtD,SAAS,EAAE,cAAc,CAAE,aAAa,CAAC,KAAa,CAAC,SAAS,EAAE,SAAS,CAAC;oBAC5E,KAAK,EAAE,MAAC,aAAa,CAAC,KAAa,CAAC,KAAK,mCAAI,KAAK;oBAClD,OAAO,EAAE,MAAC,aAAa,CAAC,KAAa,CAAC,OAAO,mCAAI,OAAO;oBACxD,IAAI,EAAE,MAAC,aAAa,CAAC,KAAa,CAAC,IAAI,mCAAI,IAAI;oBAC/C,QAAQ,EAAE,MAAC,aAAa,CAAC,KAAa,CAAC,QAAQ,mCAAI,QAAQ;iBAC5D,CAAC,EAAA,CACS,KAEbA,GAAA,CAAC,UAAU,EAAA,EAAC,EAAE,EAAE,QAAQ,EAAA,QAAA,EAAG,aAAa,EAAA,CAAc,CACvD,EAGDA,GAAA,CAAC,SAAS,EAAA,EACR,UAAU,EAAE,UAAU,EACtB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,cAAc,CACvB,2FAA2F,EAC3F,6FAA6F,EAC7F,mEAAmE,EACnE,6BAA6B,EAC7B,UAAU,EACV,mBAAmB,CACpB,EAAA,aAAA,EACW,gBAAgB,EAC5B,EAAE,EAAC,IAAI,EAAA,QAAA,EAEN,KAAK,CAAC,GAAG,CAAC,CAAC,IAAkB,EAAE,GAAW,MACzCD,IAAA,CAAC,QAAQ,EAAA,EAAA,QAAA,EAAA,CACN,IAAI,CAAC,UAAU,KACdC,GAAA,CAAA,IAAA,EAAA,EAEE,SAAS,EAAC,kHAAkH,EAAA,aAAA,EAC/G,CAAA,eAAA,EAAkB,IAAI,CAAC,EAAE,CAAA,CAAE,EAAA,QAAA,EAEvC,IAAI,CAAC,UAAU,EAAA,EAJX,CAAA,MAAA,EAAS,IAAI,CAAC,EAAE,CAAA,CAAE,CAKpB,CACN,EACDA,GAAA,CAAC,QAAQ,EAAA,EAAC,EAAE,EAAC,IAAI,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAA,QAAA,EACtC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,MACpBA,GAAA,CAAA,KAAA,EAAA,EACE,OAAO,EAAE,MAAK;;oCACZ,IAAI,CAAC,QAAQ,EAAE;AACb,wCAAA,CAAA,EAAA,GAAA,IAAI,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,IAAA,CAAA,IAAA,EAAG,IAAI,CAAC;wCACpB,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAG,IAAI,EAAE,GAAG,CAAC;oCAC1B;gCACF,CAAC,EACD,SAAS,EAAE,cAAc,CACvB,8HAA8H,EAC9H,IAAI,CAAC;AACH,sCAAE,cAAc,CACZ,kCAAkC,EAClC;AACE,0CAAE;0CACA,4CAA4C;AAEpD,sCAAE,cAAc,CACZ,kCAAkC,EAClC;AACE,0CAAE;AACF,0CAAE,gDAAgD,CACrD,EACL,QAAQ,IAAI,mDAAmD,EAC/D,aAAa,CACd,iBACY,CAAA,cAAA,EAAiB,IAAI,CAAC,EAAE,EAAE,EAAA,QAAA,EAEtC,UAAU,IACT,UAAU,CAAC,IAAI,CAAC,KAEhBD,IAAA,CAAAE,UAAA,EAAA,EAAA,QAAA,EAAA,CACEF,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0CAA0C,aACtD,IAAI,CAAC,IAAI,KACRC,GAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,cAAc,CACvB,UAAU,EACV,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,kCAAkC,CACnE,EAAA,QAAA,EAEA,IAAI,CAAC,IAAI,EAAA,CACL,CACR,EACDD,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,uBAAuB,aACnC,IAAI,CAAC,KAAK,IAAIC,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAAE,IAAI,CAAC,KAAK,EAAA,CAAQ,EACxE,IAAI,CAAC,WAAW,KACfA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,+DAA+D,YAC5E,IAAI,CAAC,WAAW,EAAA,CACZ,CACR,CAAA,EAAA,CACG,CAAA,EAAA,CACF,EACL,IAAI,CAAC,QAAQ,KACZA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,0KAA0K,YACtL,IAAI,CAAC,QAAQ,EAAA,CACV,CACP,IACA,CACJ,EAAA,CACG,CACP,EAAA,CACQ,EACV,IAAI,CAAC,OAAO,IAAI,GAAG,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,KACrCA,GAAA,CAAA,IAAA,EAAA,EAEE,SAAS,EAAC,8CAA8C,EAAA,aAAA,EAC5C,kBAAkB,EAAA,EAFzB,WAAW,IAAI,CAAC,EAAE,CAAA,CAAE,CAGzB,CACH,CAAA,EAAA,EA/EY,IAAI,CAAC,EAAE,CAgFX,CACZ,CAAC,EAAA,CACQ,CAAA,EAAA,CACP;AAEX;AAEA,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
1
+ {"version":3,"file":"Dropdown.js","sources":["../../../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import React, { Fragment, cloneElement, isValidElement } from 'react'\nimport { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react'\nimport { buildClassName } from '../../utils/build-classname'\nimport type { DropdownItem, DropdownProps } from './Dropdown.types'\n\nconst WIDTH_CLASS: Record<string, string> = {\n auto: 'w-auto min-w-[120px]',\n sm: 'w-44',\n md: 'w-56',\n lg: 'w-64',\n xl: 'w-72',\n}\n\nexport const Dropdown: React.FC<DropdownProps> = ({\n triggerButton,\n renderTriggerButton,\n className,\n items,\n renderItem,\n itemsContainerClass,\n transition = true,\n anchor = 'bottom start',\n width = 'md',\n menuItemClass,\n onMenuClick,\n ...restProps\n}: DropdownProps & Record<string, any>) => {\n const widthClass = WIDTH_CLASS[width] || width || WIDTH_CLASS.md\n const { theme, variant, size, disabled } = restProps\n\n return (\n <Menu as=\"div\" className=\"relative inline-block\">\n {/* Trigger */}\n {renderTriggerButton ? (\n <MenuButton as={Fragment}>\n {(state) => {\n const rendered = renderTriggerButton(state)\n if (isValidElement(rendered) && className) {\n return cloneElement(rendered as React.ReactElement<any>, {\n className: buildClassName((rendered.props as any).className, className),\n })\n }\n return rendered as React.ReactElement\n }}\n </MenuButton>\n ) : isValidElement(triggerButton) ? (\n <MenuButton as={Fragment}>\n {cloneElement(triggerButton as React.ReactElement<any>, {\n className: buildClassName((triggerButton.props as any).className, className),\n theme: (triggerButton.props as any).theme ?? theme,\n variant: (triggerButton.props as any).variant ?? variant,\n size: (triggerButton.props as any).size ?? size,\n disabled: (triggerButton.props as any).disabled ?? disabled,\n })}\n </MenuButton>\n ) : (\n <MenuButton as={Fragment}>{triggerButton}</MenuButton>\n )}\n\n {/* Dropdown Panel */}\n <MenuItems\n transition={transition}\n anchor={anchor}\n className={buildClassName(\n 'origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50',\n 'border border-[var(--ui-border)] bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200',\n 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0',\n '[--anchor-gap:--spacing(1)]',\n widthClass,\n itemsContainerClass,\n )}\n data-testid=\"dropdown-items\"\n as=\"ul\"\n >\n {items.map((item: DropdownItem, idx: number) => (\n <Fragment key={item.id}>\n {item.groupTitle && (\n <li\n key={`group-${item.id}`}\n className=\"px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none\"\n data-testid={`dropdown-group-${item.id}`}\n >\n {item.groupTitle}\n </li>\n )}\n {!item.divider && (\n <MenuItem as=\"li\" disabled={item.disabled}>\n {({ disabled, active }) => (\n <div\n onClick={() => {\n if (!disabled) {\n item.onClick?.(item)\n onMenuClick?.(item, idx)\n }\n }}\n className={buildClassName(\n 'flex items-center justify-between gap-3 w-full px-2.5 py-1.5 rounded-lg text-sm transition-colors cursor-pointer select-none',\n item.danger\n ? buildClassName(\n 'text-rose-600 dark:text-rose-400',\n active\n ? 'bg-rose-50 dark:bg-rose-950/40'\n : 'hover:bg-rose-50 dark:hover:bg-rose-950/40',\n )\n : buildClassName(\n 'text-gray-700 dark:text-gray-200',\n active\n ? 'bg-gray-100 dark:bg-gray-700/80'\n : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80',\n ),\n disabled && 'opacity-40 cursor-not-allowed pointer-events-none',\n menuItemClass,\n )}\n data-testid={`dropdown-item-${item.id}`}\n >\n {renderItem ? (\n renderItem(item)\n ) : (\n <>\n <div className=\"flex items-center gap-2.5 min-w-0 flex-1\">\n {item.icon && (\n <span\n className={buildClassName(\n 'shrink-0',\n item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500',\n )}\n >\n {item.icon}\n </span>\n )}\n <div className=\"flex flex-col min-w-0\">\n {item.label && (\n <span className=\"font-medium truncate\">{item.label}</span>\n )}\n {item.description && (\n <span className=\"text-xs text-gray-400 dark:text-gray-500 font-normal truncate\">\n {item.description}\n </span>\n )}\n </div>\n </div>\n {item.shortcut && (\n <kbd className=\"shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-[var(--ui-border-muted)] text-gray-400 dark:text-gray-400\">\n {item.shortcut}\n </kbd>\n )}\n </>\n )}\n </div>\n )}\n </MenuItem>\n )}\n {item.divider && idx < items.length - 1 && (\n <li\n key={`divider-${item.id}`}\n className=\"my-1 h-px bg-gray-200/80 dark:bg-gray-700/80\"\n data-testid=\"dropdown-divider\"\n />\n )}\n </Fragment>\n ))}\n </MenuItems>\n </Menu>\n )\n}\n\nDropdown.displayName = 'Dropdown'\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
package/dist/react-tailwind.cjs.js CHANGED
@@ -1598,7 +1598,7 @@ const Dropdown = ({ triggerButton, renderTriggerButton, className, items, render
1598
1598
  variant: (_b = triggerButton.props.variant) !== null && _b !== void 0 ? _b : variant,
1599
1599
  size: (_c = triggerButton.props.size) !== null && _c !== void 0 ? _c : size,
1600
1600
  disabled: (_d = triggerButton.props.disabled) !== null && _d !== void 0 ? _d : disabled,
1601
- }) })) : (jsxRuntime.jsx(react.MenuButton, { as: React.Fragment, children: triggerButton })), jsxRuntime.jsx(react.MenuItems, { transition: transition, anchor: anchor, className: buildClassName('origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50', 'border border-[var(--ui-border)] bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200', 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0', '[--anchor-gap:--spacing(1)]', widthClass, itemsContainerClass), "data-testid": "dropdown-items", as: "ul", children: items.map((item, idx) => (jsxRuntime.jsxs(React.Fragment, { children: [item.groupTitle && (jsxRuntime.jsx("li", { className: "px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none", "data-testid": `dropdown-group-${item.id}`, children: item.groupTitle }, `group-${item.id}`)), jsxRuntime.jsx(react.MenuItem, { as: "li", disabled: item.disabled, children: ({ disabled, active }) => (jsxRuntime.jsx("div", { onClick: () => {
1601
+ }) })) : (jsxRuntime.jsx(react.MenuButton, { as: React.Fragment, children: triggerButton })), jsxRuntime.jsx(react.MenuItems, { transition: transition, anchor: anchor, className: buildClassName('origin-top-right rounded-xl shadow-lg p-1.5 text-sm transition duration-100 ease-out z-50', 'border border-[var(--ui-border)] bg-white dark:bg-gray-800 text-gray-800 dark:text-gray-200', 'focus:outline-none data-[closed]:scale-95 data-[closed]:opacity-0', '[--anchor-gap:--spacing(1)]', widthClass, itemsContainerClass), "data-testid": "dropdown-items", as: "ul", children: items.map((item, idx) => (jsxRuntime.jsxs(React.Fragment, { children: [item.groupTitle && (jsxRuntime.jsx("li", { className: "px-2.5 pt-2 pb-1 text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider select-none", "data-testid": `dropdown-group-${item.id}`, children: item.groupTitle }, `group-${item.id}`)), !item.divider && (jsxRuntime.jsx(react.MenuItem, { as: "li", disabled: item.disabled, children: ({ disabled, active }) => (jsxRuntime.jsx("div", { onClick: () => {
1602
1602
  var _a;
1603
1603
  if (!disabled) {
1604
1604
  (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, item);
@@ -1610,7 +1610,7 @@ const Dropdown = ({ triggerButton, renderTriggerButton, className, items, render
1610
1610
  : 'hover:bg-rose-50 dark:hover:bg-rose-950/40')
1611
1611
  : buildClassName('text-gray-700 dark:text-gray-200', active
1612
1612
  ? 'bg-gray-100 dark:bg-gray-700/80'
1613
- : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80'), disabled && 'opacity-40 cursor-not-allowed pointer-events-none', menuItemClass), "data-testid": `dropdown-item-${item.id}`, children: renderItem ? (renderItem(item)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [item.icon && (jsxRuntime.jsx("span", { className: buildClassName('shrink-0', item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500'), children: item.icon })), jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [item.label && jsxRuntime.jsx("span", { className: "font-medium truncate", children: item.label }), item.description && (jsxRuntime.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500 font-normal truncate", children: item.description }))] })] }), item.shortcut && (jsxRuntime.jsx("kbd", { className: "shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-[var(--ui-border-muted)] text-gray-400 dark:text-gray-400", children: item.shortcut }))] })) })) }), item.divider && idx < items.length - 1 && (jsxRuntime.jsx("li", { className: "my-1 h-px bg-gray-200/80 dark:bg-gray-700/80", "data-testid": "dropdown-divider" }, `divider-${item.id}`))] }, item.id))) })] }));
1613
+ : 'hover:bg-gray-100/80 dark:hover:bg-gray-700/80'), disabled && 'opacity-40 cursor-not-allowed pointer-events-none', menuItemClass), "data-testid": `dropdown-item-${item.id}`, children: renderItem ? (renderItem(item)) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "flex items-center gap-2.5 min-w-0 flex-1", children: [item.icon && (jsxRuntime.jsx("span", { className: buildClassName('shrink-0', item.danger ? 'text-rose-500' : 'text-gray-400 dark:text-gray-500'), children: item.icon })), jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [item.label && (jsxRuntime.jsx("span", { className: "font-medium truncate", children: item.label })), item.description && (jsxRuntime.jsx("span", { className: "text-xs text-gray-400 dark:text-gray-500 font-normal truncate", children: item.description }))] })] }), item.shortcut && (jsxRuntime.jsx("kbd", { className: "shrink-0 text-[10px] font-medium font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-700/80 border border-[var(--ui-border-muted)] text-gray-400 dark:text-gray-400", children: item.shortcut }))] })) })) })), item.divider && idx < items.length - 1 && (jsxRuntime.jsx("li", { className: "my-1 h-px bg-gray-200/80 dark:bg-gray-700/80", "data-testid": "dropdown-divider" }, `divider-${item.id}`))] }, item.id))) })] }));
1614
1614
  };
1615
1615
  Dropdown.displayName = 'Dropdown';
1616
1616