@mdigital_ui/ui 0.3.7 → 0.3.9

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-ZYWDJMHF.js → chunk-X3YNHX77.js}

@@ -1,4 +1,4 @@
-import { createNotificationColorVariants, componentColors } from './chunk-LK4EPTNG.js';
+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';
@@ -91,7 +91,7 @@ var Notification = React.memo(
             {
               type: "button",
               onClick: onClose,
-              className: cn("shrink-0 rounded-sm opacity-70 hover:opacity-100 transition-[opacity,transform] active:scale-[0.9]", "notification_closeButton", classNames?.closeButton),
+              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" })
             }
@@ -105,5 +105,5 @@ Notification.displayName = "Notification";
 var notification_default = Notification;
 
 export { notification_default };
-//# sourceMappingURL=chunk-ZYWDJMHF.js.map
-//# sourceMappingURL=chunk-ZYWDJMHF.js.map
+//# sourceMappingURL=chunk-X3YNHX77.js.map
+//# sourceMappingURL=chunk-X3YNHX77.js.map

package/dist/{chunk-ZYWDJMHF.js.map → chunk-X3YNHX77.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/notification/index.tsx"],"names":[],"mappings":"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","file":"chunk-ZYWDJMHF.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,transform] active:scale-[0.9]', '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"]}
+{"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"]}

package/dist/chunk-Y4XAXZHB.js

@@ -0,0 +1,42 @@
+import { textColorClasses } from './chunk-POXI7JJ4.js';
+import { cn } from './chunk-NGYLRX6F.js';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var spinnerVariants = cva(
+  "inline-block border border-current border-t-transparent rounded-full animate-spin",
+  {
+    variants: {
+      size: {
+        xs: "w-3 h-3 border",
+        sm: "w-4 h-4 border",
+        md: "w-6 h-6 border-2",
+        lg: "w-8 h-8 border-2"
+      },
+      color: textColorClasses
+    },
+    defaultVariants: {
+      size: "sm",
+      color: "primary"
+    }
+  }
+);
+var Spinner = ({ size = "sm", color = "primary", label, className }) => {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "root", className: cn("spinner_root", "inline-flex flex-col items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: spinnerVariants({ size, color }),
+        role: "status",
+        "aria-label": label || "Loading"
+      }
+    ),
+    label && /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary", children: label })
+  ] });
+};
+Spinner.displayName = "Spinner";
+var spinner_default = Spinner;
+
+export { Spinner, spinner_default };
+//# sourceMappingURL=chunk-Y4XAXZHB.js.map
+//# sourceMappingURL=chunk-Y4XAXZHB.js.map

