@mieweb/ui 0.2.4 → 0.3.0-dev.100

package/dist/chunk-BWYYA3LQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Breadcrumb/Breadcrumb.tsx"],"names":["React","jsx","jsxs","cn"],"mappings":"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","file":"chunk-BWYYA3LQ.cjs","sourcesContent":["import * as React from 'react';\nimport { cn } from '../../utils/cn';\n\n// ============================================================================\n// Breadcrumb Types\n// ============================================================================\n\nexport interface BreadcrumbItem {\n  /** Label for the breadcrumb item */\n  label: string;\n  /** URL to navigate to (optional for the last item) */\n  href?: string;\n  /** Icon to display before the label */\n  icon?: React.ReactNode;\n}\n\n// ============================================================================\n// Breadcrumb Component\n// ============================================================================\n\nexport interface BreadcrumbProps {\n  /** Array of breadcrumb items */\n  items: BreadcrumbItem[];\n  /** Custom separator between items */\n  separator?: React.ReactNode;\n  /** Maximum items to display (collapses middle items) */\n  maxItems?: number;\n  /** Custom renderer for links */\n  renderLink?: (item: BreadcrumbItem, index: number) => React.ReactNode;\n  /** Additional class name */\n  className?: string;\n}\n\n/**\n * A navigation breadcrumb component.\n *\n * @example\n * ```tsx\n * <Breadcrumb\n *   items={[\n *     { label: 'Home', href: '/' },\n *     { label: 'Products', href: '/products' },\n *     { label: 'Category', href: '/products/category' },\n *     { label: 'Current Item' },\n *   ]}\n * />\n * ```\n */\nfunction Breadcrumb({\n  items,\n  separator,\n  maxItems,\n  renderLink,\n  className,\n}: BreadcrumbProps) {\n  // Collapse items if maxItems is specified\n  const displayedItems = React.useMemo(() => {\n    if (!maxItems || items.length <= maxItems) {\n      return items;\n    }\n\n    // Show first item, ellipsis, and last (maxItems - 2) items\n    const firstItem = items[0];\n    const lastItems = items.slice(-(maxItems - 1));\n\n    return [\n      firstItem,\n      { label: '...', isEllipsis: true } as BreadcrumbItem & {\n        isEllipsis?: boolean;\n      },\n      ...lastItems,\n    ];\n  }, [items, maxItems]);\n\n  const defaultSeparator = (\n    <ChevronRightIcon className=\"text-muted-foreground h-4 w-4 shrink-0\" />\n  );\n\n  return (\n    <nav data-slot=\"breadcrumb\" aria-label=\"Breadcrumb\" className={className}>\n      <ol\n        data-slot=\"breadcrumb-list\"\n        className=\"flex flex-wrap items-center gap-1.5\"\n      >\n        {displayedItems.map((item, index) => {\n          const isLast = index === displayedItems.length - 1;\n          const isEllipsis = (item as BreadcrumbItem & { isEllipsis?: boolean })\n            .isEllipsis;\n\n          return (\n            <li key={index} className=\"flex items-center gap-1.5\">\n              {index > 0 && (\n                <span data-slot=\"breadcrumb-separator\" aria-hidden=\"true\">\n                  {separator || defaultSeparator}\n                </span>\n              )}\n              {isEllipsis ? (\n                <span\n                  data-slot=\"breadcrumb-ellipsis\"\n                  className=\"text-muted-foreground text-sm\"\n                >\n                  ...\n                </span>\n              ) : isLast || !item.href ? (\n                <BreadcrumbPage item={item} />\n              ) : renderLink ? (\n                <span data-slot=\"breadcrumb-link\">\n                  {renderLink(item, index)}\n                </span>\n              ) : (\n                <BreadcrumbLink item={item} />\n              )}\n            </li>\n          );\n        })}\n      </ol>\n    </nav>\n  );\n}\n\nBreadcrumb.displayName = 'Breadcrumb';\n\n// ============================================================================\n// Breadcrumb Link (Internal)\n// ============================================================================\n\ninterface BreadcrumbLinkProps {\n  item: BreadcrumbItem;\n}\n\nfunction BreadcrumbLink({ item }: BreadcrumbLinkProps) {\n  return (\n    <a\n      href={item.href}\n      data-slot=\"breadcrumb-link\"\n      className={cn(\n        'inline-flex items-center gap-1.5',\n        'text-muted-foreground text-sm',\n        'hover:text-foreground transition-colors',\n        'focus-visible:ring-ring rounded focus-visible:ring-2 focus-visible:outline-none'\n      )}\n    >\n      {item.icon}\n      {item.label}\n    </a>\n  );\n}\n\n// ============================================================================\n// Breadcrumb Page (Current Page - Internal)\n// ============================================================================\n\ninterface BreadcrumbPageProps {\n  item: BreadcrumbItem;\n}\n\nfunction BreadcrumbPage({ item }: BreadcrumbPageProps) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      className=\"text-foreground inline-flex items-center gap-1.5 text-sm font-medium\"\n      aria-current=\"page\"\n    >\n      {item.icon}\n      {item.label}\n    </span>\n  );\n}\n\n// ============================================================================\n// Chevron Icon\n// ============================================================================\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      className={className}\n      aria-hidden=\"true\"\n    >\n      <path d=\"m9 18 6-6-6-6\" />\n    </svg>\n  );\n}\n\n// ============================================================================\n// Slash Separator Component\n// ============================================================================\n\nfunction BreadcrumbSlash({ className }: { className?: string }) {\n  return (\n    <span\n      className={cn('text-muted-foreground mx-1', className)}\n      aria-hidden=\"true\"\n    >\n      /\n    </span>\n  );\n}\n\nexport { Breadcrumb, BreadcrumbSlash };\n"]}

