npm - @hyddenlabs/hydn-ui - Versions diffs - 0.3.1 → 0.3.3 - Mend

@hyddenlabs/hydn-ui 0.3.1 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/dist/components/navigation/dropdown/dropdown.js CHANGED Viewed

@@ -14,6 +14,8 @@ function Dropdown({
   size = "md",
   variant = "neutral",
   buttonStyle = "solid",
+  triggerClassName = "",
+  noPadding = false,
   minWidth,
   maxWidth,
   menuClassName = ""
@@ -132,6 +134,8 @@ function Dropdown({
   const { title, subtitle, icon, iconSize = "md", triggerSize = size, endIcon } = trigger;
   const iconNode = icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSize, color: "currentColor" }) : null;
   const endIconNode = endIcon ? /* @__PURE__ */ jsx(Icon, { name: endIcon, size: iconSize, color: "currentColor" }) : null;
+  const actualButtonStyle = buttonStyle === "none" ? "ghost" : buttonStyle;
+  const noBackgroundClass = buttonStyle === "none" ? "!bg-transparent hover:!bg-transparent active:!bg-transparent" : "";
   const getAlignmentStyle = () => {
     if (!menuPosition) return {};
     const baseStyle = {
@@ -156,12 +160,13 @@ function Dropdown({
       {
         ref: triggerRef,
         variant,
-        style: buttonStyle,
+        style: actualButtonStyle,
         onClick: () => isOpen ? close() : open(),
         "aria-expanded": isOpen,
         "aria-haspopup": "true",
         "aria-controls": isOpen ? "dropdown-menu" : void 0,
         size: triggerSize,
+        className: `${noPadding ? "px-0" : ""} ${noBackgroundClass} ${triggerClassName}`,
         children: /* @__PURE__ */ jsxs("span", { className: `flex items-center ${gapSizes[iconSize]}`, children: [
           iconNode && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: iconNode }),
           (title || subtitle) && /* @__PURE__ */ jsxs("span", { className: subtitle ? "text-left" : "", children: [

package/dist/components/navigation/dropdown/dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dropdown.js","sources":["../../../../src/components/navigation/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useLayoutEffect, useCallback, createContext, useContext } from 'react';\nimport { createPortal } from 'react-dom';\nimport Button, { type ButtonProps } from '../../forms/button/button';\nimport { Icon } from '@/components/system/icon';\nimport { gapSizes, Size } from '@/theme/size-tokens';\n\nexport type DropdownTriggerProps = {\n /** Main label text /\n title: string;\n /* Optional secondary text shown below the title /\n subtitle?: string;\n /* Optional leading icon /\n icon?: string;\n /* Size of the leading icon /\n iconSize?: Size;\n /* Size variant for the trigger button /\n triggerSize?: ButtonProps['size'];\n /* Optional trailing icon /\n endIcon?: string;\n};\n\nexport type DropdownProps = {\n /* Trigger configuration - rendered as an accessible Button /\n trigger: DropdownTriggerProps;\n children: React.ReactNode;\n className?: string;\n align?: 'start' \| 'center' \| 'end';\n autoClose?: boolean; // close on item select\n /* Size of the dropdown panel and items /\n size?: ButtonProps['size'];\n /* Button variant for the trigger /\n variant?: ButtonProps['variant'];\n /* Button style for the trigger /\n buttonStyle?: ButtonProps['style'];\n /* Minimum width for the dropdown menu and all items (e.g., '200px', '16rem') /\n minWidth?: string;\n /* Maximum width for the dropdown menu (e.g., '400px', '24rem') /\n maxWidth?: string;\n /* Additional styles for the dropdown menu /\n menuClassName?: string;\n};\n\ntype DropdownContextValue = {\n requestClose: () => void;\n autoClose: boolean;\n registerItem?: (el: HTMLButtonElement \| null, index?: number) => void;\n minWidth?: string;\n size?: ButtonProps['size'];\n};\n\nconst DropdownContext = createContext<DropdownContextValue \| null>(null);\n\nexport function useDropdown() {\n const ctx = useContext(DropdownContext);\n if (!ctx) throw new Error('useDropdown must be used within <Dropdown>');\n return ctx;\n}\n\n/\n Dropdown component with click-outside handling\n /\nfunction Dropdown({\n trigger,\n children,\n className = '',\n align = 'start',\n autoClose = true,\n size = 'md',\n variant = 'neutral',\n buttonStyle = 'solid',\n minWidth,\n maxWidth,\n menuClassName = ''\n}: Readonly<DropdownProps>) {\n const [isOpen, setIsOpen] = useState(false);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n const itemsRef = useRef<Array<HTMLButtonElement \| null>>([]);\n const [activeIndex, setActiveIndex] = useState<number>(-1);\n const [menuPosition, setMenuPosition] = useState<{ top: number; left: number; width: number } \| null>(null);\n\n const close = useCallback(() => setIsOpen(false), []);\n const open = useCallback(() => setIsOpen(true), []);\n\n // Handle keyboard navigation\n useEffect(() => {\n if (!isOpen) return;\n const handleKey = (e: KeyboardEvent) => {\n if (!menuRef.current) return;\n const itemEls = itemsRef.current.filter(Boolean);\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {\n e.preventDefault();\n if (itemEls.length === 0) return;\n let nextIndex = activeIndex;\n if (e.key === 'ArrowDown') nextIndex = (activeIndex + 1) % itemEls.length;\n if (e.key === 'ArrowUp') nextIndex = (activeIndex - 1 + itemEls.length) % itemEls.length;\n if (e.key === 'Home') nextIndex = 0;\n if (e.key === 'End') nextIndex = itemEls.length - 1;\n setActiveIndex(nextIndex);\n itemEls[nextIndex]?.focus();\n return;\n }\n if (e.key === 'Escape') {\n e.preventDefault();\n close();\n triggerRef.current?.focus();\n }\n if (e.key === 'Tab') {\n // trap focus\n e.preventDefault();\n const itemEls = itemsRef.current.filter(Boolean);\n if (itemEls.length === 0) return;\n const dir = e.shiftKey ? -1 : 1;\n const nextIndex = (activeIndex + dir + itemEls.length) % itemEls.length;\n setActiveIndex(nextIndex);\n itemEls[nextIndex]?.focus();\n }\n };\n document.addEventListener('keydown', handleKey);\n return () => document.removeEventListener('keydown', handleKey);\n }, [isOpen, activeIndex, close]);\n\n // Outside click close\n useEffect(() => {\n if (!isOpen) return;\n const handleClickOutside = (event: MouseEvent) => {\n const isClickInTrigger = dropdownRef.current && dropdownRef.current.contains(event.target as Node);\n const isClickInMenu = menuRef.current && menuRef.current.contains(event.target as Node);\n\n if (!isClickInTrigger && !isClickInMenu) {\n close();\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [isOpen, close]);\n\n useLayoutEffect(() => {\n if (isOpen && triggerRef.current) {\n const rect = triggerRef.current.getBoundingClientRect();\n setMenuPosition({\n top: rect.bottom,\n left: rect.left,\n width: rect.width\n });\n } else {\n setMenuPosition(null);\n }\n }, [isOpen]);\n\n // Close on scroll or resize (simpler than tracking position)\n useEffect(() => {\n if (!isOpen) return;\n\n const handleScrollOrResize = (event?: Event) => {\n // Allow scrolling inside the menu itself\n if (event && event.target && menuRef.current?.contains(event.target as Node)) {\n return;\n }\n close();\n };\n\n window.addEventListener('scroll', handleScrollOrResize, true);\n window.addEventListener('resize', handleScrollOrResize);\n\n return () => {\n window.removeEventListener('scroll', handleScrollOrResize, true);\n window.removeEventListener('resize', handleScrollOrResize);\n };\n }, [isOpen, close]);\n\n // Auto-focus first item on open (useLayoutEffect to avoid cascading re-renders)\n useLayoutEffect(() => {\n let raf: number \| undefined;\n if (isOpen) {\n const itemEls = itemsRef.current.filter(Boolean);\n if (itemEls.length) {\n // schedule the focus and state update to avoid cascading synchronous renders\n raf = requestAnimationFrame(() => {\n setActiveIndex(0);\n itemEls[0]?.focus();\n });\n }\n } else {\n raf = requestAnimationFrame(() => setActiveIndex(-1));\n }\n return () => {\n if (raf) cancelAnimationFrame(raf);\n };\n }, [isOpen]);\n\n const registerItem = useCallback((el: HTMLButtonElement \| null, index?: number) => {\n // If index provided, set at index; otherwise push/remove based on presence\n if (typeof index === 'number' && index >= 0) {\n itemsRef.current[index] = el;\n return;\n }\n if (el === null) {\n // remove element references\n itemsRef.current = itemsRef.current.filter((x) => x !== el && x != null);\n return;\n }\n // Push new element at the end if not already present\n if (!itemsRef.current.includes(el)) itemsRef.current.push(el);\n }, []);\n\n const { title, subtitle, icon, iconSize = 'md', triggerSize = size, endIcon } = trigger;\n\n const iconNode = icon ? <Icon name={icon} size={iconSize} color=\"currentColor\" /> : null;\n const endIconNode = endIcon ? <Icon name={endIcon} size={iconSize} color=\"currentColor\" /> : null;\n\n const getAlignmentStyle = (): React.CSSProperties => {\n if (!menuPosition) return {};\n const baseStyle: React.CSSProperties = {\n top: menuPosition.top + 4, // slightly lower than trigger\n minWidth: minWidth \|\| undefined,\n maxWidth: maxWidth \|\| undefined\n };\n\n if (align === 'start') {\n baseStyle.left = menuPosition.left;\n } else if (align === 'end') {\n baseStyle.right = window.innerWidth - (menuPosition.left + menuPosition.width);\n } else {\n baseStyle.left = menuPosition.left + menuPosition.width / 2;\n baseStyle.transform = 'translateX(-50%)';\n }\n\n return baseStyle;\n };\n\n return (\n <>\n <div ref={dropdownRef} className={`inline-block ${className}`}>\n <Button\n ref={triggerRef}\n variant={variant}\n style={buttonStyle}\n onClick={() => (isOpen ? close() : open())}\n aria-expanded={isOpen}\n aria-haspopup=\"true\"\n aria-controls={isOpen ? 'dropdown-menu' : undefined}\n size={triggerSize}\n >\n <span className={`flex items-center ${gapSizes[iconSize]}`}>\n {iconNode && <span className=\"shrink-0\">{iconNode}</span>}\n {(title \|\| subtitle) && (\n <span className={subtitle ? 'text-left' : ''}>\n <span className={subtitle ? 'block font-semibold' : ''}>{title}</span>\n {subtitle && <span className=\"block text-xs text-muted-foreground font-normal\">{subtitle}</span>}\n </span>\n )}\n {endIconNode && <span className=\"shrink-0\">{endIconNode}</span>}\n </span>\n </Button>\n </div>\n {isOpen &&\n menuPosition &&\n createPortal(\n <DropdownContext.Provider value={{ requestClose: close, autoClose, registerItem, minWidth, size }}>\n <div\n id=\"dropdown-menu\"\n ref={menuRef}\n className={`fixed bg-popover text-popover-foreground border border-border rounded-md shadow-lg z-50 ${size === 'sm' ? 'min-w-36 text-xs py-1' : 'min-w-44'} max-h-80 overflow-y-auto origin-top animate-scaleIn focus:outline-none ${menuClassName}`}\n style={getAlignmentStyle()}\n role=\"menu\"\n aria-orientation=\"vertical\"\n tabIndex={-1}\n >\n {children}\n </div>\n </DropdownContext.Provider>,\n document.body\n )}\n </>\n );\n}\n\nDropdown.displayName = 'Dropdown';\n\nexport default Dropdown;\n\n// DropdownItem size mapping constants\n// Map size to text classes for main content\nconst sizeTextMap: Record<string, string> = {\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-base',\n lg: 'text-lg',\n xl: 'text-xl'\n} as const;\n\n// Map size to description text classes (one step smaller)\nconst descriptionTextMap: Record<string, string> = {\n xs: 'text-[10px]', // smaller than xs\n sm: 'text-xs',\n md: 'text-sm',\n lg: 'text-base',\n xl: 'text-lg'\n} as const;\n\n// Map size to padding\nconst sizePaddingMap: Record<string, string> = {\n xs: 'px-2 py-1',\n sm: 'px-2.5 py-1.5',\n md: 'px-3.5 py-2',\n lg: 'px-4 py-2.5',\n xl: 'px-5 py-3'\n} as const;\n\n// DropdownItem component (simple abstraction)\nexport type DropdownItemProps = {\n children: React.ReactNode;\n onSelect?: () => void;\n /* Semantic color variant /\n variant?: 'neutral' \| 'primary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error';\n disabled?: boolean;\n className?: string;\n /* Optional muted description below main label /\n description?: string;\n /* Leading icon /\n icon?: string;\n iconSize?: Size;\n /* Trailing icon (e.g., checkmark for selected items) /\n endIcon?: string;\n /* Inherit size from dropdown or override /\n size?: 'sm' \| 'md';\n /* Marks item as selected with enhanced background and optional checkmark /\n selected?: boolean;\n __dropdownIndex?: number; // injected\n __registerItem?: (el: HTMLButtonElement \| null, index: number) => void; // injected (deprecated)\n};\n\nexport function DropdownItem({\n children,\n onSelect,\n variant = 'neutral',\n disabled = false,\n className = '',\n description,\n icon,\n iconSize,\n endIcon,\n size,\n selected = false\n}: Readonly<DropdownItemProps>) {\n const ctx = useContext(DropdownContext);\n const effectiveSize = size ?? ctx?.size ?? 'md';\n const effectiveIconSize = iconSize ?? effectiveSize;\n\n const base = `${sizeTextMap[effectiveSize] \|\| sizeTextMap.md} ${sizePaddingMap[effectiveSize] \|\| sizePaddingMap.md} w-full text-left select-none transition-colors outline-none disabled:opacity-40 disabled:pointer-events-none`;\n const focus =\n 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-popover';\n\n // Base palette for non-selected state\n const palette: Record<string, string> = {\n default: 'text-foreground/90 hover:bg-muted active:bg-muted/80',\n primary: 'text-primary hover:bg-primary/15 active:bg-primary/25 focus-visible:ring-primary',\n accent: 'text-accent hover:bg-accent/15 active:bg-accent/25 focus-visible:ring-accent',\n info: 'text-info hover:bg-info/15 active:bg-info/25 focus-visible:ring-info',\n success: 'text-success hover:bg-success/15 active:bg-success/25 focus-visible:ring-success',\n warning: 'text-warning hover:bg-warning/18 active:bg-warning/28 focus-visible:ring-warning',\n error: 'text-error hover:bg-error/15 active:bg-error/25 focus-visible:ring-error'\n };\n\n // Selected state palette - solid button style with foreground text\n const selectedPalette: Record<string, string> = {\n default: 'bg-muted text-foreground hover:bg-muted-hover hover:text-foreground',\n primary: 'bg-primary text-primary-foreground hover:bg-primary-hover hover:text-primary-foreground',\n accent: 'bg-accent text-accent-foreground hover:bg-accent-hover hover:text-accent-foreground',\n info: 'bg-info text-info-foreground hover:bg-info-hover hover:text-info-foreground',\n success: 'bg-success text-success-foreground hover:bg-success-hover hover:text-success-foreground',\n warning: 'bg-warning text-warning-foreground hover:bg-warning-hover hover:text-warning-foreground',\n error: 'bg-error text-error-foreground hover:bg-error-hover hover:text-error-foreground'\n };\n\n const variantClasses = selected\n ? selectedPalette[variant] \|\| selectedPalette.default\n : palette[variant] \|\| palette.default;\n\n // Determine layout: if we have icons, use horizontal layout, otherwise vertical\n const hasIcons = icon \|\| endIcon;\n const iconNode = icon ? <Icon name={icon} size={effectiveIconSize} color=\"currentColor\" /> : null;\n const endIconNode = endIcon ? <Icon name={endIcon} size={effectiveIconSize} color=\"currentColor\" /> : null;\n\n return (\n <button\n ref={(el) => ctx?.registerItem?.(el)}\n role=\"menuitem\"\n type=\"button\"\n disabled={disabled}\n aria-current={selected ? 'true' : undefined}\n onClick={() => {\n if (disabled) return;\n onSelect?.();\n if (ctx?.autoClose) ctx.requestClose();\n }}\n className={`${base} ${focus} ${variantClasses} ${hasIcons ? 'flex flex-row items-center gap-2.5' : 'flex flex-col'} ${className} cursor-pointer`}\n >\n {iconNode && <span className=\"shrink-0\">{iconNode}</span>}\n <span className=\"flex-1 min-w-0\">\n <span className={`block font-medium leading-snug`}>{children}</span>\n {description && (\n <span\n className={`block ${descriptionTextMap[effectiveSize] \|\| descriptionTextMap.md} text-foreground/60 mt-0.5 line-clamp-2`}\n >\n {description}\n </span>\n )}\n </span>\n {endIconNode && <span className=\"shrink-0\">{endIconNode}</span>}\n </button>\n );\n}\n\n/\n DropdownSeparator - Visual divider for grouping dropdown items\n * Use between items to create visual separation (e.g., separating error actions)\n */\nexport function DropdownSeparator({ className = '' }: Readonly<{ className?: string }>) {\n return <div role=\"separator\" className={`h-px bg-border ${className}`} />;\n}\n"],"names":["itemEls"],"mappings":"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"}
1	+ {"version":3,"file":"dropdown.js","sources":["../../../../src/components/navigation/dropdown/dropdown.tsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useLayoutEffect, useCallback, createContext, useContext } from 'react';\nimport { createPortal } from 'react-dom';\nimport Button, { type ButtonProps } from '../../forms/button/button';\nimport { Icon } from '@/components/system/icon';\nimport { gapSizes, Size } from '@/theme/size-tokens';\n\nexport type DropdownTriggerProps = {\n /** Main label text /\n title: string;\n /* Optional secondary text shown below the title /\n subtitle?: string;\n /* Optional leading icon /\n icon?: string;\n /* Size of the leading icon /\n iconSize?: Size;\n /* Size variant for the trigger button /\n triggerSize?: ButtonProps['size'];\n /* Optional trailing icon /\n endIcon?: string;\n};\n\nexport type DropdownProps = {\n /* Trigger configuration - rendered as an accessible Button /\n trigger: DropdownTriggerProps;\n children: React.ReactNode;\n className?: string;\n align?: 'start' \| 'center' \| 'end';\n autoClose?: boolean; // close on item select\n /* Size of the dropdown panel and items /\n size?: ButtonProps['size'];\n /* Button variant for the trigger /\n variant?: ButtonProps['variant'];\n /* Button style for the trigger ('none' removes all background colors) /\n buttonStyle?: ButtonProps['style'] \| 'none';\n /* Additional className for the trigger button /\n triggerClassName?: string;\n /* Remove horizontal padding from the trigger button /\n noPadding?: boolean;\n /* Minimum width for the dropdown menu and all items (e.g., '200px', '16rem') /\n minWidth?: string;\n /* Maximum width for the dropdown menu (e.g., '400px', '24rem') /\n maxWidth?: string;\n /* Additional styles for the dropdown menu /\n menuClassName?: string;\n};\n\ntype DropdownContextValue = {\n requestClose: () => void;\n autoClose: boolean;\n registerItem?: (el: HTMLButtonElement \| null, index?: number) => void;\n minWidth?: string;\n size?: ButtonProps['size'];\n};\n\nconst DropdownContext = createContext<DropdownContextValue \| null>(null);\n\nexport function useDropdown() {\n const ctx = useContext(DropdownContext);\n if (!ctx) throw new Error('useDropdown must be used within <Dropdown>');\n return ctx;\n}\n\n/\n Dropdown component with click-outside handling\n /\nfunction Dropdown({\n trigger,\n children,\n className = '',\n align = 'start',\n autoClose = true,\n size = 'md',\n variant = 'neutral',\n buttonStyle = 'solid',\n triggerClassName = '',\n noPadding = false,\n minWidth,\n maxWidth,\n menuClassName = ''\n}: Readonly<DropdownProps>) {\n const [isOpen, setIsOpen] = useState(false);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const triggerRef = useRef<HTMLButtonElement>(null);\n const menuRef = useRef<HTMLDivElement>(null);\n const itemsRef = useRef<Array<HTMLButtonElement \| null>>([]);\n const [activeIndex, setActiveIndex] = useState<number>(-1);\n const [menuPosition, setMenuPosition] = useState<{ top: number; left: number; width: number } \| null>(null);\n\n const close = useCallback(() => setIsOpen(false), []);\n const open = useCallback(() => setIsOpen(true), []);\n\n // Handle keyboard navigation\n useEffect(() => {\n if (!isOpen) return;\n const handleKey = (e: KeyboardEvent) => {\n if (!menuRef.current) return;\n const itemEls = itemsRef.current.filter(Boolean);\n if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(e.key)) {\n e.preventDefault();\n if (itemEls.length === 0) return;\n let nextIndex = activeIndex;\n if (e.key === 'ArrowDown') nextIndex = (activeIndex + 1) % itemEls.length;\n if (e.key === 'ArrowUp') nextIndex = (activeIndex - 1 + itemEls.length) % itemEls.length;\n if (e.key === 'Home') nextIndex = 0;\n if (e.key === 'End') nextIndex = itemEls.length - 1;\n setActiveIndex(nextIndex);\n itemEls[nextIndex]?.focus();\n return;\n }\n if (e.key === 'Escape') {\n e.preventDefault();\n close();\n triggerRef.current?.focus();\n }\n if (e.key === 'Tab') {\n // trap focus\n e.preventDefault();\n const itemEls = itemsRef.current.filter(Boolean);\n if (itemEls.length === 0) return;\n const dir = e.shiftKey ? -1 : 1;\n const nextIndex = (activeIndex + dir + itemEls.length) % itemEls.length;\n setActiveIndex(nextIndex);\n itemEls[nextIndex]?.focus();\n }\n };\n document.addEventListener('keydown', handleKey);\n return () => document.removeEventListener('keydown', handleKey);\n }, [isOpen, activeIndex, close]);\n\n // Outside click close\n useEffect(() => {\n if (!isOpen) return;\n const handleClickOutside = (event: MouseEvent) => {\n const isClickInTrigger = dropdownRef.current && dropdownRef.current.contains(event.target as Node);\n const isClickInMenu = menuRef.current && menuRef.current.contains(event.target as Node);\n\n if (!isClickInTrigger && !isClickInMenu) {\n close();\n }\n };\n document.addEventListener('mousedown', handleClickOutside);\n return () => document.removeEventListener('mousedown', handleClickOutside);\n }, [isOpen, close]);\n\n useLayoutEffect(() => {\n if (isOpen && triggerRef.current) {\n const rect = triggerRef.current.getBoundingClientRect();\n setMenuPosition({\n top: rect.bottom,\n left: rect.left,\n width: rect.width\n });\n } else {\n setMenuPosition(null);\n }\n }, [isOpen]);\n\n // Close on scroll or resize (simpler than tracking position)\n useEffect(() => {\n if (!isOpen) return;\n\n const handleScrollOrResize = (event?: Event) => {\n // Allow scrolling inside the menu itself\n if (event && event.target && menuRef.current?.contains(event.target as Node)) {\n return;\n }\n close();\n };\n\n window.addEventListener('scroll', handleScrollOrResize, true);\n window.addEventListener('resize', handleScrollOrResize);\n\n return () => {\n window.removeEventListener('scroll', handleScrollOrResize, true);\n window.removeEventListener('resize', handleScrollOrResize);\n };\n }, [isOpen, close]);\n\n // Auto-focus first item on open (useLayoutEffect to avoid cascading re-renders)\n useLayoutEffect(() => {\n let raf: number \| undefined;\n if (isOpen) {\n const itemEls = itemsRef.current.filter(Boolean);\n if (itemEls.length) {\n // schedule the focus and state update to avoid cascading synchronous renders\n raf = requestAnimationFrame(() => {\n setActiveIndex(0);\n itemEls[0]?.focus();\n });\n }\n } else {\n raf = requestAnimationFrame(() => setActiveIndex(-1));\n }\n return () => {\n if (raf) cancelAnimationFrame(raf);\n };\n }, [isOpen]);\n\n const registerItem = useCallback((el: HTMLButtonElement \| null, index?: number) => {\n // If index provided, set at index; otherwise push/remove based on presence\n if (typeof index === 'number' && index >= 0) {\n itemsRef.current[index] = el;\n return;\n }\n if (el === null) {\n // remove element references\n itemsRef.current = itemsRef.current.filter((x) => x !== el && x != null);\n return;\n }\n // Push new element at the end if not already present\n if (!itemsRef.current.includes(el)) itemsRef.current.push(el);\n }, []);\n\n const { title, subtitle, icon, iconSize = 'md', triggerSize = size, endIcon } = trigger;\n\n const iconNode = icon ? <Icon name={icon} size={iconSize} color=\"currentColor\" /> : null;\n const endIconNode = endIcon ? <Icon name={endIcon} size={iconSize} color=\"currentColor\" /> : null;\n\n // Handle 'none' style by using ghost with bg removal\n const actualButtonStyle = buttonStyle === 'none' ? 'ghost' : buttonStyle;\n const noBackgroundClass =\n buttonStyle === 'none' ? '!bg-transparent hover:!bg-transparent active:!bg-transparent' : '';\n\n const getAlignmentStyle = (): React.CSSProperties => {\n if (!menuPosition) return {};\n const baseStyle: React.CSSProperties = {\n top: menuPosition.top + 4, // slightly lower than trigger\n minWidth: minWidth \|\| undefined,\n maxWidth: maxWidth \|\| undefined\n };\n\n if (align === 'start') {\n baseStyle.left = menuPosition.left;\n } else if (align === 'end') {\n baseStyle.right = window.innerWidth - (menuPosition.left + menuPosition.width);\n } else {\n baseStyle.left = menuPosition.left + menuPosition.width / 2;\n baseStyle.transform = 'translateX(-50%)';\n }\n\n return baseStyle;\n };\n\n return (\n <>\n <div ref={dropdownRef} className={`inline-block ${className}`}>\n <Button\n ref={triggerRef}\n variant={variant}\n style={actualButtonStyle}\n onClick={() => (isOpen ? close() : open())}\n aria-expanded={isOpen}\n aria-haspopup=\"true\"\n aria-controls={isOpen ? 'dropdown-menu' : undefined}\n size={triggerSize}\n className={`${noPadding ? 'px-0' : ''} ${noBackgroundClass} ${triggerClassName}`}\n >\n <span className={`flex items-center ${gapSizes[iconSize]}`}>\n {iconNode && <span className=\"shrink-0\">{iconNode}</span>}\n {(title \|\| subtitle) && (\n <span className={subtitle ? 'text-left' : ''}>\n <span className={subtitle ? 'block font-semibold' : ''}>{title}</span>\n {subtitle && <span className=\"block text-xs text-muted-foreground font-normal\">{subtitle}</span>}\n </span>\n )}\n {endIconNode && <span className=\"shrink-0\">{endIconNode}</span>}\n </span>\n </Button>\n </div>\n {isOpen &&\n menuPosition &&\n createPortal(\n <DropdownContext.Provider value={{ requestClose: close, autoClose, registerItem, minWidth, size }}>\n <div\n id=\"dropdown-menu\"\n ref={menuRef}\n className={`fixed bg-popover text-popover-foreground border border-border rounded-md shadow-lg z-50 ${size === 'sm' ? 'min-w-36 text-xs py-1' : 'min-w-44'} max-h-80 overflow-y-auto origin-top animate-scaleIn focus:outline-none ${menuClassName}`}\n style={getAlignmentStyle()}\n role=\"menu\"\n aria-orientation=\"vertical\"\n tabIndex={-1}\n >\n {children}\n </div>\n </DropdownContext.Provider>,\n document.body\n )}\n </>\n );\n}\n\nDropdown.displayName = 'Dropdown';\n\nexport default Dropdown;\n\n// DropdownItem size mapping constants\n// Map size to text classes for main content\nconst sizeTextMap: Record<string, string> = {\n xs: 'text-xs',\n sm: 'text-sm',\n md: 'text-base',\n lg: 'text-lg',\n xl: 'text-xl'\n} as const;\n\n// Map size to description text classes (one step smaller)\nconst descriptionTextMap: Record<string, string> = {\n xs: 'text-[10px]', // smaller than xs\n sm: 'text-xs',\n md: 'text-sm',\n lg: 'text-base',\n xl: 'text-lg'\n} as const;\n\n// Map size to padding\nconst sizePaddingMap: Record<string, string> = {\n xs: 'px-2 py-1',\n sm: 'px-2.5 py-1.5',\n md: 'px-3.5 py-2',\n lg: 'px-4 py-2.5',\n xl: 'px-5 py-3'\n} as const;\n\n// DropdownItem component (simple abstraction)\nexport type DropdownItemProps = {\n children: React.ReactNode;\n onSelect?: () => void;\n /* Semantic color variant /\n variant?: 'neutral' \| 'primary' \| 'accent' \| 'info' \| 'success' \| 'warning' \| 'error';\n disabled?: boolean;\n className?: string;\n /* Optional muted description below main label /\n description?: string;\n /* Leading icon /\n icon?: string;\n iconSize?: Size;\n /* Trailing icon (e.g., checkmark for selected items) /\n endIcon?: string;\n /* Inherit size from dropdown or override /\n size?: 'sm' \| 'md';\n /* Marks item as selected with enhanced background and optional checkmark /\n selected?: boolean;\n __dropdownIndex?: number; // injected\n __registerItem?: (el: HTMLButtonElement \| null, index: number) => void; // injected (deprecated)\n};\n\nexport function DropdownItem({\n children,\n onSelect,\n variant = 'neutral',\n disabled = false,\n className = '',\n description,\n icon,\n iconSize,\n endIcon,\n size,\n selected = false\n}: Readonly<DropdownItemProps>) {\n const ctx = useContext(DropdownContext);\n const effectiveSize = size ?? ctx?.size ?? 'md';\n const effectiveIconSize = iconSize ?? effectiveSize;\n\n const base = `${sizeTextMap[effectiveSize] \|\| sizeTextMap.md} ${sizePaddingMap[effectiveSize] \|\| sizePaddingMap.md} w-full text-left select-none transition-colors outline-none disabled:opacity-40 disabled:pointer-events-none`;\n const focus =\n 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-popover';\n\n // Base palette for non-selected state\n const palette: Record<string, string> = {\n default: 'text-foreground/90 hover:bg-muted active:bg-muted/80',\n primary: 'text-primary hover:bg-primary/15 active:bg-primary/25 focus-visible:ring-primary',\n accent: 'text-accent hover:bg-accent/15 active:bg-accent/25 focus-visible:ring-accent',\n info: 'text-info hover:bg-info/15 active:bg-info/25 focus-visible:ring-info',\n success: 'text-success hover:bg-success/15 active:bg-success/25 focus-visible:ring-success',\n warning: 'text-warning hover:bg-warning/18 active:bg-warning/28 focus-visible:ring-warning',\n error: 'text-error hover:bg-error/15 active:bg-error/25 focus-visible:ring-error'\n };\n\n // Selected state palette - solid button style with foreground text\n const selectedPalette: Record<string, string> = {\n default: 'bg-muted text-foreground hover:bg-muted-hover hover:text-foreground',\n primary: 'bg-primary text-primary-foreground hover:bg-primary-hover hover:text-primary-foreground',\n accent: 'bg-accent text-accent-foreground hover:bg-accent-hover hover:text-accent-foreground',\n info: 'bg-info text-info-foreground hover:bg-info-hover hover:text-info-foreground',\n success: 'bg-success text-success-foreground hover:bg-success-hover hover:text-success-foreground',\n warning: 'bg-warning text-warning-foreground hover:bg-warning-hover hover:text-warning-foreground',\n error: 'bg-error text-error-foreground hover:bg-error-hover hover:text-error-foreground'\n };\n\n const variantClasses = selected\n ? selectedPalette[variant] \|\| selectedPalette.default\n : palette[variant] \|\| palette.default;\n\n // Determine layout: if we have icons, use horizontal layout, otherwise vertical\n const hasIcons = icon \|\| endIcon;\n const iconNode = icon ? <Icon name={icon} size={effectiveIconSize} color=\"currentColor\" /> : null;\n const endIconNode = endIcon ? <Icon name={endIcon} size={effectiveIconSize} color=\"currentColor\" /> : null;\n\n return (\n <button\n ref={(el) => ctx?.registerItem?.(el)}\n role=\"menuitem\"\n type=\"button\"\n disabled={disabled}\n aria-current={selected ? 'true' : undefined}\n onClick={() => {\n if (disabled) return;\n onSelect?.();\n if (ctx?.autoClose) ctx.requestClose();\n }}\n className={`${base} ${focus} ${variantClasses} ${hasIcons ? 'flex flex-row items-center gap-2.5' : 'flex flex-col'} ${className} cursor-pointer`}\n >\n {iconNode && <span className=\"shrink-0\">{iconNode}</span>}\n <span className=\"flex-1 min-w-0\">\n <span className={`block font-medium leading-snug`}>{children}</span>\n {description && (\n <span\n className={`block ${descriptionTextMap[effectiveSize] \|\| descriptionTextMap.md} text-foreground/60 mt-0.5 line-clamp-2`}\n >\n {description}\n </span>\n )}\n </span>\n {endIconNode && <span className=\"shrink-0\">{endIconNode}</span>}\n </button>\n );\n}\n\n/\n DropdownSeparator - Visual divider for grouping dropdown items\n * Use between items to create visual separation (e.g., separating error actions)\n */\nexport function DropdownSeparator({ className = '' }: Readonly<{ className?: string }>) {\n return <div role=\"separator\" className={`h-px bg-border ${className}`} />;\n}\n"],"names":["itemEls"],"mappings":"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"}

package/dist/index.js CHANGED Viewed

@@ -23,86 +23,88 @@ import { default as default22 } from "./components/data-display/code-block/code-
 import { default as default23 } from "./components/forms/code/code.js";
 import { default as default24 } from "./components/system/color-mode-toggle/color-mode-toggle.js";
 import { default as default25 } from "./components/layout/container/container.js";
-import { default as default26 } from "./components/data-display/data-table/data-table.js";
-import { default as default27 } from "./components/forms/date-picker/date-picker.js";
-import { default as default28 } from "./components/feedback/dialog/delete-dialog.js";
-import { default as default29 } from "./components/feedback/dialog/dialog.js";
-import { default as default30 } from "./components/layout/divider/divider.js";
-import { default as default31 } from "./components/layout/drawer/drawer.js";
-import { default as default32, DropdownItem, DropdownSeparator } from "./components/navigation/dropdown/dropdown.js";
-import { default as default33 } from "./components/forms/editable-text/editable-text.js";
-import { default as default34 } from "./components/data-display/empty-state/empty-state.js";
-import { default as default35 } from "./components/feedback/error-page/error-400.js";
-import { default as default36 } from "./components/feedback/error-page/error-401.js";
-import { default as default37 } from "./components/feedback/error-page/error-403.js";
-import { default as default38 } from "./components/feedback/error-page/error-404.js";
-import { default as default39 } from "./components/layout/feature-section/feature-section.js";
-import { default as default40 } from "./components/forms/fieldset/fieldset.js";
-import { default as default41 } from "./components/layout/footer/footer.js";
-import { default as default42 } from "./components/forms/form/form.js";
-import { default as default43 } from "./components/forms/form-checkbox/form-checkbox.js";
-import { default as default44 } from "./components/forms/form-checkbox-group/form-checkbox-group.js";
-import { default as default45 } from "./components/forms/form-input/form-input.js";
-import { default as default46 } from "./components/forms/form-select/form-select.js";
-import { default as default47 } from "./components/forms/form-textarea/form-textarea.js";
-import { default as default48 } from "./components/layout/grid/grid.js";
-import { default as default49 } from "./components/typography/heading/heading.js";
-import { default as default50 } from "./components/layout/hero/hero.js";
+import { default as default26 } from "./components/data-display/data-grid/data-grid.js";
+import { default as default27 } from "./components/data-display/data-grid/data-grid-cell.js";
+import { default as default28 } from "./components/data-display/data-table/data-table.js";
+import { default as default29 } from "./components/forms/date-picker/date-picker.js";
+import { default as default30 } from "./components/feedback/dialog/delete-dialog.js";
+import { default as default31 } from "./components/feedback/dialog/dialog.js";
+import { default as default32 } from "./components/layout/divider/divider.js";
+import { default as default33 } from "./components/layout/drawer/drawer.js";
+import { default as default34, DropdownItem, DropdownSeparator } from "./components/navigation/dropdown/dropdown.js";
+import { default as default35 } from "./components/forms/editable-text/editable-text.js";
+import { default as default36 } from "./components/data-display/empty-state/empty-state.js";
+import { default as default37 } from "./components/feedback/error-page/error-400.js";
+import { default as default38 } from "./components/feedback/error-page/error-401.js";
+import { default as default39 } from "./components/feedback/error-page/error-403.js";
+import { default as default40 } from "./components/feedback/error-page/error-404.js";
+import { default as default41 } from "./components/layout/feature-section/feature-section.js";
+import { default as default42 } from "./components/forms/fieldset/fieldset.js";
+import { default as default43 } from "./components/layout/footer/footer.js";
+import { default as default44 } from "./components/forms/form/form.js";
+import { default as default45 } from "./components/forms/form-checkbox/form-checkbox.js";
+import { default as default46 } from "./components/forms/form-checkbox-group/form-checkbox-group.js";
+import { default as default47 } from "./components/forms/form-input/form-input.js";
+import { default as default48 } from "./components/forms/form-select/form-select.js";
+import { default as default49 } from "./components/forms/form-textarea/form-textarea.js";
+import { default as default50 } from "./components/layout/grid/grid.js";
+import { default as default51 } from "./components/typography/heading/heading.js";
+import { default as default52 } from "./components/layout/hero/hero.js";
 import { Icon } from "./components/system/icon/icon.js";
-import { default as default51 } from "./components/forms/button/icon-button.js";
-import { default as default52 } from "./components/forms/button/inline-button.js";
-import { default as default53 } from "./components/forms/input/input.js";
-import { default as default54 } from "./components/forms/input-group/input-group.js";
-import { default as default55 } from "./components/layout/left-nav-layout/left-nav-item.js";
-import { default as default56 } from "./components/layout/left-nav-layout/left-nav-layout.js";
-import { default as default57 } from "./components/layout/left-nav-layout/left-nav-section.js";
-import { default as default58 } from "./components/typography/link/link.js";
+import { default as default53 } from "./components/forms/button/icon-button.js";
+import { default as default54 } from "./components/forms/button/inline-button.js";
+import { default as default55 } from "./components/forms/input/input.js";
+import { default as default56 } from "./components/forms/input-group/input-group.js";
+import { default as default57 } from "./components/layout/left-nav-layout/left-nav-item.js";
+import { default as default58 } from "./components/layout/left-nav-layout/left-nav-layout.js";
+import { default as default59 } from "./components/layout/left-nav-layout/left-nav-section.js";
+import { default as default60 } from "./components/typography/link/link.js";
 import { List, ListItem } from "./components/data-display/list/list.js";
-import { default as default59 } from "./components/feedback/loading-container/loading-container.js";
-import { default as default60 } from "./components/feedback/modal/modal.js";
-import { default as default61 } from "./components/forms/multi-select/multi-select.js";
-import { default as default62 } from "./components/navigation/nav/nav.js";
-import { default as default63 } from "./components/navigation/nav-dropdown/nav-dropdown.js";
-import { default as default64 } from "./components/navigation/nav-dropdown/nav-dropdown-item.js";
-import { default as default65 } from "./components/navigation/navbar/navbar.js";
-import { default as default66 } from "./components/navigation/navbar/navbar-brand.js";
-import { default as default67 } from "./components/navigation/navbar/navbar-link.js";
-import { default as default68 } from "./components/navigation/navbar/navbar-toggle.js";
-import { default as default69 } from "./components/navigation/notification-dropdown/notification-dropdown.js";
-import { default as default70 } from "./components/feedback/overlay/useOverlay.js";
-import { default as default71 } from "./components/layout/page/page.js";
-import { default as default72 } from "./components/layout/page-header/page-header.js";
+import { default as default61 } from "./components/feedback/loading-container/loading-container.js";
+import { default as default62 } from "./components/feedback/modal/modal.js";
+import { default as default63 } from "./components/forms/multi-select/multi-select.js";
+import { default as default64 } from "./components/navigation/nav/nav.js";
+import { default as default65 } from "./components/navigation/nav-dropdown/nav-dropdown.js";
+import { default as default66 } from "./components/navigation/nav-dropdown/nav-dropdown-item.js";
+import { default as default67 } from "./components/navigation/navbar/navbar.js";
+import { default as default68 } from "./components/navigation/navbar/navbar-brand.js";
+import { default as default69 } from "./components/navigation/navbar/navbar-link.js";
+import { default as default70 } from "./components/navigation/navbar/navbar-toggle.js";
+import { default as default71 } from "./components/navigation/notification-dropdown/notification-dropdown.js";
+import { default as default72 } from "./components/feedback/overlay/useOverlay.js";
+import { default as default73 } from "./components/layout/page/page.js";
+import { default as default74 } from "./components/layout/page-header/page-header.js";
 import { PageTransition } from "./components/layout/page-transition/page-transition.js";
-import { default as default73 } from "./components/navigation/pagination/pagination.js";
-import { default as default74 } from "./components/feedback/popover/popover.js";
-import { default as default75 } from "./components/feedback/progress-bar/progress-bar.js";
-import { default as default76 } from "./components/forms/radio/radio.js";
-import { default as default77 } from "./components/forms/radio-group/radio-group.js";
-import { default as default78 } from "./components/navigation/scroll-nav/scroll-nav.js";
-import { default as default79 } from "./components/layout/section/section.js";
-import { default as default80 } from "./components/layout/section-header/section-header.js";
-import { default as default81 } from "./components/forms/select/select.js";
-import { default as default82 } from "./components/forms/select/select-item.js";
-import { default as default83 } from "./components/navigation/sidebar/sidebar.js";
-import { default as default84 } from "./components/feedback/skeleton/skeleton.js";
-import { default as default85 } from "./components/forms/slider/slider.js";
-import { default as default86, useStaggeredTransition } from "./components/feedback/smooth-transition/smooth-transition.js";
-import { default as default87 } from "./components/feedback/spinner/spinner.js";
-import { default as default88 } from "./components/layout/stack/stack.js";
-import { default as default89 } from "./components/data-display/badge/status-label.js";
-import { default as default90 } from "./components/navigation/stepper/stepper.js";
-import { default as default91 } from "./components/forms/switch/switch.js";
+import { default as default75 } from "./components/navigation/pagination/pagination.js";
+import { default as default76 } from "./components/feedback/popover/popover.js";
+import { default as default77 } from "./components/feedback/progress-bar/progress-bar.js";
+import { default as default78 } from "./components/forms/radio/radio.js";
+import { default as default79 } from "./components/forms/radio-group/radio-group.js";
+import { default as default80 } from "./components/navigation/scroll-nav/scroll-nav.js";
+import { default as default81 } from "./components/layout/section/section.js";
+import { default as default82 } from "./components/layout/section-header/section-header.js";
+import { default as default83 } from "./components/forms/select/select.js";
+import { default as default84 } from "./components/forms/select/select-item.js";
+import { default as default85 } from "./components/navigation/sidebar/sidebar.js";
+import { default as default86 } from "./components/feedback/skeleton/skeleton.js";
+import { default as default87 } from "./components/forms/slider/slider.js";
+import { default as default88, useStaggeredTransition } from "./components/feedback/smooth-transition/smooth-transition.js";
+import { default as default89 } from "./components/feedback/spinner/spinner.js";
+import { default as default90 } from "./components/layout/stack/stack.js";
+import { default as default91 } from "./components/data-display/badge/status-label.js";
+import { default as default92 } from "./components/navigation/stepper/stepper.js";
+import { default as default93 } from "./components/forms/switch/switch.js";
 import { Table, TableBody, TableCell, TableFooter, TableHeadCell, TableHeader, TableRow } from "./components/data-display/table/table.js";
-import { default as default92 } from "./components/navigation/tabs/tabs.js";
-import { default as default93 } from "./components/typography/text/text.js";
-import { default as default94 } from "./components/forms/textarea/textarea.js";
+import { default as default94 } from "./components/navigation/tabs/tabs.js";
+import { default as default95 } from "./components/typography/text/text.js";
+import { default as default96 } from "./components/forms/textarea/textarea.js";
 import { ThemeProvider, useTheme } from "./components/system/theme-provider/theme-provider.js";
-import { default as default95, TimelineItem } from "./components/data-display/timeline/timeline.js";
-import { default as default96 } from "./components/feedback/toast/toast.js";
-import { default as default97 } from "./components/feedback/tooltip/tooltip.js";
-import { default as default98 } from "./hooks/useDebounce.js";
-import { default as default99 } from "./hooks/useScrollReset.js";
-import { default as default100 } from "./components/data-display/data-table/use-table.js";
+import { default as default97, TimelineItem } from "./components/data-display/timeline/timeline.js";
+import { default as default98 } from "./components/feedback/toast/toast.js";
+import { default as default99 } from "./components/feedback/tooltip/tooltip.js";
+import { default as default100 } from "./hooks/useDebounce.js";
+import { default as default101 } from "./hooks/useScrollReset.js";
+import { default as default102 } from "./components/data-display/data-table/use-table.js";
 import { ActionCard } from "./components/layout/action-card/action-card.js";
 import { GoogleLogo } from "./components/branding/google-logo.js";
 import { HyddenLogo } from "./components/branding/hydden-logo.js";
@@ -138,84 +140,86 @@ export {
   default23 as CodeInput,
   default24 as ColorModeToggle,
   default25 as Container,
-  default26 as DataTable,
-  default27 as DatePicker,
-  default28 as DeleteDialog,
-  default29 as Dialog,
-  default30 as Divider,
-  default31 as Drawer,
-  default32 as Dropdown,
+  default26 as DataGrid,
+  default27 as DataGridCell,
+  default28 as DataTable,
+  default29 as DatePicker,
+  default30 as DeleteDialog,
+  default31 as Dialog,
+  default32 as Divider,
+  default33 as Drawer,
+  default34 as Dropdown,
   DropdownItem,
   DropdownSeparator,
-  default33 as EditableText,
-  default34 as EmptyState,
-  default35 as Error400,
-  default36 as Error401,
-  default37 as Error403,
-  default38 as Error404,
-  default39 as FeatureSection,
-  default40 as Fieldset,
-  default41 as Footer,
-  default42 as Form,
-  default43 as FormCheckbox,
-  default44 as FormCheckboxGroup,
-  default45 as FormInput,
-  default46 as FormSelect,
-  default47 as FormTextarea,
+  default35 as EditableText,
+  default36 as EmptyState,
+  default37 as Error400,
+  default38 as Error401,
+  default39 as Error403,
+  default40 as Error404,
+  default41 as FeatureSection,
+  default42 as Fieldset,
+  default43 as Footer,
+  default44 as Form,
+  default45 as FormCheckbox,
+  default46 as FormCheckboxGroup,
+  default47 as FormInput,
+  default48 as FormSelect,
+  default49 as FormTextarea,
   GoogleLogo,
-  default48 as Grid,
-  default49 as Heading,
-  default50 as Hero,
+  default50 as Grid,
+  default51 as Heading,
+  default52 as Hero,
   HyddenLogo,
   Icon,
-  default51 as IconButton,
-  default52 as InlineButton,
-  default53 as Input,
-  default54 as InputGroup,
-  default55 as LeftNavItem,
-  default56 as LeftNavLayout,
-  default57 as LeftNavSection,
-  default58 as Link,
+  default53 as IconButton,
+  default54 as InlineButton,
+  default55 as Input,
+  default56 as InputGroup,
+  default57 as LeftNavItem,
+  default58 as LeftNavLayout,
+  default59 as LeftNavSection,
+  default60 as Link,
   List,
   ListItem,
-  default59 as LoadingContainer,
+  default61 as LoadingContainer,
   MicrosoftLogo,
-  default60 as Modal,
-  default61 as MultiSelect,
-  default62 as Nav,
-  default63 as NavDropdown,
-  default64 as NavDropdownItem,
-  default65 as Navbar,
-  default66 as NavbarBrand,
-  default67 as NavbarLink,
-  default68 as NavbarToggle,
-  default69 as NotificationDropdown,
-  default70 as OverlayProvider,
-  default71 as Page,
-  default72 as PageHeader,
+  default62 as Modal,
+  default63 as MultiSelect,
+  default64 as Nav,
+  default65 as NavDropdown,
+  default66 as NavDropdownItem,
+  default67 as Navbar,
+  default68 as NavbarBrand,
+  default69 as NavbarLink,
+  default70 as NavbarToggle,
+  default71 as NotificationDropdown,
+  default72 as OverlayProvider,
+  default73 as Page,
+  default74 as PageHeader,
   PageTransition,
-  default73 as Pagination,
-  default74 as Popover,
-  default75 as ProgressBar,
-  default76 as Radio,
-  default77 as RadioGroup,
-  default78 as ScrollNav,
-  default79 as Section,
-  default80 as SectionHeader,
-  default81 as Select,
-  default82 as SelectItem,
+  default75 as Pagination,
+  default76 as Popover,
+  default77 as ProgressBar,
+  default78 as Radio,
+  default79 as RadioGroup,
+  default80 as ScrollNav,
+  default81 as Section,
+  default82 as SectionHeader,
+  default83 as Select,
+  default84 as SelectItem,
   SettingItem,
   SettingsPage,
   SettingsSection,
-  default83 as Sidebar,
-  default84 as Skeleton,
-  default85 as Slider,
-  default86 as SmoothTransition,
-  default87 as Spinner,
-  default88 as Stack,
-  default89 as StatusLabel,
-  default90 as Stepper,
-  default91 as Switch,
+  default85 as Sidebar,
+  default86 as Skeleton,
+  default87 as Slider,
+  default88 as SmoothTransition,
+  default89 as Spinner,
+  default90 as Stack,
+  default91 as StatusLabel,
+  default92 as Stepper,
+  default93 as Switch,
   Table,
   TableBody,
   TableCell,
@@ -223,14 +227,14 @@ export {
   TableHeadCell,
   TableHeader,
   TableRow,
-  default92 as Tabs,
-  default93 as Text,
-  default94 as Textarea,
+  default94 as Tabs,
+  default95 as Text,
+  default96 as Textarea,
   ThemeProvider,
-  default95 as Timeline,
+  default97 as Timeline,
   TimelineItem,
-  default96 as Toast,
-  default97 as Tooltip,
+  default98 as Toast,
+  default99 as Tooltip,
   authFetch,
   avatarSizes,
   badgeSizes,
@@ -276,10 +280,10 @@ export {
   statusLabelSizes,
   textSizes,
   useAuth,
-  default98 as useDebounce,
-  default99 as useScrollReset,
+  default100 as useDebounce,
+  default101 as useScrollReset,
   useStaggeredTransition,
-  default100 as useTable,
+  default102 as useTable,
   useTheme,
   validationBorderClasses,
   validationRingClasses,

package/dist/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}