@asafarim/react-dropdowns 1.0.0

package/README.md

@@ -0,0 +1,396 @@
+# @asafarim/react-dropdowns
+
+Comprehensive, accessible, and mobile-first dropdown components for React with TypeScript support.
+
+## Features
+
+- 🎯 **Comprehensive**: Multiple components for different use cases
+- ♿ **Accessible**: Full keyboard navigation and screen reader support
+- 📱 **Mobile-First**: Optimized for touch devices with responsive design
+- 🎨 **Themeable**: Uses ASafariM design tokens with dark theme support
+- 🔧 **TypeScript**: Full type safety and IntelliSense support
+- ⚡ **Performant**: Lightweight with minimal dependencies
+- 🎪 **Flexible**: Multiple placement options and customization
+
+## Installation
+
+```bash
+npm install @asafarim/react-dropdowns
+# or
+yarn add @asafarim/react-dropdowns
+# or
+pnpm add @asafarim/react-dropdowns
+```
+
+## Quick Start
+
+```tsx
+import { Dropdown } from '@asafarim/react-dropdowns';
+import '@asafarim/react-dropdowns/dist/dropdown.css';
+
+function App() {
+  return (
+    <Dropdown
+      items={[
+        {
+          id: 'edit',
+          label: 'Edit',
+          onClick: () => console.log('Edit clicked')
+        },
+        {
+          id: 'delete',
+          label: 'Delete',
+          danger: true,
+          onClick: () => console.log('Delete clicked')
+        }
+      ]}
+      placement="bottom-start"
+    >
+      <button>Actions</button>
+    </Dropdown>
+  );
+}
+```
+
+## Components
+
+### Dropdown
+
+The main dropdown component that combines trigger and menu functionality.
+
+```tsx
+<Dropdown
+  items={[
+    {
+      id: 'option1',
+      label: 'Option 1',
+      icon: <Icon />,
+      onClick: () => {},
+      disabled: false,
+      danger: false
+    },
+    { divider: true }, // Separator
+    {
+      id: 'option2',
+      label: 'Option 2',
+      onClick: () => {}
+    }
+  ]}
+  isOpen={isOpen}
+  onToggle={setIsOpen}
+  placement="bottom-start"
+  size="md"
+  disabled={false}
+  closeOnSelect={true}
+>
+  <button>Trigger</button>
+</Dropdown>
+```
+
+### DropdownItem
+
+Individual menu item component.
+
+```tsx
+<DropdownItem
+  label="Edit Item"
+  icon={<EditIcon />}
+  onClick={() => {}}
+  disabled={false}
+  danger={false}
+/>
+```
+
+### DropdownMenu
+
+Standalone menu component for custom implementations.
+
+```tsx
+<DropdownMenu
+  isOpen={isOpen}
+  position={{ top: 100, left: 50 }}
+  size="md"
+>
+  <DropdownItem label="Option 1" onClick={() => {}} />
+  <DropdownItem label="Option 2" onClick={() => {}} />
+</DropdownMenu>
+```
+
+## Props
+
+### DropdownProps
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | `ReactNode` | - | Trigger element |
+| `items` | `DropdownItemData[]` | `[]` | Menu items |
+| `isOpen` | `boolean` | - | Controlled open state |
+| `onToggle` | `(isOpen: boolean) => void` | - | Open state change handler |
+| `placement` | `DropdownPlacement` | `'bottom-start'` | Menu position |
+| `size` | `DropdownSize` | `'md'` | Menu size |
+| `disabled` | `boolean` | `false` | Disable the dropdown |
+| `closeOnSelect` | `boolean` | `true` | Close menu on item select |
+
+### DropdownItemData
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `id` | `string` | - | Unique identifier |
+| `label` | `string` | - | Item text |
+| `value` | `string` | - | Item value |
+| `icon` | `ReactNode` | - | Item icon |
+| `disabled` | `boolean` | `false` | Disable the item |
+| `danger` | `boolean` | `false` | Danger styling |
+| `divider` | `boolean` | `false` | Render as divider |
+| `onClick` | `(event: MouseEvent) => void` | - | Click handler |
+
+## Placement Options
+
+The dropdown supports 12 different placement options:
+
+- `top`, `top-start`, `top-end`
+- `bottom`, `bottom-start`, `bottom-end`
+- `left`, `left-start`, `left-end`
+- `right`, `right-start`, `right-end`
+
+## Size Options
+
+Three size variants are available:
+
+- `sm` - Compact size for tight spaces
+- `md` - Default size for most use cases
+- `lg` - Large size for better touch targets
+
+## Hooks
+
+### useDropdown
+
+Custom hook for building dropdown functionality:
+
+```tsx
+import { useDropdown } from '@asafarim/react-dropdowns';
+
+const {
+  isOpen,
+  position,
+  triggerRef,
+  menuRef,
+  toggle,
+  open,
+  close,
+  handleItemClick
+} = useDropdown({
+  placement: 'bottom-start',
+  offset: 8,
+  closeOnSelect: true
+});
+```
+
+### useClickOutside
+
+Hook for detecting clicks outside an element:
+
+```tsx
+import { useClickOutside } from '@asafarim/react-dropdowns';
+
+useClickOutside({
+  ref: elementRef,
+  handler: () => setIsOpen(false),
+  enabled: isOpen
+});
+```
+
+### useKeyboardNavigation
+
+Hook for keyboard navigation support:
+
+```tsx
+import { useKeyboardNavigation } from '@asafarim/react-dropdowns';
+
+useKeyboardNavigation({
+  isOpen,
+  menuRef,
+  onClose: () => setIsOpen(false),
+  onSelect: (index) => selectItem(index)
+});
+```
+
+## Styling
+
+The components use CSS custom properties (CSS variables) from the ASafariM design token system. Import the CSS file:
+
+```tsx
+import '@asafarim/react-dropdowns/dist/dropdown.css';
+```
+
+### Custom Styling
+
+You can override the default styles by targeting the CSS classes:
+
+```css
+.asm-dropdown-menu {
+  /* Custom menu styles */
+}
+
+.asm-dropdown-item {
+  /* Custom item styles */
+}
+
+.asm-dropdown-item--danger {
+  /* Custom danger item styles */
+}
+```
+
+## Accessibility
+
+The dropdown components are built with accessibility in mind:
+
+- **Keyboard Navigation**: Arrow keys, Enter, Escape, Home, End
+- **Screen Reader Support**: Proper ARIA attributes and roles
+- **Focus Management**: Automatic focus handling and restoration
+- **High Contrast**: Support for high contrast mode
+- **Reduced Motion**: Respects user's motion preferences
+
+### Keyboard Shortcuts
+
+| Key | Action |
+|-----|--------|
+| `Space` / `Enter` | Open/close dropdown or select item |
+| `Arrow Down` | Navigate to next item or open dropdown |
+| `Arrow Up` | Navigate to previous item |
+| `Home` | Navigate to first item |
+| `End` | Navigate to last item |
+| `Escape` | Close dropdown |
+| `Tab` | Close dropdown and move to next element |
+
+## Examples
+
+### Basic Menu
+
+```tsx
+<Dropdown
+  items={[
+    { id: 'new', label: 'New', onClick: () => {} },
+    { id: 'edit', label: 'Edit', onClick: () => {} },
+    { divider: true },
+    { id: 'delete', label: 'Delete', danger: true, onClick: () => {} }
+  ]}
+>
+  <button>File</button>
+</Dropdown>
+```
+
+### User Menu
+
+```tsx
+<Dropdown
+  items={[
+    {
+      id: 'profile',
+      label: 'Profile',
+      icon: <UserIcon />,
+      onClick: () => navigate('/profile')
+    },
+    {
+      id: 'settings',
+      label: 'Settings',
+      icon: <SettingsIcon />,
+      onClick: () => navigate('/settings')
+    },
+    { divider: true },
+    {
+      id: 'logout',
+      label: 'Logout',
+      icon: <LogoutIcon />,
+      danger: true,
+      onClick: handleLogout
+    }
+  ]}
+  placement="bottom-end"
+>
+  <img src={user.avatar} alt={user.name} />
+</Dropdown>
+```
+
+### Filter Dropdown
+
+```tsx
+const [filter, setFilter] = useState('all');
+
+<Dropdown
+  items={[
+    {
+      id: 'all',
+      label: 'All Items',
+      icon: filter === 'all' ? <CheckIcon /> : undefined,
+      onClick: () => setFilter('all')
+    },
+    {
+      id: 'active',
+      label: 'Active Only',
+      icon: filter === 'active' ? <CheckIcon /> : undefined,
+      onClick: () => setFilter('active')
+    },
+    {
+      id: 'archived',
+      label: 'Archived',
+      icon: filter === 'archived' ? <CheckIcon /> : undefined,
+      onClick: () => setFilter('archived')
+    }
+  ]}
+>
+  <button>
+    <FilterIcon />
+    Filter: {filter}
+    <ChevronDownIcon />
+  </button>
+</Dropdown>
+```
+
+## Demo
+
+Run the demo application to see all features in action:
+
+```bash
+cd packages/react-dropdowns/demo
+npm install
+npm start
+```
+
+The demo showcases:
+- Basic usage examples
+- All placement options
+- Interactive examples (filters, user selectors)
+- Different sizes and states
+- Mobile optimizations
+- Dark theme support
+
+## Browser Support
+
+- Chrome 88+
+- Firefox 78+
+- Safari 14+
+- Edge 88+
+
+## Contributing
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+## License
+
+MIT © ASafariM
+
+## Changelog
+
+### 1.0.0
+
+- Initial release
+- Comprehensive dropdown components
+- Mobile-first responsive design
+- Full accessibility support
+- TypeScript support
+- ASafariM design token integration

