@mdigital_ui/ui 0.4.0 → 0.4.1

package/dist/chunk-VOODO2ZE.js

@@ -0,0 +1,180 @@
+import { cn } from './chunk-NGYLRX6F.js';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var dividerVariants = cva("", {
+  variants: {
+    orientation: {
+      horizontal: "w-full",
+      vertical: "h-full"
+    },
+    variant: {
+      solid: "border-solid",
+      dashed: "border-dashed",
+      dotted: "border-dotted"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "solid"
+  }
+});
+var dividerBorderColorClasses = {
+  default: "border-border",
+  primary: "border-primary",
+  secondary: "border-secondary",
+  accent: "border-accent",
+  success: "border-success",
+  error: "border-error",
+  warning: "border-warning",
+  info: "border-info"
+};
+var dividerLabelColorClasses = {
+  default: "text-text-secondary",
+  primary: "text-primary",
+  secondary: "text-secondary",
+  accent: "text-accent",
+  success: "text-success",
+  error: "text-error",
+  warning: "text-warning",
+  info: "text-info"
+};
+var textAlignClasses = {
+  left: {
+    before: "w-(--divider-left-before-width)",
+    after: "w-(--divider-left-after-width)"
+  },
+  center: {
+    before: "w-(--divider-center-before-width)",
+    after: "w-(--divider-center-after-width)"
+  },
+  right: {
+    before: "w-(--divider-right-before-width)",
+    after: "w-(--divider-right-after-width)"
+  }
+};
+var Divider = React.memo(
+  ({
+    orientation = "horizontal",
+    variant = "solid",
+    color = "default",
+    children,
+    textAlign = "center",
+    spacing,
+    className,
+    classNames,
+    ref,
+    ...props
+  }) => {
+    const hasText = Boolean(children);
+    if (orientation === "horizontal") {
+      if (hasText) {
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref,
+            role: "separator",
+            "aria-orientation": "horizontal",
+            "data-slot": "root",
+            className: cn(
+              "divider_root",
+              "flex items-center gap-(--divider-gap) text-sm",
+              dividerLabelColorClasses[color],
+              className,
+              classNames?.root
+            ),
+            style: spacing ? { margin: spacing } : void 0,
+            ...props,
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "line",
+                  className: cn(
+                    "divider_line",
+                    "border-t",
+                    dividerVariants({ variant }),
+                    dividerBorderColorClasses[color],
+                    textAlignClasses[textAlign].before,
+                    classNames?.line
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-slot": "label",
+                  className: cn(
+                    "divider_label",
+                    "whitespace-nowrap flex-shrink-0",
+                    classNames?.label
+                  ),
+                  children
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-slot": "line",
+                  className: cn(
+                    "divider_line",
+                    "border-t",
+                    dividerVariants({ variant }),
+                    dividerBorderColorClasses[color],
+                    textAlignClasses[textAlign].after,
+                    classNames?.line
+                  )
+                }
+              )
+            ]
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx(
+        "hr",
+        {
+          ref,
+          role: "separator",
+          "aria-orientation": "horizontal",
+          "data-slot": "root",
+          className: cn(
+            "divider_root",
+            "border-t",
+            dividerVariants({ orientation, variant }),
+            dividerBorderColorClasses[color],
+            className,
+            classNames?.root
+          ),
+          style: spacing ? { margin: spacing } : void 0,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        "aria-orientation": "vertical",
+        "data-slot": "root",
+        className: cn(
+          "divider_root",
+          "inline-block w-px border-l self-stretch",
+          dividerVariants({ variant }),
+          dividerBorderColorClasses[color],
+          className,
+          classNames?.root
+        ),
+        style: spacing ? { margin: spacing } : void 0,
+        ...props
+      }
+    );
+  }
+);
+Divider.displayName = "Divider";
+var divider_default = Divider;
+
+export { divider_default };
+//# sourceMappingURL=chunk-VOODO2ZE.js.map
+//# sourceMappingURL=chunk-VOODO2ZE.js.map

package/dist/chunk-VOODO2ZE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/divider/index.tsx"],"names":[],"mappings":"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","file":"chunk-VOODO2ZE.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport type { ComponentColor } from '../types'\nimport { cn } from '../utils'\nimport type { DividerProps } from './types'\n\n/**\n * Class variance authority configuration for the Divider component\n * Defines style variants for orientation, line style, and text alignment\n */\nconst dividerVariants = cva('', {\n  variants: {\n    orientation: {\n      horizontal: 'w-full',\n      vertical: 'h-full',\n    },\n    variant: {\n      solid: 'border-solid',\n      dashed: 'border-dashed',\n      dotted: 'border-dotted',\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n    variant: 'solid',\n  },\n})\n\n/**\n * Border color classes for the divider line\n */\nconst dividerBorderColorClasses: Record<ComponentColor, string> = {\n  default: 'border-border',\n  primary: 'border-primary',\n  secondary: 'border-secondary',\n  accent: 'border-accent',\n  success: 'border-success',\n  error: 'border-error',\n  warning: 'border-warning',\n  info: 'border-info',\n}\n\n/**\n * Text color classes for the divider label\n */\nconst dividerLabelColorClasses: Record<ComponentColor, string> = {\n  default: 'text-text-secondary',\n  primary: 'text-primary',\n  secondary: 'text-secondary',\n  accent: 'text-accent',\n  success: 'text-success',\n  error: 'text-error',\n  warning: 'text-warning',\n  info: 'text-info',\n}\n\n/**\n * Text alignment styles for the label within the divider\n * Defines the width distribution of divider lines before and after the label\n * Uses design tokens for customizability\n */\nconst textAlignClasses = {\n  left: {\n    before: 'w-(--divider-left-before-width)',\n    after: 'w-(--divider-left-after-width)',\n  },\n  center: {\n    before: 'w-(--divider-center-before-width)',\n    after: 'w-(--divider-center-after-width)',\n  },\n  right: {\n    before: 'w-(--divider-right-before-width)',\n    after: 'w-(--divider-right-after-width)',\n  },\n}\n\n/**\n * Divider Component\n *\n * A visual separator that can be used to divide content sections.\n * Supports horizontal and vertical orientations, different line styles,\n * color variants, and optional label text.\n *\n * @component\n * @example\n * // Basic horizontal divider\n * <Divider />\n *\n * @example\n * // Divider with text label\n * <Divider>Section Title</Divider>\n *\n * @example\n * // Colored divider\n * <Divider color=\"primary\" />\n *\n * @example\n * // Vertical divider\n * <Divider orientation=\"vertical\" />\n *\n * @example\n * // Dashed divider with left-aligned text\n * <Divider variant=\"dashed\" textAlign=\"left\" color=\"accent\">\n *   Options\n * </Divider>\n *\n * @param {DividerProps} props - Component props\n * @returns {JSX.Element} Rendered divider component\n */\nconst Divider = React.memo<DividerProps>(\n  ({\n    orientation = 'horizontal',\n    variant = 'solid',\n    color = 'default',\n    children,\n    textAlign = 'center',\n    spacing,\n    className,\n    classNames,\n    ref,\n    ...props\n  }) => {\n    const hasText = Boolean(children)\n\n    /**\n     * Render horizontal divider\n     * Supports optional text label with configurable alignment\n     */\n    if (orientation === 'horizontal') {\n      if (hasText) {\n        return (\n          <div\n            ref={ref as React.Ref<HTMLDivElement>}\n            role=\"separator\"\n            aria-orientation=\"horizontal\"\n            data-slot=\"root\"\n            className={cn(\n              'divider_root',\n              'flex items-center gap-(--divider-gap) text-sm',\n              dividerLabelColorClasses[color],\n              className,\n              classNames?.root,\n            )}\n            style={spacing ? { margin: spacing } : undefined}\n            {...props}\n          >\n            <div\n              data-slot=\"line\"\n              className={cn(\n                'divider_line',\n                'border-t',\n                dividerVariants({ variant }),\n                dividerBorderColorClasses[color],\n                textAlignClasses[textAlign].before,\n                classNames?.line,\n              )}\n            />\n            <span\n              data-slot=\"label\"\n              className={cn(\n                'divider_label',\n                'whitespace-nowrap flex-shrink-0',\n                classNames?.label,\n              )}\n            >\n              {children}\n            </span>\n            <div\n              data-slot=\"line\"\n              className={cn(\n                'divider_line',\n                'border-t',\n                dividerVariants({ variant }),\n                dividerBorderColorClasses[color],\n                textAlignClasses[textAlign].after,\n                classNames?.line,\n              )}\n            />\n          </div>\n        )\n      }\n\n      return (\n        <hr\n          ref={ref as React.Ref<HTMLHRElement>}\n          role=\"separator\"\n          aria-orientation=\"horizontal\"\n          data-slot=\"root\"\n          className={cn(\n            'divider_root',\n            'border-t',\n            dividerVariants({ orientation, variant }),\n            dividerBorderColorClasses[color],\n            className,\n            classNames?.root,\n          )}\n          style={spacing ? { margin: spacing } : undefined}\n          {...props}\n        />\n      )\n    }\n\n    /**\n     * Render vertical divider\n     * Text labels are not supported in vertical orientation\n     */\n\n    return (\n      <div\n        ref={ref as React.Ref<HTMLDivElement>}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        data-slot=\"root\"\n        className={cn(\n          'divider_root',\n          'inline-block w-px border-l self-stretch',\n          dividerVariants({ variant }),\n          dividerBorderColorClasses[color],\n          className,\n          classNames?.root,\n        )}\n        style={spacing ? { margin: spacing } : undefined}\n        {...props}\n      />\n    )\n  },\n)\n\nDivider.displayName = 'Divider'\n\nexport type * from './types'\nexport default Divider\n"]}

package/dist/chunk-WRSG7WU5.js

@@ -0,0 +1,278 @@
+import { getValidationStatus } from './chunk-NGYLRX6F.js';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import React, { useId, useCallback } from 'react';
+
+function useSelectBase(config) {
+  const {
+    options,
+    virtualizeThreshold = 50,
+    maxDropdownHeight = 300,
+    label,
+    idPrefix,
+    error,
+    warning,
+    info,
+    success,
+    helperText
+  } = config;
+  const uniqueId = useId();
+  const labelId = `${idPrefix}-label-${uniqueId}`;
+  const listboxId = `${idPrefix}-listbox-${uniqueId}`;
+  const helperId = `${idPrefix}-helper-${uniqueId}`;
+  const { status, message: helperMessage } = getValidationStatus({
+    error,
+    warning,
+    info,
+    success,
+    helperText
+  });
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [parentNode, setParentNode] = React.useState(
+    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);
+  const inputRef = React.useRef(null);
+  const scrollContainerRef = React.useRef(null);
+  const onSelectRef = React.useRef(config.onSelectOption);
+  React.useEffect(() => {
+    onSelectRef.current = config.onSelectOption;
+  }, [config.onSelectOption]);
+  const groupedOptions = React.useMemo(() => {
+    const groups = {};
+    const ungrouped = [];
+    options.forEach((option) => {
+      if (option.group) {
+        if (!groups[option.group]) {
+          groups[option.group] = [];
+        }
+        groups[option.group].push(option);
+      } else {
+        ungrouped.push(option);
+      }
+    });
+    return { groups, ungrouped };
+  }, [options]);
+  const flattenedOptions = React.useMemo(() => {
+    const items = [];
+    groupedOptions.ungrouped.forEach((option) => {
+      items.push({ type: "option", data: option });
+    });
+    Object.entries(groupedOptions.groups).forEach(
+      ([groupName, groupOptions]) => {
+        items.push({ type: "group", data: groupName });
+        groupOptions.forEach((option) => {
+          items.push({ type: "option", data: option });
+        });
+      }
+    );
+    return items;
+  }, [groupedOptions]);
+  const filteredOptions = React.useMemo(() => {
+    if (!searchQuery) return flattenedOptions;
+    const query = searchQuery.toLowerCase();
+    const matchingOptions = new Set(
+      flattenedOptions.filter(
+        (item) => item.type === "option" && item.data.label.toLowerCase().includes(query)
+      )
+    );
+    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 matchingOptions.has(item);
+    });
+  }, [flattenedOptions, searchQuery]);
+  const selectableOptions = React.useMemo(
+    () => filteredOptions.filter(
+      (item) => item.type === "option" && !item.data.disabled
+    ),
+    [filteredOptions]
+  );
+  const shouldVirtualize = filteredOptions.length > virtualizeThreshold;
+  const virtualizer = useVirtualizer({
+    count: filteredOptions.length,
+    getScrollElement: () => parentNode,
+    estimateSize: () => 40,
+    enabled: shouldVirtualize,
+    overscan: 10
+  });
+  const virtualizerRef = React.useRef(virtualizer);
+  React.useEffect(() => {
+    virtualizerRef.current = virtualizer;
+  }, [virtualizer]);
+  const refCallback = useCallback((node) => {
+    if (node) {
+      setParentNode(node);
+      scrollContainerRef.current = node;
+    }
+  }, []);
+  const handleInputChange = React.useCallback(
+    (e) => {
+      setSearchQuery(e.target.value);
+      if (!isOpen) setIsOpen(true);
+    },
+    [isOpen]
+  );
+  const handleInputClick = React.useCallback(
+    (e) => {
+      e.stopPropagation();
+      if (!isOpen) setIsOpen(true);
+    },
+    [isOpen]
+  );
+  const handleScroll = React.useCallback(
+    (e) => {
+      const element = e.currentTarget;
+      const { scrollTop, scrollHeight, clientHeight } = element;
+      setShowTopArrow(scrollTop > 0);
+      setShowBottomArrow(scrollTop + clientHeight < scrollHeight - 1);
+    },
+    []
+  );
+  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;
+      }
+    },
+    [isOpen, filteredOptions, highlightedIndex, shouldVirtualize]
+  );
+  React.useEffect(() => {
+    if (isOpen) {
+      const timeoutId = setTimeout(() => {
+        const element = scrollContainerRef.current;
+        if (element) {
+          const { scrollTop, scrollHeight, clientHeight } = element;
+          setShowTopArrow(scrollTop > 0);
+          setShowBottomArrow(scrollTop + clientHeight < scrollHeight - 1);
+        }
+      }, 50);
+      return () => clearTimeout(timeoutId);
+    } else {
+      setShowTopArrow(false);
+      setShowBottomArrow(false);
+      return void 0;
+    }
+  }, [isOpen, filteredOptions, shouldVirtualize]);
+  return {
+    // State
+    isOpen,
+    setIsOpen,
+    searchQuery,
+    setSearchQuery,
+    highlightedIndex,
+    setHighlightedIndex,
+    showTopArrow,
+    showBottomArrow,
+    // Refs
+    triggerRef,
+    inputRef,
+    scrollContainerRef,
+    // Computed
+    filteredOptions,
+    selectableOptions,
+    shouldVirtualize,
+    virtualizer,
+    maxDropdownHeight,
+    label,
+    // IDs & validation
+    uniqueId,
+    labelId,
+    listboxId,
+    helperId,
+    status,
+    helperMessage,
+    // Handlers
+    handleInputChange,
+    handleInputClick,
+    handleScroll,
+    handleKeyDown,
+    refCallback
+  };
+}
+
+export { useSelectBase };
+//# sourceMappingURL=chunk-WRSG7WU5.js.map
+//# sourceMappingURL=chunk-WRSG7WU5.js.map

