@gnome-ui/react 1.45.1 → 1.45.2

package/dist/components/Dropdown/Dropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.cjs","names":[],"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { Check, PanDown } from '@gnome-ui/icons';\nimport {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Icon } from '../Icon';\n\nimport styles from './Dropdown.module.css';\n\nexport interface DropdownOption<V extends string = string> {\n  /** The value submitted / returned on selection. */\n  value: V;\n  /** Display label shown in the list and trigger. */\n  label: string;\n  /** Optional descriptive text shown below the label. */\n  description?: string;\n  /** Whether the option is selectable. */\n  disabled?: boolean;\n}\n\nexport interface DropdownProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** The list of selectable options. */\n  options: DropdownOption<V>[];\n  /** The currently selected value. */\n  value?: V;\n  /** Called when the user selects an option. */\n  onChange?: (value: V) => void;\n  /** Placeholder shown when no option is selected. */\n  placeholder?: string;\n  /** Accessible label for the control (used as `aria-label`). */\n  'aria-label'?: string;\n  /** Disables the entire control. */\n  disabled?: boolean;\n}\n\n/**\n * Expandable option list following the Adwaita combo-row / drop-down pattern.\n *\n * - Fully keyboard-navigable: Space/Enter opens; ↑/↓ navigate; Enter selects; Escape closes.\n * - Uses `role=\"combobox\"` + `role=\"listbox\"` + `role=\"option\"` ARIA pattern.\n * - Closes when clicking outside or pressing Escape.\n * - The list flips above the trigger when there is not enough space below.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html\n */\nexport function Dropdown<V extends string = string>({\n  options,\n  value,\n  onChange,\n  placeholder = 'Select an option',\n  disabled,\n  className,\n  ...props\n}: DropdownProps<V>) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId = useId();\n  const listboxId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  // Compute flip direction when opening\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 48 + 8, 280);\n\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: DropdownOption<V>) => {\n      if (opt.disabled) {\n        return;\n      }\n\n      onChange?.(opt.value);\n      closeList();\n    },\n    [onChange, closeList],\n  );\n\n  // Scroll active item into view\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) {\n      return;\n    }\n\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n\n    item?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, open]);\n\n  // Close on outside click\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n\n    document.addEventListener('mousedown', handler);\n\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open, closeList]);\n\n  // Trigger keyboard handler\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n        case 'ArrowDown':\n          e.preventDefault();\n          openList();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(options.reduce((last, o, i) => (!o.disabled ? i : last), -1));\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\n  // Listbox keyboard handler\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case 'Home':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case 'End':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case 'Enter':\n        case ' ': {\n          e.preventDefault();\n          if (activeIndex >= 0) {\n            selectOption(options[activeIndex]);\n          }\n\n          break;\n        }\n        case 'Escape':\n        case 'Tab':\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList],\n  );\n\n  return (\n    <div className={[styles.wrapper, className].filter(Boolean).join(' ')} {...props}>\n      {/* Trigger button */}\n      <button\n        ref={triggerRef}\n        id={triggerId}\n        type=\"button\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={listboxId}\n        aria-activedescendant={\n          open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n        }\n        disabled={disabled}\n        className={[styles.trigger, open ? styles.triggerOpen : null].filter(Boolean).join(' ')}\n        onClick={() => (open ? closeList() : openList())}\n        onKeyDown={handleTriggerKeyDown}\n      >\n        <span\n          className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {selected?.label ?? placeholder}\n        </span>\n        <Icon\n          icon={PanDown}\n          size=\"md\"\n          aria-hidden\n          className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(' ')}\n        />\n      </button>\n\n      {/* Listbox */}\n      {open && (\n        <ul\n          ref={listRef}\n          id={listboxId}\n          role=\"listbox\"\n          aria-labelledby={triggerId}\n          tabIndex={-1}\n          className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n            .filter(Boolean)\n            .join(' ')}\n          onKeyDown={handleListKeyDown}\n        >\n          {options.map((opt, i) => (\n            <li\n              key={opt.value}\n              id={`${listboxId}-opt-${i}`}\n              role=\"option\"\n              aria-selected={opt.value === value}\n              aria-disabled={opt.disabled}\n              className={[\n                styles.option,\n                opt.value === value ? styles.optionSelected : null,\n                i === activeIndex ? styles.optionActive : null,\n                opt.disabled ? styles.optionDisabled : null,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n              onClick={() => selectOption(opt)}\n            >\n              <span className={styles.optionText}>\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.description && <span className={styles.optionDesc}>{opt.description}</span>}\n              </span>\n              {opt.value === value && (\n                <Icon icon={Check} size=\"md\" aria-hidden className={styles.checkIcon} />\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Dropdown.cjs","names":[],"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { Check, PanDown } from '@gnome-ui/icons';\nimport {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Icon } from '../Icon';\n\nimport styles from './Dropdown.module.css';\n\nexport interface DropdownOption<V extends string = string> {\n  /** The value submitted / returned on selection. */\n  value: V;\n  /** Display label shown in the list and trigger. */\n  label: string;\n  /** Optional descriptive text shown below the label. */\n  description?: string;\n  /** Whether the option is selectable. */\n  disabled?: boolean;\n}\n\nexport interface DropdownProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** The list of selectable options. */\n  options: DropdownOption<V>[];\n  /** The currently selected value. */\n  value?: V;\n  /** Called when the user selects an option. */\n  onChange?: (value: V) => void;\n  /** Placeholder shown when no option is selected. */\n  placeholder?: string;\n  /** Accessible label for the control (used as `aria-label`). */\n  'aria-label'?: string;\n  /** Disables the entire control. */\n  disabled?: boolean;\n}\n\n/**\n * Expandable option list following the Adwaita combo-row / drop-down pattern.\n *\n * - Fully keyboard-navigable: Space/Enter opens; ↑/↓ navigate; Enter selects; Escape closes.\n * - Uses `role=\"combobox\"` + `role=\"listbox\"` + `role=\"option\"` ARIA pattern.\n * - Closes when clicking outside or pressing Escape.\n * - The list flips above the trigger when there is not enough space below.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html\n */\nexport const Dropdown = <V extends string = string>({\n  options,\n  value,\n  onChange,\n  placeholder = 'Select an option',\n  disabled,\n  className,\n  ...props\n}: DropdownProps<V>) => {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId = useId();\n  const listboxId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  // Compute flip direction when opening\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 48 + 8, 280);\n\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: DropdownOption<V>) => {\n      if (opt.disabled) {\n        return;\n      }\n\n      onChange?.(opt.value);\n      closeList();\n    },\n    [onChange, closeList],\n  );\n\n  // Scroll active item into view\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) {\n      return;\n    }\n\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n\n    item?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, open]);\n\n  // Close on outside click\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n\n    document.addEventListener('mousedown', handler);\n\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open, closeList]);\n\n  // Trigger keyboard handler\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n        case 'ArrowDown':\n          e.preventDefault();\n          openList();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(options.reduce((last, o, i) => (!o.disabled ? i : last), -1));\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\n  // Listbox keyboard handler\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case 'Home':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case 'End':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case 'Enter':\n        case ' ': {\n          e.preventDefault();\n          if (activeIndex >= 0) {\n            selectOption(options[activeIndex]);\n          }\n\n          break;\n        }\n        case 'Escape':\n        case 'Tab':\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList],\n  );\n\n  return (\n    <div className={[styles.wrapper, className].filter(Boolean).join(' ')} {...props}>\n      {/* Trigger button */}\n      <button\n        ref={triggerRef}\n        id={triggerId}\n        type=\"button\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={listboxId}\n        aria-activedescendant={\n          open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n        }\n        disabled={disabled}\n        className={[styles.trigger, open ? styles.triggerOpen : null].filter(Boolean).join(' ')}\n        onClick={() => (open ? closeList() : openList())}\n        onKeyDown={handleTriggerKeyDown}\n      >\n        <span\n          className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {selected?.label ?? placeholder}\n        </span>\n        <Icon\n          icon={PanDown}\n          size=\"md\"\n          aria-hidden\n          className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(' ')}\n        />\n      </button>\n\n      {/* Listbox */}\n      {open && (\n        <ul\n          ref={listRef}\n          id={listboxId}\n          role=\"listbox\"\n          aria-labelledby={triggerId}\n          tabIndex={-1}\n          className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n            .filter(Boolean)\n            .join(' ')}\n          onKeyDown={handleListKeyDown}\n        >\n          {options.map((opt, i) => (\n            <li\n              key={opt.value}\n              id={`${listboxId}-opt-${i}`}\n              role=\"option\"\n              aria-selected={opt.value === value}\n              aria-disabled={opt.disabled}\n              className={[\n                styles.option,\n                opt.value === value ? styles.optionSelected : null,\n                i === activeIndex ? styles.optionActive : null,\n                opt.disabled ? styles.optionDisabled : null,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n              onClick={() => selectOption(opt)}\n            >\n              <span className={styles.optionText}>\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.description && <span className={styles.optionDesc}>{opt.description}</span>}\n              </span>\n              {opt.value === value && (\n                <Icon icon={Check} size=\"md\" aria-hidden className={styles.checkIcon} />\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Dropdown/Dropdown.d.ts

@@ -33,4 +33,4 @@ export interface DropdownProps<V extends string = string> extends Omit<HTMLAttri
  *
  * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html
  */
-export declare function Dropdown<V extends string = string>({ options, value, onChange, placeholder, disabled, className, ...props }: DropdownProps<V>): import("react/jsx-runtime").JSX.Element;
+export declare const Dropdown: <V extends string = string>({ options, value, onChange, placeholder, disabled, className, ...props }: DropdownProps<V>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Dropdown/Dropdown.js

@@ -4,7 +4,7 @@ import { useCallback as n, useEffect as r, useId as i, useRef as a, useState as
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
 import { Check as l, PanDown as u } from "@gnome-ui/icons";
 //#region src/components/Dropdown/Dropdown.tsx
-function d({ options: d, value: f, onChange: p, placeholder: m = "Select an option", disabled: h, className: g, ..._ }) {
+var d = ({ options: d, value: f, onChange: p, placeholder: m = "Select an option", disabled: h, className: g, ..._ }) => {
 	let [v, y] = o(!1), [b, x] = o(-1), [S, C] = o(!1), w = i(), T = i(), E = a(null), D = a(null), O = d.find((e) => e.value === f), k = n(() => {
 		if (!E.current) return;
 		let e = E.current.getBoundingClientRect(), t = window.innerHeight - e.bottom, n = Math.min(d.length * 48 + 8, 280);
@@ -151,7 +151,7 @@ function d({ options: d, value: f, onChange: p, placeholder: m = "Select an opti
 			}, n.value))
 		})]
 	});
-}
+};
 //#endregion
 export { d as Dropdown };
 