package/dist/chunk-Y4XAXZHB.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/spinner/index.tsx"],"names":[],"mappings":";;;;;AAOA,IAAM,eAAA,GAAkB,GAAA;AAAA,EACtB,mFAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,gBAAA;AAAA,QACJ,EAAA,EAAI,gBAAA;AAAA,QACJ,EAAA,EAAI,kBAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,KAAA,EAAO;AAAA,KACT;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM,IAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT;AAEJ,CAAA;AAEO,IAAM,OAAA,GAAkC,CAAC,EAAE,IAAA,GAAO,MAAM,KAAA,GAAQ,SAAA,EAAW,KAAA,EAAO,SAAA,EAAU,KAAM;AACvG,EAAA,uBACE,IAAA,CAAC,SAAI,WAAA,EAAU,MAAA,EAAO,WAAW,EAAA,CAAG,cAAA,EAAgB,yCAAA,EAA2C,SAAS,CAAA,EACtG,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,eAAA,CAAgB,EAAE,IAAA,EAAM,OAAO,CAAA;AAAA,QAC1C,IAAA,EAAK,QAAA;AAAA,QACL,cAAY,KAAA,IAAS;AAAA;AAAA,KACvB;AAAA,IACC,KAAA,oBAAS,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,+BAA+B,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACjE,CAAA;AAEJ;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA;AAGtB,IAAO,eAAA,GAAQ","file":"chunk-Y4XAXZHB.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '../utils'\nimport { textColorClasses } from '../variants'\nimport type { SpinnerProps } from './types'\n\nconst spinnerVariants = cva(\n  'inline-block border border-current border-t-transparent rounded-full animate-spin',\n  {\n    variants: {\n      size: {\n        xs: 'w-3 h-3 border',\n        sm: 'w-4 h-4 border',\n        md: 'w-6 h-6 border-2',\n        lg: 'w-8 h-8 border-2',\n      },\n      color: textColorClasses,\n    },\n    defaultVariants: {\n      size: 'sm',\n      color: 'primary',\n    },\n  },\n)\n\nexport const Spinner: React.FC<SpinnerProps> = ({ size = 'sm', color = 'primary', label, className }) => {\n  return (\n    <div data-slot=\"root\" className={cn('spinner_root', 'inline-flex flex-col items-center gap-2', className)}>\n      <div\n        className={spinnerVariants({ size, color })}\n        role=\"status\"\n        aria-label={label || 'Loading'}\n      />\n      {label && <span className=\"text-sm text-text-secondary\">{label}</span>}\n    </div>\n  )\n}\n\nSpinner.displayName = 'Spinner'\n\nexport type * from './types'\nexport default Spinner\n"]}

package/dist/{chunk-JZ5F6XDO.js → chunk-YS5AIY4A.js}

@@ -1,4 +1,4 @@
-import { bgSkeletonColorClasses } from './chunk-LK4EPTNG.js';
+import { bgSkeletonColorClasses } from './chunk-POXI7JJ4.js';
 import { cn } from './chunk-NGYLRX6F.js';
 import { cva } from 'class-variance-authority';
 import React from 'react';
@@ -39,5 +39,5 @@ Skeleton.displayName = "Skeleton";
 var skeleton_default = Skeleton;
 
 export { skeleton_default };
-//# sourceMappingURL=chunk-JZ5F6XDO.js.map
-//# sourceMappingURL=chunk-JZ5F6XDO.js.map
+//# sourceMappingURL=chunk-YS5AIY4A.js.map
+//# sourceMappingURL=chunk-YS5AIY4A.js.map

