@mdigital_ui/ui 0.4.2 → 0.4.4

package/dist/{chunk-64NHVOZS.js → chunk-FU5Q4WVX.js}

@@ -1,9 +1,9 @@
-import { dropdown_default } from './chunk-UTWQ2FZK.js';
-import { textColorVariants } from './chunk-POXI7JJ4.js';
-import { cn, iconSizes } from './chunk-NGYLRX6F.js';
+import { dropdown_default } from './chunk-GOBUFGGJ.js';
+import { colorVars } from './chunk-G6QIIWKU.js';
+import { cn, iconSizes } from './chunk-RAS6HUEI.js';
 import { cva } from 'class-variance-authority';
-import { ChevronRight, MoreHorizontal, MoreVertical } from 'lucide-react';
 import React from 'react';
+import { ChevronRight, MoreHorizontal, MoreVertical } from 'lucide-react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var BreadcrumbContext = React.createContext({});
@@ -63,11 +63,13 @@ var Breadcrumb = React.memo(
     return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, { value: { color, size, classNames }, children: /* @__PURE__ */ jsx(
       "nav",
       {
+        "data-slot": "root",
         "aria-label": "breadcrumb",
         className: cn(
           "breadcrumbs_root",
           breadcrumbVariants({ size }),
-          textColorVariants({ color }),
+          colorVars[color],
+          "text-slot",
           classNames?.root,
           className
         ),
@@ -199,6 +201,7 @@ var BreadcrumbSeparator = React.memo(
     return /* @__PURE__ */ jsx(
       "span",
       {
+        "aria-hidden": "true",
         className: cn(
           "breadcrumbs_separator",
           "text-text-secondary",
@@ -220,12 +223,15 @@ var isValidNavigationUrl = (href) => {
   if (dangerousProtocols.some((protocol) => lowerHref.startsWith(protocol))) {
     return false;
   }
-  try {
-    const url = new URL(href, window.location.origin);
-    return url.origin === window.location.origin;
-  } catch {
-    return true;
+  if (typeof window !== "undefined") {
+    try {
+      const url = new URL(href, window.location.origin);
+      return url.origin === window.location.origin;
+    } catch {
+      return true;
+    }
   }
+  return true;
 };
 var BreadcrumbEllipsis = React.memo(
   ({ orientation = "horizontal", items, children, className, size = "md" }) => {
@@ -234,10 +240,14 @@ var BreadcrumbEllipsis = React.memo(
     const ellipsisButton = /* @__PURE__ */ jsxs(
       "span",
       {
-        role: isInteractive ? "button" : "presentation",
-        "aria-hidden": isInteractive ? void 0 : true,
-        "aria-label": isInteractive ? "Show more breadcrumbs" : void 0,
-        tabIndex: isInteractive ? 0 : void 0,
+        ...isInteractive && {
+          role: "button",
+          "aria-label": "Show more breadcrumbs",
+          tabIndex: 0
+        },
+        ...!isInteractive && {
+          "aria-hidden": true
+        },
         className: cn(
           "flex items-center justify-center",
           isInteractive && "cursor-pointer",
@@ -268,5 +278,5 @@ BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
 var breadcrumbs_default = Breadcrumb;
 
 export { BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, breadcrumbs_default };
-//# sourceMappingURL=chunk-64NHVOZS.js.map
-//# sourceMappingURL=chunk-64NHVOZS.js.map
+//# sourceMappingURL=chunk-FU5Q4WVX.js.map
+//# sourceMappingURL=chunk-FU5Q4WVX.js.map

package/dist/chunk-FU5Q4WVX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/breadcrumbs/index.tsx"],"names":[],"mappings":"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","file":"chunk-FU5Q4WVX.js","sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport { ChevronRight, MoreHorizontal, MoreVertical } from 'lucide-react'\n\nimport Dropdown from '../dropdown'\nimport { cn, iconSizes } from '../utils'\nimport { colorVars } from '../variants'\nimport type {\n  BreadcrumbEllipsisProps,\n  BreadcrumbItemProps,\n  BreadcrumbLinkProps,\n  BreadcrumbListProps,\n  BreadcrumbPageProps,\n  BreadcrumbProps,\n  BreadcrumbsColor,\n  BreadcrumbSeparatorProps,\n  BreadcrumbsSize,\n} from './types'\n\nexport type { BreadcrumbItemData } from './types'\n\ninterface BreadcrumbContextValue {\n  color?: BreadcrumbsColor\n  size?: BreadcrumbsSize\n  classNames?: {\n    list?: string\n    item?: string\n    link?: string\n    separator?: string\n    current?: string\n  }\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({})\n\nconst breadcrumbVariants = cva('', {\n  variants: {\n    size: {\n      xs: 'text-xs',\n      sm: 'text-sm',\n      md: 'text-base',\n      lg: 'text-lg',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nconst Breadcrumb = React.memo<BreadcrumbProps>(\n  ({\n    children,\n    items,\n    color = 'default',\n    size = 'md',\n    separator,\n    className,\n    classNames,\n  }) => {\n    const content = items?.length ? (\n      <BreadcrumbList>\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1\n          return (\n            <React.Fragment key={index}>\n              <BreadcrumbItem>\n                {item.ellipsis ? (\n                  <BreadcrumbEllipsis\n                    orientation={item.ellipsisOrientation || 'horizontal'}\n                    items={item.ellipsisItems || []}\n                    size={size}\n                  />\n                ) : isLast ? (\n                  <BreadcrumbPage\n                    leftIcon={item.leftIcon}\n                    rightIcon={item.rightIcon}\n                  >\n                    {item.label}\n                  </BreadcrumbPage>\n                ) : (\n                  <BreadcrumbLink\n                    href={item.href || ''}\n                    onClick={item.onClick}\n                    leftIcon={item.leftIcon}\n                    rightIcon={item.rightIcon}\n                  >\n                    {item.label}\n                  </BreadcrumbLink>\n                )}\n              </BreadcrumbItem>\n              {!isLast && (\n                <BreadcrumbSeparator size={size}>\n                  {separator}\n                </BreadcrumbSeparator>\n              )}\n            </React.Fragment>\n          )\n        })}\n      </BreadcrumbList>\n    ) : (\n      children\n    )\n\n    return (\n      <BreadcrumbContext.Provider value={{ color, size, classNames }}>\n        <nav\n          data-slot=\"root\"\n          aria-label=\"breadcrumb\"\n          className={cn(\n            'breadcrumbs_root',\n            breadcrumbVariants({ size }),\n            colorVars[color],\n            'text-slot',\n            classNames?.root,\n            className,\n          )}\n        >\n          {content}\n        </nav>\n      </BreadcrumbContext.Provider>\n    )\n  },\n)\n\nBreadcrumb.displayName = 'Breadcrumb'\n\nexport const BreadcrumbList = React.memo<BreadcrumbListProps>(\n  ({ children, className }) => {\n    const { classNames } = React.useContext(BreadcrumbContext)\n\n    return (\n      <ol\n        className={cn(\n          'breadcrumbs_list',\n          'flex items-center gap-1.5',\n          classNames?.list,\n          className,\n        )}\n      >\n        {children}\n      </ol>\n    )\n  },\n)\n\nBreadcrumbList.displayName = 'BreadcrumbList'\n\nexport const BreadcrumbItem = React.memo<BreadcrumbItemProps>(\n  ({ children, className }) => {\n    const { classNames } = React.useContext(BreadcrumbContext)\n\n    return (\n      <li\n        className={cn(\n          'breadcrumbs_item',\n          'inline-flex items-center gap-1.5',\n          classNames?.item,\n          className,\n        )}\n      >\n        {children}\n      </li>\n    )\n  },\n)\n\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\nexport const BreadcrumbLink = React.memo<BreadcrumbLinkProps>(\n  ({ children, href, onClick, leftIcon, rightIcon, className }) => {\n    const { classNames } = React.useContext(BreadcrumbContext)\n\n    const handleClick = (e: React.MouseEvent) => {\n      if (onClick) {\n        e.preventDefault()\n        onClick()\n      }\n    }\n\n    const content = (\n      <>\n        {leftIcon && (\n          <span className=\"inline-flex items-center\">{leftIcon}</span>\n        )}\n        {children}\n        {rightIcon && (\n          <span className=\"inline-flex items-center\">{rightIcon}</span>\n        )}\n      </>\n    )\n\n    const linkClasses = cn(\n      'breadcrumbs_link',\n      'inline-flex items-center gap-1.5 transition-colors hover:underline cursor-pointer',\n      classNames?.link,\n      className,\n    )\n\n    if (href) {\n      return (\n        <a\n          href={href}\n          onClick={handleClick}\n          className={linkClasses}\n        >\n          {content}\n        </a>\n      )\n    }\n\n    if (onClick) {\n      return (\n        <button\n          type=\"button\"\n          onClick={handleClick}\n          className={linkClasses}\n        >\n          {content}\n        </button>\n      )\n    }\n\n    return (\n      <span\n        className={cn(\n          'breadcrumbs_link',\n          'inline-flex items-center gap-1.5',\n          classNames?.link,\n          className,\n        )}\n      >\n        {content}\n      </span>\n    )\n  },\n)\n\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\nexport const BreadcrumbPage = React.memo<BreadcrumbPageProps>(\n  ({ children, leftIcon, rightIcon, className }) => {\n    const { classNames } = React.useContext(BreadcrumbContext)\n\n    return (\n      <span\n        aria-current=\"page\"\n        className={cn(\n          'breadcrumbs_current',\n          'inline-flex items-center gap-1.5 font-medium',\n          classNames?.current,\n          className,\n        )}\n      >\n        {leftIcon && (\n          <span className=\"inline-flex items-center\">{leftIcon}</span>\n        )}\n        {children}\n        {rightIcon && (\n          <span className=\"inline-flex items-center\">{rightIcon}</span>\n        )}\n      </span>\n    )\n  },\n)\n\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\nexport const BreadcrumbSeparator = React.memo<BreadcrumbSeparatorProps>(\n  ({ children, className, size = 'md' }) => {\n    const { classNames } = React.useContext(BreadcrumbContext)\n\n    return (\n      <span\n        aria-hidden=\"true\"\n        className={cn(\n          'breadcrumbs_separator',\n          'text-text-secondary',\n          classNames?.separator,\n          className,\n        )}\n      >\n        {children ?? <ChevronRight className={iconSizes[size]} />}\n      </span>\n    )\n  },\n)\n\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\n/**\n * Validates URL to prevent open redirect vulnerabilities\n * Only allows relative URLs or same-origin URLs\n */\nconst isValidNavigationUrl = (href: string): boolean => {\n  // Allow relative URLs starting with / or #\n  if (href.startsWith('/') || href.startsWith('#') || href.startsWith('?')) {\n    return true\n  }\n\n  // Block javascript: and other dangerous protocols\n  const dangerousProtocols = ['javascript:', 'data:', 'vbscript:']\n  const lowerHref = href.toLowerCase()\n  if (dangerousProtocols.some(protocol => lowerHref.startsWith(protocol))) {\n    return false\n  }\n\n  // For absolute URLs, verify same origin\n  if (typeof window !== 'undefined') {\n    try {\n      const url = new URL(href, window.location.origin)\n      return url.origin === window.location.origin\n    } catch {\n      // If URL parsing fails, allow it (likely a relative URL)\n      return true\n    }\n  }\n\n  // SSR fallback - allow relative-looking URLs\n  return true\n}\n\nexport const BreadcrumbEllipsis = React.memo<BreadcrumbEllipsisProps>(\n  ({ orientation = 'horizontal', items, children, className, size = 'md' }) => {\n    const Icon = orientation === 'horizontal' ? MoreHorizontal : MoreVertical\n    const isInteractive = !!(items?.length || children)\n\n    const ellipsisButton = (\n      <span\n        {...(isInteractive && {\n          role: 'button',\n          'aria-label': 'Show more breadcrumbs',\n          tabIndex: 0,\n        })}\n        {...(!isInteractive && {\n          'aria-hidden': true,\n        })}\n        className={cn(\n          'flex items-center justify-center',\n          isInteractive && 'cursor-pointer',\n          className,\n        )}\n      >\n        <Icon className={iconSizes[size]} />\n        <span className=\"sr-only\">More</span>\n      </span>\n    )\n\n    // If items or children are provided, wrap in Dropdown\n    if (items || children) {\n      const dropdownItems = (items || []).map((item) => ({\n        label: item.label || '',\n        value: item.label || '',\n        onClick:\n          item.onClick ||\n          (() => {\n            // Validate URL before navigation to prevent open redirect\n            if (item.href && isValidNavigationUrl(item.href)) {\n              window.location.href = item.href\n            }\n          }),\n      }))\n\n      return <Dropdown items={dropdownItems}>{ellipsisButton}</Dropdown>\n    }\n\n    return ellipsisButton\n  },\n)\n\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\nexport type * from './types'\nexport default Breadcrumb\n"]}

package/dist/chunk-G6QIIWKU.js

@@ -0,0 +1,24 @@
+// src/variants.ts
+var colorVars = {
+  default: "[--_c:var(--color-text-primary)] [--_c-bg:var(--color-surface)] [--_c-fg:var(--color-text-primary)] [--_c-border:var(--color-border)]",
+  primary: "[--_c:var(--color-primary)] [--_c-bg:var(--color-primary)] [--_c-fg:var(--color-primary-foreground)] [--_c-border:var(--color-primary)]",
+  secondary: "[--_c:var(--color-secondary)] [--_c-bg:var(--color-secondary)] [--_c-fg:var(--color-secondary-foreground)] [--_c-border:var(--color-secondary)]",
+  accent: "[--_c:var(--color-accent)] [--_c-bg:var(--color-accent)] [--_c-fg:var(--color-accent-foreground)] [--_c-border:var(--color-accent)]",
+  success: "[--_c:var(--color-success)] [--_c-bg:var(--color-success)] [--_c-fg:var(--color-success-foreground)] [--_c-border:var(--color-success)]",
+  error: "[--_c:var(--color-error)] [--_c-bg:var(--color-error)] [--_c-fg:var(--color-error-foreground)] [--_c-border:var(--color-error)]",
+  warning: "[--_c:var(--color-warning)] [--_c-bg:var(--color-warning)] [--_c-fg:var(--color-warning-foreground)] [--_c-border:var(--color-warning)]",
+  info: "[--_c:var(--color-info)] [--_c-bg:var(--color-info)] [--_c-fg:var(--color-info-foreground)] [--_c-border:var(--color-info)]"
+};
+var buttonColorVars = {
+  primary: colorVars.primary,
+  secondary: colorVars.secondary,
+  accent: colorVars.accent,
+  success: colorVars.success,
+  error: colorVars.error,
+  warning: colorVars.warning,
+  info: colorVars.info
+};
+
+export { buttonColorVars, colorVars };
+//# sourceMappingURL=chunk-G6QIIWKU.js.map
+//# sourceMappingURL=chunk-G6QIIWKU.js.map

package/dist/chunk-G6QIIWKU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/variants.ts"],"names":[],"mappings":";AAgBO,IAAM,SAAA,GAA4C;AAAA,EACvD,OAAA,EACE,uIAAA;AAAA,EACF,OAAA,EACE,yIAAA;AAAA,EACF,SAAA,EACE,iJAAA;AAAA,EACF,MAAA,EACE,qIAAA;AAAA,EACF,OAAA,EACE,yIAAA;AAAA,EACF,KAAA,EACE,iIAAA;AAAA,EACF,OAAA,EACE,yIAAA;AAAA,EACF,IAAA,EAAM;AACR;AAEO,IAAM,eAAA,GAA+C;AAAA,EAC1D,SAAS,SAAA,CAAU,OAAA;AAAA,EACnB,WAAW,SAAA,CAAU,SAAA;AAAA,EACrB,QAAQ,SAAA,CAAU,MAAA;AAAA,EAClB,SAAS,SAAA,CAAU,OAAA;AAAA,EACnB,OAAO,SAAA,CAAU,KAAA;AAAA,EACjB,SAAS,SAAA,CAAU,OAAA;AAAA,EACnB,MAAM,SAAA,CAAU;AAClB","file":"chunk-G6QIIWKU.js","sourcesContent":["import type { ComponentColor, ButtonColor } from \"./types\";\n\n// Color Slot System\n//\n// How it works:\n//   1. Component receives `color=\"primary\"` prop\n//   2. Component applies `colorVars.primary` → sets 4 CSS custom properties\n//   3. Slot utilities (bg-slot, text-slot, border-slot) read those properties\n//\n// Customization — override design tokens in your CSS:\n//\n//   :root {\n//     --color-primary: oklch(65% 0.2 280);\n//     --color-primary-foreground: oklch(100% 0 0);\n//   }\n\nexport const colorVars: Record<ComponentColor, string> = {\n  default:\n    \"[--_c:var(--color-text-primary)] [--_c-bg:var(--color-surface)] [--_c-fg:var(--color-text-primary)] [--_c-border:var(--color-border)]\",\n  primary:\n    \"[--_c:var(--color-primary)] [--_c-bg:var(--color-primary)] [--_c-fg:var(--color-primary-foreground)] [--_c-border:var(--color-primary)]\",\n  secondary:\n    \"[--_c:var(--color-secondary)] [--_c-bg:var(--color-secondary)] [--_c-fg:var(--color-secondary-foreground)] [--_c-border:var(--color-secondary)]\",\n  accent:\n    \"[--_c:var(--color-accent)] [--_c-bg:var(--color-accent)] [--_c-fg:var(--color-accent-foreground)] [--_c-border:var(--color-accent)]\",\n  success:\n    \"[--_c:var(--color-success)] [--_c-bg:var(--color-success)] [--_c-fg:var(--color-success-foreground)] [--_c-border:var(--color-success)]\",\n  error:\n    \"[--_c:var(--color-error)] [--_c-bg:var(--color-error)] [--_c-fg:var(--color-error-foreground)] [--_c-border:var(--color-error)]\",\n  warning:\n    \"[--_c:var(--color-warning)] [--_c-bg:var(--color-warning)] [--_c-fg:var(--color-warning-foreground)] [--_c-border:var(--color-warning)]\",\n  info: \"[--_c:var(--color-info)] [--_c-bg:var(--color-info)] [--_c-fg:var(--color-info-foreground)] [--_c-border:var(--color-info)]\",\n} as const;\n\nexport const buttonColorVars: Record<ButtonColor, string> = {\n  primary: colorVars.primary,\n  secondary: colorVars.secondary,\n  accent: colorVars.accent,\n  success: colorVars.success,\n  error: colorVars.error,\n  warning: colorVars.warning,\n  info: colorVars.info,\n} as const;\n"]}

package/dist/{chunk-UTWQ2FZK.js → chunk-GOBUFGGJ.js}

@@ -1,8 +1,10 @@
-import { Popover, PopoverTrigger, PopoverContent } from './chunk-C5IGZLIT.js';
-import { useRipple, RippleContainer } from './chunk-OFUPJH35.js';
-import { cn } from './chunk-NGYLRX6F.js';
+import { useMenuNavigation } from './chunk-NZHKNUGE.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-ROQGBDET.js';
+import { useRipple, RippleContainer } from './chunk-4TEZWGX7.js';
+import { colorVars } from './chunk-G6QIIWKU.js';
+import { cn } from './chunk-RAS6HUEI.js';
 import { cva } from 'class-variance-authority';
-import React, { useState, useRef, useId, useMemo, useEffect, useCallback } from 'react';
+import React, { useState, useRef, useId, useMemo, useCallback, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var dropdownItemVariants = cva(
@@ -26,31 +28,12 @@ var dropdownItemVariants = cva(
     }
   }
 );
-var dropdownItemHoverClasses = {
-  default: "hover:bg-surface focus:bg-surface",
-  primary: "hover:bg-primary/10 focus:bg-primary/10",
-  secondary: "hover:bg-secondary/10 focus:bg-secondary/10",
-  accent: "hover:bg-accent/10 focus:bg-accent/10",
-  success: "hover:bg-success/10 focus:bg-success/10",
-  error: "hover:bg-error/10 focus:bg-error/10",
-  warning: "hover:bg-warning/10 focus:bg-warning/10",
-  info: "hover:bg-info/10 focus:bg-info/10"
-};
-var dropdownItemHighlightClasses = {
-  default: "bg-surface",
-  primary: "bg-primary/10",
-  secondary: "bg-secondary/10",
-  accent: "bg-accent/10",
-  success: "bg-success/10",
-  error: "bg-error/10",
-  warning: "bg-warning/10",
-  info: "bg-info/10"
-};
 var DropdownItemDiv = ({
   children,
   disabled,
   className,
   onKeyDown: externalOnKeyDown,
+  ref,
   ...props
 }) => {
   const {
@@ -62,6 +45,7 @@ var DropdownItemDiv = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref,
       className: cn(className, "relative overflow-hidden"),
       onPointerDown,
       onKeyDown: (e) => {
@@ -94,7 +78,6 @@ var Dropdown = React.memo(
     ref
   }) => {
     const [isOpen, setIsOpen] = useState(false);
-    const [highlightedIndex, setHighlightedIndex] = useState(-1);
     const menuRef = useRef(null);
     const itemRefs = useRef([]);
     const uniqueId = useId();
@@ -104,18 +87,6 @@ var Dropdown = React.memo(
       () => items?.map((item, i) => !item.disabled ? i : -1).filter((i) => i !== -1) || [],
       [items]
     );
-    useEffect(() => {
-      if (!isOpen) {
-        setHighlightedIndex(-1);
-      }
-    }, [isOpen]);
-    useEffect(() => {
-      if (highlightedIndex >= 0 && itemRefs.current[highlightedIndex]) {
-        itemRefs.current[highlightedIndex]?.scrollIntoView({
-          block: "nearest"
-        });
-      }
-    }, [highlightedIndex]);
     const handleItemClick = useCallback(
       (item) => {
         if (!item.disabled) {
@@ -141,71 +112,37 @@ var Dropdown = React.memo(
         setIsOpen((prev) => !prev);
       }
     }, [disabled]);
-    const handleKeyDown = useCallback(
-      (event) => {
-        if (disabled) return;
-        if (!items?.length) return;
-        const currentEnabledPosition = enabledIndices.indexOf(highlightedIndex);
-        switch (event.key) {
-          case "ArrowDown":
-            event.preventDefault();
-            if (!isOpen) {
-              setIsOpen(true);
-              setHighlightedIndex(enabledIndices[0] ?? -1);
-            } else {
-              const nextIndex = currentEnabledPosition < enabledIndices.length - 1 ? enabledIndices[currentEnabledPosition + 1] : enabledIndices[0];
-              setHighlightedIndex(nextIndex ?? -1);
-            }
-            break;
-          case "ArrowUp":
-            event.preventDefault();
-            if (!isOpen) {
-              setIsOpen(true);
-              setHighlightedIndex(
-                enabledIndices[enabledIndices.length - 1] ?? -1
-              );
-            } else {
-              const prevIndex = currentEnabledPosition > 0 ? enabledIndices[currentEnabledPosition - 1] : enabledIndices[enabledIndices.length - 1];
-              setHighlightedIndex(prevIndex ?? -1);
-            }
-            break;
-          case "Home":
-            event.preventDefault();
-            if (isOpen) {
-              setHighlightedIndex(enabledIndices[0] ?? -1);
-            }
-            break;
-          case "End":
-            event.preventDefault();
-            if (isOpen) {
-              setHighlightedIndex(
-                enabledIndices[enabledIndices.length - 1] ?? -1
-              );
-            }
-            break;
-          case "Enter":
-          case " ":
-            event.preventDefault();
-            if (isOpen && highlightedIndex >= 0 && items[highlightedIndex]) {
-              handleItemClick(items[highlightedIndex]);
-            } else if (!isOpen) {
-              setIsOpen(true);
-            }
-            break;
-          case "Escape":
-            event.preventDefault();
-            setIsOpen(false);
-            break;
-          case "Tab":
-            setIsOpen(false);
-            break;
-        }
+    const onMenuSelect = useCallback(
+      (index) => {
+        if (items?.[index]) handleItemClick(items[index]);
       },
-      [items, isOpen, highlightedIndex, enabledIndices, handleItemClick]
+      [items, handleItemClick]
+    );
+    const {
+      highlightedIndex,
+      setHighlightedIndex,
+      handleKeyDown
+    } = useMenuNavigation({
+      enabledIndices,
+      isOpen,
+      onClose: handleClose,
+      onSelect: onMenuSelect,
+      onOpen: handleOpen
+    });
+    useEffect(() => {
+      if (highlightedIndex >= 0 && itemRefs.current[highlightedIndex]) {
+        itemRefs.current[highlightedIndex]?.scrollIntoView({
+          block: "nearest"
+        });
+      }
+    }, [highlightedIndex]);
+    const wrappedKeyDown = useCallback(
+      (e) => {
+        if (disabled || !items?.length) return;
+        handleKeyDown(e);
+      },
+      [disabled, items, handleKeyDown]
     );
-    const handleItemMouseEnter = useCallback((index) => {
-      setHighlightedIndex(index);
-    }, []);
     return /* @__PURE__ */ jsx(
       "div",
       {
@@ -232,7 +169,7 @@ var Dropdown = React.memo(
               "aria-controls": isOpen ? menuId : void 0,
               "aria-disabled": disabled,
               onClick: hover ? void 0 : handleToggle,
-              onKeyDown: handleKeyDown,
+              onKeyDown: wrappedKeyDown,
               className: cn(
                 "dropdown_trigger flex outline-none",
                 !hover && "cursor-pointer",
@@ -260,9 +197,9 @@ var Dropdown = React.memo(
                   "data-slot": "dropdown-menu",
                   role: "menu",
                   "aria-labelledby": triggerId,
-                  className: cn("dropdown_menu overflow-auto", classNames?.menu),
+                  className: cn("dropdown_menu overflow-auto", colorVars[color], classNames?.menu),
                   style: { maxHeight },
-                  onKeyDown: handleKeyDown,
+                  onKeyDown: wrappedKeyDown,
                   children: render ? render({ close: handleClose }) : items?.map((item, idx) => /* @__PURE__ */ jsxs(
                     DropdownItemDiv,
                     {
@@ -280,12 +217,12 @@ var Dropdown = React.memo(
                           size,
                           disabled: !!item.disabled
                         }),
-                        !item.disabled && dropdownItemHoverClasses[color],
-                        highlightedIndex === idx && !item.disabled && dropdownItemHighlightClasses[color],
+                        !item.disabled && "hover:bg-slot-10 hover:text-slot focus-visible:bg-slot-10 focus-visible:text-slot",
+                        highlightedIndex === idx && !item.disabled && "bg-slot-10 text-slot",
                         classNames?.item
                       ),
                       onClick: () => handleItemClick(item),
-                      onMouseEnter: () => handleItemMouseEnter(idx),
+                      onMouseEnter: () => !item.disabled && setHighlightedIndex(idx),
                       onKeyDown: (e) => {
                         if (e.key === "Enter" || e.key === " ") {
                           e.preventDefault();
@@ -333,5 +270,5 @@ Dropdown.displayName = "Dropdown";
 var dropdown_default = Dropdown;
 
 export { dropdown_default };
-//# sourceMappingURL=chunk-UTWQ2FZK.js.map
-//# sourceMappingURL=chunk-UTWQ2FZK.js.map
+//# sourceMappingURL=chunk-GOBUFGGJ.js.map
+//# sourceMappingURL=chunk-GOBUFGGJ.js.map

package/dist/chunk-GOBUFGGJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dropdown/index.tsx"],"names":[],"mappings":"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","file":"chunk-GOBUFGGJ.js","sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport React, {\n  useCallback,\n  useRef,\n  useId,\n  useState,\n  useEffect,\n  useMemo,\n} from \"react\";\n\nimport { useRipple, RippleContainer } from \"../hooks/useRipple\";\nimport { useMenuNavigation } from \"../hooks/useMenuNavigation\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../popover\";\nimport { cn } from \"../utils\";\nimport { colorVars } from \"../variants\";\nimport type { DropdownProps } from \"./types\";\n\nconst dropdownItemVariants = cva(\n  \"cursor-pointer select-none text-text-primary transition-colors flex items-center gap-2 rounded-sm outline-none\",\n  {\n    variants: {\n      size: {\n        xs: \"px-2 py-1 text-xs\",\n        sm: \"px-3 py-1.5 text-sm\",\n        md: \"px-4 py-2 text-base\",\n        lg: \"px-5 py-2.5 text-lg\",\n      },\n      disabled: {\n        true: \"opacity-50 cursor-not-allowed\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      disabled: false,\n    },\n  },\n);\n\nconst DropdownItemDiv: React.FC<React.HTMLAttributes<HTMLDivElement> & {\n  children: React.ReactNode;\n  disabled?: boolean;\n  ref?: React.Ref<HTMLDivElement>;\n}> = ({\n  children,\n  disabled,\n  className,\n  onKeyDown: externalOnKeyDown,\n  ref,\n  ...props\n}) => {\n  const {\n    ripples,\n    onPointerDown,\n    onKeyDown: rippleOnKeyDown,\n    onAnimationEnd,\n  } = useRipple(!disabled);\n  return (\n    <div\n      ref={ref}\n      className={cn(className, \"relative overflow-hidden\")}\n      onPointerDown={onPointerDown}\n      onKeyDown={(e) => {\n        rippleOnKeyDown(e);\n        externalOnKeyDown?.(e);\n      }}\n      {...props}\n    >\n      {children}\n      <RippleContainer ripples={ripples} onAnimationEnd={onAnimationEnd} />\n    </div>\n  );\n};\n\nconst Dropdown = React.memo<DropdownProps>(\n  ({\n    children,\n    items,\n    render,\n    color = \"default\",\n    size = \"md\",\n    position = \"left\",\n    maxHeight = 300,\n    disabled = false,\n    fullWidth = false,\n    hover = false,\n    className,\n    classNames,\n    onItemClick,\n    ref,\n  }) => {\n    const [isOpen, setIsOpen] = useState(false);\n    const menuRef = useRef<HTMLDivElement>(null);\n    const itemRefs = useRef<(HTMLDivElement | null)[]>([]);\n\n    const uniqueId = useId();\n    const menuId = `dropdown-menu-${uniqueId}`;\n    const triggerId = `dropdown-trigger-${uniqueId}`;\n\n    const enabledIndices = useMemo(\n      () =>\n        items\n          ?.map((item, i) => (!item.disabled ? i : -1))\n          .filter((i) => i !== -1) || [],\n      [items],\n    );\n\n    const handleItemClick = useCallback(\n      (item: NonNullable<typeof items>[0]) => {\n        if (!item.disabled) {\n          item.onClick?.();\n          if (item.value !== undefined) {\n            onItemClick?.(item.value);\n          }\n          setIsOpen(false);\n        }\n      },\n      [onItemClick],\n    );\n\n    const handleClose = useCallback(() => {\n      setIsOpen(false);\n    }, []);\n\n    const handleOpen = useCallback(() => {\n      if (!disabled) {\n        setIsOpen(true);\n      }\n    }, [disabled]);\n\n    const handleToggle = useCallback(() => {\n      if (!disabled) {\n        setIsOpen((prev) => !prev);\n      }\n    }, [disabled]);\n\n    const onMenuSelect = useCallback(\n      (index: number) => {\n        if (items?.[index]) handleItemClick(items[index]);\n      },\n      [items, handleItemClick],\n    );\n\n    const {\n      highlightedIndex,\n      setHighlightedIndex,\n      handleKeyDown,\n    } = useMenuNavigation({\n      enabledIndices,\n      isOpen,\n      onClose: handleClose,\n      onSelect: onMenuSelect,\n      onOpen: handleOpen,\n    });\n\n    // Scroll highlighted item into view\n    useEffect(() => {\n      if (highlightedIndex >= 0 && itemRefs.current[highlightedIndex]) {\n        itemRefs.current[highlightedIndex]?.scrollIntoView({\n          block: \"nearest\",\n        });\n      }\n    }, [highlightedIndex]);\n\n    const wrappedKeyDown = useCallback(\n      (e: React.KeyboardEvent) => {\n        if (disabled || !items?.length) return;\n        handleKeyDown(e);\n      },\n      [disabled, items, handleKeyDown],\n    );\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"dropdown\"\n        className={cn(\n          \"dropdown_root relative\",\n          fullWidth ? \"w-full\" : \"inline-block\",\n          className,\n          classNames?.root,\n        )}\n        onMouseEnter={hover ? handleOpen : undefined}\n        onMouseLeave={hover ? handleClose : undefined}\n      >\n        <Popover open={isOpen} onOpenChange={setIsOpen}>\n          <PopoverTrigger asChild>\n            <div\n              id={triggerId}\n              data-slot=\"dropdown-trigger\"\n              role=\"button\"\n              tabIndex={disabled ? -1 : 0}\n              aria-haspopup=\"menu\"\n              aria-expanded={isOpen}\n              aria-controls={isOpen ? menuId : undefined}\n              aria-disabled={disabled}\n              onClick={hover ? undefined : handleToggle}\n              onKeyDown={wrappedKeyDown}\n              className={cn(\n                \"dropdown_trigger flex outline-none\",\n                !hover && \"cursor-pointer\",\n                fullWidth && \"w-full\",\n                disabled && \"opacity-50 cursor-not-allowed\",\n                classNames?.trigger,\n              )}\n            >\n              {children}\n            </div>\n          </PopoverTrigger>\n\n          <PopoverContent\n            className=\"p-0 min-w-[140px]\"\n            align={position === \"left\" ? \"start\" : \"end\"}\n            sideOffset={4}\n            color={color}\n            style={{ maxHeight }}\n            onOpenAutoFocus={(e: Event) => e.preventDefault()}\n          >\n            <div\n              ref={menuRef}\n              id={menuId}\n              data-slot=\"dropdown-menu\"\n              role=\"menu\"\n              aria-labelledby={triggerId}\n              className={cn(\"dropdown_menu overflow-auto\", colorVars[color], classNames?.menu)}\n              style={{ maxHeight }}\n              onKeyDown={wrappedKeyDown}\n            >\n              {render\n                ? render({ close: handleClose })\n                : items?.map((item, idx) => (\n                    <DropdownItemDiv\n                      key={`${item.value}-${idx}`}\n                      ref={(el: HTMLDivElement | null) => {\n                        itemRefs.current[idx] = el;\n                      }}\n                      data-slot=\"dropdown-item\"\n                      role=\"menuitem\"\n                      tabIndex={item.disabled ? -1 : 0}\n                      aria-disabled={item.disabled}\n                      disabled={!!item.disabled}\n                      className={cn(\n                        \"dropdown_item\",\n                        dropdownItemVariants({\n                          size,\n                          disabled: !!item.disabled,\n                        }),\n                        !item.disabled && 'hover:bg-slot-10 hover:text-slot focus-visible:bg-slot-10 focus-visible:text-slot',\n                        highlightedIndex === idx &&\n                          !item.disabled &&\n                          'bg-slot-10 text-slot',\n                        classNames?.item,\n                      )}\n                      onClick={() => handleItemClick(item)}\n                      onMouseEnter={() => !item.disabled && setHighlightedIndex(idx)}\n                      onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n                        if (e.key === \"Enter\" || e.key === \" \") {\n                          e.preventDefault();\n                          handleItemClick(item);\n                        }\n                      }}\n                    >\n                      {item.icon && (\n                        <span\n                          data-slot=\"dropdown-item-icon\"\n                          className={cn(\n                            \"dropdown_itemIcon shrink-0\",\n                            classNames?.itemIcon,\n                          )}\n                          aria-hidden=\"true\"\n                        >\n                          {item.icon}\n                        </span>\n                      )}\n                      <span\n                        data-slot=\"dropdown-item-label\"\n                        className={cn(\n                          \"dropdown_itemLabel flex-1\",\n                          classNames?.itemLabel,\n                        )}\n                      >\n                        {item.label}\n                      </span>\n                    </DropdownItemDiv>\n                  ))}\n            </div>\n          </PopoverContent>\n        </Popover>\n      </div>\n    );\n  },\n);\n\nDropdown.displayName = \"Dropdown\";\n\nexport type * from \"./types\";\nexport default Dropdown;\n"]}

package/dist/{chunk-WRSG7WU5.js → chunk-HJITFPBT.js}

@@ -1,4 +1,5 @@
-import { getValidationStatus } from './chunk-NGYLRX6F.js';
+import { useMenuNavigation } from './chunk-NZHKNUGE.js';
+import { getValidationStatus } from './chunk-RAS6HUEI.js';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import React, { useId, useCallback } from 'react';
 
@@ -31,7 +32,6 @@ function useSelectBase(config) {
     null
   );
   const [searchQuery, setSearchQuery] = React.useState("");
-  const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
   const [showTopArrow, setShowTopArrow] = React.useState(false);
   const [showBottomArrow, setShowBottomArrow] = React.useState(false);
   const triggerRef = React.useRef(null);
@@ -79,12 +79,16 @@ function useSelectBase(config) {
         (item) => item.type === "option" && item.data.label.toLowerCase().includes(query)
       )
     );
+    const matchingGroups = /* @__PURE__ */ new Set();
+    for (const item of flattenedOptions) {
+      if (item.type === "option" && matchingOptions.has(item)) {
+        const group = item.data.group;
+        if (group) matchingGroups.add(group);
+      }
+    }
     return flattenedOptions.filter((item) => {
       if (item.type === "group") {
-        const groupName = item.data;
-        return flattenedOptions.some(
-          (other) => other.type === "option" && other.data.group === groupName && matchingOptions.has(other)
-        );
+        return matchingGroups.has(item.data);
       }
       return matchingOptions.has(item);
     });
@@ -95,6 +99,58 @@ function useSelectBase(config) {
     ),
     [filteredOptions]
   );
+  const enabledIndices = React.useMemo(
+    () => Array.from({ length: selectableOptions.length }, (_, i) => i),
+    [selectableOptions.length]
+  );
+  const handleMenuClose = React.useCallback(() => {
+    setIsOpen(false);
+    setSearchQuery("");
+    inputRef.current?.blur();
+  }, []);
+  const onMenuSelect = React.useCallback(
+    (index) => {
+      const item = selectableOptions[index];
+      if (item) {
+        onSelectRef.current(item.data);
+      }
+    },
+    [selectableOptions]
+  );
+  const {
+    highlightedIndex,
+    setHighlightedIndex,
+    handleKeyDown: menuHandleKeyDown
+  } = useMenuNavigation({
+    enabledIndices,
+    isOpen,
+    onClose: handleMenuClose,
+    onSelect: onMenuSelect,
+    onOpen: () => setIsOpen(true),
+    loop: false
+  });
+  React.useEffect(() => {
+    setHighlightedIndex(-1);
+  }, [filteredOptions, setHighlightedIndex]);
+  const handleKeyDown = React.useCallback(
+    (e) => {
+      if (isOpen && e.key === " ") {
+        e.stopPropagation();
+        return;
+      }
+      menuHandleKeyDown(e);
+    },
+    [isOpen, menuHandleKeyDown]
+  );
+  const handleKeyUp = React.useCallback(
+    (e) => {
+      if (isOpen && e.key === " ") {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    },
+    [isOpen]
+  );
   const shouldVirtualize = filteredOptions.length > virtualizeThreshold;
   const virtualizer = useVirtualizer({
     count: filteredOptions.length,
@@ -116,16 +172,16 @@ function useSelectBase(config) {
   const handleInputChange = React.useCallback(
     (e) => {
       setSearchQuery(e.target.value);
-      if (!isOpen) setIsOpen(true);
+      setIsOpen(true);
     },
-    [isOpen]
+    []
   );
   const handleInputClick = React.useCallback(
     (e) => {
       e.stopPropagation();
-      if (!isOpen) setIsOpen(true);
+      setIsOpen(true);
     },
-    [isOpen]
+    []
   );
   const handleScroll = React.useCallback(
     (e) => {
@@ -136,89 +192,16 @@ function useSelectBase(config) {
     },
     []
   );
-  const handleKeyDown = React.useCallback(
-    (e) => {
-      if (!isOpen && e.key !== "Tab") {
-        if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
-          e.preventDefault();
-          setIsOpen(true);
-        }
-        return;
-      }
-      const currentSelectableOptions = filteredOptions.filter(
-        (item) => item.type === "option" && !item.data.disabled
-      );
-      switch (e.key) {
-        case "Escape":
-          e.preventDefault();
-          setIsOpen(false);
-          setSearchQuery("");
-          setHighlightedIndex(-1);
-          inputRef.current?.blur();
-          break;
-        case "ArrowDown":
-          e.preventDefault();
-          setHighlightedIndex((prev) => {
-            const nextIndex = Math.min(
-              prev + 1,
-              currentSelectableOptions.length - 1
-            );
-            const option = currentSelectableOptions[nextIndex];
-            if (option) {
-              const optionIndex = filteredOptions.indexOf(option);
-              if (shouldVirtualize && virtualizerRef.current) {
-                virtualizerRef.current.scrollToIndex(optionIndex, {
-                  align: "auto"
-                });
-              }
-            }
-            return nextIndex;
-          });
-          break;
-        case "ArrowUp":
-          e.preventDefault();
-          setHighlightedIndex((prev) => {
-            const nextIndex = Math.max(prev - 1, 0);
-            const option = currentSelectableOptions[nextIndex];
-            if (option) {
-              const optionIndex = filteredOptions.indexOf(option);
-              if (shouldVirtualize && virtualizerRef.current) {
-                virtualizerRef.current.scrollToIndex(optionIndex, {
-                  align: "auto"
-                });
-              }
-            }
-            return nextIndex;
-          });
-          break;
-        case "Enter":
-          e.preventDefault();
-          if (highlightedIndex >= 0 && highlightedIndex < currentSelectableOptions.length) {
-            const item = currentSelectableOptions[highlightedIndex];
-            if (item) {
-              const option = item.data;
-              onSelectRef.current(option);
-            }
-          }
-          break;
-        case "Home":
-          e.preventDefault();
-          setHighlightedIndex(0);
-          if (shouldVirtualize && virtualizerRef.current) {
-            virtualizerRef.current.scrollToIndex(0);
-          }
-          break;
-        case "End":
-          e.preventDefault();
-          setHighlightedIndex(currentSelectableOptions.length - 1);
-          if (shouldVirtualize && virtualizerRef.current) {
-            virtualizerRef.current.scrollToIndex(filteredOptions.length - 1);
-          }
-          break;
+  React.useEffect(() => {
+    if (!shouldVirtualize || highlightedIndex < 0) return;
+    const option = selectableOptions[highlightedIndex];
+    if (option) {
+      const optionIndex = filteredOptions.indexOf(option);
+      if (optionIndex >= 0) {
+        virtualizerRef.current.scrollToIndex(optionIndex, { align: "auto" });
       }
-    },
-    [isOpen, filteredOptions, highlightedIndex, shouldVirtualize]
-  );
+    }
+  }, [highlightedIndex, selectableOptions, filteredOptions, shouldVirtualize]);
   React.useEffect(() => {
     if (isOpen) {
       const timeoutId = setTimeout(() => {
@@ -269,10 +252,11 @@ function useSelectBase(config) {
     handleInputClick,
     handleScroll,
     handleKeyDown,
+    handleKeyUp,
     refCallback
   };
 }
 
 export { useSelectBase };
-//# sourceMappingURL=chunk-WRSG7WU5.js.map
-//# sourceMappingURL=chunk-WRSG7WU5.js.map
+//# sourceMappingURL=chunk-HJITFPBT.js.map
+//# sourceMappingURL=chunk-HJITFPBT.js.map