@gnome-ui/react 1.45.1 → 1.46.0

package/dist/components/RadioButton/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","names":[],"sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\n\nimport styles from './RadioButton.module.css';\n\nexport interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  /** Accessible label. Required when no visible `<label>` is associated. */\n  'aria-label'?: string;\n}\n\n/**\n * Single-selection radio button following the GNOME HIG and Adwaita style.\n *\n * Group radio buttons by giving them the same `name` attribute.\n * Renders as `<input type=\"radio\">` — natively keyboard-accessible\n * (arrow keys cycle within the group) and compatible with standard form libraries.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/radio-buttons.html\n */\nexport function RadioButton({ className, ...props }: RadioButtonProps) {\n  return (\n    <input\n      type=\"radio\"\n      className={[styles.radio, className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;AAkBA,SAAgB,EAAY,EAAE,cAAW,GAAG,KAA2B;AACrE,QACE,kBAAC,SAAD;EACE,MAAK;EACL,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC9D,GAAI;EACJ,CAAA"}
+{"version":3,"file":"RadioButton.js","names":[],"sources":["../../../src/components/RadioButton/RadioButton.tsx"],"sourcesContent":["import type { InputHTMLAttributes } from 'react';\n\nimport styles from './RadioButton.module.css';\n\nexport interface RadioButtonProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  /** Accessible label. Required when no visible `<label>` is associated. */\n  'aria-label'?: string;\n}\n\n/**\n * Single-selection radio button following the GNOME HIG and Adwaita style.\n *\n * Group radio buttons by giving them the same `name` attribute.\n * Renders as `<input type=\"radio\">` — natively keyboard-accessible\n * (arrow keys cycle within the group) and compatible with standard form libraries.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/radio-buttons.html\n */\nexport const RadioButton = ({ className, ...props }: RadioButtonProps) => {\n  return (\n    <input\n      type=\"radio\"\n      className={[styles.radio, className].filter(Boolean).join(' ')}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;AAkBA,IAAa,KAAe,EAAE,cAAW,GAAG,QAExC,kBAAC,SAAD;CACE,MAAK;CACL,WAAW,CAAC,EAAO,OAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;CAC7D,GAAI;AACL,CAAA"}

package/dist/components/RadioButton.cjs

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

package/dist/components/SearchBar/SearchBar.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Icon/Icon.cjs`),t=require(`../Spinner/Spinner.cjs`),n=require(`./SearchBar.module.css.cjs`);let r=require(`react`),i=require(`react-dom`),a=require(`react/jsx-runtime`),o=require(`@gnome-ui/icons`);function s({open:s,onClose:c,onClear:l,children:u,value:d,onChange:f,placeholder:p=`Search…`,disabled:m,inline:h=!1,className:g,suggestions:_,onSuggestionSelect:v,loadingSuggestions:y=!1,renderSuggestion:b,suggestionsLabel:x=`Suggestions`,...S}){let C=(0,r.useRef)(null),w=(0,r.useRef)(null),T=(0,r.useRef)(null),E=(0,r.useId)(),D=(0,r.useId)(),[O,k]=(0,r.useState)(-1),[A,j]=(0,r.useState)(null),M=(_?.length??0)>0,N=s&&(y||M);(0,r.useEffect)(()=>{k(-1)},[]),(0,r.useEffect)(()=>{if(s){let e=requestAnimationFrame(()=>C.current?.focus());return()=>cancelAnimationFrame(e)}},[s]),(0,r.useEffect)(()=>{if(!N||!w.current){j(null);return}function e(){if(!w.current)return;let e=w.current.getBoundingClientRect();j({top:e.bottom,left:e.left,width:e.width})}return e(),window.addEventListener(`scroll`,e,{passive:!0,capture:!0}),window.addEventListener(`resize`,e,{passive:!0}),()=>{window.removeEventListener(`scroll`,e,{capture:!0}),window.removeEventListener(`resize`,e)}},[N]),(0,r.useEffect)(()=>{O<0||!T.current||T.current.children[O]?.scrollIntoView({block:`nearest`})},[O]);let P=(0,r.useCallback)(e=>{if(N&&M&&_){if(e.key===`ArrowDown`){e.preventDefault(),k(e=>Math.min(e+1,_.length-1));return}if(e.key===`ArrowUp`){e.preventDefault(),k(e=>Math.max(e-1,-1));return}if(e.key===`Enter`&&O>=0){e.preventDefault(),v?.(_[O]);return}}e.key===`Escape`&&(e.preventDefault(),c?.()),S.onKeyDown?.(e)},[c,S,N,M,_,O,v]),F=d!==void 0&&d!==``,I=O>=0&&_?.[O]?`${D}-${_[O].id}`:void 0,L=N&&A?(0,i.createPortal)((0,a.jsxs)(`ul`,{ref:T,"aria-label":x,id:E,className:n.default.suggestionsPanel,style:{top:A.top,left:A.left,width:A.width},onMouseDown:e=>e.preventDefault(),children:[y&&(0,a.jsx)(`li`,{role:`presentation`,className:n.default.suggestionsLoading,children:(0,a.jsx)(t.Spinner,{size:`sm`,label:`Loading suggestions…`})}),!y&&_?.map((e,t)=>(0,a.jsx)(`li`,{id:`${D}-${e.id}`,"aria-selected":t===O,className:[n.default.suggestionItem,t===O?n.default.suggestionItemActive:null].filter(Boolean).join(` `),onMouseEnter:()=>k(t),onMouseLeave:()=>k(-1),onClick:()=>v?.(e),children:b?b(e):e.label},e.id))]}),document.body):null;return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(`div`,{ref:w,className:[n.default.wrapper,s?n.default.open:null,g].filter(Boolean).join(` `),"aria-hidden":!s,children:[(0,a.jsxs)(`div`,{className:[n.default.bar,h?n.default.inline:null,m?n.default.disabled:null].filter(Boolean).join(` `),children:[(0,a.jsx)(`span`,{className:n.default.searchIcon,"aria-hidden":!0,children:(0,a.jsx)(e.Icon,{icon:o.Search,size:`md`})}),(0,a.jsx)(`input`,{ref:C,type:`search`,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":N,"aria-controls":N?E:void 0,"aria-activedescendant":I,value:d,onChange:f,placeholder:p,disabled:m,tabIndex:s?void 0:-1,className:n.default.input,onKeyDown:P,...S}),F&&(0,a.jsx)(`button`,{type:`button`,className:n.default.clearButton,"aria-label":`Clear search`,tabIndex:s?void 0:-1,disabled:m,onClick:()=>{l?.(),C.current?.focus()},children:(0,a.jsx)(e.Icon,{icon:o.Close,size:`md`})})]}),u&&(0,a.jsx)(`div`,{className:n.default.filterRow,children:u})]}),typeof document<`u`&&L]})}exports.SearchBar=s;
+const e=require("../Icon/Icon.cjs"),t=require("../Spinner/Spinner.cjs"),n=require("./SearchBar.module.css.cjs");let r=require("react"),i=require("react-dom"),a=require("react/jsx-runtime"),o=require("@gnome-ui/icons");var s=({open:s,onClose:c,onClear:l,children:u,value:d,onChange:f,placeholder:p=`Search…`,disabled:m,inline:h=!1,className:g,suggestions:_,onSuggestionSelect:v,loadingSuggestions:y=!1,renderSuggestion:b,suggestionsLabel:x=`Suggestions`,...S})=>{let C=(0,r.useRef)(null),w=(0,r.useRef)(null),T=(0,r.useRef)(null),E=(0,r.useId)(),D=(0,r.useId)(),[O,k]=(0,r.useState)(-1),[A,j]=(0,r.useState)(null),M=(_?.length??0)>0,N=s&&(y||M);(0,r.useEffect)(()=>{k(-1)},[]),(0,r.useEffect)(()=>{if(s){let e=requestAnimationFrame(()=>C.current?.focus());return()=>cancelAnimationFrame(e)}},[s]),(0,r.useEffect)(()=>{if(!N||!w.current){j(null);return}function e(){if(!w.current)return;let e=w.current.getBoundingClientRect();j({top:e.bottom,left:e.left,width:e.width})}return e(),window.addEventListener(`scroll`,e,{passive:!0,capture:!0}),window.addEventListener(`resize`,e,{passive:!0}),()=>{window.removeEventListener(`scroll`,e,{capture:!0}),window.removeEventListener(`resize`,e)}},[N]),(0,r.useEffect)(()=>{O<0||!T.current||T.current.children[O]?.scrollIntoView({block:`nearest`})},[O]);let P=(0,r.useCallback)(e=>{if(N&&M&&_){if(e.key===`ArrowDown`){e.preventDefault(),k(e=>Math.min(e+1,_.length-1));return}if(e.key===`ArrowUp`){e.preventDefault(),k(e=>Math.max(e-1,-1));return}if(e.key===`Enter`&&O>=0){e.preventDefault(),v?.(_[O]);return}}e.key===`Escape`&&(e.preventDefault(),c?.()),S.onKeyDown?.(e)},[c,S,N,M,_,O,v]),F=d!==void 0&&d!==``,I=O>=0&&_?.[O]?`${D}-${_[O].id}`:void 0,L=N&&A?(0,i.createPortal)((0,a.jsxs)(`ul`,{ref:T,"aria-label":x,id:E,className:n.default.suggestionsPanel,style:{top:A.top,left:A.left,width:A.width},onMouseDown:e=>e.preventDefault(),children:[y&&(0,a.jsx)(`li`,{role:`presentation`,className:n.default.suggestionsLoading,children:(0,a.jsx)(t.Spinner,{size:`sm`,label:`Loading suggestions…`})}),!y&&_?.map((e,t)=>(0,a.jsx)(`li`,{id:`${D}-${e.id}`,"aria-selected":t===O,className:[n.default.suggestionItem,t===O?n.default.suggestionItemActive:null].filter(Boolean).join(` `),onMouseEnter:()=>k(t),onMouseLeave:()=>k(-1),onClick:()=>v?.(e),children:b?b(e):e.label},e.id))]}),document.body):null;return(0,a.jsxs)(a.Fragment,{children:[(0,a.jsxs)(`div`,{ref:w,className:[n.default.wrapper,s?n.default.open:null,g].filter(Boolean).join(` `),"aria-hidden":!s,children:[(0,a.jsxs)(`div`,{className:[n.default.bar,h?n.default.inline:null,m?n.default.disabled:null].filter(Boolean).join(` `),children:[(0,a.jsx)(`span`,{className:n.default.searchIcon,"aria-hidden":!0,children:(0,a.jsx)(e.Icon,{icon:o.Search,size:`md`})}),(0,a.jsx)(`input`,{ref:C,type:`search`,role:`combobox`,"aria-autocomplete":`list`,"aria-expanded":N,"aria-controls":N?E:void 0,"aria-activedescendant":I,value:d,onChange:f,placeholder:p,disabled:m,tabIndex:s?void 0:-1,className:n.default.input,onKeyDown:P,...S}),F&&(0,a.jsx)(`button`,{type:`button`,className:n.default.clearButton,"aria-label":`Clear search`,tabIndex:s?void 0:-1,disabled:m,onClick:()=>{l?.(),C.current?.focus()},children:(0,a.jsx)(e.Icon,{icon:o.Close,size:`md`})})]}),u&&(0,a.jsx)(`div`,{className:n.default.filterRow,children:u})]}),typeof document<`u`&&L]})};exports.SearchBar=s;
 //# sourceMappingURL=SearchBar.cjs.map

package/dist/components/SearchBar/SearchBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { Close, Search } from '@gnome-ui/icons';\nimport {\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Icon } from '../Icon';\nimport { Spinner } from '../Spinner';\n\nimport styles from './SearchBar.module.css';\n\nexport interface Suggestion {\n  id: string;\n  label: string;\n}\n\nexport interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  /**\n   * Whether the search bar is visible/expanded.\n   * When `false` the bar collapses to zero height and is hidden from AT.\n   */\n  open: boolean;\n  /** Called when the user presses Escape or clicks the clear button with empty value. */\n  onClose?: () => void;\n  /** Called when the clear (×) button is clicked. Also clears the input value. */\n  onClear?: () => void;\n  /**\n   * Content to render below the search bar (e.g. filter chips).\n   * Only visible while `open` is true.\n   */\n  children?: ReactNode;\n  /**\n   * Removes the header-bar background so the bar blends into any surface.\n   * Mirrors the `.inline` style class.\n   */\n  inline?: boolean;\n  /** Suggestion items to show in the autocomplete popover. */\n  suggestions?: Suggestion[];\n  /** Called when the user selects a suggestion. */\n  onSuggestionSelect?: (item: Suggestion) => void;\n  /** Shows a spinner inside the suggestions popover while fetching async results. */\n  loadingSuggestions?: boolean;\n  /** Custom row renderer for each suggestion. */\n  renderSuggestion?: (item: Suggestion) => ReactNode;\n  /** `aria-label` for the suggestions listbox. Defaults to `\"Suggestions\"`. */\n  suggestionsLabel?: string;\n}\n\ninterface DropdownPos {\n  top: number;\n  left: number;\n  width: number;\n}\n\n/**\n * Collapsible search bar following the Adwaita `AdwSearchBar` pattern.\n *\n * - Slides in/out with a CSS height transition.\n * - Auto-focuses the input when `open` becomes `true`.\n * - Escape key calls `onClose`.\n * - Shows a clear (×) button whenever the input has a value.\n * - Optional `suggestions` / `loadingSuggestions` props show an autocomplete\n *   popover anchored below the bar — follows the GTK4 pattern of\n *   `AdwSearchBar` + `GtkPopover` + `GtkListView` (replaces `GtkEntryCompletion`).\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html\n */\nexport function SearchBar({\n  open,\n  onClose,\n  onClear,\n  children,\n  value,\n  onChange,\n  placeholder = 'Search…',\n  disabled,\n  inline = false,\n  className,\n  suggestions,\n  onSuggestionSelect,\n  loadingSuggestions = false,\n  renderSuggestion,\n  suggestionsLabel = 'Suggestions',\n  ...props\n}: SearchBarProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n\n  const listboxId = useId();\n  const optionIdPrefix = useId();\n\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [dropdownPos, setDropdownPos] = useState<DropdownPos | null>(null);\n\n  const hasSuggestions = (suggestions?.length ?? 0) > 0;\n  const showDropdown = open && (loadingSuggestions || hasSuggestions);\n\n  // Reset active index whenever the suggestion list changes\n  useEffect(() => {\n    setActiveIndex(-1);\n  }, []);\n\n  // Auto-focus when opening\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => inputRef.current?.focus());\n\n      return () => cancelAnimationFrame(id);\n    }\n  }, [open]);\n\n  // Position the suggestions dropdown below the wrapper\n  useEffect(() => {\n    if (!showDropdown || !wrapperRef.current) {\n      setDropdownPos(null);\n\n      return;\n    }\n\n    function updatePos() {\n      if (!wrapperRef.current) {\n        return;\n      }\n\n      const r = wrapperRef.current.getBoundingClientRect();\n\n      setDropdownPos({ top: r.bottom, left: r.left, width: r.width });\n    }\n    updatePos();\n    window.addEventListener('scroll', updatePos, { passive: true, capture: true });\n    window.addEventListener('resize', updatePos, { passive: true });\n\n    return () => {\n      window.removeEventListener('scroll', updatePos, { capture: true });\n      window.removeEventListener('resize', updatePos);\n    };\n  }, [showDropdown]);\n\n  // Scroll the active option into view\n  useEffect(() => {\n    if (activeIndex < 0 || !listboxRef.current) {\n      return;\n    }\n\n    (listboxRef.current.children[activeIndex] as HTMLElement | undefined)?.scrollIntoView({\n      block: 'nearest',\n    });\n  }, [activeIndex]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (showDropdown && hasSuggestions && suggestions) {\n        if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));\n\n          return;\n        }\n\n        if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          setActiveIndex((i) => Math.max(i - 1, -1));\n\n          return;\n        }\n\n        if (e.key === 'Enter' && activeIndex >= 0) {\n          e.preventDefault();\n          onSuggestionSelect?.(suggestions[activeIndex]);\n\n          return;\n        }\n      }\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n      }\n\n      props.onKeyDown?.(e);\n    },\n    [onClose, props, showDropdown, hasSuggestions, suggestions, activeIndex, onSuggestionSelect],\n  );\n\n  const hasValue = value !== undefined && value !== '';\n  const activeOptionId =\n    activeIndex >= 0 && suggestions?.[activeIndex]\n      ? `${optionIdPrefix}-${suggestions[activeIndex].id}`\n      : undefined;\n\n  const dropdown =\n    showDropdown && dropdownPos\n      ? createPortal(\n          <ul\n            ref={listboxRef}\n            aria-label={suggestionsLabel}\n            id={listboxId}\n            className={styles.suggestionsPanel}\n            style={{ top: dropdownPos.top, left: dropdownPos.left, width: dropdownPos.width }}\n            onMouseDown={(e) => e.preventDefault()} // keep focus on input\n          >\n            {loadingSuggestions && (\n              <li role=\"presentation\" className={styles.suggestionsLoading}>\n                <Spinner size=\"sm\" label=\"Loading suggestions…\" />\n              </li>\n            )}\n            {!loadingSuggestions &&\n              suggestions?.map((item, index) => (\n                <li\n                  key={item.id}\n                  id={`${optionIdPrefix}-${item.id}`}\n                  aria-selected={index === activeIndex}\n                  className={[\n                    styles.suggestionItem,\n                    index === activeIndex ? styles.suggestionItemActive : null,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  onMouseEnter={() => setActiveIndex(index)}\n                  onMouseLeave={() => setActiveIndex(-1)}\n                  onClick={() => onSuggestionSelect?.(item)}\n                >\n                  {renderSuggestion ? renderSuggestion(item) : item.label}\n                </li>\n              ))}\n          </ul>,\n          document.body,\n        )\n      : null;\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={[styles.wrapper, open ? styles.open : null, className].filter(Boolean).join(' ')}\n        aria-hidden={!open}\n      >\n        <div\n          className={[styles.bar, inline ? styles.inline : null, disabled ? styles.disabled : null]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          <span className={styles.searchIcon} aria-hidden>\n            <Icon icon={Search} size=\"md\" />\n          </span>\n\n          <input\n            ref={inputRef}\n            type=\"search\"\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-expanded={showDropdown}\n            aria-controls={showDropdown ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            value={value}\n            onChange={onChange}\n            placeholder={placeholder}\n            disabled={disabled}\n            tabIndex={open ? undefined : -1}\n            className={styles.input}\n            onKeyDown={handleKeyDown}\n            {...props}\n          />\n\n          {hasValue && (\n            <button\n              type=\"button\"\n              className={styles.clearButton}\n              aria-label=\"Clear search\"\n              tabIndex={open ? undefined : -1}\n              disabled={disabled}\n              onClick={() => {\n                onClear?.();\n                inputRef.current?.focus();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" />\n            </button>\n          )}\n        </div>\n\n        {children && <div className={styles.filterRow}>{children}</div>}\n      </div>\n\n      {typeof document !== 'undefined' && dropdown}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.cjs","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { Close, Search } from '@gnome-ui/icons';\nimport {\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Icon } from '../Icon';\nimport { Spinner } from '../Spinner';\n\nimport styles from './SearchBar.module.css';\n\nexport interface Suggestion {\n  id: string;\n  label: string;\n}\n\nexport interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  /**\n   * Whether the search bar is visible/expanded.\n   * When `false` the bar collapses to zero height and is hidden from AT.\n   */\n  open: boolean;\n  /** Called when the user presses Escape or clicks the clear button with empty value. */\n  onClose?: () => void;\n  /** Called when the clear (×) button is clicked. Also clears the input value. */\n  onClear?: () => void;\n  /**\n   * Content to render below the search bar (e.g. filter chips).\n   * Only visible while `open` is true.\n   */\n  children?: ReactNode;\n  /**\n   * Removes the header-bar background so the bar blends into any surface.\n   * Mirrors the `.inline` style class.\n   */\n  inline?: boolean;\n  /** Suggestion items to show in the autocomplete popover. */\n  suggestions?: Suggestion[];\n  /** Called when the user selects a suggestion. */\n  onSuggestionSelect?: (item: Suggestion) => void;\n  /** Shows a spinner inside the suggestions popover while fetching async results. */\n  loadingSuggestions?: boolean;\n  /** Custom row renderer for each suggestion. */\n  renderSuggestion?: (item: Suggestion) => ReactNode;\n  /** `aria-label` for the suggestions listbox. Defaults to `\"Suggestions\"`. */\n  suggestionsLabel?: string;\n}\n\ninterface DropdownPos {\n  top: number;\n  left: number;\n  width: number;\n}\n\n/**\n * Collapsible search bar following the Adwaita `AdwSearchBar` pattern.\n *\n * - Slides in/out with a CSS height transition.\n * - Auto-focuses the input when `open` becomes `true`.\n * - Escape key calls `onClose`.\n * - Shows a clear (×) button whenever the input has a value.\n * - Optional `suggestions` / `loadingSuggestions` props show an autocomplete\n *   popover anchored below the bar — follows the GTK4 pattern of\n *   `AdwSearchBar` + `GtkPopover` + `GtkListView` (replaces `GtkEntryCompletion`).\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html\n */\nexport const SearchBar = ({\n  open,\n  onClose,\n  onClear,\n  children,\n  value,\n  onChange,\n  placeholder = 'Search…',\n  disabled,\n  inline = false,\n  className,\n  suggestions,\n  onSuggestionSelect,\n  loadingSuggestions = false,\n  renderSuggestion,\n  suggestionsLabel = 'Suggestions',\n  ...props\n}: SearchBarProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n\n  const listboxId = useId();\n  const optionIdPrefix = useId();\n\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [dropdownPos, setDropdownPos] = useState<DropdownPos | null>(null);\n\n  const hasSuggestions = (suggestions?.length ?? 0) > 0;\n  const showDropdown = open && (loadingSuggestions || hasSuggestions);\n\n  // Reset active index whenever the suggestion list changes\n  useEffect(() => {\n    setActiveIndex(-1);\n  }, []);\n\n  // Auto-focus when opening\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => inputRef.current?.focus());\n\n      return () => cancelAnimationFrame(id);\n    }\n  }, [open]);\n\n  // Position the suggestions dropdown below the wrapper\n  useEffect(() => {\n    if (!showDropdown || !wrapperRef.current) {\n      setDropdownPos(null);\n\n      return;\n    }\n\n    function updatePos() {\n      if (!wrapperRef.current) {\n        return;\n      }\n\n      const r = wrapperRef.current.getBoundingClientRect();\n\n      setDropdownPos({ top: r.bottom, left: r.left, width: r.width });\n    }\n    updatePos();\n    window.addEventListener('scroll', updatePos, { passive: true, capture: true });\n    window.addEventListener('resize', updatePos, { passive: true });\n\n    return () => {\n      window.removeEventListener('scroll', updatePos, { capture: true });\n      window.removeEventListener('resize', updatePos);\n    };\n  }, [showDropdown]);\n\n  // Scroll the active option into view\n  useEffect(() => {\n    if (activeIndex < 0 || !listboxRef.current) {\n      return;\n    }\n\n    (listboxRef.current.children[activeIndex] as HTMLElement | undefined)?.scrollIntoView({\n      block: 'nearest',\n    });\n  }, [activeIndex]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (showDropdown && hasSuggestions && suggestions) {\n        if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));\n\n          return;\n        }\n\n        if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          setActiveIndex((i) => Math.max(i - 1, -1));\n\n          return;\n        }\n\n        if (e.key === 'Enter' && activeIndex >= 0) {\n          e.preventDefault();\n          onSuggestionSelect?.(suggestions[activeIndex]);\n\n          return;\n        }\n      }\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n      }\n\n      props.onKeyDown?.(e);\n    },\n    [onClose, props, showDropdown, hasSuggestions, suggestions, activeIndex, onSuggestionSelect],\n  );\n\n  const hasValue = value !== undefined && value !== '';\n  const activeOptionId =\n    activeIndex >= 0 && suggestions?.[activeIndex]\n      ? `${optionIdPrefix}-${suggestions[activeIndex].id}`\n      : undefined;\n\n  const dropdown =\n    showDropdown && dropdownPos\n      ? createPortal(\n          <ul\n            ref={listboxRef}\n            aria-label={suggestionsLabel}\n            id={listboxId}\n            className={styles.suggestionsPanel}\n            style={{ top: dropdownPos.top, left: dropdownPos.left, width: dropdownPos.width }}\n            onMouseDown={(e) => e.preventDefault()} // keep focus on input\n          >\n            {loadingSuggestions && (\n              <li role=\"presentation\" className={styles.suggestionsLoading}>\n                <Spinner size=\"sm\" label=\"Loading suggestions…\" />\n              </li>\n            )}\n            {!loadingSuggestions &&\n              suggestions?.map((item, index) => (\n                <li\n                  key={item.id}\n                  id={`${optionIdPrefix}-${item.id}`}\n                  aria-selected={index === activeIndex}\n                  className={[\n                    styles.suggestionItem,\n                    index === activeIndex ? styles.suggestionItemActive : null,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  onMouseEnter={() => setActiveIndex(index)}\n                  onMouseLeave={() => setActiveIndex(-1)}\n                  onClick={() => onSuggestionSelect?.(item)}\n                >\n                  {renderSuggestion ? renderSuggestion(item) : item.label}\n                </li>\n              ))}\n          </ul>,\n          document.body,\n        )\n      : null;\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={[styles.wrapper, open ? styles.open : null, className].filter(Boolean).join(' ')}\n        aria-hidden={!open}\n      >\n        <div\n          className={[styles.bar, inline ? styles.inline : null, disabled ? styles.disabled : null]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          <span className={styles.searchIcon} aria-hidden>\n            <Icon icon={Search} size=\"md\" />\n          </span>\n\n          <input\n            ref={inputRef}\n            type=\"search\"\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-expanded={showDropdown}\n            aria-controls={showDropdown ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            value={value}\n            onChange={onChange}\n            placeholder={placeholder}\n            disabled={disabled}\n            tabIndex={open ? undefined : -1}\n            className={styles.input}\n            onKeyDown={handleKeyDown}\n            {...props}\n          />\n\n          {hasValue && (\n            <button\n              type=\"button\"\n              className={styles.clearButton}\n              aria-label=\"Clear search\"\n              tabIndex={open ? undefined : -1}\n              disabled={disabled}\n              onClick={() => {\n                onClear?.();\n                inputRef.current?.focus();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" />\n            </button>\n          )}\n        </div>\n\n        {children && <div className={styles.filterRow}>{children}</div>}\n      </div>\n\n      {typeof document !== 'undefined' && dropdown}\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/components/SearchBar/SearchBar.d.ts

@@ -47,4 +47,4 @@ export interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElemen
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html
  */
-export declare function SearchBar({ open, onClose, onClear, children, value, onChange, placeholder, disabled, inline, className, suggestions, onSuggestionSelect, loadingSuggestions, renderSuggestion, suggestionsLabel, ...props }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
+export declare const SearchBar: ({ open, onClose, onClear, children, value, onChange, placeholder, disabled, inline, className, suggestions, onSuggestionSelect, loadingSuggestions, renderSuggestion, suggestionsLabel, ...props }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/SearchBar/SearchBar.js

@@ -6,7 +6,7 @@ import { createPortal as c } from "react-dom";
 import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 import { Close as f, Search as p } from "@gnome-ui/icons";
 //#region src/components/SearchBar/SearchBar.tsx
-function m({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y, placeholder: b = "Search…", disabled: x, inline: S = !1, className: C, suggestions: w, onSuggestionSelect: T, loadingSuggestions: E = !1, renderSuggestion: D, suggestionsLabel: O = "Suggestions", ...k }) {
+var m = ({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y, placeholder: b = "Search…", disabled: x, inline: S = !1, className: C, suggestions: w, onSuggestionSelect: T, loadingSuggestions: E = !1, renderSuggestion: D, suggestionsLabel: O = "Suggestions", ...k }) => {
 	let A = o(null), j = o(null), M = o(null), N = a(), P = a(), [F, I] = s(-1), [L, R] = s(null), z = (w?.length ?? 0) > 0, B = m && (E || z);
 	i(() => {
 		I(-1);
@@ -150,7 +150,7 @@ function m({ open: m, onClose: h, onClear: g, children: _, value: v, onChange: y
 			children: _
 		})]
 	}), typeof document < "u" && W] });
-}
+};
 //#endregion
 export { m as SearchBar };
 

