eidos-ui 1.0.1 → 1.1.0

package/dist/chunk-HNUTV3HR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-HNUTV3HR.cjs","../src/components/Combobox/Combobox.component.tsx"],"names":["label"],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-HNUTV3HR.cjs","sourcesContent":[null,"import React, { useState, useCallback, useRef, useEffect, useMemo, useId } from 'react';\nimport { Check, ChevronDown, X, Loader2, CircleAlert } from 'lucide-react';\nimport { Input } from '../Input/Input.component';\nimport { Dropdown } from '../Dropdown/Dropdown.component';\nimport type { ComboboxProps, ComboboxOption } from './Combobox.types';\nimport './Combobox.scss';\n\n// ─── Types ───────────────────────────────────────────────────────────────────\n\ntype OptionEntry =\n  | { type: 'group'; group: string; key: string }\n  | { type: 'option'; option: ComboboxOption; index: number; key: string };\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport const Combobox: React.FC<ComboboxProps> = ({\n  options = [],\n  value,\n  defaultValue,\n  onChange,\n  onSearch,\n  placeholder = 'Search or select…',\n  loading = false,\n  loadingText = 'Searching…',\n  emptyText = 'No results found',\n  allowFreeText = false,\n  clearable = true,\n  disabled = false,\n  size = 'md',\n  label,\n  error,\n  hint,\n  fullWidth = false,\n  className = '',\n  maxHeight = '300px',\n  renderOption,\n}) => {\n  const uid = useId();\n\n  // ─── Refs ─────────────────────────────────────────────────────────────────\n\n  /** Entire combobox wrapper - used for click-outside detection */\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  /** The trigger wrapper div - passed to Dropdown as externalTriggerRef for width */\n  const comboboxTriggerRef = useRef<HTMLDivElement>(null);\n\n  /** The 0-height span that IS the Dropdown trigger element - programmatically clicked to open */\n  const dropdownSpanRef = useRef<HTMLSpanElement>(null);\n\n  /** Native input element */\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  /** Focusable option divs for scroll-into-view */\n  const optionRefs = useRef<(HTMLDivElement | null)[]>([]);\n\n  /**\n   * Synchronous open-state flag.\n   * React state updates are async; reading this ref inside event handlers\n   * gives us the true current value without waiting for a re-render.\n   */\n  const isOpenRef = useRef(false);\n\n  // ─── State ────────────────────────────────────────────────────────────────\n\n  const isControlled = value !== undefined;\n\n  const getInitialInputValue = (): string => {\n    const seed = isControlled ? value : defaultValue;\n    if (!seed) return '';\n    const match = options.find((o) => o.value === seed);\n    return match ? match.label : allowFreeText ? seed : '';\n  };\n\n  const getInitialCommittedValue = (): string => {\n    return isControlled ? (value ?? '') : (defaultValue ?? '');\n  };\n\n  const [inputValue, _setInputValue] = useState<string>(getInitialInputValue);\n  const inputValueRef = useRef<string>(inputValue);\n  const setInputValue = useCallback((v: string) => {\n    inputValueRef.current = v;\n    _setInputValue(v);\n  }, []);\n\n  const [committedValue, _setCommittedValue] = useState<string>(getInitialCommittedValue);\n  const committedValueRef = useRef<string>(committedValue);\n  const setCommittedValue = useCallback((v: string) => {\n    committedValueRef.current = v;\n    _setCommittedValue(v);\n  }, []);\n\n  const [isOpen, setIsOpen] = useState(false);\n  const [menuKey, setMenuKey] = useState(0);\n  const [focusedIndex, setFocusedIndex] = useState(-1);\n\n  // ─── Sync controlled value ────────────────────────────────────────────────\n\n  useEffect(() => {\n    if (!isControlled) return;\n    const v = value ?? '';\n    const match = options.find((o) => o.value === v);\n    const label = match ? match.label : allowFreeText ? v : '';\n    setInputValue(label);\n    setCommittedValue(v);\n  }, [value, isControlled, options, allowFreeText, setInputValue, setCommittedValue]);\n\n  // ─── Derived: filtered options ────────────────────────────────────────────\n\n  const filteredOptions = useMemo<ComboboxOption[]>(() => {\n    const q = inputValue.toLowerCase();\n    if (!q) return options;\n    return options.filter((o) => o.label.toLowerCase().includes(q));\n  }, [options, inputValue]);\n\n  // Reset focused index when the filtered set changes\n  useEffect(() => {\n    setFocusedIndex(-1);\n  }, [filteredOptions]);\n\n  // Keep optionRefs array in sync with filteredOptions length\n  useEffect(() => {\n    optionRefs.current = optionRefs.current.slice(0, filteredOptions.length);\n  }, [filteredOptions.length]);\n\n  // ─── Derived: option entries (with group headers) ─────────────────────────\n\n  const optionEntries = useMemo<OptionEntry[]>(() => {\n    const entries: OptionEntry[] = [];\n    const hasGroups = filteredOptions.some((o) => o.group);\n\n    if (!hasGroups) {\n      filteredOptions.forEach((option, index) => {\n        entries.push({ type: 'option', option, index, key: option.id });\n      });\n      return entries;\n    }\n\n    // Build ordered group map while preserving insertion order\n    const groupMap = new Map<string | null, ComboboxOption[]>();\n    for (const option of filteredOptions) {\n      const g = option.group ?? null;\n      if (!groupMap.has(g)) groupMap.set(g, []);\n      groupMap.get(g)!.push(option);\n    }\n\n    let optionIndex = 0;\n    for (const [group, opts] of groupMap.entries()) {\n      if (group !== null) {\n        entries.push({ type: 'group', group, key: `group-${group}` });\n      }\n      for (const option of opts) {\n        entries.push({ type: 'option', option, index: optionIndex++, key: option.id });\n      }\n    }\n\n    return entries;\n  }, [filteredOptions]);\n\n  // ─── Open / Close helpers ─────────────────────────────────────────────────\n\n  /**\n   * Open the dropdown by programmatically clicking the 0-height span trigger.\n   * The click bubbles to div.eidos-dropdown-trigger → Dropdown.handleTriggerClick → opens.\n   *\n   * We set isOpenRef AFTER the synthetic click so that the Dropdown's toggle\n   * handler fires while isOpenRef is still false (allowing it to open).\n   */\n  const openDropdown = useCallback(() => {\n    if (isOpenRef.current || disabled) return;\n    dropdownSpanRef.current?.click(); // opens the Dropdown (bubbles to trigger)\n    isOpenRef.current = true;\n    setIsOpen(true);\n  }, [disabled]);\n\n  /**\n   * Close the dropdown by remounting it (menuKey increment resets internal state).\n   * Optionally revert inputValue to the last committed value.\n   */\n  const closeDropdown = useCallback(\n    (revertInput = false) => {\n      isOpenRef.current = false;\n      setIsOpen(false);\n      setFocusedIndex(-1);\n      setMenuKey((prev) => prev + 1);\n\n      if (revertInput) {\n        const match = options.find((o) => o.value === committedValueRef.current);\n        setInputValue(match ? match.label : allowFreeText ? committedValueRef.current : '');\n      }\n    },\n    [options, allowFreeText, setInputValue],\n  );\n\n  // ─── Click-outside detection ──────────────────────────────────────────────\n\n  useEffect(() => {\n    const handleMouseDown = (e: MouseEvent) => {\n      if (!isOpenRef.current) return;\n      // defaultPrevented is set by the listbox's onMouseDown - means the user\n      // clicked an option in the portal, not truly outside the combobox.\n      if (e.defaultPrevented) return;\n      if (containerRef.current?.contains(e.target as Node)) return;\n\n      // Focus leaving to a non-focusable target: validate and close\n      isOpenRef.current = false;\n      setIsOpen(false);\n      setFocusedIndex(-1);\n      setMenuKey((prev) => prev + 1);\n\n      const current = inputValueRef.current;\n      const committed = committedValueRef.current;\n\n      if (!allowFreeText) {\n        const match = options.find((o) => o.label.toLowerCase() === current.toLowerCase());\n        if (match) {\n          if (match.value !== committed) {\n            setCommittedValue(match.value);\n            onChange?.(match.value);\n            setInputValue(match.label);\n          }\n        } else {\n          const revertMatch = options.find((o) => o.value === committed);\n          setInputValue(revertMatch ? revertMatch.label : '');\n        }\n      } else {\n        if (current !== committed) {\n          setCommittedValue(current);\n          onChange?.(current);\n        }\n      }\n    };\n\n    document.addEventListener('mousedown', handleMouseDown);\n    return () => document.removeEventListener('mousedown', handleMouseDown);\n  }, [allowFreeText, options, onChange, setCommittedValue, setInputValue]);\n\n  // ─── Input handlers ───────────────────────────────────────────────────────\n\n  const handleFocus = useCallback(() => {\n    openDropdown();\n  }, [openDropdown]);\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const query = e.target.value;\n      setInputValue(query);\n      onSearch?.(query);\n      if (!isOpenRef.current) openDropdown();\n    },\n    [setInputValue, onSearch, openDropdown],\n  );\n\n  /**\n   * On blur, validate the typed value against options.\n   * A 0ms defer ensures a click on a posIcon button (X / chevron) inside the\n   * Input completes its onClick before we run close logic, so we can check\n   * document.activeElement reliably.\n   */\n  const handleBlur = useCallback(() => {\n    setTimeout(() => {\n      // If focus came back inside the container (e.g., posIcon button clicked),\n      // don't close or validate yet.\n      if (containerRef.current?.contains(document.activeElement)) return;\n\n      // Read both refs *inside* the deferred callback, never captured at blur\n      // time - that's the whole reason they're kept in sync by the setters.\n      // Anything can run in the gap this 0ms defer opens, including the click\n      // that caused the blur: a controlled consumer clearing `value` from\n      // another control (e.g. DataGrid's \"Clear filters\", which resets every\n      // quick filter at once) updates the refs via the sync effect, and stale\n      // captured values would then resurrect the label that was just cleared.\n      const current = inputValueRef.current;\n      const committed = committedValueRef.current;\n\n      // Close\n      isOpenRef.current = false;\n      setIsOpen(false);\n      setFocusedIndex(-1);\n      setMenuKey((prev) => prev + 1);\n\n      // Validate\n      if (!allowFreeText) {\n        const match = options.find((o) => o.label.toLowerCase() === current.toLowerCase());\n        if (match) {\n          if (match.value !== committed) {\n            setCommittedValue(match.value);\n            onChange?.(match.value);\n            setInputValue(match.label);\n          } else {\n            // Normalize the display label (fix casing)\n            setInputValue(match.label);\n          }\n        } else {\n          // No match - revert to last committed value\n          const revertMatch = options.find((o) => o.value === committed);\n          setInputValue(revertMatch ? revertMatch.label : '');\n        }\n      } else {\n        // allowFreeText: commit whatever the user typed\n        if (current !== committed) {\n          setCommittedValue(current);\n          onChange?.(current);\n        }\n      }\n    }, 0);\n  }, [allowFreeText, options, onChange, setCommittedValue, setInputValue]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (disabled) return;\n\n      switch (e.key) {\n        case 'ArrowDown':\n          e.preventDefault();\n          if (!isOpenRef.current) {\n            openDropdown();\n            setFocusedIndex(0);\n          } else {\n            setFocusedIndex((prev) => {\n              const next = prev < filteredOptions.length - 1 ? prev + 1 : 0;\n              setTimeout(\n                () =>\n                  optionRefs.current[next]?.scrollIntoView({\n                    block: 'nearest',\n                    behavior: 'smooth',\n                  }),\n                0,\n              );\n              return next;\n            });\n          }\n          break;\n\n        case 'ArrowUp':\n          e.preventDefault();\n          if (!isOpenRef.current) {\n            openDropdown();\n            setFocusedIndex(filteredOptions.length - 1);\n          } else {\n            setFocusedIndex((prev) => {\n              const next = prev > 0 ? prev - 1 : filteredOptions.length - 1;\n              setTimeout(\n                () =>\n                  optionRefs.current[next]?.scrollIntoView({\n                    block: 'nearest',\n                    behavior: 'smooth',\n                  }),\n                0,\n              );\n              return next;\n            });\n          }\n          break;\n\n        case 'Enter':\n          e.preventDefault();\n          if (isOpenRef.current && focusedIndex >= 0 && focusedIndex < filteredOptions.length) {\n            handleOptionSelect(filteredOptions[focusedIndex]);\n          } else if (allowFreeText && inputValue.trim()) {\n            const trimmed = inputValue.trim();\n            setCommittedValue(trimmed);\n            onChange?.(trimmed);\n            closeDropdown();\n          }\n          break;\n\n        case 'Escape':\n          e.preventDefault();\n          if (isOpenRef.current) {\n            closeDropdown(true /* revert */);\n          }\n          break;\n\n        default:\n          break;\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      disabled,\n      filteredOptions,\n      focusedIndex,\n      allowFreeText,\n      inputValue,\n      onChange,\n      openDropdown,\n      closeDropdown,\n      setCommittedValue,\n    ],\n  );\n\n  // ─── Option selection ─────────────────────────────────────────────────────\n\n  const handleOptionSelect = useCallback(\n    (option: ComboboxOption) => {\n      if (option.disabled) return;\n      setInputValue(option.label);\n      setCommittedValue(option.value);\n      onChange?.(option.value);\n      closeDropdown();\n      // Return focus to the input so the user can continue interacting\n      inputRef.current?.focus();\n    },\n    [onChange, closeDropdown, setInputValue, setCommittedValue],\n  );\n\n  // ─── Clear ────────────────────────────────────────────────────────────────\n\n  const handleClearClick = useCallback(() => {\n    setInputValue('');\n    setCommittedValue('');\n    onChange?.('');\n    // Re-focus input so the user can immediately start typing again\n    inputRef.current?.focus();\n  }, [onChange, setInputValue, setCommittedValue]);\n\n  // ─── Chevron toggle ───────────────────────────────────────────────────────\n\n  const handleChevronClick = useCallback(() => {\n    if (isOpenRef.current) {\n      closeDropdown();\n    } else {\n      openDropdown();\n    }\n  }, [closeDropdown, openDropdown]);\n\n  // ─── Render: individual option ────────────────────────────────────────────\n\n  const renderOptionItem = useCallback(\n    (option: ComboboxOption, index: number): React.ReactNode => {\n      const isSelected = option.value === committedValue;\n      const isFocused = index === focusedIndex;\n\n      const classes = [\n        'eidos-combobox-option',\n        isSelected && 'eidos-combobox-option--selected',\n        isFocused && 'eidos-combobox-option--focused',\n        option.disabled && 'eidos-combobox-option--disabled',\n      ]\n        .filter(Boolean)\n        .join(' ');\n\n      return (\n        <div\n          key={option.id}\n          ref={(el) => {\n            optionRefs.current[index] = el;\n          }}\n          className={classes}\n          onClick={() => handleOptionSelect(option)}\n          onMouseEnter={() => !option.disabled && setFocusedIndex(index)}\n          role=\"option\"\n          aria-selected={isSelected}\n          aria-disabled={option.disabled}\n          id={`${uid}-option-${index}`}\n        >\n          {renderOption ? (\n            renderOption(option)\n          ) : (\n            <>\n              <Check\n                className={`eidos-combobox-option-icon${\n                  !isSelected ? ' eidos-combobox-option-icon--hidden' : ''\n                }`}\n              />\n              <span className=\"eidos-combobox-option-label\">{option.label}</span>\n              {option.description && (\n                <span className=\"eidos-combobox-option-description\">{option.description}</span>\n              )}\n            </>\n          )}\n        </div>\n      );\n    },\n    [committedValue, focusedIndex, handleOptionSelect, renderOption, uid],\n  );\n\n  // ─── Render: dropdown content ─────────────────────────────────────────────\n\n  const dropdownContent = useMemo(() => {\n    if (loading) {\n      return (\n        <div className=\"eidos-combobox-loading\">\n          <Loader2 className=\"eidos-combobox-loading-icon\" />\n          <span>{loadingText}</span>\n        </div>\n      );\n    }\n\n    if (filteredOptions.length === 0) {\n      return <div className=\"eidos-combobox-empty\">{emptyText}</div>;\n    }\n\n    return optionEntries.map((entry) => {\n      if (entry.type === 'group') {\n        return (\n          <div key={entry.key} className=\"eidos-combobox-option-group-label\">\n            {entry.group}\n          </div>\n        );\n      }\n      return renderOptionItem(entry.option, entry.index);\n    });\n  }, [loading, loadingText, filteredOptions.length, emptyText, optionEntries, renderOptionItem]);\n\n  // ─── posIcon / posIconButton wiring ───────────────────────────────────────\n\n  const hasClearableValue = clearable && !!inputValue;\n  const posIcon = hasClearableValue ? X : ChevronDown;\n  const posIconClick = hasClearableValue ? handleClearClick : handleChevronClick;\n\n  // ─── CSS classes ──────────────────────────────────────────────────────────\n\n  const containerClasses = [\n    'eidos-combobox',\n    fullWidth && 'eidos-combobox--fullWidth',\n    error && 'eidos-combobox--error',\n    disabled && 'eidos-combobox--disabled',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const maxHeightValue = typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight;\n\n  // ─── Render ───────────────────────────────────────────────────────────────\n\n  return (\n    <div\n      ref={containerRef}\n      className={containerClasses}\n      aria-expanded={isOpen}\n      aria-haspopup=\"listbox\"\n    >\n      <div ref={comboboxTriggerRef} className=\"eidos-combobox-trigger\">\n        {/*\n          The Input is a direct child of eidos-combobox-trigger.\n          It is NOT inside the Dropdown trigger div, so clicking it\n          never bubbles to Dropdown.handleTriggerClick and never\n          accidentally toggles the dropdown closed mid-edit.\n        */}\n        <Input\n          ref={inputRef}\n          value={inputValue}\n          onChange={handleChange}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          onKeyDown={handleKeyDown}\n          placeholder={placeholder}\n          disabled={disabled}\n          size={size}\n          fullWidth\n          label={label}\n          clearable={false} // we render our own clear via posIcon\n          isSelect={false}\n          posIcon={posIcon}\n          posIconButton\n          onPosIconClick={posIconClick}\n          aria-autocomplete=\"list\"\n          aria-controls={`${uid}-listbox`}\n          aria-activedescendant={focusedIndex >= 0 ? `${uid}-option-${focusedIndex}` : undefined}\n        />\n\n        {/*\n          The Dropdown trigger is a 0-height span placed AFTER the Input\n          in the normal document flow. Its getBoundingClientRect sits at\n          exactly the bottom edge of the Input, giving the Dropdown correct\n          placement without any click-toggle collision with the Input above.\n          closeOnClickOutside and closeOnEscape are disabled because we own\n          those interactions in our mousedown listener and onKeyDown handler.\n        */}\n        <Dropdown\n          key={menuKey}\n          trigger={\n            <span\n              ref={dropdownSpanRef}\n              className=\"eidos-combobox-dropdown-anchor\"\n              aria-hidden=\"true\"\n            />\n          }\n          content={\n            <div\n              id={`${uid}-listbox`}\n              className=\"eidos-combobox-options\"\n              role=\"listbox\"\n              aria-label={label ?? 'Options'}\n              // Prevent the input from blurring when the user clicks an option,\n              // and mark this event so the click-outside handler ignores it.\n              onMouseDown={(e) => e.preventDefault()}\n            >\n              {dropdownContent}\n            </div>\n          }\n          triggerRef={comboboxTriggerRef as React.RefObject<HTMLElement | null>}\n          maxHeight={maxHeightValue}\n          autoWidth\n          closeOnClickOutside={false}\n          closeOnEscape={false}\n        />\n      </div>\n\n      {hint && !error && <span className=\"eidos-combobox-hint\">{hint}</span>}\n      {error && (\n        <span className=\"eidos-combobox-error-message\">\n          <CircleAlert className=\"eidos-combobox-error-icon\" />\n          {error}\n        </span>\n      )}\n    </div>\n  );\n};\n\nCombobox.displayName = 'Combobox';\n"]}