package/dist/chunk-WRSG7WU5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/shared/useSelectBase.ts"],"names":[],"mappings":"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","file":"chunk-WRSG7WU5.js","sourcesContent":["import { useVirtualizer } from \"@tanstack/react-virtual\";\nimport React, { useCallback, useId } from \"react\";\n\nimport { getValidationStatus } from \"../utils\";\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface SelectBaseOption {\n  value: string | number;\n  label: string;\n  disabled?: boolean;\n  group?: string;\n}\n\nexport interface UseSelectBaseConfig<O extends SelectBaseOption> {\n  options: O[];\n  /** Called when the user presses Enter on a highlighted option (or clicks one via the hook's helpers). */\n  onSelectOption: (option: O) => void;\n  virtualizeThreshold?: number;\n  maxDropdownHeight?: number;\n  label?: string;\n  idPrefix: string; // 'select' or 'multiselect'\n  error?: string | boolean;\n  warning?: string | boolean;\n  info?: string | boolean;\n  success?: string | boolean;\n  helperText?: string;\n}\n\nexport interface FlattenedItem<O extends SelectBaseOption> {\n  type: \"option\" | \"group\";\n  data: O | string;\n}\n\n// ---------------------------------------------------------------------------\n// Hook\n// ---------------------------------------------------------------------------\n\nexport function useSelectBase<O extends SelectBaseOption>(\n  config: UseSelectBaseConfig<O>,\n) {\n  const {\n    options,\n    virtualizeThreshold = 50,\n    maxDropdownHeight = 300,\n    label,\n    idPrefix,\n    error,\n    warning,\n    info,\n    success,\n    helperText,\n  } = config;\n\n  // -- IDs / validation -------------------------------------------------------\n  const uniqueId = useId();\n  const labelId = `${idPrefix}-label-${uniqueId}`;\n  const listboxId = `${idPrefix}-listbox-${uniqueId}`;\n  const helperId = `${idPrefix}-helper-${uniqueId}`;\n\n  const { status, message: helperMessage } = getValidationStatus({\n    error,\n    warning,\n    info,\n    success,\n    helperText,\n  });\n\n  // -- State ------------------------------------------------------------------\n  const [isOpen, setIsOpen] = React.useState(false);\n  const [parentNode, setParentNode] = React.useState<HTMLDivElement | null>(\n    null,\n  );\n  const [searchQuery, setSearchQuery] = React.useState(\"\");\n  const [highlightedIndex, setHighlightedIndex] = React.useState(-1);\n  const [showTopArrow, setShowTopArrow] = React.useState(false);\n  const [showBottomArrow, setShowBottomArrow] = React.useState(false);\n\n  // -- Refs -------------------------------------------------------------------\n  const triggerRef = React.useRef<HTMLButtonElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const scrollContainerRef = React.useRef<HTMLDivElement>(null);\n\n  // Store onSelectOption in a ref so handleKeyDown doesn't depend on it\n  const onSelectRef = React.useRef(config.onSelectOption);\n  React.useEffect(() => {\n    onSelectRef.current = config.onSelectOption;\n  }, [config.onSelectOption]);\n\n  // -- Memos ------------------------------------------------------------------\n  const groupedOptions = React.useMemo(() => {\n    const groups: Record<string, O[]> = {};\n    const ungrouped: O[] = [];\n\n    options.forEach((option) => {\n      if (option.group) {\n        if (!groups[option.group]) {\n          groups[option.group] = [];\n        }\n        groups[option.group]!.push(option);\n      } else {\n        ungrouped.push(option);\n      }\n    });\n\n    return { groups, ungrouped };\n  }, [options]);\n\n  const flattenedOptions = React.useMemo(() => {\n    const items: Array<FlattenedItem<O>> = [];\n\n    groupedOptions.ungrouped.forEach((option) => {\n      items.push({ type: \"option\", data: option });\n    });\n\n    Object.entries(groupedOptions.groups).forEach(\n      ([groupName, groupOptions]) => {\n        items.push({ type: \"group\", data: groupName });\n        (groupOptions as O[]).forEach((option) => {\n          items.push({ type: \"option\", data: option });\n        });\n      },\n    );\n\n    return items;\n  }, [groupedOptions]);\n\n  const filteredOptions = React.useMemo(() => {\n    if (!searchQuery) return flattenedOptions;\n\n    const query = searchQuery.toLowerCase();\n    const matchingOptions = new Set(\n      flattenedOptions.filter(\n        (item) =>\n          item.type === \"option\" &&\n          (item.data as O).label.toLowerCase().includes(query),\n      ),\n    );\n\n    return flattenedOptions.filter((item) => {\n      if (item.type === \"group\") {\n        const groupName = item.data as string;\n        return flattenedOptions.some(\n          (other) =>\n            other.type === \"option\" &&\n            (other.data as O).group === groupName &&\n            matchingOptions.has(other),\n        );\n      }\n      return matchingOptions.has(item);\n    });\n  }, [flattenedOptions, searchQuery]);\n\n  const selectableOptions = React.useMemo(\n    () =>\n      filteredOptions.filter(\n        (item) => item.type === \"option\" && !(item.data as O).disabled,\n      ),\n    [filteredOptions],\n  );\n\n  const shouldVirtualize = filteredOptions.length > virtualizeThreshold;\n\n  // -- Virtualizer ------------------------------------------------------------\n  const virtualizer = useVirtualizer({\n    count: filteredOptions.length,\n    getScrollElement: () => parentNode,\n    estimateSize: () => 40,\n    enabled: shouldVirtualize,\n    overscan: 10,\n  });\n\n  const virtualizerRef = React.useRef(virtualizer);\n  React.useEffect(() => {\n    virtualizerRef.current = virtualizer;\n  }, [virtualizer]);\n\n  const refCallback = useCallback((node: HTMLDivElement) => {\n    if (node) {\n      setParentNode(node);\n      scrollContainerRef.current = node;\n    }\n  }, []);\n\n  // -- Handlers ---------------------------------------------------------------\n  const handleInputChange = React.useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setSearchQuery(e.target.value);\n      if (!isOpen) setIsOpen(true);\n    },\n    [isOpen],\n  );\n\n  const handleInputClick = React.useCallback(\n    (e: React.MouseEvent) => {\n      e.stopPropagation();\n      if (!isOpen) setIsOpen(true);\n    },\n    [isOpen],\n  );\n\n  const handleScroll = React.useCallback(\n    (e: React.UIEvent<HTMLDivElement>) => {\n      const element = e.currentTarget;\n      const { scrollTop, scrollHeight, clientHeight } = element;\n\n      setShowTopArrow(scrollTop > 0);\n      setShowBottomArrow(scrollTop + clientHeight < scrollHeight - 1);\n    },\n    [],\n  );\n\n  const handleKeyDown = React.useCallback(\n    (e: React.KeyboardEvent) => {\n      if (!isOpen && e.key !== \"Tab\") {\n        if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n          e.preventDefault();\n          setIsOpen(true);\n        }\n        return;\n      }\n\n      const currentSelectableOptions = filteredOptions.filter(\n        (item) => item.type === \"option\" && !(item.data as O).disabled,\n      );\n\n      switch (e.key) {\n        case \"Escape\":\n          e.preventDefault();\n          setIsOpen(false);\n          setSearchQuery(\"\");\n          setHighlightedIndex(-1);\n          inputRef.current?.blur();\n          break;\n\n        case \"ArrowDown\":\n          e.preventDefault();\n          setHighlightedIndex((prev) => {\n            const nextIndex = Math.min(\n              prev + 1,\n              currentSelectableOptions.length - 1,\n            );\n            const option = currentSelectableOptions[nextIndex];\n            if (option) {\n              const optionIndex = filteredOptions.indexOf(option);\n              if (shouldVirtualize && virtualizerRef.current) {\n                virtualizerRef.current.scrollToIndex(optionIndex, {\n                  align: \"auto\",\n                });\n              }\n            }\n            return nextIndex;\n          });\n          break;\n\n        case \"ArrowUp\":\n          e.preventDefault();\n          setHighlightedIndex((prev) => {\n            const nextIndex = Math.max(prev - 1, 0);\n            const option = currentSelectableOptions[nextIndex];\n            if (option) {\n              const optionIndex = filteredOptions.indexOf(option);\n              if (shouldVirtualize && virtualizerRef.current) {\n                virtualizerRef.current.scrollToIndex(optionIndex, {\n                  align: \"auto\",\n                });\n              }\n            }\n            return nextIndex;\n          });\n          break;\n\n        case \"Enter\":\n          e.preventDefault();\n          if (\n            highlightedIndex >= 0 &&\n            highlightedIndex < currentSelectableOptions.length\n          ) {\n            const item = currentSelectableOptions[highlightedIndex];\n            if (item) {\n              const option = item.data as O;\n              onSelectRef.current(option);\n            }\n          }\n          break;\n\n        case \"Home\":\n          e.preventDefault();\n          setHighlightedIndex(0);\n          if (shouldVirtualize && virtualizerRef.current) {\n            virtualizerRef.current.scrollToIndex(0);\n          }\n          break;\n\n        case \"End\":\n          e.preventDefault();\n          setHighlightedIndex(currentSelectableOptions.length - 1);\n          if (shouldVirtualize && virtualizerRef.current) {\n            virtualizerRef.current.scrollToIndex(filteredOptions.length - 1);\n          }\n          break;\n\n        default:\n          break;\n      }\n    },\n    [isOpen, filteredOptions, highlightedIndex, shouldVirtualize],\n  );\n\n  // -- Effects ----------------------------------------------------------------\n  // Check initial scroll state when dropdown opens\n  React.useEffect(() => {\n    if (isOpen) {\n      const timeoutId = setTimeout(() => {\n        const element = scrollContainerRef.current;\n        if (element) {\n          const { scrollTop, scrollHeight, clientHeight } = element;\n          setShowTopArrow(scrollTop > 0);\n          setShowBottomArrow(scrollTop + clientHeight < scrollHeight - 1);\n        }\n      }, 50);\n\n      return () => clearTimeout(timeoutId);\n    } else {\n      setShowTopArrow(false);\n      setShowBottomArrow(false);\n      return undefined;\n    }\n  }, [isOpen, filteredOptions, shouldVirtualize]);\n\n  // -- Return -----------------------------------------------------------------\n  return {\n    // State\n    isOpen,\n    setIsOpen,\n    searchQuery,\n    setSearchQuery,\n    highlightedIndex,\n    setHighlightedIndex,\n    showTopArrow,\n    showBottomArrow,\n\n    // Refs\n    triggerRef,\n    inputRef,\n    scrollContainerRef,\n\n    // Computed\n    filteredOptions,\n    selectableOptions,\n    shouldVirtualize,\n    virtualizer,\n    maxDropdownHeight,\n    label,\n\n    // IDs & validation\n    uniqueId,\n    labelId,\n    listboxId,\n    helperId,\n    status,\n    helperMessage,\n\n    // Handlers\n    handleInputChange,\n    handleInputClick,\n    handleScroll,\n    handleKeyDown,\n    refCallback,\n  };\n}\n"]}