package/dist/components/SearchBar/SearchBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchBar.js","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { Close, Search } from '@gnome-ui/icons';\nimport {\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Icon } from '../Icon';\nimport { Spinner } from '../Spinner';\n\nimport styles from './SearchBar.module.css';\n\nexport interface Suggestion {\n  id: string;\n  label: string;\n}\n\nexport interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  /**\n   * Whether the search bar is visible/expanded.\n   * When `false` the bar collapses to zero height and is hidden from AT.\n   */\n  open: boolean;\n  /** Called when the user presses Escape or clicks the clear button with empty value. */\n  onClose?: () => void;\n  /** Called when the clear (×) button is clicked. Also clears the input value. */\n  onClear?: () => void;\n  /**\n   * Content to render below the search bar (e.g. filter chips).\n   * Only visible while `open` is true.\n   */\n  children?: ReactNode;\n  /**\n   * Removes the header-bar background so the bar blends into any surface.\n   * Mirrors the `.inline` style class.\n   */\n  inline?: boolean;\n  /** Suggestion items to show in the autocomplete popover. */\n  suggestions?: Suggestion[];\n  /** Called when the user selects a suggestion. */\n  onSuggestionSelect?: (item: Suggestion) => void;\n  /** Shows a spinner inside the suggestions popover while fetching async results. */\n  loadingSuggestions?: boolean;\n  /** Custom row renderer for each suggestion. */\n  renderSuggestion?: (item: Suggestion) => ReactNode;\n  /** `aria-label` for the suggestions listbox. Defaults to `\"Suggestions\"`. */\n  suggestionsLabel?: string;\n}\n\ninterface DropdownPos {\n  top: number;\n  left: number;\n  width: number;\n}\n\n/**\n * Collapsible search bar following the Adwaita `AdwSearchBar` pattern.\n *\n * - Slides in/out with a CSS height transition.\n * - Auto-focuses the input when `open` becomes `true`.\n * - Escape key calls `onClose`.\n * - Shows a clear (×) button whenever the input has a value.\n * - Optional `suggestions` / `loadingSuggestions` props show an autocomplete\n *   popover anchored below the bar — follows the GTK4 pattern of\n *   `AdwSearchBar` + `GtkPopover` + `GtkListView` (replaces `GtkEntryCompletion`).\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html\n */\nexport function SearchBar({\n  open,\n  onClose,\n  onClear,\n  children,\n  value,\n  onChange,\n  placeholder = 'Search…',\n  disabled,\n  inline = false,\n  className,\n  suggestions,\n  onSuggestionSelect,\n  loadingSuggestions = false,\n  renderSuggestion,\n  suggestionsLabel = 'Suggestions',\n  ...props\n}: SearchBarProps) {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n\n  const listboxId = useId();\n  const optionIdPrefix = useId();\n\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [dropdownPos, setDropdownPos] = useState<DropdownPos | null>(null);\n\n  const hasSuggestions = (suggestions?.length ?? 0) > 0;\n  const showDropdown = open && (loadingSuggestions || hasSuggestions);\n\n  // Reset active index whenever the suggestion list changes\n  useEffect(() => {\n    setActiveIndex(-1);\n  }, []);\n\n  // Auto-focus when opening\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => inputRef.current?.focus());\n\n      return () => cancelAnimationFrame(id);\n    }\n  }, [open]);\n\n  // Position the suggestions dropdown below the wrapper\n  useEffect(() => {\n    if (!showDropdown || !wrapperRef.current) {\n      setDropdownPos(null);\n\n      return;\n    }\n\n    function updatePos() {\n      if (!wrapperRef.current) {\n        return;\n      }\n\n      const r = wrapperRef.current.getBoundingClientRect();\n\n      setDropdownPos({ top: r.bottom, left: r.left, width: r.width });\n    }\n    updatePos();\n    window.addEventListener('scroll', updatePos, { passive: true, capture: true });\n    window.addEventListener('resize', updatePos, { passive: true });\n\n    return () => {\n      window.removeEventListener('scroll', updatePos, { capture: true });\n      window.removeEventListener('resize', updatePos);\n    };\n  }, [showDropdown]);\n\n  // Scroll the active option into view\n  useEffect(() => {\n    if (activeIndex < 0 || !listboxRef.current) {\n      return;\n    }\n\n    (listboxRef.current.children[activeIndex] as HTMLElement | undefined)?.scrollIntoView({\n      block: 'nearest',\n    });\n  }, [activeIndex]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (showDropdown && hasSuggestions && suggestions) {\n        if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));\n\n          return;\n        }\n\n        if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          setActiveIndex((i) => Math.max(i - 1, -1));\n\n          return;\n        }\n\n        if (e.key === 'Enter' && activeIndex >= 0) {\n          e.preventDefault();\n          onSuggestionSelect?.(suggestions[activeIndex]);\n\n          return;\n        }\n      }\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n      }\n\n      props.onKeyDown?.(e);\n    },\n    [onClose, props, showDropdown, hasSuggestions, suggestions, activeIndex, onSuggestionSelect],\n  );\n\n  const hasValue = value !== undefined && value !== '';\n  const activeOptionId =\n    activeIndex >= 0 && suggestions?.[activeIndex]\n      ? `${optionIdPrefix}-${suggestions[activeIndex].id}`\n      : undefined;\n\n  const dropdown =\n    showDropdown && dropdownPos\n      ? createPortal(\n          <ul\n            ref={listboxRef}\n            aria-label={suggestionsLabel}\n            id={listboxId}\n            className={styles.suggestionsPanel}\n            style={{ top: dropdownPos.top, left: dropdownPos.left, width: dropdownPos.width }}\n            onMouseDown={(e) => e.preventDefault()} // keep focus on input\n          >\n            {loadingSuggestions && (\n              <li role=\"presentation\" className={styles.suggestionsLoading}>\n                <Spinner size=\"sm\" label=\"Loading suggestions…\" />\n              </li>\n            )}\n            {!loadingSuggestions &&\n              suggestions?.map((item, index) => (\n                <li\n                  key={item.id}\n                  id={`${optionIdPrefix}-${item.id}`}\n                  aria-selected={index === activeIndex}\n                  className={[\n                    styles.suggestionItem,\n                    index === activeIndex ? styles.suggestionItemActive : null,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  onMouseEnter={() => setActiveIndex(index)}\n                  onMouseLeave={() => setActiveIndex(-1)}\n                  onClick={() => onSuggestionSelect?.(item)}\n                >\n                  {renderSuggestion ? renderSuggestion(item) : item.label}\n                </li>\n              ))}\n          </ul>,\n          document.body,\n        )\n      : null;\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={[styles.wrapper, open ? styles.open : null, className].filter(Boolean).join(' ')}\n        aria-hidden={!open}\n      >\n        <div\n          className={[styles.bar, inline ? styles.inline : null, disabled ? styles.disabled : null]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          <span className={styles.searchIcon} aria-hidden>\n            <Icon icon={Search} size=\"md\" />\n          </span>\n\n          <input\n            ref={inputRef}\n            type=\"search\"\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-expanded={showDropdown}\n            aria-controls={showDropdown ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            value={value}\n            onChange={onChange}\n            placeholder={placeholder}\n            disabled={disabled}\n            tabIndex={open ? undefined : -1}\n            className={styles.input}\n            onKeyDown={handleKeyDown}\n            {...props}\n          />\n\n          {hasValue && (\n            <button\n              type=\"button\"\n              className={styles.clearButton}\n              aria-label=\"Clear search\"\n              tabIndex={open ? undefined : -1}\n              disabled={disabled}\n              onClick={() => {\n                onClear?.();\n                inputRef.current?.focus();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" />\n            </button>\n          )}\n        </div>\n\n        {children && <div className={styles.filterRow}>{children}</div>}\n      </div>\n\n      {typeof document !== 'undefined' && dropdown}\n    </>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SearchBar.js","names":[],"sources":["../../../src/components/SearchBar/SearchBar.tsx"],"sourcesContent":["import { Close, Search } from '@gnome-ui/icons';\nimport {\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Icon } from '../Icon';\nimport { Spinner } from '../Spinner';\n\nimport styles from './SearchBar.module.css';\n\nexport interface Suggestion {\n  id: string;\n  label: string;\n}\n\nexport interface SearchBarProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {\n  /**\n   * Whether the search bar is visible/expanded.\n   * When `false` the bar collapses to zero height and is hidden from AT.\n   */\n  open: boolean;\n  /** Called when the user presses Escape or clicks the clear button with empty value. */\n  onClose?: () => void;\n  /** Called when the clear (×) button is clicked. Also clears the input value. */\n  onClear?: () => void;\n  /**\n   * Content to render below the search bar (e.g. filter chips).\n   * Only visible while `open` is true.\n   */\n  children?: ReactNode;\n  /**\n   * Removes the header-bar background so the bar blends into any surface.\n   * Mirrors the `.inline` style class.\n   */\n  inline?: boolean;\n  /** Suggestion items to show in the autocomplete popover. */\n  suggestions?: Suggestion[];\n  /** Called when the user selects a suggestion. */\n  onSuggestionSelect?: (item: Suggestion) => void;\n  /** Shows a spinner inside the suggestions popover while fetching async results. */\n  loadingSuggestions?: boolean;\n  /** Custom row renderer for each suggestion. */\n  renderSuggestion?: (item: Suggestion) => ReactNode;\n  /** `aria-label` for the suggestions listbox. Defaults to `\"Suggestions\"`. */\n  suggestionsLabel?: string;\n}\n\ninterface DropdownPos {\n  top: number;\n  left: number;\n  width: number;\n}\n\n/**\n * Collapsible search bar following the Adwaita `AdwSearchBar` pattern.\n *\n * - Slides in/out with a CSS height transition.\n * - Auto-focuses the input when `open` becomes `true`.\n * - Escape key calls `onClose`.\n * - Shows a clear (×) button whenever the input has a value.\n * - Optional `suggestions` / `loadingSuggestions` props show an autocomplete\n *   popover anchored below the bar — follows the GTK4 pattern of\n *   `AdwSearchBar` + `GtkPopover` + `GtkListView` (replaces `GtkEntryCompletion`).\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.SearchBar.html\n */\nexport const SearchBar = ({\n  open,\n  onClose,\n  onClear,\n  children,\n  value,\n  onChange,\n  placeholder = 'Search…',\n  disabled,\n  inline = false,\n  className,\n  suggestions,\n  onSuggestionSelect,\n  loadingSuggestions = false,\n  renderSuggestion,\n  suggestionsLabel = 'Suggestions',\n  ...props\n}: SearchBarProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const listboxRef = useRef<HTMLUListElement>(null);\n\n  const listboxId = useId();\n  const optionIdPrefix = useId();\n\n  const [activeIndex, setActiveIndex] = useState(-1);\n  const [dropdownPos, setDropdownPos] = useState<DropdownPos | null>(null);\n\n  const hasSuggestions = (suggestions?.length ?? 0) > 0;\n  const showDropdown = open && (loadingSuggestions || hasSuggestions);\n\n  // Reset active index whenever the suggestion list changes\n  useEffect(() => {\n    setActiveIndex(-1);\n  }, []);\n\n  // Auto-focus when opening\n  useEffect(() => {\n    if (open) {\n      const id = requestAnimationFrame(() => inputRef.current?.focus());\n\n      return () => cancelAnimationFrame(id);\n    }\n  }, [open]);\n\n  // Position the suggestions dropdown below the wrapper\n  useEffect(() => {\n    if (!showDropdown || !wrapperRef.current) {\n      setDropdownPos(null);\n\n      return;\n    }\n\n    function updatePos() {\n      if (!wrapperRef.current) {\n        return;\n      }\n\n      const r = wrapperRef.current.getBoundingClientRect();\n\n      setDropdownPos({ top: r.bottom, left: r.left, width: r.width });\n    }\n    updatePos();\n    window.addEventListener('scroll', updatePos, { passive: true, capture: true });\n    window.addEventListener('resize', updatePos, { passive: true });\n\n    return () => {\n      window.removeEventListener('scroll', updatePos, { capture: true });\n      window.removeEventListener('resize', updatePos);\n    };\n  }, [showDropdown]);\n\n  // Scroll the active option into view\n  useEffect(() => {\n    if (activeIndex < 0 || !listboxRef.current) {\n      return;\n    }\n\n    (listboxRef.current.children[activeIndex] as HTMLElement | undefined)?.scrollIntoView({\n      block: 'nearest',\n    });\n  }, [activeIndex]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>) => {\n      if (showDropdown && hasSuggestions && suggestions) {\n        if (e.key === 'ArrowDown') {\n          e.preventDefault();\n          setActiveIndex((i) => Math.min(i + 1, suggestions.length - 1));\n\n          return;\n        }\n\n        if (e.key === 'ArrowUp') {\n          e.preventDefault();\n          setActiveIndex((i) => Math.max(i - 1, -1));\n\n          return;\n        }\n\n        if (e.key === 'Enter' && activeIndex >= 0) {\n          e.preventDefault();\n          onSuggestionSelect?.(suggestions[activeIndex]);\n\n          return;\n        }\n      }\n\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose?.();\n      }\n\n      props.onKeyDown?.(e);\n    },\n    [onClose, props, showDropdown, hasSuggestions, suggestions, activeIndex, onSuggestionSelect],\n  );\n\n  const hasValue = value !== undefined && value !== '';\n  const activeOptionId =\n    activeIndex >= 0 && suggestions?.[activeIndex]\n      ? `${optionIdPrefix}-${suggestions[activeIndex].id}`\n      : undefined;\n\n  const dropdown =\n    showDropdown && dropdownPos\n      ? createPortal(\n          <ul\n            ref={listboxRef}\n            aria-label={suggestionsLabel}\n            id={listboxId}\n            className={styles.suggestionsPanel}\n            style={{ top: dropdownPos.top, left: dropdownPos.left, width: dropdownPos.width }}\n            onMouseDown={(e) => e.preventDefault()} // keep focus on input\n          >\n            {loadingSuggestions && (\n              <li role=\"presentation\" className={styles.suggestionsLoading}>\n                <Spinner size=\"sm\" label=\"Loading suggestions…\" />\n              </li>\n            )}\n            {!loadingSuggestions &&\n              suggestions?.map((item, index) => (\n                <li\n                  key={item.id}\n                  id={`${optionIdPrefix}-${item.id}`}\n                  aria-selected={index === activeIndex}\n                  className={[\n                    styles.suggestionItem,\n                    index === activeIndex ? styles.suggestionItemActive : null,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  onMouseEnter={() => setActiveIndex(index)}\n                  onMouseLeave={() => setActiveIndex(-1)}\n                  onClick={() => onSuggestionSelect?.(item)}\n                >\n                  {renderSuggestion ? renderSuggestion(item) : item.label}\n                </li>\n              ))}\n          </ul>,\n          document.body,\n        )\n      : null;\n\n  return (\n    <>\n      <div\n        ref={wrapperRef}\n        className={[styles.wrapper, open ? styles.open : null, className].filter(Boolean).join(' ')}\n        aria-hidden={!open}\n      >\n        <div\n          className={[styles.bar, inline ? styles.inline : null, disabled ? styles.disabled : null]\n            .filter(Boolean)\n            .join(' ')}\n        >\n          <span className={styles.searchIcon} aria-hidden>\n            <Icon icon={Search} size=\"md\" />\n          </span>\n\n          <input\n            ref={inputRef}\n            type=\"search\"\n            role=\"combobox\"\n            aria-autocomplete=\"list\"\n            aria-expanded={showDropdown}\n            aria-controls={showDropdown ? listboxId : undefined}\n            aria-activedescendant={activeOptionId}\n            value={value}\n            onChange={onChange}\n            placeholder={placeholder}\n            disabled={disabled}\n            tabIndex={open ? undefined : -1}\n            className={styles.input}\n            onKeyDown={handleKeyDown}\n            {...props}\n          />\n\n          {hasValue && (\n            <button\n              type=\"button\"\n              className={styles.clearButton}\n              aria-label=\"Clear search\"\n              tabIndex={open ? undefined : -1}\n              disabled={disabled}\n              onClick={() => {\n                onClear?.();\n                inputRef.current?.focus();\n              }}\n            >\n              <Icon icon={Close} size=\"md\" />\n            </button>\n          )}\n        </div>\n\n        {children && <div className={styles.filterRow}>{children}</div>}\n      </div>\n\n      {typeof document !== 'undefined' && dropdown}\n    </>\n  );\n};\n"],"mappings":"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"}

package/dist/components/SearchBar.cjs

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

package/dist/components/SegmentedBar/SegmentedBar.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Tooltip/Tooltip.cjs`),t=require(`./SegmentedBar.module.css.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);var i=8,a=(0,n.memo)(function({values:a,className:o,"aria-label":s,...c}){let[l,u]=(0,n.useState)(null),d=a.reduce((e,t)=>e+t.value,0)||100,f=a.map(e=>`${e.label} ${e.value}%`).join(`, `);return(0,r.jsx)(`div`,{role:`img`,"aria-label":s??f,className:[t.default.track,o].filter(Boolean).join(` `),...c,children:a.map((n,a)=>{let o=`${n.value/d*100}%`,s=n.value%1==0?n.value:n.value.toFixed(1);return(0,r.jsx)(e.Tooltip,{label:`${n.label}: ${s}%`,placement:`top`,delay:200,children:(0,r.jsx)(`div`,{className:[t.default.segment,n.color?null:t.default[`color${a%i}`],l!==null&&l!==a?t.default.dimmed:null,l===a?t.default.highlighted:null].filter(Boolean).join(` `),style:{width:o,...n.color?{backgroundColor:n.color}:{}},onMouseEnter:()=>u(a),onMouseLeave:()=>u(null)})},n.label)})})});exports.SegmentedBar=a;
+const e=require("../Tooltip/Tooltip.cjs"),t=require("./SegmentedBar.module.css.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=8,a=(0,n.memo)(function({values:a,className:o,"aria-label":s,...c}){let[l,u]=(0,n.useState)(null),d=a.reduce((e,t)=>e+t.value,0)||100,f=a.map(e=>`${e.label} ${e.value}%`).join(`, `);return(0,r.jsx)(`div`,{role:`img`,"aria-label":s??f,className:[t.default.track,o].filter(Boolean).join(` `),...c,children:a.map((n,a)=>{let o=`${n.value/d*100}%`,s=n.value%1==0?n.value:n.value.toFixed(1);return(0,r.jsx)(e.Tooltip,{label:`${n.label}: ${s}%`,placement:`top`,delay:200,children:(0,r.jsx)(`div`,{className:[t.default.segment,n.color?null:t.default[`color${a%i}`],l!==null&&l!==a?t.default.dimmed:null,l===a?t.default.highlighted:null].filter(Boolean).join(` `),style:{width:o,...n.color?{backgroundColor:n.color}:{}},onMouseEnter:()=>u(a),onMouseLeave:()=>u(null)})},n.label)})})});exports.SegmentedBar=a;
 //# sourceMappingURL=SegmentedBar.cjs.map

package/dist/components/SegmentedBar/SegmentedBar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedBar.cjs","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { memo, useState } from 'react';\n\nimport { Tooltip } from '../Tooltip';\n\nimport styles from './SegmentedBar.module.css';\n\nexport interface SegmentedBarSegment {\n  /** Category name shown in the tooltip. */\n  label: string;\n  /**\n   * Percentage value 0–100.\n   * The sum of all segments should equal 100.\n   * If it does not, values are redistributed proportionally.\n   */\n  value: number;\n  /**\n   * CSS color string for this segment.\n   * When omitted, a cycling palette of GNOME design tokens is used.\n   */\n  color?: string;\n}\n\nexport interface SegmentedBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Segments to display. Each segment contributes its share of the full bar width. */\n  values: SegmentedBarSegment[];\n  /**\n   * Accessible label for the bar as a whole.\n   * Auto-generated from `values` when omitted (e.g. \"TypeScript 45%, JavaScript 30%\").\n   */\n  'aria-label'?: string;\n}\n\nconst COLOR_COUNT = 8;\n\n/**\n * Horizontal bar split into proportional segments, one per category.\n *\n * Hover a segment to highlight it and see its tooltip with label and percentage.\n * Typical use case: repository language distribution.\n *\n * ```tsx\n * <SegmentedBar\n *   values={[\n *     { label: \"TypeScript\", value: 60, color: \"#3178c6\" },\n *     { label: \"JavaScript\", value: 30, color: \"#f7df1e\" },\n *     { label: \"CSS\",        value: 10, color: \"#563d7c\" },\n *   ]}\n * />\n * ```\n */\nexport const SegmentedBar = memo(function SegmentedBar({\n  values,\n  className,\n  'aria-label': ariaLabel,\n  ...props\n}: SegmentedBarProps) {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const total = values.reduce((sum, s) => sum + s.value, 0) || 100;\n\n  const defaultLabel = values.map((s) => `${s.label} ${s.value}%`).join(', ');\n\n  return (\n    <div\n      role=\"img\"\n      aria-label={ariaLabel ?? defaultLabel}\n      className={[styles.track, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      {values.map((segment, i) => {\n        const width = `${(segment.value / total) * 100}%`;\n        const pct = segment.value % 1 === 0 ? segment.value : segment.value.toFixed(1);\n        const tooltipLabel = `${segment.label}: ${pct}%`;\n\n        return (\n          <Tooltip key={segment.label} label={tooltipLabel} placement=\"top\" delay={200}>\n            <div\n              className={[\n                styles.segment,\n                !segment.color ? styles[`color${i % COLOR_COUNT}`] : null,\n                activeIndex !== null && activeIndex !== i ? styles.dimmed : null,\n                activeIndex === i ? styles.highlighted : null,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              style={{\n                width,\n                ...(segment.color ? { backgroundColor: segment.color } : {}),\n              }}\n              onMouseEnter={() => setActiveIndex(i)}\n              onMouseLeave={() => setActiveIndex(null)}\n            />\n          </Tooltip>\n        );\n      })}\n    </div>\n  );\n});\n"],"mappings":"2IAiCA,IAAM,EAAc,EAkBP,GAAA,EAAA,EAAA,MAAoB,SAAsB,CACrD,SACA,YACA,aAAc,EACd,GAAG,GACiB,CACpB,GAAM,CAAC,EAAa,IAAA,EAAA,EAAA,UAA0C,KAAK,CAE7D,EAAQ,EAAO,QAAQ,EAAK,IAAM,EAAM,EAAE,MAAO,EAAE,EAAI,IAEvD,EAAe,EAAO,IAAK,GAAM,GAAG,EAAE,MAAM,GAAG,EAAE,MAAM,GAAG,CAAC,KAAK,KAAK,CAE3E,OACE,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,MACL,aAAY,GAAa,EACzB,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC9D,GAAI,WAEH,EAAO,KAAK,EAAS,IAAM,CAC1B,IAAM,EAAQ,GAAI,EAAQ,MAAQ,EAAS,IAAI,GACzC,EAAM,EAAQ,MAAQ,GAAM,EAAI,EAAQ,MAAQ,EAAQ,MAAM,QAAQ,EAAE,CAG9E,OACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAA6B,MAHV,GAAG,EAAQ,MAAM,IAAI,EAAI,GAGM,UAAU,MAAM,MAAO,cACvE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,QACN,EAAQ,MAA4C,KAApC,EAAA,QAAO,QAAQ,EAAI,KACpC,IAAgB,MAAQ,IAAgB,EAAI,EAAA,QAAO,OAAS,KAC5D,IAAgB,EAAI,EAAA,QAAO,YAAc,KAC1C,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,MAAO,CACL,QACA,GAAI,EAAQ,MAAQ,CAAE,gBAAiB,EAAQ,MAAO,CAAG,EAAE,CAC5D,CACD,iBAAoB,EAAe,EAAE,CACrC,iBAAoB,EAAe,KAAK,CACxC,CAAA,CACM,CAjBI,EAAQ,MAiBZ,EAEZ,CACE,CAAA,EAER"}
+{"version":3,"file":"SegmentedBar.cjs","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { memo, useState } from 'react';\n\nimport { Tooltip } from '../Tooltip';\n\nimport styles from './SegmentedBar.module.css';\n\nexport interface SegmentedBarSegment {\n  /** Category name shown in the tooltip. */\n  label: string;\n  /**\n   * Percentage value 0–100.\n   * The sum of all segments should equal 100.\n   * If it does not, values are redistributed proportionally.\n   */\n  value: number;\n  /**\n   * CSS color string for this segment.\n   * When omitted, a cycling palette of GNOME design tokens is used.\n   */\n  color?: string;\n}\n\nexport interface SegmentedBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Segments to display. Each segment contributes its share of the full bar width. */\n  values: SegmentedBarSegment[];\n  /**\n   * Accessible label for the bar as a whole.\n   * Auto-generated from `values` when omitted (e.g. \"TypeScript 45%, JavaScript 30%\").\n   */\n  'aria-label'?: string;\n}\n\nconst COLOR_COUNT = 8;\n\n/**\n * Horizontal bar split into proportional segments, one per category.\n *\n * Hover a segment to highlight it and see its tooltip with label and percentage.\n * Typical use case: repository language distribution.\n *\n * ```tsx\n * <SegmentedBar\n *   values={[\n *     { label: \"TypeScript\", value: 60, color: \"#3178c6\" },\n *     { label: \"JavaScript\", value: 30, color: \"#f7df1e\" },\n *     { label: \"CSS\",        value: 10, color: \"#563d7c\" },\n *   ]}\n * />\n * ```\n */\nexport const SegmentedBar = memo(function SegmentedBar({\n  values,\n  className,\n  'aria-label': ariaLabel,\n  ...props\n}: SegmentedBarProps) {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const total = values.reduce((sum, s) => sum + s.value, 0) || 100;\n\n  const defaultLabel = values.map((s) => `${s.label} ${s.value}%`).join(', ');\n\n  return (\n    <div\n      role=\"img\"\n      aria-label={ariaLabel ?? defaultLabel}\n      className={[styles.track, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      {values.map((segment, i) => {\n        const width = `${(segment.value / total) * 100}%`;\n        const pct = segment.value % 1 === 0 ? segment.value : segment.value.toFixed(1);\n        const tooltipLabel = `${segment.label}: ${pct}%`;\n\n        return (\n          <Tooltip key={segment.label} label={tooltipLabel} placement=\"top\" delay={200}>\n            <div\n              className={[\n                styles.segment,\n                !segment.color ? styles[`color${i % COLOR_COUNT}`] : null,\n                activeIndex !== null && activeIndex !== i ? styles.dimmed : null,\n                activeIndex === i ? styles.highlighted : null,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              style={{\n                width,\n                ...(segment.color ? { backgroundColor: segment.color } : {}),\n              }}\n              onMouseEnter={() => setActiveIndex(i)}\n              onMouseLeave={() => setActiveIndex(null)}\n            />\n          </Tooltip>\n        );\n      })}\n    </div>\n  );\n});\n"],"mappings":"2IAiCA,IAAM,EAAc,EAkBP,GAAA,EAAA,EAAA,MAAoB,SAAsB,CACrD,SACA,YACA,aAAc,EACd,GAAG,GACiB,CACpB,GAAM,CAAC,EAAa,IAAA,EAAA,EAAA,UAA0C,IAAI,EAE5D,EAAQ,EAAO,QAAQ,EAAK,IAAM,EAAM,EAAE,MAAO,CAAC,GAAK,IAEvD,EAAe,EAAO,IAAK,GAAM,GAAG,EAAE,MAAM,GAAG,EAAE,MAAM,EAAE,EAAE,KAAK,IAAI,EAE1E,OACE,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,MACL,aAAY,GAAa,EACzB,UAAW,CAAC,EAAA,QAAO,MAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7D,GAAI,WAEH,EAAO,KAAK,EAAS,IAAM,CAC1B,IAAM,EAAQ,GAAI,EAAQ,MAAQ,EAAS,IAAI,GACzC,EAAM,EAAQ,MAAQ,GAAM,EAAI,EAAQ,MAAQ,EAAQ,MAAM,QAAQ,CAAC,EAG7E,OACE,EAAA,EAAA,KAAC,EAAA,QAAD,CAA6B,MAAO,GAHd,EAAQ,MAAM,IAAI,EAAI,GAGM,UAAU,MAAM,MAAO,cACvE,EAAA,EAAA,KAAC,MAAD,CACE,UAAW,CACT,EAAA,QAAO,QACN,EAAQ,MAA4C,KAApC,EAAA,QAAO,QAAQ,EAAI,KACpC,IAAgB,MAAQ,IAAgB,EAAI,EAAA,QAAO,OAAS,KAC5D,IAAgB,EAAI,EAAA,QAAO,YAAc,IAC3C,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EACX,MAAO,CACL,QACA,GAAI,EAAQ,MAAQ,CAAE,gBAAiB,EAAQ,KAAM,EAAI,CAAC,CAC5D,EACA,iBAAoB,EAAe,CAAC,EACpC,iBAAoB,EAAe,IAAI,CACxC,CAAA,CACM,EAjBK,EAAQ,KAiBb,CAEb,CAAC,CACE,CAAA,CAET,CAAC"}