package/dist/components/Dropdown.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DropdownProps } from '../types';
+export declare const Dropdown: React.FC<DropdownProps>;

package/dist/components/DropdownItem.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DropdownItemProps } from '../types';
+export declare const DropdownItem: React.FC<DropdownItemProps>;

package/dist/components/DropdownMenu.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DropdownMenuProps } from '../types';
+export declare const DropdownMenu: React.ForwardRefExoticComponent<DropdownMenuProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DropdownTrigger.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { DropdownTriggerProps } from '../types';
+export declare const DropdownTrigger: React.ForwardRefExoticComponent<DropdownTriggerProps & React.RefAttributes<HTMLElement>>;

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+interface UseClickOutsideProps {
+    ref: RefObject<HTMLDivElement>;
+    handler: () => void;
+    enabled?: boolean;
+}
+export declare const useClickOutside: ({ ref, handler, enabled }: UseClickOutsideProps) => void;
+export {};

package/dist/hooks/useDropdown.d.ts

@@ -0,0 +1,17 @@
+import { DropdownPlacement, DropdownPosition } from '../types';
+interface UseDropdownProps {
+    placement?: DropdownPlacement;
+    offset?: number;
+    closeOnSelect?: boolean;
+}
+export declare const useDropdown: ({ placement, offset, closeOnSelect }?: UseDropdownProps) => {
+    isOpen: boolean;
+    position: DropdownPosition;
+    triggerRef: import("react").RefObject<HTMLDivElement>;
+    menuRef: import("react").RefObject<HTMLDivElement>;
+    toggle: () => void;
+    open: () => void;
+    close: () => void;
+    handleItemClick: () => void;
+};
+export {};