package/dist/chunk-X3YNHX77.js

@@ -0,0 +1,109 @@
+import { createNotificationColorVariants, componentColors } from './chunk-POXI7JJ4.js';
+import { cn, iconSizes } from './chunk-NGYLRX6F.js';
+import { cva } from 'class-variance-authority';
+import { X } from 'lucide-react';
+import React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var notificationVariants = cva(
+  "relative flex gap-3 rounded-md transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "",
+        solid: "",
+        outline: "border-2 border-l-6",
+        soft: "border-l-6"
+      },
+      color: {
+        default: "",
+        primary: "",
+        secondary: "",
+        accent: "",
+        success: "",
+        error: "",
+        warning: "",
+        info: ""
+      },
+      size: {
+        xs: "p-2 text-xs gap-2",
+        sm: "p-3 text-sm gap-2.5",
+        md: "p-4 text-base gap-3",
+        lg: "p-5 text-lg gap-3.5"
+      }
+    },
+    compoundVariants: createNotificationColorVariants(componentColors, [
+      "default",
+      "solid",
+      "outline",
+      "soft"
+    ]),
+    defaultVariants: {
+      variant: "default",
+      color: "default",
+      size: "md"
+    }
+  }
+);
+var Notification = React.memo(
+  ({
+    title,
+    description,
+    variant = "default",
+    color = "default",
+    size = "md",
+    closable = true,
+    onClose,
+    action,
+    className,
+    classNames,
+    children
+  }) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "alert",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        className: cn(
+          "notification_root",
+          notificationVariants({ variant, color, size }),
+          className,
+          classNames?.root
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex-1 min-w-0", "notification_content", classNames?.content), children: [
+            title && /* @__PURE__ */ jsx("div", { className: cn("font-semibold mb-1 text-sm", "notification_title", classNames?.title), children: title }),
+            description && /* @__PURE__ */ jsx("div", { className: cn("text-sm opacity-90", "notification_description", classNames?.description), children: description }),
+            children && /* @__PURE__ */ jsx("div", { className: "mt-2", children }),
+            action && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: action.onClick,
+                className: cn("mt-2 text-sm font-medium underline hover:no-underline", "notification_action", classNames?.action),
+                children: action.label
+              }
+            )
+          ] }),
+          closable && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: cn("shrink-0 rounded-sm opacity-70 hover:opacity-100 transition-opacity", "notification_closeButton", classNames?.closeButton),
+              "aria-label": "Close notification",
+              children: /* @__PURE__ */ jsx(X, { className: cn(iconSizes[size], "notification_icon", classNames?.icon), "aria-hidden": "true" })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Notification.displayName = "Notification";
+var notification_default = Notification;
+
+export { notification_default };
+//# sourceMappingURL=chunk-X3YNHX77.js.map
+//# sourceMappingURL=chunk-X3YNHX77.js.map