package/dist/{chunk-JZ5F6XDO.js.map → chunk-YS5AIY4A.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/skeleton/index.tsx"],"names":[],"mappings":";;;;;;AAOA,IAAM,gBAAA,GAAmB,IAAI,uBAAA,EAAyB;AAAA,EACpD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,KAAA;AAAA,MACJ,EAAA,EAAI,KAAA;AAAA,MACJ,EAAA,EAAI,KAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,KAAA,EAAO;AAAA,GACT;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAED,IAAM,WAAW,KAAA,CAAM,IAAA;AAAA,EACrB,CAAC,EAAE,KAAA,GAAQ,SAAA,EAAW,OAAO,IAAA,EAAM,SAAA,EAAW,MAAA,GAAS,KAAA,EAAM,KAAM;AACjE,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,MAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,eAAA;AAAA,UACA,gBAAA,CAAiB,EAAE,IAAA,EAAM,KAAA,EAAO,CAAA;AAAA,UAChC,MAAA,IAAU,4BAAA;AAAA,UACV;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AACF,CAAA;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;AAGvB,IAAO,gBAAA,GAAQ","file":"chunk-JZ5F6XDO.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '../utils'\nimport { bgSkeletonColorClasses } from '../variants'\nimport type { SkeletonProps } from './types'\n\nconst skeletonVariants = cva('animate-pulse rounded', {\n  variants: {\n    size: {\n      xs: 'h-3',\n      sm: 'h-4',\n      md: 'h-5',\n      lg: 'h-6',\n    },\n    color: bgSkeletonColorClasses,\n  },\n  defaultVariants: {\n    size: 'md',\n    color: 'default',\n  },\n})\n\nconst Skeleton = React.memo<SkeletonProps>(\n  ({ color = 'default', size = 'md', className, circle = false }) => {\n    return (\n      <div\n        data-slot=\"root\"\n        className={cn(\n          'skeleton_root',\n          skeletonVariants({ size, color }),\n          circle && 'rounded-full aspect-square',\n          className,\n        )}\n      />\n    )\n  },\n)\n\nSkeleton.displayName = 'Skeleton'\n\nexport type * from './types'\nexport default Skeleton\n"]}
+{"version":3,"sources":["../src/skeleton/index.tsx"],"names":[],"mappings":";;;;;;AAOA,IAAM,gBAAA,GAAmB,IAAI,uBAAA,EAAyB;AAAA,EACpD,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,MACJ,EAAA,EAAI,KAAA;AAAA,MACJ,EAAA,EAAI,KAAA;AAAA,MACJ,EAAA,EAAI,KAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,KAAA,EAAO;AAAA,GACT;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,IAAA,EAAM,IAAA;AAAA,IACN,KAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAED,IAAM,WAAW,KAAA,CAAM,IAAA;AAAA,EACrB,CAAC,EAAE,KAAA,GAAQ,SAAA,EAAW,OAAO,IAAA,EAAM,SAAA,EAAW,MAAA,GAAS,KAAA,EAAM,KAAM;AACjE,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAA,EAAU,MAAA;AAAA,QACV,SAAA,EAAW,EAAA;AAAA,UACT,eAAA;AAAA,UACA,gBAAA,CAAiB,EAAE,IAAA,EAAM,KAAA,EAAO,CAAA;AAAA,UAChC,MAAA,IAAU,4BAAA;AAAA,UACV;AAAA;AACF;AAAA,KACF;AAAA,EAEJ;AACF,CAAA;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;AAGvB,IAAO,gBAAA,GAAQ","file":"chunk-YS5AIY4A.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '../utils'\nimport { bgSkeletonColorClasses } from '../variants'\nimport type { SkeletonProps } from './types'\n\nconst skeletonVariants = cva('animate-pulse rounded', {\n  variants: {\n    size: {\n      xs: 'h-3',\n      sm: 'h-4',\n      md: 'h-5',\n      lg: 'h-6',\n    },\n    color: bgSkeletonColorClasses,\n  },\n  defaultVariants: {\n    size: 'md',\n    color: 'default',\n  },\n})\n\nconst Skeleton = React.memo<SkeletonProps>(\n  ({ color = 'default', size = 'md', className, circle = false }) => {\n    return (\n      <div\n        data-slot=\"root\"\n        className={cn(\n          'skeleton_root',\n          skeletonVariants({ size, color }),\n          circle && 'rounded-full aspect-square',\n          className,\n        )}\n      />\n    )\n  },\n)\n\nSkeleton.displayName = 'Skeleton'\n\nexport type * from './types'\nexport default Skeleton\n"]}

package/dist/chunk-ZIYA7TGX.js

@@ -0,0 +1,141 @@
+import { createAllColorVariants, componentColors } from './chunk-POXI7JJ4.js';
+import { cn } 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 tagVariants = cva("inline-flex items-center gap-1.5 whitespace-nowrap rounded font-medium transition-colors", {
+  variants: {
+    variant: {
+      default: "border",
+      solid: "",
+      outline: "border",
+      soft: ""
+    },
+    color: {
+      default: "",
+      primary: "",
+      secondary: "",
+      accent: "",
+      success: "",
+      error: "",
+      warning: "",
+      info: ""
+    },
+    size: {
+      xs: "text-[10px] px-1.5 py-0.5",
+      sm: "text-xs px-2 py-1",
+      md: "text-sm px-2.5 py-1",
+      lg: "text-base px-3 py-1.5"
+    }
+  },
+  compoundVariants: createAllColorVariants(componentColors, ["default", "solid", "outline", "soft"]),
+  defaultVariants: {
+    variant: "solid",
+    color: "primary",
+    size: "sm"
+  }
+});
+var iconSizeClasses = {
+  xs: "size-2.5",
+  sm: "size-3",
+  md: "size-3.5",
+  lg: "size-4"
+};
+var Tag = ({
+  children,
+  color = "primary",
+  variant = "solid",
+  size = "sm",
+  closable = false,
+  onClose,
+  icon,
+  className,
+  classNames,
+  onClick,
+  disableKeyboardRemoval = false,
+  ...props
+}) => {
+  const handleClose = (e) => {
+    e.stopPropagation();
+    onClose?.(e);
+  };
+  const handleCloseKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      e.stopPropagation();
+      onClose?.(e);
+    }
+  };
+  const handleTagKeyDown = (e) => {
+    if (!disableKeyboardRemoval && closable && (e.key === "Delete" || e.key === "Backspace")) {
+      e.preventDefault();
+      e.stopPropagation();
+      onClose?.(e);
+      return;
+    }
+    if (onClick && (e.key === "Enter" || e.key === " ")) {
+      e.preventDefault();
+      e.stopPropagation();
+      onClick(e);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: cn(
+        "tag_root",
+        tagVariants({ variant, color, size }),
+        (onClick || closable) && "cursor-pointer",
+        (onClick || !disableKeyboardRemoval && closable) && "focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary",
+        classNames?.root,
+        className
+      ),
+      onClick,
+      onKeyDown: onClick || !disableKeyboardRemoval && closable ? handleTagKeyDown : void 0,
+      role: onClick || !disableKeyboardRemoval && closable ? "button" : void 0,
+      tabIndex: onClick || !disableKeyboardRemoval && closable ? 0 : void 0,
+      "aria-label": (onClick || !disableKeyboardRemoval && closable) && typeof children === "string" ? children : void 0,
+      "data-slot": "root",
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center justify-center flex-shrink-0", iconSizeClasses[size]), children: React.isValidElement(icon) ? React.cloneElement(icon, {
+          className: cn("w-full h-full", icon.props.className)
+        }) : icon }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn("tag_content", classNames?.content),
+            "data-slot": "content",
+            children
+          }
+        ),
+        closable && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleClose,
+            onKeyDown: handleCloseKeyDown,
+            className: cn(
+              "tag_closeButton",
+              "inline-flex items-center justify-center flex-shrink-0 cursor-pointer rounded-sm opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus:ring-2 focus:ring-current focus:ring-offset-1",
+              iconSizeClasses[size],
+              classNames?.closeButton
+            ),
+            "aria-label": typeof children === "string" ? `Remove ${children}` : "Remove tag",
+            tabIndex: disableKeyboardRemoval ? 0 : -1,
+            "data-slot": "closeButton",
+            children: /* @__PURE__ */ jsx(X, { className: "w-full h-full" })
+          }
+        )
+      ]
+    }
+  );
+};
+Tag.displayName = "Tag";
+var tag_default = Tag;
+
+export { tag_default };
+//# sourceMappingURL=chunk-ZIYA7TGX.js.map
+//# sourceMappingURL=chunk-ZIYA7TGX.js.map