package/dist/components/SegmentedBar/SegmentedBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedBar.js","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { memo, useState } from 'react';\n\nimport { Tooltip } from '../Tooltip';\n\nimport styles from './SegmentedBar.module.css';\n\nexport interface SegmentedBarSegment {\n  /** Category name shown in the tooltip. */\n  label: string;\n  /**\n   * Percentage value 0–100.\n   * The sum of all segments should equal 100.\n   * If it does not, values are redistributed proportionally.\n   */\n  value: number;\n  /**\n   * CSS color string for this segment.\n   * When omitted, a cycling palette of GNOME design tokens is used.\n   */\n  color?: string;\n}\n\nexport interface SegmentedBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Segments to display. Each segment contributes its share of the full bar width. */\n  values: SegmentedBarSegment[];\n  /**\n   * Accessible label for the bar as a whole.\n   * Auto-generated from `values` when omitted (e.g. \"TypeScript 45%, JavaScript 30%\").\n   */\n  'aria-label'?: string;\n}\n\nconst COLOR_COUNT = 8;\n\n/**\n * Horizontal bar split into proportional segments, one per category.\n *\n * Hover a segment to highlight it and see its tooltip with label and percentage.\n * Typical use case: repository language distribution.\n *\n * ```tsx\n * <SegmentedBar\n *   values={[\n *     { label: \"TypeScript\", value: 60, color: \"#3178c6\" },\n *     { label: \"JavaScript\", value: 30, color: \"#f7df1e\" },\n *     { label: \"CSS\",        value: 10, color: \"#563d7c\" },\n *   ]}\n * />\n * ```\n */\nexport const SegmentedBar = memo(function SegmentedBar({\n  values,\n  className,\n  'aria-label': ariaLabel,\n  ...props\n}: SegmentedBarProps) {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const total = values.reduce((sum, s) => sum + s.value, 0) || 100;\n\n  const defaultLabel = values.map((s) => `${s.label} ${s.value}%`).join(', ');\n\n  return (\n    <div\n      role=\"img\"\n      aria-label={ariaLabel ?? defaultLabel}\n      className={[styles.track, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      {values.map((segment, i) => {\n        const width = `${(segment.value / total) * 100}%`;\n        const pct = segment.value % 1 === 0 ? segment.value : segment.value.toFixed(1);\n        const tooltipLabel = `${segment.label}: ${pct}%`;\n\n        return (\n          <Tooltip key={segment.label} label={tooltipLabel} placement=\"top\" delay={200}>\n            <div\n              className={[\n                styles.segment,\n                !segment.color ? styles[`color${i % COLOR_COUNT}`] : null,\n                activeIndex !== null && activeIndex !== i ? styles.dimmed : null,\n                activeIndex === i ? styles.highlighted : null,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              style={{\n                width,\n                ...(segment.color ? { backgroundColor: segment.color } : {}),\n              }}\n              onMouseEnter={() => setActiveIndex(i)}\n              onMouseLeave={() => setActiveIndex(null)}\n            />\n          </Tooltip>\n        );\n      })}\n    </div>\n  );\n});\n"],"mappings":";;;;;AAiCA,IAAM,IAAc,GAkBP,IAAe,EAAK,SAAsB,EACrD,WACA,cACA,cAAc,GACd,GAAG,KACiB;CACpB,IAAM,CAAC,GAAa,KAAkB,EAAwB,KAAK,EAE7D,IAAQ,EAAO,QAAQ,GAAK,MAAM,IAAM,EAAE,OAAO,EAAE,IAAI,KAEvD,IAAe,EAAO,KAAK,MAAM,GAAG,EAAE,MAAM,GAAG,EAAE,MAAM,GAAG,CAAC,KAAK,KAAK;AAE3E,QACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAY,KAAa;EACzB,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC9D,GAAI;YAEH,EAAO,KAAK,GAAS,MAAM;GAC1B,IAAM,IAAQ,GAAI,EAAQ,QAAQ,IAAS,IAAI,IACzC,IAAM,EAAQ,QAAQ,KAAM,IAAI,EAAQ,QAAQ,EAAQ,MAAM,QAAQ,EAAE;AAG9E,UACE,kBAAC,GAAD;IAA6B,OAHV,GAAG,EAAQ,MAAM,IAAI,EAAI;IAGM,WAAU;IAAM,OAAO;cACvE,kBAAC,OAAD;KACE,WAAW;MACT,EAAO;MACN,EAAQ,QAA4C,OAApC,EAAO,QAAQ,IAAI;MACpC,MAAgB,QAAQ,MAAgB,IAAI,EAAO,SAAS;MAC5D,MAAgB,IAAI,EAAO,cAAc;MAC1C,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;KACZ,OAAO;MACL;MACA,GAAI,EAAQ,QAAQ,EAAE,iBAAiB,EAAQ,OAAO,GAAG,EAAE;MAC5D;KACD,oBAAoB,EAAe,EAAE;KACrC,oBAAoB,EAAe,KAAK;KACxC,CAAA;IACM,EAjBI,EAAQ,MAiBZ;IAEZ;EACE,CAAA;EAER"}
+{"version":3,"file":"SegmentedBar.js","names":[],"sources":["../../../src/components/SegmentedBar/SegmentedBar.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\nimport { memo, useState } from 'react';\n\nimport { Tooltip } from '../Tooltip';\n\nimport styles from './SegmentedBar.module.css';\n\nexport interface SegmentedBarSegment {\n  /** Category name shown in the tooltip. */\n  label: string;\n  /**\n   * Percentage value 0–100.\n   * The sum of all segments should equal 100.\n   * If it does not, values are redistributed proportionally.\n   */\n  value: number;\n  /**\n   * CSS color string for this segment.\n   * When omitted, a cycling palette of GNOME design tokens is used.\n   */\n  color?: string;\n}\n\nexport interface SegmentedBarProps extends HTMLAttributes<HTMLDivElement> {\n  /** Segments to display. Each segment contributes its share of the full bar width. */\n  values: SegmentedBarSegment[];\n  /**\n   * Accessible label for the bar as a whole.\n   * Auto-generated from `values` when omitted (e.g. \"TypeScript 45%, JavaScript 30%\").\n   */\n  'aria-label'?: string;\n}\n\nconst COLOR_COUNT = 8;\n\n/**\n * Horizontal bar split into proportional segments, one per category.\n *\n * Hover a segment to highlight it and see its tooltip with label and percentage.\n * Typical use case: repository language distribution.\n *\n * ```tsx\n * <SegmentedBar\n *   values={[\n *     { label: \"TypeScript\", value: 60, color: \"#3178c6\" },\n *     { label: \"JavaScript\", value: 30, color: \"#f7df1e\" },\n *     { label: \"CSS\",        value: 10, color: \"#563d7c\" },\n *   ]}\n * />\n * ```\n */\nexport const SegmentedBar = memo(function SegmentedBar({\n  values,\n  className,\n  'aria-label': ariaLabel,\n  ...props\n}: SegmentedBarProps) {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const total = values.reduce((sum, s) => sum + s.value, 0) || 100;\n\n  const defaultLabel = values.map((s) => `${s.label} ${s.value}%`).join(', ');\n\n  return (\n    <div\n      role=\"img\"\n      aria-label={ariaLabel ?? defaultLabel}\n      className={[styles.track, className].filter(Boolean).join(' ')}\n      {...props}\n    >\n      {values.map((segment, i) => {\n        const width = `${(segment.value / total) * 100}%`;\n        const pct = segment.value % 1 === 0 ? segment.value : segment.value.toFixed(1);\n        const tooltipLabel = `${segment.label}: ${pct}%`;\n\n        return (\n          <Tooltip key={segment.label} label={tooltipLabel} placement=\"top\" delay={200}>\n            <div\n              className={[\n                styles.segment,\n                !segment.color ? styles[`color${i % COLOR_COUNT}`] : null,\n                activeIndex !== null && activeIndex !== i ? styles.dimmed : null,\n                activeIndex === i ? styles.highlighted : null,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              style={{\n                width,\n                ...(segment.color ? { backgroundColor: segment.color } : {}),\n              }}\n              onMouseEnter={() => setActiveIndex(i)}\n              onMouseLeave={() => setActiveIndex(null)}\n            />\n          </Tooltip>\n        );\n      })}\n    </div>\n  );\n});\n"],"mappings":";;;;;AAiCA,IAAM,IAAc,GAkBP,IAAe,EAAK,SAAsB,EACrD,WACA,cACA,cAAc,GACd,GAAG,KACiB;CACpB,IAAM,CAAC,GAAa,KAAkB,EAAwB,IAAI,GAE5D,IAAQ,EAAO,QAAQ,GAAK,MAAM,IAAM,EAAE,OAAO,CAAC,KAAK,KAEvD,IAAe,EAAO,KAAK,MAAM,GAAG,EAAE,MAAM,GAAG,EAAE,MAAM,EAAE,EAAE,KAAK,IAAI;CAE1E,OACE,kBAAC,OAAD;EACE,MAAK;EACL,cAAY,KAAa;EACzB,WAAW,CAAC,EAAO,OAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;EAC7D,GAAI;YAEH,EAAO,KAAK,GAAS,MAAM;GAC1B,IAAM,IAAQ,GAAI,EAAQ,QAAQ,IAAS,IAAI,IACzC,IAAM,EAAQ,QAAQ,KAAM,IAAI,EAAQ,QAAQ,EAAQ,MAAM,QAAQ,CAAC;GAG7E,OACE,kBAAC,GAAD;IAA6B,OAAO,GAHd,EAAQ,MAAM,IAAI,EAAI;IAGM,WAAU;IAAM,OAAO;cACvE,kBAAC,OAAD;KACE,WAAW;MACT,EAAO;MACN,EAAQ,QAA4C,OAApC,EAAO,QAAQ,IAAI;MACpC,MAAgB,QAAQ,MAAgB,IAAI,EAAO,SAAS;MAC5D,MAAgB,IAAI,EAAO,cAAc;KAC3C,EACG,OAAO,OAAO,EACd,KAAK,GAAG;KACX,OAAO;MACL;MACA,GAAI,EAAQ,QAAQ,EAAE,iBAAiB,EAAQ,MAAM,IAAI,CAAC;KAC5D;KACA,oBAAoB,EAAe,CAAC;KACpC,oBAAoB,EAAe,IAAI;IACxC,CAAA;GACM,GAjBK,EAAQ,KAiBb;EAEb,CAAC;CACE,CAAA;AAET,CAAC"}

package/dist/components/SegmentedBar.cjs

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

package/dist/components/Separator/Separator.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Separator.module.css.cjs`);let t=require(`react/jsx-runtime`);function n({orientation:n=`horizontal`,className:r,...i}){let a=[e.default.separator,n===`vertical`?e.default.vertical:e.default.horizontal,r].filter(Boolean).join(` `);return n===`vertical`?(0,t.jsx)(`div`,{role:`separator`,"aria-orientation":`vertical`,className:a,...i}):(0,t.jsx)(`hr`,{className:a,...i})}exports.Separator=n;
+const e=require("./Separator.module.css.cjs");let t=require("react/jsx-runtime");var n=({orientation:n=`horizontal`,className:r,...i})=>{let a=[e.default.separator,n===`vertical`?e.default.vertical:e.default.horizontal,r].filter(Boolean).join(` `);return n===`vertical`?(0,t.jsx)(`div`,{role:`separator`,"aria-orientation":`vertical`,className:a,...i}):(0,t.jsx)(`hr`,{className:a,...i})};exports.Separator=n;
 //# sourceMappingURL=Separator.cjs.map

package/dist/components/Separator/Separator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.cjs","names":[],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './Separator.module.css';\n\nexport type SeparatorOrientation = 'horizontal' | 'vertical';\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {\n  /** Direction of the dividing line. Defaults to `\"horizontal\"`. */\n  orientation?: SeparatorOrientation;\n}\n\n/**\n * Thin dividing line that separates groups of content.\n *\n * Renders as `<hr>` (horizontal) or a `<div role=\"separator\">` (vertical).\n * Color is driven entirely by design tokens and adapts to dark mode automatically.\n *\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function Separator({ orientation = 'horizontal', className, ...props }: SeparatorProps) {\n  const classes = [\n    styles.separator,\n    orientation === 'vertical' ? styles.vertical : styles.horizontal,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  if (orientation === 'vertical') {\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={classes}\n        {...(props as HTMLAttributes<HTMLDivElement>)}\n      />\n    );\n  }\n\n  return <hr className={classes} {...props} />;\n}\n"],"mappings":"iFAmBA,SAAgB,EAAU,CAAE,cAAc,aAAc,YAAW,GAAG,GAAyB,CAC7F,IAAM,EAAU,CACd,EAAA,QAAO,UACP,IAAgB,WAAa,EAAA,QAAO,SAAW,EAAA,QAAO,WACtD,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAaZ,OAXI,IAAgB,YAEhB,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,YACL,mBAAiB,WACjB,UAAW,EACX,GAAK,EACL,CAAA,EAIC,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAS,GAAI,EAAS,CAAA"}
+{"version":3,"file":"Separator.cjs","names":[],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './Separator.module.css';\n\nexport type SeparatorOrientation = 'horizontal' | 'vertical';\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {\n  /** Direction of the dividing line. Defaults to `\"horizontal\"`. */\n  orientation?: SeparatorOrientation;\n}\n\n/**\n * Thin dividing line that separates groups of content.\n *\n * Renders as `<hr>` (horizontal) or a `<div role=\"separator\">` (vertical).\n * Color is driven entirely by design tokens and adapts to dark mode automatically.\n *\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport const Separator = ({ orientation = 'horizontal', className, ...props }: SeparatorProps) => {\n  const classes = [\n    styles.separator,\n    orientation === 'vertical' ? styles.vertical : styles.horizontal,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  if (orientation === 'vertical') {\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={classes}\n        {...(props as HTMLAttributes<HTMLDivElement>)}\n      />\n    );\n  }\n\n  return <hr className={classes} {...props} />;\n};\n"],"mappings":"iFAmBA,IAAa,GAAa,CAAE,cAAc,aAAc,YAAW,GAAG,KAA4B,CAChG,IAAM,EAAU,CACd,EAAA,QAAO,UACP,IAAgB,WAAa,EAAA,QAAO,SAAW,EAAA,QAAO,WACtD,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG,EAaX,OAXI,IAAgB,YAEhB,EAAA,EAAA,KAAC,MAAD,CACE,KAAK,YACL,mBAAiB,WACjB,UAAW,EACX,GAAK,CACN,CAAA,GAIE,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAS,GAAI,CAAQ,CAAA,CAC7C"}

package/dist/components/Separator/Separator.d.ts

@@ -12,4 +12,4 @@ export interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {
  *
  * @see https://developer.gnome.org/hig/patterns/containers.html
  */
-export declare function Separator({ orientation, className, ...props }: SeparatorProps): import("react/jsx-runtime").JSX.Element;
+export declare const Separator: ({ orientation, className, ...props }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Separator/Separator.js

@@ -1,7 +1,7 @@
 import e from "./Separator.module.css.js";
 import { jsx as t } from "react/jsx-runtime";
 //#region src/components/Separator/Separator.tsx
-function n({ orientation: n = "horizontal", className: r, ...i }) {
+var n = ({ orientation: n = "horizontal", className: r, ...i }) => {
 	let a = [
 		e.separator,
 		n === "vertical" ? e.vertical : e.horizontal,
@@ -16,7 +16,7 @@ function n({ orientation: n = "horizontal", className: r, ...i }) {
 		className: a,
 		...i
 	});
-}
+};
 //#endregion
 export { n as Separator };
 

package/dist/components/Separator/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","names":[],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './Separator.module.css';\n\nexport type SeparatorOrientation = 'horizontal' | 'vertical';\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {\n  /** Direction of the dividing line. Defaults to `\"horizontal\"`. */\n  orientation?: SeparatorOrientation;\n}\n\n/**\n * Thin dividing line that separates groups of content.\n *\n * Renders as `<hr>` (horizontal) or a `<div role=\"separator\">` (vertical).\n * Color is driven entirely by design tokens and adapts to dark mode automatically.\n *\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function Separator({ orientation = 'horizontal', className, ...props }: SeparatorProps) {\n  const classes = [\n    styles.separator,\n    orientation === 'vertical' ? styles.vertical : styles.horizontal,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  if (orientation === 'vertical') {\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={classes}\n        {...(props as HTMLAttributes<HTMLDivElement>)}\n      />\n    );\n  }\n\n  return <hr className={classes} {...props} />;\n}\n"],"mappings":";;;AAmBA,SAAgB,EAAU,EAAE,iBAAc,cAAc,cAAW,GAAG,KAAyB;CAC7F,IAAM,IAAU;EACd,EAAO;EACP,MAAgB,aAAa,EAAO,WAAW,EAAO;EACtD;EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;AAaZ,QAXI,MAAgB,aAEhB,kBAAC,OAAD;EACE,MAAK;EACL,oBAAiB;EACjB,WAAW;EACX,GAAK;EACL,CAAA,GAIC,kBAAC,MAAD;EAAI,WAAW;EAAS,GAAI;EAAS,CAAA"}
+{"version":3,"file":"Separator.js","names":[],"sources":["../../../src/components/Separator/Separator.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './Separator.module.css';\n\nexport type SeparatorOrientation = 'horizontal' | 'vertical';\n\nexport interface SeparatorProps extends HTMLAttributes<HTMLHRElement> {\n  /** Direction of the dividing line. Defaults to `\"horizontal\"`. */\n  orientation?: SeparatorOrientation;\n}\n\n/**\n * Thin dividing line that separates groups of content.\n *\n * Renders as `<hr>` (horizontal) or a `<div role=\"separator\">` (vertical).\n * Color is driven entirely by design tokens and adapts to dark mode automatically.\n *\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport const Separator = ({ orientation = 'horizontal', className, ...props }: SeparatorProps) => {\n  const classes = [\n    styles.separator,\n    orientation === 'vertical' ? styles.vertical : styles.horizontal,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  if (orientation === 'vertical') {\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        className={classes}\n        {...(props as HTMLAttributes<HTMLDivElement>)}\n      />\n    );\n  }\n\n  return <hr className={classes} {...props} />;\n};\n"],"mappings":";;;AAmBA,IAAa,KAAa,EAAE,iBAAc,cAAc,cAAW,GAAG,QAA4B;CAChG,IAAM,IAAU;EACd,EAAO;EACP,MAAgB,aAAa,EAAO,WAAW,EAAO;EACtD;CACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;CAaX,OAXI,MAAgB,aAEhB,kBAAC,OAAD;EACE,MAAK;EACL,oBAAiB;EACjB,WAAW;EACX,GAAK;CACN,CAAA,IAIE,kBAAC,MAAD;EAAI,WAAW;EAAS,GAAI;CAAQ,CAAA;AAC7C"}

