@mieweb/ui 0.2.2 → 0.3.0-dev.60

package/dist/chunk-QMQE4PDD.cjs

@@ -0,0 +1,615 @@
+'use strict';
+
+var chunk3XK5GENF_cjs = require('./chunk-3XK5GENF.cjs');
+var chunkIKMR2ADM_cjs = require('./chunk-IKMR2ADM.cjs');
+var chunkFHY3K6PL_cjs = require('./chunk-FHY3K6PL.cjs');
+var chunkOR5DRJCW_cjs = require('./chunk-OR5DRJCW.cjs');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+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__namespace.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__namespace.isValidElement(node)) {
+    return getNodeText(node.props.children);
+  }
+  return "";
+}
+function isDropdownElement(node, component) {
+  return React__namespace.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__namespace.isValidElement(node)) {
+    if (typeof node === "string") {
+      return node.trim().length > 0;
+    }
+    return true;
+  }
+  if (node.type === React__namespace.Fragment) {
+    return React__namespace.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__namespace.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__namespace.Children.toArray(children);
+  }
+  const filteredChildren = React__namespace.Children.toArray(children).map((child) => {
+    if (!React__namespace.isValidElement(child)) {
+      if (typeof child === "string" || typeof child === "number") {
+        return String(child).toLowerCase().includes(normalizedQuery) ? child : null;
+      }
+      return null;
+    }
+    if (child.type === React__namespace.Fragment) {
+      const fragmentChildren = filterDropdownChildren(
+        child.props.children,
+        normalizedQuery
+      );
+      return fragmentChildren.length > 0 ? React__namespace.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__namespace.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__namespace.cloneElement(child, void 0, filteredNestedChildren) : null;
+  }).filter((child) => child !== null);
+  return normalizeDropdownSiblings(filteredChildren);
+}
+function getSelectableValues(children) {
+  return React__namespace.Children.toArray(children).flatMap((child) => {
+    if (!React__namespace.isValidElement(
+      child
+    )) {
+      return [];
+    }
+    if (child.type === React__namespace.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__namespace.useState(false);
+  const [uncontrolledSelectedValues, setUncontrolledSelectedValues] = React__namespace.useState(defaultSelectedValues);
+  const [searchQuery, setSearchQuery] = React__namespace.useState("");
+  const containerRef = React__namespace.useRef(null);
+  const searchInputRef = React__namespace.useRef(null);
+  const menuId = React__namespace.useId();
+  const isControlled = controlledOpen !== void 0;
+  const isSelectedValuesControlled = controlledSelectedValues !== void 0;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+  const selectedValues = isSelectedValuesControlled ? controlledSelectedValues : uncontrolledSelectedValues;
+  const setOpen = React__namespace.useCallback(
+    (value) => {
+      if (!isControlled) {
+        setUncontrolledOpen(value);
+      }
+      onOpenChange?.(value);
+    },
+    [isControlled, onOpenChange]
+  );
+  const handleToggle = React__namespace.useCallback(() => {
+    if (!disabled) {
+      setOpen(!isOpen);
+    }
+  }, [disabled, isOpen, setOpen]);
+  const handleClose = React__namespace.useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const setSelectedValues = React__namespace.useCallback(
+    (values) => {
+      if (!isSelectedValuesControlled) {
+        setUncontrolledSelectedValues(values);
+      }
+      onSelectedValuesChange?.(values);
+    },
+    [isSelectedValuesControlled, onSelectedValuesChange]
+  );
+  const toggleSelectedValue = React__namespace.useCallback(
+    (value) => {
+      if (!multiSelect) {
+        return;
+      }
+      setSelectedValues(
+        selectedValues.includes(value) ? selectedValues.filter((selectedValue) => selectedValue !== value) : [...selectedValues, value]
+      );
+    },
+    [multiSelect, selectedValues, setSelectedValues]
+  );
+  const dropdownContext = React__namespace.useMemo(
+    () => ({
+      multiSelect,
+      selectedValues,
+      toggleSelectedValue
+    }),
+    [multiSelect, selectedValues, toggleSelectedValue]
+  );
+  chunkIKMR2ADM_cjs.useClickOutside(containerRef, handleClose, isOpen);
+  chunkFHY3K6PL_cjs.useEscapeKey(handleClose, isOpen);
+  React__namespace.useEffect(() => {
+    if (!isOpen) {
+      setSearchQuery("");
+      return;
+    }
+    if (searchable) {
+      requestAnimationFrame(() => searchInputRef.current?.focus());
+    }
+  }, [isOpen, searchable]);
+  const triggerElement = React__namespace.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__namespace.useMemo(
+    () => filterDropdownChildren(children, searchQuery),
+    [children, searchQuery]
+  );
+  const visibleSelectableValues = React__namespace.useMemo(
+    () => getSelectableValues(searchable ? filteredChildren : children),
+    [children, filteredChildren, searchable]
+  );
+  const hasSearchResults = React__namespace.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__namespace.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__ */ jsxRuntime.jsx(DropdownContext.Provider, { value: dropdownContext, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: "relative inline-flex", children: [
+    triggerElement,
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: widthStyle,
+        "data-slot": "dropdown-menu",
+        className: chunkOR5DRJCW_cjs.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__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "border-b border-neutral-200 p-2 dark:border-neutral-700",
+              "data-slot": "dropdown-search",
+              children: /* @__PURE__ */ jsxRuntime.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: chunkOR5DRJCW_cjs.cn(
+                    chunk3XK5GENF_cjs.inputVariants({ size: "sm" }),
+                    "text-sm",
+                    "dark:border-neutral-600 dark:bg-neutral-700 dark:text-neutral-100"
+                  )
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { id: menuId, role: "menu", children: [
+            multiSelect && showSelectAll && visibleSelectableValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2", "data-slot": "dropdown-select-all", children: /* @__PURE__ */ jsxRuntime.jsx(
+                DropdownItem,
+                {
+                  checked: allVisibleSelected,
+                  indeterminate: !allVisibleSelected && someVisibleSelected,
+                  onClick: handleSelectAll,
+                  children: selectAllLabel
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(DropdownSeparator, {})
+            ] }),
+            searchable ? hasSearchResults ? filteredChildren : /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "px-3 py-4 text-center text-sm text-neutral-500 dark:text-neutral-400",
+                "data-slot": "dropdown-empty",
+                children: searchEmptyState
+              }
+            ) : children
+          ] })
+        ]
+      }
+    )
+  ] }) });
+}
+Dropdown.displayName = "Dropdown";
+var DropdownHeader = React__namespace.forwardRef(
+  ({ className, avatar, title, subtitle, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "dropdown-header",
+        className: chunkOR5DRJCW_cjs.cn(
+          "border-b border-neutral-200 p-4 dark:border-neutral-700",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "flex items-center gap-3",
+              "data-slot": "dropdown-header-row",
+              children: [
+                avatar,
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: "truncate text-sm font-semibold text-neutral-900 dark:text-white",
+                      "data-slot": "dropdown-header-title",
+                      children: title
+                    }
+                  ),
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      className: "truncate text-xs text-neutral-500 dark:text-neutral-400",
+                      "data-slot": "dropdown-header-subtitle",
+                      children: subtitle
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          children
+        ]
+      }
+    );
+  }
+);
+DropdownHeader.displayName = "DropdownHeader";
+var DropdownContent = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "dropdown-content",
+        className: chunkOR5DRJCW_cjs.cn("p-2", className),
+        ...props
+      }
+    );
+  }
+);
+DropdownContent.displayName = "DropdownContent";
+function DropdownItemCheckbox({
+  checked,
+  indeterminate = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-slot": "dropdown-checkbox",
+      className: chunkOR5DRJCW_cjs.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-500 text-white" : "border-input bg-background text-transparent"
+      ),
+      children: indeterminate ? /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "h-3 w-3",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: "M4 8h8",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round"
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          className: "h-3 w-3",
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          children: /* @__PURE__ */ jsxRuntime.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__namespace.forwardRef(
+  ({
+    className,
+    icon,
+    variant = "default",
+    children,
+    searchText,
+    checked,
+    indeterminate = false,
+    onCheckedChange,
+    onClick,
+    value,
+    disabled,
+    ...props
+  }, ref) => {
+    const dropdownContext = React__namespace.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__namespace.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__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        role: isMultiSelectItem ? "menuitemcheckbox" : "menuitem",
+        "aria-checked": isMultiSelectItem ? indeterminate ? "mixed" : isChecked : void 0,
+        disabled,
+        "data-slot": "dropdown-item",
+        className: chunkOR5DRJCW_cjs.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__ */ jsxRuntime.jsx(
+            DropdownItemCheckbox,
+            {
+              checked: isChecked,
+              indeterminate
+            }
+          ),
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-4 w-4 shrink-0", "data-slot": "dropdown-item-icon", children: icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", "data-slot": "dropdown-item-label", children })
+        ]
+      }
+    );
+  }
+);
+DropdownItem.displayName = "DropdownItem";
+function DropdownSeparator({ className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "hr",
+    {
+      "data-slot": "dropdown-separator",
+      className: chunkOR5DRJCW_cjs.cn(
+        "border-t border-neutral-200 dark:border-neutral-700",
+        className
+      )
+    }
+  );
+}
+DropdownSeparator.displayName = "DropdownSeparator";
+function DropdownLabel({
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "dropdown-label",
+      className: chunkOR5DRJCW_cjs.cn(
+        "px-3 py-1.5 text-xs font-semibold tracking-wider uppercase",
+        "text-neutral-500 dark:text-neutral-400",
+        className
+      ),
+      children
+    }
+  );
+}
+DropdownLabel.displayName = "DropdownLabel";
+
+exports.Dropdown = Dropdown;
+exports.DropdownContent = DropdownContent;
+exports.DropdownHeader = DropdownHeader;
+exports.DropdownItem = DropdownItem;
+exports.DropdownLabel = DropdownLabel;
+exports.DropdownSeparator = DropdownSeparator;
+//# sourceMappingURL=chunk-QMQE4PDD.cjs.map
+//# sourceMappingURL=chunk-QMQE4PDD.cjs.map