package/dist/chunk-ZIYA7TGX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tag/index.tsx"],"names":[],"mappings":"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","file":"chunk-ZIYA7TGX.js","sourcesContent":["'use client'\n\nimport { cva } from 'class-variance-authority';\nimport { X } from 'lucide-react';\nimport React from 'react';\n\nimport { cn } from '../utils';\nimport { componentColors, createAllColorVariants } from '../variants';\nimport type { TagProps } from './types';\n\n/**\n * Class variance authority configuration for the Tag component\n * Defines style variants for color, variant, and size\n */\nconst tagVariants = cva('inline-flex items-center gap-1.5 whitespace-nowrap rounded font-medium transition-colors', {\n  variants: {\n    variant: {\n      default: 'border',\n      solid: '',\n      outline: 'border',\n      soft: '',\n    },\n    color: {\n      default: '',\n      primary: '',\n      secondary: '',\n      accent: '',\n      success: '',\n      error: '',\n      warning: '',\n      info: '',\n    },\n    size: {\n      xs: 'text-[10px] px-1.5 py-0.5',\n      sm: 'text-xs px-2 py-1',\n      md: 'text-sm px-2.5 py-1',\n      lg: 'text-base px-3 py-1.5',\n    },\n  },\n  compoundVariants: createAllColorVariants(componentColors, ['default', 'solid', 'outline', 'soft']),\n  defaultVariants: {\n    variant: 'solid',\n    color: 'primary',\n    size: 'sm',\n  },\n});\n\n/**\n * Icon and close button size variants for different tag sizes\n */\nconst iconSizeClasses = {\n  xs: 'size-2.5',\n  sm: 'size-3',\n  md: 'size-3.5',\n  lg: 'size-4',\n};\n\n/**\n * Tag Component\n *\n * An interactive badge variant that can be used for labels, categories, or removable items.\n * Supports multiple variants, colors, sizes, icons, and close functionality.\n *\n * @component\n * @example\n * // Basic tag\n * <Tag>Label</Tag>\n *\n * @example\n * // Tag with close button\n * <Tag closable onClose={(e) => console.log('Tag removed')}>\n *   Removable Tag\n * </Tag>\n *\n * @example\n * // Tag with icon\n * <Tag icon={<Star />} color=\"warning\">\n *   Featured\n * </Tag>\n *\n * @example\n * // Different variants\n * <Tag variant=\"outline\" color=\"success\">Outline Tag</Tag>\n * <Tag variant=\"soft\" color=\"info\">Soft Tag</Tag>\n *\n * @example\n * // Disable keyboard removal (Backspace/Delete on tag)\n * <Tag closable disableKeyboardRemoval onClose={(e) => console.log('Tag removed')}>\n *   No keyboard removal\n * </Tag>\n *\n * @example\n * // Tag with keyboard removal enabled (focus on tag and press Delete/Backspace)\n * <Tag closable onClose={(e) => console.log('Tag removed')}>\n *   Press Delete or Backspace to remove\n * </Tag>\n *\n * @param {TagProps} props - Component props\n * @returns {JSX.Element} Rendered tag component\n */\nconst Tag: React.FC<TagProps> = ({\n  children,\n  color = 'primary',\n  variant = 'solid',\n  size = 'sm',\n  closable = false,\n  onClose,\n  icon,\n  className,\n  classNames,\n  onClick,\n  disableKeyboardRemoval = false,\n  ...props\n}) => {\n    /**\n     * Handles the close button click event\n     * Stops event propagation to prevent triggering parent onClick handlers\n     *\n     * @param {React.MouseEvent<HTMLButtonElement>} e - Mouse event\n     */\n    const handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {\n      e.stopPropagation();\n      onClose?.(e);\n    };\n\n    /**\n     * Handles keyboard events for the close button\n     * Always responds to Enter/Space for activation (accessibility requirement)\n     *\n     * @param {React.KeyboardEvent<HTMLButtonElement>} e - Keyboard event\n     */\n    const handleCloseKeyDown = (e: React.KeyboardEvent<HTMLButtonElement>) => {\n      // Always allow Enter/Space for activation (accessibility requirement)\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        e.stopPropagation();\n        onClose?.(e);\n      }\n    };\n\n    /**\n     * Handles keyboard events for the tag\n     * Removes tag when Delete or Backspace is pressed (takes priority)\n     * Activates onClick when Enter or Space is pressed\n     *\n     * @param {React.KeyboardEvent<HTMLSpanElement>} e - Keyboard event\n     */\n    const handleTagKeyDown = (e: React.KeyboardEvent<HTMLSpanElement>) => {\n      // Handle deletion for closable tags (takes priority over onClick)\n      if (!disableKeyboardRemoval && closable && (e.key === 'Delete' || e.key === 'Backspace')) {\n        e.preventDefault();\n        e.stopPropagation();\n        onClose?.(e);\n        return;\n      }\n\n      // Handle activation for clickable tags\n      if (onClick && (e.key === 'Enter' || e.key === ' ')) {\n        e.preventDefault();\n        e.stopPropagation();\n        onClick(e);\n      }\n    };\n\n    return (\n      <span\n        className={cn(\n          'tag_root',\n          tagVariants({ variant, color, size }),\n          (onClick || closable) && 'cursor-pointer',\n          (onClick || (!disableKeyboardRemoval && closable)) &&\n            'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary',\n          classNames?.root,\n          className\n        )}\n        onClick={onClick}\n        onKeyDown={onClick || (!disableKeyboardRemoval && closable) ? handleTagKeyDown : undefined}\n        role={onClick || (!disableKeyboardRemoval && closable) ? 'button' : undefined}\n        tabIndex={onClick || (!disableKeyboardRemoval && closable) ? 0 : undefined}\n        aria-label={\n          (onClick || (!disableKeyboardRemoval && closable)) && typeof children === 'string' ? children : undefined\n        }\n        data-slot='root'\n        {...props}\n      >\n        {icon && (\n          <span className={cn('inline-flex items-center justify-center flex-shrink-0', iconSizeClasses[size])}>\n            {React.isValidElement(icon)\n              ? React.cloneElement(icon, {\n                  className: cn('w-full h-full', (icon.props as { className?: string }).className),\n                } as React.HTMLAttributes<HTMLElement>)\n              : icon}\n          </span>\n        )}\n        <span\n          className={cn('tag_content', classNames?.content)}\n          data-slot='content'\n        >\n          {children}\n        </span>\n        {closable && (\n          <button\n            type='button'\n            onClick={handleClose}\n            onKeyDown={handleCloseKeyDown}\n            className={cn(\n              'tag_closeButton',\n              'inline-flex items-center justify-center flex-shrink-0 cursor-pointer rounded-sm opacity-70 hover:opacity-100 transition-opacity focus:outline-none focus:ring-2 focus:ring-current focus:ring-offset-1',\n              iconSizeClasses[size],\n              classNames?.closeButton\n            )}\n            aria-label={typeof children === 'string' ? `Remove ${children}` : 'Remove tag'}\n            tabIndex={disableKeyboardRemoval ? 0 : -1}\n            data-slot='closeButton'\n          >\n            <X className='w-full h-full' />\n          </button>\n        )}\n      </span>\n    );\n};\n\nTag.displayName = 'Tag';\n\nexport type * from './types';\nexport default Tag;\n"]}

package/dist/{chunk-QLUGKHAA.js → chunk-ZKEDJ536.js}

@@ -1,5 +1,5 @@
-import { tree_default } from './chunk-HXPMYGSR.js';
-import { Popover, PopoverTrigger, PopoverContent } from './chunk-ZQTJBYKO.js';
+import { tree_default } from './chunk-T7RWQLUB.js';
+import { Popover, PopoverTrigger, PopoverContent } from './chunk-C5IGZLIT.js';
 import { getValidationStatus, cn, iconSizes, statusMessageVariants } from './chunk-NGYLRX6F.js';
 import { cva } from 'class-variance-authority';
 import { X, Loader2, Search, ChevronDown } from 'lucide-react';
@@ -499,5 +499,5 @@ TreeSelect.displayName = "TreeSelect";
 var tree_select_default = TreeSelect;
 
 export { tree_select_default };
-//# sourceMappingURL=chunk-QLUGKHAA.js.map
-//# sourceMappingURL=chunk-QLUGKHAA.js.map
+//# sourceMappingURL=chunk-ZKEDJ536.js.map
+//# sourceMappingURL=chunk-ZKEDJ536.js.map