package/dist/components/Separator.cjs

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

package/dist/components/ShortcutLabel/ShortcutLabel.cjs

@@ -1,2 +1,2 @@
-const e=require(`./ShortcutLabel.module.css.cjs`);let t=require(`react/jsx-runtime`);var n={ctrl:`⌃`,control:`⌃`,shift:`⇧`,alt:`⌥`,option:`⌥`,super:`⊞`,win:`⊞`,cmd:`⌘`,command:`⌘`,meta:`⌘`,up:`↑`,down:`↓`,left:`←`,right:`→`,enter:`↵`,return:`↵`,backspace:`⌫`,delete:`⌦`,escape:`⎋`,esc:`⎋`,tab:`⇥`,space:`␣`,pageup:`⇞`,pagedown:`⇟`,home:`⇱`,end:`⇲`};function r({shortcut:r,symbols:i=!0,className:a,...o}){let s=r.split(`+`).map(e=>e.trim()).filter(Boolean);return(0,t.jsx)(`span`,{className:[e.default.label,a].filter(Boolean).join(` `),"aria-label":r,...o,children:s.map((r,a)=>{let o=i?n[r.toLowerCase()]??r:r;return(0,t.jsx)(`kbd`,{className:e.default.key,children:o},a)})})}exports.ShortcutLabel=r;
+const e=require("./ShortcutLabel.module.css.cjs");let t=require("react/jsx-runtime");var n={ctrl:`⌃`,control:`⌃`,shift:`⇧`,alt:`⌥`,option:`⌥`,super:`⊞`,win:`⊞`,cmd:`⌘`,command:`⌘`,meta:`⌘`,up:`↑`,down:`↓`,left:`←`,right:`→`,enter:`↵`,return:`↵`,backspace:`⌫`,delete:`⌦`,escape:`⎋`,esc:`⎋`,tab:`⇥`,space:`␣`,pageup:`⇞`,pagedown:`⇟`,home:`⇱`,end:`⇲`},r=({shortcut:r,symbols:i=!0,className:a,...o})=>{let s=r.split(`+`).map(e=>e.trim()).filter(Boolean);return(0,t.jsx)(`span`,{className:[e.default.label,a].filter(Boolean).join(` `),"aria-label":r,...o,children:s.map((r,a)=>{let o=i?n[r.toLowerCase()]??r:r;return(0,t.jsx)(`kbd`,{className:e.default.key,children:o},a)})})};exports.ShortcutLabel=r;
 //# sourceMappingURL=ShortcutLabel.cjs.map

