@gnome-ui/react 1.45.1 → 1.45.2

package/dist/components/Sidebar/Sidebar.js

@@ -26,8 +26,7 @@ var h = {
 	black: "variantBlack",
 	transparent: "variantTransparent",
 	blurred: "variantBlurred"
-};
-function g({ children: i, collapsed: a = !1, searchable: o, filter: s, onFilterChange: f, mode: g, variant: _ = "classic", className: v, ...y }) {
+}, g = ({ children: i, collapsed: a = !1, searchable: o, filter: s, onFilterChange: f, mode: g, variant: _ = "classic", className: v, ...y }) => {
 	let [b, x] = c(""), { isNarrow: S } = e(), C = s !== void 0, w = C ? s : b, T = (e) => {
 		C || x(e), f?.(e);
 	}, E = w.length > 0, D = g ?? (S ? "page" : "sidebar"), O = !E || m(i, w) > 0;
@@ -62,7 +61,7 @@ function g({ children: i, collapsed: a = !1, searchable: o, filter: s, onFilterC
 			})
 		})
 	});
-}
+};
 //#endregion
 export { g as Sidebar, d as SidebarCollapsedContext, p as SidebarFilterContext, f as useSidebarCollapsed };
 

package/dist/components/Sidebar/Sidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.js","names":[],"sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import {\n  Children,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useContext,\n  useState,\n} from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { SearchBar } from '../SearchBar';\nimport { StatusPage } from '../StatusPage';\n\nimport styles from './Sidebar.module.css';\n\n// ─── Contexts ─────────────────────────────────────────────────────────────────\n\n/** Provides the collapsed state to all descendant `SidebarItem` components. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const SidebarCollapsedContext = createContext(false);\n\n/** Returns `true` when the nearest `Sidebar` is in collapsed (icon-only) mode. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useSidebarCollapsed() {\n  return useContext(SidebarCollapsedContext);\n}\n\n/** Provides the active filter string to all descendant `SidebarItem` components. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const SidebarFilterContext = createContext('');\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\n/** Recursively count items whose `label` matches `filter` (case-insensitive). */\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const props = child.props as Record<string, unknown>;\n\n    if (typeof props.label === 'string') {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) {\n        count++;\n      }\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n\n  return count;\n}\n\n// ─── Variant map ──────────────────────────────────────────────────────────────\n\nconst variantClass: Record<string, string> = {\n  blue: 'variantBlue',\n  green: 'variantGreen',\n  red: 'variantRed',\n  yellow: 'variantYellow',\n  black: 'variantBlack',\n  transparent: 'variantTransparent',\n  blurred: 'variantBlurred',\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport interface SidebarProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode;\n  /**\n   * When `true`, collapses the sidebar to icon-only mode (rail/mini).\n   * Labels, suffixes, and section titles are hidden; tooltips appear on hover.\n   */\n  collapsed?: boolean;\n  /**\n   * Renders a built-in `SearchBar` inside the sidebar and manages the filter\n   * state internally (uncontrolled). Combine with `filter` + `onFilterChange`\n   * for controlled mode.\n   */\n  searchable?: boolean;\n  /**\n   * Controlled filter string. Items whose `label` does not match\n   * (case-insensitive substring) are hidden. Does not render a `SearchBar`\n   * on its own — use `searchable` for the built-in search input.\n   */\n  filter?: string;\n  /** Called when the built-in search value changes. */\n  onFilterChange?: (value: string) => void;\n  /**\n   * Layout mode:\n   * - `\"sidebar\"` — fixed-width panel with a border (default).\n   * - `\"page\"` — full-width boxed-list layout for narrow viewports.\n   *\n   * When omitted the sidebar auto-switches to `\"page\"` at ≤ 400 sp,\n   * mirroring `AdwSidebar` mobile behaviour.\n   */\n  mode?: 'sidebar' | 'page';\n  /**\n   * Visual style variant for the sidebar background.\n   * - `\"classic\"` — default GNOME gray\n   * - `\"blue\"` | `\"green\"` | `\"red\"` | `\"yellow\"` — tinted accent backgrounds\n   * - `\"black\"` — dark/OLED background\n   * - `\"transparent\"` — no background, inherits parent\n   * - `\"blurred\"` — frosted glass (backdrop-filter blur), like macOS\n   */\n  variant?: 'classic' | 'blue' | 'green' | 'red' | 'yellow' | 'black' | 'transparent' | 'blurred';\n}\n\n/**\n * Lateral navigation panel following the Adwaita `.navigation-sidebar` style.\n *\n * **Tier 11 — libadwaita 1.9 completeness:**\n * - `searchable` — built-in `SearchBar` with automatic item filtering.\n * - `filter` / `onFilterChange` — controlled external filtering.\n * - `mode` — `\"sidebar\"` (default) or `\"page\"` (boxed-list layout).\n *   Auto-switches to `\"page\"` at ≤ 400 sp when `mode` is unset.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport function Sidebar({\n  children,\n  collapsed = false,\n  searchable,\n  filter: controlledFilter,\n  onFilterChange,\n  mode,\n  variant = 'classic',\n  className,\n  ...props\n}: SidebarProps) {\n  const [internalFilter, setInternalFilter] = useState('');\n  const { isNarrow } = useBreakpoint();\n\n  const isControlled = controlledFilter !== undefined;\n  const filterValue = isControlled ? controlledFilter : internalFilter;\n\n  const handleFilterChange = (v: string) => {\n    if (!isControlled) {\n      setInternalFilter(v);\n    }\n\n    onFilterChange?.(v);\n  };\n\n  const isFilterActive = filterValue.length > 0;\n  const effectiveMode = mode ?? (isNarrow ? 'page' : 'sidebar');\n  const hasMatches = !isFilterActive || countMatchingItems(children, filterValue) > 0;\n\n  return (\n    <SidebarCollapsedContext.Provider value={collapsed}>\n      <SidebarFilterContext.Provider value={filterValue}>\n        <nav\n          className={[\n            styles.sidebar,\n            collapsed ? styles.collapsed : null,\n            effectiveMode === 'page' ? styles.pageMode : null,\n            variant !== 'classic' ? styles[variantClass[variant]] : null,\n            className,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          {...props}\n        >\n          {searchable && (\n            <div className={styles.searchWrap}>\n              <SearchBar\n                open\n                value={filterValue}\n                onChange={(e) => handleFilterChange(e.target.value)}\n                onClose={() => handleFilterChange('')}\n                onClear={() => handleFilterChange('')}\n                inline\n              />\n            </div>\n          )}\n\n          {isFilterActive && !hasMatches ? (\n            <StatusPage title=\"No Results\" description=\"No items match your search.\" compact />\n          ) : (\n            children\n          )}\n        </nav>\n      </SidebarFilterContext.Provider>\n    </SidebarCollapsedContext.Provider>\n  );\n}\n"],"mappings":";;;;;;;AAoBA,IAAa,IAA0B,EAAc,GAAM;AAI3D,SAAgB,IAAsB;AACpC,QAAO,EAAW,EAAwB;;AAK5C,IAAa,IAAuB,EAAc,GAAG;AAKrD,SAAS,EAAmB,GAAqB,GAAwB;CACvE,IAAI,IAAQ;AAiBZ,QAhBA,EAAS,QAAQ,IAAW,MAAU;AACpC,MAAI,CAAC,EAAe,EAAM,CACxB;EAGF,IAAM,IAAQ,EAAM;AAEpB,EAAI,OAAO,EAAM,SAAU,WACrB,EAAM,MAAM,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,IAC1D,MAEO,EAAM,aACf,KAAS,EAAmB,EAAM,UAAuB,EAAO;GAElE,EAEK;;AAKT,IAAM,IAAuC;CAC3C,MAAM;CACN,OAAO;CACP,KAAK;CACL,QAAQ;CACR,OAAO;CACP,aAAa;CACb,SAAS;CACV;AAwDD,SAAgB,EAAQ,EACtB,aACA,eAAY,IACZ,eACA,QAAQ,GACR,mBACA,SACA,aAAU,WACV,cACA,GAAG,KACY;CACf,IAAM,CAAC,GAAgB,KAAqB,EAAS,GAAG,EAClD,EAAE,gBAAa,GAAe,EAE9B,IAAe,MAAqB,KAAA,GACpC,IAAc,IAAe,IAAmB,GAEhD,KAAsB,MAAc;AAKxC,EAJK,KACH,EAAkB,EAAE,EAGtB,IAAiB,EAAE;IAGf,IAAiB,EAAY,SAAS,GACtC,IAAgB,MAAS,IAAW,SAAS,YAC7C,IAAa,CAAC,KAAkB,EAAmB,GAAU,EAAY,GAAG;AAElF,QACE,kBAAC,EAAwB,UAAzB;EAAkC,OAAO;YACvC,kBAAC,EAAqB,UAAtB;GAA+B,OAAO;aACpC,kBAAC,OAAD;IACE,WAAW;KACT,EAAO;KACP,IAAY,EAAO,YAAY;KAC/B,MAAkB,SAAS,EAAO,WAAW;KAC7C,MAAY,YAA4C,OAAhC,EAAO,EAAa;KAC5C;KACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,GAAI;cAVN,CAYG,KACC,kBAAC,OAAD;KAAK,WAAW,EAAO;eACrB,kBAAC,GAAD;MACE,MAAA;MACA,OAAO;MACP,WAAW,MAAM,EAAmB,EAAE,OAAO,MAAM;MACnD,eAAe,EAAmB,GAAG;MACrC,eAAe,EAAmB,GAAG;MACrC,QAAA;MACA,CAAA;KACE,CAAA,EAGP,KAAkB,CAAC,IAClB,kBAAC,GAAD;KAAY,OAAM;KAAa,aAAY;KAA8B,SAAA;KAAU,CAAA,GAEnF,EAEE;;GACwB,CAAA;EACC,CAAA"}
+{"version":3,"file":"Sidebar.js","names":[],"sources":["../../../src/components/Sidebar/Sidebar.tsx"],"sourcesContent":["import {\n  Children,\n  createContext,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useContext,\n  useState,\n} from 'react';\n\nimport { useBreakpoint } from '../../hooks/useBreakpoint';\nimport { SearchBar } from '../SearchBar';\nimport { StatusPage } from '../StatusPage';\n\nimport styles from './Sidebar.module.css';\n\n// ─── Contexts ─────────────────────────────────────────────────────────────────\n\n/** Provides the collapsed state to all descendant `SidebarItem` components. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const SidebarCollapsedContext = createContext(false);\n\n/** Returns `true` when the nearest `Sidebar` is in collapsed (icon-only) mode. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport function useSidebarCollapsed() {\n  return useContext(SidebarCollapsedContext);\n}\n\n/** Provides the active filter string to all descendant `SidebarItem` components. */\n// eslint-disable-next-line react-refresh/only-export-components\nexport const SidebarFilterContext = createContext('');\n\n// ─── Helpers ──────────────────────────────────────────────────────────────────\n\n/** Recursively count items whose `label` matches `filter` (case-insensitive). */\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const props = child.props as Record<string, unknown>;\n\n    if (typeof props.label === 'string') {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) {\n        count++;\n      }\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n\n  return count;\n}\n\n// ─── Variant map ──────────────────────────────────────────────────────────────\n\nconst variantClass: Record<string, string> = {\n  blue: 'variantBlue',\n  green: 'variantGreen',\n  red: 'variantRed',\n  yellow: 'variantYellow',\n  black: 'variantBlack',\n  transparent: 'variantTransparent',\n  blurred: 'variantBlurred',\n};\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\nexport interface SidebarProps extends HTMLAttributes<HTMLElement> {\n  children?: ReactNode;\n  /**\n   * When `true`, collapses the sidebar to icon-only mode (rail/mini).\n   * Labels, suffixes, and section titles are hidden; tooltips appear on hover.\n   */\n  collapsed?: boolean;\n  /**\n   * Renders a built-in `SearchBar` inside the sidebar and manages the filter\n   * state internally (uncontrolled). Combine with `filter` + `onFilterChange`\n   * for controlled mode.\n   */\n  searchable?: boolean;\n  /**\n   * Controlled filter string. Items whose `label` does not match\n   * (case-insensitive substring) are hidden. Does not render a `SearchBar`\n   * on its own — use `searchable` for the built-in search input.\n   */\n  filter?: string;\n  /** Called when the built-in search value changes. */\n  onFilterChange?: (value: string) => void;\n  /**\n   * Layout mode:\n   * - `\"sidebar\"` — fixed-width panel with a border (default).\n   * - `\"page\"` — full-width boxed-list layout for narrow viewports.\n   *\n   * When omitted the sidebar auto-switches to `\"page\"` at ≤ 400 sp,\n   * mirroring `AdwSidebar` mobile behaviour.\n   */\n  mode?: 'sidebar' | 'page';\n  /**\n   * Visual style variant for the sidebar background.\n   * - `\"classic\"` — default GNOME gray\n   * - `\"blue\"` | `\"green\"` | `\"red\"` | `\"yellow\"` — tinted accent backgrounds\n   * - `\"black\"` — dark/OLED background\n   * - `\"transparent\"` — no background, inherits parent\n   * - `\"blurred\"` — frosted glass (backdrop-filter blur), like macOS\n   */\n  variant?: 'classic' | 'blue' | 'green' | 'red' | 'yellow' | 'black' | 'transparent' | 'blurred';\n}\n\n/**\n * Lateral navigation panel following the Adwaita `.navigation-sidebar` style.\n *\n * **Tier 11 — libadwaita 1.9 completeness:**\n * - `searchable` — built-in `SearchBar` with automatic item filtering.\n * - `filter` / `onFilterChange` — controlled external filtering.\n * - `mode` — `\"sidebar\"` (default) or `\"page\"` (boxed-list layout).\n *   Auto-switches to `\"page\"` at ≤ 400 sp when `mode` is unset.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport const Sidebar = ({\n  children,\n  collapsed = false,\n  searchable,\n  filter: controlledFilter,\n  onFilterChange,\n  mode,\n  variant = 'classic',\n  className,\n  ...props\n}: SidebarProps) => {\n  const [internalFilter, setInternalFilter] = useState('');\n  const { isNarrow } = useBreakpoint();\n\n  const isControlled = controlledFilter !== undefined;\n  const filterValue = isControlled ? controlledFilter : internalFilter;\n\n  const handleFilterChange = (v: string) => {\n    if (!isControlled) {\n      setInternalFilter(v);\n    }\n\n    onFilterChange?.(v);\n  };\n\n  const isFilterActive = filterValue.length > 0;\n  const effectiveMode = mode ?? (isNarrow ? 'page' : 'sidebar');\n  const hasMatches = !isFilterActive || countMatchingItems(children, filterValue) > 0;\n\n  return (\n    <SidebarCollapsedContext.Provider value={collapsed}>\n      <SidebarFilterContext.Provider value={filterValue}>\n        <nav\n          className={[\n            styles.sidebar,\n            collapsed ? styles.collapsed : null,\n            effectiveMode === 'page' ? styles.pageMode : null,\n            variant !== 'classic' ? styles[variantClass[variant]] : null,\n            className,\n          ]\n            .filter(Boolean)\n            .join(' ')}\n          {...props}\n        >\n          {searchable && (\n            <div className={styles.searchWrap}>\n              <SearchBar\n                open\n                value={filterValue}\n                onChange={(e) => handleFilterChange(e.target.value)}\n                onClose={() => handleFilterChange('')}\n                onClear={() => handleFilterChange('')}\n                inline\n              />\n            </div>\n          )}\n\n          {isFilterActive && !hasMatches ? (\n            <StatusPage title=\"No Results\" description=\"No items match your search.\" compact />\n          ) : (\n            children\n          )}\n        </nav>\n      </SidebarFilterContext.Provider>\n    </SidebarCollapsedContext.Provider>\n  );\n};\n"],"mappings":";;;;;;;AAoBA,IAAa,IAA0B,EAAc,EAAK;AAI1D,SAAgB,IAAsB;CACpC,OAAO,EAAW,CAAuB;AAC3C;AAIA,IAAa,IAAuB,EAAc,EAAE;AAKpD,SAAS,EAAmB,GAAqB,GAAwB;CACvE,IAAI,IAAQ;CAiBZ,OAhBA,EAAS,QAAQ,IAAW,MAAU;EACpC,IAAI,CAAC,EAAe,CAAK,GACvB;EAGF,IAAM,IAAQ,EAAM;EAEpB,AAAI,OAAO,EAAM,SAAU,WACrB,EAAM,MAAM,YAAY,EAAE,SAAS,EAAO,YAAY,CAAC,KACzD,MAEO,EAAM,aACf,KAAS,EAAmB,EAAM,UAAuB,CAAM;CAEnE,CAAC,GAEM;AACT;AAIA,IAAM,IAAuC;CAC3C,MAAM;CACN,OAAO;CACP,KAAK;CACL,QAAQ;CACR,OAAO;CACP,aAAa;CACb,SAAS;AACX,GAwDa,KAAW,EACtB,aACA,eAAY,IACZ,eACA,QAAQ,GACR,mBACA,SACA,aAAU,WACV,cACA,GAAG,QACe;CAClB,IAAM,CAAC,GAAgB,KAAqB,EAAS,EAAE,GACjD,EAAE,gBAAa,EAAc,GAE7B,IAAe,MAAqB,KAAA,GACpC,IAAc,IAAe,IAAmB,GAEhD,KAAsB,MAAc;EAKxC,AAJK,KACH,EAAkB,CAAC,GAGrB,IAAiB,CAAC;CACpB,GAEM,IAAiB,EAAY,SAAS,GACtC,IAAgB,MAAS,IAAW,SAAS,YAC7C,IAAa,CAAC,KAAkB,EAAmB,GAAU,CAAW,IAAI;CAElF,OACE,kBAAC,EAAwB,UAAzB;EAAkC,OAAO;YACvC,kBAAC,EAAqB,UAAtB;GAA+B,OAAO;aACpC,kBAAC,OAAD;IACE,WAAW;KACT,EAAO;KACP,IAAY,EAAO,YAAY;KAC/B,MAAkB,SAAS,EAAO,WAAW;KAC7C,MAAY,YAA4C,OAAhC,EAAO,EAAa;KAC5C;IACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;IACX,GAAI;cAVN,CAYG,KACC,kBAAC,OAAD;KAAK,WAAW,EAAO;eACrB,kBAAC,GAAD;MACE,MAAA;MACA,OAAO;MACP,WAAW,MAAM,EAAmB,EAAE,OAAO,KAAK;MAClD,eAAe,EAAmB,EAAE;MACpC,eAAe,EAAmB,EAAE;MACpC,QAAA;KACD,CAAA;IACE,CAAA,GAGN,KAAkB,CAAC,IAClB,kBAAC,GAAD;KAAY,OAAM;KAAa,aAAY;KAA8B,SAAA;IAAS,CAAA,IAElF,CAEC;;EACwB,CAAA;CACC,CAAA;AAEtC"}

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

