@inshorts/glint-ui 0.5.4 → 0.6.1

package/dist/select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/select.tsx","../src/autocomplete.tsx","../src/modal.tsx","../src/utils.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { Autocomplete, type AutocompleteOption } from \"./autocomplete\";\n\ntype SelectChange = {\n  target: { value: string };\n  currentTarget: { value: string };\n};\n\nexport type SelectProps = {\n  id?: string;\n  className?: string;\n  disabled?: boolean;\n  /** Accessible name when the control is not wrapped in a label. */\n  \"aria-label\"?: string;\n  /** `compact` fits a spreadsheet cell. Typing still filters the list. */\n  size?: \"default\" | \"compact\";\n  value?: string | number | readonly string[];\n  placeholder?: string;\n  children?: React.ReactNode;\n  onChange?: (event: SelectChange) => void;\n};\n\nfunction optionText(node: React.ReactNode): string {\n  if (node == null || typeof node === \"boolean\") return \"\";\n  if (typeof node === \"string\" || typeof node === \"number\") return String(node);\n  if (Array.isArray(node)) return node.map(optionText).join(\"\");\n  if (React.isValidElement<{ children?: React.ReactNode }>(node)) {\n    return optionText(node.props.children);\n  }\n  return \"\";\n}\n\nfunction optionsFromChildren(children: React.ReactNode): AutocompleteOption[] {\n  const options: AutocompleteOption[] = [];\n  React.Children.forEach(children, (child) => {\n    if (!React.isValidElement(child)) return;\n    if (child.type === React.Fragment) {\n      options.push(\n        ...optionsFromChildren(\n          (child.props as { children?: React.ReactNode }).children,\n        ),\n      );\n      return;\n    }\n    const props = child.props as {\n      value?: string | number;\n      disabled?: boolean;\n      children?: React.ReactNode;\n    };\n    const value = props.value == null ? \"\" : String(props.value);\n    options.push({\n      value,\n      label: optionText(props.children).trim() || value,\n      disabled: Boolean(props.disabled),\n    });\n  });\n  return options;\n}\n\n/**\n * The dropdown. It is the searchable autocomplete, not a native `<select>`,\n * so a long list can be typed into and an empty list still opens.\n */\nexport function Select({\n  id,\n  className,\n  disabled,\n  value,\n  placeholder,\n  children,\n  onChange,\n  size = \"default\",\n  \"aria-label\": ariaLabel,\n}: SelectProps) {\n  const options = optionsFromChildren(children);\n  const current = Array.isArray(value)\n    ? String(value[0] ?? \"\")\n    : value == null\n      ? \"\"\n      : String(value);\n  const blank = options.find((option) => option.value === \"\");\n\n  return (\n    <Autocomplete\n      id={id}\n      className={className}\n      disabled={Boolean(disabled)}\n      ariaLabel={ariaLabel}\n      size={size}\n      options={options}\n      value={current}\n      clearable={false}\n      placeholder={placeholder ?? blank?.label ?? \"Search…\"}\n      onChange={(next) =>\n        onChange?.({\n          target: { value: next },\n          currentTarget: { value: next },\n        })\n      }\n    />\n  );\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Check, ChevronDown, Search, X } from \"lucide-react\";\n\nimport { useHasMounted } from \"./modal\";\nimport { cn } from \"./utils\";\n\n/** Room the list wants below the control before it gives up and flips. */\nconst PREFERRED_LIST_HEIGHT = 224;\n/** Below this there is no point opening downward at all. */\nconst MIN_LIST_HEIGHT = 120;\nconst VIEWPORT_MARGIN = 8;\nconst ANCHOR_GAP = 4;\n\ntype DropdownPosition = {\n  left: number;\n  width: number;\n  maxHeight: number;\n  /** One of the two is set: `top` opens downward, `bottom` opens upward. */\n  top?: number;\n  bottom?: number;\n};\n\nexport type AutocompleteOption = {\n  value: string;\n  label: string;\n  disabled?: boolean;\n};\n\ntype BaseAutocompleteProps = {\n  options: AutocompleteOption[];\n  placeholder?: string;\n  disabled?: boolean;\n  className?: string;\n  emptyMessage?: string;\n  id?: string;\n  /**\n   * Accessible name for the combobox.\n   *\n   * `Field` renders its label as a `<span>`, so without this the control is\n   * announced as an unnamed combobox and cannot be queried by name — the\n   * filter toolbars work around it by counting comboboxes on the page.\n   */\n  ariaLabel?: string;\n  /**\n   * `compact` is the spreadsheet cell: no search icon, no min height, and a\n   * list wide enough to read a name. The closed control still shows the\n   * chosen label, and typing filters the list.\n   */\n  size?: \"default\" | \"compact\";\n  /**\n   * Type a value and press Enter (or paste a list) to add it, like antd\n   * `Select mode=\"tags\"`. With `multiple` a pasted list is split into several\n   * values; on a single-value control it accepts one typed value the options\n   * do not offer — an id for a record the list has not loaded, say.\n   */\n  creatable?: boolean;\n  /**\n   * Shows the clear button once a value is chosen. Off for dropdowns that\n   * always keep one of their options, where clearing would blank a required\n   * field.\n   */\n  clearable?: boolean;\n};\n\ntype SingleAutocompleteProps = BaseAutocompleteProps & {\n  multiple?: false;\n  value: string;\n  onChange: (value: string) => void;\n};\n\ntype MultipleAutocompleteProps = BaseAutocompleteProps & {\n  multiple: true;\n  value: string[];\n  onChange: (value: string[]) => void;\n};\n\nexport type AutocompleteProps =\n  SingleAutocompleteProps | MultipleAutocompleteProps;\n\nfunction normalizeQuery(query: string) {\n  return query.trim().toLowerCase();\n}\n\nfunction filterOptions(options: AutocompleteOption[], query: string) {\n  const normalized = normalizeQuery(query);\n  if (!normalized) return options;\n\n  return options.filter(\n    (option) =>\n      option.label.toLowerCase().includes(normalized) ||\n      option.value.toLowerCase().includes(normalized),\n  );\n}\n\nfunction getOptionLabel(options: AutocompleteOption[], value: string) {\n  return options.find((option) => option.value === value)?.label ?? value;\n}\n\nfunction parseTagTokens(raw: string): string[] {\n  const seen = new Set<string>();\n  const tokens: string[] = [];\n  for (const part of raw.split(/[\\s,]+/)) {\n    const token = part.trim();\n    if (!token || seen.has(token)) continue;\n    seen.add(token);\n    tokens.push(token);\n  }\n  return tokens;\n}\n\nexport function Autocomplete(props: AutocompleteProps) {\n  const {\n    options,\n    placeholder = \"Search…\",\n    disabled = false,\n    className,\n    emptyMessage = \"No results found\",\n    id,\n    ariaLabel,\n    size = \"default\",\n    creatable = false,\n    clearable = true,\n  } = props;\n\n  const multiple = props.multiple ?? false;\n  const singleValue = multiple\n    ? undefined\n    : (props as SingleAutocompleteProps).value;\n  const multipleValue = multiple\n    ? (props as MultipleAutocompleteProps).value\n    : undefined;\n\n  // Memoized so dependent callbacks below keep stable identities across renders.\n  const selectedValues = React.useMemo<string[]>(() => {\n    if (multiple) return multipleValue ?? [];\n    return singleValue ? [singleValue] : [];\n  }, [multiple, multipleValue, singleValue]);\n\n  const onSingleChange = !multiple\n    ? (props as SingleAutocompleteProps).onChange\n    : undefined;\n  const onMultipleChange = multiple\n    ? (props as MultipleAutocompleteProps).onChange\n    : undefined;\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const dropdownRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const listRef = React.useRef<HTMLUListElement>(null);\n  const ignoreBlurRef = React.useRef(false);\n\n  const mounted = useHasMounted();\n  const [open, setOpen] = React.useState(false);\n  const [position, setPosition] = React.useState<DropdownPosition | null>(null);\n  const [query, setQuery] = React.useState(\"\");\n  const [highlightedIndex, setHighlightedIndex] = React.useState(0);\n\n  const filteredOptions = React.useMemo(\n    () => filterOptions(options, query),\n    [options, query],\n  );\n\n  // Clamp during render instead of via a setState-in-effect: if the option list\n  // shrinks below the stored index, fall back to the last valid row.\n  const safeHighlightedIndex =\n    highlightedIndex >= filteredOptions.length\n      ? Math.max(filteredOptions.length - 1, 0)\n      : highlightedIndex;\n\n  const close = React.useCallback(() => {\n    setOpen(false);\n    setQuery(\"\");\n    setHighlightedIndex(0);\n  }, []);\n\n  const openDropdown = React.useCallback(() => {\n    if (disabled) return;\n    setOpen(true);\n    setHighlightedIndex(0);\n  }, [disabled]);\n\n  const commitSingleValue = React.useCallback(\n    (value: string) => {\n      if (!multiple) {\n        onSingleChange?.(value);\n        close();\n      }\n    },\n    [close, multiple, onSingleChange],\n  );\n\n  const toggleMultipleValue = React.useCallback(\n    (value: string) => {\n      if (!multiple || !onMultipleChange) return;\n\n      onMultipleChange(\n        selectedValues.includes(value)\n          ? selectedValues.filter((item) => item !== value)\n          : [...selectedValues, value],\n      );\n      setQuery(\"\");\n      setHighlightedIndex(0);\n    },\n    [multiple, onMultipleChange, selectedValues],\n  );\n\n  const commitCustomValues = React.useCallback(\n    (raw: string) => {\n      if (!creatable) return;\n\n      if (!multiple) {\n        const value = raw.trim();\n        if (!value) return;\n        commitSingleValue(value);\n        return;\n      }\n\n      if (!onMultipleChange) return;\n      const tokens = parseTagTokens(raw);\n      if (!tokens.length) return;\n      const next = [...selectedValues];\n      for (const token of tokens) {\n        if (!next.includes(token)) next.push(token);\n      }\n      onMultipleChange(next);\n      setQuery(\"\");\n      setHighlightedIndex(0);\n    },\n    [commitSingleValue, creatable, multiple, onMultipleChange, selectedValues],\n  );\n\n  const removeValue = React.useCallback(\n    (value: string) => {\n      if (!multiple || !onMultipleChange) return;\n      onMultipleChange(selectedValues.filter((item) => item !== value));\n      window.requestAnimationFrame(() => inputRef.current?.focus());\n    },\n    [multiple, onMultipleChange, selectedValues],\n  );\n\n  const selectOption = React.useCallback(\n    (option: AutocompleteOption) => {\n      if (option.disabled) return;\n\n      ignoreBlurRef.current = true;\n      window.setTimeout(() => {\n        ignoreBlurRef.current = false;\n      }, 0);\n\n      if (multiple) {\n        toggleMultipleValue(option.value);\n        window.requestAnimationFrame(() => inputRef.current?.focus());\n        return;\n      }\n\n      commitSingleValue(option.value);\n    },\n    [commitSingleValue, multiple, toggleMultipleValue],\n  );\n\n  const selectHighlighted = React.useCallback(() => {\n    const option = filteredOptions[safeHighlightedIndex];\n    if (!option) return;\n    selectOption(option);\n  }, [filteredOptions, safeHighlightedIndex, selectOption]);\n\n  React.useEffect(() => {\n    if (!open) return;\n\n    function handlePointerDown(event: PointerEvent) {\n      const target = event.target as Node;\n      // The list is portalled to the body, so containment has to be checked\n      // against both halves or picking an option would close the control\n      // before the choice registered.\n      if (\n        containerRef.current?.contains(target) ||\n        dropdownRef.current?.contains(target)\n      ) {\n        return;\n      }\n      close();\n    }\n\n    document.addEventListener(\"pointerdown\", handlePointerDown);\n    return () => document.removeEventListener(\"pointerdown\", handlePointerDown);\n  }, [close, open]);\n\n  /*\n    The list is measured against the viewport and rendered in a portal.\n\n    Anchored inside the control it was clipped by whatever `overflow` ancestor\n    happened to be above it — inside a dialog body that is the scroll region,\n    so the last field on a form showed one row of a six-hundred-row list. It\n    opens downward when there is room, upward when there is not, and shrinks to\n    what is left when neither side can take the whole list.\n  */\n  React.useLayoutEffect(() => {\n    // Not cleared on close: the render is gated on `open`, and the layout\n    // effect recomputes before the next paint, so a stale value is never seen.\n    if (!open) return;\n\n    const update = () => {\n      const anchor = containerRef.current;\n      if (!anchor) return;\n      const rect = anchor.getBoundingClientRect();\n      const below =\n        window.innerHeight - rect.bottom - ANCHOR_GAP - VIEWPORT_MARGIN;\n      const above = rect.top - ANCHOR_GAP - VIEWPORT_MARGIN;\n      const flip =\n        below < Math.min(PREFERRED_LIST_HEIGHT, MIN_LIST_HEIGHT) &&\n        above > below;\n      const room = flip ? above : below;\n      const width = Math.max(rect.width, size === \"compact\" ? 220 : 0);\n      const left = Math.max(\n        VIEWPORT_MARGIN,\n        Math.min(rect.left, window.innerWidth - width - VIEWPORT_MARGIN),\n      );\n      setPosition({\n        left,\n        width,\n        maxHeight: Math.max(\n          MIN_LIST_HEIGHT,\n          Math.min(PREFERRED_LIST_HEIGHT, room),\n        ),\n        ...(flip\n          ? { bottom: window.innerHeight - rect.top + ANCHOR_GAP }\n          : { top: rect.bottom + ANCHOR_GAP }),\n      });\n    };\n\n    update();\n    // Capture, so a scroll in any ancestor — the dialog body included — moves\n    // the list with its control instead of leaving it behind.\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [open, size]);\n\n  React.useEffect(() => {\n    if (!open || !listRef.current) return;\n\n    const highlighted = listRef.current.children[safeHighlightedIndex] as\n      HTMLElement | undefined;\n\n    highlighted?.scrollIntoView({ block: \"nearest\" });\n  }, [safeHighlightedIndex, open]);\n\n  function handleInputKeyDown(event: React.KeyboardEvent<HTMLInputElement>) {\n    if (disabled) return;\n\n    switch (event.key) {\n      case \"ArrowDown\":\n        event.preventDefault();\n        if (!open) {\n          openDropdown();\n          return;\n        }\n        setHighlightedIndex(\n          Math.min(safeHighlightedIndex + 1, filteredOptions.length - 1),\n        );\n        break;\n      case \"ArrowUp\":\n        event.preventDefault();\n        if (!open) {\n          openDropdown();\n          return;\n        }\n        setHighlightedIndex(Math.max(safeHighlightedIndex - 1, 0));\n        break;\n      case \"Enter\":\n        event.preventDefault();\n        if (creatable && query.trim()) {\n          // A single-value control filters its list as you type, so a match\n          // is what Enter means there; only an unmatched query is taken as a\n          // new value. Tags have no such list to defer to.\n          if (multiple || filteredOptions.length === 0) {\n            commitCustomValues(query);\n            return;\n          }\n        }\n        if (!open) {\n          openDropdown();\n          return;\n        }\n        selectHighlighted();\n        break;\n      case \",\":\n        if (creatable && multiple && query.trim()) {\n          event.preventDefault();\n          commitCustomValues(query);\n        }\n        break;\n      case \"Escape\":\n        event.preventDefault();\n        close();\n        break;\n      case \"Backspace\":\n        if (multiple && query.length === 0 && selectedValues.length > 0) {\n          event.preventDefault();\n          removeValue(selectedValues[selectedValues.length - 1]);\n        }\n        break;\n      case \"Tab\":\n        close();\n        break;\n      default:\n        break;\n    }\n  }\n\n  const displayValue =\n    !multiple && !open && !query && selectedValues[0]\n      ? getOptionLabel(options, selectedValues[0])\n      : query;\n\n  const inputPlaceholder =\n    multiple && selectedValues.length > 0 ? \"\" : placeholder;\n\n  const createLabel = query.trim();\n  const canCreate =\n    creatable && Boolean(createLabel) && !selectedValues.includes(createLabel);\n\n  const listboxId = id ? `${id}-listbox` : undefined;\n\n  return (\n    <div\n      ref={containerRef}\n      className={cn(\n        \"relative\",\n        size === \"compact\" ? \"w-auto min-w-24\" : \"w-full\",\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          \"border-border bg-background flex w-full cursor-pointer items-center rounded-md border transition-colors\",\n          \"focus-within:border-ring focus-within:ring-ring/30 focus-within:ring-2\",\n          size === \"compact\"\n            ? \"min-h-0 gap-0.5 border-transparent bg-transparent px-1 py-0.5 text-xs shadow-none\"\n            : \"min-h-9 gap-1.5 px-2 py-1.5 text-sm shadow-sm\",\n          disabled && \"cursor-not-allowed opacity-50\",\n          open && \"border-ring ring-ring/30 ring-2\",\n        )}\n        onPointerDown={(event) => {\n          if (disabled) return;\n          if ((event.target as HTMLElement).closest(\"[data-option]\")) return;\n          if ((event.target as HTMLElement).closest(\"[data-chip-remove]\"))\n            return;\n\n          if (!(event.target as HTMLElement).closest(\"input\")) {\n            event.preventDefault();\n            inputRef.current?.focus();\n          }\n\n          openDropdown();\n        }}\n      >\n        {size === \"compact\" ? null : (\n          <Search className=\"text-muted-foreground size-4 shrink-0\" />\n        )}\n\n        <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-1\">\n          {multiple &&\n            selectedValues.map((value) => (\n              <span\n                key={value}\n                className=\"bg-primary/10 text-primary inline-flex max-w-full items-center gap-1 rounded-md px-2 py-0.5 text-xs font-medium\"\n              >\n                <span className=\"truncate\">\n                  {getOptionLabel(options, value)}\n                </span>\n                <button\n                  type=\"button\"\n                  data-chip-remove\n                  className=\"text-primary/70 hover:bg-primary/15 hover:text-primary rounded-sm transition\"\n                  onPointerDown={(event) => {\n                    event.preventDefault();\n                    event.stopPropagation();\n                    removeValue(value);\n                  }}\n                  aria-label={`Remove ${getOptionLabel(options, value)}`}\n                >\n                  <X className=\"size-3\" />\n                </button>\n              </span>\n            ))}\n\n          <input\n            ref={inputRef}\n            id={id}\n            type=\"text\"\n            role=\"combobox\"\n            aria-label={ariaLabel}\n            aria-expanded={open}\n            aria-controls={listboxId}\n            aria-autocomplete=\"list\"\n            disabled={disabled}\n            value={displayValue}\n            placeholder={inputPlaceholder}\n            className={cn(\n              \"placeholder:text-muted-foreground flex-1 bg-transparent outline-none\",\n              size === \"compact\" ? \"min-w-0\" : \"min-w-[6rem]\",\n            )}\n            onFocus={openDropdown}\n            onBlur={() => {\n              if (ignoreBlurRef.current) return;\n              close();\n            }}\n            onChange={(event) => {\n              setQuery(event.target.value);\n              setHighlightedIndex(0);\n              if (!open) setOpen(true);\n            }}\n            onKeyDown={handleInputKeyDown}\n            onPaste={(event) => {\n              if (!creatable || !multiple) return;\n              const text = event.clipboardData.getData(\"text\");\n              if (!/[\\s,]/.test(text)) return;\n              event.preventDefault();\n              commitCustomValues(text);\n            }}\n          />\n        </div>\n\n        {clearable && !multiple && selectedValues[0] && !disabled && (\n          <button\n            type=\"button\"\n            className=\"text-muted-foreground hover:bg-muted hover:text-foreground rounded-sm p-0.5 transition\"\n            onPointerDown={(event) => {\n              event.preventDefault();\n              event.stopPropagation();\n              onSingleChange?.(\"\");\n              setQuery(\"\");\n              inputRef.current?.focus();\n            }}\n            aria-label=\"Clear selection\"\n          >\n            <X className=\"size-3.5\" />\n          </button>\n        )}\n\n        <ChevronDown\n          className={cn(\n            \"text-muted-foreground shrink-0 transition-transform\",\n            size === \"compact\" ? \"size-3\" : \"size-4\",\n            open && \"rotate-180\",\n          )}\n        />\n      </div>\n\n      {open && mounted && position\n        ? createPortal(\n            <div\n              ref={dropdownRef}\n              data-autocomplete-dropdown\n              style={{\n                position: \"fixed\",\n                left: position.left,\n                width: position.width,\n                top: position.top,\n                bottom: position.bottom,\n                // Above the modal shell (z-100) it is usually opened inside.\n                zIndex: 200,\n              }}\n              className=\"border-border bg-background overflow-hidden rounded-md border shadow-lg\"\n            >\n              <ul\n                ref={listRef}\n                id={listboxId}\n                role=\"listbox\"\n                aria-multiselectable={multiple || undefined}\n                className=\"overflow-y-auto p-1\"\n                style={{ maxHeight: position.maxHeight }}\n              >\n                {filteredOptions.length === 0 && !canCreate ? (\n                  <li className=\"text-muted-foreground px-3 py-6 text-center text-sm\">\n                    {emptyMessage}\n                  </li>\n                ) : (\n                  <>\n                    {filteredOptions.map((option, index) => {\n                      const isSelected = selectedValues.includes(option.value);\n                      const isHighlighted = index === safeHighlightedIndex;\n\n                      return (\n                        <li\n                          key={option.value}\n                          data-option\n                          role=\"option\"\n                          aria-selected={isSelected}\n                          aria-disabled={option.disabled || undefined}\n                          className={cn(\n                            \"flex cursor-pointer items-center gap-2 rounded-sm transition-colors\",\n                            size === \"compact\"\n                              ? \"px-2 py-1 text-xs\"\n                              : \"px-2.5 py-2 text-sm\",\n                            isHighlighted && \"bg-muted\",\n                            option.disabled && \"cursor-not-allowed opacity-50\",\n                          )}\n                          onMouseEnter={() => setHighlightedIndex(index)}\n                          onPointerDown={(event) => {\n                            event.preventDefault();\n                            event.stopPropagation();\n                            selectOption(option);\n                          }}\n                        >\n                          {multiple ? (\n                            <span\n                              className={cn(\n                                \"border-border flex size-4 shrink-0 items-center justify-center rounded border\",\n                                isSelected &&\n                                  \"border-primary bg-primary text-primary-foreground\",\n                              )}\n                            >\n                              {isSelected ? <Check className=\"size-3\" /> : null}\n                            </span>\n                          ) : (\n                            <Check\n                              className={cn(\n                                \"text-primary size-4 shrink-0\",\n                                isSelected ? \"opacity-100\" : \"opacity-0\",\n                              )}\n                            />\n                          )}\n                          <span className=\"truncate\">{option.label}</span>\n                        </li>\n                      );\n                    })}\n                    {canCreate ? (\n                      <li\n                        data-option\n                        role=\"option\"\n                        aria-selected={false}\n                        className=\"hover:bg-muted flex cursor-pointer items-center gap-2 rounded-sm px-2.5 py-2 text-sm transition-colors\"\n                        onPointerDown={(event) => {\n                          event.preventDefault();\n                          event.stopPropagation();\n                          ignoreBlurRef.current = true;\n                          window.setTimeout(() => {\n                            ignoreBlurRef.current = false;\n                          }, 0);\n                          commitCustomValues(query);\n                          window.requestAnimationFrame(() =>\n                            inputRef.current?.focus(),\n                          );\n                        }}\n                      >\n                        Add “{createLabel}”\n                      </li>\n                    ) : null}\n                  </>\n                )}\n              </ul>\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  );\n}\n","\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\n\nimport { useDialogLayer } from \"./dialogLayer\";\nimport { cn } from \"./utils\";\n\nconst emptySubscribe = () => () => {};\n\n/**\n * Returns false during SSR and the first client render, then true once mounted.\n * `useSyncExternalStore` is the React-recommended way to read client-only state\n * without a setState-in-effect (which triggers cascading renders).\n */\nexport function useHasMounted(): boolean {\n  return React.useSyncExternalStore(\n    emptySubscribe,\n    () => true,\n    () => false,\n  );\n}\n\ninterface ModalProps {\n  isOpen: boolean;\n  /** id of the element labelling the dialog; wired to aria-labelledby. */\n  labelledBy: string;\n  /**\n   * Optional id(s) of elements describing the dialog (APG alertdialog body).\n   * Space-separated when multiple.\n   */\n  describedBy?: string;\n  /** Accessible label for the backdrop dismiss button. */\n  closeLabel: string;\n  onClose: () => void;\n  children: React.ReactNode;\n  /**\n   * When false, Escape and backdrop clicks do not close the modal (e.g. while a\n   * save is in flight). Defaults to true.\n   */\n  dismissible?: boolean;\n  /** Use \"alertdialog\" for destructive confirmations. Defaults to \"dialog\". */\n  role?: \"dialog\" | \"alertdialog\";\n  /** Tailwind max-width class for the panel. Defaults to \"max-w-md\". */\n  panelClassName?: string;\n}\n\n/**\n * Shared modal shell: renders a portal-backed, scroll-locked, Escape-dismissible\n * overlay with a centered panel. Callers provide the panel body (heading, form,\n * footer). Consolidates the boilerplate previously copied across every dialog.\n */\nexport function Modal({\n  isOpen,\n  labelledBy,\n  describedBy,\n  closeLabel,\n  onClose,\n  children,\n  dismissible = true,\n  role = \"dialog\",\n  panelClassName,\n}: ModalProps) {\n  const mounted = useHasMounted();\n  const panelRef = React.useRef<HTMLDivElement>(null);\n\n  useDialogLayer({\n    // Gated on `mounted` too: before that the panel is not rendered, so there\n    // would be nothing to move focus into.\n    active: isOpen && mounted,\n    containerRef: panelRef,\n    onEscape: dismissible ? onClose : undefined,\n  });\n\n  if (!mounted || !isOpen) return null;\n\n  return createPortal(\n    /*\n      `overflow-y-auto` on the overlay, `my-auto` on the panel — not\n      `items-center`. A flex item centred with `align-items` overflows equally\n      in both directions once it is taller than its container, and the half\n      above the top edge cannot be scrolled to: with the page behind it locked,\n      an over-tall dialog was simply unreachable at both ends. Auto margins\n      centre a short panel the same way and collapse to zero on a tall one,\n      which scrolls.\n    */\n    <div className=\"fixed inset-0 z-[100] flex justify-center overflow-y-auto p-4\">\n      {/* `fixed`, not `absolute`: inside a scrolling overlay an absolute\n          backdrop scrolls away with the content and leaves the rest of a tall\n          dialog sitting on an undimmed page. */}\n      <button\n        type=\"button\"\n        aria-label={closeLabel}\n        tabIndex={-1}\n        className=\"fixed inset-0 bg-overlay/50\"\n        onClick={() => {\n          if (dismissible) onClose();\n        }}\n      />\n      <div\n        ref={panelRef}\n        role={role}\n        aria-modal=\"true\"\n        aria-labelledby={labelledBy}\n        aria-describedby={describedBy}\n        tabIndex={-1}\n        className={cn(\n          \"border-border bg-background relative z-10 my-auto w-full rounded-lg border shadow-2xl outline-none\",\n          panelClassName ?? \"max-w-md p-6\",\n        )}\n      >\n        {children}\n      </div>\n    </div>,\n    document.body,\n  );\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"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","names":["React","React","import_react_dom","import_jsx_runtime","import_jsx_runtime"]}