package/dist/chunk-C4QQAUYN.js

@@ -0,0 +1,588 @@
+import { inputVariants } from './chunk-PVUDXJAI.js';
+import { useClickOutside } from './chunk-OKBR6PX4.js';
+import { useEscapeKey } from './chunk-T4ME7QCT.js';
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var placementStyles = {
+  "bottom-start": "top-full left-0 mt-2",
+  "bottom-end": "top-full right-0 mt-2",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-2"
+};
+var DropdownContext = React.createContext(null);
+function getNodeText(node) {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+  if (Array.isArray(node)) {
+    return node.map(getNodeText).join(" ");
+  }
+  if (React.isValidElement(node)) {
+    return getNodeText(node.props.children);
+  }
+  return "";
+}
+function isDropdownElement(node, component) {
+  return React.isValidElement(node) && node.type === component;
+}
+function hasVisibleDropdownContent(node) {
+  if (node == null || typeof node === "boolean") {
+    return false;
+  }
+  if (Array.isArray(node)) {
+    return node.some(hasVisibleDropdownContent);
+  }
+  if (!React.isValidElement(node)) {
+    if (typeof node === "string") {
+      return node.trim().length > 0;
+    }
+    return true;
+  }
+  if (node.type === React.Fragment) {
+    return React.Children.toArray(node.props.children).some(
+      hasVisibleDropdownContent
+    );
+  }
+  if (node.type === DropdownSeparator || node.type === DropdownLabel || node.type === DropdownHeader) {
+    return false;
+  }
+  if (node.type === DropdownContent) {
+    return React.Children.toArray(node.props.children).some(
+      hasVisibleDropdownContent
+    );
+  }
+  return true;
+}
+function normalizeDropdownSiblings(children) {
+  const hasContentBefore = (index) => {
+    for (let current = index - 1; current >= 0; current -= 1) {
+      const child = children[current];
+      if (isDropdownElement(child, DropdownSeparator)) {
+        return false;
+      }
+      if (hasVisibleDropdownContent(child)) {
+        return true;
+      }
+    }
+    return false;
+  };
+  const hasContentAfter = (index) => {
+    for (let current = index + 1; current < children.length; current += 1) {
+      const child = children[current];
+      if (isDropdownElement(child, DropdownSeparator)) {
+        return false;
+      }
+      if (hasVisibleDropdownContent(child)) {
+        return true;
+      }
+    }
+    return false;
+  };
+  return children.filter((child, index) => {
+    if (isDropdownElement(child, DropdownSeparator)) {
+      return hasContentBefore(index) && hasContentAfter(index);
+    }
+    if (isDropdownElement(child, DropdownLabel)) {
+      return hasContentAfter(index);
+    }
+    return true;
+  });
+}
+function filterDropdownChildren(children, query) {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) {
+    return React.Children.toArray(children);
+  }
+  const filteredChildren = React.Children.toArray(children).map((child) => {
+    if (!React.isValidElement(child)) {
+      if (typeof child === "string" || typeof child === "number") {
+        return String(child).toLowerCase().includes(normalizedQuery) ? child : null;
+      }
+      return null;
+    }
+    if (child.type === React.Fragment) {
+      const fragmentChildren = filterDropdownChildren(
+        child.props.children,
+        normalizedQuery
+      );
+      return fragmentChildren.length > 0 ? React.cloneElement(child, void 0, fragmentChildren) : null;
+    }
+    if (isDropdownElement(child, DropdownHeader)) {
+      return child;
+    }
+    if (isDropdownElement(child, DropdownItem)) {
+      const searchText = [
+        getNodeText(child.props.children),
+        child.props.searchText
+      ].filter(Boolean).join(" ").toLowerCase();
+      return searchText.includes(normalizedQuery) ? child : null;
+    }
+    if (isDropdownElement(child, DropdownContent)) {
+      const contentChildren = filterDropdownChildren(
+        child.props.children,
+        normalizedQuery
+      );
+      return hasVisibleDropdownContent(contentChildren) ? React.cloneElement(child, void 0, contentChildren) : null;
+    }
+    if (isDropdownElement(child, DropdownSeparator)) {
+      return child;
+    }
+    if (isDropdownElement(child, DropdownLabel)) {
+      return child;
+    }
+    const nestedChildren = child.props.children;
+    if (nestedChildren === void 0) {
+      return child;
+    }
+    const filteredNestedChildren = filterDropdownChildren(
+      nestedChildren,
+      normalizedQuery
+    );
+    return filteredNestedChildren.length > 0 ? React.cloneElement(child, void 0, filteredNestedChildren) : null;
+  }).filter((child) => child !== null);
+  return normalizeDropdownSiblings(filteredChildren);
+}
+function getSelectableValues(children) {
+  return React.Children.toArray(children).flatMap((child) => {
+    if (!React.isValidElement(
+      child
+    )) {
+      return [];
+    }
+    if (child.type === React.Fragment || child.type === DropdownContent) {
+      return getSelectableValues(child.props.children);
+    }
+    if (isDropdownElement(child, DropdownItem)) {
+      return typeof child.props.value === "string" ? [child.props.value] : [];
+    }
+    return child.props.children !== void 0 ? getSelectableValues(child.props.children) : [];
+  });
+}
+function Dropdown({
+  trigger,
+  children,
+  open: controlledOpen,
+  onOpenChange,
+  placement = "bottom-start",
+  className,
+  width = "auto",
+  disabled = false,
+  searchable = false,
+  searchPlaceholder = "Search...",
+  searchAriaLabel = "Search dropdown items",
+  searchEmptyState = "No results found",
+  multiSelect = false,
+  selectedValues: controlledSelectedValues,
+  defaultSelectedValues = [],
+  onSelectedValuesChange,
+  showSelectAll = false,
+  selectAllLabel = "Select all"
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const [uncontrolledSelectedValues, setUncontrolledSelectedValues] = React.useState(defaultSelectedValues);
+  const [searchQuery, setSearchQuery] = React.useState("");
+  const containerRef = React.useRef(null);
+  const searchInputRef = React.useRef(null);
+  const menuId = React.useId();
+  const isControlled = controlledOpen !== void 0;
+  const isSelectedValuesControlled = controlledSelectedValues !== void 0;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+  const selectedValues = isSelectedValuesControlled ? controlledSelectedValues : uncontrolledSelectedValues;
+  const setOpen = React.useCallback(
+    (value) => {
+      if (!isControlled) {
+        setUncontrolledOpen(value);
+      }
+      onOpenChange?.(value);
+    },
+    [isControlled, onOpenChange]
+  );
+  const handleToggle = React.useCallback(() => {
+    if (!disabled) {
+      setOpen(!isOpen);
+    }
+  }, [disabled, isOpen, setOpen]);
+  const handleClose = React.useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const setSelectedValues = React.useCallback(
+    (values) => {
+      if (!isSelectedValuesControlled) {
+        setUncontrolledSelectedValues(values);
+      }
+      onSelectedValuesChange?.(values);
+    },
+    [isSelectedValuesControlled, onSelectedValuesChange]
+  );
+  const toggleSelectedValue = React.useCallback(
+    (value) => {
+      if (!multiSelect) {
+        return;
+      }
+      setSelectedValues(
+        selectedValues.includes(value) ? selectedValues.filter((selectedValue) => selectedValue !== value) : [...selectedValues, value]
+      );
+    },
+    [multiSelect, selectedValues, setSelectedValues]
+  );
+  const dropdownContext = React.useMemo(
+    () => ({
+      multiSelect,
+      selectedValues,
+      toggleSelectedValue
+    }),
+    [multiSelect, selectedValues, toggleSelectedValue]
+  );
+  useClickOutside(containerRef, handleClose, isOpen);
+  useEscapeKey(handleClose, isOpen);
+  React.useEffect(() => {
+    if (!isOpen) {
+      setSearchQuery("");
+      return;
+    }
+    if (searchable) {
+      requestAnimationFrame(() => searchInputRef.current?.focus());
+    }
+  }, [isOpen, searchable]);
+  const triggerElement = React.cloneElement(trigger, {
+    onClick: handleToggle,
+    "aria-haspopup": "menu",
+    "aria-expanded": isOpen,
+    "aria-controls": isOpen ? menuId : void 0,
+    disabled: disabled || trigger.props.disabled
+  });
+  const widthStyle = typeof width === "number" ? { width: `${width}px` } : width === "trigger" ? { minWidth: "100%" } : {};
+  const filteredChildren = React.useMemo(
+    () => filterDropdownChildren(children, searchQuery),
+    [children, searchQuery]
+  );
+  const visibleSelectableValues = React.useMemo(
+    () => getSelectableValues(searchable ? filteredChildren : children),
+    [children, filteredChildren, searchable]
+  );
+  const hasSearchResults = React.useMemo(
+    () => hasVisibleDropdownContent(filteredChildren),
+    [filteredChildren]
+  );
+  const allVisibleSelected = visibleSelectableValues.length > 0 && visibleSelectableValues.every((value) => selectedValues.includes(value));
+  const someVisibleSelected = visibleSelectableValues.some(
+    (value) => selectedValues.includes(value)
+  );
+  const handleSelectAll = React.useCallback(() => {
+    if (!multiSelect || visibleSelectableValues.length === 0) {
+      return;
+    }
+    const visibleValueSet = new Set(visibleSelectableValues);
+    setSelectedValues(
+      allVisibleSelected ? selectedValues.filter((value) => !visibleValueSet.has(value)) : Array.from(/* @__PURE__ */ new Set([...selectedValues, ...visibleSelectableValues]))
+    );
+  }, [
+    allVisibleSelected,
+    multiSelect,
+    selectedValues,
+    setSelectedValues,
+    visibleSelectableValues
+  ]);
+  return /* @__PURE__ */ jsx(DropdownContext.Provider, { value: dropdownContext, children: /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative inline-flex", children: [
+    triggerElement,
+    isOpen && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: widthStyle,
+        "data-slot": "dropdown-menu",
+        className: cn(
+          "absolute z-50 min-w-[12rem]",
+          "rounded-xl border border-neutral-200 bg-white shadow-lg",
+          "dark:border-neutral-700 dark:bg-neutral-800",
+          "animate-in fade-in zoom-in-95 duration-100",
+          placementStyles[placement],
+          className
+        ),
+        children: [
+          searchable && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "border-b border-neutral-200 p-2 dark:border-neutral-700",
+              "data-slot": "dropdown-search",
+              children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  ref: searchInputRef,
+                  type: "search",
+                  value: searchQuery,
+                  onChange: (event) => setSearchQuery(event.target.value),
+                  placeholder: searchPlaceholder,
+                  "aria-label": searchAriaLabel,
+                  "aria-controls": menuId,
+                  "aria-autocomplete": "list",
+                  "data-slot": "dropdown-search-input",
+                  className: cn(
+                    inputVariants({ size: "sm" }),
+                    "text-sm",
+                    "dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100"
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { id: menuId, role: "menu", children: [
+            multiSelect && showSelectAll && visibleSelectableValues.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("div", { className: "p-2", "data-slot": "dropdown-select-all", children: /* @__PURE__ */ jsx(
+                DropdownItem,
+                {
+                  checked: allVisibleSelected,
+                  indeterminate: !allVisibleSelected && someVisibleSelected,
+                  onClick: handleSelectAll,
+                  children: selectAllLabel
+                }
+              ) }),
+              /* @__PURE__ */ jsx(DropdownSeparator, {})
+            ] }),
+            searchable ? hasSearchResults ? filteredChildren : /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "text-muted-foreground px-3 py-4 text-center text-sm",
+                "data-slot": "dropdown-empty",
+                children: searchEmptyState
+              }
+            ) : children
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+Dropdown.displayName = "Dropdown";
+var DropdownHeader = React.forwardRef(
+  ({ className, avatar, title, subtitle, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "dropdown-header",
+        className: cn(
+          "border-b border-neutral-200 p-4 dark:border-neutral-700",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "flex items-center gap-3",
+              "data-slot": "dropdown-header-row",
+              children: [
+                avatar,
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: "truncate text-sm font-semibold text-neutral-900 dark:text-white",
+                      "data-slot": "dropdown-header-title",
+                      children: title
+                    }
+                  ),
+                  subtitle && /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: "text-muted-foreground truncate text-xs",
+                      "data-slot": "dropdown-header-subtitle",
+                      children: subtitle
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+DropdownHeader.displayName = "DropdownHeader";
+var DropdownContent = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "dropdown-content",
+        className: cn("p-2", className),
+        ...props
+      }
+    );
+  }
+);
+DropdownContent.displayName = "DropdownContent";
+function DropdownItemCheckbox({
+  checked,
+  indeterminate = false
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "dropdown-checkbox",
+      className: cn(
+        "flex h-4 w-4 shrink-0 items-center justify-center rounded border-2 transition-colors duration-150",
+        checked || indeterminate ? "border-primary-500 bg-primary-800 text-white" : "border-input bg-background text-transparent"
+      ),
+      children: indeterminate ? /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "h-3 w-3",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M4 8h8",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round"
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx(
+        "svg",
+        {
+          className: "h-3 w-3",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          children: /* @__PURE__ */ jsx(
+            "path",
+            {
+              d: "M3.5 8.5 6.5 11.5 12.5 4.5",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      )
+    }
+  );
+}
+var DropdownItem = React.forwardRef(
+  ({
+    className,
+    icon,
+    variant = "default",
+    children,
+    searchText,
+    checked,
+    indeterminate = false,
+    onCheckedChange,
+    onClick,
+    value,
+    disabled,
+    ...props
+  }, ref) => {
+    const dropdownContext = React.useContext(DropdownContext);
+    const itemValue = typeof value === "string" ? value : void 0;
+    const contextSelectedValues = dropdownContext?.selectedValues ?? [];
+    const isMultiSelectItem = dropdownContext?.multiSelect === true && itemValue !== void 0 || checked !== void 0 || indeterminate;
+    const isChecked = checked ?? (isMultiSelectItem ? itemValue !== void 0 && contextSelectedValues.includes(itemValue) : false);
+    const handleClick = React.useCallback(
+      (event) => {
+        if (dropdownContext && isMultiSelectItem && itemValue !== void 0 && !disabled) {
+          dropdownContext.toggleSelectedValue(itemValue);
+          onCheckedChange?.(!isChecked);
+        }
+        onClick?.(event);
+      },
+      [
+        disabled,
+        dropdownContext,
+        isChecked,
+        isMultiSelectItem,
+        itemValue,
+        onCheckedChange,
+        onClick
+      ]
+    );
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: isMultiSelectItem ? "menuitemcheckbox" : "menuitem",
+        "aria-checked": isMultiSelectItem ? indeterminate ? "mixed" : isChecked : void 0,
+        disabled,
+        "data-slot": "dropdown-item",
+        className: cn(
+          "flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-sm",
+          "transition-colors duration-150",
+          "focus:outline-none",
+          variant === "default" && [
+            "text-neutral-700 dark:text-neutral-300",
+            "hover:bg-neutral-100 dark:hover:bg-neutral-700",
+            "focus:bg-neutral-100 dark:focus:bg-neutral-700"
+          ],
+          variant === "danger" && [
+            "text-red-600 dark:text-red-400",
+            "hover:bg-red-50 dark:hover:bg-red-900/20",
+            "focus:bg-red-50 dark:focus:bg-red-900/20"
+          ],
+          className
+        ),
+        "data-search-text": searchText,
+        onClick: handleClick,
+        value,
+        ...props,
+        children: [
+          isMultiSelectItem && /* @__PURE__ */ jsx(
+            DropdownItemCheckbox,
+            {
+              checked: isChecked,
+              indeterminate
+            }
+          ),
+          icon && /* @__PURE__ */ jsx("span", { className: "h-4 w-4 shrink-0", "data-slot": "dropdown-item-icon", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", "data-slot": "dropdown-item-label", children })
+        ]
+      }
+    );
+  }
+);
+DropdownItem.displayName = "DropdownItem";
+function DropdownSeparator({ className }) {
+  return /* @__PURE__ */ jsx(
+    "hr",
+    {
+      "data-slot": "dropdown-separator",
+      className: cn(
+        "border-t border-neutral-200 dark:border-neutral-700",
+        className
+      )
+    }
+  );
+}
+DropdownSeparator.displayName = "DropdownSeparator";
+function DropdownLabel({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dropdown-label",
+      className: cn(
+        "px-3 py-1.5 text-xs font-semibold tracking-wider uppercase",
+        "text-muted-foreground",
+        className
+      ),
+      children
+    }
+  );
+}
+DropdownLabel.displayName = "DropdownLabel";
+
+export { Dropdown, DropdownContent, DropdownHeader, DropdownItem, DropdownLabel, DropdownSeparator };
+//# sourceMappingURL=chunk-C4QQAUYN.js.map
+//# sourceMappingURL=chunk-C4QQAUYN.js.map