package/dist/chunk-I44YNYI6.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-I44YNYI6.cjs"],"names":[],"mappings":"AAAA","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-I44YNYI6.cjs"}
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-I44YNYI6.cjs"],"names":[],"mappings":"AAAA","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-I44YNYI6.cjs"}

package/dist/chunk-I6UOIS4J.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-I6UOIS4J.cjs"],"names":[],"mappings":"AAAA","file":"/Users/pedromealha/Documents/Repositories/Personal/eidos-ui/dist/chunk-I6UOIS4J.cjs"}
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-I6UOIS4J.cjs"],"names":[],"mappings":"AAAA","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-I6UOIS4J.cjs"}

package/dist/{chunk-LEZ4HSBD.cjs → chunk-IC2M4N7R.cjs}

@@ -11,28 +11,28 @@
 
 
 
-var _chunkL3UPSLJ5cjs = require('./chunk-L3UPSLJ5.cjs');
+var _chunkPA4IT2XQcjs = require('./chunk-PA4IT2XQ.cjs');
 
 
-var _chunkR36SGSJXcjs = require('./chunk-R36SGSJX.cjs');
+var _chunkTROYIUDHcjs = require('./chunk-TROYIUDH.cjs');
 
 
-var _chunkVZ43OLU6cjs = require('./chunk-VZ43OLU6.cjs');
+var _chunkEQEV7GPTcjs = require('./chunk-EQEV7GPT.cjs');
 
 
-var _chunkSAFSEXMUcjs = require('./chunk-SAFSEXMU.cjs');
+var _chunkISABZ2VXcjs = require('./chunk-ISABZ2VX.cjs');
 
 
-var _chunkV5JNYS77cjs = require('./chunk-V5JNYS77.cjs');
+var _chunkKV3V2CPHcjs = require('./chunk-KV3V2CPH.cjs');
 
 
-var _chunkG2FANEA2cjs = require('./chunk-G2FANEA2.cjs');
+var _chunkIJ4DXG7Dcjs = require('./chunk-IJ4DXG7D.cjs');
 
 
-var _chunkKV2FG7ANcjs = require('./chunk-KV2FG7AN.cjs');
+var _chunkFRUOA2QUcjs = require('./chunk-FRUOA2QU.cjs');
 
 
-var _chunkLTOHGCU4cjs = require('./chunk-LTOHGCU4.cjs');
+var _chunkA7Z2QAFZcjs = require('./chunk-A7Z2QAFZ.cjs');
 
 // src/components/Table/Table.component.tsx
 var _react = require('react');