package/dist/select.d.cts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+type SelectChange = {
+    target: {
+        value: string;
+    };
+    currentTarget: {
+        value: string;
+    };
+};
+type SelectProps = {
+    id?: string;
+    className?: string;
+    disabled?: boolean;
+    /** Accessible name when the control is not wrapped in a label. */
+    "aria-label"?: string;
+    /** `compact` fits a spreadsheet cell. Typing still filters the list. */
+    size?: "default" | "compact";
+    value?: string | number | readonly string[];
+    placeholder?: string;
+    children?: React.ReactNode;
+    onChange?: (event: SelectChange) => void;
+};
+/**
+ * The dropdown. It is the searchable autocomplete, not a native `<select>`,
+ * so a long list can be typed into and an empty list still opens.
+ */
+declare function Select({ id, className, disabled, value, placeholder, children, onChange, size, "aria-label": ariaLabel, }: SelectProps): React.JSX.Element;
+
+export { Select, type SelectProps };

package/dist/select.d.ts

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+type SelectChange = {
+    target: {
+        value: string;
+    };
+    currentTarget: {
+        value: string;
+    };
+};
+type SelectProps = {
+    id?: string;
+    className?: string;
+    disabled?: boolean;
+    /** Accessible name when the control is not wrapped in a label. */
+    "aria-label"?: string;
+    /** `compact` fits a spreadsheet cell. Typing still filters the list. */
+    size?: "default" | "compact";
+    value?: string | number | readonly string[];
+    placeholder?: string;
+    children?: React.ReactNode;
+    onChange?: (event: SelectChange) => void;
+};
+/**
+ * The dropdown. It is the searchable autocomplete, not a native `<select>`,
+ * so a long list can be typed into and an empty list still opens.
+ */
+declare function Select({ id, className, disabled, value, placeholder, children, onChange, size, "aria-label": ariaLabel, }: SelectProps): React.JSX.Element;
+
+export { Select, type SelectProps };