package/dist/components/ShortcutLabel/ShortcutLabel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutLabel.cjs","names":[],"sources":["../../../src/components/ShortcutLabel/ShortcutLabel.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './ShortcutLabel.module.css';\n\nexport interface ShortcutLabelProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Keyboard shortcut string.\n   *\n   * Tokens are separated by `+`. Each token is rendered as its own key cap.\n   * Common modifiers are normalised to their symbol:\n   * - `Ctrl` / `Control` → `⌃`\n   * - `Shift` → `⇧`\n   * - `Alt` / `Option` → `⌥`\n   * - `Super` / `Win` / `Cmd` / `Command` → `⊞`\n   * - `Up` → `↑`  `Down` → `↓`  `Left` → `←`  `Right` → `→`\n   * - `Enter` / `Return` → `↵`\n   * - `Backspace` → `⌫`\n   * - `Delete` → `⌦`\n   * - `Escape` / `Esc` → `⎋`\n   * - `Tab` → `⇥`\n   * - `Space` → `␣`\n   *\n   * @example \"Ctrl+S\"   →  ⌃ S\n   * @example \"Ctrl+Shift+Z\" → ⌃ ⇧ Z\n   */\n  shortcut: string;\n  /** When true, modifier tokens are shown as symbols. Defaults to `true`. */\n  symbols?: boolean;\n}\n\nconst SYMBOL_MAP: Record<string, string> = {\n  ctrl: '⌃',\n  control: '⌃',\n  shift: '⇧',\n  alt: '⌥',\n  option: '⌥',\n  super: '⊞',\n  win: '⊞',\n  cmd: '⌘',\n  command: '⌘',\n  meta: '⌘',\n  up: '↑',\n  down: '↓',\n  left: '←',\n  right: '→',\n  enter: '↵',\n  return: '↵',\n  backspace: '⌫',\n  delete: '⌦',\n  escape: '⎋',\n  esc: '⎋',\n  tab: '⇥',\n  space: '␣',\n  pageup: '⇞',\n  pagedown: '⇟',\n  home: '⇱',\n  end: '⇲',\n};\n\n/**\n * Read-only display of a keyboard shortcut with per-key key-cap styling.\n *\n * Each token in the `shortcut` string (split by `+`) is rendered as a\n * separate `<kbd>` element. Modifier keys are normalised to their Unicode\n * symbols by default.\n *\n * Mirrors `GtkShortcutLabel`.\n *\n * @see https://docs.gtk.org/gtk4/class.ShortcutLabel.html\n */\nexport function ShortcutLabel({\n  shortcut,\n  symbols = true,\n  className,\n  ...props\n}: ShortcutLabelProps) {\n  const tokens = shortcut\n    .split('+')\n    .map((t) => t.trim())\n    .filter(Boolean);\n\n  return (\n    <span\n      className={[styles.label, className].filter(Boolean).join(' ')}\n      aria-label={shortcut}\n      {...props}\n    >\n      {tokens.map((token, i) => {\n        const display = symbols ? (SYMBOL_MAP[token.toLowerCase()] ?? token) : token;\n\n        return (\n          <kbd key={i} className={styles.key}>\n            {display}\n          </kbd>\n        );\n      })}\n    </span>\n  );\n}\n"],"mappings":"qFA8BA,IAAM,EAAqC,CACzC,KAAM,IACN,QAAS,IACT,MAAO,IACP,IAAK,IACL,OAAQ,IACR,MAAO,IACP,IAAK,IACL,IAAK,IACL,QAAS,IACT,KAAM,IACN,GAAI,IACJ,KAAM,IACN,KAAM,IACN,MAAO,IACP,MAAO,IACP,OAAQ,IACR,UAAW,IACX,OAAQ,IACR,OAAQ,IACR,IAAK,IACL,IAAK,IACL,MAAO,IACP,OAAQ,IACR,SAAU,IACV,KAAM,IACN,IAAK,IACN,CAaD,SAAgB,EAAc,CAC5B,WACA,UAAU,GACV,YACA,GAAG,GACkB,CACrB,IAAM,EAAS,EACZ,MAAM,IAAI,CACV,IAAK,GAAM,EAAE,MAAM,CAAC,CACpB,OAAO,QAAQ,CAElB,OACE,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,CAAC,EAAA,QAAO,MAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAC9D,aAAY,EACZ,GAAI,WAEH,EAAO,KAAK,EAAO,IAAM,CACxB,IAAM,EAAU,EAAW,EAAW,EAAM,aAAa,GAAK,EAAS,EAEvE,OACE,EAAA,EAAA,KAAC,MAAD,CAAa,UAAW,EAAA,QAAO,aAC5B,EACG,CAFI,EAEJ,EAER,CACG,CAAA"}
+{"version":3,"file":"ShortcutLabel.cjs","names":[],"sources":["../../../src/components/ShortcutLabel/ShortcutLabel.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './ShortcutLabel.module.css';\n\nexport interface ShortcutLabelProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Keyboard shortcut string.\n   *\n   * Tokens are separated by `+`. Each token is rendered as its own key cap.\n   * Common modifiers are normalised to their symbol:\n   * - `Ctrl` / `Control` → `⌃`\n   * - `Shift` → `⇧`\n   * - `Alt` / `Option` → `⌥`\n   * - `Super` / `Win` / `Cmd` / `Command` → `⊞`\n   * - `Up` → `↑`  `Down` → `↓`  `Left` → `←`  `Right` → `→`\n   * - `Enter` / `Return` → `↵`\n   * - `Backspace` → `⌫`\n   * - `Delete` → `⌦`\n   * - `Escape` / `Esc` → `⎋`\n   * - `Tab` → `⇥`\n   * - `Space` → `␣`\n   *\n   * @example \"Ctrl+S\"   →  ⌃ S\n   * @example \"Ctrl+Shift+Z\" → ⌃ ⇧ Z\n   */\n  shortcut: string;\n  /** When true, modifier tokens are shown as symbols. Defaults to `true`. */\n  symbols?: boolean;\n}\n\nconst SYMBOL_MAP: Record<string, string> = {\n  ctrl: '⌃',\n  control: '⌃',\n  shift: '⇧',\n  alt: '⌥',\n  option: '⌥',\n  super: '⊞',\n  win: '⊞',\n  cmd: '⌘',\n  command: '⌘',\n  meta: '⌘',\n  up: '↑',\n  down: '↓',\n  left: '←',\n  right: '→',\n  enter: '↵',\n  return: '↵',\n  backspace: '⌫',\n  delete: '⌦',\n  escape: '⎋',\n  esc: '⎋',\n  tab: '⇥',\n  space: '␣',\n  pageup: '⇞',\n  pagedown: '⇟',\n  home: '⇱',\n  end: '⇲',\n};\n\n/**\n * Read-only display of a keyboard shortcut with per-key key-cap styling.\n *\n * Each token in the `shortcut` string (split by `+`) is rendered as a\n * separate `<kbd>` element. Modifier keys are normalised to their Unicode\n * symbols by default.\n *\n * Mirrors `GtkShortcutLabel`.\n *\n * @see https://docs.gtk.org/gtk4/class.ShortcutLabel.html\n */\nexport const ShortcutLabel = ({\n  shortcut,\n  symbols = true,\n  className,\n  ...props\n}: ShortcutLabelProps) => {\n  const tokens = shortcut\n    .split('+')\n    .map((t) => t.trim())\n    .filter(Boolean);\n\n  return (\n    <span\n      className={[styles.label, className].filter(Boolean).join(' ')}\n      aria-label={shortcut}\n      {...props}\n    >\n      {tokens.map((token, i) => {\n        const display = symbols ? (SYMBOL_MAP[token.toLowerCase()] ?? token) : token;\n\n        return (\n          <kbd key={i} className={styles.key}>\n            {display}\n          </kbd>\n        );\n      })}\n    </span>\n  );\n};\n"],"mappings":"qFA8BA,IAAM,EAAqC,CACzC,KAAM,IACN,QAAS,IACT,MAAO,IACP,IAAK,IACL,OAAQ,IACR,MAAO,IACP,IAAK,IACL,IAAK,IACL,QAAS,IACT,KAAM,IACN,GAAI,IACJ,KAAM,IACN,KAAM,IACN,MAAO,IACP,MAAO,IACP,OAAQ,IACR,UAAW,IACX,OAAQ,IACR,OAAQ,IACR,IAAK,IACL,IAAK,IACL,MAAO,IACP,OAAQ,IACR,SAAU,IACV,KAAM,IACN,IAAK,GACP,EAaa,GAAiB,CAC5B,WACA,UAAU,GACV,YACA,GAAG,KACqB,CACxB,IAAM,EAAS,EACZ,MAAM,GAAG,EACT,IAAK,GAAM,EAAE,KAAK,CAAC,EACnB,OAAO,OAAO,EAEjB,OACE,EAAA,EAAA,KAAC,OAAD,CACE,UAAW,CAAC,EAAA,QAAO,MAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAC7D,aAAY,EACZ,GAAI,WAEH,EAAO,KAAK,EAAO,IAAM,CACxB,IAAM,EAAU,EAAW,EAAW,EAAM,YAAY,IAAM,EAAS,EAEvE,OACE,EAAA,EAAA,KAAC,MAAD,CAAa,UAAW,EAAA,QAAO,aAC5B,CACE,EAFK,CAEL,CAET,CAAC,CACG,CAAA,CAEV"}