@@ -74,10 +74,10 @@ function SortableColumnHeader({
   stickyStyle,
   onSortClick
 }) {
-  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = _chunkL3UPSLJ5cjs.useSortable.call(void 0, {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = _chunkPA4IT2XQcjs.useSortable.call(void 0, {
     id
   });
-  const transformStr = _chunkL3UPSLJ5cjs.CSS.Transform.toString(transform);
+  const transformStr = _chunkPA4IT2XQcjs.CSS.Transform.toString(transform);
   const thClassName = [
     "eidos-table-header-cell",
     `eidos-table-header-cell-${columnType}`,
@@ -295,10 +295,10 @@ var Table = ({
     document.body.removeChild(link);
     URL.revokeObjectURL(url);
   };
-  const sensors = _chunkL3UPSLJ5cjs.useSensors.call(void 0, 
-    _chunkL3UPSLJ5cjs.useSensor.call(void 0, _chunkL3UPSLJ5cjs.PointerSensor),
-    _chunkL3UPSLJ5cjs.useSensor.call(void 0, _chunkL3UPSLJ5cjs.KeyboardSensor, {
-      coordinateGetter: _chunkL3UPSLJ5cjs.sortableKeyboardCoordinates
+  const sensors = _chunkPA4IT2XQcjs.useSensors.call(void 0, 
+    _chunkPA4IT2XQcjs.useSensor.call(void 0, _chunkPA4IT2XQcjs.PointerSensor),
+    _chunkPA4IT2XQcjs.useSensor.call(void 0, _chunkPA4IT2XQcjs.KeyboardSensor, {
+      coordinateGetter: _chunkPA4IT2XQcjs.sortableKeyboardCoordinates
     })
   );
   const handleDragEnd = (event) => {
@@ -309,7 +309,7 @@ var Table = ({
     const oldIndex = columnOrder.indexOf(activeId);
     const newIndex = columnOrder.indexOf(overId);
     if (oldIndex === -1 || newIndex === -1) return;
-    const newOrder = _chunkL3UPSLJ5cjs.arrayMove.call(void 0, columnOrder, oldIndex, newIndex);
+    const newOrder = _chunkPA4IT2XQcjs.arrayMove.call(void 0, columnOrder, oldIndex, newIndex);
     setColumnOrder(newOrder);
     if (onColumnReorder) {
       const orderMap = new Map(newOrder.map((key, idx) => [key, idx]));
@@ -348,7 +348,7 @@ var Table = ({
   const densityClass = effectiveDensity !== "comfortable" ? `eidos-table--${effectiveDensity}` : "";
   if (loading) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: `eidos-table-container ${className || ""}`, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-table-loading", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkR36SGSJXcjs.Spinner, { size: "md" }),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTROYIUDHcjs.Spinner, { size: "md" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: "Loading..." })
     ] }) });
   }
@@ -386,7 +386,7 @@ var Table = ({
         },
         children: [
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkG2FANEA2cjs.Checkbox,
+            _chunkIJ4DXG7Dcjs.Checkbox,
             {
               checked: isVisible,
               disabled: isLastVisible,
@@ -413,7 +413,7 @@ var Table = ({
           const isDisabled = typeof action.disabled === "function" ? action.disabled(selectedItems) : _nullishCoalesce(action.disabled, () => ( false));
           if (action.type === "split-button") {
             return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-              _chunkVZ43OLU6cjs.SplitButton,
+              _chunkEQEV7GPTcjs.SplitButton,
               {
                 size: "sm",
                 variant: _nullishCoalesce(action.variant, () => ( "outlined")),
@@ -434,7 +434,7 @@ var Table = ({
             );
           }
           return action.label ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkLTOHGCU4cjs.Button,
+            _chunkA7Z2QAFZcjs.Button,
             {
               size: "sm",
               variant: _nullishCoalesce(action.variant, () => ( "outlined")),
@@ -447,7 +447,7 @@ var Table = ({
             },
             action.id
           ) : action.icon ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-            _chunkLTOHGCU4cjs.Button,
+            _chunkA7Z2QAFZcjs.Button,
             {
               size: "sm",
               variant: _nullishCoalesce(action.variant, () => ( "outlined")),
@@ -471,27 +471,27 @@ var Table = ({
       ] }) }),
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-table-toolbar-right", children: [
         showDensity && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkKV2FG7ANcjs.Dropdown,
+          _chunkFRUOA2QUcjs.Dropdown,
           {
             placement: "bottom",
             align: "end",
             autoWidth: false,
-            trigger: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLTOHGCU4cjs.Button, { variant: "text", size: "sm", preIcon: _lucidereact.AlignJustify, children: "Density" }),
+            trigger: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkA7Z2QAFZcjs.Button, { variant: "text", size: "sm", preIcon: _lucidereact.AlignJustify, children: "Density" }),
             content: densityPanel
           }
         ),
         showColumnVisibility && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkKV2FG7ANcjs.Dropdown,
+          _chunkFRUOA2QUcjs.Dropdown,
           {
             placement: "bottom",
             align: "end",
             autoWidth: false,
-            trigger: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLTOHGCU4cjs.Button, { variant: "text", size: "sm", preIcon: _lucidereact.Columns3, children: "Columns" }),
+            trigger: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkA7Z2QAFZcjs.Button, { variant: "text", size: "sm", preIcon: _lucidereact.Columns3, children: "Columns" }),
             content: columnVisibilityPanel
           }
         ),
         showExport && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkLTOHGCU4cjs.Button,
+          _chunkA7Z2QAFZcjs.Button,
           {
             variant: "text",
             size: "sm",
@@ -501,7 +501,7 @@ var Table = ({
           }
         ),
         showFilters && onFiltersChange && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkL3UPSLJ5cjs.TableFiltersDropdown,
+          _chunkPA4IT2XQcjs.TableFiltersDropdown,
           {
             columns,
             filters,
@@ -532,7 +532,7 @@ var Table = ({
                 style: getHeaderPinnedProps("__checkbox__").style,
                 "data-col-key": "__checkbox__",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                  _chunkG2FANEA2cjs.Checkbox,
+                  _chunkIJ4DXG7Dcjs.Checkbox,
                   {
                     size: "sm",
                     checked: allSelected,
@@ -634,7 +634,7 @@ var Table = ({
                         toggleRow(key);
                       },
                       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                        _chunkG2FANEA2cjs.Checkbox,
+                        _chunkIJ4DXG7Dcjs.Checkbox,
                         {
                           size: "sm",
                           checked: isSelected,
@@ -681,13 +681,13 @@ var Table = ({
               colSpan: selectable ? visibleColumns.length + 1 : visibleColumns.length,
               className: "eidos-table-cell eidos-table-empty-cell",
               children: Object.keys(filters).length > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkV5JNYS77cjs.EmptyState,
+                _chunkKV3V2CPHcjs.EmptyState,
                 {
                   icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.SearchX, {}),
                   title: "No results found",
                   description: "Try adjusting your filters or search terms.",
                   action: onFiltersChange ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                    _chunkLTOHGCU4cjs.Button,
+                    _chunkA7Z2QAFZcjs.Button,
                     {
                       size: "sm",
                       variant: "outlined",
@@ -699,7 +699,7 @@ var Table = ({
                   size: "sm"
                 }
               ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-                _chunkV5JNYS77cjs.EmptyState,
+                _chunkKV3V2CPHcjs.EmptyState,
                 {
                   icon: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.FolderOpen, {}),
                   title: emptyMessage,
@@ -713,7 +713,7 @@ var Table = ({
       }
     ) }),
     showFooter && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-table-footer", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-table-footer-content", children: showPagination && data.length > 0 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkSAFSEXMUcjs.Pagination,
+      _chunkISABZ2VXcjs.Pagination,
       {
         page: currentPage,
         totalPages,
@@ -733,7 +733,7 @@ var Table = ({
     ] }) }) })
   ] });
   if (draggableColumns) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL3UPSLJ5cjs.DndContext, { sensors, onDragEnd: handleDragEnd, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkL3UPSLJ5cjs.SortableContext, { items: sortableItems, strategy: _chunkL3UPSLJ5cjs.horizontalListSortingStrategy, children: tableContent }) });
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPA4IT2XQcjs.DndContext, { sensors, onDragEnd: handleDragEnd, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPA4IT2XQcjs.SortableContext, { items: sortableItems, strategy: _chunkPA4IT2XQcjs.horizontalListSortingStrategy, children: tableContent }) });
   }
   return tableContent;
 };
@@ -741,4 +741,4 @@ var Table = ({
 
 
 exports.Table = Table;
-//# sourceMappingURL=chunk-LEZ4HSBD.cjs.map
+//# sourceMappingURL=chunk-IC2M4N7R.cjs.map

package/dist/chunk-IC2M4N7R.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-IC2M4N7R.cjs","../src/components/Table/Table.component.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-IC2M4N7R.cjs","sourcesContent":[null,"import { useState, useMemo, useLayoutEffect, useRef } from 'react';\nimport React from 'react';\nimport {\n  ChevronsUpDown,\n  ArrowUp,\n  ArrowDown,\n  X,\n  Check,\n  Download,\n  Columns3,\n  AlignJustify,\n  GripVertical,\n  FolderOpen,\n  SearchX,\n} from 'lucide-react';\nimport { DndContext, PointerSensor, KeyboardSensor, useSensor, useSensors } from '@dnd-kit/core';\nimport type { DragEndEvent } from '@dnd-kit/core';\nimport {\n  SortableContext,\n  horizontalListSortingStrategy,\n  useSortable,\n  sortableKeyboardCoordinates,\n  arrayMove,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport type { TableColumn, TableProps, TableFilters, FilterValue } from './Table.types';\n\nexport type { TableColumn, TableProps, TableFilters, FilterValue };\nimport { Button } from '../Button';\nimport { Checkbox } from '../Checkbox';\nimport { Dropdown } from '../Dropdown';\nimport { EmptyState } from '../EmptyState';\nimport { Pagination } from '../Pagination';\nimport { SplitButton } from '../SplitButton';\nimport { Spinner } from '../Spinner';\nimport { TableFiltersDropdown } from './TableFiltersDropdown.component';\n\n// ── Types ─────────────────────────────────────────────────────────────────────\n\ntype Density = 'compact' | 'comfortable' | 'spacious';\n\nconst DENSITY_OPTIONS: { value: Density; label: string }[] = [\n  { value: 'compact', label: 'Compact' },\n  { value: 'comfortable', label: 'Comfortable' },\n  { value: 'spacious', label: 'Spacious' },\n];\n\n// ── CSV helpers ───────────────────────────────────────────────────────────────\n\nfunction escapeCsvValue(value: string): string {\n  if (value.includes(',') || value.includes('\\n') || value.includes('\"')) {\n    return `\"${value.replace(/\"/g, '\"\"')}\"`;\n  }\n  return value;\n}\n\n// ── SortableColumnHeader ──────────────────────────────────────────────────────\n// Defined as a standalone component so it can legally call useSortable().\n// Only rendered when draggableColumns=true (inside a DndContext + SortableContext).\n\ninterface SortableThProps {\n  id: string;\n  column: { label: string };\n  isSortable: boolean;\n  isCurrentlySorted: boolean;\n  sortDirection: 'asc' | 'desc' | null;\n  alignment: string;\n  columnType: string;\n  columnWidth: string | undefined;\n  pinnedClass: string;\n  stickyStyle: React.CSSProperties;\n  onSortClick: () => void;\n}\n\nfunction SortableColumnHeader({\n  id,\n  column,\n  isSortable,\n  isCurrentlySorted,\n  sortDirection,\n  alignment,\n  columnType,\n  columnWidth,\n  pinnedClass,\n  stickyStyle,\n  onSortClick,\n}: SortableThProps) {\n  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n    id,\n  });\n\n  const transformStr = CSS.Transform.toString(transform);\n\n  const thClassName = [\n    'eidos-table-header-cell',\n    `eidos-table-header-cell-${columnType}`,\n    isSortable ? 'eidos-table-sortable' : '',\n    isCurrentlySorted ? 'eidos-table-sorted' : '',\n    `eidos-table-align-${alignment}`,\n    pinnedClass,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <th\n      ref={setNodeRef as React.LegacyRef<HTMLTableCellElement>}\n      className={thClassName}\n      style={{\n        width: columnWidth,\n        ...stickyStyle,\n        ...(transformStr ? { transform: transformStr } : {}),\n        transition: transition ?? undefined,\n        opacity: isDragging ? 0.5 : 1,\n      }}\n      data-col-key={id}\n      onClick={() => isSortable && onSortClick()}\n      {...attributes}\n    >\n      {/* Grip - absolutely positioned in the left padding zone so it never\n          displaces the column label or causes layout shift on hover. */}\n      <span\n        className=\"eidos-table-drag-handle\"\n        {...listeners}\n        onClick={(e) => e.stopPropagation()}\n        title=\"Drag to reorder\"\n      >\n        <GripVertical size={12} />\n      </span>\n      <div className={`eidos-table-header-content eidos-table-align-${alignment}`}>\n        <span className=\"eidos-table-header-label\">{column.label}</span>\n        {isSortable && (\n          <div className=\"eidos-table-sort-indicator\">\n            {sortDirection === 'asc' && <ArrowUp size={14} />}\n            {sortDirection === 'desc' && <ArrowDown size={14} />}\n            {!sortDirection && <ChevronsUpDown size={14} />}\n          </div>\n        )}\n      </div>\n    </th>\n  );\n}\n\n// ── Table ─────────────────────────────────────────────────────────────────────\n\nexport const Table = <T extends Record<string, unknown>>({\n  data,\n  columns,\n  loading = false,\n  emptyMessage = 'No data available',\n  onRowClick,\n  className,\n  showFooter = false,\n  totalItems,\n  showPagination = false,\n  pageSize = 25,\n  pageSizeOptions = [10, 25, 50, 100],\n  onSortChange,\n  currentSort,\n  filters = {},\n  onFiltersChange,\n  defaultFilters,\n  showFilters = false,\n  // Selection\n  selectable = false,\n  rowKey,\n  selectedRows: controlledSelected,\n  defaultSelectedRows = [],\n  onSelectionChange,\n  bulkActions = [],\n  // New features\n  density = 'comfortable',\n  showDensity = false,\n  showColumnVisibility = false,\n  showExport = false,\n  draggableColumns = false,\n  onColumnReorder,\n}: TableProps<T>) => {\n  // ── Column ordering (drag-reorder) ────────────────────────────────────────\n  const [columnOrder, setColumnOrder] = useState<string[]>(() => columns.map((c) => String(c.key)));\n\n  // Derived-state reset: when the set of column keys changes, reset the order.\n  // Calling setState during render is the React-idiomatic way to do this.\n  const columnKeysSignature = columns.map((c) => String(c.key)).join('\\0');\n  const prevKeysRef = useRef(columnKeysSignature);\n  if (prevKeysRef.current !== columnKeysSignature) {\n    prevKeysRef.current = columnKeysSignature;\n    setColumnOrder(columns.map((c) => String(c.key)));\n  }\n\n  const orderedColumns = useMemo(() => {\n    const orderMap = new Map(columnOrder.map((key, idx) => [key, idx]));\n    return [...columns].sort((a, b) => {\n      const ai = orderMap.get(String(a.key)) ?? Infinity;\n      const bi = orderMap.get(String(b.key)) ?? Infinity;\n      return ai - bi;\n    });\n  }, [columns, columnOrder]);\n\n  // ── Density (internal state when showDensity=true) ────────────────────────\n  const [internalDensity, setInternalDensity] = useState<Density>(density as Density);\n  // When showDensity is true the table owns density; otherwise respect the prop.\n  const effectiveDensity: Density = showDensity ? internalDensity : (density as Density);\n\n  // ── Column visibility ─────────────────────────────────────────────────────\n  const [hiddenColumnKeys, setHiddenColumnKeys] = useState<Set<string>>(() => new Set<string>());\n\n  const visibleColumns = useMemo(\n    () => orderedColumns.filter((c) => !hiddenColumnKeys.has(String(c.key))),\n    [orderedColumns, hiddenColumnKeys],\n  );\n\n  // ── Pinned / sticky columns ────────────────────────────────────────────────\n  const theadRef = useRef<HTMLTableSectionElement>(null);\n  const [pinnedOffsets, setPinnedOffsets] = useState<\n    Map<string, { side: 'left' | 'right'; offset: number }>\n  >(new Map());\n\n  useLayoutEffect(() => {\n    const hasPinned = visibleColumns.some((c) => c.pin);\n    if (!hasPinned || !theadRef.current) {\n      setPinnedOffsets(new Map());\n      return;\n    }\n\n    const headerRow = theadRef.current.querySelector('tr');\n    if (!headerRow) return;\n\n    const cells = Array.from(headerRow.querySelectorAll<HTMLTableCellElement>('th[data-col-key]'));\n\n    const newOffsets = new Map<string, { side: 'left' | 'right'; offset: number }>();\n\n    // Left-pinned: scan left-to-right.\n    // Checkbox (when selectable) counts as a left-pinned element.\n    let leftAccum = 0;\n    for (const cell of cells) {\n      const key = cell.dataset.colKey!;\n      if (key === '__checkbox__') {\n        newOffsets.set(key, { side: 'left', offset: leftAccum });\n        leftAccum += cell.offsetWidth;\n      } else {\n        const col = visibleColumns.find((c) => String(c.key) === key);\n        if (col?.pin === 'left') {\n          newOffsets.set(key, { side: 'left', offset: leftAccum });\n          leftAccum += cell.offsetWidth;\n        }\n      }\n    }\n\n    // Right-pinned: scan right-to-left.\n    let rightAccum = 0;\n    for (let i = cells.length - 1; i >= 0; i--) {\n      const cell = cells[i];\n      const key = cell.dataset.colKey!;\n      const col = visibleColumns.find((c) => String(c.key) === key);\n      if (col?.pin === 'right') {\n        newOffsets.set(key, { side: 'right', offset: rightAccum });\n        rightAccum += cell.offsetWidth;\n      }\n    }\n\n    setPinnedOffsets(newOffsets);\n  }, [visibleColumns, selectable]);\n\n  // ── Selection state (controlled / uncontrolled) ──────────────────────────\n  const isControlledSelection = controlledSelected !== undefined;\n  const [internalSelected, setInternalSelected] = useState<string[]>(defaultSelectedRows);\n  const selectedSet = useMemo(\n    () => new Set(isControlledSelection ? controlledSelected : internalSelected),\n    [isControlledSelection, controlledSelected, internalSelected],\n  );\n\n  /** Stable string key for a row - uses `rowKey` prop, then \"id\", then index. */\n  const getRowKey = (item: T, index: number): string => {\n    if (rowKey) return String(item[rowKey]);\n    if ('id' in item) return String(item.id);\n    return String(index);\n  };\n\n  const commitSelection = (keys: string[]) => {\n    if (!isControlledSelection) setInternalSelected(keys);\n    const rows = data.filter((item, idx) => keys.includes(getRowKey(item, idx)));\n    onSelectionChange?.(keys, rows);\n  };\n\n  const toggleRow = (key: string) => {\n    const next = selectedSet.has(key)\n      ? [...selectedSet].filter((k) => k !== key)\n      : [...selectedSet, key];\n    commitSelection(next);\n  };\n\n  const allKeys = useMemo(\n    () => data.map((item, idx) => getRowKey(item, idx)),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [data, rowKey],\n  );\n\n  const allSelected = allKeys.length > 0 && allKeys.every((k) => selectedSet.has(k));\n  const someSelected = !allSelected && allKeys.some((k) => selectedSet.has(k));\n\n  const toggleAll = () => {\n    commitSelection(allSelected ? [] : allKeys);\n  };\n\n  const clearSelection = () => commitSelection([]);\n\n  // ── Pagination ────────────────────────────────────────────────────────────\n  const [currentPage, setCurrentPage] = useState(1);\n  const [currentPageSize, setCurrentPageSize] = useState(pageSize);\n\n  const displayData = useMemo(() => {\n    if (!showPagination) return data;\n    const startIndex = (currentPage - 1) * currentPageSize;\n    return data.slice(startIndex, startIndex + currentPageSize);\n  }, [data, showPagination, currentPage, currentPageSize]);\n\n  const totalPages = Math.ceil(data.length / currentPageSize);\n\n  const handleSort = (key: string) => {\n    const newDirection =\n      currentSort?.key === key && currentSort?.direction === 'asc' ? 'desc' : 'asc';\n    onSortChange?.(key, newDirection);\n  };\n\n  const handlePageChange = (page: number) => setCurrentPage(page);\n  const handlePageSizeChange = (newPageSize: number) => {\n    setCurrentPageSize(newPageSize);\n    setCurrentPage(1);\n  };\n\n  // ── Derived UI state ──────────────────────────────────────────────────────\n  const hasSelection = selectedSet.size > 0;\n  const showToolbar =\n    (showFilters && !!onFiltersChange) ||\n    showColumnVisibility ||\n    showExport ||\n    showDensity ||\n    (selectable && hasSelection);\n\n  const selectedItems = useMemo(\n    () => data.filter((item, idx) => selectedSet.has(getRowKey(item, idx))),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [data, selectedSet, rowKey],\n  );\n\n  // ── CSV Export ────────────────────────────────────────────────────────────\n  const getRawValue = (item: T, column: TableColumn<T>): string => {\n    const value =\n      typeof column.key === 'string' && column.key.includes('.')\n        ? (column.key as string)\n            .split('.')\n            .reduce(\n              (obj: unknown, k: string) => (obj as Record<string, unknown>)?.[k],\n              item as unknown,\n            )\n        : item[column.key as keyof T];\n    return String(value ?? '');\n  };\n\n  const handleExportCsv = () => {\n    const headers = visibleColumns.map((c) => escapeCsvValue(c.label)).join(',');\n    const rows = data.map((item) =>\n      visibleColumns.map((col) => escapeCsvValue(getRawValue(item, col))).join(','),\n    );\n    const csv = [headers, ...rows].join('\\n');\n    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });\n    const url = URL.createObjectURL(blob);\n    const link = document.createElement('a');\n    link.href = url;\n    link.download = 'export.csv';\n    document.body.appendChild(link);\n    link.click();\n    document.body.removeChild(link);\n    URL.revokeObjectURL(url);\n  };\n\n  // ── DnD setup ─────────────────────────────────────────────────────────────\n  const sensors = useSensors(\n    useSensor(PointerSensor),\n    useSensor(KeyboardSensor, {\n      coordinateGetter: sortableKeyboardCoordinates,\n    }),\n  );\n\n  const handleDragEnd = (event: DragEndEvent) => {\n    const { active, over } = event;\n    if (!over || active.id === over.id) return;\n\n    const activeId = String(active.id);\n    const overId = String(over.id);\n    const oldIndex = columnOrder.indexOf(activeId);\n    const newIndex = columnOrder.indexOf(overId);\n    if (oldIndex === -1 || newIndex === -1) return;\n\n    const newOrder = arrayMove(columnOrder, oldIndex, newIndex);\n    setColumnOrder(newOrder);\n\n    if (onColumnReorder) {\n      const orderMap = new Map(newOrder.map((key, idx) => [key, idx]));\n      const reordered = [...columns].sort((a, b) => {\n        const ai = orderMap.get(String(a.key)) ?? Infinity;\n        const bi = orderMap.get(String(b.key)) ?? Infinity;\n        return ai - bi;\n      });\n      onColumnReorder(reordered);\n    }\n  };\n\n  // ── Helpers ───────────────────────────────────────────────────────────────\n\n  /** Returns sticky style + className for body <td> cells (zIndex: 1). */\n  const getCellPinnedProps = (\n    colKey: string,\n  ): { style: React.CSSProperties; className: string } => {\n    const pinInfo = pinnedOffsets.get(colKey);\n    if (!pinInfo) return { style: {}, className: '' };\n    return {\n      style: {\n        position: 'sticky',\n        [pinInfo.side]: pinInfo.offset,\n        zIndex: 1,\n      },\n      className:\n        pinInfo.side === 'left'\n          ? 'eidos-table-cell--pinned-left'\n          : 'eidos-table-cell--pinned-right',\n    };\n  };\n\n  /** Returns sticky style + className for header <th> cells (zIndex: 3). */\n  const getHeaderPinnedProps = (\n    colKey: string,\n  ): { style: React.CSSProperties; className: string } => {\n    const pinInfo = pinnedOffsets.get(colKey);\n    if (!pinInfo) return { style: {}, className: '' };\n    return {\n      style: {\n        position: 'sticky',\n        [pinInfo.side]: pinInfo.offset,\n        zIndex: 3,\n      },\n      className:\n        pinInfo.side === 'left'\n          ? 'eidos-table-header-cell--pinned-left'\n          : 'eidos-table-header-cell--pinned-right',\n    };\n  };\n\n  // ── Density class ─────────────────────────────────────────────────────────\n  const densityClass = effectiveDensity !== 'comfortable' ? `eidos-table--${effectiveDensity}` : '';\n\n  // ── Loading ───────────────────────────────────────────────────────────────\n  if (loading) {\n    return (\n      <div className={`eidos-table-container ${className || ''}`}>\n        <div className=\"eidos-table-loading\">\n          <Spinner size=\"md\" />\n          <p>Loading...</p>\n        </div>\n      </div>\n    );\n  }\n\n  // ── Density panel (Dropdown content) ──────────────────────────────────────\n  const densityPanel = (\n    <div className=\"eidos-table-menu-panel\">\n      {DENSITY_OPTIONS.map((option) => (\n        <button\n          key={option.value}\n          className={[\n            'eidos-table-menu-item',\n            effectiveDensity === option.value ? 'eidos-table-menu-item--active' : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          onClick={() => setInternalDensity(option.value)}\n        >\n          <span className=\"eidos-table-menu-item-check\">\n            {effectiveDensity === option.value && <Check size={14} />}\n          </span>\n          <span>{option.label}</span>\n        </button>\n      ))}\n    </div>\n  );\n\n  // ── Column visibility panel (Dropdown content) ────────────────────────────\n  const columnVisibilityPanel = (\n    <div className=\"eidos-table-menu-panel\">\n      {/* Use orderedColumns so list order mirrors current column order */}\n      {orderedColumns.map((col) => {\n        const key = String(col.key);\n        const isVisible = !hiddenColumnKeys.has(key);\n        const isLastVisible = visibleColumns.length === 1 && isVisible;\n        return (\n          <button\n            key={key}\n            className={['eidos-table-menu-item', isVisible ? 'eidos-table-menu-item--active' : '']\n              .filter(Boolean)\n              .join(' ')}\n            disabled={isLastVisible}\n            onClick={() => {\n              setHiddenColumnKeys((prev) => {\n                const next = new Set(prev);\n                if (next.has(key)) next.delete(key);\n                else next.add(key);\n                return next;\n              });\n            }}\n          >\n            <Checkbox\n              checked={isVisible}\n              disabled={isLastVisible}\n              size=\"sm\"\n              onChange={() => {\n                /* click handled by parent button */\n              }}\n            />\n            <span>{col.label}</span>\n          </button>\n        );\n      })}\n    </div>\n  );\n\n  // ── SortableContext items: visible column keys only ───────────────────────\n  const sortableItems = visibleColumns.map((c) => String(c.key));\n\n  // ── Main JSX ──────────────────────────────────────────────────────────────\n  const tableContent = (\n    <div className={`eidos-table-container ${className || ''}`}>\n      {/* ── Toolbar ───────────────────────────────────────────────────────── */}\n      {showToolbar && (\n        <div className=\"eidos-table-toolbar\">\n          {/* Left - bulk actions / selection info */}\n          <div className=\"eidos-table-toolbar-left\">\n            {selectable && hasSelection && (\n              <>\n                <span className=\"eidos-table-selection-count\">{selectedSet.size} selected</span>\n\n                {bulkActions.length > 0 && (\n                  <div className=\"eidos-table-bulk-actions\">\n                    {bulkActions.map((action) => {\n                      const isDisabled =\n                        typeof action.disabled === 'function'\n                          ? action.disabled(selectedItems)\n                          : (action.disabled ?? false);\n\n                      if (action.type === 'split-button') {\n                        return (\n                          <SplitButton\n                            key={action.id}\n                            size=\"sm\"\n                            variant={action.variant ?? 'outlined'}\n                            color={action.color ?? 'secondary'}\n                            preIcon={action.icon}\n                            disabled={isDisabled}\n                            label={action.label}\n                            onClick={() => action.onClick(selectedItems)}\n                            options={action.options.map((option) => ({\n                              id: option.id,\n                              label: option.label,\n                              icon: option.icon,\n                              disabled: option.disabled,\n                              onClick: () => option.onClick(selectedItems),\n                            }))}\n                          />\n                        );\n                      }\n\n                      return action.label ? (\n                        <Button\n                          key={action.id}\n                          size=\"sm\"\n                          variant={action.variant ?? 'outlined'}\n                          color={action.color ?? 'secondary'}\n                          preIcon={action.icon}\n                          posIcon={action.posIcon}\n                          disabled={isDisabled}\n                          onClick={() => action.onClick(selectedItems)}\n                        >\n                          {action.label}\n                        </Button>\n                      ) : action.icon ? (\n                        <Button\n                          key={action.id}\n                          size=\"sm\"\n                          variant={action.variant ?? 'outlined'}\n                          color={action.color ?? 'secondary'}\n                          icon={action.icon}\n                          disabled={isDisabled}\n                          onClick={() => action.onClick(selectedItems)}\n                        />\n                      ) : null;\n                    })}\n                  </div>\n                )}\n\n                <button\n                  className=\"eidos-table-clear-selection\"\n                  onClick={clearSelection}\n                  aria-label=\"Clear selection\"\n                >\n                  <X size={14} />\n                </button>\n              </>\n            )}\n          </div>\n\n          {/* Right - density, column visibility, export, filter */}\n          <div className=\"eidos-table-toolbar-right\">\n            {showDensity && (\n              <Dropdown\n                placement=\"bottom\"\n                align=\"end\"\n                autoWidth={false}\n                trigger={\n                  <Button variant=\"text\" size=\"sm\" preIcon={AlignJustify}>\n                    Density\n                  </Button>\n                }\n                content={densityPanel}\n              />\n            )}\n\n            {showColumnVisibility && (\n              <Dropdown\n                placement=\"bottom\"\n                align=\"end\"\n                autoWidth={false}\n                trigger={\n                  <Button variant=\"text\" size=\"sm\" preIcon={Columns3}>\n                    Columns\n                  </Button>\n                }\n                content={columnVisibilityPanel}\n              />\n            )}\n\n            {showExport && (\n              <Button\n                variant=\"text\"\n                size=\"sm\"\n                icon={Download}\n                onClick={handleExportCsv}\n                tooltip=\"Export CSV\"\n              />\n            )}\n\n            {showFilters && onFiltersChange && (\n              <TableFiltersDropdown\n                columns={columns}\n                filters={filters}\n                onFiltersChange={onFiltersChange}\n                defaultFilters={defaultFilters}\n              />\n            )}\n          </div>\n        </div>\n      )}\n\n      {/* ── Table (wrapped for horizontal scroll) ─────────────────────────── */}\n      <div className=\"eidos-table-scroll\">\n        <table\n          className={[\n            'eidos-table',\n            densityClass,\n            draggableColumns ? 'eidos-table--draggable-columns' : '',\n          ]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          <thead ref={theadRef}>\n            <tr>\n              {selectable && (\n                <th\n                  className={[\n                    'eidos-table-header-cell',\n                    'eidos-table-checkbox-cell',\n                    getHeaderPinnedProps('__checkbox__').className,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  style={getHeaderPinnedProps('__checkbox__').style}\n                  data-col-key=\"__checkbox__\"\n                >\n                  <Checkbox\n                    size=\"sm\"\n                    checked={allSelected}\n                    indeterminate={someSelected}\n                    onChange={toggleAll}\n                    aria-label=\"Select all rows\"\n                  />\n                </th>\n              )}\n\n              {/* ── Headers: draggable or plain ──────────────────────────── */}\n              {draggableColumns\n                ? visibleColumns.map((column) => {\n                    const colKey = String(column.key);\n                    const columnType = column.type || 'data';\n                    const columnWidth =\n                      column.type === 'icon' ? 'var(--component-size-lg)' : column.width;\n                    const isSortable = !!column.sortable;\n                    const isCurrentlySorted = currentSort?.key === colKey;\n                    const sortDirection = isCurrentlySorted\n                      ? (currentSort!.direction as 'asc' | 'desc')\n                      : null;\n                    const alignment = column.align || 'left';\n                    const { style: pinnedStyle, className: pinnedClass } =\n                      getHeaderPinnedProps(colKey);\n\n                    return (\n                      <SortableColumnHeader\n                        key={colKey}\n                        id={colKey}\n                        column={column}\n                        isSortable={isSortable}\n                        isCurrentlySorted={!!isCurrentlySorted}\n                        sortDirection={sortDirection}\n                        alignment={alignment}\n                        columnType={columnType}\n                        columnWidth={columnWidth}\n                        pinnedClass={pinnedClass}\n                        stickyStyle={pinnedStyle}\n                        onSortClick={() => handleSort(colKey)}\n                      />\n                    );\n                  })\n                : visibleColumns.map((column, index) => {\n                    const colKey = String(column.key);\n                    const columnType = column.type || 'data';\n                    const columnWidth =\n                      column.type === 'icon' ? 'var(--component-size-lg)' : column.width;\n                    const isSortable = column.sortable;\n                    const isCurrentlySorted = currentSort?.key === colKey;\n                    const sortDirection = isCurrentlySorted ? currentSort!.direction : null;\n                    const alignment = column.align || 'left';\n                    const alignmentClass = `eidos-table-align-${alignment}`;\n                    const { style: pinnedStyle, className: pinnedClass } =\n                      getHeaderPinnedProps(colKey);\n\n                    return (\n                      <th\n                        key={index}\n                        className={[\n                          'eidos-table-header-cell',\n                          `eidos-table-header-cell-${columnType}`,\n                          isSortable ? 'eidos-table-sortable' : '',\n                          isCurrentlySorted ? 'eidos-table-sorted' : '',\n                          alignmentClass,\n                          pinnedClass,\n                        ]\n                          .filter(Boolean)\n                          .join(' ')}\n                        style={{ width: columnWidth, ...pinnedStyle }}\n                        data-col-key={colKey}\n                        onClick={() => isSortable && handleSort(colKey)}\n                      >\n                        <div className={`eidos-table-header-content ${alignmentClass}`}>\n                          <span>{column.label}</span>\n                          {isSortable && (\n                            <div className=\"eidos-table-sort-indicator\">\n                              {sortDirection === 'asc' && <ArrowUp size={14} />}\n                              {sortDirection === 'desc' && <ArrowDown size={14} />}\n                              {!sortDirection && <ChevronsUpDown size={14} />}\n                            </div>\n                          )}\n                        </div>\n                      </th>\n                    );\n                  })}\n            </tr>\n          </thead>\n          <tbody>\n            {displayData.length > 0 ? (\n              displayData.map((item, rowIndex) => {\n                const globalIndex = showPagination\n                  ? (currentPage - 1) * currentPageSize + rowIndex\n                  : rowIndex;\n                const key = getRowKey(item, globalIndex);\n                const isSelected = selectedSet.has(key);\n\n                return (\n                  <tr\n                    key={key}\n                    className={[\n                      'eidos-table-row',\n                      onRowClick ? 'eidos-table-clickable' : '',\n                      isSelected ? 'eidos-table-row--selected' : '',\n                    ]\n                      .filter(Boolean)\n                      .join(' ')}\n                    onClick={() => onRowClick?.(item)}\n                  >\n                    {selectable && (\n                      <td\n                        className={[\n                          'eidos-table-cell',\n                          'eidos-table-checkbox-cell',\n                          getCellPinnedProps('__checkbox__').className,\n                        ]\n                          .filter(Boolean)\n                          .join(' ')}\n                        style={getCellPinnedProps('__checkbox__').style}\n                        onClick={(e) => {\n                          e.stopPropagation();\n                          toggleRow(key);\n                        }}\n                      >\n                        {/* Wrap in a span so Checkbox click-events don't\n                            bubble to the <td> and cause a double-toggle.\n                            The <td> onClick handles toggling when the user\n                            clicks the cell margin outside the checkbox. */}\n                        <span onClick={(e) => e.stopPropagation()}>\n                          <Checkbox\n                            size=\"sm\"\n                            checked={isSelected}\n                            onChange={() => toggleRow(key)}\n                            aria-label={`Select row ${globalIndex + 1}`}\n                          />\n                        </span>\n                      </td>\n                    )}\n                    {visibleColumns.map((column, colIndex) => {\n                      const colKey = String(column.key);\n                      const value =\n                        typeof column.key === 'string' && column.key.includes('.')\n                          ? (column.key as string)\n                              .split('.')\n                              .reduce(\n                                (obj: unknown, k: string) => (obj as Record<string, unknown>)?.[k],\n                                item as unknown,\n                              )\n                          : item[column.key as keyof T];\n\n                      const columnType = column.type || 'data';\n                      const columnWidth =\n                        column.type === 'icon' ? 'var(--component-size-lg)' : column.width;\n                      const alignment = column.align || 'left';\n                      const alignmentClass = `eidos-table-align-${alignment}`;\n                      const { style: pinnedStyle, className: pinnedClass } =\n                        getCellPinnedProps(colKey);\n\n                      return (\n                        <td\n                          key={colIndex}\n                          className={[\n                            'eidos-table-cell',\n                            `eidos-table-cell-${columnType}`,\n                            alignmentClass,\n                            pinnedClass,\n                          ]\n                            .filter(Boolean)\n                            .join(' ')}\n                          style={{ width: columnWidth, ...pinnedStyle }}\n                          // `type: 'action'` cells exist specifically to hold\n                          // interactive controls (a row-actions Menu/button,\n                          // typically) - without this, clicking them bubbles\n                          // straight into `onRowClick` on the <tr> below,\n                          // e.g. opening a details drawer at the same time as\n                          // (or instead of) the action itself. Mirrors the\n                          // selectable checkbox cell's own stopPropagation\n                          // above, for the same reason.\n                          onClick={columnType === 'action' ? (e) => e.stopPropagation() : undefined}\n                        >\n                          {column.render ? column.render(value, item) : String(value ?? '')}\n                        </td>\n                      );\n                    })}\n                  </tr>\n                );\n              })\n            ) : (\n              <tr className=\"eidos-table-empty-row\">\n                <td\n                  colSpan={selectable ? visibleColumns.length + 1 : visibleColumns.length}\n                  className=\"eidos-table-cell eidos-table-empty-cell\"\n                >\n                  {Object.keys(filters).length > 0 ? (\n                    <EmptyState\n                      icon={<SearchX />}\n                      title=\"No results found\"\n                      description=\"Try adjusting your filters or search terms.\"\n                      action={\n                        onFiltersChange ? (\n                          <Button\n                            size=\"sm\"\n                            variant=\"outlined\"\n                            color=\"primary\"\n                            onClick={() => onFiltersChange({})}\n                          >\n                            Clear filters\n                          </Button>\n                        ) : undefined\n                      }\n                      size=\"sm\"\n                    />\n                  ) : (\n                    <EmptyState\n                      icon={<FolderOpen />}\n                      title={emptyMessage}\n                      description=\"There are no records to display.\"\n                      size=\"sm\"\n                    />\n                  )}\n                </td>\n              </tr>\n            )}\n          </tbody>\n        </table>\n      </div>\n\n      {/* ── Footer / Pagination ───────────────────────────────────────────── */}\n      {showFooter && (\n        <div className=\"eidos-table-footer\">\n          <div className=\"eidos-table-footer-content\">\n            {showPagination && data.length > 0 ? (\n              <Pagination\n                page={currentPage}\n                totalPages={totalPages}\n                onChange={handlePageChange}\n                totalItems={totalItems ?? data.length}\n                pageSize={currentPageSize}\n                onPageSizeChange={handlePageSizeChange}\n                pageSizeOptions={pageSizeOptions}\n                size=\"sm\"\n              />\n            ) : (\n              <span className=\"eidos-table-results-info\">\n                Showing {data.length} of {totalItems ?? data.length} results\n              </span>\n            )}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n\n  // ── Wrap with DnD context when draggableColumns=true ─────────────────────\n  if (draggableColumns) {\n    return (\n      <DndContext sensors={sensors} onDragEnd={handleDragEnd}>\n        <SortableContext items={sortableItems} strategy={horizontalListSortingStrategy}>\n          {tableContent}\n        </SortableContext>\n      </DndContext>\n    );\n  }\n\n  return tableContent;\n};\n"]}

package/dist/{chunk-G2FANEA2.cjs → chunk-IJ4DXG7D.cjs}

@@ -98,4 +98,4 @@ Checkbox.displayName = "Checkbox";
 
 
 exports.Checkbox = Checkbox;
-//# sourceMappingURL=chunk-G2FANEA2.cjs.map
+//# sourceMappingURL=chunk-IJ4DXG7D.cjs.map

package/dist/chunk-IJ4DXG7D.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-IJ4DXG7D.cjs","../src/components/Checkbox/Checkbox.component.tsx"],"names":[],"mappings":"AAAA;ACAA,8BAAmF;AACnF,2CAA0C;AAwGhC,+CAAA;AArGH,IAAM,SAAA,EAAW,+BAAA;AAAA,EACtB,CACE;AAAA,IACE,KAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAA,EAAgB,KAAA;AAAA,IAChB,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,IAAA;AAAA,IACP,UAAA,EAAY,EAAA;AAAA,IACZ,SAAA,EAAW,KAAA;AAAA,IACX,EAAA;AAAA,IACA,OAAA;AAAA,IACA,cAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,EACL,CAAA,EACA,GAAA,EAAA,GACG;AACH,IAAA,MAAM,YAAA,EAAc,0BAAA,CAAM;AAC1B,IAAA,MAAM,WAAA,EAAa,GAAA,GAAM,CAAA,SAAA,EAAY,WAAW,CAAA,CAAA;AAGC,IAAA;AAKhB,IAAA;AACyB,IAAA;AAG7B,IAAA;AAGb,IAAA;AACW,MAAA;AACa,QAAA;AACtC,MAAA;AACgB,IAAA;AAKA,IAAA;AACmB,MAAA;AACX,QAAA;AACS,QAAA;AACrB,UAAA;AACM,QAAA;AACqD,UAAA;AACrE,QAAA;AACF,MAAA;AACI,MAAA;AACN,IAAA;AAEiE,IAAA;AAC5C,MAAA;AACe,QAAA;AAClC,MAAA;AACY,sBAAA;AACd,IAAA;AAY+D,IAAA;AAClD,sBAAA;AACO,MAAA;AACpB,IAAA;AAEuB,IAAA;AACrB,MAAA;AACgC,MAAA;AACD,MAAA;AACnB,MAAA;AACH,MAAA;AAGA,IAAA;AAEY,IAAA;AACrB,MAAA;AACa,MAAA;AACI,MAAA;AACL,MAAA;AACU,MAAA;AAGb,IAAA;AAGQ,IAAA;AACG,sBAAA;AAChB,wBAAA;AAAC,UAAA;AAAA,UAAA;AACM,YAAA;AACA,YAAA;AACD,YAAA;AACM,YAAA;AACV,YAAA;AACU,YAAA;AACD,YAAA;AAC2B,YAAA;AAChC,YAAA;AAAA,UAAA;AACN,QAAA;AACiB,wBAAA;AACiB,UAAA;AACb,UAAA;AACrB,QAAA;AACgB,QAAA;AAClB,MAAA;AAGO,MAAA;AACU,wBAAA;AACN,wBAAA;AACT,MAAA;AAEJ,IAAA;AAEJ,EAAA;AACF;AAEuB;ADtC8B;AACA;AACA;AACA","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-IJ4DXG7D.cjs","sourcesContent":[null,"import React, { forwardRef, useId, useRef, useState, useEffect, useCallback } from 'react';\nimport { Check, Minus, CircleAlert } from 'lucide-react';\nimport type { CheckboxProps } from './Checkbox.types';\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      label,\n      error,\n      indeterminate = false,\n      color = 'primary',\n      size = 'md',\n      className = '',\n      disabled = false,\n      id,\n      checked,\n      defaultChecked,\n      onChange,\n      onClick,\n      ...inputProps\n    },\n    ref,\n  ) => {\n    const generatedId = useId();\n    const checkboxId = id || `checkbox-${generatedId}`;\n\n    // Internal ref needed to imperatively set `indeterminate` (not a standard HTML attribute)\n    const internalRef = useRef<HTMLInputElement>(null);\n\n    // Track checked state for the visual control:\n    //   - controlled mode: `checked` prop drives everything\n    //   - uncontrolled mode: local state mirrors the native input\n    const isControlled = checked !== undefined;\n    const [localChecked, setLocalChecked] = useState<boolean>(defaultChecked ?? false);\n\n    // `??` correctly handles `false` (falsy but defined): only falls back when `checked` is undefined\n    const isChecked = checked ?? localChecked;\n\n    // Imperatively set the indeterminate property – it has no HTML attribute equivalent\n    useEffect(() => {\n      if (internalRef.current) {\n        internalRef.current.indeterminate = indeterminate;\n      }\n    }, [indeterminate]);\n\n    // Merge the forwarded ref with our internal ref so callers can still access the input.\n    // useCallback(_, [ref]) prevents the ref callback from being a new function identity\n    // every render, which would cause React to detach/re-attach the ref unnecessarily.\n    const mergedRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        internalRef.current = node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current = node;\n        }\n      },\n      [ref],\n    );\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n      if (!isControlled) {\n        setLocalChecked(e.target.checked);\n      }\n      onChange?.(e);\n    };\n\n    // Clicking anywhere in the surrounding <label> (e.g. the custom\n    // `.eidos-checkbox-control` box) fires a click on the clicked element\n    // *and* a second, browser-synthesized click targeted at this input -\n    // both bubble up. A consumer that wraps Checkbox in its own click\n    // handler (e.g. DataGrid toggling a cell on click) would otherwise see\n    // that handler fire twice per click and cancel itself out. Stopping\n    // propagation here only cancels the synthesized click's bubbling; the\n    // original click (whichever element the user actually clicked) still\n    // bubbles normally. Still forwards to a caller-supplied `onClick`\n    // first, so passing one through doesn't silently disable this fix.\n    const handleClick = (e: React.MouseEvent<HTMLInputElement>) => {\n      onClick?.(e);\n      e.stopPropagation();\n    };\n\n    const wrapperClasses = [\n      'eidos-checkbox-wrapper',\n      `eidos-checkbox-wrapper--${color}`,\n      `eidos-checkbox-wrapper--${size}`,\n      disabled && 'eidos-checkbox-wrapper--disabled',\n      error && 'eidos-checkbox-wrapper--error',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const controlClasses = [\n      'eidos-checkbox-control',\n      isChecked && 'eidos-checkbox-control--checked',\n      indeterminate && 'eidos-checkbox-control--indeterminate',\n      disabled && 'eidos-checkbox-control--disabled',\n      error && !disabled && 'eidos-checkbox-control--error',\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <div className={['eidos-checkbox-container', className].filter(Boolean).join(' ')}>\n        <label className={wrapperClasses}>\n          <input\n            ref={mergedRef}\n            type=\"checkbox\"\n            id={checkboxId}\n            className=\"eidos-checkbox-input\"\n            disabled={disabled}\n            onChange={handleChange}\n            onClick={handleClick}\n            {...(isControlled ? { checked } : { defaultChecked })}\n            {...inputProps}\n          />\n          <span className={controlClasses}>\n            {isChecked && !indeterminate && <Check className=\"eidos-checkbox-icon\" />}\n            {indeterminate && <Minus className=\"eidos-checkbox-icon\" />}\n          </span>\n          {label && <span className=\"eidos-checkbox-label\">{label}</span>}\n        </label>\n\n        {error && (\n          <div className=\"eidos-checkbox-error-message\">\n            <CircleAlert />\n            <span>{error}</span>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = 'Checkbox';\n"]}

package/dist/{chunk-SOGUWOSQ.cjs → chunk-IJYYHBZC.cjs}

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkLTOHGCU4cjs = require('./chunk-LTOHGCU4.cjs');
+var _chunkA7Z2QAFZcjs = require('./chunk-A7Z2QAFZ.cjs');
 
 // src/components/Header/Header.component.tsx
 var _jsxruntime = require('react/jsx-runtime');
@@ -11,11 +11,11 @@ var Header = ({ title, subtitle, actions, className = "" }) => {
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { className: "eidos-header__title", children: title }),
       subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-header__subtitle", children: subtitle })
     ] }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-header__actions", children: _optionalChain([actions, 'optionalAccess', _ => _.map, 'call', _2 => _2((action, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkLTOHGCU4cjs.Button, { size: "md", ...action }, index))]) })
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "eidos-header__actions", children: _optionalChain([actions, 'optionalAccess', _ => _.map, 'call', _2 => _2((action, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkA7Z2QAFZcjs.Button, { size: "md", ...action }, index))]) })
   ] }) });
 };
 
 
 
 exports.Header = Header;