package/dist/chunk-X3YNHX77.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/notification/index.tsx"],"names":[],"mappings":"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","file":"chunk-X3YNHX77.js","sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority'\nimport { X } from 'lucide-react'\nimport React from 'react'\n\nimport { cn, iconSizes } from '../utils'\nimport { componentColors, createNotificationColorVariants } from '../variants'\nimport type { NotificationProps } from './types'\n\nconst notificationVariants = cva(\n  'relative flex gap-3 rounded-md transition-colors',\n  {\n    variants: {\n      variant: {\n        default: '',\n        solid: '',\n        outline: 'border-2 border-l-6',\n        soft: 'border-l-6',\n      },\n      color: {\n        default: '',\n        primary: '',\n        secondary: '',\n        accent: '',\n        success: '',\n        error: '',\n        warning: '',\n        info: '',\n      },\n      size: {\n        xs: 'p-2 text-xs gap-2',\n        sm: 'p-3 text-sm gap-2.5',\n        md: 'p-4 text-base gap-3',\n        lg: 'p-5 text-lg gap-3.5',\n      },\n    },\n    compoundVariants: createNotificationColorVariants(componentColors, [\n      'default',\n      'solid',\n      'outline',\n      'soft',\n    ]),\n    defaultVariants: {\n      variant: 'default',\n      color: 'default',\n      size: 'md',\n    },\n  },\n)\n\nconst Notification = React.memo<NotificationProps>(\n  ({\n    title,\n    description,\n    variant = 'default',\n    color = 'default',\n    size = 'md',\n    closable = true,\n    onClose,\n    action,\n    className,\n    classNames,\n    children,\n  }) => {\n    return (\n      <div\n        role=\"alert\"\n        aria-live=\"polite\"\n        aria-atomic=\"true\"\n        className={cn(\n          'notification_root',\n          notificationVariants({ variant, color, size }),\n          className,\n          classNames?.root,\n        )}\n      >\n        <div className={cn('flex-1 min-w-0', 'notification_content', classNames?.content)}>\n          {title && <div className={cn('font-semibold mb-1 text-sm', 'notification_title', classNames?.title)}>{title}</div>}\n          {description && (\n            <div className={cn('text-sm opacity-90', 'notification_description', classNames?.description)}>{description}</div>\n          )}\n          {children && <div className=\"mt-2\">{children}</div>}\n          {action && (\n            <button\n              type=\"button\"\n              onClick={action.onClick}\n              className={cn('mt-2 text-sm font-medium underline hover:no-underline', 'notification_action', classNames?.action)}\n            >\n              {action.label}\n            </button>\n          )}\n        </div>\n\n        {closable && (\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className={cn('shrink-0 rounded-sm opacity-70 hover:opacity-100 transition-opacity', 'notification_closeButton', classNames?.closeButton)}\n            aria-label=\"Close notification\"\n          >\n            <X className={cn(iconSizes[size], 'notification_icon', classNames?.icon)} aria-hidden=\"true\" />\n          </button>\n        )}\n      </div>\n    )\n  },\n)\n\nNotification.displayName = 'Notification'\n\nexport type * from './types'\nexport default Notification\n"]}