package/dist/components/ShortcutLabel/ShortcutLabel.d.ts

@@ -35,4 +35,4 @@ export interface ShortcutLabelProps extends HTMLAttributes<HTMLSpanElement> {
  *
  * @see https://docs.gtk.org/gtk4/class.ShortcutLabel.html
  */
-export declare function ShortcutLabel({ shortcut, symbols, className, ...props }: ShortcutLabelProps): import("react/jsx-runtime").JSX.Element;
+export declare const ShortcutLabel: ({ shortcut, symbols, className, ...props }: ShortcutLabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/ShortcutLabel/ShortcutLabel.js

@@ -28,8 +28,7 @@ var n = {
 	pagedown: "⇟",
 	home: "⇱",
 	end: "⇲"
-};
-function r({ shortcut: r, symbols: i = !0, className: a, ...o }) {
+}, r = ({ shortcut: r, symbols: i = !0, className: a, ...o }) => {
 	let s = r.split("+").map((e) => e.trim()).filter(Boolean);
 	return /* @__PURE__ */ t("span", {
 		className: [e.label, a].filter(Boolean).join(" "),
@@ -43,7 +42,7 @@ function r({ shortcut: r, symbols: i = !0, className: a, ...o }) {
 			}, a);
 		})
 	});
-}
+};
 //#endregion
 export { r as ShortcutLabel };
 