-//# sourceMappingURL=chunk-SOGUWOSQ.cjs.map
+//# sourceMappingURL=chunk-IJYYHBZC.cjs.map

package/dist/chunk-IJYYHBZC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-IJYYHBZC.cjs","../src/components/Header/Header.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACA;ACOQ,+CAAA;AAND,IAAM,OAAA,EAAgC,CAAC,EAAE,KAAA,EAAO,QAAA,EAAU,OAAA,EAAS,UAAA,EAAY,GAAG,CAAA,EAAA,GAAM;AAC7F,EAAA,MAAM,QAAA,EAAU,CAAC,cAAA,EAAgB,SAAS,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA;AAEpE,EAAA,uBACE,6BAAA,KAAC,EAAA,EAAI,SAAA,EAAW,OAAA,EACd,QAAA,kBAAA,8BAAA,KAAC,EAAA,EAAI,SAAA,EAAU,uBAAA,EACb,QAAA,EAAA;AAAA,oBAAA,8BAAA,KAAC,EAAA,EAAI,SAAA,EAAU,sBAAA,EACb,QAAA,EAAA;AAAA,sBAAA,6BAAA,IAAC,EAAA,EAAG,SAAA,EAAU,qBAAA,EAAuB,QAAA,EAAA,MAAA,CAAM,CAAA;AAAA,MAC1C,SAAA,mBAAY,6BAAA,MAAC,EAAA,EAAK,SAAA,EAAU,wBAAA,EAA0B,QAAA,EAAA,SAAA,CAAS;AAAA,IAAA,EAAA,CAClE,CAAA;AAAA,oBACA,6BAAA,KAAC,EAAA,EAAI,SAAA,EAAU,uBAAA,EACZ,QAAA,kBAAA,OAAA,2BAAS,GAAA,mBAAI,CAAC,MAAA,EAAQ,KAAA,EAAA,mBACrB,6BAAA,wBAAC,EAAA,EAAmB,IAAA,EAAK,IAAA,EAAM,GAAG,OAAA,CAAA,EAArB,KAA6B,CAC3C,IAAA,CACH;AAAA,EAAA,EAAA,CACF,EAAA,CACF,CAAA;AAEJ,CAAA;ADPA;AACA;AACE;AACF,wBAAC","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-IJYYHBZC.cjs","sourcesContent":[null,"import React from 'react';\nimport type { HeaderProps } from './Header.types';\nimport './Header.scss';\nimport { Button } from '../Button';\n\nexport const Header: React.FC<HeaderProps> = ({ title, subtitle, actions, className = '' }) => {\n  const classes = ['eidos-header', className].filter(Boolean).join(' ');\n\n  return (\n    <div className={classes}>\n      <div className=\"eidos-header__content\">\n        <div className=\"eidos-header__titles\">\n          <h1 className=\"eidos-header__title\">{title}</h1>\n          {subtitle && <span className=\"eidos-header__subtitle\">{subtitle}</span>}\n        </div>\n        <div className=\"eidos-header__actions\">\n          {actions?.map((action, index) => (\n            <Button key={index} size=\"md\" {...action} />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/{chunk-SAFSEXMU.cjs → chunk-ISABZ2VX.cjs}

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkQGZF5MOScjs = require('./chunk-QGZF5MOS.cjs');
+var _chunkHLNKIAE5cjs = require('./chunk-HLNKIAE5.cjs');
 
 
-var _chunkLTOHGCU4cjs = require('./chunk-LTOHGCU4.cjs');
+var _chunkA7Z2QAFZcjs = require('./chunk-A7Z2QAFZ.cjs');
 
 // src/components/Pagination/Pagination.component.tsx
 var _react = require('react');
@@ -78,7 +78,7 @@ var Pagination = ({
   ].filter(Boolean).join(" ");
   const nav = /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "nav", { "aria-label": "Pagination", className: "eidos-pagination-nav", children: [
     showFirstLast && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkLTOHGCU4cjs.Button,
+      _chunkA7Z2QAFZcjs.Button,
       {
         variant: "text",
         size,
@@ -89,7 +89,7 @@ var Pagination = ({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkLTOHGCU4cjs.Button,
+      _chunkA7Z2QAFZcjs.Button,
       {
         variant: "text",
         size,
@@ -145,7 +145,7 @@ var Pagination = ({
       )
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkLTOHGCU4cjs.Button,
+      _chunkA7Z2QAFZcjs.Button,
       {
         variant: "text",
         size,
@@ -156,7 +156,7 @@ var Pagination = ({
       }
     ),
     showFirstLast && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkLTOHGCU4cjs.Button,
+      _chunkA7Z2QAFZcjs.Button,
       {
         variant: "text",
         size,
@@ -184,7 +184,7 @@ var Pagination = ({
       hasPageSize && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "eidos-pagination-size", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "label", { className: "eidos-pagination-size-label", children: "Show:" }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-          _chunkQGZF5MOScjs.Select,
+          _chunkHLNKIAE5cjs.Select,
           {
             value: String(pageSize),
             onChange: (val) => onPageSizeChange(Number(val)),
@@ -208,4 +208,4 @@ Pagination.displayName = "Pagination";
 
 
 exports.Pagination = Pagination;
-//# sourceMappingURL=chunk-SAFSEXMU.cjs.map
+//# sourceMappingURL=chunk-ISABZ2VX.cjs.map

package/dist/chunk-ISABZ2VX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-ISABZ2VX.cjs","../src/components/Pagination/Pagination.component.tsx"],"names":[],"mappings":"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","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-ISABZ2VX.cjs","sourcesContent":[null,"import React, { useState, useEffect } from 'react';\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';\nimport { Button } from '../Button';\nimport { Select } from '../Select';\nimport type { PaginationProps } from './Pagination.types';\n\n// ── Ellipsis range helper ─────────────────────────────────────────────────────\n\nconst ELLIPSIS = 'ellipsis' as const;\ntype PageItem = number | typeof ELLIPSIS;\n\nfunction usePaginationRange(page: number, totalPages: number, siblingCount: number): PageItem[] {\n  const totalShown = siblingCount * 2 + 5;\n\n  if (totalPages <= totalShown) {\n    return Array.from({ length: totalPages }, (_, i) => i + 1);\n  }\n\n  const leftSibling = Math.max(page - siblingCount, 1);\n  const rightSibling = Math.min(page + siblingCount, totalPages);\n\n  const showLeftEllipsis = leftSibling > 2;\n  const showRightEllipsis = rightSibling < totalPages - 1;\n\n  const items: PageItem[] = [1];\n\n  if (showLeftEllipsis) {\n    items.push(ELLIPSIS);\n  } else {\n    for (let i = 2; i < leftSibling; i++) items.push(i);\n  }\n\n  for (let i = leftSibling; i <= rightSibling; i++) {\n    if (i !== 1 && i !== totalPages) items.push(i);\n  }\n\n  if (showRightEllipsis) {\n    items.push(ELLIPSIS);\n  } else {\n    for (let i = rightSibling + 1; i < totalPages; i++) items.push(i);\n  }\n\n  items.push(totalPages);\n\n  return items;\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport const Pagination: React.FC<PaginationProps> = ({\n  page,\n  totalPages,\n  onChange,\n  siblingCount = 1,\n  showFirstLast = false,\n  color = 'primary',\n  size = 'sm',\n  disabled = false,\n  className = '',\n  // Table-footer mode\n  totalItems,\n  pageSize,\n  onPageSizeChange,\n  pageSizeOptions = [10, 25, 50, 100],\n}) => {\n  const items = usePaginationRange(page, totalPages, siblingCount);\n\n  // ── Active-page editable input ─────────────────────────────────────────────\n  const [inputValue, setInputValue] = useState(String(page));\n  useEffect(() => {\n    setInputValue(String(page));\n  }, [page]);\n\n  const commitInput = (raw: string) => {\n    const val = parseInt(raw, 10);\n    if (!isNaN(val) && val >= 1 && val <= totalPages && val !== page) {\n      onChange(val);\n    } else {\n      setInputValue(String(page)); // revert on invalid or same-page\n    }\n  };\n\n  // ── Layout flags ───────────────────────────────────────────────────────────\n  const hasResults = totalItems !== undefined && pageSize !== undefined;\n  const hasPageSize = !!onPageSizeChange && pageSize !== undefined;\n  const tableMode = hasResults || hasPageSize;\n\n  const startItem = hasResults ? (totalItems === 0 ? 0 : (page - 1) * pageSize! + 1) : undefined;\n  const endItem = hasResults ? Math.min(page * pageSize!, totalItems!) : undefined;\n\n  const rootClasses = [\n    'eidos-pagination',\n    `eidos-pagination--${size}`,\n    tableMode && 'eidos-pagination--table',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  // ── Navigation block ───────────────────────────────────────────────────────\n  const nav = (\n    <nav aria-label=\"Pagination\" className=\"eidos-pagination-nav\">\n      {showFirstLast && (\n        <Button\n          variant=\"text\"\n          size={size}\n          icon={ChevronsLeft}\n          disabled={page === 1 || disabled}\n          onClick={() => onChange(1)}\n          aria-label=\"First page\"\n        />\n      )}\n\n      <Button\n        variant=\"text\"\n        size={size}\n        icon={ChevronLeft}\n        disabled={page === 1 || disabled}\n        onClick={() => onChange(page - 1)}\n        aria-label=\"Previous page\"\n      />\n\n      {items.map((item, i) =>\n        item === ELLIPSIS ? (\n          <span key={`ellipsis-${i}`} className=\"eidos-pagination-ellipsis\" aria-hidden=\"true\">\n            …\n          </span>\n        ) : item === page ? (\n          // Active page - styled as filled chip, editable via keyboard/click\n          <input\n            key=\"active-page\"\n            type=\"text\"\n            inputMode=\"numeric\"\n            className={[\n              'eidos-pagination-page',\n              'eidos-pagination-page--active',\n              `eidos-pagination-page--${color}`,\n            ].join(' ')}\n            value={inputValue}\n            onChange={(e) => setInputValue(e.target.value)}\n            onFocus={(e) => e.target.select()}\n            onBlur={() => commitInput(inputValue)}\n            onKeyDown={(e) => {\n              if (e.key === 'Enter') {\n                commitInput(inputValue);\n                e.currentTarget.blur();\n              } else if (e.key === 'Escape') {\n                setInputValue(String(page));\n                e.currentTarget.blur();\n              }\n            }}\n            aria-label={`Page ${page} of ${totalPages}, editable`}\n            aria-current=\"page\"\n            disabled={disabled}\n          />\n        ) : (\n          <button\n            key={item}\n            type=\"button\"\n            className=\"eidos-pagination-page\"\n            onClick={() => onChange(item)}\n            disabled={disabled}\n            aria-label={`Page ${item}`}\n          >\n            {item}\n          </button>\n        ),\n      )}\n\n      <Button\n        variant=\"text\"\n        size={size}\n        icon={ChevronRight}\n        disabled={page === totalPages || disabled}\n        onClick={() => onChange(page + 1)}\n        aria-label=\"Next page\"\n      />\n\n      {showFirstLast && (\n        <Button\n          variant=\"text\"\n          size={size}\n          icon={ChevronsRight}\n          disabled={page === totalPages || disabled}\n          onClick={() => onChange(totalPages)}\n          aria-label=\"Last page\"\n        />\n      )}\n    </nav>\n  );\n\n  // ── Standalone mode ────────────────────────────────────────────────────────\n  if (!tableMode) {\n    return <div className={rootClasses}>{nav}</div>;\n  }\n\n  // ── Table-footer mode ──────────────────────────────────────────────────────\n  return (\n    <div className={rootClasses}>\n      {hasResults && (\n        <span className=\"eidos-pagination-info\">\n          Showing {startItem}-{endItem} of {totalItems} results\n        </span>\n      )}\n\n      <div className=\"eidos-pagination-controls\">\n        {hasPageSize && (\n          <div className=\"eidos-pagination-size\">\n            <label className=\"eidos-pagination-size-label\">Show:</label>\n            <Select\n              value={String(pageSize)}\n              onChange={(val) => onPageSizeChange(Number(val))}\n              options={pageSizeOptions.map((n) => ({\n                id: String(n),\n                value: String(n),\n                label: String(n),\n              }))}\n              clearable={false}\n              disabled={disabled}\n              inputProps={{ size: 'sm', width: '3ch' }}\n            />\n          </div>\n        )}\n\n        {totalPages > 1 && nav}\n      </div>\n    </div>\n  );\n};\n\nPagination.displayName = 'Pagination';\n"]}

package/dist/{chunk-VTAABT55.js → chunk-IV4LM3MB.js}

@@ -1,18 +1,18 @@
 import {
   CommandPalette
-} from "./chunk-VFYG7GAH.js";
+} from "./chunk-PY2376XI.js";
 import {
   Menu
-} from "./chunk-O6B4KB4D.js";
+} from "./chunk-JMD3P4CY.js";
 import {
   Avatar
-} from "./chunk-TCX3QKF3.js";
+} from "./chunk-XJBWFDDE.js";
 import {
   Breadcrumb
-} from "./chunk-S25WB7KJ.js";
+} from "./chunk-DRXPTACG.js";
 import {
   IconButton
-} from "./chunk-FO5FNTJX.js";
+} from "./chunk-WIE7HDIM.js";
 
 // src/components/Toolbar/Toolbar.component.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -44,4 +44,4 @@ var Toolbar = ({
 export {
   Toolbar
 };
-//# sourceMappingURL=chunk-VTAABT55.js.map
+//# sourceMappingURL=chunk-IV4LM3MB.js.map