@gnome-ui/react 1.45.1 → 1.46.0

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":"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"}
+{"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":"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"}

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;

package/dist/components/Slider/Slider.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Slider.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);function r(e,t,n){return Math.min(n,Math.max(t,e))}function i(e,t,n,r){return parseFloat((Math.round((e-t)/n)*n+t).toFixed(r))}function a(e){let t=e.toString(),n=t.indexOf(`.`);return n===-1?0:t.length-n-1}function o({value:o,onChange:s,min:c=0,max:l=100,step:u=1,disabled:d=!1,marks:f,className:p,"aria-label":m,"aria-labelledby":h,"aria-describedby":g,..._}){let v=(0,t.useRef)(null),y=a(u),b=(r(o,c,l)-c)/(l-c)*100,x=(0,t.useCallback)(e=>{if(!v.current)return;let{left:t,width:n}=v.current.getBoundingClientRect();s(r(i((e-t)/n*(l-c)+c,c,u,y),c,l))},[c,l,u,y,s]),S=(0,t.useCallback)(e=>{d||(e.currentTarget.setPointerCapture(e.pointerId),x(e.clientX))},[d,x]),C=(0,t.useCallback)(e=>{e.currentTarget.hasPointerCapture(e.pointerId)&&x(e.clientX)},[x]),w=(0,t.useCallback)(e=>{let t=t=>{e.preventDefault(),s(r(i(t,c,u,y),c,l))};switch(e.key){case`ArrowRight`:case`ArrowUp`:t(o+u);break;case`ArrowLeft`:case`ArrowDown`:t(o-u);break;case`PageUp`:t(o+u*10);break;case`PageDown`:t(o-u*10);break;case`Home`:t(c);break;case`End`:t(l);break}},[o,u,c,l,y,s]),T=f&&f.length>0,E=T&&f.some(e=>e.label);return(0,n.jsxs)(`div`,{className:[e.default.wrapper,E?e.default.hasLabels:null,p].filter(Boolean).join(` `),..._,children:[(0,n.jsxs)(`div`,{ref:v,role:`slider`,tabIndex:d?-1:0,"aria-valuemin":c,"aria-valuemax":l,"aria-valuenow":o,"aria-label":m,"aria-labelledby":h,"aria-describedby":g,"aria-disabled":d||void 0,className:[e.default.track,d?e.default.disabled:null].filter(Boolean).join(` `),onPointerDown:S,onPointerMove:C,onKeyDown:d?void 0:w,children:[(0,n.jsx)(`div`,{className:e.default.fill,style:{width:`${b}%`}}),(0,n.jsx)(`div`,{className:e.default.thumb,style:{left:`${b}%`},"aria-hidden":`true`}),T&&f.map(t=>{let i=(r(t.value,c,l)-c)/(l-c)*100;return(0,n.jsx)(`div`,{className:e.default.tick,style:{left:`${i}%`},"aria-hidden":`true`},t.value)})]}),E&&(0,n.jsx)(`div`,{className:e.default.labels,"aria-hidden":`true`,children:f.map(t=>{let i=(r(t.value,c,l)-c)/(l-c)*100;return(0,n.jsx)(`span`,{className:e.default.markLabel,style:{left:`${i}%`},children:t.label},t.value)})})]})}exports.Slider=o;
+const e=require("./Slider.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(e,t,n){return Math.min(n,Math.max(t,e))}function i(e,t,n,r){return parseFloat((Math.round((e-t)/n)*n+t).toFixed(r))}function a(e){let t=e.toString(),n=t.indexOf(`.`);return n===-1?0:t.length-n-1}var o=({value:o,onChange:s,min:c=0,max:l=100,step:u=1,disabled:d=!1,marks:f,className:p,"aria-label":m,"aria-labelledby":h,"aria-describedby":g,..._})=>{let v=(0,t.useRef)(null),y=a(u),b=(r(o,c,l)-c)/(l-c)*100,x=(0,t.useCallback)(e=>{if(!v.current)return;let{left:t,width:n}=v.current.getBoundingClientRect();s(r(i((e-t)/n*(l-c)+c,c,u,y),c,l))},[c,l,u,y,s]),S=(0,t.useCallback)(e=>{d||(e.currentTarget.setPointerCapture(e.pointerId),x(e.clientX))},[d,x]),C=(0,t.useCallback)(e=>{e.currentTarget.hasPointerCapture(e.pointerId)&&x(e.clientX)},[x]),w=(0,t.useCallback)(e=>{let t=t=>{e.preventDefault(),s(r(i(t,c,u,y),c,l))};switch(e.key){case`ArrowRight`:case`ArrowUp`:t(o+u);break;case`ArrowLeft`:case`ArrowDown`:t(o-u);break;case`PageUp`:t(o+u*10);break;case`PageDown`:t(o-u*10);break;case`Home`:t(c);break;case`End`:t(l);break}},[o,u,c,l,y,s]),T=f&&f.length>0,E=T&&f.some(e=>e.label);return(0,n.jsxs)(`div`,{className:[e.default.wrapper,E?e.default.hasLabels:null,p].filter(Boolean).join(` `),..._,children:[(0,n.jsxs)(`div`,{ref:v,role:`slider`,tabIndex:d?-1:0,"aria-valuemin":c,"aria-valuemax":l,"aria-valuenow":o,"aria-label":m,"aria-labelledby":h,"aria-describedby":g,"aria-disabled":d||void 0,className:[e.default.track,d?e.default.disabled:null].filter(Boolean).join(` `),onPointerDown:S,onPointerMove:C,onKeyDown:d?void 0:w,children:[(0,n.jsx)(`div`,{className:e.default.fill,style:{width:`${b}%`}}),(0,n.jsx)(`div`,{className:e.default.thumb,style:{left:`${b}%`},"aria-hidden":`true`}),T&&f.map(t=>{let i=(r(t.value,c,l)-c)/(l-c)*100;return(0,n.jsx)(`div`,{className:e.default.tick,style:{left:`${i}%`},"aria-hidden":`true`},t.value)})]}),E&&(0,n.jsx)(`div`,{className:e.default.labels,"aria-hidden":`true`,children:f.map(t=>{let i=(r(t.value,c,l)-c)/(l-c)*100;return(0,n.jsx)(`span`,{className:e.default.markLabel,style:{left:`${i}%`},children:t.label},t.value)})})]})};exports.Slider=o;
 //# sourceMappingURL=Slider.cjs.map

package/dist/components/Slider/Slider.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.cjs","names":[],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type PointerEvent,\n  useCallback,\n  useRef,\n} from 'react';\n\nimport styles from './Slider.module.css';\n\nexport interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current value. Must be between `min` and `max`. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum value. Defaults to `0`. */\n  min?: number;\n  /** Maximum value. Defaults to `100`. */\n  max?: number;\n  /**\n   * Granularity of each step.\n   * - Arrow keys move by one step.\n   * - Page Up/Down move by 10 steps.\n   * Defaults to `1`.\n   */\n  step?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /**\n   * Marks to display along the track.\n   * Each mark can have an optional label rendered below the track.\n   */\n  marks?: Array<{ value: number; label?: string }>;\n  /** Accessible label. Required when no visible `<label>` is present. */\n  'aria-label'?: string;\n  /** Associates the control with a visible label element. */\n  'aria-labelledby'?: string;\n  /** `id` of an element that describes the current value (e.g. a live region). */\n  'aria-describedby'?: string;\n}\n\nfunction clamp(v: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, v));\n}\n\nfunction snapToStep(v: number, min: number, step: number, decimals: number) {\n  return parseFloat((Math.round((v - min) / step) * step + min).toFixed(decimals));\n}\n\nfunction countDecimals(n: number) {\n  const s = n.toString();\n  const dot = s.indexOf('.');\n\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\n/**\n * Draggable range slider following the Adwaita `GtkScale` pattern.\n *\n * - Pointer (mouse / touch / pen) drag to set value continuously.\n * - Keyboard: ← / → move by one step; Page Up/Down by 10 steps; Home/End jump to bounds.\n * - Optional tick marks with labels.\n * - Fills the track from the left up to the thumb (accent colour).\n *\n * @see https://developer.gnome.org/hig/patterns/controls/sliders.html\n */\nexport function Slider({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  marks,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: SliderProps) {\n  const trackRef = useRef<HTMLDivElement>(null);\n  const dp = countDecimals(step);\n\n  const pct = ((clamp(value, min, max) - min) / (max - min)) * 100;\n\n  const setFromX = useCallback(\n    (clientX: number) => {\n      if (!trackRef.current) {\n        return;\n      }\n\n      const { left, width } = trackRef.current.getBoundingClientRect();\n      const raw = ((clientX - left) / width) * (max - min) + min;\n\n      onChange(clamp(snapToStep(raw, min, step, dp), min, max));\n    },\n    [min, max, step, dp, onChange],\n  );\n\n  // Pointer drag — capture on the thumb, move anywhere\n  const handlePointerDown = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (disabled) {\n        return;\n      }\n\n      e.currentTarget.setPointerCapture(e.pointerId);\n      setFromX(e.clientX);\n    },\n    [disabled, setFromX],\n  );\n\n  const handlePointerMove = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.hasPointerCapture(e.pointerId)) {\n        return;\n      }\n\n      setFromX(e.clientX);\n    },\n    [setFromX],\n  );\n\n  // Keyboard\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const set = (next: number) => {\n        e.preventDefault();\n        onChange(clamp(snapToStep(next, min, step, dp), min, max));\n      };\n\n      switch (e.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n          set(value + step);\n          break;\n        case 'ArrowLeft':\n        case 'ArrowDown':\n          set(value - step);\n          break;\n        case 'PageUp':\n          set(value + step * 10);\n          break;\n        case 'PageDown':\n          set(value - step * 10);\n          break;\n        case 'Home':\n          set(min);\n          break;\n        case 'End':\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, dp, onChange],\n  );\n\n  const hasMarks = marks && marks.length > 0;\n  const hasLabels = hasMarks && marks.some((m) => m.label);\n\n  return (\n    <div\n      className={[styles.wrapper, hasLabels ? styles.hasLabels : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {/* Accessible slider */}\n      <div\n        ref={trackRef}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-disabled={disabled || undefined}\n        className={[styles.track, disabled ? styles.disabled : null].filter(Boolean).join(' ')}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onKeyDown={disabled ? undefined : handleKeyDown}\n      >\n        {/* Filled portion */}\n        <div className={styles.fill} style={{ width: `${pct}%` }} />\n\n        {/* Thumb */}\n        <div className={styles.thumb} style={{ left: `${pct}%` }} aria-hidden=\"true\" />\n\n        {/* Tick marks */}\n        {hasMarks &&\n          marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n\n            return (\n              <div\n                key={m.value}\n                className={styles.tick}\n                style={{ left: `${mPct}%` }}\n                aria-hidden=\"true\"\n              />\n            );\n          })}\n      </div>\n\n      {/* Mark labels */}\n      {hasLabels && (\n        <div className={styles.labels} aria-hidden=\"true\">\n          {marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n\n            return (\n              <span key={m.value} className={styles.markLabel} style={{ left: `${mPct}%` }}>\n                {m.label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Slider.cjs","names":[],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type PointerEvent,\n  useCallback,\n  useRef,\n} from 'react';\n\nimport styles from './Slider.module.css';\n\nexport interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current value. Must be between `min` and `max`. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum value. Defaults to `0`. */\n  min?: number;\n  /** Maximum value. Defaults to `100`. */\n  max?: number;\n  /**\n   * Granularity of each step.\n   * - Arrow keys move by one step.\n   * - Page Up/Down move by 10 steps.\n   * Defaults to `1`.\n   */\n  step?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /**\n   * Marks to display along the track.\n   * Each mark can have an optional label rendered below the track.\n   */\n  marks?: Array<{ value: number; label?: string }>;\n  /** Accessible label. Required when no visible `<label>` is present. */\n  'aria-label'?: string;\n  /** Associates the control with a visible label element. */\n  'aria-labelledby'?: string;\n  /** `id` of an element that describes the current value (e.g. a live region). */\n  'aria-describedby'?: string;\n}\n\nfunction clamp(v: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, v));\n}\n\nfunction snapToStep(v: number, min: number, step: number, decimals: number) {\n  return parseFloat((Math.round((v - min) / step) * step + min).toFixed(decimals));\n}\n\nfunction countDecimals(n: number) {\n  const s = n.toString();\n  const dot = s.indexOf('.');\n\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\n/**\n * Draggable range slider following the Adwaita `GtkScale` pattern.\n *\n * - Pointer (mouse / touch / pen) drag to set value continuously.\n * - Keyboard: ← / → move by one step; Page Up/Down by 10 steps; Home/End jump to bounds.\n * - Optional tick marks with labels.\n * - Fills the track from the left up to the thumb (accent colour).\n *\n * @see https://developer.gnome.org/hig/patterns/controls/sliders.html\n */\nexport const Slider = ({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  marks,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: SliderProps) => {\n  const trackRef = useRef<HTMLDivElement>(null);\n  const dp = countDecimals(step);\n\n  const pct = ((clamp(value, min, max) - min) / (max - min)) * 100;\n\n  const setFromX = useCallback(\n    (clientX: number) => {\n      if (!trackRef.current) {\n        return;\n      }\n\n      const { left, width } = trackRef.current.getBoundingClientRect();\n      const raw = ((clientX - left) / width) * (max - min) + min;\n\n      onChange(clamp(snapToStep(raw, min, step, dp), min, max));\n    },\n    [min, max, step, dp, onChange],\n  );\n\n  // Pointer drag — capture on the thumb, move anywhere\n  const handlePointerDown = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (disabled) {\n        return;\n      }\n\n      e.currentTarget.setPointerCapture(e.pointerId);\n      setFromX(e.clientX);\n    },\n    [disabled, setFromX],\n  );\n\n  const handlePointerMove = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.hasPointerCapture(e.pointerId)) {\n        return;\n      }\n\n      setFromX(e.clientX);\n    },\n    [setFromX],\n  );\n\n  // Keyboard\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const set = (next: number) => {\n        e.preventDefault();\n        onChange(clamp(snapToStep(next, min, step, dp), min, max));\n      };\n\n      switch (e.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n          set(value + step);\n          break;\n        case 'ArrowLeft':\n        case 'ArrowDown':\n          set(value - step);\n          break;\n        case 'PageUp':\n          set(value + step * 10);\n          break;\n        case 'PageDown':\n          set(value - step * 10);\n          break;\n        case 'Home':\n          set(min);\n          break;\n        case 'End':\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, dp, onChange],\n  );\n\n  const hasMarks = marks && marks.length > 0;\n  const hasLabels = hasMarks && marks.some((m) => m.label);\n\n  return (\n    <div\n      className={[styles.wrapper, hasLabels ? styles.hasLabels : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {/* Accessible slider */}\n      <div\n        ref={trackRef}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-disabled={disabled || undefined}\n        className={[styles.track, disabled ? styles.disabled : null].filter(Boolean).join(' ')}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onKeyDown={disabled ? undefined : handleKeyDown}\n      >\n        {/* Filled portion */}\n        <div className={styles.fill} style={{ width: `${pct}%` }} />\n\n        {/* Thumb */}\n        <div className={styles.thumb} style={{ left: `${pct}%` }} aria-hidden=\"true\" />\n\n        {/* Tick marks */}\n        {hasMarks &&\n          marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n\n            return (\n              <div\n                key={m.value}\n                className={styles.tick}\n                style={{ left: `${mPct}%` }}\n                aria-hidden=\"true\"\n              />\n            );\n          })}\n      </div>\n\n      {/* Mark labels */}\n      {hasLabels && (\n        <div className={styles.labels} aria-hidden=\"true\">\n          {marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n\n            return (\n              <span key={m.value} className={styles.markLabel} style={{ left: `${mPct}%` }}>\n                {m.label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/dist/components/Slider/Slider.d.ts

@@ -42,4 +42,4 @@ export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onCha
  *
  * @see https://developer.gnome.org/hig/patterns/controls/sliders.html
  */
-export declare function Slider({ value, onChange, min, max, step, disabled, marks, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, ...props }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export declare const Slider: ({ value, onChange, min, max, step, disabled, marks, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }: SliderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Slider/Slider.js

@@ -12,7 +12,7 @@ function s(e) {
 	let t = e.toString(), n = t.indexOf(".");
 	return n === -1 ? 0 : t.length - n - 1;
 }
-function c({ value: c, onChange: l, min: u = 0, max: d = 100, step: f = 1, disabled: p = !1, marks: m, className: h, "aria-label": g, "aria-labelledby": _, "aria-describedby": v, ...y }) {
+var c = ({ value: c, onChange: l, min: u = 0, max: d = 100, step: f = 1, disabled: p = !1, marks: m, className: h, "aria-label": g, "aria-labelledby": _, "aria-describedby": v, ...y }) => {
 	let b = n(null), x = s(f), S = (a(c, u, d) - u) / (d - u) * 100, C = t((e) => {
 		if (!b.current) return;
 		let { left: t, width: n } = b.current.getBoundingClientRect();
@@ -115,7 +115,7 @@ function c({ value: c, onChange: l, min: u = 0, max: d = 100, step: f = 1, disab
 			})
 		})]
 	});
-}
+};
 //#endregion
 export { c as Slider };
 

package/dist/components/Slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type PointerEvent,\n  useCallback,\n  useRef,\n} from 'react';\n\nimport styles from './Slider.module.css';\n\nexport interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current value. Must be between `min` and `max`. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum value. Defaults to `0`. */\n  min?: number;\n  /** Maximum value. Defaults to `100`. */\n  max?: number;\n  /**\n   * Granularity of each step.\n   * - Arrow keys move by one step.\n   * - Page Up/Down move by 10 steps.\n   * Defaults to `1`.\n   */\n  step?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /**\n   * Marks to display along the track.\n   * Each mark can have an optional label rendered below the track.\n   */\n  marks?: Array<{ value: number; label?: string }>;\n  /** Accessible label. Required when no visible `<label>` is present. */\n  'aria-label'?: string;\n  /** Associates the control with a visible label element. */\n  'aria-labelledby'?: string;\n  /** `id` of an element that describes the current value (e.g. a live region). */\n  'aria-describedby'?: string;\n}\n\nfunction clamp(v: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, v));\n}\n\nfunction snapToStep(v: number, min: number, step: number, decimals: number) {\n  return parseFloat((Math.round((v - min) / step) * step + min).toFixed(decimals));\n}\n\nfunction countDecimals(n: number) {\n  const s = n.toString();\n  const dot = s.indexOf('.');\n\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\n/**\n * Draggable range slider following the Adwaita `GtkScale` pattern.\n *\n * - Pointer (mouse / touch / pen) drag to set value continuously.\n * - Keyboard: ← / → move by one step; Page Up/Down by 10 steps; Home/End jump to bounds.\n * - Optional tick marks with labels.\n * - Fills the track from the left up to the thumb (accent colour).\n *\n * @see https://developer.gnome.org/hig/patterns/controls/sliders.html\n */\nexport function Slider({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  marks,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: SliderProps) {\n  const trackRef = useRef<HTMLDivElement>(null);\n  const dp = countDecimals(step);\n\n  const pct = ((clamp(value, min, max) - min) / (max - min)) * 100;\n\n  const setFromX = useCallback(\n    (clientX: number) => {\n      if (!trackRef.current) {\n        return;\n      }\n\n      const { left, width } = trackRef.current.getBoundingClientRect();\n      const raw = ((clientX - left) / width) * (max - min) + min;\n\n      onChange(clamp(snapToStep(raw, min, step, dp), min, max));\n    },\n    [min, max, step, dp, onChange],\n  );\n\n  // Pointer drag — capture on the thumb, move anywhere\n  const handlePointerDown = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (disabled) {\n        return;\n      }\n\n      e.currentTarget.setPointerCapture(e.pointerId);\n      setFromX(e.clientX);\n    },\n    [disabled, setFromX],\n  );\n\n  const handlePointerMove = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.hasPointerCapture(e.pointerId)) {\n        return;\n      }\n\n      setFromX(e.clientX);\n    },\n    [setFromX],\n  );\n\n  // Keyboard\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const set = (next: number) => {\n        e.preventDefault();\n        onChange(clamp(snapToStep(next, min, step, dp), min, max));\n      };\n\n      switch (e.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n          set(value + step);\n          break;\n        case 'ArrowLeft':\n        case 'ArrowDown':\n          set(value - step);\n          break;\n        case 'PageUp':\n          set(value + step * 10);\n          break;\n        case 'PageDown':\n          set(value - step * 10);\n          break;\n        case 'Home':\n          set(min);\n          break;\n        case 'End':\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, dp, onChange],\n  );\n\n  const hasMarks = marks && marks.length > 0;\n  const hasLabels = hasMarks && marks.some((m) => m.label);\n\n  return (\n    <div\n      className={[styles.wrapper, hasLabels ? styles.hasLabels : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {/* Accessible slider */}\n      <div\n        ref={trackRef}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-disabled={disabled || undefined}\n        className={[styles.track, disabled ? styles.disabled : null].filter(Boolean).join(' ')}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onKeyDown={disabled ? undefined : handleKeyDown}\n      >\n        {/* Filled portion */}\n        <div className={styles.fill} style={{ width: `${pct}%` }} />\n\n        {/* Thumb */}\n        <div className={styles.thumb} style={{ left: `${pct}%` }} aria-hidden=\"true\" />\n\n        {/* Tick marks */}\n        {hasMarks &&\n          marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n\n            return (\n              <div\n                key={m.value}\n                className={styles.tick}\n                style={{ left: `${mPct}%` }}\n                aria-hidden=\"true\"\n              />\n            );\n          })}\n      </div>\n\n      {/* Mark labels */}\n      {hasLabels && (\n        <div className={styles.labels} aria-hidden=\"true\">\n          {marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n\n            return (\n              <span key={m.value} className={styles.markLabel} style={{ left: `${mPct}%` }}>\n                {m.label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Slider.js","names":[],"sources":["../../../src/components/Slider/Slider.tsx"],"sourcesContent":["import {\n  type HTMLAttributes,\n  type KeyboardEvent,\n  type PointerEvent,\n  useCallback,\n  useRef,\n} from 'react';\n\nimport styles from './Slider.module.css';\n\nexport interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {\n  /** Current value. Must be between `min` and `max`. */\n  value: number;\n  /** Called when the value changes. */\n  onChange: (value: number) => void;\n  /** Minimum value. Defaults to `0`. */\n  min?: number;\n  /** Maximum value. Defaults to `100`. */\n  max?: number;\n  /**\n   * Granularity of each step.\n   * - Arrow keys move by one step.\n   * - Page Up/Down move by 10 steps.\n   * Defaults to `1`.\n   */\n  step?: number;\n  /** Disables the control. */\n  disabled?: boolean;\n  /**\n   * Marks to display along the track.\n   * Each mark can have an optional label rendered below the track.\n   */\n  marks?: Array<{ value: number; label?: string }>;\n  /** Accessible label. Required when no visible `<label>` is present. */\n  'aria-label'?: string;\n  /** Associates the control with a visible label element. */\n  'aria-labelledby'?: string;\n  /** `id` of an element that describes the current value (e.g. a live region). */\n  'aria-describedby'?: string;\n}\n\nfunction clamp(v: number, min: number, max: number) {\n  return Math.min(max, Math.max(min, v));\n}\n\nfunction snapToStep(v: number, min: number, step: number, decimals: number) {\n  return parseFloat((Math.round((v - min) / step) * step + min).toFixed(decimals));\n}\n\nfunction countDecimals(n: number) {\n  const s = n.toString();\n  const dot = s.indexOf('.');\n\n  return dot === -1 ? 0 : s.length - dot - 1;\n}\n\n/**\n * Draggable range slider following the Adwaita `GtkScale` pattern.\n *\n * - Pointer (mouse / touch / pen) drag to set value continuously.\n * - Keyboard: ← / → move by one step; Page Up/Down by 10 steps; Home/End jump to bounds.\n * - Optional tick marks with labels.\n * - Fills the track from the left up to the thumb (accent colour).\n *\n * @see https://developer.gnome.org/hig/patterns/controls/sliders.html\n */\nexport const Slider = ({\n  value,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  disabled = false,\n  marks,\n  className,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  ...props\n}: SliderProps) => {\n  const trackRef = useRef<HTMLDivElement>(null);\n  const dp = countDecimals(step);\n\n  const pct = ((clamp(value, min, max) - min) / (max - min)) * 100;\n\n  const setFromX = useCallback(\n    (clientX: number) => {\n      if (!trackRef.current) {\n        return;\n      }\n\n      const { left, width } = trackRef.current.getBoundingClientRect();\n      const raw = ((clientX - left) / width) * (max - min) + min;\n\n      onChange(clamp(snapToStep(raw, min, step, dp), min, max));\n    },\n    [min, max, step, dp, onChange],\n  );\n\n  // Pointer drag — capture on the thumb, move anywhere\n  const handlePointerDown = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (disabled) {\n        return;\n      }\n\n      e.currentTarget.setPointerCapture(e.pointerId);\n      setFromX(e.clientX);\n    },\n    [disabled, setFromX],\n  );\n\n  const handlePointerMove = useCallback(\n    (e: PointerEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.hasPointerCapture(e.pointerId)) {\n        return;\n      }\n\n      setFromX(e.clientX);\n    },\n    [setFromX],\n  );\n\n  // Keyboard\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLDivElement>) => {\n      const set = (next: number) => {\n        e.preventDefault();\n        onChange(clamp(snapToStep(next, min, step, dp), min, max));\n      };\n\n      switch (e.key) {\n        case 'ArrowRight':\n        case 'ArrowUp':\n          set(value + step);\n          break;\n        case 'ArrowLeft':\n        case 'ArrowDown':\n          set(value - step);\n          break;\n        case 'PageUp':\n          set(value + step * 10);\n          break;\n        case 'PageDown':\n          set(value - step * 10);\n          break;\n        case 'Home':\n          set(min);\n          break;\n        case 'End':\n          set(max);\n          break;\n      }\n    },\n    [value, step, min, max, dp, onChange],\n  );\n\n  const hasMarks = marks && marks.length > 0;\n  const hasLabels = hasMarks && marks.some((m) => m.label);\n\n  return (\n    <div\n      className={[styles.wrapper, hasLabels ? styles.hasLabels : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {/* Accessible slider */}\n      <div\n        ref={trackRef}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={value}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-disabled={disabled || undefined}\n        className={[styles.track, disabled ? styles.disabled : null].filter(Boolean).join(' ')}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onKeyDown={disabled ? undefined : handleKeyDown}\n      >\n        {/* Filled portion */}\n        <div className={styles.fill} style={{ width: `${pct}%` }} />\n\n        {/* Thumb */}\n        <div className={styles.thumb} style={{ left: `${pct}%` }} aria-hidden=\"true\" />\n\n        {/* Tick marks */}\n        {hasMarks &&\n          marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n\n            return (\n              <div\n                key={m.value}\n                className={styles.tick}\n                style={{ left: `${mPct}%` }}\n                aria-hidden=\"true\"\n              />\n            );\n          })}\n      </div>\n\n      {/* Mark labels */}\n      {hasLabels && (\n        <div className={styles.labels} aria-hidden=\"true\">\n          {marks.map((m) => {\n            const mPct = ((clamp(m.value, min, max) - min) / (max - min)) * 100;\n\n            return (\n              <span key={m.value} className={styles.markLabel} style={{ left: `${mPct}%` }}>\n                {m.label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;AAyCA,SAAS,EAAM,GAAW,GAAa,GAAa;CAClD,OAAO,KAAK,IAAI,GAAK,KAAK,IAAI,GAAK,CAAC,CAAC;AACvC;AAEA,SAAS,EAAW,GAAW,GAAa,GAAc,GAAkB;CAC1E,OAAO,YAAY,KAAK,OAAO,IAAI,KAAO,CAAI,IAAI,IAAO,GAAK,QAAQ,CAAQ,CAAC;AACjF;AAEA,SAAS,EAAc,GAAW;CAChC,IAAM,IAAI,EAAE,SAAS,GACf,IAAM,EAAE,QAAQ,GAAG;CAEzB,OAAO,MAAQ,KAAK,IAAI,EAAE,SAAS,IAAM;AAC3C;AAYA,IAAa,KAAU,EACrB,UACA,aACA,SAAM,GACN,SAAM,KACN,UAAO,GACP,cAAW,IACX,UACA,cACA,cAAc,GACd,mBAAmB,GACnB,oBAAoB,GACpB,GAAG,QACc;CACjB,IAAM,IAAW,EAAuB,IAAI,GACtC,IAAK,EAAc,CAAI,GAEvB,KAAQ,EAAM,GAAO,GAAK,CAAG,IAAI,MAAQ,IAAM,KAAQ,KAEvD,IAAW,GACd,MAAoB;EACnB,IAAI,CAAC,EAAS,SACZ;EAGF,IAAM,EAAE,SAAM,aAAU,EAAS,QAAQ,sBAAsB;EAG/D,EAAS,EAAM,GAFD,IAAU,KAAQ,KAAU,IAAM,KAAO,GAExB,GAAK,GAAM,CAAE,GAAG,GAAK,CAAG,CAAC;CAC1D,GACA;EAAC;EAAK;EAAK;EAAM;EAAI;CAAQ,CAC/B,GAGM,IAAoB,GACvB,MAAoC;EAC/B,MAIJ,EAAE,cAAc,kBAAkB,EAAE,SAAS,GAC7C,EAAS,EAAE,OAAO;CACpB,GACA,CAAC,GAAU,CAAQ,CACrB,GAEM,IAAoB,GACvB,MAAoC;EAC9B,EAAE,cAAc,kBAAkB,EAAE,SAAS,KAIlD,EAAS,EAAE,OAAO;CACpB,GACA,CAAC,CAAQ,CACX,GAGM,IAAgB,GACnB,MAAqC;EACpC,IAAM,KAAO,MAAiB;GAE5B,AADA,EAAE,eAAe,GACjB,EAAS,EAAM,EAAW,GAAM,GAAK,GAAM,CAAE,GAAG,GAAK,CAAG,CAAC;EAC3D;EAEA,QAAQ,EAAE,KAAV;GACE,KAAK;GACL,KAAK;IACH,EAAI,IAAQ,CAAI;IAChB;GACF,KAAK;GACL,KAAK;IACH,EAAI,IAAQ,CAAI;IAChB;GACF,KAAK;IACH,EAAI,IAAQ,IAAO,EAAE;IACrB;GACF,KAAK;IACH,EAAI,IAAQ,IAAO,EAAE;IACrB;GACF,KAAK;IACH,EAAI,CAAG;IACP;GACF,KAAK;IACH,EAAI,CAAG;IACP;EACJ;CACF,GACA;EAAC;EAAO;EAAM;EAAK;EAAK;EAAI;CAAQ,CACtC,GAEM,IAAW,KAAS,EAAM,SAAS,GACnC,IAAY,KAAY,EAAM,MAAM,MAAM,EAAE,KAAK;CAEvD,OACE,kBAAC,OAAD;EACE,WAAW;GAAC,EAAO;GAAS,IAAY,EAAO,YAAY;GAAM;EAAS,EACvE,OAAO,OAAO,EACd,KAAK,GAAG;EACX,GAAI;YAJN,CAOE,kBAAC,OAAD;GACE,KAAK;GACL,MAAK;GACL,UAAU,IAAW,KAAK;GAC1B,iBAAe;GACf,iBAAe;GACf,iBAAe;GACf,cAAY;GACZ,mBAAiB;GACjB,oBAAkB;GAClB,iBAAe,KAAY,KAAA;GAC3B,WAAW,CAAC,EAAO,OAAO,IAAW,EAAO,WAAW,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;GACrF,eAAe;GACf,eAAe;GACf,WAAW,IAAW,KAAA,IAAY;aAdpC;IAiBE,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAM,OAAO,EAAE,OAAO,GAAG,EAAI,GAAG;IAAI,CAAA;IAG3D,kBAAC,OAAD;KAAK,WAAW,EAAO;KAAO,OAAO,EAAE,MAAM,GAAG,EAAI,GAAG;KAAG,eAAY;IAAQ,CAAA;IAG7E,KACC,EAAM,KAAK,MAAM;KACf,IAAM,KAAS,EAAM,EAAE,OAAO,GAAK,CAAG,IAAI,MAAQ,IAAM,KAAQ;KAEhE,OACE,kBAAC,OAAD;MAEE,WAAW,EAAO;MAClB,OAAO,EAAE,MAAM,GAAG,EAAK,GAAG;MAC1B,eAAY;KACb,GAJM,EAAE,KAIR;IAEL,CAAC;GACA;MAGJ,KACC,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAQ,eAAY;aACxC,EAAM,KAAK,MAAM;IAChB,IAAM,KAAS,EAAM,EAAE,OAAO,GAAK,CAAG,IAAI,MAAQ,IAAM,KAAQ;IAEhE,OACE,kBAAC,QAAD;KAAoB,WAAW,EAAO;KAAW,OAAO,EAAE,MAAM,GAAG,EAAK,GAAG;eACxE,EAAE;IACC,GAFK,EAAE,KAEP;GAEV,CAAC;EACE,CAAA,CAEJ;;AAET"}

package/dist/components/Slider.cjs

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

package/dist/components/SpinButton/SpinButton.cjs

@@ -1,2 +1,2 @@
-const e=require(`./SpinButton.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);function r(e){let t=e.toString(),n=t.indexOf(`.`);return n===-1?0:t.length-n-1}function i(e,t,n){return Math.min(n,Math.max(t,e))}function a({value:a,onChange:o,min:s=0,max:c=100,step:l=1,decimals:u,disabled:d=!1,className:f,"aria-label":p,"aria-labelledby":m,...h}){let g=u??r(l),_=(0,t.useCallback)(e=>o(parseFloat(i(e,s,c).toFixed(g))),[o,s,c,g]),v=(0,t.useCallback)(e=>{switch(e.key){case`ArrowUp`:e.preventDefault(),_(a+l);break;case`ArrowDown`:e.preventDefault(),_(a-l);break;case`PageUp`:e.preventDefault(),_(a+l*10);break;case`PageDown`:e.preventDefault(),_(a-l*10);break;case`Home`:e.preventDefault(),_(s);break;case`End`:e.preventDefault(),_(c);break}},[a,l,s,c,_]);return(0,n.jsxs)(`div`,{role:`spinbutton`,"aria-valuenow":a,"aria-valuemin":s,"aria-valuemax":c,"aria-label":p,"aria-labelledby":m,"aria-disabled":d||void 0,tabIndex:d?-1:0,onKeyDown:d?void 0:v,className:[e.default.spin,d?e.default.disabled:null,f].filter(Boolean).join(` `),...h,children:[(0,n.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-hidden":`true`,disabled:d||a<=s,className:e.default.btn,onClick:()=>_(a-l),children:`−`}),(0,n.jsx)(`span`,{className:e.default.value,"aria-hidden":`true`,children:a.toFixed(g)}),(0,n.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-hidden":`true`,disabled:d||a>=c,className:e.default.btn,onClick:()=>_(a+l),children:`+`})]})}exports.SpinButton=a;
+const e=require("./SpinButton.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");function r(e){let t=e.toString(),n=t.indexOf(`.`);return n===-1?0:t.length-n-1}function i(e,t,n){return Math.min(n,Math.max(t,e))}var a=({value:a,onChange:o,min:s=0,max:c=100,step:l=1,decimals:u,disabled:d=!1,className:f,"aria-label":p,"aria-labelledby":m,...h})=>{let g=u??r(l),_=(0,t.useCallback)(e=>o(parseFloat(i(e,s,c).toFixed(g))),[o,s,c,g]),v=(0,t.useCallback)(e=>{switch(e.key){case`ArrowUp`:e.preventDefault(),_(a+l);break;case`ArrowDown`:e.preventDefault(),_(a-l);break;case`PageUp`:e.preventDefault(),_(a+l*10);break;case`PageDown`:e.preventDefault(),_(a-l*10);break;case`Home`:e.preventDefault(),_(s);break;case`End`:e.preventDefault(),_(c);break}},[a,l,s,c,_]);return(0,n.jsxs)(`div`,{role:`spinbutton`,"aria-valuenow":a,"aria-valuemin":s,"aria-valuemax":c,"aria-label":p,"aria-labelledby":m,"aria-disabled":d||void 0,tabIndex:d?-1:0,onKeyDown:d?void 0:v,className:[e.default.spin,d?e.default.disabled:null,f].filter(Boolean).join(` `),...h,children:[(0,n.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-hidden":`true`,disabled:d||a<=s,className:e.default.btn,onClick:()=>_(a-l),children:`−`}),(0,n.jsx)(`span`,{className:e.default.value,"aria-hidden":`true`,children:a.toFixed(g)}),(0,n.jsx)(`button`,{type:`button`,tabIndex:-1,"aria-hidden":`true`,disabled:d||a>=c,className:e.default.btn,onClick:()=>_(a+l),children:`+`})]})};exports.SpinButton=a;
 //# sourceMappingURL=SpinButton.cjs.map