package/dist/components/ShortcutLabel/ShortcutLabel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutLabel.js","names":[],"sources":["../../../src/components/ShortcutLabel/ShortcutLabel.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './ShortcutLabel.module.css';\n\nexport interface ShortcutLabelProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Keyboard shortcut string.\n   *\n   * Tokens are separated by `+`. Each token is rendered as its own key cap.\n   * Common modifiers are normalised to their symbol:\n   * - `Ctrl` / `Control` → `⌃`\n   * - `Shift` → `⇧`\n   * - `Alt` / `Option` → `⌥`\n   * - `Super` / `Win` / `Cmd` / `Command` → `⊞`\n   * - `Up` → `↑`  `Down` → `↓`  `Left` → `←`  `Right` → `→`\n   * - `Enter` / `Return` → `↵`\n   * - `Backspace` → `⌫`\n   * - `Delete` → `⌦`\n   * - `Escape` / `Esc` → `⎋`\n   * - `Tab` → `⇥`\n   * - `Space` → `␣`\n   *\n   * @example \"Ctrl+S\"   →  ⌃ S\n   * @example \"Ctrl+Shift+Z\" → ⌃ ⇧ Z\n   */\n  shortcut: string;\n  /** When true, modifier tokens are shown as symbols. Defaults to `true`. */\n  symbols?: boolean;\n}\n\nconst SYMBOL_MAP: Record<string, string> = {\n  ctrl: '⌃',\n  control: '⌃',\n  shift: '⇧',\n  alt: '⌥',\n  option: '⌥',\n  super: '⊞',\n  win: '⊞',\n  cmd: '⌘',\n  command: '⌘',\n  meta: '⌘',\n  up: '↑',\n  down: '↓',\n  left: '←',\n  right: '→',\n  enter: '↵',\n  return: '↵',\n  backspace: '⌫',\n  delete: '⌦',\n  escape: '⎋',\n  esc: '⎋',\n  tab: '⇥',\n  space: '␣',\n  pageup: '⇞',\n  pagedown: '⇟',\n  home: '⇱',\n  end: '⇲',\n};\n\n/**\n * Read-only display of a keyboard shortcut with per-key key-cap styling.\n *\n * Each token in the `shortcut` string (split by `+`) is rendered as a\n * separate `<kbd>` element. Modifier keys are normalised to their Unicode\n * symbols by default.\n *\n * Mirrors `GtkShortcutLabel`.\n *\n * @see https://docs.gtk.org/gtk4/class.ShortcutLabel.html\n */\nexport function ShortcutLabel({\n  shortcut,\n  symbols = true,\n  className,\n  ...props\n}: ShortcutLabelProps) {\n  const tokens = shortcut\n    .split('+')\n    .map((t) => t.trim())\n    .filter(Boolean);\n\n  return (\n    <span\n      className={[styles.label, className].filter(Boolean).join(' ')}\n      aria-label={shortcut}\n      {...props}\n    >\n      {tokens.map((token, i) => {\n        const display = symbols ? (SYMBOL_MAP[token.toLowerCase()] ?? token) : token;\n\n        return (\n          <kbd key={i} className={styles.key}>\n            {display}\n          </kbd>\n        );\n      })}\n    </span>\n  );\n}\n"],"mappings":";;;AA8BA,IAAM,IAAqC;CACzC,MAAM;CACN,SAAS;CACT,OAAO;CACP,KAAK;CACL,QAAQ;CACR,OAAO;CACP,KAAK;CACL,KAAK;CACL,SAAS;CACT,MAAM;CACN,IAAI;CACJ,MAAM;CACN,MAAM;CACN,OAAO;CACP,OAAO;CACP,QAAQ;CACR,WAAW;CACX,QAAQ;CACR,QAAQ;CACR,KAAK;CACL,KAAK;CACL,OAAO;CACP,QAAQ;CACR,UAAU;CACV,MAAM;CACN,KAAK;CACN;AAaD,SAAgB,EAAc,EAC5B,aACA,aAAU,IACV,cACA,GAAG,KACkB;CACrB,IAAM,IAAS,EACZ,MAAM,IAAI,CACV,KAAK,MAAM,EAAE,MAAM,CAAC,CACpB,OAAO,QAAQ;AAElB,QACE,kBAAC,QAAD;EACE,WAAW,CAAC,EAAO,OAAO,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAC9D,cAAY;EACZ,GAAI;YAEH,EAAO,KAAK,GAAO,MAAM;GACxB,IAAM,IAAU,IAAW,EAAW,EAAM,aAAa,KAAK,IAAS;AAEvE,UACE,kBAAC,OAAD;IAAa,WAAW,EAAO;cAC5B;IACG,EAFI,EAEJ;IAER;EACG,CAAA"}
+{"version":3,"file":"ShortcutLabel.js","names":[],"sources":["../../../src/components/ShortcutLabel/ShortcutLabel.tsx"],"sourcesContent":["import type { HTMLAttributes } from 'react';\n\nimport styles from './ShortcutLabel.module.css';\n\nexport interface ShortcutLabelProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Keyboard shortcut string.\n   *\n   * Tokens are separated by `+`. Each token is rendered as its own key cap.\n   * Common modifiers are normalised to their symbol:\n   * - `Ctrl` / `Control` → `⌃`\n   * - `Shift` → `⇧`\n   * - `Alt` / `Option` → `⌥`\n   * - `Super` / `Win` / `Cmd` / `Command` → `⊞`\n   * - `Up` → `↑`  `Down` → `↓`  `Left` → `←`  `Right` → `→`\n   * - `Enter` / `Return` → `↵`\n   * - `Backspace` → `⌫`\n   * - `Delete` → `⌦`\n   * - `Escape` / `Esc` → `⎋`\n   * - `Tab` → `⇥`\n   * - `Space` → `␣`\n   *\n   * @example \"Ctrl+S\"   →  ⌃ S\n   * @example \"Ctrl+Shift+Z\" → ⌃ ⇧ Z\n   */\n  shortcut: string;\n  /** When true, modifier tokens are shown as symbols. Defaults to `true`. */\n  symbols?: boolean;\n}\n\nconst SYMBOL_MAP: Record<string, string> = {\n  ctrl: '⌃',\n  control: '⌃',\n  shift: '⇧',\n  alt: '⌥',\n  option: '⌥',\n  super: '⊞',\n  win: '⊞',\n  cmd: '⌘',\n  command: '⌘',\n  meta: '⌘',\n  up: '↑',\n  down: '↓',\n  left: '←',\n  right: '→',\n  enter: '↵',\n  return: '↵',\n  backspace: '⌫',\n  delete: '⌦',\n  escape: '⎋',\n  esc: '⎋',\n  tab: '⇥',\n  space: '␣',\n  pageup: '⇞',\n  pagedown: '⇟',\n  home: '⇱',\n  end: '⇲',\n};\n\n/**\n * Read-only display of a keyboard shortcut with per-key key-cap styling.\n *\n * Each token in the `shortcut` string (split by `+`) is rendered as a\n * separate `<kbd>` element. Modifier keys are normalised to their Unicode\n * symbols by default.\n *\n * Mirrors `GtkShortcutLabel`.\n *\n * @see https://docs.gtk.org/gtk4/class.ShortcutLabel.html\n */\nexport const ShortcutLabel = ({\n  shortcut,\n  symbols = true,\n  className,\n  ...props\n}: ShortcutLabelProps) => {\n  const tokens = shortcut\n    .split('+')\n    .map((t) => t.trim())\n    .filter(Boolean);\n\n  return (\n    <span\n      className={[styles.label, className].filter(Boolean).join(' ')}\n      aria-label={shortcut}\n      {...props}\n    >\n      {tokens.map((token, i) => {\n        const display = symbols ? (SYMBOL_MAP[token.toLowerCase()] ?? token) : token;\n\n        return (\n          <kbd key={i} className={styles.key}>\n            {display}\n          </kbd>\n        );\n      })}\n    </span>\n  );\n};\n"],"mappings":";;;AA8BA,IAAM,IAAqC;CACzC,MAAM;CACN,SAAS;CACT,OAAO;CACP,KAAK;CACL,QAAQ;CACR,OAAO;CACP,KAAK;CACL,KAAK;CACL,SAAS;CACT,MAAM;CACN,IAAI;CACJ,MAAM;CACN,MAAM;CACN,OAAO;CACP,OAAO;CACP,QAAQ;CACR,WAAW;CACX,QAAQ;CACR,QAAQ;CACR,KAAK;CACL,KAAK;CACL,OAAO;CACP,QAAQ;CACR,UAAU;CACV,MAAM;CACN,KAAK;AACP,GAaa,KAAiB,EAC5B,aACA,aAAU,IACV,cACA,GAAG,QACqB;CACxB,IAAM,IAAS,EACZ,MAAM,GAAG,EACT,KAAK,MAAM,EAAE,KAAK,CAAC,EACnB,OAAO,OAAO;CAEjB,OACE,kBAAC,QAAD;EACE,WAAW,CAAC,EAAO,OAAO,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;EAC7D,cAAY;EACZ,GAAI;YAEH,EAAO,KAAK,GAAO,MAAM;GACxB,IAAM,IAAU,IAAW,EAAW,EAAM,YAAY,MAAM,IAAS;GAEvE,OACE,kBAAC,OAAD;IAAa,WAAW,EAAO;cAC5B;GACE,GAFK,CAEL;EAET,CAAC;CACG,CAAA;AAEV"}

package/dist/components/ShortcutLabel.cjs

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

package/dist/components/ShortcutsDialog/ShortcutsDialog.cjs

@@ -1,2 +1,2 @@
-const e=require(`./ShortcutsDialog.module.css.cjs`);let t=require(`react`),n=require(`react-dom`),r=require(`react/jsx-runtime`);var i=`button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])`;function a({open:a,onClose:o,title:s=`Keyboard Shortcuts`,sections:c}){let[l,u]=(0,t.useState)(``),d=(0,t.useRef)(null),f=(0,t.useRef)(null),p=(0,t.useRef)(null),m=(0,t.useRef)(`shortcuts-title-${Math.random().toString(36).slice(2,9)}`);(0,t.useEffect)(()=>{a?(p.current=document.activeElement,requestAnimationFrame(()=>f.current?.focus())):(u(``),p.current?.focus())},[a]);let h=(0,t.useCallback)(e=>{if(e.key===`Escape`){e.preventDefault(),o();return}if(e.key!==`Tab`)return;let t=Array.from(d.current?.querySelectorAll(i)??[]);if(t.length===0)return;let n=t[0],r=t[t.length-1];e.shiftKey?document.activeElement===n&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),n.focus())},[o]);if(!a)return null;let g=l.trim().toLowerCase(),_=c.map(e=>({...e,shortcuts:e.shortcuts.filter(({description:e,keys:t})=>!g||e.toLowerCase().includes(g)||t.some(e=>e.toLowerCase().includes(g)))})).filter(e=>e.shortcuts.length>0),v=(0,r.jsx)(`div`,{className:e.default.backdrop,onClick:o,"aria-hidden":`true`,children:(0,r.jsxs)(`div`,{ref:d,role:`dialog`,"aria-modal":`true`,"aria-labelledby":m.current,className:e.default.dialog,onKeyDown:h,onClick:e=>e.stopPropagation(),children:[(0,r.jsxs)(`div`,{className:e.default.header,children:[(0,r.jsx)(`span`,{id:m.current,className:e.default.title,children:s}),(0,r.jsx)(`button`,{type:`button`,className:e.default.closeBtn,"aria-label":`Close`,onClick:o,children:`×`})]}),(0,r.jsxs)(`div`,{className:e.default.searchRow,children:[(0,r.jsx)(`span`,{className:e.default.searchIcon,"aria-hidden":`true`,children:`⌕`}),(0,r.jsx)(`input`,{ref:f,type:`search`,className:e.default.searchInput,placeholder:`Search shortcuts…`,value:l,onChange:e=>u(e.target.value),"aria-label":`Search shortcuts`}),l&&(0,r.jsx)(`button`,{type:`button`,className:e.default.searchClear,"aria-label":`Clear search`,onClick:()=>{u(``),f.current?.focus()},children:`×`})]}),(0,r.jsx)(`div`,{className:e.default.body,role:`list`,children:_.length===0?(0,r.jsxs)(`p`,{className:e.default.empty,children:[`No shortcuts match "`,l,`"`]}):_.map(t=>(0,r.jsxs)(`section`,{className:e.default.section,children:[(0,r.jsx)(`h3`,{className:e.default.sectionTitle,children:t.title}),(0,r.jsx)(`ul`,{className:e.default.list,children:t.shortcuts.map(t=>(0,r.jsxs)(`li`,{className:e.default.row,children:[(0,r.jsx)(`span`,{className:e.default.keys,"aria-label":t.keys.join(` + `),children:t.keys.map((n,i)=>(0,r.jsxs)(`span`,{className:e.default.keyCap,children:[(0,r.jsx)(`kbd`,{children:n}),i<t.keys.length-1&&(0,r.jsx)(`span`,{className:e.default.plus,"aria-hidden":`true`,children:`+`})]},i))}),(0,r.jsx)(`span`,{className:e.default.description,children:t.description})]},t.description))})]},t.title))})]})});return typeof document>`u`?v:(0,n.createPortal)(v,document.body)}exports.ShortcutsDialog=a;
+const e=require("../Dialog/dialogUtils.cjs"),t=require("./ShortcutsDialog.module.css.cjs");let n=require("react"),r=require("react-dom"),i=require("react/jsx-runtime");var a=`button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])`,o=({open:o,onClose:s,title:c=`Keyboard Shortcuts`,sections:l})=>{let[u,d]=(0,n.useState)(``),f=(0,n.useRef)(null),p=(0,n.useRef)(null),m=(0,n.useRef)(null),h=(0,n.useRef)(`shortcuts-title-${Math.random().toString(36).slice(2,9)}`);e.useBodyScrollLock(o),(0,n.useEffect)(()=>{o?(m.current=document.activeElement,requestAnimationFrame(()=>p.current?.focus())):(d(``),m.current?.focus())},[o]);let g=(0,n.useCallback)(e=>{if(e.key===`Escape`){e.preventDefault(),s();return}if(e.key!==`Tab`)return;let t=Array.from(f.current?.querySelectorAll(a)??[]);if(t.length===0)return;let n=t[0],r=t[t.length-1];e.shiftKey?document.activeElement===n&&(e.preventDefault(),r.focus()):document.activeElement===r&&(e.preventDefault(),n.focus())},[s]);if(!o)return null;let _=u.trim().toLowerCase(),v=l.map(e=>({...e,shortcuts:e.shortcuts.filter(({description:e,keys:t})=>!_||e.toLowerCase().includes(_)||t.some(e=>e.toLowerCase().includes(_)))})).filter(e=>e.shortcuts.length>0),y=(0,i.jsx)(`div`,{className:t.default.backdrop,onClick:s,children:(0,i.jsxs)(`div`,{ref:f,role:`dialog`,"aria-modal":`true`,"aria-labelledby":h.current,className:t.default.dialog,onKeyDown:g,onClick:e=>e.stopPropagation(),children:[(0,i.jsxs)(`div`,{className:t.default.header,children:[(0,i.jsx)(`span`,{id:h.current,className:t.default.title,children:c}),(0,i.jsx)(`button`,{type:`button`,className:t.default.closeBtn,"aria-label":`Close`,onClick:s,children:`×`})]}),(0,i.jsxs)(`div`,{className:t.default.searchRow,children:[(0,i.jsx)(`span`,{className:t.default.searchIcon,"aria-hidden":`true`,children:`⌕`}),(0,i.jsx)(`input`,{ref:p,type:`search`,className:t.default.searchInput,placeholder:`Search shortcuts…`,value:u,onChange:e=>d(e.target.value),"aria-label":`Search shortcuts`}),u&&(0,i.jsx)(`button`,{type:`button`,className:t.default.searchClear,"aria-label":`Clear search`,onClick:()=>{d(``),p.current?.focus()},children:`×`})]}),(0,i.jsx)(`div`,{className:t.default.body,role:`list`,children:v.length===0?(0,i.jsxs)(`p`,{className:t.default.empty,children:[`No shortcuts match "`,u,`"`]}):v.map(e=>(0,i.jsxs)(`section`,{className:t.default.section,children:[(0,i.jsx)(`h3`,{className:t.default.sectionTitle,children:e.title}),(0,i.jsx)(`ul`,{className:t.default.list,children:e.shortcuts.map(e=>(0,i.jsxs)(`li`,{className:t.default.row,children:[(0,i.jsx)(`span`,{className:t.default.keys,"aria-label":e.keys.join(` + `),children:e.keys.map((n,r)=>(0,i.jsxs)(`span`,{className:t.default.keyCap,children:[(0,i.jsx)(`kbd`,{children:n}),r<e.keys.length-1&&(0,i.jsx)(`span`,{className:t.default.plus,"aria-hidden":`true`,children:`+`})]},r))}),(0,i.jsx)(`span`,{className:t.default.description,children:e.description})]},e.description))})]},e.title))})]})});return typeof document>`u`?y:(0,r.createPortal)(y,document.body)};exports.ShortcutsDialog=o;
 //# sourceMappingURL=ShortcutsDialog.cjs.map