@@ -1,2 +1,2 @@
-var e=`_sidebar_156vz_3`,t=`_section_156vz_21`,n=`_sectionHeader_156vz_35`,r=`_sectionHeaderIcon_156vz_71`,i=`_sectionTitle_156vz_78`,a=`_sectionChevron_156vz_94`,o=`_sectionBody_156vz_104`,s=`_sectionBodyCollapsed_156vz_110`,c=`_sectionBodyInner_156vz_114`,l=`_list_156vz_120`,u=`_item_156vz_131`,d=`_itemBtn_156vz_137`,f=`_active_156vz_184`,p=`_itemIcon_156vz_200`,m=`_itemLabel_156vz_213`,h=`_itemSuffix_156vz_223`,g=`_contextMenu_156vz_232`,_=`_contextMenuItem_156vz_262`,v=`_contextMenuDestructive_156vz_298`,y=`_searchWrap_156vz_304`,b=`_variantBlue_156vz_315`,x=`_variantGreen_156vz_324`,S=`_variantRed_156vz_333`,C=`_variantYellow_156vz_342`,w=`_variantBlack_156vz_351`,T=`_variantTransparent_156vz_360`,E=`_variantBlurred_156vz_365`,D=`_pageMode_156vz_381`,O=`_dragOver_156vz_388`,k=`_collapsed_156vz_396`,A=`_itemCollapsed_156vz_407`,j={sidebar:e,section:t,sectionHeader:n,sectionHeaderIcon:r,sectionTitle:i,sectionChevron:a,sectionBody:o,sectionBodyCollapsed:s,sectionBodyInner:c,list:l,item:u,itemBtn:d,active:f,itemIcon:p,itemLabel:m,itemSuffix:h,contextMenu:g,"menu-in":`_menu-in_156vz_1`,contextMenuItem:_,contextMenuDestructive:v,searchWrap:y,variantBlue:b,variantGreen:x,variantRed:S,variantYellow:C,variantBlack:w,variantTransparent:T,variantBlurred:E,pageMode:D,dragOver:O,collapsed:k,itemCollapsed:A};exports.default=j;
+var e={sidebar:`_sidebar_156vz_3`,section:`_section_156vz_21`,sectionHeader:`_sectionHeader_156vz_35`,sectionHeaderIcon:`_sectionHeaderIcon_156vz_71`,sectionTitle:`_sectionTitle_156vz_78`,sectionChevron:`_sectionChevron_156vz_94`,sectionBody:`_sectionBody_156vz_104`,sectionBodyCollapsed:`_sectionBodyCollapsed_156vz_110`,sectionBodyInner:`_sectionBodyInner_156vz_114`,list:`_list_156vz_120`,item:`_item_156vz_131`,itemBtn:`_itemBtn_156vz_137`,active:`_active_156vz_184`,itemIcon:`_itemIcon_156vz_200`,itemLabel:`_itemLabel_156vz_213`,itemSuffix:`_itemSuffix_156vz_223`,contextMenu:`_contextMenu_156vz_232`,"menu-in":`_menu-in_156vz_1`,contextMenuItem:`_contextMenuItem_156vz_262`,contextMenuDestructive:`_contextMenuDestructive_156vz_298`,searchWrap:`_searchWrap_156vz_304`,variantBlue:`_variantBlue_156vz_315`,variantGreen:`_variantGreen_156vz_324`,variantRed:`_variantRed_156vz_333`,variantYellow:`_variantYellow_156vz_342`,variantBlack:`_variantBlack_156vz_351`,variantTransparent:`_variantTransparent_156vz_360`,variantBlurred:`_variantBlurred_156vz_365`,pageMode:`_pageMode_156vz_381`,dragOver:`_dragOver_156vz_388`,collapsed:`_collapsed_156vz_396`,itemCollapsed:`_itemCollapsed_156vz_407`};exports.default=e;
 //# sourceMappingURL=Sidebar.module.css.cjs.map

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