package/dist/select.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  Select
+} from "./chunk-OUYT6SPU.js";
+import "./chunk-5MEOZHJA.js";
+import "./chunk-DS3QYIKL.js";
+import "./chunk-HBBOR43A.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  Select
+};
+//# sourceMappingURL=select.js.map

package/dist/select.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/separator.cjs

@@ -0,0 +1,70 @@
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/separator.tsx
+var separator_exports = {};
+__export(separator_exports, {
+  Separator: () => Separator
+});
+module.exports = __toCommonJS(separator_exports);
+var React = __toESM(require("react"), 1);
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/separator.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Separator = React.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      ref,
+      role: decorative ? "none" : "separator",
+      "aria-orientation": orientation,
+      className: cn(
+        "bg-border shrink-0",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = "Separator";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Separator
+});
+//# sourceMappingURL=separator.cjs.map

package/dist/separator.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/separator.tsx","../src/utils.ts"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\nexport type SeparatorProps = React.HTMLAttributes<HTMLDivElement> & {\n  orientation?: \"horizontal\" | \"vertical\";\n  decorative?: boolean;\n};\n\n/** Thin rule between sections. */\nexport const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n  (\n    { className, orientation = \"horizontal\", decorative = true, ...props },\n    ref,\n  ) => (\n    <div\n      ref={ref}\n      role={decorative ? \"none\" : \"separator\"}\n      aria-orientation={orientation}\n      className={cn(\n        \"bg-border shrink-0\",\n        orientation === \"horizontal\" ? \"h-px w-full\" : \"h-full w-px\",\n        className,\n      )}\n      {...props}\n    />\n  ),\n);\n\nSeparator.displayName = \"Separator\";\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;;;ACFvB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;ADYI;AALG,IAAM,YAAkB;AAAA,EAC7B,CACE,EAAE,WAAW,cAAc,cAAc,aAAa,MAAM,GAAG,MAAM,GACrE,QAEA;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAM,aAAa,SAAS;AAAA,MAC5B,oBAAkB;AAAA,MAClB,WAAW;AAAA,QACT;AAAA,QACA,gBAAgB,eAAe,gBAAgB;AAAA,QAC/C;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEA,UAAU,cAAc;","names":[]}