package/dist/components/ShortcutsDialog/ShortcutsDialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ShortcutsDialog.cjs","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.tsx"],"sourcesContent":["import { type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport styles from './ShortcutsDialog.module.css';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface ShortcutEntry {\n  /**\n   * Key combination tokens, e.g. `[\"Ctrl\", \"S\"]` or `[\"F5\"]`.\n   * Each token is rendered as a styled `<kbd>` key cap.\n   */\n  keys: string[];\n  /** Human-readable description of what the shortcut does. */\n  description: string;\n}\n\nexport interface ShortcutsSection {\n  /** Section heading, e.g. \"File\", \"Edit\". */\n  title: string;\n  shortcuts: ShortcutEntry[];\n}\n\nexport interface ShortcutsDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called when the dialog is dismissed (Escape, close button). */\n  onClose: () => void;\n  /** Dialog heading. Defaults to `\"Keyboard Shortcuts\"`. */\n  title?: string;\n  /** Shortcut sections to display. */\n  sections: ShortcutsSection[];\n}\n\n// ─── Focusable selector (reused from Dialog) ─────────────────────────────────\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Modal dialog listing keyboard shortcuts, grouped in sections, with\n * integrated search to filter by description or key name.\n *\n * Mirrors `AdwShortcutsDialog` (libadwaita 1.8 / GNOME 49).\n *\n * - Renders into a portal (`document.body`).\n * - Traps focus; Escape closes.\n * - Search filters across all sections in real time.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ShortcutsDialog.html\n */\nexport function ShortcutsDialog({\n  open,\n  onClose,\n  title = 'Keyboard Shortcuts',\n  sections,\n}: ShortcutsDialogProps) {\n  const [query, setQuery] = useState('');\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const previouslyFocused = useRef<Element | null>(null);\n  const titleId = useRef(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      // Focus the search field after mount\n      requestAnimationFrame(() => searchRef.current?.focus());\n    } else {\n      setQuery('');\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n\n        return;\n      }\n\n      if (e.key !== 'Tab') {\n        return;\n      }\n\n      const focusable = Array.from(\n        dialogRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n\n      if (focusable.length === 0) {\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  // Filter sections by query\n  const q = query.trim().toLowerCase();\n  const filtered = sections\n    .map((section) => ({\n      ...section,\n      shortcuts: section.shortcuts.filter(\n        ({ description, keys }) =>\n          !q ||\n          description.toLowerCase().includes(q) ||\n          keys.some((k) => k.toLowerCase().includes(q)),\n      ),\n    }))\n    .filter((s) => s.shortcuts.length > 0);\n\n  const node = (\n    <div className={styles.backdrop} onClick={onClose} aria-hidden=\"true\">\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId.current}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* ── Header ── */}\n        <div className={styles.header}>\n          <span id={titleId.current} className={styles.title}>\n            {title}\n          </span>\n          <button type=\"button\" className={styles.closeBtn} aria-label=\"Close\" onClick={onClose}>\n            ×\n          </button>\n        </div>\n\n        {/* ── Search ── */}\n        <div className={styles.searchRow}>\n          <span className={styles.searchIcon} aria-hidden=\"true\">\n            ⌕\n          </span>\n          <input\n            ref={searchRef}\n            type=\"search\"\n            className={styles.searchInput}\n            placeholder=\"Search shortcuts…\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            aria-label=\"Search shortcuts\"\n          />\n          {query && (\n            <button\n              type=\"button\"\n              className={styles.searchClear}\n              aria-label=\"Clear search\"\n              onClick={() => {\n                setQuery('');\n                searchRef.current?.focus();\n              }}\n            >\n              ×\n            </button>\n          )}\n        </div>\n\n        {/* ── Shortcut list ── */}\n        <div className={styles.body} role=\"list\">\n          {filtered.length === 0 ? (\n            <p className={styles.empty}>No shortcuts match \"{query}\"</p>\n          ) : (\n            filtered.map((section) => (\n              <section key={section.title} className={styles.section}>\n                <h3 className={styles.sectionTitle}>{section.title}</h3>\n                <ul className={styles.list}>\n                  {section.shortcuts.map((shortcut) => (\n                    <li key={shortcut.description} className={styles.row}>\n                      <span className={styles.keys} aria-label={shortcut.keys.join(' + ')}>\n                        {shortcut.keys.map((key, i) => (\n                          <span key={i} className={styles.keyCap}>\n                            <kbd>{key}</kbd>\n                            {i < shortcut.keys.length - 1 && (\n                              <span className={styles.plus} aria-hidden=\"true\">\n                                +\n                              </span>\n                            )}\n                          </span>\n                        ))}\n                      </span>\n                      <span className={styles.description}>{shortcut.description}</span>\n                    </li>\n                  ))}\n                </ul>\n              </section>\n            ))\n          )}\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n}\n"],"mappings":"iIAqCA,IAAM,EACJ,yFAgBF,SAAgB,EAAgB,CAC9B,OACA,UACA,QAAQ,qBACR,YACuB,CACvB,GAAM,CAAC,EAAO,IAAA,EAAA,EAAA,UAAqB,GAAG,CAChC,GAAA,EAAA,EAAA,QAAmC,KAAK,CACxC,GAAA,EAAA,EAAA,QAAqC,KAAK,CAC1C,GAAA,EAAA,EAAA,QAA2C,KAAK,CAChD,GAAA,EAAA,EAAA,QAAiB,mBAAmB,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,MAAM,EAAG,EAAE,GAAG,EAGnF,EAAA,EAAA,eAAgB,CACV,GACF,EAAkB,QAAU,SAAS,cAErC,0BAA4B,EAAU,SAAS,OAAO,CAAC,GAEvD,EAAS,GAAG,CACX,EAAkB,SAAgC,OAAO,GAE3D,CAAC,EAAK,CAAC,CAGV,IAAM,GAAA,EAAA,EAAA,aACH,GAAqC,CACpC,GAAI,EAAE,MAAQ,SAAU,CACtB,EAAE,gBAAgB,CAClB,GAAS,CAET,OAGF,GAAI,EAAE,MAAQ,MACZ,OAGF,IAAM,EAAY,MAAM,KACtB,EAAU,SAAS,iBAA8B,EAAU,EAAI,EAAE,CAClE,CAED,GAAI,EAAU,SAAW,EACvB,OAGF,IAAM,EAAQ,EAAU,GAClB,EAAO,EAAU,EAAU,OAAS,GAEtC,EAAE,SACA,SAAS,gBAAkB,IAC7B,EAAE,gBAAgB,CAClB,EAAK,OAAO,EAGV,SAAS,gBAAkB,IAC7B,EAAE,gBAAgB,CAClB,EAAM,OAAO,GAInB,CAAC,EAAQ,CACV,CAED,GAAI,CAAC,EACH,OAAO,KAIT,IAAM,EAAI,EAAM,MAAM,CAAC,aAAa,CAC9B,EAAW,EACd,IAAK,IAAa,CACjB,GAAG,EACH,UAAW,EAAQ,UAAU,QAC1B,CAAE,cAAa,UACd,CAAC,GACD,EAAY,aAAa,CAAC,SAAS,EAAE,EACrC,EAAK,KAAM,GAAM,EAAE,aAAa,CAAC,SAAS,EAAE,CAAC,CAChD,CACF,EAAE,CACF,OAAQ,GAAM,EAAE,UAAU,OAAS,EAAE,CAElC,GACJ,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,SAAU,QAAS,EAAS,cAAY,iBAC7D,EAAA,EAAA,MAAC,MAAD,CACE,IAAK,EACL,KAAK,SACL,aAAW,OACX,kBAAiB,EAAQ,QACzB,UAAW,EAAA,QAAO,OAClB,UAAW,EACX,QAAU,GAAM,EAAE,iBAAiB,UAPrC,EAUE,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,gBAAvB,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,GAAI,EAAQ,QAAS,UAAW,EAAA,QAAO,eAC1C,EACI,CAAA,EACP,EAAA,EAAA,KAAC,SAAD,CAAQ,KAAK,SAAS,UAAW,EAAA,QAAO,SAAU,aAAW,QAAQ,QAAS,WAAS,IAE9E,CAAA,CACL,IAGN,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,mBAAvB,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,WAAY,cAAY,gBAAO,IAEhD,CAAA,EACP,EAAA,EAAA,KAAC,QAAD,CACE,IAAK,EACL,KAAK,SACL,UAAW,EAAA,QAAO,YAClB,YAAY,oBACZ,MAAO,EACP,SAAW,GAAM,EAAS,EAAE,OAAO,MAAM,CACzC,aAAW,mBACX,CAAA,CACD,IACC,EAAA,EAAA,KAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,YAClB,aAAW,eACX,YAAe,CACb,EAAS,GAAG,CACZ,EAAU,SAAS,OAAO,WAE7B,IAEQ,CAAA,CAEP,IAGN,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,KAAM,KAAK,gBAC/B,EAAS,SAAW,GACnB,EAAA,EAAA,MAAC,IAAD,CAAG,UAAW,EAAA,QAAO,eAArB,CAA4B,uBAAqB,EAAM,IAAK,GAE5D,EAAS,IAAK,IACZ,EAAA,EAAA,MAAC,UAAD,CAA6B,UAAW,EAAA,QAAO,iBAA/C,EACE,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,QAAO,sBAAe,EAAQ,MAAW,CAAA,EACxD,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,QAAO,cACnB,EAAQ,UAAU,IAAK,IACtB,EAAA,EAAA,MAAC,KAAD,CAA+B,UAAW,EAAA,QAAO,aAAjD,EACE,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAM,aAAY,EAAS,KAAK,KAAK,MAAM,UAChE,EAAS,KAAK,KAAK,EAAK,KACvB,EAAA,EAAA,MAAC,OAAD,CAAc,UAAW,EAAA,QAAO,gBAAhC,EACE,EAAA,EAAA,KAAC,MAAD,CAAA,SAAM,EAAU,CAAA,CACf,EAAI,EAAS,KAAK,OAAS,IAC1B,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAM,cAAY,gBAAO,IAE1C,CAAA,CAEJ,EAPI,EAOJ,CACP,CACG,CAAA,EACP,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,qBAAc,EAAS,YAAmB,CAAA,CAC/D,EAdI,EAAS,YAcb,CACL,CACC,CAAA,CACG,EArBI,EAAQ,MAqBZ,CACV,CAEA,CAAA,CACF,GACF,CAAA,CAOR,OAJI,OAAO,SAAa,IACf,GAGT,EAAA,EAAA,cAAoB,EAAM,SAAS,KAAK"}
+{"version":3,"file":"ShortcutsDialog.cjs","names":[],"sources":["../../../src/components/ShortcutsDialog/ShortcutsDialog.tsx"],"sourcesContent":["import { type KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { createPortal } from 'react-dom';\n\nimport { useBodyScrollLock } from '../Dialog/dialogUtils';\n\nimport styles from './ShortcutsDialog.module.css';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface ShortcutEntry {\n  /**\n   * Key combination tokens, e.g. `[\"Ctrl\", \"S\"]` or `[\"F5\"]`.\n   * Each token is rendered as a styled `<kbd>` key cap.\n   */\n  keys: string[];\n  /** Human-readable description of what the shortcut does. */\n  description: string;\n}\n\nexport interface ShortcutsSection {\n  /** Section heading, e.g. \"File\", \"Edit\". */\n  title: string;\n  shortcuts: ShortcutEntry[];\n}\n\nexport interface ShortcutsDialogProps {\n  /** Whether the dialog is visible. */\n  open: boolean;\n  /** Called when the dialog is dismissed (Escape, close button). */\n  onClose: () => void;\n  /** Dialog heading. Defaults to `\"Keyboard Shortcuts\"`. */\n  title?: string;\n  /** Shortcut sections to display. */\n  sections: ShortcutsSection[];\n}\n\n// ─── Focusable selector (reused from Dialog) ─────────────────────────────────\n\nconst FOCUSABLE =\n  'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Modal dialog listing keyboard shortcuts, grouped in sections, with\n * integrated search to filter by description or key name.\n *\n * Mirrors `AdwShortcutsDialog` (libadwaita 1.8 / GNOME 49).\n *\n * - Renders into a portal (`document.body`).\n * - Traps focus; Escape closes.\n * - Search filters across all sections in real time.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ShortcutsDialog.html\n */\nexport const ShortcutsDialog = ({\n  open,\n  onClose,\n  title = 'Keyboard Shortcuts',\n  sections,\n}: ShortcutsDialogProps) => {\n  const [query, setQuery] = useState('');\n  const dialogRef = useRef<HTMLDivElement>(null);\n  const searchRef = useRef<HTMLInputElement>(null);\n  const previouslyFocused = useRef<Element | null>(null);\n  const titleId = useRef(`shortcuts-title-${Math.random().toString(36).slice(2, 9)}`);\n\n  useBodyScrollLock(open);\n\n  // Save / restore focus\n  useEffect(() => {\n    if (open) {\n      previouslyFocused.current = document.activeElement;\n      // Focus the search field after mount\n      requestAnimationFrame(() => searchRef.current?.focus());\n    } else {\n      setQuery('');\n      (previouslyFocused.current as HTMLElement | null)?.focus();\n    }\n  }, [open]);\n\n  // Focus trap + Escape\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      if (e.key === 'Escape') {\n        e.preventDefault();\n        onClose();\n\n        return;\n      }\n\n      if (e.key !== 'Tab') {\n        return;\n      }\n\n      const focusable = Array.from(\n        dialogRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? [],\n      );\n\n      if (focusable.length === 0) {\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n\n      if (e.shiftKey) {\n        if (document.activeElement === first) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (document.activeElement === last) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    },\n    [onClose],\n  );\n\n  if (!open) {\n    return null;\n  }\n\n  // Filter sections by query\n  const q = query.trim().toLowerCase();\n  const filtered = sections\n    .map((section) => ({\n      ...section,\n      shortcuts: section.shortcuts.filter(\n        ({ description, keys }) =>\n          !q ||\n          description.toLowerCase().includes(q) ||\n          keys.some((k) => k.toLowerCase().includes(q)),\n      ),\n    }))\n    .filter((s) => s.shortcuts.length > 0);\n\n  const node = (\n    <div className={styles.backdrop} onClick={onClose}>\n      <div\n        ref={dialogRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={titleId.current}\n        className={styles.dialog}\n        onKeyDown={handleKeyDown}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* ── Header ── */}\n        <div className={styles.header}>\n          <span id={titleId.current} className={styles.title}>\n            {title}\n          </span>\n          <button type=\"button\" className={styles.closeBtn} aria-label=\"Close\" onClick={onClose}>\n            ×\n          </button>\n        </div>\n\n        {/* ── Search ── */}\n        <div className={styles.searchRow}>\n          <span className={styles.searchIcon} aria-hidden=\"true\">\n            ⌕\n          </span>\n          <input\n            ref={searchRef}\n            type=\"search\"\n            className={styles.searchInput}\n            placeholder=\"Search shortcuts…\"\n            value={query}\n            onChange={(e) => setQuery(e.target.value)}\n            aria-label=\"Search shortcuts\"\n          />\n          {query && (\n            <button\n              type=\"button\"\n              className={styles.searchClear}\n              aria-label=\"Clear search\"\n              onClick={() => {\n                setQuery('');\n                searchRef.current?.focus();\n              }}\n            >\n              ×\n            </button>\n          )}\n        </div>\n\n        {/* ── Shortcut list ── */}\n        <div className={styles.body} role=\"list\">\n          {filtered.length === 0 ? (\n            <p className={styles.empty}>No shortcuts match \"{query}\"</p>\n          ) : (\n            filtered.map((section) => (\n              <section key={section.title} className={styles.section}>\n                <h3 className={styles.sectionTitle}>{section.title}</h3>\n                <ul className={styles.list}>\n                  {section.shortcuts.map((shortcut) => (\n                    <li key={shortcut.description} className={styles.row}>\n                      <span className={styles.keys} aria-label={shortcut.keys.join(' + ')}>\n                        {shortcut.keys.map((key, i) => (\n                          <span key={i} className={styles.keyCap}>\n                            <kbd>{key}</kbd>\n                            {i < shortcut.keys.length - 1 && (\n                              <span className={styles.plus} aria-hidden=\"true\">\n                                +\n                              </span>\n                            )}\n                          </span>\n                        ))}\n                      </span>\n                      <span className={styles.description}>{shortcut.description}</span>\n                    </li>\n                  ))}\n                </ul>\n              </section>\n            ))\n          )}\n        </div>\n      </div>\n    </div>\n  );\n\n  if (typeof document === 'undefined') {\n    return node;\n  }\n\n  return createPortal(node, document.body);\n};\n"],"mappings":"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"}

package/dist/components/ShortcutsDialog/ShortcutsDialog.d.ts

@@ -34,4 +34,4 @@ export interface ShortcutsDialogProps {
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.ShortcutsDialog.html
  */
-export declare function ShortcutsDialog({ open, onClose, title, sections, }: ShortcutsDialogProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const ShortcutsDialog: ({ open, onClose, title, sections, }: ShortcutsDialogProps) => import("react/jsx-runtime").JSX.Element | null;