@@ -1,39 +1,38 @@
-//#region src/components/Sidebar/Sidebar.module.css
-var e = "_sidebar_156vz_3", t = "_section_156vz_21", n = "_sectionHeader_156vz_35", r = "_sectionHeaderIcon_156vz_71", i = "_sectionTitle_156vz_78", a = "_sectionChevron_156vz_94", o = "_sectionBody_156vz_104", s = "_sectionBodyCollapsed_156vz_110", c = "_sectionBodyInner_156vz_114", l = "_list_156vz_120", u = "_item_156vz_131", d = "_itemBtn_156vz_137", f = "_active_156vz_184", p = "_itemIcon_156vz_200", m = "_itemLabel_156vz_213", h = "_itemSuffix_156vz_223", g = "_contextMenu_156vz_232", _ = "_contextMenuItem_156vz_262", v = "_contextMenuDestructive_156vz_298", y = "_searchWrap_156vz_304", b = "_variantBlue_156vz_315", x = "_variantGreen_156vz_324", S = "_variantRed_156vz_333", C = "_variantYellow_156vz_342", w = "_variantBlack_156vz_351", T = "_variantTransparent_156vz_360", E = "_variantBlurred_156vz_365", D = "_pageMode_156vz_381", O = "_dragOver_156vz_388", k = "_collapsed_156vz_396", A = "_itemCollapsed_156vz_407", j = {
-	sidebar: e,
-	section: t,
-	sectionHeader: n,
-	sectionHeaderIcon: r,
-	sectionTitle: i,
-	sectionChevron: a,
-	sectionBody: o,
-	sectionBodyCollapsed: s,
-	sectionBodyInner: c,
-	list: l,
-	item: u,
-	itemBtn: d,
-	active: f,
-	itemIcon: p,
-	itemLabel: m,
-	itemSuffix: h,
-	contextMenu: g,
+var e = {
+	sidebar: "_sidebar_156vz_3",
+	section: "_section_156vz_21",
+	sectionHeader: "_sectionHeader_156vz_35",
+	sectionHeaderIcon: "_sectionHeaderIcon_156vz_71",
+	sectionTitle: "_sectionTitle_156vz_78",
+	sectionChevron: "_sectionChevron_156vz_94",
+	sectionBody: "_sectionBody_156vz_104",
+	sectionBodyCollapsed: "_sectionBodyCollapsed_156vz_110",
+	sectionBodyInner: "_sectionBodyInner_156vz_114",
+	list: "_list_156vz_120",
+	item: "_item_156vz_131",
+	itemBtn: "_itemBtn_156vz_137",
+	active: "_active_156vz_184",
+	itemIcon: "_itemIcon_156vz_200",
+	itemLabel: "_itemLabel_156vz_213",
+	itemSuffix: "_itemSuffix_156vz_223",
+	contextMenu: "_contextMenu_156vz_232",
 	"menu-in": "_menu-in_156vz_1",
-	contextMenuItem: _,
-	contextMenuDestructive: v,
-	searchWrap: y,
-	variantBlue: b,
-	variantGreen: x,
-	variantRed: S,
-	variantYellow: C,
-	variantBlack: w,
-	variantTransparent: T,
-	variantBlurred: E,
-	pageMode: D,
-	dragOver: O,
-	collapsed: k,
-	itemCollapsed: A
+	contextMenuItem: "_contextMenuItem_156vz_262",
+	contextMenuDestructive: "_contextMenuDestructive_156vz_298",
+	searchWrap: "_searchWrap_156vz_304",
+	variantBlue: "_variantBlue_156vz_315",
+	variantGreen: "_variantGreen_156vz_324",
+	variantRed: "_variantRed_156vz_333",
+	variantYellow: "_variantYellow_156vz_342",
+	variantBlack: "_variantBlack_156vz_351",
+	variantTransparent: "_variantTransparent_156vz_360",
+	variantBlurred: "_variantBlurred_156vz_365",
+	pageMode: "_pageMode_156vz_381",
+	dragOver: "_dragOver_156vz_388",
+	collapsed: "_collapsed_156vz_396",
+	itemCollapsed: "_itemCollapsed_156vz_407"
 };
 //#endregion
-export { j as default };
+export { e as default };
 
 //# sourceMappingURL=Sidebar.module.css.js.map

package/dist/components/Sidebar/SidebarItem.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Icon/Icon.cjs`),t=require(`../Tooltip/Tooltip.cjs`),n=require(`./Sidebar.module.css.cjs`),r=require(`./Sidebar.cjs`);let i=require(`react`),a=require(`react-dom`),o=require(`react/jsx-runtime`);function s({label:s,icon:c,active:l=!1,suffix:u,badge:d,tooltip:f,menuItems:p,onDrop:m,acceptTypes:h,className:g,..._}){let v=r.useSidebarCollapsed(),y=(0,i.useContext)(r.SidebarFilterContext),b=u??d,x=v?f??s:f,S=y.length>0&&!s.toLowerCase().includes(y.toLowerCase()),[C,w]=(0,i.useState)(!1),T=e=>{m&&(h?.length&&!h.some(t=>e.dataTransfer.types.includes(t))||(e.preventDefault(),w(!0)))},E=()=>w(!1),D=e=>{m&&(e.preventDefault(),w(!1),m(e))},[O,k]=(0,i.useState)(null),A=(0,i.useRef)(null),j=(0,i.useCallback)((e,t)=>k({x:e,y:t}),[]),M=(0,i.useCallback)(()=>k(null),[]);(0,i.useEffect)(()=>{if(!O)return;let e=e=>{A.current&&!A.current.contains(e.target)&&M()},t=e=>{e.key===`Escape`&&M()};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[O,M]);let N=e=>{p?.length&&(e.preventDefault(),j(e.clientX,e.clientY))},P=e=>{if(e.key===`ContextMenu`||e.key===`F10`&&e.shiftKey){if(!p?.length)return;e.preventDefault();let t=e.currentTarget.getBoundingClientRect();j(t.right,t.top)}},F=(0,o.jsxs)(`button`,{type:`button`,"aria-current":l?`page`:void 0,"aria-label":v?s:void 0,className:[n.default.itemBtn,l?n.default.active:null,v?n.default.itemCollapsed:null,C?n.default.dragOver:null,g].filter(Boolean).join(` `),onContextMenu:N,onKeyDown:P,onDragOver:T,onDragLeave:E,onDrop:D,..._,children:[c&&(0,o.jsx)(`span`,{className:n.default.itemIcon,children:(0,o.jsx)(e.Icon,{icon:c,size:`md`,"aria-hidden":!0})}),!v&&(0,o.jsx)(`span`,{className:n.default.itemLabel,children:s}),!v&&b&&(0,o.jsx)(`span`,{className:n.default.itemSuffix,children:b})]});return(0,o.jsxs)(`li`,{className:n.default.item,hidden:S||void 0,children:[x?(0,o.jsx)(t.Tooltip,{label:x,placement:`right`,children:F}):F,O&&p?.length&&typeof document<`u`&&(0,a.createPortal)((0,o.jsx)(`div`,{ref:A,className:n.default.contextMenu,style:{top:O.y,left:O.x},role:`menu`,children:p.map(e=>(0,o.jsx)(`button`,{type:`button`,role:`menuitem`,disabled:e.disabled,className:[n.default.contextMenuItem,e.destructive?n.default.contextMenuDestructive:null].filter(Boolean).join(` `),onClick:()=>{e.onClick(),M()},children:e.label},e.label))}),document.body)]})}exports.SidebarItem=s;
+const e=require("../Icon/Icon.cjs"),t=require("../Tooltip/Tooltip.cjs"),n=require("./Sidebar.module.css.cjs"),r=require("./Sidebar.cjs");let i=require("react"),a=require("react-dom"),o=require("react/jsx-runtime");var s=({label:s,icon:c,active:l=!1,suffix:u,badge:d,tooltip:f,menuItems:p,onDrop:m,acceptTypes:h,className:g,..._})=>{let v=r.useSidebarCollapsed(),y=(0,i.useContext)(r.SidebarFilterContext),b=u??d,x=v?f??s:f,S=y.length>0&&!s.toLowerCase().includes(y.toLowerCase()),[C,w]=(0,i.useState)(!1),T=e=>{m&&(h?.length&&!h.some(t=>e.dataTransfer.types.includes(t))||(e.preventDefault(),w(!0)))},E=()=>w(!1),D=e=>{m&&(e.preventDefault(),w(!1),m(e))},[O,k]=(0,i.useState)(null),A=(0,i.useRef)(null),j=(0,i.useCallback)((e,t)=>k({x:e,y:t}),[]),M=(0,i.useCallback)(()=>k(null),[]);(0,i.useEffect)(()=>{if(!O)return;let e=e=>{A.current&&!A.current.contains(e.target)&&M()},t=e=>{e.key===`Escape`&&M()};return document.addEventListener(`mousedown`,e),document.addEventListener(`keydown`,t),()=>{document.removeEventListener(`mousedown`,e),document.removeEventListener(`keydown`,t)}},[O,M]);let N=(0,o.jsxs)(`button`,{type:`button`,"aria-current":l?`page`:void 0,"aria-label":v?s:void 0,className:[n.default.itemBtn,l?n.default.active:null,v?n.default.itemCollapsed:null,C?n.default.dragOver:null,g].filter(Boolean).join(` `),onContextMenu:e=>{p?.length&&(e.preventDefault(),j(e.clientX,e.clientY))},onKeyDown:e=>{if(e.key===`ContextMenu`||e.key===`F10`&&e.shiftKey){if(!p?.length)return;e.preventDefault();let t=e.currentTarget.getBoundingClientRect();j(t.right,t.top)}},onDragOver:T,onDragLeave:E,onDrop:D,..._,children:[c&&(0,o.jsx)(`span`,{className:n.default.itemIcon,children:(0,o.jsx)(e.Icon,{icon:c,size:`md`,"aria-hidden":!0})}),!v&&(0,o.jsx)(`span`,{className:n.default.itemLabel,children:s}),!v&&b&&(0,o.jsx)(`span`,{className:n.default.itemSuffix,children:b})]});return(0,o.jsxs)(`li`,{className:n.default.item,hidden:S||void 0,children:[x?(0,o.jsx)(t.Tooltip,{label:x,placement:`right`,children:N}):N,O&&!!p?.length&&typeof document<`u`&&(0,a.createPortal)((0,o.jsx)(`div`,{ref:A,className:n.default.contextMenu,style:{top:O.y,left:O.x},role:`menu`,children:p.map(e=>(0,o.jsx)(`button`,{type:`button`,role:`menuitem`,disabled:e.disabled,className:[n.default.contextMenuItem,e.destructive?n.default.contextMenuDestructive:null].filter(Boolean).join(` `),onClick:()=>{e.onClick(),M()},children:e.label},e.label))}),document.body)]})};exports.SidebarItem=s;
 //# sourceMappingURL=SidebarItem.cjs.map

package/dist/components/Sidebar/SidebarItem.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.cjs","names":[],"sources":["../../../src/components/Sidebar/SidebarItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport {\n  type ButtonHTMLAttributes,\n  type DragEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Icon } from '../Icon';\nimport { Tooltip } from '../Tooltip';\n\nimport { SidebarFilterContext, useSidebarCollapsed } from './Sidebar';\nimport styles from './Sidebar.module.css';\n\nexport interface SidebarMenuEntry {\n  /** Label shown in the context menu. */\n  label: string;\n  /** Called when the entry is clicked. */\n  onClick: () => void;\n  /** Renders the entry in red. Use for destructive actions. */\n  destructive?: boolean;\n  /** Disables the entry. */\n  disabled?: boolean;\n}\n\nexport interface SidebarItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. */\n  label: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /** Marks this item as the currently active view. */\n  active?: boolean;\n  /**\n   * Trailing widget — any ReactNode (badge, button, icon…).\n   * Supersedes `badge` when both are provided.\n   */\n  suffix?: ReactNode;\n  /**\n   * @deprecated Use `suffix` instead.\n   */\n  badge?: ReactNode;\n  /**\n   * Short tooltip shown when hovering the item.\n   * Automatically shown when the sidebar is `collapsed`.\n   */\n  tooltip?: string;\n  /**\n   * Context-menu entries shown on right-click or the Menu key.\n   */\n  menuItems?: SidebarMenuEntry[];\n  /**\n   * Called when a dragged item is dropped onto this row.\n   * Mirrors `AdwSidebar` per-row drop target support (libadwaita 1.9).\n   */\n  onDrop?: (e: DragEvent<HTMLButtonElement>) => void;\n  /**\n   * MIME types this row accepts as drop targets (e.g. `[\"text/plain\"]`).\n   * When provided, drops of other types are rejected via `e.preventDefault()`.\n   * When omitted, all types are accepted.\n   */\n  acceptTypes?: string[];\n}\n\n/**\n * Individual navigation item inside a `Sidebar` or `SidebarSection`.\n *\n * **Tier 11 additions:**\n * - Automatically hidden when `Sidebar`'s `filter` / `searchable` is active\n *   and the `label` does not match (case-insensitive substring).\n * - `onDrop` / `acceptTypes` — HTML5 drag-and-drop target support.\n */\nexport function SidebarItem({\n  label,\n  icon,\n  active = false,\n  suffix,\n  badge,\n  tooltip,\n  menuItems,\n  onDrop,\n  acceptTypes,\n  className,\n  ...props\n}: SidebarItemProps) {\n  const collapsed = useSidebarCollapsed();\n  const filterValue = useContext(SidebarFilterContext);\n  const trailing = suffix ?? badge;\n  const effectiveTooltip = collapsed ? (tooltip ?? label) : tooltip;\n\n  // ── Filter visibility ────────────────────────────────────────────────────\n  const isFiltered =\n    filterValue.length > 0 && !label.toLowerCase().includes(filterValue.toLowerCase());\n\n  // ── Drag-and-drop ────────────────────────────────────────────────────────\n  const [isDragOver, setIsDragOver] = useState(false);\n\n  const handleDragOver = (e: DragEvent<HTMLButtonElement>) => {\n    if (!onDrop) {\n      return;\n    }\n\n    if (acceptTypes?.length) {\n      const accepted = acceptTypes.some((t) => e.dataTransfer.types.includes(t));\n\n      if (!accepted) {\n        return;\n      }\n    }\n\n    e.preventDefault();\n    setIsDragOver(true);\n  };\n\n  const handleDragLeave = () => setIsDragOver(false);\n\n  const handleDrop = (e: DragEvent<HTMLButtonElement>) => {\n    if (!onDrop) {\n      return;\n    }\n\n    e.preventDefault();\n    setIsDragOver(false);\n    onDrop(e);\n  };\n\n  // ── Context menu ─────────────────────────────────────────────────────────\n  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const openMenu = useCallback((x: number, y: number) => setMenu({ x, y }), []);\n  const closeMenu = useCallback(() => setMenu(null), []);\n\n  useEffect(() => {\n    if (!menu) {\n      return;\n    }\n\n    const handleClick = (e: globalThis.MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {\n        closeMenu();\n      }\n    };\n    const handleKey = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closeMenu();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n    document.addEventListener('keydown', handleKey);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n      document.removeEventListener('keydown', handleKey);\n    };\n  }, [menu, closeMenu]);\n\n  const handleContextMenu = (e: MouseEvent<HTMLButtonElement>) => {\n    if (!menuItems?.length) {\n      return;\n    }\n\n    e.preventDefault();\n    openMenu(e.clientX, e.clientY);\n  };\n\n  const handleMenuKey = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)) {\n      if (!menuItems?.length) {\n        return;\n      }\n\n      e.preventDefault();\n      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n\n      openMenu(rect.right, rect.top);\n    }\n  };\n\n  // ── Render ───────────────────────────────────────────────────────────────\n  const button = (\n    <button\n      type=\"button\"\n      aria-current={active ? 'page' : undefined}\n      aria-label={collapsed ? label : undefined}\n      className={[\n        styles.itemBtn,\n        active ? styles.active : null,\n        collapsed ? styles.itemCollapsed : null,\n        isDragOver ? styles.dragOver : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onContextMenu={handleContextMenu}\n      onKeyDown={handleMenuKey}\n      onDragOver={handleDragOver}\n      onDragLeave={handleDragLeave}\n      onDrop={handleDrop}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {!collapsed && <span className={styles.itemLabel}>{label}</span>}\n      {!collapsed && trailing && <span className={styles.itemSuffix}>{trailing}</span>}\n    </button>\n  );\n\n  return (\n    <li className={styles.item} hidden={isFiltered || undefined}>\n      {effectiveTooltip ? (\n        <Tooltip label={effectiveTooltip} placement=\"right\">\n          {button}\n        </Tooltip>\n      ) : (\n        button\n      )}\n\n      {menu &&\n        menuItems?.length &&\n        typeof document !== 'undefined' &&\n        createPortal(\n          <div\n            ref={menuRef}\n            className={styles.contextMenu}\n            style={{ top: menu.y, left: menu.x }}\n            role=\"menu\"\n          >\n            {menuItems.map((entry) => (\n              <button\n                key={entry.label}\n                type=\"button\"\n                role=\"menuitem\"\n                disabled={entry.disabled}\n                className={[\n                  styles.contextMenuItem,\n                  entry.destructive ? styles.contextMenuDestructive : null,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onClick={() => {\n                  entry.onClick();\n                  closeMenu();\n                }}\n              >\n                {entry.label}\n              </button>\n            ))}\n          </div>,\n          document.body,\n        )}\n    </li>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SidebarItem.cjs","names":[],"sources":["../../../src/components/Sidebar/SidebarItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport {\n  type ButtonHTMLAttributes,\n  type DragEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Icon } from '../Icon';\nimport { Tooltip } from '../Tooltip';\n\nimport { SidebarFilterContext, useSidebarCollapsed } from './Sidebar';\nimport styles from './Sidebar.module.css';\n\nexport interface SidebarMenuEntry {\n  /** Label shown in the context menu. */\n  label: string;\n  /** Called when the entry is clicked. */\n  onClick: () => void;\n  /** Renders the entry in red. Use for destructive actions. */\n  destructive?: boolean;\n  /** Disables the entry. */\n  disabled?: boolean;\n}\n\nexport interface SidebarItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. */\n  label: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /** Marks this item as the currently active view. */\n  active?: boolean;\n  /**\n   * Trailing widget — any ReactNode (badge, button, icon…).\n   * Supersedes `badge` when both are provided.\n   */\n  suffix?: ReactNode;\n  /**\n   * @deprecated Use `suffix` instead.\n   */\n  badge?: ReactNode;\n  /**\n   * Short tooltip shown when hovering the item.\n   * Automatically shown when the sidebar is `collapsed`.\n   */\n  tooltip?: string;\n  /**\n   * Context-menu entries shown on right-click or the Menu key.\n   */\n  menuItems?: SidebarMenuEntry[];\n  /**\n   * Called when a dragged item is dropped onto this row.\n   * Mirrors `AdwSidebar` per-row drop target support (libadwaita 1.9).\n   */\n  onDrop?: (e: DragEvent<HTMLButtonElement>) => void;\n  /**\n   * MIME types this row accepts as drop targets (e.g. `[\"text/plain\"]`).\n   * When provided, drops of other types are rejected via `e.preventDefault()`.\n   * When omitted, all types are accepted.\n   */\n  acceptTypes?: string[];\n}\n\n/**\n * Individual navigation item inside a `Sidebar` or `SidebarSection`.\n *\n * **Tier 11 additions:**\n * - Automatically hidden when `Sidebar`'s `filter` / `searchable` is active\n *   and the `label` does not match (case-insensitive substring).\n * - `onDrop` / `acceptTypes` — HTML5 drag-and-drop target support.\n */\nexport const SidebarItem = ({\n  label,\n  icon,\n  active = false,\n  suffix,\n  badge,\n  tooltip,\n  menuItems,\n  onDrop,\n  acceptTypes,\n  className,\n  ...props\n}: SidebarItemProps) => {\n  const collapsed = useSidebarCollapsed();\n  const filterValue = useContext(SidebarFilterContext);\n  const trailing = suffix ?? badge;\n  const effectiveTooltip = collapsed ? (tooltip ?? label) : tooltip;\n\n  // ── Filter visibility ────────────────────────────────────────────────────\n  const isFiltered =\n    filterValue.length > 0 && !label.toLowerCase().includes(filterValue.toLowerCase());\n\n  // ── Drag-and-drop ────────────────────────────────────────────────────────\n  const [isDragOver, setIsDragOver] = useState(false);\n\n  const handleDragOver = (e: DragEvent<HTMLButtonElement>) => {\n    if (!onDrop) {\n      return;\n    }\n\n    if (acceptTypes?.length) {\n      const accepted = acceptTypes.some((t) => e.dataTransfer.types.includes(t));\n\n      if (!accepted) {\n        return;\n      }\n    }\n\n    e.preventDefault();\n    setIsDragOver(true);\n  };\n\n  const handleDragLeave = () => setIsDragOver(false);\n\n  const handleDrop = (e: DragEvent<HTMLButtonElement>) => {\n    if (!onDrop) {\n      return;\n    }\n\n    e.preventDefault();\n    setIsDragOver(false);\n    onDrop(e);\n  };\n\n  // ── Context menu ─────────────────────────────────────────────────────────\n  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const openMenu = useCallback((x: number, y: number) => setMenu({ x, y }), []);\n  const closeMenu = useCallback(() => setMenu(null), []);\n\n  useEffect(() => {\n    if (!menu) {\n      return;\n    }\n\n    const handleClick = (e: globalThis.MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {\n        closeMenu();\n      }\n    };\n    const handleKey = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closeMenu();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n    document.addEventListener('keydown', handleKey);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n      document.removeEventListener('keydown', handleKey);\n    };\n  }, [menu, closeMenu]);\n\n  const handleContextMenu = (e: MouseEvent<HTMLButtonElement>) => {\n    if (!menuItems?.length) {\n      return;\n    }\n\n    e.preventDefault();\n    openMenu(e.clientX, e.clientY);\n  };\n\n  const handleMenuKey = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)) {\n      if (!menuItems?.length) {\n        return;\n      }\n\n      e.preventDefault();\n      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n\n      openMenu(rect.right, rect.top);\n    }\n  };\n\n  // ── Render ───────────────────────────────────────────────────────────────\n  const button = (\n    <button\n      type=\"button\"\n      aria-current={active ? 'page' : undefined}\n      aria-label={collapsed ? label : undefined}\n      className={[\n        styles.itemBtn,\n        active ? styles.active : null,\n        collapsed ? styles.itemCollapsed : null,\n        isDragOver ? styles.dragOver : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onContextMenu={handleContextMenu}\n      onKeyDown={handleMenuKey}\n      onDragOver={handleDragOver}\n      onDragLeave={handleDragLeave}\n      onDrop={handleDrop}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {!collapsed && <span className={styles.itemLabel}>{label}</span>}\n      {!collapsed && trailing && <span className={styles.itemSuffix}>{trailing}</span>}\n    </button>\n  );\n\n  return (\n    <li className={styles.item} hidden={isFiltered || undefined}>\n      {effectiveTooltip ? (\n        <Tooltip label={effectiveTooltip} placement=\"right\">\n          {button}\n        </Tooltip>\n      ) : (\n        button\n      )}\n\n      {menu &&\n        !!menuItems?.length &&\n        typeof document !== 'undefined' &&\n        createPortal(\n          <div\n            ref={menuRef}\n            className={styles.contextMenu}\n            style={{ top: menu.y, left: menu.x }}\n            role=\"menu\"\n          >\n            {menuItems.map((entry) => (\n              <button\n                key={entry.label}\n                type=\"button\"\n                role=\"menuitem\"\n                disabled={entry.disabled}\n                className={[\n                  styles.contextMenuItem,\n                  entry.destructive ? styles.contextMenuDestructive : null,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onClick={() => {\n                  entry.onClick();\n                  closeMenu();\n                }}\n              >\n                {entry.label}\n              </button>\n            ))}\n          </div>,\n          document.body,\n        )}\n    </li>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Sidebar/SidebarItem.d.ts

@@ -55,4 +55,4 @@ export interface SidebarItemProps extends ButtonHTMLAttributes<HTMLButtonElement
  *   and the `label` does not match (case-insensitive substring).
  * - `onDrop` / `acceptTypes` — HTML5 drag-and-drop target support.
  */
-export declare function SidebarItem({ label, icon, active, suffix, badge, tooltip, menuItems, onDrop, acceptTypes, className, ...props }: SidebarItemProps): import("react/jsx-runtime").JSX.Element;
+export declare const SidebarItem: ({ label, icon, active, suffix, badge, tooltip, menuItems, onDrop, acceptTypes, className, ...props }: SidebarItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Sidebar/SidebarItem.js

@@ -6,7 +6,7 @@ import { useCallback as a, useContext as o, useEffect as s, useRef as c, useStat
 import { createPortal as u } from "react-dom";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/components/Sidebar/SidebarItem.tsx
-function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v, menuItems: y, onDrop: b, acceptTypes: x, className: S, ...C }) {
+var p = ({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v, menuItems: y, onDrop: b, acceptTypes: x, className: S, ...C }) => {
 	let w = i(), T = o(r), E = g ?? _, D = w ? v ?? p : v, O = T.length > 0 && !p.toLowerCase().includes(T.toLowerCase()), [k, A] = l(!1), j = (e) => {
 		b && (x?.length && !x.some((t) => e.dataTransfer.types.includes(t)) || (e.preventDefault(), A(!0)));
 	}, M = () => A(!1), N = (e) => {
@@ -26,16 +26,7 @@ function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v,
 			document.removeEventListener("mousedown", e), document.removeEventListener("keydown", t);
 		};
 	}, [P, R]);
-	let z = (e) => {
-		y?.length && (e.preventDefault(), L(e.clientX, e.clientY));
-	}, B = (e) => {
-		if (e.key === "ContextMenu" || e.key === "F10" && e.shiftKey) {
-			if (!y?.length) return;
-			e.preventDefault();
-			let t = e.currentTarget.getBoundingClientRect();
-			L(t.right, t.top);
-		}
-	}, V = /* @__PURE__ */ f("button", {
+	let z = /* @__PURE__ */ f("button", {
 		type: "button",
 		"aria-current": h ? "page" : void 0,
 		"aria-label": w ? p : void 0,
@@ -46,8 +37,17 @@ function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v,
 			k ? n.dragOver : null,
 			S
 		].filter(Boolean).join(" "),
-		onContextMenu: z,
-		onKeyDown: B,
+		onContextMenu: (e) => {
+			y?.length && (e.preventDefault(), L(e.clientX, e.clientY));
+		},
+		onKeyDown: (e) => {
+			if (e.key === "ContextMenu" || e.key === "F10" && e.shiftKey) {
+				if (!y?.length) return;
+				e.preventDefault();
+				let t = e.currentTarget.getBoundingClientRect();
+				L(t.right, t.top);
+			}
+		},
 		onDragOver: j,
 		onDragLeave: M,
 		onDrop: N,
@@ -77,8 +77,8 @@ function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v,
 		children: [D ? /* @__PURE__ */ d(t, {
 			label: D,
 			placement: "right",
-			children: V
-		}) : V, P && y?.length && typeof document < "u" && u(/* @__PURE__ */ d("div", {
+			children: z
+		}) : z, P && !!y?.length && typeof document < "u" && u(/* @__PURE__ */ d("div", {
 			ref: I,
 			className: n.contextMenu,
 			style: {
@@ -98,7 +98,7 @@ function p({ label: p, icon: m, active: h = !1, suffix: g, badge: _, tooltip: v,
 			}, e.label))
 		}), document.body)]
 	});
-}
+};
 //#endregion
 export { p as SidebarItem };
 

package/dist/components/Sidebar/SidebarItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.js","names":[],"sources":["../../../src/components/Sidebar/SidebarItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport {\n  type ButtonHTMLAttributes,\n  type DragEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Icon } from '../Icon';\nimport { Tooltip } from '../Tooltip';\n\nimport { SidebarFilterContext, useSidebarCollapsed } from './Sidebar';\nimport styles from './Sidebar.module.css';\n\nexport interface SidebarMenuEntry {\n  /** Label shown in the context menu. */\n  label: string;\n  /** Called when the entry is clicked. */\n  onClick: () => void;\n  /** Renders the entry in red. Use for destructive actions. */\n  destructive?: boolean;\n  /** Disables the entry. */\n  disabled?: boolean;\n}\n\nexport interface SidebarItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. */\n  label: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /** Marks this item as the currently active view. */\n  active?: boolean;\n  /**\n   * Trailing widget — any ReactNode (badge, button, icon…).\n   * Supersedes `badge` when both are provided.\n   */\n  suffix?: ReactNode;\n  /**\n   * @deprecated Use `suffix` instead.\n   */\n  badge?: ReactNode;\n  /**\n   * Short tooltip shown when hovering the item.\n   * Automatically shown when the sidebar is `collapsed`.\n   */\n  tooltip?: string;\n  /**\n   * Context-menu entries shown on right-click or the Menu key.\n   */\n  menuItems?: SidebarMenuEntry[];\n  /**\n   * Called when a dragged item is dropped onto this row.\n   * Mirrors `AdwSidebar` per-row drop target support (libadwaita 1.9).\n   */\n  onDrop?: (e: DragEvent<HTMLButtonElement>) => void;\n  /**\n   * MIME types this row accepts as drop targets (e.g. `[\"text/plain\"]`).\n   * When provided, drops of other types are rejected via `e.preventDefault()`.\n   * When omitted, all types are accepted.\n   */\n  acceptTypes?: string[];\n}\n\n/**\n * Individual navigation item inside a `Sidebar` or `SidebarSection`.\n *\n * **Tier 11 additions:**\n * - Automatically hidden when `Sidebar`'s `filter` / `searchable` is active\n *   and the `label` does not match (case-insensitive substring).\n * - `onDrop` / `acceptTypes` — HTML5 drag-and-drop target support.\n */\nexport function SidebarItem({\n  label,\n  icon,\n  active = false,\n  suffix,\n  badge,\n  tooltip,\n  menuItems,\n  onDrop,\n  acceptTypes,\n  className,\n  ...props\n}: SidebarItemProps) {\n  const collapsed = useSidebarCollapsed();\n  const filterValue = useContext(SidebarFilterContext);\n  const trailing = suffix ?? badge;\n  const effectiveTooltip = collapsed ? (tooltip ?? label) : tooltip;\n\n  // ── Filter visibility ────────────────────────────────────────────────────\n  const isFiltered =\n    filterValue.length > 0 && !label.toLowerCase().includes(filterValue.toLowerCase());\n\n  // ── Drag-and-drop ────────────────────────────────────────────────────────\n  const [isDragOver, setIsDragOver] = useState(false);\n\n  const handleDragOver = (e: DragEvent<HTMLButtonElement>) => {\n    if (!onDrop) {\n      return;\n    }\n\n    if (acceptTypes?.length) {\n      const accepted = acceptTypes.some((t) => e.dataTransfer.types.includes(t));\n\n      if (!accepted) {\n        return;\n      }\n    }\n\n    e.preventDefault();\n    setIsDragOver(true);\n  };\n\n  const handleDragLeave = () => setIsDragOver(false);\n\n  const handleDrop = (e: DragEvent<HTMLButtonElement>) => {\n    if (!onDrop) {\n      return;\n    }\n\n    e.preventDefault();\n    setIsDragOver(false);\n    onDrop(e);\n  };\n\n  // ── Context menu ─────────────────────────────────────────────────────────\n  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const openMenu = useCallback((x: number, y: number) => setMenu({ x, y }), []);\n  const closeMenu = useCallback(() => setMenu(null), []);\n\n  useEffect(() => {\n    if (!menu) {\n      return;\n    }\n\n    const handleClick = (e: globalThis.MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {\n        closeMenu();\n      }\n    };\n    const handleKey = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closeMenu();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n    document.addEventListener('keydown', handleKey);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n      document.removeEventListener('keydown', handleKey);\n    };\n  }, [menu, closeMenu]);\n\n  const handleContextMenu = (e: MouseEvent<HTMLButtonElement>) => {\n    if (!menuItems?.length) {\n      return;\n    }\n\n    e.preventDefault();\n    openMenu(e.clientX, e.clientY);\n  };\n\n  const handleMenuKey = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)) {\n      if (!menuItems?.length) {\n        return;\n      }\n\n      e.preventDefault();\n      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n\n      openMenu(rect.right, rect.top);\n    }\n  };\n\n  // ── Render ───────────────────────────────────────────────────────────────\n  const button = (\n    <button\n      type=\"button\"\n      aria-current={active ? 'page' : undefined}\n      aria-label={collapsed ? label : undefined}\n      className={[\n        styles.itemBtn,\n        active ? styles.active : null,\n        collapsed ? styles.itemCollapsed : null,\n        isDragOver ? styles.dragOver : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onContextMenu={handleContextMenu}\n      onKeyDown={handleMenuKey}\n      onDragOver={handleDragOver}\n      onDragLeave={handleDragLeave}\n      onDrop={handleDrop}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {!collapsed && <span className={styles.itemLabel}>{label}</span>}\n      {!collapsed && trailing && <span className={styles.itemSuffix}>{trailing}</span>}\n    </button>\n  );\n\n  return (\n    <li className={styles.item} hidden={isFiltered || undefined}>\n      {effectiveTooltip ? (\n        <Tooltip label={effectiveTooltip} placement=\"right\">\n          {button}\n        </Tooltip>\n      ) : (\n        button\n      )}\n\n      {menu &&\n        menuItems?.length &&\n        typeof document !== 'undefined' &&\n        createPortal(\n          <div\n            ref={menuRef}\n            className={styles.contextMenu}\n            style={{ top: menu.y, left: menu.x }}\n            role=\"menu\"\n          >\n            {menuItems.map((entry) => (\n              <button\n                key={entry.label}\n                type=\"button\"\n                role=\"menuitem\"\n                disabled={entry.disabled}\n                className={[\n                  styles.contextMenuItem,\n                  entry.destructive ? styles.contextMenuDestructive : null,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onClick={() => {\n                  entry.onClick();\n                  closeMenu();\n                }}\n              >\n                {entry.label}\n              </button>\n            ))}\n          </div>,\n          document.body,\n        )}\n    </li>\n  );\n}\n"],"mappings":";;;;;;;;AA8EA,SAAgB,EAAY,EAC1B,UACA,SACA,YAAS,IACT,WACA,UACA,YACA,cACA,WACA,gBACA,cACA,GAAG,KACgB;CACnB,IAAM,IAAY,GAAqB,EACjC,IAAc,EAAW,EAAqB,EAC9C,IAAW,KAAU,GACrB,IAAmB,IAAa,KAAW,IAAS,GAGpD,IACJ,EAAY,SAAS,KAAK,CAAC,EAAM,aAAa,CAAC,SAAS,EAAY,aAAa,CAAC,EAG9E,CAAC,GAAY,KAAiB,EAAS,GAAM,EAE7C,KAAkB,MAAoC;AACrD,QAID,GAAa,UAGX,CAFa,EAAY,MAAM,MAAM,EAAE,aAAa,MAAM,SAAS,EAAE,CAAC,KAO5E,EAAE,gBAAgB,EAClB,EAAc,GAAK;IAGf,UAAwB,EAAc,GAAM,EAE5C,KAAc,MAAoC;AACjD,QAIL,EAAE,gBAAgB,EAClB,EAAc,GAAM,EACpB,EAAO,EAAE;IAIL,CAAC,GAAM,KAAW,EAA0C,KAAK,EACjE,IAAU,EAAuB,KAAK,EAEtC,IAAW,GAAa,GAAW,MAAc,EAAQ;EAAE;EAAG;EAAG,CAAC,EAAE,EAAE,CAAC,EACvE,IAAY,QAAkB,EAAQ,KAAK,EAAE,EAAE,CAAC;AAEtD,SAAgB;AACd,MAAI,CAAC,EACH;EAGF,IAAM,KAAe,MAA6B;AAChD,GAAI,EAAQ,WAAW,CAAC,EAAQ,QAAQ,SAAS,EAAE,OAAe,IAChE,GAAW;KAGT,KAAa,MAAgC;AACjD,GAAI,EAAE,QAAQ,YACZ,GAAW;;AAOf,SAHA,SAAS,iBAAiB,aAAa,EAAY,EACnD,SAAS,iBAAiB,WAAW,EAAU,QAElC;AAEX,GADA,SAAS,oBAAoB,aAAa,EAAY,EACtD,SAAS,oBAAoB,WAAW,EAAU;;IAEnD,CAAC,GAAM,EAAU,CAAC;CAErB,IAAM,KAAqB,MAAqC;AACzD,KAAW,WAIhB,EAAE,gBAAgB,EAClB,EAAS,EAAE,SAAS,EAAE,QAAQ;IAG1B,KAAiB,MAAwC;AAC7D,MAAI,EAAE,QAAQ,iBAAkB,EAAE,QAAQ,SAAS,EAAE,UAAW;AAC9D,OAAI,CAAC,GAAW,OACd;AAGF,KAAE,gBAAgB;GAClB,IAAM,IAAQ,EAAE,cAA8B,uBAAuB;AAErE,KAAS,EAAK,OAAO,EAAK,IAAI;;IAK5B,IACJ,kBAAC,UAAD;EACE,MAAK;EACL,gBAAc,IAAS,SAAS,KAAA;EAChC,cAAY,IAAY,IAAQ,KAAA;EAChC,WAAW;GACT,EAAO;GACP,IAAS,EAAO,SAAS;GACzB,IAAY,EAAO,gBAAgB;GACnC,IAAa,EAAO,WAAW;GAC/B;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,eAAe;EACf,WAAW;EACX,YAAY;EACZ,aAAa;EACb,QAAQ;EACR,GAAI;YAlBN;GAoBG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAO;cACtB,kBAAC,GAAD;KAAY;KAAM,MAAK;KAAK,eAAA;KAAc,CAAA;IACrC,CAAA;GAER,CAAC,KAAa,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAY;IAAa,CAAA;GAC/D,CAAC,KAAa,KAAY,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAa;IAAgB,CAAA;GACzE;;AAGX,QACE,kBAAC,MAAD;EAAI,WAAW,EAAO;EAAM,QAAQ,KAAc,KAAA;YAAlD,CACG,IACC,kBAAC,GAAD;GAAS,OAAO;GAAkB,WAAU;aACzC;GACO,CAAA,GAEV,GAGD,KACC,GAAW,UACX,OAAO,WAAa,OACpB,EACE,kBAAC,OAAD;GACE,KAAK;GACL,WAAW,EAAO;GAClB,OAAO;IAAE,KAAK,EAAK;IAAG,MAAM,EAAK;IAAG;GACpC,MAAK;aAEJ,EAAU,KAAK,MACd,kBAAC,UAAD;IAEE,MAAK;IACL,MAAK;IACL,UAAU,EAAM;IAChB,WAAW,CACT,EAAO,iBACP,EAAM,cAAc,EAAO,yBAAyB,KACrD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;IACZ,eAAe;AAEb,KADA,EAAM,SAAS,EACf,GAAW;;cAGZ,EAAM;IACA,EAhBF,EAAM,MAgBJ,CACT;GACE,CAAA,EACN,SAAS,KACV,CACA"}
+{"version":3,"file":"SidebarItem.js","names":[],"sources":["../../../src/components/Sidebar/SidebarItem.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport {\n  type ButtonHTMLAttributes,\n  type DragEvent,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { Icon } from '../Icon';\nimport { Tooltip } from '../Tooltip';\n\nimport { SidebarFilterContext, useSidebarCollapsed } from './Sidebar';\nimport styles from './Sidebar.module.css';\n\nexport interface SidebarMenuEntry {\n  /** Label shown in the context menu. */\n  label: string;\n  /** Called when the entry is clicked. */\n  onClick: () => void;\n  /** Renders the entry in red. Use for destructive actions. */\n  destructive?: boolean;\n  /** Disables the entry. */\n  disabled?: boolean;\n}\n\nexport interface SidebarItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Primary label. */\n  label: string;\n  /** Icon from `@gnome-ui/icons`. */\n  icon?: IconDefinition;\n  /** Marks this item as the currently active view. */\n  active?: boolean;\n  /**\n   * Trailing widget — any ReactNode (badge, button, icon…).\n   * Supersedes `badge` when both are provided.\n   */\n  suffix?: ReactNode;\n  /**\n   * @deprecated Use `suffix` instead.\n   */\n  badge?: ReactNode;\n  /**\n   * Short tooltip shown when hovering the item.\n   * Automatically shown when the sidebar is `collapsed`.\n   */\n  tooltip?: string;\n  /**\n   * Context-menu entries shown on right-click or the Menu key.\n   */\n  menuItems?: SidebarMenuEntry[];\n  /**\n   * Called when a dragged item is dropped onto this row.\n   * Mirrors `AdwSidebar` per-row drop target support (libadwaita 1.9).\n   */\n  onDrop?: (e: DragEvent<HTMLButtonElement>) => void;\n  /**\n   * MIME types this row accepts as drop targets (e.g. `[\"text/plain\"]`).\n   * When provided, drops of other types are rejected via `e.preventDefault()`.\n   * When omitted, all types are accepted.\n   */\n  acceptTypes?: string[];\n}\n\n/**\n * Individual navigation item inside a `Sidebar` or `SidebarSection`.\n *\n * **Tier 11 additions:**\n * - Automatically hidden when `Sidebar`'s `filter` / `searchable` is active\n *   and the `label` does not match (case-insensitive substring).\n * - `onDrop` / `acceptTypes` — HTML5 drag-and-drop target support.\n */\nexport const SidebarItem = ({\n  label,\n  icon,\n  active = false,\n  suffix,\n  badge,\n  tooltip,\n  menuItems,\n  onDrop,\n  acceptTypes,\n  className,\n  ...props\n}: SidebarItemProps) => {\n  const collapsed = useSidebarCollapsed();\n  const filterValue = useContext(SidebarFilterContext);\n  const trailing = suffix ?? badge;\n  const effectiveTooltip = collapsed ? (tooltip ?? label) : tooltip;\n\n  // ── Filter visibility ────────────────────────────────────────────────────\n  const isFiltered =\n    filterValue.length > 0 && !label.toLowerCase().includes(filterValue.toLowerCase());\n\n  // ── Drag-and-drop ────────────────────────────────────────────────────────\n  const [isDragOver, setIsDragOver] = useState(false);\n\n  const handleDragOver = (e: DragEvent<HTMLButtonElement>) => {\n    if (!onDrop) {\n      return;\n    }\n\n    if (acceptTypes?.length) {\n      const accepted = acceptTypes.some((t) => e.dataTransfer.types.includes(t));\n\n      if (!accepted) {\n        return;\n      }\n    }\n\n    e.preventDefault();\n    setIsDragOver(true);\n  };\n\n  const handleDragLeave = () => setIsDragOver(false);\n\n  const handleDrop = (e: DragEvent<HTMLButtonElement>) => {\n    if (!onDrop) {\n      return;\n    }\n\n    e.preventDefault();\n    setIsDragOver(false);\n    onDrop(e);\n  };\n\n  // ── Context menu ─────────────────────────────────────────────────────────\n  const [menu, setMenu] = useState<{ x: number; y: number } | null>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n\n  const openMenu = useCallback((x: number, y: number) => setMenu({ x, y }), []);\n  const closeMenu = useCallback(() => setMenu(null), []);\n\n  useEffect(() => {\n    if (!menu) {\n      return;\n    }\n\n    const handleClick = (e: globalThis.MouseEvent) => {\n      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {\n        closeMenu();\n      }\n    };\n    const handleKey = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        closeMenu();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n    document.addEventListener('keydown', handleKey);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n      document.removeEventListener('keydown', handleKey);\n    };\n  }, [menu, closeMenu]);\n\n  const handleContextMenu = (e: MouseEvent<HTMLButtonElement>) => {\n    if (!menuItems?.length) {\n      return;\n    }\n\n    e.preventDefault();\n    openMenu(e.clientX, e.clientY);\n  };\n\n  const handleMenuKey = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === 'ContextMenu' || (e.key === 'F10' && e.shiftKey)) {\n      if (!menuItems?.length) {\n        return;\n      }\n\n      e.preventDefault();\n      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n\n      openMenu(rect.right, rect.top);\n    }\n  };\n\n  // ── Render ───────────────────────────────────────────────────────────────\n  const button = (\n    <button\n      type=\"button\"\n      aria-current={active ? 'page' : undefined}\n      aria-label={collapsed ? label : undefined}\n      className={[\n        styles.itemBtn,\n        active ? styles.active : null,\n        collapsed ? styles.itemCollapsed : null,\n        isDragOver ? styles.dragOver : null,\n        className,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n      onContextMenu={handleContextMenu}\n      onKeyDown={handleMenuKey}\n      onDragOver={handleDragOver}\n      onDragLeave={handleDragLeave}\n      onDrop={handleDrop}\n      {...props}\n    >\n      {icon && (\n        <span className={styles.itemIcon}>\n          <Icon icon={icon} size=\"md\" aria-hidden />\n        </span>\n      )}\n      {!collapsed && <span className={styles.itemLabel}>{label}</span>}\n      {!collapsed && trailing && <span className={styles.itemSuffix}>{trailing}</span>}\n    </button>\n  );\n\n  return (\n    <li className={styles.item} hidden={isFiltered || undefined}>\n      {effectiveTooltip ? (\n        <Tooltip label={effectiveTooltip} placement=\"right\">\n          {button}\n        </Tooltip>\n      ) : (\n        button\n      )}\n\n      {menu &&\n        !!menuItems?.length &&\n        typeof document !== 'undefined' &&\n        createPortal(\n          <div\n            ref={menuRef}\n            className={styles.contextMenu}\n            style={{ top: menu.y, left: menu.x }}\n            role=\"menu\"\n          >\n            {menuItems.map((entry) => (\n              <button\n                key={entry.label}\n                type=\"button\"\n                role=\"menuitem\"\n                disabled={entry.disabled}\n                className={[\n                  styles.contextMenuItem,\n                  entry.destructive ? styles.contextMenuDestructive : null,\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n                onClick={() => {\n                  entry.onClick();\n                  closeMenu();\n                }}\n              >\n                {entry.label}\n              </button>\n            ))}\n          </div>,\n          document.body,\n        )}\n    </li>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Sidebar/SidebarSection.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Icon/Icon.cjs`),t=require(`./Sidebar.module.css.cjs`),n=require(`./Sidebar.cjs`);let r=require(`react`),i=require(`react/jsx-runtime`),a=require(`@gnome-ui/icons`);function o(e,t){let n=0;return r.Children.forEach(e,e=>{if(!(0,r.isValidElement)(e))return;let i=e.props;typeof i.label==`string`?i.label.toLowerCase().includes(t.toLowerCase())&&n++:i.children&&(n+=o(i.children,t))}),n}var s=(0,r.forwardRef)(function({title:s,icon:c,collapsible:l=!1,defaultOpen:u=!0,open:d,onOpenChange:f,children:p,className:m,...h},g){let[_,v]=(0,r.useState)(u),y=d!==void 0,b=y?d:_,x=n.useSidebarCollapsed(),S=(0,r.useContext)(n.SidebarFilterContext),C=(0,r.useId)(),w=e=>{y||v(e),f?.(e)};if((0,r.useImperativeHandle)(g,()=>({expand:()=>w(!0),collapse:()=>w(!1),toggle:()=>w(!b)})),!(S.length===0||o(p,S)>0))return null;let T=x?!0:b,E=!!(s||c||l&&!x);return(0,i.jsxs)(`section`,{className:[t.default.section,m].filter(Boolean).join(` `),...h,children:[E&&(l&&!x?(0,i.jsxs)(`button`,{type:`button`,className:t.default.sectionHeader,onClick:()=>w(!b),"aria-expanded":b,"aria-controls":C,children:[c&&(0,i.jsx)(`span`,{className:t.default.sectionHeaderIcon,children:(0,i.jsx)(e.Icon,{icon:c,size:`sm`,"aria-hidden":!0})}),s&&(0,i.jsx)(`span`,{className:t.default.sectionTitle,children:s}),(0,i.jsx)(`span`,{className:t.default.sectionChevron,children:(0,i.jsx)(e.Icon,{icon:b?a.PanUp:a.PanDown,size:`sm`,"aria-hidden":!0})})]}):(0,i.jsxs)(`div`,{className:t.default.sectionHeader,children:[c&&(0,i.jsx)(`span`,{className:t.default.sectionHeaderIcon,children:(0,i.jsx)(e.Icon,{icon:c,size:`sm`,"aria-hidden":!0})}),s&&(0,i.jsx)(`span`,{className:t.default.sectionTitle,children:s})]})),(0,i.jsx)(`div`,{id:C,className:[t.default.sectionBody,T?null:t.default.sectionBodyCollapsed].filter(Boolean).join(` `),"aria-hidden":!T||void 0,children:(0,i.jsx)(`div`,{className:t.default.sectionBodyInner,children:(0,i.jsx)(`ul`,{className:t.default.list,children:p})})})]})});exports.SidebarSection=s;
+const e=require("../Icon/Icon.cjs"),t=require("./Sidebar.module.css.cjs"),n=require("./Sidebar.cjs");let r=require("react"),i=require("react/jsx-runtime"),a=require("@gnome-ui/icons");function o(e,t){let n=0;return r.Children.forEach(e,e=>{if(!(0,r.isValidElement)(e))return;let i=e.props;typeof i.label==`string`?i.label.toLowerCase().includes(t.toLowerCase())&&n++:i.children&&(n+=o(i.children,t))}),n}var s=(0,r.forwardRef)(function({title:s,icon:c,collapsible:l=!1,defaultOpen:u=!0,open:d,onOpenChange:f,children:p,className:m,...h},g){let[_,v]=(0,r.useState)(u),y=d!==void 0,b=y?d:_,x=n.useSidebarCollapsed(),S=(0,r.useContext)(n.SidebarFilterContext),C=(0,r.useId)(),w=e=>{y||v(e),f?.(e)};if((0,r.useImperativeHandle)(g,()=>({expand:()=>w(!0),collapse:()=>w(!1),toggle:()=>w(!b)})),!(S.length===0||o(p,S)>0))return null;let T=x?!0:b,E=!!(s||c||l&&!x);return(0,i.jsxs)(`section`,{className:[t.default.section,m].filter(Boolean).join(` `),...h,children:[E&&(l&&!x?(0,i.jsxs)(`button`,{type:`button`,className:t.default.sectionHeader,onClick:()=>w(!b),"aria-expanded":b,"aria-controls":C,children:[c&&(0,i.jsx)(`span`,{className:t.default.sectionHeaderIcon,children:(0,i.jsx)(e.Icon,{icon:c,size:`sm`,"aria-hidden":!0})}),s&&(0,i.jsx)(`span`,{className:t.default.sectionTitle,children:s}),(0,i.jsx)(`span`,{className:t.default.sectionChevron,children:(0,i.jsx)(e.Icon,{icon:b?a.PanUp:a.PanDown,size:`sm`,"aria-hidden":!0})})]}):(0,i.jsxs)(`div`,{className:t.default.sectionHeader,children:[c&&(0,i.jsx)(`span`,{className:t.default.sectionHeaderIcon,children:(0,i.jsx)(e.Icon,{icon:c,size:`sm`,"aria-hidden":!0})}),s&&(0,i.jsx)(`span`,{className:t.default.sectionTitle,children:s})]})),(0,i.jsx)(`div`,{id:C,className:[t.default.sectionBody,T?null:t.default.sectionBodyCollapsed].filter(Boolean).join(` `),"aria-hidden":!T||void 0,children:(0,i.jsx)(`div`,{className:t.default.sectionBodyInner,children:(0,i.jsx)(`ul`,{className:t.default.list,children:p})})})]})});exports.SidebarSection=s;
 //# sourceMappingURL=SidebarSection.cjs.map

package/dist/components/Sidebar/SidebarSection.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarSection.cjs","names":[],"sources":["../../../src/components/Sidebar/SidebarSection.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport { PanDown, PanUp } from '@gnome-ui/icons';\nimport {\n  Children,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useContext,\n  useId,\n  useImperativeHandle,\n  useState,\n} from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { SidebarFilterContext, useSidebarCollapsed } from './Sidebar';\nimport styles from './Sidebar.module.css';\n\n// ─── Filter helper ────────────────────────────────────────────────────────────\n\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const props = child.props as Record<string, unknown>;\n\n    if (typeof props.label === 'string') {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) {\n        count++;\n      }\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n\n  return count;\n}\n\n// ─── Handle ───────────────────────────────────────────────────────────────────\n\nexport interface SidebarSectionHandle {\n  expand: () => void;\n  collapse: () => void;\n  toggle: () => void;\n}\n\n// ─── Props ────────────────────────────────────────────────────────────────────\n\nexport interface SidebarSectionProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Section heading. Rendered in small caps above the items.\n   * Omit for an untitled section (e.g. the first group in a sidebar).\n   */\n  title?: string;\n  /** Icon rendered left of the title. Same type as `SidebarItem.icon`. */\n  icon?: IconDefinition;\n  /** Whether the section body can be toggled open/closed. Defaults to `false`. */\n  collapsible?: boolean;\n  /** Initial open state when `collapsible` is true. Defaults to `true`. */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when open state changes. */\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Named group of `SidebarItem` entries inside a `Sidebar`.\n *\n * Sections are separated by a thin divider. The title and icon are optional.\n * When `collapsible` is true the body can be toggled via the header button or\n * imperatively via a `ref` (`expand`, `collapse`, `toggle`).\n *\n * In rail (icon-only) mode the body is always visible regardless of open state.\n * When a sidebar filter is active and no children match, the section is hidden.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport const SidebarSection = forwardRef<SidebarSectionHandle, SidebarSectionProps>(\n  function SidebarSection(\n    {\n      title,\n      icon,\n      collapsible = false,\n      defaultOpen = true,\n      open: controlledOpen,\n      onOpenChange,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n    const isControlled = controlledOpen !== undefined;\n    const open = isControlled ? controlledOpen : internalOpen;\n\n    const sidebarCollapsed = useSidebarCollapsed();\n    const filterValue = useContext(SidebarFilterContext);\n    const bodyId = useId();\n\n    const setAndNotify = (next: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(next);\n      }\n\n      onOpenChange?.(next);\n    };\n\n    useImperativeHandle(ref, () => ({\n      expand: () => setAndNotify(true),\n      collapse: () => setAndNotify(false),\n      toggle: () => setAndNotify(!open),\n    }));\n\n    // Hide section entirely when filter is active and no children match\n    const hasVisibleChildren =\n      filterValue.length === 0 || countMatchingItems(children, filterValue) > 0;\n\n    if (!hasVisibleChildren) {\n      return null;\n    }\n\n    // In rail mode the body is always visible\n    const isOpen = sidebarCollapsed ? true : open;\n\n    const showHeader = !!(title || icon || (collapsible && !sidebarCollapsed));\n\n    return (\n      <section className={[styles.section, className].filter(Boolean).join(' ')} {...props}>\n        {showHeader &&\n          (collapsible && !sidebarCollapsed ? (\n            <button\n              type=\"button\"\n              className={styles.sectionHeader}\n              onClick={() => setAndNotify(!open)}\n              aria-expanded={open}\n              aria-controls={bodyId}\n            >\n              {icon && (\n                <span className={styles.sectionHeaderIcon}>\n                  <Icon icon={icon} size=\"sm\" aria-hidden />\n                </span>\n              )}\n              {title && <span className={styles.sectionTitle}>{title}</span>}\n              <span className={styles.sectionChevron}>\n                <Icon icon={open ? PanUp : PanDown} size=\"sm\" aria-hidden />\n              </span>\n            </button>\n          ) : (\n            <div className={styles.sectionHeader}>\n              {icon && (\n                <span className={styles.sectionHeaderIcon}>\n                  <Icon icon={icon} size=\"sm\" aria-hidden />\n                </span>\n              )}\n              {title && <span className={styles.sectionTitle}>{title}</span>}\n            </div>\n          ))}\n\n        <div\n          id={bodyId}\n          className={[styles.sectionBody, !isOpen ? styles.sectionBodyCollapsed : null]\n            .filter(Boolean)\n            .join(' ')}\n          aria-hidden={!isOpen || undefined}\n        >\n          <div className={styles.sectionBodyInner}>\n            <ul className={styles.list}>{children}</ul>\n          </div>\n        </div>\n      </section>\n    );\n  },\n);\n"],"mappings":"wLAqBA,SAAS,EAAmB,EAAqB,EAAwB,CACvE,IAAI,EAAQ,EAiBZ,OAhBA,EAAA,SAAS,QAAQ,EAAW,GAAU,CACpC,GAAI,EAAA,EAAA,EAAA,gBAAgB,EAAM,CACxB,OAGF,IAAM,EAAQ,EAAM,MAEhB,OAAO,EAAM,OAAU,SACrB,EAAM,MAAM,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,EAC1D,IAEO,EAAM,WACf,GAAS,EAAmB,EAAM,SAAuB,EAAO,GAElE,CAEK,EA8CT,IAAa,GAAA,EAAA,EAAA,YACX,SACE,CACE,QACA,OACA,cAAc,GACd,cAAc,GACd,KAAM,EACN,eACA,WACA,YACA,GAAG,GAEL,EACA,CACA,GAAM,CAAC,EAAc,IAAA,EAAA,EAAA,UAA4B,EAAY,CACvD,EAAe,IAAmB,IAAA,GAClC,EAAO,EAAe,EAAiB,EAEvC,EAAmB,EAAA,qBAAqB,CACxC,GAAA,EAAA,EAAA,YAAyB,EAAA,qBAAqB,CAC9C,GAAA,EAAA,EAAA,QAAgB,CAEhB,EAAgB,GAAkB,CACjC,GACH,EAAgB,EAAK,CAGvB,IAAe,EAAK,EAatB,IAVA,EAAA,EAAA,qBAAoB,OAAY,CAC9B,WAAc,EAAa,GAAK,CAChC,aAAgB,EAAa,GAAM,CACnC,WAAc,EAAa,CAAC,EAAK,CAClC,EAAE,CAMC,EAFF,EAAY,SAAW,GAAK,EAAmB,EAAU,EAAY,CAAG,GAGxE,OAAO,KAIT,IAAM,EAAS,EAAmB,GAAO,EAEnC,EAAa,CAAC,EAAE,GAAS,GAAS,GAAe,CAAC,GAExD,OACE,EAAA,EAAA,MAAC,UAAD,CAAS,UAAW,CAAC,EAAA,QAAO,QAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAE,GAAI,WAA/E,CACG,IACE,GAAe,CAAC,GACf,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,cAClB,YAAe,EAAa,CAAC,EAAK,CAClC,gBAAe,EACf,gBAAe,WALjB,CAOG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,4BACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,GAAc,CAAA,CACrC,CAAA,CAER,IAAS,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,sBAAe,EAAa,CAAA,EAC9D,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,yBACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAM,EAAO,EAAA,MAAQ,EAAA,QAAS,KAAK,KAAK,cAAA,GAAc,CAAA,CACvD,CAAA,CACA,IAET,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,uBAAvB,CACG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,4BACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,GAAc,CAAA,CACrC,CAAA,CAER,IAAS,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,sBAAe,EAAa,CAAA,CAC1D,KAGV,EAAA,EAAA,KAAC,MAAD,CACE,GAAI,EACJ,UAAW,CAAC,EAAA,QAAO,YAAc,EAAuC,KAA9B,EAAA,QAAO,qBAA4B,CAC1E,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,cAAa,CAAC,GAAU,IAAA,aAExB,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,2BACrB,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,QAAO,KAAO,WAAc,CAAA,CACvC,CAAA,CACF,CAAA,CACE,IAGf"}
+{"version":3,"file":"SidebarSection.cjs","names":[],"sources":["../../../src/components/Sidebar/SidebarSection.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport { PanDown, PanUp } from '@gnome-ui/icons';\nimport {\n  Children,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useContext,\n  useId,\n  useImperativeHandle,\n  useState,\n} from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { SidebarFilterContext, useSidebarCollapsed } from './Sidebar';\nimport styles from './Sidebar.module.css';\n\n// ─── Filter helper ────────────────────────────────────────────────────────────\n\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const props = child.props as Record<string, unknown>;\n\n    if (typeof props.label === 'string') {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) {\n        count++;\n      }\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n\n  return count;\n}\n\n// ─── Handle ───────────────────────────────────────────────────────────────────\n\nexport interface SidebarSectionHandle {\n  expand: () => void;\n  collapse: () => void;\n  toggle: () => void;\n}\n\n// ─── Props ────────────────────────────────────────────────────────────────────\n\nexport interface SidebarSectionProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Section heading. Rendered in small caps above the items.\n   * Omit for an untitled section (e.g. the first group in a sidebar).\n   */\n  title?: string;\n  /** Icon rendered left of the title. Same type as `SidebarItem.icon`. */\n  icon?: IconDefinition;\n  /** Whether the section body can be toggled open/closed. Defaults to `false`. */\n  collapsible?: boolean;\n  /** Initial open state when `collapsible` is true. Defaults to `true`. */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when open state changes. */\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Named group of `SidebarItem` entries inside a `Sidebar`.\n *\n * Sections are separated by a thin divider. The title and icon are optional.\n * When `collapsible` is true the body can be toggled via the header button or\n * imperatively via a `ref` (`expand`, `collapse`, `toggle`).\n *\n * In rail (icon-only) mode the body is always visible regardless of open state.\n * When a sidebar filter is active and no children match, the section is hidden.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport const SidebarSection = forwardRef<SidebarSectionHandle, SidebarSectionProps>(\n  function SidebarSection(\n    {\n      title,\n      icon,\n      collapsible = false,\n      defaultOpen = true,\n      open: controlledOpen,\n      onOpenChange,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n    const isControlled = controlledOpen !== undefined;\n    const open = isControlled ? controlledOpen : internalOpen;\n\n    const sidebarCollapsed = useSidebarCollapsed();\n    const filterValue = useContext(SidebarFilterContext);\n    const bodyId = useId();\n\n    const setAndNotify = (next: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(next);\n      }\n\n      onOpenChange?.(next);\n    };\n\n    useImperativeHandle(ref, () => ({\n      expand: () => setAndNotify(true),\n      collapse: () => setAndNotify(false),\n      toggle: () => setAndNotify(!open),\n    }));\n\n    // Hide section entirely when filter is active and no children match\n    const hasVisibleChildren =\n      filterValue.length === 0 || countMatchingItems(children, filterValue) > 0;\n\n    if (!hasVisibleChildren) {\n      return null;\n    }\n\n    // In rail mode the body is always visible\n    const isOpen = sidebarCollapsed ? true : open;\n\n    const showHeader = !!(title || icon || (collapsible && !sidebarCollapsed));\n\n    return (\n      <section className={[styles.section, className].filter(Boolean).join(' ')} {...props}>\n        {showHeader &&\n          (collapsible && !sidebarCollapsed ? (\n            <button\n              type=\"button\"\n              className={styles.sectionHeader}\n              onClick={() => setAndNotify(!open)}\n              aria-expanded={open}\n              aria-controls={bodyId}\n            >\n              {icon && (\n                <span className={styles.sectionHeaderIcon}>\n                  <Icon icon={icon} size=\"sm\" aria-hidden />\n                </span>\n              )}\n              {title && <span className={styles.sectionTitle}>{title}</span>}\n              <span className={styles.sectionChevron}>\n                <Icon icon={open ? PanUp : PanDown} size=\"sm\" aria-hidden />\n              </span>\n            </button>\n          ) : (\n            <div className={styles.sectionHeader}>\n              {icon && (\n                <span className={styles.sectionHeaderIcon}>\n                  <Icon icon={icon} size=\"sm\" aria-hidden />\n                </span>\n              )}\n              {title && <span className={styles.sectionTitle}>{title}</span>}\n            </div>\n          ))}\n\n        <div\n          id={bodyId}\n          className={[styles.sectionBody, !isOpen ? styles.sectionBodyCollapsed : null]\n            .filter(Boolean)\n            .join(' ')}\n          aria-hidden={!isOpen || undefined}\n        >\n          <div className={styles.sectionBodyInner}>\n            <ul className={styles.list}>{children}</ul>\n          </div>\n        </div>\n      </section>\n    );\n  },\n);\n"],"mappings":"wLAqBA,SAAS,EAAmB,EAAqB,EAAwB,CACvE,IAAI,EAAQ,EAiBZ,OAhBA,EAAA,SAAS,QAAQ,EAAW,GAAU,CACpC,GAAI,EAAA,EAAA,EAAA,gBAAgB,CAAK,EACvB,OAGF,IAAM,EAAQ,EAAM,MAEhB,OAAO,EAAM,OAAU,SACrB,EAAM,MAAM,YAAY,EAAE,SAAS,EAAO,YAAY,CAAC,GACzD,IAEO,EAAM,WACf,GAAS,EAAmB,EAAM,SAAuB,CAAM,EAEnE,CAAC,EAEM,CACT,CA6CA,IAAa,GAAA,EAAA,EAAA,YACX,SACE,CACE,QACA,OACA,cAAc,GACd,cAAc,GACd,KAAM,EACN,eACA,WACA,YACA,GAAG,GAEL,EACA,CACA,GAAM,CAAC,EAAc,IAAA,EAAA,EAAA,UAA4B,CAAW,EACtD,EAAe,IAAmB,IAAA,GAClC,EAAO,EAAe,EAAiB,EAEvC,EAAmB,EAAA,oBAAoB,EACvC,GAAA,EAAA,EAAA,YAAyB,EAAA,oBAAoB,EAC7C,GAAA,EAAA,EAAA,OAAe,EAEf,EAAgB,GAAkB,CACjC,GACH,EAAgB,CAAI,EAGtB,IAAe,CAAI,CACrB,EAYA,IAVA,EAAA,EAAA,qBAAoB,OAAY,CAC9B,WAAc,EAAa,EAAI,EAC/B,aAAgB,EAAa,EAAK,EAClC,WAAc,EAAa,CAAC,CAAI,CAClC,EAAE,EAME,EAFF,EAAY,SAAW,GAAK,EAAmB,EAAU,CAAW,EAAI,GAGxE,OAAO,KAIT,IAAM,EAAS,EAAmB,GAAO,EAEnC,EAAa,CAAC,EAAE,GAAS,GAAS,GAAe,CAAC,GAExD,OACE,EAAA,EAAA,MAAC,UAAD,CAAS,UAAW,CAAC,EAAA,QAAO,QAAS,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,EAAG,GAAI,WAA/E,CACG,IACE,GAAe,CAAC,GACf,EAAA,EAAA,MAAC,SAAD,CACE,KAAK,SACL,UAAW,EAAA,QAAO,cAClB,YAAe,EAAa,CAAC,CAAI,EACjC,gBAAe,EACf,gBAAe,WALjB,CAOG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,4BACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,EAAa,CAAA,CACrC,CAAA,EAEP,IAAS,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,sBAAe,CAAY,CAAA,GAC7D,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,yBACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAM,KAAM,EAAO,EAAA,MAAQ,EAAA,QAAS,KAAK,KAAK,cAAA,EAAa,CAAA,CACvD,CAAA,CACA,KAER,EAAA,EAAA,MAAC,MAAD,CAAK,UAAW,EAAA,QAAO,uBAAvB,CACG,IACC,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,4BACtB,EAAA,EAAA,KAAC,EAAA,KAAD,CAAY,OAAM,KAAK,KAAK,cAAA,EAAa,CAAA,CACrC,CAAA,EAEP,IAAS,EAAA,EAAA,KAAC,OAAD,CAAM,UAAW,EAAA,QAAO,sBAAe,CAAY,CAAA,CAC1D,MAGT,EAAA,EAAA,KAAC,MAAD,CACE,GAAI,EACJ,UAAW,CAAC,EAAA,QAAO,YAAc,EAAuC,KAA9B,EAAA,QAAO,oBAA2B,EACzE,OAAO,OAAO,EACd,KAAK,GAAG,EACX,cAAa,CAAC,GAAU,IAAA,aAExB,EAAA,EAAA,KAAC,MAAD,CAAK,UAAW,EAAA,QAAO,2BACrB,EAAA,EAAA,KAAC,KAAD,CAAI,UAAW,EAAA,QAAO,KAAO,UAAa,CAAA,CACvC,CAAA,CACF,CAAA,CACE,GAEb,CACF"}

package/dist/components/Sidebar/SidebarSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarSection.js","names":[],"sources":["../../../src/components/Sidebar/SidebarSection.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport { PanDown, PanUp } from '@gnome-ui/icons';\nimport {\n  Children,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useContext,\n  useId,\n  useImperativeHandle,\n  useState,\n} from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { SidebarFilterContext, useSidebarCollapsed } from './Sidebar';\nimport styles from './Sidebar.module.css';\n\n// ─── Filter helper ────────────────────────────────────────────────────────────\n\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const props = child.props as Record<string, unknown>;\n\n    if (typeof props.label === 'string') {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) {\n        count++;\n      }\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n\n  return count;\n}\n\n// ─── Handle ───────────────────────────────────────────────────────────────────\n\nexport interface SidebarSectionHandle {\n  expand: () => void;\n  collapse: () => void;\n  toggle: () => void;\n}\n\n// ─── Props ────────────────────────────────────────────────────────────────────\n\nexport interface SidebarSectionProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Section heading. Rendered in small caps above the items.\n   * Omit for an untitled section (e.g. the first group in a sidebar).\n   */\n  title?: string;\n  /** Icon rendered left of the title. Same type as `SidebarItem.icon`. */\n  icon?: IconDefinition;\n  /** Whether the section body can be toggled open/closed. Defaults to `false`. */\n  collapsible?: boolean;\n  /** Initial open state when `collapsible` is true. Defaults to `true`. */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when open state changes. */\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Named group of `SidebarItem` entries inside a `Sidebar`.\n *\n * Sections are separated by a thin divider. The title and icon are optional.\n * When `collapsible` is true the body can be toggled via the header button or\n * imperatively via a `ref` (`expand`, `collapse`, `toggle`).\n *\n * In rail (icon-only) mode the body is always visible regardless of open state.\n * When a sidebar filter is active and no children match, the section is hidden.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport const SidebarSection = forwardRef<SidebarSectionHandle, SidebarSectionProps>(\n  function SidebarSection(\n    {\n      title,\n      icon,\n      collapsible = false,\n      defaultOpen = true,\n      open: controlledOpen,\n      onOpenChange,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n    const isControlled = controlledOpen !== undefined;\n    const open = isControlled ? controlledOpen : internalOpen;\n\n    const sidebarCollapsed = useSidebarCollapsed();\n    const filterValue = useContext(SidebarFilterContext);\n    const bodyId = useId();\n\n    const setAndNotify = (next: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(next);\n      }\n\n      onOpenChange?.(next);\n    };\n\n    useImperativeHandle(ref, () => ({\n      expand: () => setAndNotify(true),\n      collapse: () => setAndNotify(false),\n      toggle: () => setAndNotify(!open),\n    }));\n\n    // Hide section entirely when filter is active and no children match\n    const hasVisibleChildren =\n      filterValue.length === 0 || countMatchingItems(children, filterValue) > 0;\n\n    if (!hasVisibleChildren) {\n      return null;\n    }\n\n    // In rail mode the body is always visible\n    const isOpen = sidebarCollapsed ? true : open;\n\n    const showHeader = !!(title || icon || (collapsible && !sidebarCollapsed));\n\n    return (\n      <section className={[styles.section, className].filter(Boolean).join(' ')} {...props}>\n        {showHeader &&\n          (collapsible && !sidebarCollapsed ? (\n            <button\n              type=\"button\"\n              className={styles.sectionHeader}\n              onClick={() => setAndNotify(!open)}\n              aria-expanded={open}\n              aria-controls={bodyId}\n            >\n              {icon && (\n                <span className={styles.sectionHeaderIcon}>\n                  <Icon icon={icon} size=\"sm\" aria-hidden />\n                </span>\n              )}\n              {title && <span className={styles.sectionTitle}>{title}</span>}\n              <span className={styles.sectionChevron}>\n                <Icon icon={open ? PanUp : PanDown} size=\"sm\" aria-hidden />\n              </span>\n            </button>\n          ) : (\n            <div className={styles.sectionHeader}>\n              {icon && (\n                <span className={styles.sectionHeaderIcon}>\n                  <Icon icon={icon} size=\"sm\" aria-hidden />\n                </span>\n              )}\n              {title && <span className={styles.sectionTitle}>{title}</span>}\n            </div>\n          ))}\n\n        <div\n          id={bodyId}\n          className={[styles.sectionBody, !isOpen ? styles.sectionBodyCollapsed : null]\n            .filter(Boolean)\n            .join(' ')}\n          aria-hidden={!isOpen || undefined}\n        >\n          <div className={styles.sectionBodyInner}>\n            <ul className={styles.list}>{children}</ul>\n          </div>\n        </div>\n      </section>\n    );\n  },\n);\n"],"mappings":";;;;;;;AAqBA,SAAS,EAAmB,GAAqB,GAAwB;CACvE,IAAI,IAAQ;AAiBZ,QAhBA,EAAS,QAAQ,IAAW,MAAU;AACpC,MAAI,CAAC,EAAe,EAAM,CACxB;EAGF,IAAM,IAAQ,EAAM;AAEpB,EAAI,OAAO,EAAM,SAAU,WACrB,EAAM,MAAM,aAAa,CAAC,SAAS,EAAO,aAAa,CAAC,IAC1D,MAEO,EAAM,aACf,KAAS,EAAmB,EAAM,UAAuB,EAAO;GAElE,EAEK;;AA8CT,IAAa,IAAiB,EAC5B,SACE,EACE,UACA,SACA,iBAAc,IACd,iBAAc,IACd,MAAM,GACN,iBACA,aACA,cACA,GAAG,KAEL,GACA;CACA,IAAM,CAAC,GAAc,KAAmB,EAAS,EAAY,EACvD,IAAe,MAAmB,KAAA,GAClC,IAAO,IAAe,IAAiB,GAEvC,IAAmB,GAAqB,EACxC,IAAc,EAAW,EAAqB,EAC9C,IAAS,GAAO,EAEhB,KAAgB,MAAkB;AAKtC,EAJK,KACH,EAAgB,EAAK,EAGvB,IAAe,EAAK;;AAatB,KAVA,EAAoB,UAAY;EAC9B,cAAc,EAAa,GAAK;EAChC,gBAAgB,EAAa,GAAM;EACnC,cAAc,EAAa,CAAC,EAAK;EAClC,EAAE,EAMC,EAFF,EAAY,WAAW,KAAK,EAAmB,GAAU,EAAY,GAAG,GAGxE,QAAO;CAIT,IAAM,IAAS,IAAmB,KAAO,GAEnC,IAAa,CAAC,EAAE,KAAS,KAAS,KAAe,CAAC;AAExD,QACE,kBAAC,WAAD;EAAS,WAAW,CAAC,EAAO,SAAS,EAAU,CAAC,OAAO,QAAQ,CAAC,KAAK,IAAI;EAAE,GAAI;YAA/E,CACG,MACE,KAAe,CAAC,IACf,kBAAC,UAAD;GACE,MAAK;GACL,WAAW,EAAO;GAClB,eAAe,EAAa,CAAC,EAAK;GAClC,iBAAe;GACf,iBAAe;aALjB;IAOG,KACC,kBAAC,QAAD;KAAM,WAAW,EAAO;eACtB,kBAAC,GAAD;MAAY;MAAM,MAAK;MAAK,eAAA;MAAc,CAAA;KACrC,CAAA;IAER,KAAS,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAe;KAAa,CAAA;IAC9D,kBAAC,QAAD;KAAM,WAAW,EAAO;eACtB,kBAAC,GAAD;MAAM,MAAM,IAAO,IAAQ;MAAS,MAAK;MAAK,eAAA;MAAc,CAAA;KACvD,CAAA;IACA;OAET,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAO;cACtB,kBAAC,GAAD;KAAY;KAAM,MAAK;KAAK,eAAA;KAAc,CAAA;IACrC,CAAA,EAER,KAAS,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAe;IAAa,CAAA,CAC1D;OAGV,kBAAC,OAAD;GACE,IAAI;GACJ,WAAW,CAAC,EAAO,aAAc,IAAuC,OAA9B,EAAO,qBAA4B,CAC1E,OAAO,QAAQ,CACf,KAAK,IAAI;GACZ,eAAa,CAAC,KAAU,KAAA;aAExB,kBAAC,OAAD;IAAK,WAAW,EAAO;cACrB,kBAAC,MAAD;KAAI,WAAW,EAAO;KAAO;KAAc,CAAA;IACvC,CAAA;GACF,CAAA,CACE;;EAGf"}
+{"version":3,"file":"SidebarSection.js","names":[],"sources":["../../../src/components/Sidebar/SidebarSection.tsx"],"sourcesContent":["import type { IconDefinition } from '@gnome-ui/icons';\nimport { PanDown, PanUp } from '@gnome-ui/icons';\nimport {\n  Children,\n  forwardRef,\n  type HTMLAttributes,\n  isValidElement,\n  type ReactNode,\n  useContext,\n  useId,\n  useImperativeHandle,\n  useState,\n} from 'react';\n\nimport { Icon } from '../Icon';\n\nimport { SidebarFilterContext, useSidebarCollapsed } from './Sidebar';\nimport styles from './Sidebar.module.css';\n\n// ─── Filter helper ────────────────────────────────────────────────────────────\n\nfunction countMatchingItems(children: ReactNode, filter: string): number {\n  let count = 0;\n  Children.forEach(children, (child) => {\n    if (!isValidElement(child)) {\n      return;\n    }\n\n    const props = child.props as Record<string, unknown>;\n\n    if (typeof props.label === 'string') {\n      if (props.label.toLowerCase().includes(filter.toLowerCase())) {\n        count++;\n      }\n    } else if (props.children) {\n      count += countMatchingItems(props.children as ReactNode, filter);\n    }\n  });\n\n  return count;\n}\n\n// ─── Handle ───────────────────────────────────────────────────────────────────\n\nexport interface SidebarSectionHandle {\n  expand: () => void;\n  collapse: () => void;\n  toggle: () => void;\n}\n\n// ─── Props ────────────────────────────────────────────────────────────────────\n\nexport interface SidebarSectionProps extends HTMLAttributes<HTMLElement> {\n  /**\n   * Section heading. Rendered in small caps above the items.\n   * Omit for an untitled section (e.g. the first group in a sidebar).\n   */\n  title?: string;\n  /** Icon rendered left of the title. Same type as `SidebarItem.icon`. */\n  icon?: IconDefinition;\n  /** Whether the section body can be toggled open/closed. Defaults to `false`. */\n  collapsible?: boolean;\n  /** Initial open state when `collapsible` is true. Defaults to `true`. */\n  defaultOpen?: boolean;\n  /** Controlled open state. */\n  open?: boolean;\n  /** Called when open state changes. */\n  onOpenChange?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Named group of `SidebarItem` entries inside a `Sidebar`.\n *\n * Sections are separated by a thin divider. The title and icon are optional.\n * When `collapsible` is true the body can be toggled via the header button or\n * imperatively via a `ref` (`expand`, `collapse`, `toggle`).\n *\n * In rail (icon-only) mode the body is always visible regardless of open state.\n * When a sidebar filter is active and no children match, the section is hidden.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.Sidebar.html\n */\nexport const SidebarSection = forwardRef<SidebarSectionHandle, SidebarSectionProps>(\n  function SidebarSection(\n    {\n      title,\n      icon,\n      collapsible = false,\n      defaultOpen = true,\n      open: controlledOpen,\n      onOpenChange,\n      children,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const [internalOpen, setInternalOpen] = useState(defaultOpen);\n    const isControlled = controlledOpen !== undefined;\n    const open = isControlled ? controlledOpen : internalOpen;\n\n    const sidebarCollapsed = useSidebarCollapsed();\n    const filterValue = useContext(SidebarFilterContext);\n    const bodyId = useId();\n\n    const setAndNotify = (next: boolean) => {\n      if (!isControlled) {\n        setInternalOpen(next);\n      }\n\n      onOpenChange?.(next);\n    };\n\n    useImperativeHandle(ref, () => ({\n      expand: () => setAndNotify(true),\n      collapse: () => setAndNotify(false),\n      toggle: () => setAndNotify(!open),\n    }));\n\n    // Hide section entirely when filter is active and no children match\n    const hasVisibleChildren =\n      filterValue.length === 0 || countMatchingItems(children, filterValue) > 0;\n\n    if (!hasVisibleChildren) {\n      return null;\n    }\n\n    // In rail mode the body is always visible\n    const isOpen = sidebarCollapsed ? true : open;\n\n    const showHeader = !!(title || icon || (collapsible && !sidebarCollapsed));\n\n    return (\n      <section className={[styles.section, className].filter(Boolean).join(' ')} {...props}>\n        {showHeader &&\n          (collapsible && !sidebarCollapsed ? (\n            <button\n              type=\"button\"\n              className={styles.sectionHeader}\n              onClick={() => setAndNotify(!open)}\n              aria-expanded={open}\n              aria-controls={bodyId}\n            >\n              {icon && (\n                <span className={styles.sectionHeaderIcon}>\n                  <Icon icon={icon} size=\"sm\" aria-hidden />\n                </span>\n              )}\n              {title && <span className={styles.sectionTitle}>{title}</span>}\n              <span className={styles.sectionChevron}>\n                <Icon icon={open ? PanUp : PanDown} size=\"sm\" aria-hidden />\n              </span>\n            </button>\n          ) : (\n            <div className={styles.sectionHeader}>\n              {icon && (\n                <span className={styles.sectionHeaderIcon}>\n                  <Icon icon={icon} size=\"sm\" aria-hidden />\n                </span>\n              )}\n              {title && <span className={styles.sectionTitle}>{title}</span>}\n            </div>\n          ))}\n\n        <div\n          id={bodyId}\n          className={[styles.sectionBody, !isOpen ? styles.sectionBodyCollapsed : null]\n            .filter(Boolean)\n            .join(' ')}\n          aria-hidden={!isOpen || undefined}\n        >\n          <div className={styles.sectionBodyInner}>\n            <ul className={styles.list}>{children}</ul>\n          </div>\n        </div>\n      </section>\n    );\n  },\n);\n"],"mappings":";;;;;;;AAqBA,SAAS,EAAmB,GAAqB,GAAwB;CACvE,IAAI,IAAQ;CAiBZ,OAhBA,EAAS,QAAQ,IAAW,MAAU;EACpC,IAAI,CAAC,EAAe,CAAK,GACvB;EAGF,IAAM,IAAQ,EAAM;EAEpB,AAAI,OAAO,EAAM,SAAU,WACrB,EAAM,MAAM,YAAY,EAAE,SAAS,EAAO,YAAY,CAAC,KACzD,MAEO,EAAM,aACf,KAAS,EAAmB,EAAM,UAAuB,CAAM;CAEnE,CAAC,GAEM;AACT;AA6CA,IAAa,IAAiB,EAC5B,SACE,EACE,UACA,SACA,iBAAc,IACd,iBAAc,IACd,MAAM,GACN,iBACA,aACA,cACA,GAAG,KAEL,GACA;CACA,IAAM,CAAC,GAAc,KAAmB,EAAS,CAAW,GACtD,IAAe,MAAmB,KAAA,GAClC,IAAO,IAAe,IAAiB,GAEvC,IAAmB,EAAoB,GACvC,IAAc,EAAW,CAAoB,GAC7C,IAAS,EAAM,GAEf,KAAgB,MAAkB;EAKtC,AAJK,KACH,EAAgB,CAAI,GAGtB,IAAe,CAAI;CACrB;CAYA,IAVA,EAAoB,UAAY;EAC9B,cAAc,EAAa,EAAI;EAC/B,gBAAgB,EAAa,EAAK;EAClC,cAAc,EAAa,CAAC,CAAI;CAClC,EAAE,GAME,EAFF,EAAY,WAAW,KAAK,EAAmB,GAAU,CAAW,IAAI,IAGxE,OAAO;CAIT,IAAM,IAAS,IAAmB,KAAO,GAEnC,IAAa,CAAC,EAAE,KAAS,KAAS,KAAe,CAAC;CAExD,OACE,kBAAC,WAAD;EAAS,WAAW,CAAC,EAAO,SAAS,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;EAAG,GAAI;YAA/E,CACG,MACE,KAAe,CAAC,IACf,kBAAC,UAAD;GACE,MAAK;GACL,WAAW,EAAO;GAClB,eAAe,EAAa,CAAC,CAAI;GACjC,iBAAe;GACf,iBAAe;aALjB;IAOG,KACC,kBAAC,QAAD;KAAM,WAAW,EAAO;eACtB,kBAAC,GAAD;MAAY;MAAM,MAAK;MAAK,eAAA;KAAa,CAAA;IACrC,CAAA;IAEP,KAAS,kBAAC,QAAD;KAAM,WAAW,EAAO;eAAe;IAAY,CAAA;IAC7D,kBAAC,QAAD;KAAM,WAAW,EAAO;eACtB,kBAAC,GAAD;MAAM,MAAM,IAAO,IAAQ;MAAS,MAAK;MAAK,eAAA;KAAa,CAAA;IACvD,CAAA;GACA;OAER,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB,CACG,KACC,kBAAC,QAAD;IAAM,WAAW,EAAO;cACtB,kBAAC,GAAD;KAAY;KAAM,MAAK;KAAK,eAAA;IAAa,CAAA;GACrC,CAAA,GAEP,KAAS,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAe;GAAY,CAAA,CAC1D;OAGT,kBAAC,OAAD;GACE,IAAI;GACJ,WAAW,CAAC,EAAO,aAAc,IAAuC,OAA9B,EAAO,oBAA2B,EACzE,OAAO,OAAO,EACd,KAAK,GAAG;GACX,eAAa,CAAC,KAAU,KAAA;aAExB,kBAAC,OAAD;IAAK,WAAW,EAAO;cACrB,kBAAC,MAAD;KAAI,WAAW,EAAO;KAAO;IAAa,CAAA;GACvC,CAAA;EACF,CAAA,CACE;;AAEb,CACF"}

package/dist/components/Sidebar.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Sidebar/Sidebar.cjs`),t=require(`./Sidebar/SidebarItem.cjs`),n=require(`./Sidebar/SidebarSection.cjs`);exports.Sidebar=e.Sidebar,exports.SidebarCollapsedContext=e.SidebarCollapsedContext,exports.SidebarItem=t.SidebarItem,exports.SidebarSection=n.SidebarSection,exports.useSidebarCollapsed=e.useSidebarCollapsed;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./Sidebar/Sidebar.cjs"),t=require("./Sidebar/SidebarItem.cjs"),n=require("./Sidebar/SidebarSection.cjs");exports.Sidebar=e.Sidebar,exports.SidebarCollapsedContext=e.SidebarCollapsedContext,exports.SidebarItem=t.SidebarItem,exports.SidebarSection=n.SidebarSection,exports.useSidebarCollapsed=e.useSidebarCollapsed;

package/dist/components/Skeleton/Skeleton.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Skeleton.module.css.cjs`);let t=require(`react/jsx-runtime`);function n(e){return typeof e==`number`?`${e}px`:e}function r({variant:r=`rect`,width:i=`100%`,height:a=16,size:o=40,lines:s=3,animated:c=!0,className:l,style:u,...d}){let f=[e.default.skeleton,e.default[r],c?e.default.animated:null,l].filter(Boolean).join(` `);if(r===`text`){let n=Math.max(1,Math.floor(s));return(0,t.jsx)(`div`,{"aria-hidden":`true`,className:f,style:u,...d,children:Array.from({length:n},(r,i)=>(0,t.jsx)(`div`,{className:e.default.line,style:i===n-1?{"--skeleton-line-width":`60%`}:void 0},i))})}let p=r===`circle`?{width:`${o}px`,height:`${o}px`}:{width:n(i),height:n(a)};return(0,t.jsx)(`div`,{"aria-hidden":`true`,className:f,style:{...p,...u},...d})}exports.Skeleton=r;
+const e=require("./Skeleton.module.css.cjs");let t=require("react/jsx-runtime");function n(e){return typeof e==`number`?`${e}px`:e}var r=({variant:r=`rect`,width:i=`100%`,height:a=16,size:o=40,lines:s=3,animated:c=!0,className:l,style:u,...d})=>{let f=[e.default.skeleton,e.default[r],c?e.default.animated:null,l].filter(Boolean).join(` `);if(r===`text`){let n=Math.max(1,Math.floor(s));return(0,t.jsx)(`div`,{"aria-hidden":`true`,className:f,style:u,...d,children:Array.from({length:n},(r,i)=>(0,t.jsx)(`div`,{className:e.default.line,style:i===n-1?{"--skeleton-line-width":`60%`}:void 0},i))})}return(0,t.jsx)(`div`,{"aria-hidden":`true`,className:f,style:{...r===`circle`?{width:`${o}px`,height:`${o}px`}:{width:n(i),height:n(a)},...u},...d})};exports.Skeleton=r;
 //# sourceMappingURL=Skeleton.cjs.map

package/dist/components/Skeleton/Skeleton.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.cjs","names":[],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\n\nimport styles from './Skeleton.module.css';\n\nexport type SkeletonVariant = 'rect' | 'circle' | 'text';\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  /** Shape of the placeholder. Defaults to `\"rect\"`. */\n  variant?: SkeletonVariant;\n  /** Width for rectangular placeholders. Defaults to `\"100%\"`. */\n  width?: number | string;\n  /** Height for rectangular placeholders. Defaults to `16`. */\n  height?: number | string;\n  /** Diameter for circular placeholders. Defaults to `40`. */\n  size?: number;\n  /** Number of rows for text placeholders. Defaults to `3`. */\n  lines?: number;\n  /**\n   * Enables the shimmer animation.\n   * Respects `prefers-reduced-motion`. Defaults to `true`.\n   */\n  animated?: boolean;\n}\n\nfunction toCssSize(value: number | string) {\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\n/**\n * Loading placeholder for content-shaped skeleton screens.\n *\n * GNOME HIG recommends `Spinner` or `ProgressBar` for loading states; this is a\n * pragmatic web-style extension for layouts that benefit from placeholder shape.\n */\nexport function Skeleton({\n  variant = 'rect',\n  width = '100%',\n  height = 16,\n  size = 40,\n  lines = 3,\n  animated = true,\n  className,\n  style,\n  ...props\n}: SkeletonProps) {\n  const classes = [styles.skeleton, styles[variant], animated ? styles.animated : null, className]\n    .filter(Boolean)\n    .join(' ');\n\n  if (variant === 'text') {\n    const lineCount = Math.max(1, Math.floor(lines));\n\n    return (\n      <div aria-hidden=\"true\" className={classes} style={style} {...props}>\n        {Array.from({ length: lineCount }, (_, index) => (\n          <div\n            key={index}\n            className={styles.line}\n            style={\n              index === lineCount - 1\n                ? ({ '--skeleton-line-width': '60%' } as CSSProperties)\n                : undefined\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n\n  const shapeStyle: CSSProperties =\n    variant === 'circle'\n      ? { width: `${size}px`, height: `${size}px` }\n      : { width: toCssSize(width), height: toCssSize(height) };\n\n  return (\n    <div aria-hidden=\"true\" className={classes} style={{ ...shapeStyle, ...style }} {...props} />\n  );\n}\n"],"mappings":"gFAwBA,SAAS,EAAU,EAAwB,CACzC,OAAO,OAAO,GAAU,SAAW,GAAG,EAAM,IAAM,EASpD,SAAgB,EAAS,CACvB,UAAU,OACV,QAAQ,OACR,SAAS,GACT,OAAO,GACP,QAAQ,EACR,WAAW,GACX,YACA,QACA,GAAG,GACa,CAChB,IAAM,EAAU,CAAC,EAAA,QAAO,SAAU,EAAA,QAAO,GAAU,EAAW,EAAA,QAAO,SAAW,KAAM,EAAU,CAC7F,OAAO,QAAQ,CACf,KAAK,IAAI,CAEZ,GAAI,IAAY,OAAQ,CACtB,IAAM,EAAY,KAAK,IAAI,EAAG,KAAK,MAAM,EAAM,CAAC,CAEhD,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,cAAY,OAAO,UAAW,EAAgB,QAAO,GAAI,WAC3D,MAAM,KAAK,CAAE,OAAQ,EAAW,EAAG,EAAG,KACrC,EAAA,EAAA,KAAC,MAAD,CAEE,UAAW,EAAA,QAAO,KAClB,MACE,IAAU,EAAY,EACjB,CAAE,wBAAyB,MAAO,CACnC,IAAA,GAEN,CAPK,EAOL,CACF,CACE,CAAA,CAIV,IAAM,EACJ,IAAY,SACR,CAAE,MAAO,GAAG,EAAK,IAAK,OAAQ,GAAG,EAAK,IAAK,CAC3C,CAAE,MAAO,EAAU,EAAM,CAAE,OAAQ,EAAU,EAAO,CAAE,CAE5D,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,cAAY,OAAO,UAAW,EAAS,MAAO,CAAE,GAAG,EAAY,GAAG,EAAO,CAAE,GAAI,EAAS,CAAA"}
+{"version":3,"file":"Skeleton.cjs","names":[],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\n\nimport styles from './Skeleton.module.css';\n\nexport type SkeletonVariant = 'rect' | 'circle' | 'text';\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  /** Shape of the placeholder. Defaults to `\"rect\"`. */\n  variant?: SkeletonVariant;\n  /** Width for rectangular placeholders. Defaults to `\"100%\"`. */\n  width?: number | string;\n  /** Height for rectangular placeholders. Defaults to `16`. */\n  height?: number | string;\n  /** Diameter for circular placeholders. Defaults to `40`. */\n  size?: number;\n  /** Number of rows for text placeholders. Defaults to `3`. */\n  lines?: number;\n  /**\n   * Enables the shimmer animation.\n   * Respects `prefers-reduced-motion`. Defaults to `true`.\n   */\n  animated?: boolean;\n}\n\nfunction toCssSize(value: number | string) {\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\n/**\n * Loading placeholder for content-shaped skeleton screens.\n *\n * GNOME HIG recommends `Spinner` or `ProgressBar` for loading states; this is a\n * pragmatic web-style extension for layouts that benefit from placeholder shape.\n */\nexport const Skeleton = ({\n  variant = 'rect',\n  width = '100%',\n  height = 16,\n  size = 40,\n  lines = 3,\n  animated = true,\n  className,\n  style,\n  ...props\n}: SkeletonProps) => {\n  const classes = [styles.skeleton, styles[variant], animated ? styles.animated : null, className]\n    .filter(Boolean)\n    .join(' ');\n\n  if (variant === 'text') {\n    const lineCount = Math.max(1, Math.floor(lines));\n\n    return (\n      <div aria-hidden=\"true\" className={classes} style={style} {...props}>\n        {Array.from({ length: lineCount }, (_, index) => (\n          <div\n            key={index}\n            className={styles.line}\n            style={\n              index === lineCount - 1\n                ? ({ '--skeleton-line-width': '60%' } as CSSProperties)\n                : undefined\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n\n  const shapeStyle: CSSProperties =\n    variant === 'circle'\n      ? { width: `${size}px`, height: `${size}px` }\n      : { width: toCssSize(width), height: toCssSize(height) };\n\n  return (\n    <div aria-hidden=\"true\" className={classes} style={{ ...shapeStyle, ...style }} {...props} />\n  );\n};\n"],"mappings":"gFAwBA,SAAS,EAAU,EAAwB,CACzC,OAAO,OAAO,GAAU,SAAW,GAAG,EAAM,IAAM,CACpD,CAQA,IAAa,GAAY,CACvB,UAAU,OACV,QAAQ,OACR,SAAS,GACT,OAAO,GACP,QAAQ,EACR,WAAW,GACX,YACA,QACA,GAAG,KACgB,CACnB,IAAM,EAAU,CAAC,EAAA,QAAO,SAAU,EAAA,QAAO,GAAU,EAAW,EAAA,QAAO,SAAW,KAAM,CAAS,EAC5F,OAAO,OAAO,EACd,KAAK,GAAG,EAEX,GAAI,IAAY,OAAQ,CACtB,IAAM,EAAY,KAAK,IAAI,EAAG,KAAK,MAAM,CAAK,CAAC,EAE/C,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,cAAY,OAAO,UAAW,EAAgB,QAAO,GAAI,WAC3D,MAAM,KAAK,CAAE,OAAQ,CAAU,GAAI,EAAG,KACrC,EAAA,EAAA,KAAC,MAAD,CAEE,UAAW,EAAA,QAAO,KAClB,MACE,IAAU,EAAY,EACjB,CAAE,wBAAyB,KAAM,EAClC,IAAA,EAEP,EAPM,CAON,CACF,CACE,CAAA,CAET,CAOA,OACE,EAAA,EAAA,KAAC,MAAD,CAAK,cAAY,OAAO,UAAW,EAAS,MAAO,CAAE,GALrD,IAAY,SACR,CAAE,MAAO,GAAG,EAAK,IAAK,OAAQ,GAAG,EAAK,GAAI,EAC1C,CAAE,MAAO,EAAU,CAAK,EAAG,OAAQ,EAAU,CAAM,CAAE,EAGW,GAAG,CAAM,EAAG,GAAI,CAAQ,CAAA,CAEhG"}

package/dist/components/Skeleton/Skeleton.d.ts

@@ -23,4 +23,4 @@ export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
  * GNOME HIG recommends `Spinner` or `ProgressBar` for loading states; this is a
  * pragmatic web-style extension for layouts that benefit from placeholder shape.
  */
-export declare function Skeleton({ variant, width, height, size, lines, animated, className, style, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;
+export declare const Skeleton: ({ variant, width, height, size, lines, animated, className, style, ...props }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Skeleton.js

@@ -4,7 +4,7 @@ import { jsx as t } from "react/jsx-runtime";
 function n(e) {
 	return typeof e == "number" ? `${e}px` : e;
 }
-function r({ variant: r = "rect", width: i = "100%", height: a = 16, size: o = 40, lines: s = 3, animated: c = !0, className: l, style: u, ...d }) {
+var r = ({ variant: r = "rect", width: i = "100%", height: a = 16, size: o = 40, lines: s = 3, animated: c = !0, className: l, style: u, ...d }) => {
 	let f = [
 		e.skeleton,
 		e[r],
@@ -24,23 +24,22 @@ function r({ variant: r = "rect", width: i = "100%", height: a = 16, size: o = 4
 			}, i))
 		});
 	}
-	let p = r === "circle" ? {
-		width: `${o}px`,
-		height: `${o}px`
-	} : {
-		width: n(i),
-		height: n(a)
-	};
 	return /* @__PURE__ */ t("div", {
 		"aria-hidden": "true",
 		className: f,
 		style: {
-			...p,
+			...r === "circle" ? {
+				width: `${o}px`,
+				height: `${o}px`
+			} : {
+				width: n(i),
+				height: n(a)
+			},
 			...u
 		},
 		...d
 	});
-}
+};
 //#endregion
 export { r as Skeleton };
 

package/dist/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\n\nimport styles from './Skeleton.module.css';\n\nexport type SkeletonVariant = 'rect' | 'circle' | 'text';\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  /** Shape of the placeholder. Defaults to `\"rect\"`. */\n  variant?: SkeletonVariant;\n  /** Width for rectangular placeholders. Defaults to `\"100%\"`. */\n  width?: number | string;\n  /** Height for rectangular placeholders. Defaults to `16`. */\n  height?: number | string;\n  /** Diameter for circular placeholders. Defaults to `40`. */\n  size?: number;\n  /** Number of rows for text placeholders. Defaults to `3`. */\n  lines?: number;\n  /**\n   * Enables the shimmer animation.\n   * Respects `prefers-reduced-motion`. Defaults to `true`.\n   */\n  animated?: boolean;\n}\n\nfunction toCssSize(value: number | string) {\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\n/**\n * Loading placeholder for content-shaped skeleton screens.\n *\n * GNOME HIG recommends `Spinner` or `ProgressBar` for loading states; this is a\n * pragmatic web-style extension for layouts that benefit from placeholder shape.\n */\nexport function Skeleton({\n  variant = 'rect',\n  width = '100%',\n  height = 16,\n  size = 40,\n  lines = 3,\n  animated = true,\n  className,\n  style,\n  ...props\n}: SkeletonProps) {\n  const classes = [styles.skeleton, styles[variant], animated ? styles.animated : null, className]\n    .filter(Boolean)\n    .join(' ');\n\n  if (variant === 'text') {\n    const lineCount = Math.max(1, Math.floor(lines));\n\n    return (\n      <div aria-hidden=\"true\" className={classes} style={style} {...props}>\n        {Array.from({ length: lineCount }, (_, index) => (\n          <div\n            key={index}\n            className={styles.line}\n            style={\n              index === lineCount - 1\n                ? ({ '--skeleton-line-width': '60%' } as CSSProperties)\n                : undefined\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n\n  const shapeStyle: CSSProperties =\n    variant === 'circle'\n      ? { width: `${size}px`, height: `${size}px` }\n      : { width: toCssSize(width), height: toCssSize(height) };\n\n  return (\n    <div aria-hidden=\"true\" className={classes} style={{ ...shapeStyle, ...style }} {...props} />\n  );\n}\n"],"mappings":";;;AAwBA,SAAS,EAAU,GAAwB;AACzC,QAAO,OAAO,KAAU,WAAW,GAAG,EAAM,MAAM;;AASpD,SAAgB,EAAS,EACvB,aAAU,QACV,WAAQ,QACR,YAAS,IACT,UAAO,IACP,WAAQ,GACR,cAAW,IACX,cACA,UACA,GAAG,KACa;CAChB,IAAM,IAAU;EAAC,EAAO;EAAU,EAAO;EAAU,IAAW,EAAO,WAAW;EAAM;EAAU,CAC7F,OAAO,QAAQ,CACf,KAAK,IAAI;AAEZ,KAAI,MAAY,QAAQ;EACtB,IAAM,IAAY,KAAK,IAAI,GAAG,KAAK,MAAM,EAAM,CAAC;AAEhD,SACE,kBAAC,OAAD;GAAK,eAAY;GAAO,WAAW;GAAgB;GAAO,GAAI;aAC3D,MAAM,KAAK,EAAE,QAAQ,GAAW,GAAG,GAAG,MACrC,kBAAC,OAAD;IAEE,WAAW,EAAO;IAClB,OACE,MAAU,IAAY,IACjB,EAAE,yBAAyB,OAAO,GACnC,KAAA;IAEN,EAPK,EAOL,CACF;GACE,CAAA;;CAIV,IAAM,IACJ,MAAY,WACR;EAAE,OAAO,GAAG,EAAK;EAAK,QAAQ,GAAG,EAAK;EAAK,GAC3C;EAAE,OAAO,EAAU,EAAM;EAAE,QAAQ,EAAU,EAAO;EAAE;AAE5D,QACE,kBAAC,OAAD;EAAK,eAAY;EAAO,WAAW;EAAS,OAAO;GAAE,GAAG;GAAY,GAAG;GAAO;EAAE,GAAI;EAAS,CAAA"}
+{"version":3,"file":"Skeleton.js","names":[],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\n\nimport styles from './Skeleton.module.css';\n\nexport type SkeletonVariant = 'rect' | 'circle' | 'text';\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  /** Shape of the placeholder. Defaults to `\"rect\"`. */\n  variant?: SkeletonVariant;\n  /** Width for rectangular placeholders. Defaults to `\"100%\"`. */\n  width?: number | string;\n  /** Height for rectangular placeholders. Defaults to `16`. */\n  height?: number | string;\n  /** Diameter for circular placeholders. Defaults to `40`. */\n  size?: number;\n  /** Number of rows for text placeholders. Defaults to `3`. */\n  lines?: number;\n  /**\n   * Enables the shimmer animation.\n   * Respects `prefers-reduced-motion`. Defaults to `true`.\n   */\n  animated?: boolean;\n}\n\nfunction toCssSize(value: number | string) {\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\n/**\n * Loading placeholder for content-shaped skeleton screens.\n *\n * GNOME HIG recommends `Spinner` or `ProgressBar` for loading states; this is a\n * pragmatic web-style extension for layouts that benefit from placeholder shape.\n */\nexport const Skeleton = ({\n  variant = 'rect',\n  width = '100%',\n  height = 16,\n  size = 40,\n  lines = 3,\n  animated = true,\n  className,\n  style,\n  ...props\n}: SkeletonProps) => {\n  const classes = [styles.skeleton, styles[variant], animated ? styles.animated : null, className]\n    .filter(Boolean)\n    .join(' ');\n\n  if (variant === 'text') {\n    const lineCount = Math.max(1, Math.floor(lines));\n\n    return (\n      <div aria-hidden=\"true\" className={classes} style={style} {...props}>\n        {Array.from({ length: lineCount }, (_, index) => (\n          <div\n            key={index}\n            className={styles.line}\n            style={\n              index === lineCount - 1\n                ? ({ '--skeleton-line-width': '60%' } as CSSProperties)\n                : undefined\n            }\n          />\n        ))}\n      </div>\n    );\n  }\n\n  const shapeStyle: CSSProperties =\n    variant === 'circle'\n      ? { width: `${size}px`, height: `${size}px` }\n      : { width: toCssSize(width), height: toCssSize(height) };\n\n  return (\n    <div aria-hidden=\"true\" className={classes} style={{ ...shapeStyle, ...style }} {...props} />\n  );\n};\n"],"mappings":";;;AAwBA,SAAS,EAAU,GAAwB;CACzC,OAAO,OAAO,KAAU,WAAW,GAAG,EAAM,MAAM;AACpD;AAQA,IAAa,KAAY,EACvB,aAAU,QACV,WAAQ,QACR,YAAS,IACT,UAAO,IACP,WAAQ,GACR,cAAW,IACX,cACA,UACA,GAAG,QACgB;CACnB,IAAM,IAAU;EAAC,EAAO;EAAU,EAAO;EAAU,IAAW,EAAO,WAAW;EAAM;CAAS,EAC5F,OAAO,OAAO,EACd,KAAK,GAAG;CAEX,IAAI,MAAY,QAAQ;EACtB,IAAM,IAAY,KAAK,IAAI,GAAG,KAAK,MAAM,CAAK,CAAC;EAE/C,OACE,kBAAC,OAAD;GAAK,eAAY;GAAO,WAAW;GAAgB;GAAO,GAAI;aAC3D,MAAM,KAAK,EAAE,QAAQ,EAAU,IAAI,GAAG,MACrC,kBAAC,OAAD;IAEE,WAAW,EAAO;IAClB,OACE,MAAU,IAAY,IACjB,EAAE,yBAAyB,MAAM,IAClC,KAAA;GAEP,GAPM,CAON,CACF;EACE,CAAA;CAET;CAOA,OACE,kBAAC,OAAD;EAAK,eAAY;EAAO,WAAW;EAAS,OAAO;GAAE,GALrD,MAAY,WACR;IAAE,OAAO,GAAG,EAAK;IAAK,QAAQ,GAAG,EAAK;GAAI,IAC1C;IAAE,OAAO,EAAU,CAAK;IAAG,QAAQ,EAAU,CAAM;GAAE;GAGW,GAAG;EAAM;EAAG,GAAI;CAAQ,CAAA;AAEhG"}

package/dist/components/Skeleton.cjs

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