package/dist/separator.d.cts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+type SeparatorProps = React.HTMLAttributes<HTMLDivElement> & {
+    orientation?: "horizontal" | "vertical";
+    decorative?: boolean;
+};
+/** Thin rule between sections. */
+declare const Separator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    orientation?: "horizontal" | "vertical";
+    decorative?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { Separator, type SeparatorProps };

package/dist/separator.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+type SeparatorProps = React.HTMLAttributes<HTMLDivElement> & {
+    orientation?: "horizontal" | "vertical";
+    decorative?: boolean;
+};
+/** Thin rule between sections. */
+declare const Separator: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    orientation?: "horizontal" | "vertical";
+    decorative?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { Separator, type SeparatorProps };

package/dist/separator.js

@@ -0,0 +1,9 @@
+"use client";
+import {
+  Separator
+} from "./chunk-T4WCCHJQ.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  Separator
+};
+//# sourceMappingURL=separator.js.map

package/dist/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/side-drawer.cjs

@@ -0,0 +1,321 @@
+"use client";
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/side-drawer.tsx
+var side_drawer_exports = {};
+__export(side_drawer_exports, {
+  SideDrawer: () => SideDrawer
+});
+module.exports = __toCommonJS(side_drawer_exports);
+var import_lucide_react2 = require("lucide-react");
+var React4 = __toESM(require("react"), 1);
+var import_react_dom2 = require("react-dom");
+
+// src/button.tsx
+var React = __toESM(require("react"), 1);
+var import_class_variance_authority = require("class-variance-authority");
+var import_react_slot = require("@radix-ui/react-slot");
+
+// src/spinner.tsx
+var import_lucide_react = require("lucide-react");
+
+// src/utils.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/spinner.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var SIZES = {
+  sm: "size-3.5",
+  md: "size-4",
+  lg: "size-5",
+  xl: "size-10 border-2"
+};
+function Spinner({ size = "md", className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_lucide_react.Loader2,
+    {
+      "aria-hidden": true,
+      className: cn("animate-spin", SIZES[size], className),
+      ...props
+    }
+  );
+}
+
+// src/button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex h-9 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md px-3 text-sm font-medium transition duration-200 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-muted text-foreground hover:bg-muted/80",
+        ghost: "hover:bg-muted",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-border bg-background hover:bg-muted"
+      },
+      size: {
+        sm: "h-8 px-2.5",
+        md: "h-9 px-3",
+        lg: "h-10 px-4",
+        icon: "h-9 w-9 px-0",
+        // Square, matching `sm`'s height — for an icon-only control sitting in
+        // a table row or beside `sm` buttons, where `icon` is a row taller.
+        "icon-sm": "h-8 w-8 px-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var ICON_SIZES = /* @__PURE__ */ new Set(["icon", "icon-sm"]);
+var Button = React.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    asChild = false,
+    loading,
+    disabled,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? import_react_slot.Slot : "button";
+    if (asChild) {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Comp,
+        {
+          ref,
+          className: cn(buttonVariants({ variant, size }), className),
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "button",
+      {
+        ref,
+        disabled: disabled || loading,
+        "aria-busy": loading || void 0,
+        className: cn(buttonVariants({ variant, size }), className),
+        ...props,
+        children: [
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, { size: "sm" }) : null,
+          loading && size != null && ICON_SIZES.has(size) ? null : children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/dialogLayer.ts
+var React2 = __toESM(require("react"), 1);
+var layers = [];
+var FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function isVisible(element) {
+  if (element.closest("[hidden]")) return false;
+  if (element.getAttribute("aria-hidden") === "true") return false;
+  return typeof element.checkVisibility === "function" ? element.checkVisibility() : true;
+}
+function focusableWithin(container) {
+  return Array.from(container.querySelectorAll(FOCUSABLE)).filter(
+    isVisible
+  );
+}
+function useDialogLayer({
+  active,
+  containerRef,
+  onEscape
+}) {
+  const escapeRef = React2.useRef(onEscape);
+  React2.useEffect(() => {
+    escapeRef.current = onEscape;
+  });
+  React2.useEffect(() => {
+    if (!active) return;
+    const layer = /* @__PURE__ */ Symbol("dialog-layer");
+    layers.push(layer);
+    const isTopLayer = () => layers[layers.length - 1] === layer;
+    const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    const container = containerRef.current;
+    if (container && !container.contains(document.activeElement)) {
+      const [first] = focusableWithin(container);
+      (container.hasAttribute("tabindex") ? container : first)?.focus();
+    }
+    function handleKeyDown(event) {
+      if (!isTopLayer()) return;
+      if (event.key === "Escape") {
+        escapeRef.current?.();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      const panel = containerRef.current;
+      if (!panel) return;
+      const items = focusableWithin(panel);
+      if (items.length === 0) {
+        event.preventDefault();
+        panel.focus();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active2 = document.activeElement;
+      const outside = !panel.contains(active2);
+      if (event.shiftKey && (active2 === first || outside)) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && (active2 === last || outside)) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = previousOverflow;
+      const index = layers.indexOf(layer);
+      if (index !== -1) layers.splice(index, 1);
+      if (previouslyFocused?.isConnected) previouslyFocused.focus();
+    };
+  }, [active, containerRef]);
+}
+
+// src/modal.tsx
+var React3 = __toESM(require("react"), 1);
+var import_react_dom = require("react-dom");
+var import_jsx_runtime3 = (
+  /*
+    `overflow-y-auto` on the overlay, `my-auto` on the panel — not
+    `items-center`. A flex item centred with `align-items` overflows equally
+    in both directions once it is taller than its container, and the half
+    above the top edge cannot be scrolled to: with the page behind it locked,
+    an over-tall dialog was simply unreachable at both ends. Auto margins
+    centre a short panel the same way and collapse to zero on a tall one,
+    which scrolls.
+  */
+  require("react/jsx-runtime")
+);
+var emptySubscribe = () => () => {
+};
+function useHasMounted() {
+  return React3.useSyncExternalStore(
+    emptySubscribe,
+    () => true,
+    () => false
+  );
+}
+
+// src/side-drawer.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function SideDrawer({
+  isOpen,
+  title,
+  onClose,
+  children,
+  panelClassName
+}) {
+  const mounted = useHasMounted();
+  const headingId = React4.useId();
+  const panelRef = React4.useRef(null);
+  useDialogLayer({
+    // Gated on `mounted` too: before that the panel is not rendered, so there
+    // would be nothing to move focus into.
+    active: isOpen && mounted,
+    containerRef: panelRef,
+    onEscape: onClose
+  });
+  if (!mounted || !isOpen) return null;
+  return (0, import_react_dom2.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "div",
+        {
+          "aria-hidden": true,
+          onClick: onClose,
+          className: "fixed inset-0 z-[90] bg-overlay/30"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "aside",
+        {
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": headingId,
+          tabIndex: -1,
+          className: cn(
+            "border-border bg-background fixed inset-y-0 right-0 z-[95] flex flex-col border-l shadow-2xl outline-none",
+            panelClassName ?? "w-full max-w-md"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "border-border flex items-center justify-between gap-3 border-b px-4 py-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { id: headingId, className: "truncate text-base font-semibold", children: title }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  "aria-label": "Close panel",
+                  onClick: onClose,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.X, { className: "h-4 w-4", "aria-hidden": true })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto p-4", children })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SideDrawer
+});
+//# sourceMappingURL=side-drawer.cjs.map