package/dist/components/Dropdown/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","names":[],"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { Check, PanDown } from '@gnome-ui/icons';\nimport {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Icon } from '../Icon';\n\nimport styles from './Dropdown.module.css';\n\nexport interface DropdownOption<V extends string = string> {\n  /** The value submitted / returned on selection. */\n  value: V;\n  /** Display label shown in the list and trigger. */\n  label: string;\n  /** Optional descriptive text shown below the label. */\n  description?: string;\n  /** Whether the option is selectable. */\n  disabled?: boolean;\n}\n\nexport interface DropdownProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** The list of selectable options. */\n  options: DropdownOption<V>[];\n  /** The currently selected value. */\n  value?: V;\n  /** Called when the user selects an option. */\n  onChange?: (value: V) => void;\n  /** Placeholder shown when no option is selected. */\n  placeholder?: string;\n  /** Accessible label for the control (used as `aria-label`). */\n  'aria-label'?: string;\n  /** Disables the entire control. */\n  disabled?: boolean;\n}\n\n/**\n * Expandable option list following the Adwaita combo-row / drop-down pattern.\n *\n * - Fully keyboard-navigable: Space/Enter opens; ↑/↓ navigate; Enter selects; Escape closes.\n * - Uses `role=\"combobox\"` + `role=\"listbox\"` + `role=\"option\"` ARIA pattern.\n * - Closes when clicking outside or pressing Escape.\n * - The list flips above the trigger when there is not enough space below.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html\n */\nexport function Dropdown<V extends string = string>({\n  options,\n  value,\n  onChange,\n  placeholder = 'Select an option',\n  disabled,\n  className,\n  ...props\n}: DropdownProps<V>) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId = useId();\n  const listboxId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  // Compute flip direction when opening\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 48 + 8, 280);\n\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: DropdownOption<V>) => {\n      if (opt.disabled) {\n        return;\n      }\n\n      onChange?.(opt.value);\n      closeList();\n    },\n    [onChange, closeList],\n  );\n\n  // Scroll active item into view\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) {\n      return;\n    }\n\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n\n    item?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, open]);\n\n  // Close on outside click\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n\n    document.addEventListener('mousedown', handler);\n\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open, closeList]);\n\n  // Trigger keyboard handler\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n        case 'ArrowDown':\n          e.preventDefault();\n          openList();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(options.reduce((last, o, i) => (!o.disabled ? i : last), -1));\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\n  // Listbox keyboard handler\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case 'Home':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case 'End':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case 'Enter':\n        case ' ': {\n          e.preventDefault();\n          if (activeIndex >= 0) {\n            selectOption(options[activeIndex]);\n          }\n\n          break;\n        }\n        case 'Escape':\n        case 'Tab':\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList],\n  );\n\n  return (\n    <div className={[styles.wrapper, className].filter(Boolean).join(' ')} {...props}>\n      {/* Trigger button */}\n      <button\n        ref={triggerRef}\n        id={triggerId}\n        type=\"button\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={listboxId}\n        aria-activedescendant={\n          open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n        }\n        disabled={disabled}\n        className={[styles.trigger, open ? styles.triggerOpen : null].filter(Boolean).join(' ')}\n        onClick={() => (open ? closeList() : openList())}\n        onKeyDown={handleTriggerKeyDown}\n      >\n        <span\n          className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {selected?.label ?? placeholder}\n        </span>\n        <Icon\n          icon={PanDown}\n          size=\"md\"\n          aria-hidden\n          className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(' ')}\n        />\n      </button>\n\n      {/* Listbox */}\n      {open && (\n        <ul\n          ref={listRef}\n          id={listboxId}\n          role=\"listbox\"\n          aria-labelledby={triggerId}\n          tabIndex={-1}\n          className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n            .filter(Boolean)\n            .join(' ')}\n          onKeyDown={handleListKeyDown}\n        >\n          {options.map((opt, i) => (\n            <li\n              key={opt.value}\n              id={`${listboxId}-opt-${i}`}\n              role=\"option\"\n              aria-selected={opt.value === value}\n              aria-disabled={opt.disabled}\n              className={[\n                styles.option,\n                opt.value === value ? styles.optionSelected : null,\n                i === activeIndex ? styles.optionActive : null,\n                opt.disabled ? styles.optionDisabled : null,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n              onClick={() => selectOption(opt)}\n            >\n              <span className={styles.optionText}>\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.description && <span className={styles.optionDesc}>{opt.description}</span>}\n              </span>\n              {opt.value === value && (\n                <Icon icon={Check} size=\"md\" aria-hidden className={styles.checkIcon} />\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAoDA,SAAgB,EAAoC,EAClD,YACA,UACA,aACA,iBAAc,oBACd,aACA,cACA,GAAG,KACgB;CACnB,IAAM,CAAC,GAAM,KAAW,EAAS,GAAM,EACjC,CAAC,GAAa,KAAkB,EAAiB,GAAG,EACpD,CAAC,GAAQ,KAAa,EAAS,GAAM,EAErC,IAAY,GAAO,EACnB,IAAY,GAAO,EACnB,IAAa,EAA0B,KAAK,EAC5C,IAAU,EAAyB,KAAK,EAExC,IAAW,EAAQ,MAAM,MAAM,EAAE,UAAU,EAAM,EAGjD,IAAc,QAAkB;AACpC,MAAI,CAAC,EAAW,QACd;EAGF,IAAM,IAAO,EAAW,QAAQ,uBAAuB,EACjD,IAAa,OAAO,cAAc,EAAK,QACvC,IAAQ,KAAK,IAAI,EAAQ,SAAS,KAAK,GAAG,IAAI;AAEpD,IAAU,IAAa,KAAS,EAAK,MAAM,EAAM;IAChD,CAAC,EAAQ,OAAO,CAAC,EAEd,IAAW,QAAkB;AACjC,MAAI,EACF;AAIF,EADA,GAAa,EACb,EAAQ,GAAK;EACb,IAAM,IAAM,EAAQ,WAAW,MAAM,EAAE,UAAU,KAAS,CAAC,EAAE,SAAS;AAEtE,IAAe,KAAO,IAAI,IAAM,EAAQ,WAAW,MAAM,CAAC,EAAE,SAAS,CAAC;IACrE;EAAC;EAAU;EAAa;EAAS;EAAM,CAAC,EAErC,IAAY,QAAkB;AAGlC,EAFA,EAAQ,GAAM,EACd,EAAe,GAAG,EAClB,EAAW,SAAS,OAAO;IAC1B,EAAE,CAAC,EAEA,IAAe,GAClB,MAA2B;AACtB,IAAI,aAIR,IAAW,EAAI,MAAM,EACrB,GAAW;IAEb,CAAC,GAAU,EAAU,CACtB;AAcD,CAXA,QAAgB;AACV,GAAC,KAAQ,IAAc,KAAK,CAAC,EAAQ,WAI5B,EAAQ,QAAQ,SAAS,IAEhC,eAAe,EAAE,OAAO,WAAW,CAAC;IACzC,CAAC,GAAa,EAAK,CAAC,EAGvB,QAAgB;AACd,MAAI,CAAC,EACH;EAGF,IAAM,KAAW,MAAkB;AACjC,GACE,CAAC,EAAW,SAAS,SAAS,EAAE,OAAe,IAC/C,CAAC,EAAQ,SAAS,SAAS,EAAE,OAAe,IAE5C,GAAW;;AAMf,SAFA,SAAS,iBAAiB,aAAa,EAAQ,QAElC,SAAS,oBAAoB,aAAa,EAAQ;IAC9D,CAAC,GAAM,EAAU,CAAC;CAGrB,IAAM,IAAuB,GAC1B,MAAwC;AACvC,UAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;GACL,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,GAAU;AACV;GACF,KAAK;AAIH,IAHA,EAAE,gBAAgB,EAClB,GAAa,EACb,EAAQ,GAAK,EACb,EAAe,EAAQ,QAAQ,GAAM,GAAG,MAAQ,EAAE,WAAe,IAAJ,GAAW,GAAG,CAAC;AAC5E;;IAGN;EAAC;EAAU;EAAa;EAAQ,CACjC,EAGK,IAAoB,GACvB,MAAuC;EACtC,IAAM,IAAiB,EACpB,KAAK,GAAG,OAAO;GAAE;GAAG;GAAG,EAAE,CACzB,QAAQ,EAAE,WAAQ,CAAC,EAAE,SAAS,CAC9B,KAAK,EAAE,WAAQ,EAAE,EAEd,IAAa,EAAe,QAAQ,EAAY;AAEtD,UAAQ,EAAE,KAAV;GACE,KAAK,aAAa;AAChB,MAAE,gBAAgB;IAClB,IAAM,IAAO,EAAe,KAAK,IAAI,IAAa,GAAG,EAAe,SAAS,EAAE;AAE/E,MAAe,KAAQ,EAAY;AACnC;;GAEF,KAAK,WAAW;AACd,MAAE,gBAAgB;IAClB,IAAM,IAAO,EAAe,KAAK,IAAI,IAAa,GAAG,EAAE;AAEvD,MAAe,KAAQ,EAAY;AACnC;;GAEF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,EAAe,EAAe,MAAM,GAAG;AACvC;GACF,KAAK;AAEH,IADA,EAAE,gBAAgB,EAClB,EAAe,EAAe,EAAe,SAAS,MAAM,GAAG;AAC/D;GACF,KAAK;GACL,KAAK;AAEH,IADA,EAAE,gBAAgB,EACd,KAAe,KACjB,EAAa,EAAQ,GAAa;AAGpC;GAEF,KAAK;GACL,KAAK;AACH,OAAW;AACX;;IAGN;EAAC;EAAS;EAAa;EAAc;EAAU,CAChD;AAED,QACE,kBAAC,OAAD;EAAK,WAAW,CAAC,EAAO,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAE,GAAI;YAA3E,CAEE,kBAAC,UAAD;GACE,KAAK;GACL,IAAI;GACJ,MAAK;GACL,MAAK;GACL,iBAAc;GACd,iBAAe;GACf,iBAAe;GACf,yBACE,KAAQ,KAAe,IAAI,GAAG,EAAU,OAAO,MAAgB,KAAA;GAEvD;GACV,WAAW,CAAC,EAAO,SAAS,IAAO,EAAO,cAAc,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;GACvF,eAAgB,IAAO,GAAW,GAAG,GAAU;GAC/C,WAAW;aAdb,CAgBE,kBAAC,QAAD;IACE,WAAW,CAAC,EAAO,cAAe,IAAgC,OAArB,EAAO,YAAmB,CACpE,OAAO,QAAQ,CACf,KAAK,IAAI;cAEX,GAAU,SAAS;IACf,CAAA,EACP,kBAAC,GAAD;IACE,MAAM;IACN,MAAK;IACL,eAAA;IACA,WAAW,CAAC,EAAO,SAAS,IAAO,EAAO,cAAc,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;IACvF,CAAA,CACK;MAGR,KACC,kBAAC,MAAD;GACE,KAAK;GACL,IAAI;GACJ,MAAK;GACL,mBAAiB;GACjB,UAAU;GACV,WAAW,CAAC,EAAO,MAAM,IAAS,EAAO,SAAS,EAAO,SAAS,CAC/D,OAAO,QAAQ,CACf,KAAK,IAAI;GACZ,WAAW;aAEV,EAAQ,KAAK,GAAK,MACjB,kBAAC,MAAD;IAEE,IAAI,GAAG,EAAU,OAAO;IACxB,MAAK;IACL,iBAAe,EAAI,UAAU;IAC7B,iBAAe,EAAI;IACnB,WAAW;KACT,EAAO;KACP,EAAI,UAAU,IAAQ,EAAO,iBAAiB;KAC9C,MAAM,IAAc,EAAO,eAAe;KAC1C,EAAI,WAAW,EAAO,iBAAiB;KACxC,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,oBAAoB,CAAC,EAAI,YAAY,EAAe,EAAE;IACtD,eAAe,EAAa,EAAI;cAflC,CAiBE,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAxB,CACE,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAc,EAAI;MAAa,CAAA,EACtD,EAAI,eAAe,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAa,EAAI;MAAmB,CAAA,CAC3E;QACN,EAAI,UAAU,KACb,kBAAC,GAAD;KAAM,MAAM;KAAO,MAAK;KAAK,eAAA;KAAY,WAAW,EAAO;KAAa,CAAA,CAEvE;MAvBE,EAAI,MAuBN,CACL;GACC,CAAA,CAEH"}
+{"version":3,"file":"Dropdown.js","names":[],"sources":["../../../src/components/Dropdown/Dropdown.tsx"],"sourcesContent":["import { Check, PanDown } from '@gnome-ui/icons';\nimport {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport { Icon } from '../Icon';\n\nimport styles from './Dropdown.module.css';\n\nexport interface DropdownOption<V extends string = string> {\n  /** The value submitted / returned on selection. */\n  value: V;\n  /** Display label shown in the list and trigger. */\n  label: string;\n  /** Optional descriptive text shown below the label. */\n  description?: string;\n  /** Whether the option is selectable. */\n  disabled?: boolean;\n}\n\nexport interface DropdownProps<V extends string = string>\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** The list of selectable options. */\n  options: DropdownOption<V>[];\n  /** The currently selected value. */\n  value?: V;\n  /** Called when the user selects an option. */\n  onChange?: (value: V) => void;\n  /** Placeholder shown when no option is selected. */\n  placeholder?: string;\n  /** Accessible label for the control (used as `aria-label`). */\n  'aria-label'?: string;\n  /** Disables the entire control. */\n  disabled?: boolean;\n}\n\n/**\n * Expandable option list following the Adwaita combo-row / drop-down pattern.\n *\n * - Fully keyboard-navigable: Space/Enter opens; ↑/↓ navigate; Enter selects; Escape closes.\n * - Uses `role=\"combobox\"` + `role=\"listbox\"` + `role=\"option\"` ARIA pattern.\n * - Closes when clicking outside or pressing Escape.\n * - The list flips above the trigger when there is not enough space below.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/drop-down-lists.html\n */\nexport const Dropdown = <V extends string = string>({\n  options,\n  value,\n  onChange,\n  placeholder = 'Select an option',\n  disabled,\n  className,\n  ...props\n}: DropdownProps<V>) => {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number>(-1);\n  const [flipUp, setFlipUp] = useState(false);\n\n  const triggerId = useId();\n  const listboxId = useId();\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const selected = options.find((o) => o.value === value);\n\n  // Compute flip direction when opening\n  const computeFlip = useCallback(() => {\n    if (!triggerRef.current) {\n      return;\n    }\n\n    const rect = triggerRef.current.getBoundingClientRect();\n    const spaceBelow = window.innerHeight - rect.bottom;\n    const listH = Math.min(options.length * 48 + 8, 280);\n\n    setFlipUp(spaceBelow < listH && rect.top > listH);\n  }, [options.length]);\n\n  const openList = useCallback(() => {\n    if (disabled) {\n      return;\n    }\n\n    computeFlip();\n    setOpen(true);\n    const idx = options.findIndex((o) => o.value === value && !o.disabled);\n\n    setActiveIndex(idx >= 0 ? idx : options.findIndex((o) => !o.disabled));\n  }, [disabled, computeFlip, options, value]);\n\n  const closeList = useCallback(() => {\n    setOpen(false);\n    setActiveIndex(-1);\n    triggerRef.current?.focus();\n  }, []);\n\n  const selectOption = useCallback(\n    (opt: DropdownOption<V>) => {\n      if (opt.disabled) {\n        return;\n      }\n\n      onChange?.(opt.value);\n      closeList();\n    },\n    [onChange, closeList],\n  );\n\n  // Scroll active item into view\n  useEffect(() => {\n    if (!open || activeIndex < 0 || !listRef.current) {\n      return;\n    }\n\n    const item = listRef.current.children[activeIndex] as HTMLElement | undefined;\n\n    item?.scrollIntoView({ block: 'nearest' });\n  }, [activeIndex, open]);\n\n  // Close on outside click\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const handler = (e: MouseEvent) => {\n      if (\n        !triggerRef.current?.contains(e.target as Node) &&\n        !listRef.current?.contains(e.target as Node)\n      ) {\n        closeList();\n      }\n    };\n\n    document.addEventListener('mousedown', handler);\n\n    return () => document.removeEventListener('mousedown', handler);\n  }, [open, closeList]);\n\n  // Trigger keyboard handler\n  const handleTriggerKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLButtonElement>) => {\n      switch (e.key) {\n        case 'Enter':\n        case ' ':\n        case 'ArrowDown':\n          e.preventDefault();\n          openList();\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          computeFlip();\n          setOpen(true);\n          setActiveIndex(options.reduce((last, o, i) => (!o.disabled ? i : last), -1));\n          break;\n      }\n    },\n    [openList, computeFlip, options],\n  );\n\n  // Listbox keyboard handler\n  const handleListKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLUListElement>) => {\n      const enabledIndexes = options\n        .map((o, i) => ({ o, i }))\n        .filter(({ o }) => !o.disabled)\n        .map(({ i }) => i);\n\n      const currentPos = enabledIndexes.indexOf(activeIndex);\n\n      switch (e.key) {\n        case 'ArrowDown': {\n          e.preventDefault();\n          const next = enabledIndexes[Math.min(currentPos + 1, enabledIndexes.length - 1)];\n\n          setActiveIndex(next ?? activeIndex);\n          break;\n        }\n        case 'ArrowUp': {\n          e.preventDefault();\n          const prev = enabledIndexes[Math.max(currentPos - 1, 0)];\n\n          setActiveIndex(prev ?? activeIndex);\n          break;\n        }\n        case 'Home':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[0] ?? -1);\n          break;\n        case 'End':\n          e.preventDefault();\n          setActiveIndex(enabledIndexes[enabledIndexes.length - 1] ?? -1);\n          break;\n        case 'Enter':\n        case ' ': {\n          e.preventDefault();\n          if (activeIndex >= 0) {\n            selectOption(options[activeIndex]);\n          }\n\n          break;\n        }\n        case 'Escape':\n        case 'Tab':\n          closeList();\n          break;\n      }\n    },\n    [options, activeIndex, selectOption, closeList],\n  );\n\n  return (\n    <div className={[styles.wrapper, className].filter(Boolean).join(' ')} {...props}>\n      {/* Trigger button */}\n      <button\n        ref={triggerRef}\n        id={triggerId}\n        type=\"button\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded={open}\n        aria-controls={listboxId}\n        aria-activedescendant={\n          open && activeIndex >= 0 ? `${listboxId}-opt-${activeIndex}` : undefined\n        }\n        disabled={disabled}\n        className={[styles.trigger, open ? styles.triggerOpen : null].filter(Boolean).join(' ')}\n        onClick={() => (open ? closeList() : openList())}\n        onKeyDown={handleTriggerKeyDown}\n      >\n        <span\n          className={[styles.triggerLabel, !selected ? styles.placeholder : null]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          {selected?.label ?? placeholder}\n        </span>\n        <Icon\n          icon={PanDown}\n          size=\"md\"\n          aria-hidden\n          className={[styles.chevron, open ? styles.chevronOpen : null].filter(Boolean).join(' ')}\n        />\n      </button>\n\n      {/* Listbox */}\n      {open && (\n        <ul\n          ref={listRef}\n          id={listboxId}\n          role=\"listbox\"\n          aria-labelledby={triggerId}\n          tabIndex={-1}\n          className={[styles.list, flipUp ? styles.listUp : styles.listDown]\n            .filter(Boolean)\n            .join(' ')}\n          onKeyDown={handleListKeyDown}\n        >\n          {options.map((opt, i) => (\n            <li\n              key={opt.value}\n              id={`${listboxId}-opt-${i}`}\n              role=\"option\"\n              aria-selected={opt.value === value}\n              aria-disabled={opt.disabled}\n              className={[\n                styles.option,\n                opt.value === value ? styles.optionSelected : null,\n                i === activeIndex ? styles.optionActive : null,\n                opt.disabled ? styles.optionDisabled : null,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onMouseEnter={() => !opt.disabled && setActiveIndex(i)}\n              onClick={() => selectOption(opt)}\n            >\n              <span className={styles.optionText}>\n                <span className={styles.optionLabel}>{opt.label}</span>\n                {opt.description && <span className={styles.optionDesc}>{opt.description}</span>}\n              </span>\n              {opt.value === value && (\n                <Icon icon={Check} size=\"md\" aria-hidden className={styles.checkIcon} />\n              )}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Dropdown/Dropdown.module.css.cjs

@@ -1,2 +1,2 @@
-var e=`_wrapper_15m1u_3`,t=`_trigger_15m1u_11`,n=`_triggerOpen_15m1u_63`,r=`_triggerLabel_15m1u_73`,i=`_placeholder_15m1u_81`,a=`_chevron_15m1u_87`,o=`_chevronOpen_15m1u_94`,s=`_list_15m1u_100`,c=`_listDown_15m1u_137`,l=`_listUp_15m1u_141`,u=`_option_15m1u_161`,d=`_optionActive_15m1u_178`,f=`_optionSelected_15m1u_182`,p=`_optionDisabled_15m1u_186`,m=`_optionText_15m1u_194`,h=`_optionLabel_15m1u_202`,g=`_optionDesc_15m1u_208`,_=`_checkIcon_15m1u_218`,v={wrapper:e,trigger:t,triggerOpen:n,triggerLabel:r,placeholder:i,chevron:a,chevronOpen:o,list:s,"list-in":`_list-in_15m1u_1`,listDown:c,listUp:l,"list-in-up":`_list-in-up_15m1u_1`,option:u,optionActive:d,optionSelected:f,optionDisabled:p,optionText:m,optionLabel:h,optionDesc:g,checkIcon:_};exports.default=v;
+var e={wrapper:`_wrapper_15m1u_3`,trigger:`_trigger_15m1u_11`,triggerOpen:`_triggerOpen_15m1u_63`,triggerLabel:`_triggerLabel_15m1u_73`,placeholder:`_placeholder_15m1u_81`,chevron:`_chevron_15m1u_87`,chevronOpen:`_chevronOpen_15m1u_94`,list:`_list_15m1u_100`,"list-in":`_list-in_15m1u_1`,listDown:`_listDown_15m1u_137`,listUp:`_listUp_15m1u_141`,"list-in-up":`_list-in-up_15m1u_1`,option:`_option_15m1u_161`,optionActive:`_optionActive_15m1u_178`,optionSelected:`_optionSelected_15m1u_182`,optionDisabled:`_optionDisabled_15m1u_186`,optionText:`_optionText_15m1u_194`,optionLabel:`_optionLabel_15m1u_202`,optionDesc:`_optionDesc_15m1u_208`,checkIcon:`_checkIcon_15m1u_218`};exports.default=e;
 //# sourceMappingURL=Dropdown.module.css.cjs.map

package/dist/components/Dropdown/Dropdown.module.css.js

@@ -1,27 +1,26 @@
-//#region src/components/Dropdown/Dropdown.module.css
-var e = "_wrapper_15m1u_3", t = "_trigger_15m1u_11", n = "_triggerOpen_15m1u_63", r = "_triggerLabel_15m1u_73", i = "_placeholder_15m1u_81", a = "_chevron_15m1u_87", o = "_chevronOpen_15m1u_94", s = "_list_15m1u_100", c = "_listDown_15m1u_137", l = "_listUp_15m1u_141", u = "_option_15m1u_161", d = "_optionActive_15m1u_178", f = "_optionSelected_15m1u_182", p = "_optionDisabled_15m1u_186", m = "_optionText_15m1u_194", h = "_optionLabel_15m1u_202", g = "_optionDesc_15m1u_208", _ = "_checkIcon_15m1u_218", v = {
-	wrapper: e,
-	trigger: t,
-	triggerOpen: n,
-	triggerLabel: r,
-	placeholder: i,
-	chevron: a,
-	chevronOpen: o,
-	list: s,
+var e = {
+	wrapper: "_wrapper_15m1u_3",
+	trigger: "_trigger_15m1u_11",
+	triggerOpen: "_triggerOpen_15m1u_63",
+	triggerLabel: "_triggerLabel_15m1u_73",
+	placeholder: "_placeholder_15m1u_81",
+	chevron: "_chevron_15m1u_87",
+	chevronOpen: "_chevronOpen_15m1u_94",
+	list: "_list_15m1u_100",
 	"list-in": "_list-in_15m1u_1",
-	listDown: c,
-	listUp: l,
+	listDown: "_listDown_15m1u_137",
+	listUp: "_listUp_15m1u_141",
 	"list-in-up": "_list-in-up_15m1u_1",
-	option: u,
-	optionActive: d,
-	optionSelected: f,
-	optionDisabled: p,
-	optionText: m,
-	optionLabel: h,
-	optionDesc: g,
-	checkIcon: _
+	option: "_option_15m1u_161",
+	optionActive: "_optionActive_15m1u_178",
+	optionSelected: "_optionSelected_15m1u_182",
+	optionDisabled: "_optionDisabled_15m1u_186",
+	optionText: "_optionText_15m1u_194",
+	optionLabel: "_optionLabel_15m1u_202",
+	optionDesc: "_optionDesc_15m1u_208",
+	checkIcon: "_checkIcon_15m1u_218"
 };
 //#endregion
-export { v as default };
+export { e as default };
 
 //# sourceMappingURL=Dropdown.module.css.js.map

package/dist/components/Dropdown.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Dropdown/Dropdown.cjs`);exports.Dropdown=e.Dropdown;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./Dropdown/Dropdown.cjs");exports.Dropdown=e.Dropdown;

package/dist/components/EntryRow/EntryRow.cjs

@@ -1,2 +1,2 @@
-const e=require(`./EntryRow.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);function r({title:r,value:i,defaultValue:a=``,onValueChange:o,leading:s,trailing:c,disabled:l,className:u,id:d,onChange:f,...p}){let m=(0,t.useId)(),h=d??m,g=i!==void 0,[_,v]=(0,t.useState)(String(a)),y=g?String(i):_,[b,x]=(0,t.useState)(!1),S=(0,t.useRef)(null),C=b||y.length>0;return(0,n.jsxs)(`div`,{className:[e.default.row,b?e.default.focused:null,l?e.default.disabled:null,u].filter(Boolean).join(` `),onClick:()=>S.current?.focus(),children:[s&&(0,n.jsx)(`span`,{className:e.default.leading,children:s}),(0,n.jsxs)(`span`,{className:e.default.fieldWrap,children:[(0,n.jsx)(`label`,{htmlFor:h,className:[e.default.label,C?e.default.labelFloated:null].filter(Boolean).join(` `),children:r}),(0,n.jsx)(`input`,{ref:S,id:h,className:[e.default.input,C?e.default.inputFloated:null].filter(Boolean).join(` `),value:y,disabled:l,onFocus:()=>x(!0),onBlur:()=>x(!1),onChange:e=>{g||v(e.target.value),o?.(e.target.value),f?.(e)},...p})]}),c&&(0,n.jsx)(`span`,{className:e.default.trailing,children:c})]})}exports.EntryRow=r;
+const e=require("./EntryRow.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=({title:r,value:i,defaultValue:a=``,onValueChange:o,leading:s,trailing:c,disabled:l,className:u,id:d,onChange:f,...p})=>{let m=(0,t.useId)(),h=d??m,g=i!==void 0,[_,v]=(0,t.useState)(String(a)),y=g?String(i):_,[b,x]=(0,t.useState)(!1),S=(0,t.useRef)(null),C=b||y.length>0;return(0,n.jsxs)(`div`,{className:[e.default.row,b?e.default.focused:null,l?e.default.disabled:null,u].filter(Boolean).join(` `),onClick:()=>S.current?.focus(),children:[s&&(0,n.jsx)(`span`,{className:e.default.leading,children:s}),(0,n.jsxs)(`span`,{className:e.default.fieldWrap,children:[(0,n.jsx)(`label`,{htmlFor:h,className:[e.default.label,C?e.default.labelFloated:null].filter(Boolean).join(` `),children:r}),(0,n.jsx)(`input`,{ref:S,id:h,className:[e.default.input,C?e.default.inputFloated:null].filter(Boolean).join(` `),value:y,disabled:l,onFocus:()=>x(!0),onBlur:()=>x(!1),onChange:e=>{g||v(e.target.value),o?.(e.target.value),f?.(e)},...p})]}),c&&(0,n.jsx)(`span`,{className:e.default.trailing,children:c})]})};exports.EntryRow=r;
 //# sourceMappingURL=EntryRow.cjs.map

package/dist/components/EntryRow/EntryRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EntryRow.cjs","names":[],"sources":["../../../src/components/EntryRow/EntryRow.tsx"],"sourcesContent":["import {\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './EntryRow.module.css';\n\nexport interface EntryRowProps extends InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Acts as a floating label: shown small above the input when the field has\n   * content or focus, shown as a placeholder when empty and unfocused.\n   */\n  title: string;\n  /** Called when the input value changes. */\n  onValueChange?: (value: string) => void;\n  /** Icon or widget placed at the leading edge. */\n  leading?: ReactNode;\n  /** Icon or widget placed at the trailing edge (e.g. a clear button, copy button). */\n  trailing?: ReactNode;\n}\n\n/**\n * Row with an inline text entry field.\n *\n * Mirrors `AdwEntryRow` — the `title` floats up as a small label when the\n * field is focused or has content, acting as a placeholder when empty and\n * unfocused. Use inside a `BoxedList` for inline settings that require text input.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.EntryRow.html\n */\nexport function EntryRow({\n  title,\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  leading,\n  trailing,\n  disabled,\n  className,\n  id: externalId,\n  onChange,\n  ...props\n}: EntryRowProps) {\n  const generatedId = useId();\n  const inputId = externalId ?? generatedId;\n\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(String(defaultValue));\n  const inputValue = isControlled ? String(controlledValue) : uncontrolledValue;\n\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const floated = focused || inputValue.length > 0;\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setUncontrolledValue(e.target.value);\n    }\n\n    onValueChange?.(e.target.value);\n    onChange?.(e);\n  };\n\n  return (\n    <div\n      className={[\n        styles.row,\n        focused ? styles.focused : null,\n        disabled ? styles.disabled : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={() => inputRef.current?.focus()}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.fieldWrap}>\n        <label\n          htmlFor={inputId}\n          className={[styles.label, floated ? styles.labelFloated : null].filter(Boolean).join(' ')}\n        >\n          {title}\n        </label>\n        <input\n          ref={inputRef}\n          id={inputId}\n          className={[styles.input, floated ? styles.inputFloated : null].filter(Boolean).join(' ')}\n          value={inputValue}\n          disabled={disabled}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          onChange={handleChange}\n          {...props}\n        />\n      </span>\n\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </div>\n  );\n}\n"],"mappings":"mGAkCA,SAAgB,EAAS,CACvB,QACA,MAAO,EACP,eAAe,GACf,gBACA,UACA,WACA,WACA,YACA,GAAI,EACJ,WACA,GAAG,GACa,CAChB,IAAM,GAAA,EAAA,EAAA,QAAqB,CACrB,EAAU,GAAc,EAExB,EAAe,IAAoB,IAAA,GACnC,CAAC,EAAmB,IAAA,EAAA,EAAA,UAAiC,OAAO,EAAa,CAAC,CAC1E,EAAa,EAAe,OAAO,EAAgB,CAAG,EAEtD,CAAC,EAAS,IAAA,EAAA,EAAA,UAAuB,GAAM,CACvC,GAAA,EAAA,EAAA,QAAoC,KAAK,CAEzC,EAAU,GAAW,EAAW,OAAS,EAW/C,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,IACP,EAAU,EAAA,QAAO,QAAU,KAC3B,EAAW,EAAA,QAAO,SAAW,KAC7B,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,YAAe,EAAS,SAAS,OAAO,UAT1C,CAWG,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,EAAe,CAAA,EAE7D,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAxB,EACE,EAAA,EAAA,KAAC,QAAD,CACE,QAAS,EACT,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,EAAA,QAAO,aAAe,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,UAExF,EACK,CAAA,EACR,EAAA,EAAA,KAAC,QAAD,CACE,IAAK,EACL,GAAI,EACJ,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,EAAA,QAAO,aAAe,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CACzF,MAAO,EACG,WACV,YAAe,EAAW,GAAK,CAC/B,WAAc,EAAW,GAAM,CAC/B,SAtCc,GAAqC,CACpD,GACH,EAAqB,EAAE,OAAO,MAAM,CAGtC,IAAgB,EAAE,OAAO,MAAM,CAC/B,IAAW,EAAE,EAiCP,GAAI,EACJ,CAAA,CACG,GAEN,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,CAC5D"}
+{"version":3,"file":"EntryRow.cjs","names":[],"sources":["../../../src/components/EntryRow/EntryRow.tsx"],"sourcesContent":["import {\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './EntryRow.module.css';\n\nexport interface EntryRowProps extends InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Acts as a floating label: shown small above the input when the field has\n   * content or focus, shown as a placeholder when empty and unfocused.\n   */\n  title: string;\n  /** Called when the input value changes. */\n  onValueChange?: (value: string) => void;\n  /** Icon or widget placed at the leading edge. */\n  leading?: ReactNode;\n  /** Icon or widget placed at the trailing edge (e.g. a clear button, copy button). */\n  trailing?: ReactNode;\n}\n\n/**\n * Row with an inline text entry field.\n *\n * Mirrors `AdwEntryRow` — the `title` floats up as a small label when the\n * field is focused or has content, acting as a placeholder when empty and\n * unfocused. Use inside a `BoxedList` for inline settings that require text input.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.EntryRow.html\n */\nexport const EntryRow = ({\n  title,\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  leading,\n  trailing,\n  disabled,\n  className,\n  id: externalId,\n  onChange,\n  ...props\n}: EntryRowProps) => {\n  const generatedId = useId();\n  const inputId = externalId ?? generatedId;\n\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(String(defaultValue));\n  const inputValue = isControlled ? String(controlledValue) : uncontrolledValue;\n\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const floated = focused || inputValue.length > 0;\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setUncontrolledValue(e.target.value);\n    }\n\n    onValueChange?.(e.target.value);\n    onChange?.(e);\n  };\n\n  return (\n    <div\n      className={[\n        styles.row,\n        focused ? styles.focused : null,\n        disabled ? styles.disabled : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={() => inputRef.current?.focus()}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.fieldWrap}>\n        <label\n          htmlFor={inputId}\n          className={[styles.label, floated ? styles.labelFloated : null].filter(Boolean).join(' ')}\n        >\n          {title}\n        </label>\n        <input\n          ref={inputRef}\n          id={inputId}\n          className={[styles.input, floated ? styles.inputFloated : null].filter(Boolean).join(' ')}\n          value={inputValue}\n          disabled={disabled}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          onChange={handleChange}\n          {...props}\n        />\n      </span>\n\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </div>\n  );\n};\n"],"mappings":"mGAkCA,IAAa,GAAY,CACvB,QACA,MAAO,EACP,eAAe,GACf,gBACA,UACA,WACA,WACA,YACA,GAAI,EACJ,WACA,GAAG,KACgB,CACnB,IAAM,GAAA,EAAA,EAAA,OAAoB,EACpB,EAAU,GAAc,EAExB,EAAe,IAAoB,IAAA,GACnC,CAAC,EAAmB,IAAA,EAAA,EAAA,UAAiC,OAAO,CAAY,CAAC,EACzE,EAAa,EAAe,OAAO,CAAe,EAAI,EAEtD,CAAC,EAAS,IAAA,EAAA,EAAA,UAAuB,EAAK,EACtC,GAAA,EAAA,EAAA,QAAoC,IAAI,EAExC,EAAU,GAAW,EAAW,OAAS,EAW/C,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,IACP,EAAU,EAAA,QAAO,QAAU,KAC3B,EAAW,EAAA,QAAO,SAAW,KAC7B,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,YAAe,EAAS,SAAS,MAAM,WATzC,CAWG,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,CAAc,CAAA,GAE5D,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,mBAAxB,EACE,EAAA,EAAA,KAAC,QAAD,CACE,QAAS,EACT,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,EAAA,QAAO,aAAe,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,WAEvF,CACI,CAAA,GACP,EAAA,EAAA,KAAC,QAAD,CACE,IAAK,EACL,GAAI,EACJ,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,EAAA,QAAO,aAAe,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACxF,MAAO,EACG,WACV,YAAe,EAAW,EAAI,EAC9B,WAAc,EAAW,EAAK,EAC9B,SAtCc,GAAqC,CACpD,GACH,EAAqB,EAAE,OAAO,KAAK,EAGrC,IAAgB,EAAE,OAAO,KAAK,EAC9B,IAAW,CAAC,CACd,EAgCQ,GAAI,CACL,CAAA,CACG,IAEL,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,CAAe,CAAA,CAC5D,GAET"}

package/dist/components/EntryRow/EntryRow.d.ts

@@ -21,4 +21,4 @@ export interface EntryRowProps extends InputHTMLAttributes<HTMLInputElement> {
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.EntryRow.html
  */
-export declare function EntryRow({ title, value: controlledValue, defaultValue, onValueChange, leading, trailing, disabled, className, id: externalId, onChange, ...props }: EntryRowProps): import("react/jsx-runtime").JSX.Element;
+export declare const EntryRow: ({ title, value: controlledValue, defaultValue, onValueChange, leading, trailing, disabled, className, id: externalId, onChange, ...props }: EntryRowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/EntryRow/EntryRow.js

@@ -2,7 +2,7 @@ import e from "./EntryRow.module.css.js";
 import { useId as t, useRef as n, useState as r } from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/EntryRow/EntryRow.tsx
-function o({ title: o, value: s, defaultValue: c = "", onValueChange: l, leading: u, trailing: d, disabled: f, className: p, id: m, onChange: h, ...g }) {
+var o = ({ title: o, value: s, defaultValue: c = "", onValueChange: l, leading: u, trailing: d, disabled: f, className: p, id: m, onChange: h, ...g }) => {
 	let _ = t(), v = m ?? _, y = s !== void 0, [b, x] = r(String(c)), S = y ? String(s) : b, [C, w] = r(!1), T = n(null), E = C || S.length > 0;
 	return /* @__PURE__ */ a("div", {
 		className: [
@@ -43,7 +43,7 @@ function o({ title: o, value: s, defaultValue: c = "", onValueChange: l, leading
 			})
 		]
 	});
-}
+};
 //#endregion
 export { o as EntryRow };
 

package/dist/components/EntryRow/EntryRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntryRow.js","names":[],"sources":["../../../src/components/EntryRow/EntryRow.tsx"],"sourcesContent":["import {\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './EntryRow.module.css';\n\nexport interface EntryRowProps extends InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Acts as a floating label: shown small above the input when the field has\n   * content or focus, shown as a placeholder when empty and unfocused.\n   */\n  title: string;\n  /** Called when the input value changes. */\n  onValueChange?: (value: string) => void;\n  /** Icon or widget placed at the leading edge. */\n  leading?: ReactNode;\n  /** Icon or widget placed at the trailing edge (e.g. a clear button, copy button). */\n  trailing?: ReactNode;\n}\n\n/**\n * Row with an inline text entry field.\n *\n * Mirrors `AdwEntryRow` — the `title` floats up as a small label when the\n * field is focused or has content, acting as a placeholder when empty and\n * unfocused. Use inside a `BoxedList` for inline settings that require text input.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.EntryRow.html\n */\nexport function EntryRow({\n  title,\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  leading,\n  trailing,\n  disabled,\n  className,\n  id: externalId,\n  onChange,\n  ...props\n}: EntryRowProps) {\n  const generatedId = useId();\n  const inputId = externalId ?? generatedId;\n\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(String(defaultValue));\n  const inputValue = isControlled ? String(controlledValue) : uncontrolledValue;\n\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const floated = focused || inputValue.length > 0;\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setUncontrolledValue(e.target.value);\n    }\n\n    onValueChange?.(e.target.value);\n    onChange?.(e);\n  };\n\n  return (\n    <div\n      className={[\n        styles.row,\n        focused ? styles.focused : null,\n        disabled ? styles.disabled : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={() => inputRef.current?.focus()}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.fieldWrap}>\n        <label\n          htmlFor={inputId}\n          className={[styles.label, floated ? styles.labelFloated : null].filter(Boolean).join(' ')}\n        >\n          {title}\n        </label>\n        <input\n          ref={inputRef}\n          id={inputId}\n          className={[styles.input, floated ? styles.inputFloated : null].filter(Boolean).join(' ')}\n          value={inputValue}\n          disabled={disabled}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          onChange={handleChange}\n          {...props}\n        />\n      </span>\n\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </div>\n  );\n}\n"],"mappings":";;;;AAkCA,SAAgB,EAAS,EACvB,UACA,OAAO,GACP,kBAAe,IACf,kBACA,YACA,aACA,aACA,cACA,IAAI,GACJ,aACA,GAAG,KACa;CAChB,IAAM,IAAc,GAAO,EACrB,IAAU,KAAc,GAExB,IAAe,MAAoB,KAAA,GACnC,CAAC,GAAmB,KAAwB,EAAS,OAAO,EAAa,CAAC,EAC1E,IAAa,IAAe,OAAO,EAAgB,GAAG,GAEtD,CAAC,GAAS,KAAc,EAAS,GAAM,EACvC,IAAW,EAAyB,KAAK,EAEzC,IAAU,KAAW,EAAW,SAAS;AAW/C,QACE,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,IAAU,EAAO,UAAU;GAC3B,IAAW,EAAO,WAAW;GAC7B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,eAAe,EAAS,SAAS,OAAO;YAT1C;GAWG,KAAW,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAU;IAAe,CAAA;GAE7D,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,SAAD;KACE,SAAS;KACT,WAAW,CAAC,EAAO,OAAO,IAAU,EAAO,eAAe,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;eAExF;KACK,CAAA,EACR,kBAAC,SAAD;KACE,KAAK;KACL,IAAI;KACJ,WAAW,CAAC,EAAO,OAAO,IAAU,EAAO,eAAe,KAAK,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;KACzF,OAAO;KACG;KACV,eAAe,EAAW,GAAK;KAC/B,cAAc,EAAW,GAAM;KAC/B,WAtCc,MAAqC;AAMzD,MALK,KACH,EAAqB,EAAE,OAAO,MAAM,EAGtC,IAAgB,EAAE,OAAO,MAAM,EAC/B,IAAW,EAAE;;KAiCP,GAAI;KACJ,CAAA,CACG;;GAEN,KAAY,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAW;IAAgB,CAAA;GAC5D"}
+{"version":3,"file":"EntryRow.js","names":[],"sources":["../../../src/components/EntryRow/EntryRow.tsx"],"sourcesContent":["import {\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  useId,\n  useRef,\n  useState,\n} from 'react';\n\nimport styles from './EntryRow.module.css';\n\nexport interface EntryRowProps extends InputHTMLAttributes<HTMLInputElement> {\n  /**\n   * Acts as a floating label: shown small above the input when the field has\n   * content or focus, shown as a placeholder when empty and unfocused.\n   */\n  title: string;\n  /** Called when the input value changes. */\n  onValueChange?: (value: string) => void;\n  /** Icon or widget placed at the leading edge. */\n  leading?: ReactNode;\n  /** Icon or widget placed at the trailing edge (e.g. a clear button, copy button). */\n  trailing?: ReactNode;\n}\n\n/**\n * Row with an inline text entry field.\n *\n * Mirrors `AdwEntryRow` — the `title` floats up as a small label when the\n * field is focused or has content, acting as a placeholder when empty and\n * unfocused. Use inside a `BoxedList` for inline settings that require text input.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.EntryRow.html\n */\nexport const EntryRow = ({\n  title,\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  leading,\n  trailing,\n  disabled,\n  className,\n  id: externalId,\n  onChange,\n  ...props\n}: EntryRowProps) => {\n  const generatedId = useId();\n  const inputId = externalId ?? generatedId;\n\n  const isControlled = controlledValue !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(String(defaultValue));\n  const inputValue = isControlled ? String(controlledValue) : uncontrolledValue;\n\n  const [focused, setFocused] = useState(false);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const floated = focused || inputValue.length > 0;\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (!isControlled) {\n      setUncontrolledValue(e.target.value);\n    }\n\n    onValueChange?.(e.target.value);\n    onChange?.(e);\n  };\n\n  return (\n    <div\n      className={[\n        styles.row,\n        focused ? styles.focused : null,\n        disabled ? styles.disabled : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onClick={() => inputRef.current?.focus()}\n    >\n      {leading && <span className={styles.leading}>{leading}</span>}\n\n      <span className={styles.fieldWrap}>\n        <label\n          htmlFor={inputId}\n          className={[styles.label, floated ? styles.labelFloated : null].filter(Boolean).join(' ')}\n        >\n          {title}\n        </label>\n        <input\n          ref={inputRef}\n          id={inputId}\n          className={[styles.input, floated ? styles.inputFloated : null].filter(Boolean).join(' ')}\n          value={inputValue}\n          disabled={disabled}\n          onFocus={() => setFocused(true)}\n          onBlur={() => setFocused(false)}\n          onChange={handleChange}\n          {...props}\n        />\n      </span>\n\n      {trailing && <span className={styles.trailing}>{trailing}</span>}\n    </div>\n  );\n};\n"],"mappings":";;;;AAkCA,IAAa,KAAY,EACvB,UACA,OAAO,GACP,kBAAe,IACf,kBACA,YACA,aACA,aACA,cACA,IAAI,GACJ,aACA,GAAG,QACgB;CACnB,IAAM,IAAc,EAAM,GACpB,IAAU,KAAc,GAExB,IAAe,MAAoB,KAAA,GACnC,CAAC,GAAmB,KAAwB,EAAS,OAAO,CAAY,CAAC,GACzE,IAAa,IAAe,OAAO,CAAe,IAAI,GAEtD,CAAC,GAAS,KAAc,EAAS,EAAK,GACtC,IAAW,EAAyB,IAAI,GAExC,IAAU,KAAW,EAAW,SAAS;CAW/C,OACE,kBAAC,OAAD;EACE,WAAW;GACT,EAAO;GACP,IAAU,EAAO,UAAU;GAC3B,IAAW,EAAO,WAAW;GAC7B;EACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;EACX,eAAe,EAAS,SAAS,MAAM;YATzC;GAWG,KAAW,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAU;GAAc,CAAA;GAE5D,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAxB,CACE,kBAAC,SAAD;KACE,SAAS;KACT,WAAW,CAAC,EAAO,OAAO,IAAU,EAAO,eAAe,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;eAEvF;IACI,CAAA,GACP,kBAAC,SAAD;KACE,KAAK;KACL,IAAI;KACJ,WAAW,CAAC,EAAO,OAAO,IAAU,EAAO,eAAe,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;KACxF,OAAO;KACG;KACV,eAAe,EAAW,EAAI;KAC9B,cAAc,EAAW,EAAK;KAC9B,WAtCc,MAAqC;MAMzD,AALK,KACH,EAAqB,EAAE,OAAO,KAAK,GAGrC,IAAgB,EAAE,OAAO,KAAK,GAC9B,IAAW,CAAC;KACd;KAgCQ,GAAI;IACL,CAAA,CACG;;GAEL,KAAY,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAW;GAAe,CAAA;EAC5D;;AAET"}

package/dist/components/EntryRow.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./EntryRow/EntryRow.cjs`);exports.EntryRow=e.EntryRow;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./EntryRow/EntryRow.cjs");exports.EntryRow=e.EntryRow;

package/dist/components/ExpanderRow/ExpanderRow.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Separator/Separator.cjs`),t=require(`./ExpanderRow.module.css.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);function i({title:i,subtitle:a,leading:o,trailing:s,children:c,expanded:l,defaultExpanded:u=!1,onExpandedChange:d,className:f,...p}){let m=l!==void 0,[h,g]=(0,n.useState)(u),_=m?l:h,v=(0,n.useId)(),y=(0,n.useId)(),b=()=>{let e=!_;m||g(e),d?.(e)},x=n.Children.toArray(c).filter(Boolean);return(0,r.jsxs)(`div`,{className:[t.default.expanderRow,_?t.default.expanded:null,f].filter(Boolean).join(` `),...p,children:[(0,r.jsxs)(`button`,{id:y,className:t.default.header,"aria-expanded":_,"aria-controls":v,onClick:b,children:[o&&(0,r.jsx)(`span`,{className:t.default.leading,children:o}),(0,r.jsxs)(`span`,{className:t.default.content,children:[(0,r.jsx)(`span`,{className:t.default.title,children:i}),a&&(0,r.jsx)(`span`,{className:t.default.subtitle,children:a})]}),s&&(0,r.jsx)(`span`,{className:t.default.trailing,children:s}),(0,r.jsx)(`span`,{className:[t.default.chevronWrap,_?t.default.chevronOpen:null].filter(Boolean).join(` `),"aria-hidden":`true`,children:(0,r.jsx)(`svg`,{className:t.default.chevron,width:`16`,height:`16`,viewBox:`0 0 16 16`,focusable:`false`,children:(0,r.jsx)(`path`,{d:`M4 6l4 4 4-4`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})})})]}),(0,r.jsx)(`div`,{id:v,role:`region`,"aria-labelledby":y,className:t.default.panel,children:(0,r.jsx)(`div`,{className:t.default.panelInner,children:x.map((n,i)=>(0,r.jsxs)(`div`,{className:t.default.childItem,children:[(0,r.jsx)(e.Separator,{"aria-hidden":`true`}),n]},i))})})]})}exports.ExpanderRow=i;
+const e=require("../Separator/Separator.cjs"),t=require("./ExpanderRow.module.css.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=({title:i,subtitle:a,leading:o,trailing:s,children:c,expanded:l,defaultExpanded:u=!1,onExpandedChange:d,className:f,...p})=>{let m=l!==void 0,[h,g]=(0,n.useState)(u),_=m?l:h,v=(0,n.useId)(),y=(0,n.useId)(),b=()=>{let e=!_;m||g(e),d?.(e)},x=n.Children.toArray(c).filter(Boolean);return(0,r.jsxs)(`div`,{className:[t.default.expanderRow,_?t.default.expanded:null,f].filter(Boolean).join(` `),...p,children:[(0,r.jsxs)(`button`,{id:y,className:t.default.header,"aria-expanded":_,"aria-controls":v,onClick:b,children:[o&&(0,r.jsx)(`span`,{className:t.default.leading,children:o}),(0,r.jsxs)(`span`,{className:t.default.content,children:[(0,r.jsx)(`span`,{className:t.default.title,children:i}),a&&(0,r.jsx)(`span`,{className:t.default.subtitle,children:a})]}),s&&(0,r.jsx)(`span`,{className:t.default.trailing,children:s}),(0,r.jsx)(`span`,{className:[t.default.chevronWrap,_?t.default.chevronOpen:null].filter(Boolean).join(` `),"aria-hidden":`true`,children:(0,r.jsx)(`svg`,{className:t.default.chevron,width:`16`,height:`16`,viewBox:`0 0 16 16`,focusable:`false`,children:(0,r.jsx)(`path`,{d:`M4 6l4 4 4-4`,fill:`none`,stroke:`currentColor`,strokeWidth:`1.5`,strokeLinecap:`round`,strokeLinejoin:`round`})})})]}),(0,r.jsx)(`div`,{id:v,role:`region`,"aria-labelledby":y,className:t.default.panel,children:(0,r.jsx)(`div`,{className:t.default.panelInner,children:x.map((n,i)=>(0,r.jsxs)(`div`,{className:t.default.childItem,children:[(0,r.jsx)(e.Separator,{"aria-hidden":`true`}),n]},i))})})]})};exports.ExpanderRow=i;
 //# sourceMappingURL=ExpanderRow.cjs.map

package/dist/components/ExpanderRow/ExpanderRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ExpanderRow.cjs","names":[],"sources":["../../../src/components/ExpanderRow/ExpanderRow.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode, useId, useState } from 'react';\n\nimport { Separator } from '../Separator';\n\nimport styles from './ExpanderRow.module.css';\n\nexport interface ExpanderRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge of the header row. */\n  leading?: ReactNode;\n  /**\n   * Widget placed at the trailing edge of the header row, before the chevron\n   * (e.g. a value label or a Switch). Stop event propagation inside it so the\n   * row's toggle isn't triggered.\n   */\n  trailing?: ReactNode;\n  /**\n   * Nested rows revealed when expanded. Use `ActionRow`, `ButtonRow`, or any\n   * row-shaped element — separators are inserted automatically.\n   */\n  children?: ReactNode;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Initial expanded state when uncontrolled. Defaults to `false`. */\n  defaultExpanded?: boolean;\n  /** Called when the expanded state changes. */\n  onExpandedChange?: (expanded: boolean) => void;\n}\n\n/**\n * Collapsible `ActionRow` that reveals nested rows on activation.\n *\n * Mirrors `AdwExpanderRow` — the header row toggles a reveal animation exposing\n * child rows. Supports both controlled and uncontrolled expand state.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ExpanderRow.html\n */\nexport function ExpanderRow({\n  title,\n  subtitle,\n  leading,\n  trailing,\n  children,\n  expanded: controlledExpanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  className,\n  ...props\n}: ExpanderRowProps) {\n  const isControlled = controlledExpanded !== undefined;\n  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);\n  const expanded = isControlled ? controlledExpanded : uncontrolledExpanded;\n\n  const panelId = useId();\n  const headerId = useId();\n\n  const toggle = () => {\n    const next = !expanded;\n\n    if (!isControlled) {\n      setUncontrolledExpanded(next);\n    }\n\n    onExpandedChange?.(next);\n  };\n\n  const childItems = Children.toArray(children).filter(Boolean);\n\n  return (\n    <div\n      className={[styles.expanderRow, expanded ? styles.expanded : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {/* ─── Header (toggle button) ─────────────────────────────────────── */}\n      <button\n        id={headerId}\n        className={styles.header}\n        aria-expanded={expanded}\n        aria-controls={panelId}\n        onClick={toggle}\n      >\n        {leading && <span className={styles.leading}>{leading}</span>}\n\n        <span className={styles.content}>\n          <span className={styles.title}>{title}</span>\n          {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n        </span>\n\n        {trailing && <span className={styles.trailing}>{trailing}</span>}\n\n        <span\n          className={[styles.chevronWrap, expanded ? styles.chevronOpen : null]\n            .filter(Boolean)\n            .join(' ')}\n          aria-hidden=\"true\"\n        >\n          <svg\n            className={styles.chevron}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M4 6l4 4 4-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </span>\n      </button>\n\n      {/* ─── Reveal panel ───────────────────────────────────────────────── */}\n      <div id={panelId} role=\"region\" aria-labelledby={headerId} className={styles.panel}>\n        <div className={styles.panelInner}>\n          {childItems.map((child, i) => (\n            <div key={i} className={styles.childItem}>\n              <Separator aria-hidden=\"true\" />\n              {child}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"8IAwCA,SAAgB,EAAY,CAC1B,QACA,WACA,UACA,WACA,WACA,SAAU,EACV,kBAAkB,GAClB,mBACA,YACA,GAAG,GACgB,CACnB,IAAM,EAAe,IAAuB,IAAA,GACtC,CAAC,EAAsB,IAAA,EAAA,EAAA,UAAoC,EAAgB,CAC3E,EAAW,EAAe,EAAqB,EAE/C,GAAA,EAAA,EAAA,QAAiB,CACjB,GAAA,EAAA,EAAA,QAAkB,CAElB,MAAe,CACnB,IAAM,EAAO,CAAC,EAET,GACH,EAAwB,EAAK,CAG/B,IAAmB,EAAK,EAGpB,EAAa,EAAA,SAAS,QAAQ,EAAS,CAAC,OAAO,QAAQ,CAE7D,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,YAAa,EAAW,EAAA,QAAO,SAAW,KAAM,EAAU,CAC1E,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAJN,EAOE,EAAA,EAAA,MAAC,SAAD,CACE,GAAI,EACJ,UAAW,EAAA,QAAO,OAClB,gBAAe,EACf,gBAAe,EACf,QAAS,WALX,CAOG,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,EAAe,CAAA,EAE7D,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,EAAa,CAAA,CAC5C,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,CAC3D,GAEN,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,EAAgB,CAAA,EAEhE,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,CAAC,EAAA,QAAO,YAAa,EAAW,EAAA,QAAO,YAAc,KAAK,CAClE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAY,iBAEZ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,QAAO,QAClB,MAAM,KACN,OAAO,KACP,QAAQ,YACR,UAAU,kBAEV,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,eACF,KAAK,OACL,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,QACf,CAAA,CACE,CAAA,CACD,CAAA,CACA,IAGT,EAAA,EAAA,KAAC,MAAD,CAAK,GAAI,EAAS,KAAK,SAAS,kBAAiB,EAAU,UAAW,EAAA,QAAO,gBAC3E,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,oBACpB,EAAW,KAAK,EAAO,KACtB,EAAA,EAAA,MAAC,MAAD,CAAa,UAAW,EAAA,QAAO,mBAA/B,EACE,EAAA,EAAA,KAAC,EAAA,UAAD,CAAW,cAAY,OAAS,CAAA,CAC/B,EACG,EAHI,EAGJ,CACN,CACE,CAAA,CACF,CAAA,CACF"}
+{"version":3,"file":"ExpanderRow.cjs","names":[],"sources":["../../../src/components/ExpanderRow/ExpanderRow.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode, useId, useState } from 'react';\n\nimport { Separator } from '../Separator';\n\nimport styles from './ExpanderRow.module.css';\n\nexport interface ExpanderRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge of the header row. */\n  leading?: ReactNode;\n  /**\n   * Widget placed at the trailing edge of the header row, before the chevron\n   * (e.g. a value label or a Switch). Stop event propagation inside it so the\n   * row's toggle isn't triggered.\n   */\n  trailing?: ReactNode;\n  /**\n   * Nested rows revealed when expanded. Use `ActionRow`, `ButtonRow`, or any\n   * row-shaped element — separators are inserted automatically.\n   */\n  children?: ReactNode;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Initial expanded state when uncontrolled. Defaults to `false`. */\n  defaultExpanded?: boolean;\n  /** Called when the expanded state changes. */\n  onExpandedChange?: (expanded: boolean) => void;\n}\n\n/**\n * Collapsible `ActionRow` that reveals nested rows on activation.\n *\n * Mirrors `AdwExpanderRow` — the header row toggles a reveal animation exposing\n * child rows. Supports both controlled and uncontrolled expand state.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ExpanderRow.html\n */\nexport const ExpanderRow = ({\n  title,\n  subtitle,\n  leading,\n  trailing,\n  children,\n  expanded: controlledExpanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  className,\n  ...props\n}: ExpanderRowProps) => {\n  const isControlled = controlledExpanded !== undefined;\n  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);\n  const expanded = isControlled ? controlledExpanded : uncontrolledExpanded;\n\n  const panelId = useId();\n  const headerId = useId();\n\n  const toggle = () => {\n    const next = !expanded;\n\n    if (!isControlled) {\n      setUncontrolledExpanded(next);\n    }\n\n    onExpandedChange?.(next);\n  };\n\n  const childItems = Children.toArray(children).filter(Boolean);\n\n  return (\n    <div\n      className={[styles.expanderRow, expanded ? styles.expanded : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {/* ─── Header (toggle button) ─────────────────────────────────────── */}\n      <button\n        id={headerId}\n        className={styles.header}\n        aria-expanded={expanded}\n        aria-controls={panelId}\n        onClick={toggle}\n      >\n        {leading && <span className={styles.leading}>{leading}</span>}\n\n        <span className={styles.content}>\n          <span className={styles.title}>{title}</span>\n          {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n        </span>\n\n        {trailing && <span className={styles.trailing}>{trailing}</span>}\n\n        <span\n          className={[styles.chevronWrap, expanded ? styles.chevronOpen : null]\n            .filter(Boolean)\n            .join(' ')}\n          aria-hidden=\"true\"\n        >\n          <svg\n            className={styles.chevron}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M4 6l4 4 4-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </span>\n      </button>\n\n      {/* ─── Reveal panel ───────────────────────────────────────────────── */}\n      <div id={panelId} role=\"region\" aria-labelledby={headerId} className={styles.panel}>\n        <div className={styles.panelInner}>\n          {childItems.map((child, i) => (\n            <div key={i} className={styles.childItem}>\n              <Separator aria-hidden=\"true\" />\n              {child}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":"8IAwCA,IAAa,GAAe,CAC1B,QACA,WACA,UACA,WACA,WACA,SAAU,EACV,kBAAkB,GAClB,mBACA,YACA,GAAG,KACmB,CACtB,IAAM,EAAe,IAAuB,IAAA,GACtC,CAAC,EAAsB,IAAA,EAAA,EAAA,UAAoC,CAAe,EAC1E,EAAW,EAAe,EAAqB,EAE/C,GAAA,EAAA,EAAA,OAAgB,EAChB,GAAA,EAAA,EAAA,OAAiB,EAEjB,MAAe,CACnB,IAAM,EAAO,CAAC,EAET,GACH,EAAwB,CAAI,EAG9B,IAAmB,CAAI,CACzB,EAEM,EAAa,EAAA,SAAS,QAAQ,CAAQ,EAAE,OAAO,OAAO,EAE5D,OACE,EAAA,EAAA,MAAC,MAAD,CACE,UAAW,CAAC,EAAA,QAAO,YAAa,EAAW,EAAA,QAAO,SAAW,KAAM,CAAS,EACzE,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,WAJN,EAOE,EAAA,EAAA,MAAC,SAAD,CACE,GAAI,EACJ,UAAW,EAAA,QAAO,OAClB,gBAAe,EACf,gBAAe,EACf,QAAS,WALX,CAOG,IAAW,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,CAAc,CAAA,GAE5D,EAAA,EAAA,MAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAxB,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,eAAQ,CAAY,CAAA,EAC3C,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,CAAe,CAAA,CAC3D,IAEL,IAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,kBAAW,CAAe,CAAA,GAE/D,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,CAAC,EAAA,QAAO,YAAa,EAAW,EAAA,QAAO,YAAc,IAAI,EACjE,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAY,iBAEZ,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,EAAA,QAAO,QAClB,MAAM,KACN,OAAO,KACP,QAAQ,YACR,UAAU,kBAEV,EAAA,EAAA,KAAC,OAAD,CACE,EAAE,eACF,KAAK,OACL,OAAO,eACP,YAAY,MACZ,cAAc,QACd,eAAe,OAChB,CAAA,CACE,CAAA,CACD,CAAA,CACA,KAGR,EAAA,EAAA,KAAC,MAAD,CAAK,GAAI,EAAS,KAAK,SAAS,kBAAiB,EAAU,UAAW,EAAA,QAAO,gBAC3E,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,oBACpB,EAAW,KAAK,EAAO,KACtB,EAAA,EAAA,MAAC,MAAD,CAAa,UAAW,EAAA,QAAO,mBAA/B,EACE,EAAA,EAAA,KAAC,EAAA,UAAD,CAAW,cAAY,MAAQ,CAAA,EAC9B,CACE,GAHK,CAGL,CACN,CACE,CAAA,CACF,CAAA,CACF,GAET"}

package/dist/components/ExpanderRow/ExpanderRow.d.ts

@@ -32,4 +32,4 @@ export interface ExpanderRowProps extends HTMLAttributes<HTMLDivElement> {
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ExpanderRow.html
  */
-export declare function ExpanderRow({ title, subtitle, leading, trailing, children, expanded: controlledExpanded, defaultExpanded, onExpandedChange, className, ...props }: ExpanderRowProps): import("react/jsx-runtime").JSX.Element;
+export declare const ExpanderRow: ({ title, subtitle, leading, trailing, children, expanded: controlledExpanded, defaultExpanded, onExpandedChange, className, ...props }: ExpanderRowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ExpanderRow/ExpanderRow.js

@@ -3,7 +3,7 @@ import t from "./ExpanderRow.module.css.js";
 import { Children as n, useId as r, useState as i } from "react";
 import { jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/ExpanderRow/ExpanderRow.tsx
-function s({ title: s, subtitle: c, leading: l, trailing: u, children: d, expanded: f, defaultExpanded: p = !1, onExpandedChange: m, className: h, ...g }) {
+var s = ({ title: s, subtitle: c, leading: l, trailing: u, children: d, expanded: f, defaultExpanded: p = !1, onExpandedChange: m, className: h, ...g }) => {
 	let _ = f !== void 0, [v, y] = i(p), b = _ ? f : v, x = r(), S = r(), C = () => {
 		let e = !b;
 		_ || y(e), m?.(e);
@@ -74,7 +74,7 @@ function s({ title: s, subtitle: c, leading: l, trailing: u, children: d, expand
 			})
 		})]
 	});
-}
+};
 //#endregion
 export { s as ExpanderRow };
 

package/dist/components/ExpanderRow/ExpanderRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpanderRow.js","names":[],"sources":["../../../src/components/ExpanderRow/ExpanderRow.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode, useId, useState } from 'react';\n\nimport { Separator } from '../Separator';\n\nimport styles from './ExpanderRow.module.css';\n\nexport interface ExpanderRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge of the header row. */\n  leading?: ReactNode;\n  /**\n   * Widget placed at the trailing edge of the header row, before the chevron\n   * (e.g. a value label or a Switch). Stop event propagation inside it so the\n   * row's toggle isn't triggered.\n   */\n  trailing?: ReactNode;\n  /**\n   * Nested rows revealed when expanded. Use `ActionRow`, `ButtonRow`, or any\n   * row-shaped element — separators are inserted automatically.\n   */\n  children?: ReactNode;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Initial expanded state when uncontrolled. Defaults to `false`. */\n  defaultExpanded?: boolean;\n  /** Called when the expanded state changes. */\n  onExpandedChange?: (expanded: boolean) => void;\n}\n\n/**\n * Collapsible `ActionRow` that reveals nested rows on activation.\n *\n * Mirrors `AdwExpanderRow` — the header row toggles a reveal animation exposing\n * child rows. Supports both controlled and uncontrolled expand state.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ExpanderRow.html\n */\nexport function ExpanderRow({\n  title,\n  subtitle,\n  leading,\n  trailing,\n  children,\n  expanded: controlledExpanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  className,\n  ...props\n}: ExpanderRowProps) {\n  const isControlled = controlledExpanded !== undefined;\n  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);\n  const expanded = isControlled ? controlledExpanded : uncontrolledExpanded;\n\n  const panelId = useId();\n  const headerId = useId();\n\n  const toggle = () => {\n    const next = !expanded;\n\n    if (!isControlled) {\n      setUncontrolledExpanded(next);\n    }\n\n    onExpandedChange?.(next);\n  };\n\n  const childItems = Children.toArray(children).filter(Boolean);\n\n  return (\n    <div\n      className={[styles.expanderRow, expanded ? styles.expanded : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {/* ─── Header (toggle button) ─────────────────────────────────────── */}\n      <button\n        id={headerId}\n        className={styles.header}\n        aria-expanded={expanded}\n        aria-controls={panelId}\n        onClick={toggle}\n      >\n        {leading && <span className={styles.leading}>{leading}</span>}\n\n        <span className={styles.content}>\n          <span className={styles.title}>{title}</span>\n          {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n        </span>\n\n        {trailing && <span className={styles.trailing}>{trailing}</span>}\n\n        <span\n          className={[styles.chevronWrap, expanded ? styles.chevronOpen : null]\n            .filter(Boolean)\n            .join(' ')}\n          aria-hidden=\"true\"\n        >\n          <svg\n            className={styles.chevron}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M4 6l4 4 4-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </span>\n      </button>\n\n      {/* ─── Reveal panel ───────────────────────────────────────────────── */}\n      <div id={panelId} role=\"region\" aria-labelledby={headerId} className={styles.panel}>\n        <div className={styles.panelInner}>\n          {childItems.map((child, i) => (\n            <div key={i} className={styles.childItem}>\n              <Separator aria-hidden=\"true\" />\n              {child}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;AAwCA,SAAgB,EAAY,EAC1B,UACA,aACA,YACA,aACA,aACA,UAAU,GACV,qBAAkB,IAClB,qBACA,cACA,GAAG,KACgB;CACnB,IAAM,IAAe,MAAuB,KAAA,GACtC,CAAC,GAAsB,KAA2B,EAAS,EAAgB,EAC3E,IAAW,IAAe,IAAqB,GAE/C,IAAU,GAAO,EACjB,IAAW,GAAO,EAElB,UAAe;EACnB,IAAM,IAAO,CAAC;AAMd,EAJK,KACH,EAAwB,EAAK,EAG/B,IAAmB,EAAK;IAGpB,IAAa,EAAS,QAAQ,EAAS,CAAC,OAAO,QAAQ;AAE7D,QACE,kBAAC,OAAD;EACE,WAAW;GAAC,EAAO;GAAa,IAAW,EAAO,WAAW;GAAM;GAAU,CAC1E,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAJN,CAOE,kBAAC,UAAD;GACE,IAAI;GACJ,WAAW,EAAO;GAClB,iBAAe;GACf,iBAAe;GACf,SAAS;aALX;IAOG,KAAW,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAU;KAAe,CAAA;IAE7D,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAxB,CACE,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAQ;MAAa,CAAA,EAC5C,KAAY,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAW;MAAgB,CAAA,CAC3D;;IAEN,KAAY,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAW;KAAgB,CAAA;IAEhE,kBAAC,QAAD;KACE,WAAW,CAAC,EAAO,aAAa,IAAW,EAAO,cAAc,KAAK,CAClE,OAAO,QAAQ,CACf,KAAK,IAAI;KACZ,eAAY;eAEZ,kBAAC,OAAD;MACE,WAAW,EAAO;MAClB,OAAM;MACN,QAAO;MACP,SAAQ;MACR,WAAU;gBAEV,kBAAC,QAAD;OACE,GAAE;OACF,MAAK;OACL,QAAO;OACP,aAAY;OACZ,eAAc;OACd,gBAAe;OACf,CAAA;MACE,CAAA;KACD,CAAA;IACA;MAGT,kBAAC,OAAD;GAAK,IAAI;GAAS,MAAK;GAAS,mBAAiB;GAAU,WAAW,EAAO;aAC3E,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAW,KAAK,GAAO,MACtB,kBAAC,OAAD;KAAa,WAAW,EAAO;eAA/B,CACE,kBAAC,GAAD,EAAW,eAAY,QAAS,CAAA,EAC/B,EACG;OAHI,EAGJ,CACN;IACE,CAAA;GACF,CAAA,CACF"}
+{"version":3,"file":"ExpanderRow.js","names":[],"sources":["../../../src/components/ExpanderRow/ExpanderRow.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode, useId, useState } from 'react';\n\nimport { Separator } from '../Separator';\n\nimport styles from './ExpanderRow.module.css';\n\nexport interface ExpanderRowProps extends HTMLAttributes<HTMLDivElement> {\n  /** Primary label. */\n  title: string;\n  /** Secondary line below the title. */\n  subtitle?: string;\n  /** Icon or image placed at the leading edge of the header row. */\n  leading?: ReactNode;\n  /**\n   * Widget placed at the trailing edge of the header row, before the chevron\n   * (e.g. a value label or a Switch). Stop event propagation inside it so the\n   * row's toggle isn't triggered.\n   */\n  trailing?: ReactNode;\n  /**\n   * Nested rows revealed when expanded. Use `ActionRow`, `ButtonRow`, or any\n   * row-shaped element — separators are inserted automatically.\n   */\n  children?: ReactNode;\n  /** Controlled expanded state. */\n  expanded?: boolean;\n  /** Initial expanded state when uncontrolled. Defaults to `false`. */\n  defaultExpanded?: boolean;\n  /** Called when the expanded state changes. */\n  onExpandedChange?: (expanded: boolean) => void;\n}\n\n/**\n * Collapsible `ActionRow` that reveals nested rows on activation.\n *\n * Mirrors `AdwExpanderRow` — the header row toggles a reveal animation exposing\n * child rows. Supports both controlled and uncontrolled expand state.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ExpanderRow.html\n */\nexport const ExpanderRow = ({\n  title,\n  subtitle,\n  leading,\n  trailing,\n  children,\n  expanded: controlledExpanded,\n  defaultExpanded = false,\n  onExpandedChange,\n  className,\n  ...props\n}: ExpanderRowProps) => {\n  const isControlled = controlledExpanded !== undefined;\n  const [uncontrolledExpanded, setUncontrolledExpanded] = useState(defaultExpanded);\n  const expanded = isControlled ? controlledExpanded : uncontrolledExpanded;\n\n  const panelId = useId();\n  const headerId = useId();\n\n  const toggle = () => {\n    const next = !expanded;\n\n    if (!isControlled) {\n      setUncontrolledExpanded(next);\n    }\n\n    onExpandedChange?.(next);\n  };\n\n  const childItems = Children.toArray(children).filter(Boolean);\n\n  return (\n    <div\n      className={[styles.expanderRow, expanded ? styles.expanded : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {/* ─── Header (toggle button) ─────────────────────────────────────── */}\n      <button\n        id={headerId}\n        className={styles.header}\n        aria-expanded={expanded}\n        aria-controls={panelId}\n        onClick={toggle}\n      >\n        {leading && <span className={styles.leading}>{leading}</span>}\n\n        <span className={styles.content}>\n          <span className={styles.title}>{title}</span>\n          {subtitle && <span className={styles.subtitle}>{subtitle}</span>}\n        </span>\n\n        {trailing && <span className={styles.trailing}>{trailing}</span>}\n\n        <span\n          className={[styles.chevronWrap, expanded ? styles.chevronOpen : null]\n            .filter(Boolean)\n            .join(' ')}\n          aria-hidden=\"true\"\n        >\n          <svg\n            className={styles.chevron}\n            width=\"16\"\n            height=\"16\"\n            viewBox=\"0 0 16 16\"\n            focusable=\"false\"\n          >\n            <path\n              d=\"M4 6l4 4 4-4\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </span>\n      </button>\n\n      {/* ─── Reveal panel ───────────────────────────────────────────────── */}\n      <div id={panelId} role=\"region\" aria-labelledby={headerId} className={styles.panel}>\n        <div className={styles.panelInner}>\n          {childItems.map((child, i) => (\n            <div key={i} className={styles.childItem}>\n              <Separator aria-hidden=\"true\" />\n              {child}\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;AAwCA,IAAa,KAAe,EAC1B,UACA,aACA,YACA,aACA,aACA,UAAU,GACV,qBAAkB,IAClB,qBACA,cACA,GAAG,QACmB;CACtB,IAAM,IAAe,MAAuB,KAAA,GACtC,CAAC,GAAsB,KAA2B,EAAS,CAAe,GAC1E,IAAW,IAAe,IAAqB,GAE/C,IAAU,EAAM,GAChB,IAAW,EAAM,GAEjB,UAAe;EACnB,IAAM,IAAO,CAAC;EAMd,AAJK,KACH,EAAwB,CAAI,GAG9B,IAAmB,CAAI;CACzB,GAEM,IAAa,EAAS,QAAQ,CAAQ,EAAE,OAAO,OAAO;CAE5D,OACE,kBAAC,OAAD;EACE,WAAW;GAAC,EAAO;GAAa,IAAW,EAAO,WAAW;GAAM;EAAS,EACzE,OAAO,OAAO,EACd,KAAK,GAAG;EACX,GAAI;YAJN,CAOE,kBAAC,UAAD;GACE,IAAI;GACJ,WAAW,EAAO;GAClB,iBAAe;GACf,iBAAe;GACf,SAAS;aALX;IAOG,KAAW,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAU;IAAc,CAAA;IAE5D,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAxB,CACE,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAQ;KAAY,CAAA,GAC3C,KAAY,kBAAC,QAAD;MAAM,WAAW,EAAO;gBAAW;KAAe,CAAA,CAC3D;;IAEL,KAAY,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAW;IAAe,CAAA;IAE/D,kBAAC,QAAD;KACE,WAAW,CAAC,EAAO,aAAa,IAAW,EAAO,cAAc,IAAI,EACjE,OAAO,OAAO,EACd,KAAK,GAAG;KACX,eAAY;eAEZ,kBAAC,OAAD;MACE,WAAW,EAAO;MAClB,OAAM;MACN,QAAO;MACP,SAAQ;MACR,WAAU;gBAEV,kBAAC,QAAD;OACE,GAAE;OACF,MAAK;OACL,QAAO;OACP,aAAY;OACZ,eAAc;OACd,gBAAe;MAChB,CAAA;KACE,CAAA;IACD,CAAA;GACA;MAGR,kBAAC,OAAD;GAAK,IAAI;GAAS,MAAK;GAAS,mBAAiB;GAAU,WAAW,EAAO;aAC3E,kBAAC,OAAD;IAAK,WAAW,EAAO;cACpB,EAAW,KAAK,GAAO,MACtB,kBAAC,OAAD;KAAa,WAAW,EAAO;eAA/B,CACE,kBAAC,GAAD,EAAW,eAAY,OAAQ,CAAA,GAC9B,CACE;OAHK,CAGL,CACN;GACE,CAAA;EACF,CAAA,CACF;;AAET"}

package/dist/components/ExpanderRow.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./ExpanderRow/ExpanderRow.cjs`);exports.ExpanderRow=e.ExpanderRow;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ExpanderRow/ExpanderRow.cjs");exports.ExpanderRow=e.ExpanderRow;

package/dist/components/Footer/Footer.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Footer.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({start:n,end:r,children:i,flat:a=!1,className:o,...s}){return(0,t.jsxs)(`footer`,{className:[e.default.footer,a?e.default.flat:null,o].filter(Boolean).join(` `),...s,children:[(0,t.jsx)(`div`,{className:e.default.slot,children:n}),i!=null&&(0,t.jsx)(`div`,{className:e.default.center,children:i}),(0,t.jsx)(`div`,{className:[e.default.slot,e.default.slotEnd].filter(Boolean).join(` `),children:r})]})}exports.Footer=n;
+const e=require("./Footer.module.css.cjs");let t=require("react/jsx-runtime");var n=({start:n,end:r,children:i,flat:a=!1,className:o,...s})=>(0,t.jsxs)(`footer`,{className:[e.default.footer,a?e.default.flat:null,o].filter(Boolean).join(` `),...s,children:[(0,t.jsx)(`div`,{className:e.default.slot,children:n}),i!=null&&(0,t.jsx)(`div`,{className:e.default.center,children:i}),(0,t.jsx)(`div`,{className:[e.default.slot,e.default.slotEnd].filter(Boolean).join(` `),children:r})]});exports.Footer=n;
 //# sourceMappingURL=Footer.cjs.map

package/dist/components/Footer/Footer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.cjs","names":[],"sources":["../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Footer.module.css';\n\nexport interface FooterProps extends HTMLAttributes<HTMLElement> {\n  /** Content placed at the leading (left) edge — links, copyright, etc. */\n  start?: ReactNode;\n  /** Content placed at the trailing (right) edge — actions, links, etc. */\n  end?: ReactNode;\n  /** Center content or arbitrary children. */\n  children?: ReactNode;\n  /**\n   * When true the footer has no top border.\n   * Use when the footer is separated from content by another visual boundary.\n   */\n  flat?: boolean;\n}\n\n/**\n * Bottom bar with leading/trailing slots and optional center content.\n *\n * Mirrors the `HeaderBar` pattern at the bottom of a view or window.\n * Accepts plain text, links, and arbitrary ReactNode in each slot.\n *\n * @see https://developer.gnome.org/hig/patterns/containers/header-bars.html\n */\nexport function Footer({ start, end, children, flat = false, className, ...props }: FooterProps) {\n  return (\n    <footer\n      className={[styles.footer, flat ? styles.flat : null, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      <div className={styles.slot}>{start}</div>\n\n      {children !== null && children !== undefined && (\n        <div className={styles.center}>{children}</div>\n      )}\n\n      <div className={[styles.slot, styles.slotEnd].filter(Boolean).join(' ')}>{end}</div>\n    </footer>\n  );\n}\n"],"mappings":"8EA0BA,SAAgB,EAAO,CAAE,QAAO,MAAK,WAAU,OAAO,GAAO,YAAW,GAAG,GAAsB,CAC/F,OACE,EAAA,EAAA,MAAC,SAAD,CACE,UAAW,CAAC,EAAA,QAAO,OAAQ,EAAO,EAAA,QAAO,KAAO,KAAM,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC1F,GAAI,WAFN,EAIE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,cAAO,EAAY,CAAA,CAEzC,GAAa,OACZ,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAS,WAAe,CAAA,EAGjD,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,KAAM,EAAA,QAAO,QAAQ,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,UAAG,EAAU,CAAA,CAC7E"}
+{"version":3,"file":"Footer.cjs","names":[],"sources":["../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Footer.module.css';\n\nexport interface FooterProps extends HTMLAttributes<HTMLElement> {\n  /** Content placed at the leading (left) edge — links, copyright, etc. */\n  start?: ReactNode;\n  /** Content placed at the trailing (right) edge — actions, links, etc. */\n  end?: ReactNode;\n  /** Center content or arbitrary children. */\n  children?: ReactNode;\n  /**\n   * When true the footer has no top border.\n   * Use when the footer is separated from content by another visual boundary.\n   */\n  flat?: boolean;\n}\n\n/**\n * Bottom bar with leading/trailing slots and optional center content.\n *\n * Mirrors the `HeaderBar` pattern at the bottom of a view or window.\n * Accepts plain text, links, and arbitrary ReactNode in each slot.\n *\n * @see https://developer.gnome.org/hig/patterns/containers/header-bars.html\n */\nexport const Footer = ({\n  start,\n  end,\n  children,\n  flat = false,\n  className,\n  ...props\n}: FooterProps) => {\n  return (\n    <footer\n      className={[styles.footer, flat ? styles.flat : null, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      <div className={styles.slot}>{start}</div>\n\n      {children !== null && children !== undefined && (\n        <div className={styles.center}>{children}</div>\n      )}\n\n      <div className={[styles.slot, styles.slotEnd].filter(Boolean).join(' ')}>{end}</div>\n    </footer>\n  );\n};\n"],"mappings":"8EA0BA,IAAa,GAAU,CACrB,QACA,MACA,WACA,OAAO,GACP,YACA,GAAG,MAGD,EAAA,EAAA,MAAC,SAAD,CACE,UAAW,CAAC,EAAA,QAAO,OAAQ,EAAO,EAAA,QAAO,KAAO,KAAM,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EACzF,GAAI,WAFN,EAIE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,cAAO,CAAW,CAAA,EAExC,GAAa,OACZ,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAS,UAAc,CAAA,GAGhD,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,KAAM,EAAA,QAAO,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,WAAI,CAAS,CAAA,CAC7E"}

package/dist/components/Footer/Footer.d.ts

@@ -20,4 +20,4 @@ export interface FooterProps extends HTMLAttributes<HTMLElement> {
  *
  * @see https://developer.gnome.org/hig/patterns/containers/header-bars.html
  */
-export declare function Footer({ start, end, children, flat, className, ...props }: FooterProps): import("react/jsx-runtime").JSX.Element;
+export declare const Footer: ({ start, end, children, flat, className, ...props }: FooterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Footer/Footer.js

@@ -1,30 +1,28 @@
 import e from "./Footer.module.css.js";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/Footer/Footer.tsx
-function r({ start: r, end: i, children: a, flat: o = !1, className: s, ...c }) {
-	return /* @__PURE__ */ n("footer", {
-		className: [
-			e.footer,
-			o ? e.flat : null,
-			s
-		].filter(Boolean).join(" "),
-		...c,
-		children: [
-			/* @__PURE__ */ t("div", {
-				className: e.slot,
-				children: r
-			}),
-			a != null && /* @__PURE__ */ t("div", {
-				className: e.center,
-				children: a
-			}),
-			/* @__PURE__ */ t("div", {
-				className: [e.slot, e.slotEnd].filter(Boolean).join(" "),
-				children: i
-			})
-		]
-	});
-}
+var r = ({ start: r, end: i, children: a, flat: o = !1, className: s, ...c }) => /* @__PURE__ */ n("footer", {
+	className: [
+		e.footer,
+		o ? e.flat : null,
+		s
+	].filter(Boolean).join(" "),
+	...c,
+	children: [
+		/* @__PURE__ */ t("div", {
+			className: e.slot,
+			children: r
+		}),
+		a != null && /* @__PURE__ */ t("div", {
+			className: e.center,
+			children: a
+		}),
+		/* @__PURE__ */ t("div", {
+			className: [e.slot, e.slotEnd].filter(Boolean).join(" "),
+			children: i
+		})
+	]
+});
 //#endregion
 export { r as Footer };
 

package/dist/components/Footer/Footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.js","names":[],"sources":["../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Footer.module.css';\n\nexport interface FooterProps extends HTMLAttributes<HTMLElement> {\n  /** Content placed at the leading (left) edge — links, copyright, etc. */\n  start?: ReactNode;\n  /** Content placed at the trailing (right) edge — actions, links, etc. */\n  end?: ReactNode;\n  /** Center content or arbitrary children. */\n  children?: ReactNode;\n  /**\n   * When true the footer has no top border.\n   * Use when the footer is separated from content by another visual boundary.\n   */\n  flat?: boolean;\n}\n\n/**\n * Bottom bar with leading/trailing slots and optional center content.\n *\n * Mirrors the `HeaderBar` pattern at the bottom of a view or window.\n * Accepts plain text, links, and arbitrary ReactNode in each slot.\n *\n * @see https://developer.gnome.org/hig/patterns/containers/header-bars.html\n */\nexport function Footer({ start, end, children, flat = false, className, ...props }: FooterProps) {\n  return (\n    <footer\n      className={[styles.footer, flat ? styles.flat : null, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      <div className={styles.slot}>{start}</div>\n\n      {children !== null && children !== undefined && (\n        <div className={styles.center}>{children}</div>\n      )}\n\n      <div className={[styles.slot, styles.slotEnd].filter(Boolean).join(' ')}>{end}</div>\n    </footer>\n  );\n}\n"],"mappings":";;;AA0BA,SAAgB,EAAO,EAAE,UAAO,QAAK,aAAU,UAAO,IAAO,cAAW,GAAG,KAAsB;AAC/F,QACE,kBAAC,UAAD;EACE,WAAW;GAAC,EAAO;GAAQ,IAAO,EAAO,OAAO;GAAM;GAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC1F,GAAI;YAFN;GAIE,kBAAC,OAAD;IAAK,WAAW,EAAO;cAAO;IAAY,CAAA;GAEzC,KAAa,QACZ,kBAAC,OAAD;IAAK,WAAW,EAAO;IAAS;IAAe,CAAA;GAGjD,kBAAC,OAAD;IAAK,WAAW,CAAC,EAAO,MAAM,EAAO,QAAQ,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;cAAG;IAAU,CAAA;GAC7E"}
+{"version":3,"file":"Footer.js","names":[],"sources":["../../../src/components/Footer/Footer.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Footer.module.css';\n\nexport interface FooterProps extends HTMLAttributes<HTMLElement> {\n  /** Content placed at the leading (left) edge — links, copyright, etc. */\n  start?: ReactNode;\n  /** Content placed at the trailing (right) edge — actions, links, etc. */\n  end?: ReactNode;\n  /** Center content or arbitrary children. */\n  children?: ReactNode;\n  /**\n   * When true the footer has no top border.\n   * Use when the footer is separated from content by another visual boundary.\n   */\n  flat?: boolean;\n}\n\n/**\n * Bottom bar with leading/trailing slots and optional center content.\n *\n * Mirrors the `HeaderBar` pattern at the bottom of a view or window.\n * Accepts plain text, links, and arbitrary ReactNode in each slot.\n *\n * @see https://developer.gnome.org/hig/patterns/containers/header-bars.html\n */\nexport const Footer = ({\n  start,\n  end,\n  children,\n  flat = false,\n  className,\n  ...props\n}: FooterProps) => {\n  return (\n    <footer\n      className={[styles.footer, flat ? styles.flat : null, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      <div className={styles.slot}>{start}</div>\n\n      {children !== null && children !== undefined && (\n        <div className={styles.center}>{children}</div>\n      )}\n\n      <div className={[styles.slot, styles.slotEnd].filter(Boolean).join(' ')}>{end}</div>\n    </footer>\n  );\n};\n"],"mappings":";;;AA0BA,IAAa,KAAU,EACrB,UACA,QACA,aACA,UAAO,IACP,cACA,GAAG,QAGD,kBAAC,UAAD;CACE,WAAW;EAAC,EAAO;EAAQ,IAAO,EAAO,OAAO;EAAM;CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;CACzF,GAAI;WAFN;EAIE,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAO;EAAW,CAAA;EAExC,KAAa,QACZ,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAS;EAAc,CAAA;EAGhD,kBAAC,OAAD;GAAK,WAAW,CAAC,EAAO,MAAM,EAAO,OAAO,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;aAAI;EAAS,CAAA;CAC7E"}

package/dist/components/Footer.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Footer/Footer.cjs`);exports.Footer=e.Footer;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./Footer/Footer.cjs");exports.Footer=e.Footer;

package/dist/components/Frame/Frame.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Frame.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({children:n,className:r,...i}){return(0,t.jsx)(`div`,{className:[e.default.frame,r].filter(Boolean).join(` `),...i,children:n})}exports.Frame=n;
+const e=require("./Frame.module.css.cjs");let t=require("react/jsx-runtime");var n=({children:n,className:r,...i})=>(0,t.jsx)(`div`,{className:[e.default.frame,r].filter(Boolean).join(` `),...i,children:n});exports.Frame=n;
 //# sourceMappingURL=Frame.cjs.map

package/dist/components/Frame/Frame.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Frame.cjs","names":[],"sources":["../../../src/components/Frame/Frame.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Frame.module.css';\n\nexport interface FrameProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\n/**\n * Simple bordered surface with border-radius but no background fill.\n *\n * Use to visually delimit a region without adding the elevated appearance\n * of a `Card`. Mirrors `GtkFrame` default styling and the libadwaita\n * `.frame` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#frame-style-class\n */\nexport function Frame({ children, className, ...props }: FrameProps) {\n  return (\n    <div className={[styles.frame, className].filter(Boolean).join(' ')} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"6EAiBA,SAAgB,EAAM,CAAE,WAAU,YAAW,GAAG,GAAqB,CACnE,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAE,GAAI,EACtE,WACG,CAAA"}
+{"version":3,"file":"Frame.cjs","names":[],"sources":["../../../src/components/Frame/Frame.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react';\n\nimport styles from './Frame.module.css';\n\nexport interface FrameProps extends HTMLAttributes<HTMLDivElement> {\n  children?: ReactNode;\n}\n\n/**\n * Simple bordered surface with border-radius but no background fill.\n *\n * Use to visually delimit a region without adding the elevated appearance\n * of a `Card`. Mirrors `GtkFrame` default styling and the libadwaita\n * `.frame` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#frame-style-class\n */\nexport const Frame = ({ children, className, ...props }: FrameProps) => {\n  return (\n    <div className={[styles.frame, className].filter(Boolean).join(' ')} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":"6EAiBA,IAAa,GAAS,CAAE,WAAU,YAAW,GAAG,MAE5C,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,CAAC,EAAA,QAAO,MAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAAG,GAAI,EACtE,UACE,CAAA"}

package/dist/components/Frame/Frame.d.ts

@@ -11,4 +11,4 @@ export interface FrameProps extends HTMLAttributes<HTMLDivElement> {
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/1-latest/style-classes.html#frame-style-class
  */
-export declare function Frame({ children, className, ...props }: FrameProps): import("react/jsx-runtime").JSX.Element;
+export declare const Frame: ({ children, className, ...props }: FrameProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Frame/Frame.js

@@ -1,13 +1,11 @@
 import e from "./Frame.module.css.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/Frame/Frame.tsx
-function n({ children: n, className: r, ...i }) {
-	return /* @__PURE__ */ t("div", {
-		className: [e.frame, r].filter(Boolean).join(" "),
-		...i,
-		children: n
-	});
-}
+var n = ({ children: n, className: r, ...i }) => /* @__PURE__ */ t("div", {
+	className: [e.frame, r].filter(Boolean).join(" "),
+	...i,
+	children: n
+});
 //#endregion
 export { n as Frame };