package/dist/hooks/useKeyboardNavigation.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from 'react';
+interface UseKeyboardNavigationProps {
+    isOpen: boolean;
+    menuRef: RefObject<HTMLElement>;
+    onClose: () => void;
+    onSelect?: (index: number) => void;
+}
+export declare const useKeyboardNavigation: ({ isOpen, menuRef, onClose, onSelect }: UseKeyboardNavigationProps) => void;
+export {};

package/dist/index.css

@@ -0,0 +1 @@
+.dropdown_asm-dropdown__h1OJq{display:inline-block;position:relative}.dropdown_asm-dropdown-trigger__NJPo2{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;justify-content:center;margin:0;padding:0}.dropdown_asm-dropdown-trigger__NJPo2:disabled{cursor:not-allowed;opacity:.6}.dropdown_asm-dropdown-trigger__NJPo2:focus-visible{border-radius:var(--asm-radius-sm);outline:2px solid var(--asm-color-primary-500);outline-offset:2px}.dropdown_asm-dropdown-menu__YMlWB{animation:dropdown_asm-dropdown-enter__rh5Tw .15s ease-out;background-color:var(--asm-color-surface);border:1px solid var(--asm-color-border);border-radius:var(--asm-radius-lg);box-shadow:var(--asm-effect-shadow-lg);max-height:400px;max-width:320px;min-width:160px;overflow-y:auto;padding:var(--asm-space-1);transform-origin:top;z-index:var(--asm-z-dropdown)}@keyframes dropdown_asm-dropdown-enter__rh5Tw{0%{opacity:0;transform:scale(.95) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}.dropdown_asm-dropdown-menu--sm__jecEV{min-width:120px;padding:var(--asm-space-0-5)}.dropdown_asm-dropdown-menu--md__X4BwH{min-width:160px;padding:var(--asm-space-1)}.dropdown_asm-dropdown-menu--lg__BQ3dL{min-width:200px;padding:var(--asm-space-1-5)}.dropdown_asm-dropdown-item__8UHDs{align-items:center;background:transparent;border:none;border-radius:var(--asm-radius-md);color:var(--asm-color-text);cursor:pointer;display:flex;font-size:var(--asm-font-size-sm);font-weight:var(--asm-font-weight-400);gap:var(--asm-space-2);min-height:36px;padding:var(--asm-space-2) var(--asm-space-3);text-align:left;transition:var(--asm-transition-fade);width:100%}.dropdown_asm-dropdown-item__8UHDs:focus,.dropdown_asm-dropdown-item__8UHDs:hover:not(:disabled){background-color:var(--asm-color-button-ghost-bg-hover);color:var(--asm-color-text)}.dropdown_asm-dropdown-item__8UHDs:focus{outline:none}.dropdown_asm-dropdown-item__8UHDs:active:not(:disabled){background-color:var(--asm-color-button-ghost-bg-hover)}.dropdown_asm-dropdown-item--disabled__FiaRm{color:var(--asm-color-text-muted);cursor:not-allowed;opacity:.6}.dropdown_asm-dropdown-item--danger__8yZZC{color:var(--asm-color-danger-600)}.dropdown_asm-dropdown-item--danger__8yZZC:focus,.dropdown_asm-dropdown-item--danger__8yZZC:hover:not(:disabled){background-color:var(--asm-color-danger-50);color:var(--asm-color-danger-700)}.dropdown_asm-dropdown-item__icon__r1aA0{align-items:center;display:flex;flex-shrink:0;height:16px;justify-content:center;width:16px}.dropdown_asm-dropdown-item__label__UVmKu{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown_asm-dropdown-divider__JN-Gh{background-color:var(--asm-color-border);height:1px;margin:var(--asm-space-1) 0}[data-theme=dark] .dropdown_asm-dropdown-menu__YMlWB{background-color:var(--asm-color-surface);border-color:var(--asm-color-border);box-shadow:var(--asm-effect-shadow-lg)}[data-theme=dark] .dropdown_asm-dropdown-item__8UHDs{color:var(--asm-color-text)}[data-theme=dark] .dropdown_asm-dropdown-item__8UHDs:hover:not(:disabled){background-color:var(--asm-color-button-ghost-bg-hover)}[data-theme=dark] .dropdown_asm-dropdown-item--danger__8yZZC{color:var(--asm-color-danger-400)}[data-theme=dark] .dropdown_asm-dropdown-item--danger__8yZZC:hover:not(:disabled){background-color:var(--asm-color-danger-900);color:var(--asm-color-danger-300)}@media (max-width:640px){.dropdown_asm-dropdown-menu__YMlWB{max-height:60vh;max-width:calc(100vw - 32px);min-width:200px}.dropdown_asm-dropdown-item__8UHDs{font-size:var(--asm-font-size-md);min-height:44px;padding:var(--asm-space-3) var(--asm-space-4)}.dropdown_asm-dropdown-item__icon__r1aA0{height:20px;width:20px}}@media (hover:none) and (pointer:coarse){.dropdown_asm-dropdown-item__8UHDs{min-height:44px;padding:var(--asm-space-3) var(--asm-space-4)}}@media (prefers-reduced-motion:reduce){.dropdown_asm-dropdown-menu__YMlWB{animation:none}.dropdown_asm-dropdown-item__8UHDs{transition:none}}@media (prefers-contrast:high){.dropdown_asm-dropdown-menu__YMlWB{border-width:2px}.dropdown_asm-dropdown-item__8UHDs:focus{outline:2px solid currentColor;outline-offset:-2px}}@import "@asafarim/design-tokens/css/index.css";.DropdownTrigger-module_trigger__2aFGL{align-items:center;border:none;border-radius:var(--asm-radius-md);cursor:pointer;display:inline-flex;font-family:var(--asm-font-family-primary);font-size:var(--asm-font-size-md);font-weight:var(--asm-font-weight-500);gap:var(--asm-space-2);justify-content:center;transition:all var(--asm-motion-duration-normal) var(--asm-motion-easing-standard);white-space:nowrap}.DropdownTrigger-module_trigger__2aFGL:disabled{cursor:not-allowed;opacity:.6}.DropdownTrigger-module_trigger__2aFGL:focus-visible{outline:2px solid var(--asm-color-focus-ring);outline-offset:2px}.DropdownTrigger-module_sm__J-u1E{font-size:var(--asm-font-size-sm);padding:calc(var(--asm-space-control-padding-y)*.75) calc(var(--asm-space-control-padding-x)*.75)}.DropdownTrigger-module_md__9rX9v{font-size:var(--asm-font-size-md);padding:var(--asm-space-control-padding-y) var(--asm-space-control-padding-x)}.DropdownTrigger-module_lg__Q-JAS{font-size:var(--asm-font-size-lg);padding:calc(var(--asm-space-control-padding-y)*1.25) calc(var(--asm-space-control-padding-x)*1.25)}.DropdownTrigger-module_primary__UQ1Xa{background-color:var(--asm-color-button-primary-bg);border:1px solid transparent;color:var(--asm-color-button-primary-text)}.DropdownTrigger-module_primary__UQ1Xa:hover:not(:disabled){background-color:var(--asm-color-button-primary-bg-hover)}.DropdownTrigger-module_primary__UQ1Xa:active:not(:disabled){background-color:var(--asm-color-button-primary-bg-active)}.DropdownTrigger-module_secondary__1NNLR{background-color:var(--asm-color-button-secondary-bg);border:1px solid var(--asm-color-border);color:var(--asm-color-button-secondary-text)}.DropdownTrigger-module_secondary__1NNLR:hover:not(:disabled){background-color:var(--asm-color-surface-muted);border-color:var(--asm-color-text)}.DropdownTrigger-module_secondary__1NNLR:active:not(:disabled){background-color:var(--asm-color-surface-muted)}.DropdownTrigger-module_success__bHgUD{background-color:var(--asm-color-success-400);border:1px solid transparent;color:#fff}.DropdownTrigger-module_success__bHgUD:hover:not(:disabled){background-color:var(--asm-color-success-500)}.DropdownTrigger-module_success__bHgUD:active:not(:disabled){background-color:var(--asm-color-success-600)}.DropdownTrigger-module_warning__ifDRF{background-color:var(--asm-color-warning-400);border:1px solid transparent;color:#fff}.DropdownTrigger-module_warning__ifDRF:hover:not(:disabled){background-color:var(--asm-color-warning-500)}.DropdownTrigger-module_warning__ifDRF:active:not(:disabled){background-color:var(--asm-color-warning-600)}.DropdownTrigger-module_danger__v-d7N{background-color:var(--asm-color-button-destructive-bg);border:1px solid transparent;color:var(--asm-color-button-destructive-text)}.DropdownTrigger-module_danger__v-d7N:hover:not(:disabled){background-color:var(--asm-color-danger-500)}.DropdownTrigger-module_danger__v-d7N:active:not(:disabled){background-color:var(--asm-color-danger-600)}.DropdownTrigger-module_info__3czXi{background-color:var(--asm-color-info-400);border:1px solid transparent;color:#fff}.DropdownTrigger-module_info__3czXi:hover:not(:disabled){background-color:var(--asm-color-info-500)}.DropdownTrigger-module_info__3czXi:active:not(:disabled){background-color:var(--asm-color-info-600)}.DropdownTrigger-module_ghost__dbCKD{background-color:transparent;border:1px solid transparent;color:var(--asm-color-text)}.DropdownTrigger-module_ghost__dbCKD:active:not(:disabled),.DropdownTrigger-module_ghost__dbCKD:hover:not(:disabled){background-color:var(--asm-color-button-ghost-bg-hover)}.DropdownTrigger-module_outline__VnDA7{background-color:transparent;border:1px solid var(--asm-color-border);color:var(--asm-color-text)}.DropdownTrigger-module_outline__VnDA7:hover:not(:disabled){background-color:var(--asm-color-surface-muted);border-color:var(--asm-color-text)}.DropdownTrigger-module_outline__VnDA7:active:not(:disabled){background-color:var(--asm-color-surface-muted)}.DropdownTrigger-module_link__BWU0o{background-color:transparent;border:none;color:var(--asm-color-primary-500);padding:0;text-decoration:none}.DropdownTrigger-module_link__BWU0o:hover:not(:disabled){color:var(--asm-color-primary-600);text-decoration:underline}.DropdownTrigger-module_link__BWU0o:active:not(:disabled){color:var(--asm-color-primary-700)}.DropdownTrigger-module_brand__SAI0y{background-color:var(--asm-color-brand-primary-500);border:1px solid transparent;color:#fff}.DropdownTrigger-module_brand__SAI0y:hover:not(:disabled){background-color:var(--asm-color-brand-primary-600)}.DropdownTrigger-module_brand__SAI0y:active:not(:disabled){background-color:var(--asm-color-brand-primary-700)}.DropdownTrigger-module_trigger__2aFGL:disabled{background-color:var(--asm-color-button-disabled-bg);border-color:transparent;color:var(--asm-color-button-disabled-text)}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import './styles/dropdown.css';
+export { Dropdown } from './components/Dropdown';
+export { DropdownItem } from './components/DropdownItem';
+export { DropdownMenu } from './components/DropdownMenu';
+export { DropdownTrigger } from './components/DropdownTrigger';
+export { useDropdown } from './hooks/useDropdown';
+export { useClickOutside } from './hooks/useClickOutside';
+export { useKeyboardNavigation } from './hooks/useKeyboardNavigation';
+export type { DropdownProps, DropdownItemProps, DropdownMenuProps, DropdownTriggerProps, DropdownPosition, DropdownPlacement, DropdownSize, DropdownVariant, DropdownItemData } from './types';

package/dist/index.esm.css

@@ -0,0 +1 @@
+.dropdown_asm-dropdown__h1OJq{display:inline-block;position:relative}.dropdown_asm-dropdown-trigger__NJPo2{align-items:center;background:none;border:none;cursor:pointer;display:inline-flex;justify-content:center;margin:0;padding:0}.dropdown_asm-dropdown-trigger__NJPo2:disabled{cursor:not-allowed;opacity:.6}.dropdown_asm-dropdown-trigger__NJPo2:focus-visible{border-radius:var(--asm-radius-sm);outline:2px solid var(--asm-color-primary-500);outline-offset:2px}.dropdown_asm-dropdown-menu__YMlWB{animation:dropdown_asm-dropdown-enter__rh5Tw .15s ease-out;background-color:var(--asm-color-surface);border:1px solid var(--asm-color-border);border-radius:var(--asm-radius-lg);box-shadow:var(--asm-effect-shadow-lg);max-height:400px;max-width:320px;min-width:160px;overflow-y:auto;padding:var(--asm-space-1);transform-origin:top;z-index:var(--asm-z-dropdown)}@keyframes dropdown_asm-dropdown-enter__rh5Tw{0%{opacity:0;transform:scale(.95) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}.dropdown_asm-dropdown-menu--sm__jecEV{min-width:120px;padding:var(--asm-space-0-5)}.dropdown_asm-dropdown-menu--md__X4BwH{min-width:160px;padding:var(--asm-space-1)}.dropdown_asm-dropdown-menu--lg__BQ3dL{min-width:200px;padding:var(--asm-space-1-5)}.dropdown_asm-dropdown-item__8UHDs{align-items:center;background:transparent;border:none;border-radius:var(--asm-radius-md);color:var(--asm-color-text);cursor:pointer;display:flex;font-size:var(--asm-font-size-sm);font-weight:var(--asm-font-weight-400);gap:var(--asm-space-2);min-height:36px;padding:var(--asm-space-2) var(--asm-space-3);text-align:left;transition:var(--asm-transition-fade);width:100%}.dropdown_asm-dropdown-item__8UHDs:focus,.dropdown_asm-dropdown-item__8UHDs:hover:not(:disabled){background-color:var(--asm-color-button-ghost-bg-hover);color:var(--asm-color-text)}.dropdown_asm-dropdown-item__8UHDs:focus{outline:none}.dropdown_asm-dropdown-item__8UHDs:active:not(:disabled){background-color:var(--asm-color-button-ghost-bg-hover)}.dropdown_asm-dropdown-item--disabled__FiaRm{color:var(--asm-color-text-muted);cursor:not-allowed;opacity:.6}.dropdown_asm-dropdown-item--danger__8yZZC{color:var(--asm-color-danger-600)}.dropdown_asm-dropdown-item--danger__8yZZC:focus,.dropdown_asm-dropdown-item--danger__8yZZC:hover:not(:disabled){background-color:var(--asm-color-danger-50);color:var(--asm-color-danger-700)}.dropdown_asm-dropdown-item__icon__r1aA0{align-items:center;display:flex;flex-shrink:0;height:16px;justify-content:center;width:16px}.dropdown_asm-dropdown-item__label__UVmKu{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown_asm-dropdown-divider__JN-Gh{background-color:var(--asm-color-border);height:1px;margin:var(--asm-space-1) 0}[data-theme=dark] .dropdown_asm-dropdown-menu__YMlWB{background-color:var(--asm-color-surface);border-color:var(--asm-color-border);box-shadow:var(--asm-effect-shadow-lg)}[data-theme=dark] .dropdown_asm-dropdown-item__8UHDs{color:var(--asm-color-text)}[data-theme=dark] .dropdown_asm-dropdown-item__8UHDs:hover:not(:disabled){background-color:var(--asm-color-button-ghost-bg-hover)}[data-theme=dark] .dropdown_asm-dropdown-item--danger__8yZZC{color:var(--asm-color-danger-400)}[data-theme=dark] .dropdown_asm-dropdown-item--danger__8yZZC:hover:not(:disabled){background-color:var(--asm-color-danger-900);color:var(--asm-color-danger-300)}@media (max-width:640px){.dropdown_asm-dropdown-menu__YMlWB{max-height:60vh;max-width:calc(100vw - 32px);min-width:200px}.dropdown_asm-dropdown-item__8UHDs{font-size:var(--asm-font-size-md);min-height:44px;padding:var(--asm-space-3) var(--asm-space-4)}.dropdown_asm-dropdown-item__icon__r1aA0{height:20px;width:20px}}@media (hover:none) and (pointer:coarse){.dropdown_asm-dropdown-item__8UHDs{min-height:44px;padding:var(--asm-space-3) var(--asm-space-4)}}@media (prefers-reduced-motion:reduce){.dropdown_asm-dropdown-menu__YMlWB{animation:none}.dropdown_asm-dropdown-item__8UHDs{transition:none}}@media (prefers-contrast:high){.dropdown_asm-dropdown-menu__YMlWB{border-width:2px}.dropdown_asm-dropdown-item__8UHDs:focus{outline:2px solid currentColor;outline-offset:-2px}}@import "@asafarim/design-tokens/css/index.css";.DropdownTrigger-module_trigger__2aFGL{align-items:center;border:none;border-radius:var(--asm-radius-md);cursor:pointer;display:inline-flex;font-family:var(--asm-font-family-primary);font-size:var(--asm-font-size-md);font-weight:var(--asm-font-weight-500);gap:var(--asm-space-2);justify-content:center;transition:all var(--asm-motion-duration-normal) var(--asm-motion-easing-standard);white-space:nowrap}.DropdownTrigger-module_trigger__2aFGL:disabled{cursor:not-allowed;opacity:.6}.DropdownTrigger-module_trigger__2aFGL:focus-visible{outline:2px solid var(--asm-color-focus-ring);outline-offset:2px}.DropdownTrigger-module_sm__J-u1E{font-size:var(--asm-font-size-sm);padding:calc(var(--asm-space-control-padding-y)*.75) calc(var(--asm-space-control-padding-x)*.75)}.DropdownTrigger-module_md__9rX9v{font-size:var(--asm-font-size-md);padding:var(--asm-space-control-padding-y) var(--asm-space-control-padding-x)}.DropdownTrigger-module_lg__Q-JAS{font-size:var(--asm-font-size-lg);padding:calc(var(--asm-space-control-padding-y)*1.25) calc(var(--asm-space-control-padding-x)*1.25)}.DropdownTrigger-module_primary__UQ1Xa{background-color:var(--asm-color-button-primary-bg);border:1px solid transparent;color:var(--asm-color-button-primary-text)}.DropdownTrigger-module_primary__UQ1Xa:hover:not(:disabled){background-color:var(--asm-color-button-primary-bg-hover)}.DropdownTrigger-module_primary__UQ1Xa:active:not(:disabled){background-color:var(--asm-color-button-primary-bg-active)}.DropdownTrigger-module_secondary__1NNLR{background-color:var(--asm-color-button-secondary-bg);border:1px solid var(--asm-color-border);color:var(--asm-color-button-secondary-text)}.DropdownTrigger-module_secondary__1NNLR:hover:not(:disabled){background-color:var(--asm-color-surface-muted);border-color:var(--asm-color-text)}.DropdownTrigger-module_secondary__1NNLR:active:not(:disabled){background-color:var(--asm-color-surface-muted)}.DropdownTrigger-module_success__bHgUD{background-color:var(--asm-color-success-400);border:1px solid transparent;color:#fff}.DropdownTrigger-module_success__bHgUD:hover:not(:disabled){background-color:var(--asm-color-success-500)}.DropdownTrigger-module_success__bHgUD:active:not(:disabled){background-color:var(--asm-color-success-600)}.DropdownTrigger-module_warning__ifDRF{background-color:var(--asm-color-warning-400);border:1px solid transparent;color:#fff}.DropdownTrigger-module_warning__ifDRF:hover:not(:disabled){background-color:var(--asm-color-warning-500)}.DropdownTrigger-module_warning__ifDRF:active:not(:disabled){background-color:var(--asm-color-warning-600)}.DropdownTrigger-module_danger__v-d7N{background-color:var(--asm-color-button-destructive-bg);border:1px solid transparent;color:var(--asm-color-button-destructive-text)}.DropdownTrigger-module_danger__v-d7N:hover:not(:disabled){background-color:var(--asm-color-danger-500)}.DropdownTrigger-module_danger__v-d7N:active:not(:disabled){background-color:var(--asm-color-danger-600)}.DropdownTrigger-module_info__3czXi{background-color:var(--asm-color-info-400);border:1px solid transparent;color:#fff}.DropdownTrigger-module_info__3czXi:hover:not(:disabled){background-color:var(--asm-color-info-500)}.DropdownTrigger-module_info__3czXi:active:not(:disabled){background-color:var(--asm-color-info-600)}.DropdownTrigger-module_ghost__dbCKD{background-color:transparent;border:1px solid transparent;color:var(--asm-color-text)}.DropdownTrigger-module_ghost__dbCKD:active:not(:disabled),.DropdownTrigger-module_ghost__dbCKD:hover:not(:disabled){background-color:var(--asm-color-button-ghost-bg-hover)}.DropdownTrigger-module_outline__VnDA7{background-color:transparent;border:1px solid var(--asm-color-border);color:var(--asm-color-text)}.DropdownTrigger-module_outline__VnDA7:hover:not(:disabled){background-color:var(--asm-color-surface-muted);border-color:var(--asm-color-text)}.DropdownTrigger-module_outline__VnDA7:active:not(:disabled){background-color:var(--asm-color-surface-muted)}.DropdownTrigger-module_link__BWU0o{background-color:transparent;border:none;color:var(--asm-color-primary-500);padding:0;text-decoration:none}.DropdownTrigger-module_link__BWU0o:hover:not(:disabled){color:var(--asm-color-primary-600);text-decoration:underline}.DropdownTrigger-module_link__BWU0o:active:not(:disabled){color:var(--asm-color-primary-700)}.DropdownTrigger-module_brand__SAI0y{background-color:var(--asm-color-brand-primary-500);border:1px solid transparent;color:#fff}.DropdownTrigger-module_brand__SAI0y:hover:not(:disabled){background-color:var(--asm-color-brand-primary-600)}.DropdownTrigger-module_brand__SAI0y:active:not(:disabled){background-color:var(--asm-color-brand-primary-700)}.DropdownTrigger-module_trigger__2aFGL:disabled{background-color:var(--asm-color-button-disabled-bg);border-color:transparent;color:var(--asm-color-button-disabled-text)}