@kerfjs/ui 4.4.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Brian Westphal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,176 @@
+# @kerfjs/ui
+
+Accessible, composable UI primitives for [kerf](https://github.com/brianwestphal/kerf). The package ships production components, component-reachable CSS, accessibility and keyboard contracts, an AI-readable guide, and a production-backed UX catalog.
+
+```bash
+npm install kerfjs @kerfjs/ui
+```
+
+```tsx
+import { MenuItem } from '@kerfjs/ui/menu-item';
+import { Toolbar } from '@kerfjs/ui/toolbar';
+import { ToolbarText } from '@kerfjs/ui/toolbar-text';
+
+mount(root, () => <>
+  <Toolbar label="Document" leading={<ToolbarText text="Notes" />} />
+  <MenuItem action="open-notes" label="Notes" selected />
+</>);
+```
+
+Components return Kerf `SafeHtml`. They do not own application state or attach transient listeners. Actions are stable `data-action` hooks; the application wires them once with `delegate()` or `delegateActions()` and retains the disposer.
+
+## Component subpaths
+
+| Component | Browser import (includes reachable CSS) | Manual CSS export |
+| --- | --- | --- |
+| `LucideIcon` | `@kerfjs/ui/lucide-icon` | `@kerfjs/ui/lucide-icon.css` |
+| `Toolbar` | `@kerfjs/ui/toolbar` | `@kerfjs/ui/toolbar.css` |
+| `ToolbarControlGroup` | `@kerfjs/ui/toolbar-control-group` | `@kerfjs/ui/toolbar-control-group.css` |
+| `ToolbarText` | `@kerfjs/ui/toolbar-text` | `@kerfjs/ui/toolbar-text.css` |
+| `MenuItem` | `@kerfjs/ui/menu-item` | `@kerfjs/ui/menu-item.css` |
+| `MenuHeader` | `@kerfjs/ui/menu-header` | `@kerfjs/ui/menu-header.css` |
+| `ResizableRegion` | `@kerfjs/ui/resizable-region` | `@kerfjs/ui/resizable-region.css` |
+| `wireResizableRegions` | `@kerfjs/ui/wire-resizable-regions` | — |
+| `AppTab` | `@kerfjs/ui/app-tab` | `@kerfjs/ui/app-tab.css` |
+| `TabBar` | `@kerfjs/ui/tab-bar` | `@kerfjs/ui/tab-bar.css` |
+| `wireTabBars`, `reorderTabs` | `@kerfjs/ui/wire-tab-bars` | — |
+| `PageHeader` | `@kerfjs/ui/page-header` | `@kerfjs/ui/page-header.css` |
+| `LoadingSpinner` | `@kerfjs/ui/loading-spinner` | `@kerfjs/ui/loading-spinner.css` |
+| `Select` | `@kerfjs/ui/select` | `@kerfjs/ui/select.css` |
+| `SegmentedControl` | `@kerfjs/ui/segmented-control` | `@kerfjs/ui/segmented-control.css` |
+| `StateBanner` | `@kerfjs/ui/state-banner` | `@kerfjs/ui/state-banner.css` |
+| `EmptyState` | `@kerfjs/ui/empty-state` | `@kerfjs/ui/empty-state.css` |
+| `DialogHeader` | `@kerfjs/ui/dialog-header` | `@kerfjs/ui/dialog-header.css` |
+| `ValueTable` | `@kerfjs/ui/value-table` | `@kerfjs/ui/value-table.css` |
+
+Import components from their explicit JavaScript subpaths. CSS-aware browser
+bundlers such as Vite, webpack, and esbuild follow each subpath's `browser`
+condition, collect its foundation and component CSS, and retain styles for any
+UI subcomponents it uses. Unrelated component CSS is never reached. Application
+roots therefore do not need a transitive stylesheet list, and removing the last
+component import also removes its reachable CSS. This is component-level CSS
+tree shaking; variants within an imported component remain together.
+
+The root `@kerfjs/ui` barrel stays JavaScript-only because making a side-effectful
+CSS barrel tree-shakable is not portable across bundlers. If an application uses
+that convenience import, also import `@kerfjs/ui/styles.css`, which deliberately
+contains the complete layer. Non-browser/SSR tools resolve the pure `import`
+condition automatically; `@kerfjs/ui/unstyled` is the explicit CSS-free root
+entry for a browser build with a custom styling pipeline. The exported
+`foundation.css` and component CSS paths remain available for fully manual
+delivery. Load application overrides after package styles, or scope `--kui-*`
+variables directly on a component instance.
+
+## Web Awesome theme
+
+Apps using Web Awesome's free components can opt into the same visual universe
+with one CSS import:
+
+```ts
+import '@kerfjs/ui/webawesome.css';
+import '@awesome.me/webawesome/dist/components/button/button.js';
+import '@awesome.me/webawesome/dist/components/input/input.js';
+```
+
+`webawesome.css` includes Web Awesome's native/base theme and then applies the
+Hot Sheet 2 palette, surfaces, status colors, focus treatment, form geometry,
+radii, tooltips, and shadows through Web Awesome's public `--wa-*` contract.
+Those tokens flow into all free component families. Every free Web Awesome 3.12
+component has an individual UX-catalog route under the collapsible ecosystem
+section, but the theme entry does not import or register component JavaScript,
+so each component module remains independently tree-shakeable in consuming apps.
+Tooltip and Popover surfaces omit pointer arrows by default. Override
+`--wa-tooltip-arrow-size` and `--kui-wa-popover-arrow-size`, or a single
+popover's public `--arrow-size`, when an arrow communicates useful context.
+
+Load application CSS afterward to override semantic values globally, or scope
+them to a subtree. Use Web Awesome's `.wa-light`, `.wa-dark`, and `.wa-invert`
+classes for explicit appearance boundaries:
+
+```css
+:root {
+  --wa-color-brand-fill-loud: #7540a8;
+  --wa-form-control-border-radius: .5rem;
+}
+```
+
+`foundation.css` follows Hot Sheet 2's Web Awesome-compatible semantic palette.
+Brand, neutral, success, warning, and danger each expose fill, border, and
+foreground roles through `--kui-color-*`; stateful components also expose
+component variables such as `--kui-state-banner-background`. Override the
+foundation for an application theme, a tone variable for one semantic state, or
+a component variable on one instance without replacing component selectors.
+
+`StateBanner` has opinionated `neutral`, `info`, `success`, `warning`, and
+`danger` palettes. Override an individual banner with
+`--kui-state-banner-background`, `--kui-state-banner-border`,
+`--kui-state-banner-foreground`, `--kui-state-banner-detail`,
+`--kui-state-banner-action-background`, and
+`--kui-state-banner-action-hover-background`. To retheme one tone everywhere,
+override `--kui-state-banner-{tone}-{background|border|foreground}`. Other
+stateful components follow the same public-variable pattern, including
+`--kui-toolbar-control-*`, `--kui-segmented-*`, `--kui-app-tab-*`, and
+`--kui-tab-bar-*`.
+
+`SegmentedControl` is a controlled exclusive-choice component. Use
+`appearance="toolbar"` when it sits inside a `ToolbarControlGroup`, or choose a
+standalone `filled`/`outlined` appearance with `shape="rounded"` or
+`shape="pill"`. The app owns `value` and handles the supplied action:
+
+```tsx
+<SegmentedControl
+  id="view-mode"
+  label="View mode"
+  value={viewMode.value}
+  action="select-view-mode"
+  appearance="toolbar"
+  shape="pill"
+  choices={[
+    { value: 'list', label: 'List' },
+    { value: 'columns', label: 'Columns' },
+  ]}
+/>
+```
+
+Each choice remains a native button in sequential Tab order and exposes its
+value through `data-segment-value`. Override an instance through
+`--kui-segmented-{background|border|foreground|hover-background}` and
+`--kui-segmented-selected-{background|foreground|border|shadow}`.
+
+`TabBar` is controlled: pass ordered `AppTab` children, then wire its keyboard
+and same-bar drag behavior with `wireTabBars(root, { onReorder })`. During a
+drag, the scroll strip automatically moves toward either edge with speed based
+on pointer proximity, exposing earlier or later drop targets. Apply the reported
+change with `reorderTabs()` or application-specific state logic. The application
+still owns selection, closing, routing, and persistence.
+
+`Select` uses Web Awesome but does not register anything by itself. Install the optional peer, import the shared theme if desired, and explicitly import the registration entry in the application:
+
+```ts
+import '@kerfjs/ui/webawesome.css';
+import '@kerfjs/ui/select/register';
+```
+
+That boundary keeps Web Awesome and its custom-element side effects out of bundles that use unrelated components. Automated consumer-bundle tests enforce it.
+
+For application choices and panes, prefer Kerf's purpose-built primitives:
+`Select` over direct Web Awesome selection/dropdown composition,
+`SegmentedControl` over Button Group, `TabBar` or `SegmentedControl` over Web
+Awesome Tabs, `LucideIcon` over Web Awesome Icon, and `ResizableRegion` over
+Split Panel. `ResizableRegion` includes Hot Sheet 2's 1px separator and
+hover/focus grip. Consider Web Awesome Popup when its anchored-positioning
+engine removes custom placement code; treat Tree, Animated Image, Comparison,
+Zoomable Frame, and the displaced alternatives above as exceptional rather
+than default patterns. The detailed rationale lives in the theme contract.
+
+## Design and tool guidance
+
+- [Design philosophy](./docs/design-philosophy.md)
+- [Apple HIG translation](./docs/apple-hig.md)
+- [Accessibility and keyboard contracts](./docs/accessibility.md)
+- [Component and integration contract](./docs/component-contract.md)
+- [Web Awesome theme contract](./docs/webawesome-theme.md)
+- [UX catalog contract](./docs/ux-demo.md)
+- [AI guide](./ai/skill.md)
+
+Run `npm run dev` from this directory for the category-grouped master/detail catalog. Every public visual component has a focused route; all 70 free Web Awesome 3.12 components have focused routes under the collapsible ecosystem section. One grouped `Related components` selector contains derived `Uses` / `Used by` navigation across both sets. Run `npm run check` for static/unit/bundle gates and `npm run test:e2e` for the real-browser suite.

package/ai/skill.md

@@ -0,0 +1,38 @@
+---
+name: kerf-ui
+description: Build interfaces with kerfjs and the @kerfjs/ui production component package. Use whenever code imports @kerfjs/ui or a task asks for Kerf UI components.
+kerf-ui-skill-version: 1.5.0
+---
+
+# Building with @kerfjs/ui
+
+Read `../README.md`, `../docs/component-contract.md`, and `../docs/accessibility.md` before changing a consuming interface. Read `../docs/webawesome-theme.md` when using Web Awesome components or changing shared theme tokens.
+
+Hard rules:
+
+1. Import visual components from explicit JavaScript subpaths. In CSS-aware browser builds each subpath brings in its own reachable CSS, including UI subcomponents, while unrelated CSS remains out. The root barrel and `@kerfjs/ui/unstyled` are CSS-free; pair the root barrel with `styles.css` only when the complete layer is intentional. Manual CSS subpaths remain available for custom pipelines.
+2. Components return Kerf `SafeHtml`. Never pass DOM nodes as children or use inline JSX event handlers.
+3. Keep state, product copy, persistence, and domain mappings in the application. Do not add product-specific actions or fields to a generic component.
+4. Wire `data-action` hooks from one stable root with `delegate()` or `delegateActions()` and retain disposers.
+5. Use the opinionated `--kui-color-*` semantic ramps and component-level override properties. Override tokens at the narrowest useful scope; do not hard-code appearance-specific colors or replace private descendant rules.
+6. `Select` is pure until the app explicitly imports `@kerfjs/ui/select/register`; do not import Web Awesome's full registration bundle. When an app uses Web Awesome components, import the CSS-only `@kerfjs/ui/webawesome.css` theme once and keep importing individual Web Awesome component modules so their JavaScript remains tree-shakeable.
+7. Decorative icons are hidden; controls are named; focus is visible; state never relies on color alone; reduced motion and increased contrast remain usable.
+8. `ResizableRegion` uses `wireResizableRegions()` for Arrow, Shift+Arrow, Home/End, and pointer behavior. The app owns size persistence.
+9. Use controlled `SegmentedControl` for a small exclusive choice set. Select `appearance="toolbar"` when nesting it inside `ToolbarControlGroup`; use rounded or pill shapes for standalone contexts. Handle its action, update `value`, keep meaningful choice labels, and preserve every enabled native button in sequential Tab order.
+10. Compose `AppTab` inside controlled `TabBar`; call `wireTabBars()` once and retain its disposer. It owns same-bar drag mechanics, including proximity-based horizontal edge autoscroll, while the app applies `onReorder` and owns order, selection, panels, close policy, routing, and persistence.
+11. Demo work uses public production component subpaths and their browser-selected CSS. Give every public visual component its own category-grouped catalog route; list themed third-party components under a clearly labeled collapsible ecosystem section, with a focused route for each. Declare direct `uses` relationships so `Used by` stays derivable, and theme shell chrome through the same semantic tokens as the stage instead of drawing a substitute.
+12. The Web Awesome theme makes Tooltip and Popover arrowless by default. Keep that default unless a pointer materially clarifies the anchor; opt back in with `--wa-tooltip-arrow-size`, `--kui-wa-popover-arrow-size`, or a popover's public `--arrow-size`, and use `without-arrow` when local no-arrow intent should survive theme changes.
+13. Treat the complete Web Awesome catalog as support coverage, not a recommendation list. Consider Popup when it replaces custom anchored positioning. Prefer Kerf `Select` over direct Dropdown/Dropdown Item/Select/Option composition, `SegmentedControl` over Button Group, `TabBar` or `SegmentedControl` over Web Awesome Tabs, `LucideIcon` over Web Awesome Icon, and `ResizableRegion` over Split Panel. Use Tree/Tree Item, Animated Image, and Comparison only for a specific required behavior; avoid Zoomable Frame.
+
+Common mistakes:
+
+| Mistake | Fix |
+| --- | --- |
+| Hard-coded project/transport action in a component | Pass a semantic `data-action` string from an application adapter |
+| Per-instance signal at module scope | Create state in the application or a factory and pass it in |
+| `role="menuitem"` on one button | Use the native button, or implement the complete ARIA menu widget |
+| Test only a custom-element attribute | Assert live property, emitted event, focus, and rendered output |
+| Import all Web Awesome components | Import only `@kerfjs/ui/select/register` for `Select`, or individual Web Awesome modules for other controls; `webawesome.css` registers no JavaScript |
+| Maintain a root list of component styles | Import each visual component from its JS subpath; its reachable CSS follows automatically |
+| Add demo-only markup for a production state | Add the state to the production component, then render that export in the catalog |
+| Choose a listed ecosystem component by default | Apply the component-selection guidance above; catalog coverage means supported and themed, not preferred |

package/dist/app-tab.d.ts

@@ -0,0 +1,18 @@
+import { SafeHtml } from 'kerfjs';
+
+interface AppTabProps {
+    id: string;
+    name: string;
+    selected?: boolean;
+    closable?: boolean;
+    draggable?: boolean;
+    leading?: SafeHtml;
+    trailing?: SafeHtml;
+    selectAction?: string;
+    closeAction?: string;
+    className?: string;
+    rootAttributes?: Readonly<Record<`data-${string}`, string>>;
+}
+declare function AppTab({ id, name, selected, closable, draggable, leading, trailing, selectAction, closeAction, className, rootAttributes }: AppTabProps): SafeHtml;
+
+export { AppTab, type AppTabProps };

package/dist/app-tab.js

@@ -0,0 +1,3 @@
+export { AppTab } from './chunk-T5XNMVOI.js';
+
+//# sourceMappingURL=app-tab.js.map

package/dist/app-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"app-tab.js"}

package/dist/browser/app-tab.js

@@ -0,0 +1,3 @@
+import '../../src/foundation.css';
+import '../../src/app-tab.css';
+export * from '../app-tab.js';

package/dist/browser/dialog-header.js

@@ -0,0 +1,3 @@
+import '../../src/foundation.css';
+import '../../src/dialog-header.css';
+export * from '../dialog-header.js';

package/dist/browser/empty-state.js

@@ -0,0 +1,4 @@
+import '../../src/foundation.css';
+import '../../src/loading-spinner.css';
+import '../../src/empty-state.css';
+export * from '../empty-state.js';

package/dist/browser/loading-spinner.js

@@ -0,0 +1,3 @@
+import '../../src/foundation.css';
+import '../../src/loading-spinner.css';
+export * from '../loading-spinner.js';

package/dist/browser/lucide-icon.js

@@ -0,0 +1,3 @@
+import '../../src/foundation.css';
+import '../../src/lucide-icon.css';
+export * from '../lucide-icon.js';

package/dist/browser/menu-header.js

@@ -0,0 +1,3 @@
+import '../../src/foundation.css';
+import '../../src/menu-header.css';
+export * from '../menu-header.js';

package/dist/browser/menu-item.js

@@ -0,0 +1,3 @@
+import '../../src/foundation.css';
+import '../../src/menu-item.css';
+export * from '../menu-item.js';

package/dist/browser/page-header.js

@@ -0,0 +1,3 @@
+import '../../src/foundation.css';
+import '../../src/page-header.css';
+export * from '../page-header.js';

package/dist/browser/resizable-region.js

@@ -0,0 +1,3 @@
+import '../../src/foundation.css';
+import '../../src/resizable-region.css';
+export * from '../resizable-region.js';

package/dist/browser/segmented-control.js

@@ -0,0 +1,3 @@
+import '../../src/foundation.css';
+import '../../src/segmented-control.css';
+export * from '../segmented-control.js';

package/dist/browser/select.js

@@ -0,0 +1,4 @@
+import '../../src/foundation.css';
+import '../../src/lucide-icon.css';
+import '../../src/select.css';
+export * from '../select.js';

package/dist/browser/state-banner.js

@@ -0,0 +1,3 @@
+import '../../src/foundation.css';
+import '../../src/state-banner.css';
+export * from '../state-banner.js';

package/dist/browser/tab-bar.js

@@ -0,0 +1,3 @@
+import '../../src/foundation.css';
+import '../../src/tab-bar.css';
+export * from '../tab-bar.js';

package/dist/browser/toolbar-control-group.js

@@ -0,0 +1,3 @@
+import '../../src/foundation.css';
+import '../../src/toolbar-control-group.css';
+export * from '../toolbar-control-group.js';

package/dist/browser/toolbar-text.js

@@ -0,0 +1,3 @@
+import '../../src/foundation.css';
+import '../../src/toolbar-text.css';
+export * from '../toolbar-text.js';

package/dist/browser/toolbar.js

@@ -0,0 +1,3 @@
+import '../../src/foundation.css';
+import '../../src/toolbar.css';
+export * from '../toolbar.js';

package/dist/browser/value-table.js

@@ -0,0 +1,3 @@
+import '../../src/foundation.css';
+import '../../src/value-table.css';
+export * from '../value-table.js';

package/dist/chunk-2PES33HS.js

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/page-header.tsx
+function PageHeader({ title, action }) {
+  return /* @__PURE__ */ jsxs("header", { class: "kui-page-header", "data-component": "page-header", children: [
+    /* @__PURE__ */ jsx("h1", { children: title }),
+    action && /* @__PURE__ */ jsx("div", { class: "kui-page-header__action", children: action })
+  ] });
+}
+
+export { PageHeader };
+
+//# sourceMappingURL=chunk-2PES33HS.js.map

package/dist/chunk-2PES33HS.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/page-header.tsx"],"names":[],"mappings":";;;AAOO,SAAS,UAAA,CAAW,EAAE,KAAA,EAAO,MAAA,EAAO,EAAoB;AAC7D,EAAA,uBAAO,IAAA,CAAC,QAAA,EAAA,EAAO,KAAA,EAAM,iBAAA,EAAkB,kBAAe,aAAA,EAAc,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,QAAI,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,IAAM,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,2BAA2B,QAAA,EAAA,MAAA,EAAO;AAAA,GAAA,EAAO,CAAA;AACrJ","file":"chunk-2PES33HS.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface PageHeaderProps {\n  title: string | SafeHtml;\n  action?: SafeHtml;\n}\n\nexport function PageHeader({ title, action }: PageHeaderProps) {\n  return <header class=\"kui-page-header\" data-component=\"page-header\"><h1>{title}</h1>{action && <div class=\"kui-page-header__action\">{action}</div>}</header>;\n}\n"]}

package/dist/chunk-3O7ZEUW2.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx, Fragment } from 'kerfjs/jsx-runtime';
+
+// src/resizable-region.tsx
+var clampRegionSize = (size, min, max) => Math.min(max, Math.max(min, Math.round(size)));
+var resizeRegionFromPointer = (startSize, delta, edge) => startSize + delta * (edge === "start" ? -1 : 1);
+function ResizeGrip({ axis }) {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", children: axis === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 6v12" }),
+    /* @__PURE__ */ jsx("path", { d: "M15 6v12" })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M6 9h12" }),
+    /* @__PURE__ */ jsx("path", { d: "M6 15h12" })
+  ] }) });
+}
+function ResizableRegion({ id, label, size, min, max, axis = "horizontal", edge = "end", collapsed = false, transitioning = false, children }) {
+  const expandedSize = clampRegionSize(size, min, max);
+  const resolved = collapsed ? 0 : expandedSize;
+  const orientation = axis === "horizontal" ? "vertical" : "horizontal";
+  return /* @__PURE__ */ jsxs("section", { class: "kui-resizable-region", "data-component": "resizable-region", "data-region-id": id, "data-axis": axis, "data-edge": edge, "data-collapsed": String(collapsed), "data-transitioning": String(transitioning), style: `--kui-resizable-region-size:${resolved}px;--kui-resizable-region-expanded-size:${expandedSize}px`, "aria-label": label, children: [
+    /* @__PURE__ */ jsx("div", { class: "kui-resizable-region__content", children }),
+    /* @__PURE__ */ jsx("div", { class: "kui-resizable-region__handle", role: "separator", tabindex: "0", "aria-label": `Resize ${label}`, "aria-orientation": orientation, "aria-valuemin": collapsed ? 0 : min, "aria-valuemax": max, "aria-valuenow": resolved, "data-kui-resize-handle": true, "data-region-id": id, children: /* @__PURE__ */ jsx(ResizeGrip, { axis }) })
+  ] });
+}
+
+export { ResizableRegion, clampRegionSize, resizeRegionFromPointer };
+
+//# sourceMappingURL=chunk-3O7ZEUW2.js.map

package/dist/chunk-3O7ZEUW2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/resizable-region.tsx"],"names":[],"mappings":";;;AAkBO,IAAM,eAAA,GAAkB,CAAC,IAAA,EAAc,GAAA,EAAa,QAAgB,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,IAAA,CAAK,IAAI,GAAA,EAAK,IAAA,CAAK,KAAA,CAAM,IAAI,CAAC,CAAC;AACjH,IAAM,uBAAA,GAA0B,CAAC,SAAA,EAAmB,KAAA,EAAe,SAA8B,SAAA,GAAY,KAAA,IAAS,IAAA,KAAS,OAAA,GAAU,EAAA,GAAK,CAAA;AAErJ,SAAS,UAAA,CAAW,EAAE,IAAA,EAAK,EAAkC;AAC3D,EAAA,2BAAQ,KAAA,EAAA,EAAI,aAAA,EAAY,MAAA,EAAO,OAAA,EAAQ,aAAY,IAAA,EAAK,MAAA,EAAO,MAAA,EAAO,cAAA,EAAe,gBAAa,GAAA,EAAI,gBAAA,EAAe,OAAA,EAClH,QAAA,EAAA,IAAA,KAAS,+BACN,IAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,SAAA,EAAU,CAAA;AAAA,oBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW;AAAA,GAAA,EAAO,oBACrD,IAAA,CAAA,QAAA,EAAA,EAAE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,GAAE,SAAA,EAAU,CAAA;AAAA,oBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,UAAA,EAAW;AAAA,GAAA,EAAO,CAAA,EAC3D,CAAA;AACF;AAEO,SAAS,gBAAgB,EAAE,EAAA,EAAI,KAAA,EAAO,IAAA,EAAM,KAAK,GAAA,EAAK,IAAA,GAAO,YAAA,EAAc,IAAA,GAAO,OAAO,SAAA,GAAY,KAAA,EAAO,aAAA,GAAgB,KAAA,EAAO,UAAS,EAAyB;AAC1K,EAAA,MAAM,YAAA,GAAe,eAAA,CAAgB,IAAA,EAAM,GAAA,EAAK,GAAG,CAAA;AACnD,EAAA,MAAM,QAAA,GAAW,YAAY,CAAA,GAAI,YAAA;AACjC,EAAA,MAAM,WAAA,GAAc,IAAA,KAAS,YAAA,GAAe,UAAA,GAAa,YAAA;AACzD,EAAA,uBAAO,IAAA,CAAC,SAAA,EAAA,EAAQ,KAAA,EAAM,sBAAA,EAAuB,gBAAA,EAAe,kBAAA,EAAmB,gBAAA,EAAgB,EAAA,EAAI,WAAA,EAAW,IAAA,EAAM,WAAA,EAAW,IAAA,EAAM,gBAAA,EAAgB,MAAA,CAAO,SAAS,CAAA,EAAG,oBAAA,EAAoB,MAAA,CAAO,aAAa,CAAA,EAAG,KAAA,EAAO,CAAA,4BAAA,EAA+B,QAAQ,CAAA,wCAAA,EAA2C,YAAY,CAAA,EAAA,CAAA,EAAM,YAAA,EAAY,KAAA,EACxU,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,+BAAA,EAAiC,QAAA,EAAS,CAAA;AAAA,oBACrD,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,8BAAA,EAA+B,IAAA,EAAK,WAAA,EAAY,QAAA,EAAS,GAAA,EAAI,YAAA,EAAY,CAAA,OAAA,EAAU,KAAK,CAAA,CAAA,EAAI,kBAAA,EAAkB,WAAA,EAAa,eAAA,EAAe,SAAA,GAAY,CAAA,GAAI,GAAA,EAAK,eAAA,EAAe,GAAA,EAAK,eAAA,EAAe,QAAA,EAAU,wBAAA,EAAsB,IAAA,EAAC,gBAAA,EAAgB,EAAA,EAC5P,QAAA,kBAAA,GAAA,CAAC,UAAA,EAAA,EAAW,MAAY,CAAA,EAC1B;AAAA,GAAA,EACF,CAAA;AACF","file":"chunk-3O7ZEUW2.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport type ResizableRegionAxis = 'horizontal' | 'vertical';\nexport type ResizableRegionEdge = 'start' | 'end';\n\nexport interface ResizableRegionProps {\n  id: string;\n  label: string;\n  size: number;\n  min: number;\n  max: number;\n  axis?: ResizableRegionAxis;\n  edge?: ResizableRegionEdge;\n  collapsed?: boolean;\n  transitioning?: boolean;\n  children: SafeHtml | SafeHtml[];\n}\n\nexport const clampRegionSize = (size: number, min: number, max: number) => Math.min(max, Math.max(min, Math.round(size)));\nexport const resizeRegionFromPointer = (startSize: number, delta: number, edge: ResizableRegionEdge) => startSize + delta * (edge === 'start' ? -1 : 1);\n\nfunction ResizeGrip({ axis }: { axis: ResizableRegionAxis }) {\n  return <svg aria-hidden=\"true\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n    {axis === 'horizontal'\n      ? <><path d=\"M9 6v12\"></path><path d=\"M15 6v12\"></path></>\n      : <><path d=\"M6 9h12\"></path><path d=\"M6 15h12\"></path></>}\n  </svg>;\n}\n\nexport function ResizableRegion({ id, label, size, min, max, axis = 'horizontal', edge = 'end', collapsed = false, transitioning = false, children }: ResizableRegionProps) {\n  const expandedSize = clampRegionSize(size, min, max);\n  const resolved = collapsed ? 0 : expandedSize;\n  const orientation = axis === 'horizontal' ? 'vertical' : 'horizontal';\n  return <section class=\"kui-resizable-region\" data-component=\"resizable-region\" data-region-id={id} data-axis={axis} data-edge={edge} data-collapsed={String(collapsed)} data-transitioning={String(transitioning)} style={`--kui-resizable-region-size:${resolved}px;--kui-resizable-region-expanded-size:${expandedSize}px`} aria-label={label}>\n    <div class=\"kui-resizable-region__content\">{children}</div>\n    <div class=\"kui-resizable-region__handle\" role=\"separator\" tabindex=\"0\" aria-label={`Resize ${label}`} aria-orientation={orientation} aria-valuemin={collapsed ? 0 : min} aria-valuemax={max} aria-valuenow={resolved} data-kui-resize-handle data-region-id={id}>\n      <ResizeGrip axis={axis} />\n    </div>\n  </section>;\n}\n"]}

package/dist/chunk-4HHCYSGT.js

@@ -0,0 +1,79 @@
+import { resizeRegionFromPointer, clampRegionSize } from './chunk-3O7ZEUW2.js';
+import { delegate } from 'kerfjs';
+
+function regionState(handle) {
+  const region = handle.closest('[data-component="resizable-region"]');
+  if (!(region instanceof HTMLElement) || !(handle instanceof HTMLElement)) return void 0;
+  const id = region.dataset.regionId;
+  const axis = region.dataset.axis;
+  const edge = region.dataset.edge;
+  const min = Number(handle.getAttribute("aria-valuemin"));
+  const max = Number(handle.getAttribute("aria-valuemax"));
+  const size = Number(handle.getAttribute("aria-valuenow"));
+  if (!id || axis !== "horizontal" && axis !== "vertical" || edge !== "start" && edge !== "end" || !Number.isFinite(min) || !Number.isFinite(max) || !Number.isFinite(size)) return void 0;
+  return { region, handle, id, axis, edge, min, max, size };
+}
+function preview(state, size, onPreview) {
+  const next = clampRegionSize(size, state.min, state.max);
+  state.region.style.setProperty("--kui-resizable-region-size", `${next}px`);
+  state.handle.setAttribute("aria-valuenow", String(next));
+  onPreview?.({ id: state.id, size: next, source: "pointer" });
+  return next;
+}
+function wireResizableRegions(root, { step = 16, largeStep = 64, onPreview, onCommit }) {
+  let stopPointer;
+  const stopKeydown = delegate(root, "keydown", "[data-kui-resize-handle]", (event, handle) => {
+    const keyboardEvent = event;
+    const state = regionState(handle);
+    if (!state) return;
+    let next;
+    if (keyboardEvent.key === "Home") next = state.min;
+    if (keyboardEvent.key === "End") next = state.max;
+    const increment = keyboardEvent.shiftKey ? largeStep : step;
+    if (state.axis === "horizontal" && keyboardEvent.key === "ArrowLeft") next = resizeRegionFromPointer(state.size, -increment, state.edge);
+    if (state.axis === "horizontal" && keyboardEvent.key === "ArrowRight") next = resizeRegionFromPointer(state.size, increment, state.edge);
+    if (state.axis === "vertical" && keyboardEvent.key === "ArrowUp") next = resizeRegionFromPointer(state.size, -increment, state.edge);
+    if (state.axis === "vertical" && keyboardEvent.key === "ArrowDown") next = resizeRegionFromPointer(state.size, increment, state.edge);
+    if (next === void 0) return;
+    keyboardEvent.preventDefault();
+    const size = clampRegionSize(next, state.min, state.max);
+    state.region.style.setProperty("--kui-resizable-region-size", `${size}px`);
+    state.handle.setAttribute("aria-valuenow", String(size));
+    onCommit({ id: state.id, size, source: "keyboard" });
+  });
+  const stopPointerDown = delegate(root, "pointerdown", "[data-kui-resize-handle]", (event, handle) => {
+    const pointerEvent = event;
+    if (pointerEvent.button !== 0) return;
+    const state = regionState(handle);
+    if (!state) return;
+    pointerEvent.preventDefault();
+    state.handle.setPointerCapture?.(pointerEvent.pointerId);
+    const startCoordinate = state.axis === "horizontal" ? pointerEvent.clientX : pointerEvent.clientY;
+    let next = state.size;
+    const move = (moveEvent) => {
+      const coordinate = state.axis === "horizontal" ? moveEvent.clientX : moveEvent.clientY;
+      next = preview(state, resizeRegionFromPointer(state.size, coordinate - startCoordinate, state.edge), onPreview);
+    };
+    const finish = () => {
+      root.removeEventListener("pointermove", move);
+      root.removeEventListener("pointerup", finish);
+      root.removeEventListener("pointercancel", finish);
+      stopPointer = void 0;
+      onCommit({ id: state.id, size: next, source: "pointer" });
+    };
+    stopPointer?.();
+    stopPointer = finish;
+    root.addEventListener("pointermove", move);
+    root.addEventListener("pointerup", finish, { once: true });
+    root.addEventListener("pointercancel", finish, { once: true });
+  });
+  return () => {
+    stopPointer?.();
+    stopKeydown();
+    stopPointerDown();
+  };
+}
+
+export { wireResizableRegions };
+
+//# sourceMappingURL=chunk-4HHCYSGT.js.map

package/dist/chunk-4HHCYSGT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/wire-resizable-regions.ts"],"names":[],"mappings":"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","file":"chunk-4HHCYSGT.js","sourcesContent":["import { delegate } from 'kerfjs';\n\nimport { clampRegionSize, type ResizableRegionAxis, type ResizableRegionEdge, resizeRegionFromPointer } from './resizable-region.js';\n\nexport interface ResizeCommit {\n  id: string;\n  size: number;\n  source: 'keyboard' | 'pointer';\n}\n\nexport interface WireResizableRegionsOptions {\n  step?: number;\n  largeStep?: number;\n  onPreview?: (change: ResizeCommit) => void;\n  onCommit: (change: ResizeCommit) => void;\n}\n\ninterface RegionState {\n  region: HTMLElement;\n  handle: HTMLElement;\n  id: string;\n  axis: ResizableRegionAxis;\n  edge: ResizableRegionEdge;\n  min: number;\n  max: number;\n  size: number;\n}\n\nfunction regionState(handle: Element): RegionState | undefined {\n  const region = handle.closest<HTMLElement>('[data-component=\"resizable-region\"]');\n  if (!(region instanceof HTMLElement) || !(handle instanceof HTMLElement)) return undefined;\n  const id = region.dataset.regionId;\n  const axis = region.dataset.axis;\n  const edge = region.dataset.edge;\n  const min = Number(handle.getAttribute('aria-valuemin'));\n  const max = Number(handle.getAttribute('aria-valuemax'));\n  const size = Number(handle.getAttribute('aria-valuenow'));\n  if (!id || (axis !== 'horizontal' && axis !== 'vertical') || (edge !== 'start' && edge !== 'end') || !Number.isFinite(min) || !Number.isFinite(max) || !Number.isFinite(size)) return undefined;\n  return { region, handle, id, axis, edge, min, max, size };\n}\n\nfunction preview(state: RegionState, size: number, onPreview?: (change: ResizeCommit) => void) {\n  const next = clampRegionSize(size, state.min, state.max);\n  state.region.style.setProperty('--kui-resizable-region-size', `${next}px`);\n  state.handle.setAttribute('aria-valuenow', String(next));\n  onPreview?.({ id: state.id, size: next, source: 'pointer' });\n  return next;\n}\n\n/** Wire pointer and separator-keyboard behavior for every ResizableRegion below root. */\nexport function wireResizableRegions(root: HTMLElement, { step = 16, largeStep = 64, onPreview, onCommit }: WireResizableRegionsOptions) {\n  let stopPointer: (() => void) | undefined;\n\n  const stopKeydown = delegate(root, 'keydown', '[data-kui-resize-handle]', (event, handle) => {\n    const keyboardEvent = event as KeyboardEvent;\n    const state = regionState(handle);\n    if (!state) return;\n    let next: number | undefined;\n    if (keyboardEvent.key === 'Home') next = state.min;\n    if (keyboardEvent.key === 'End') next = state.max;\n    const increment = keyboardEvent.shiftKey ? largeStep : step;\n    if (state.axis === 'horizontal' && keyboardEvent.key === 'ArrowLeft') next = resizeRegionFromPointer(state.size, -increment, state.edge);\n    if (state.axis === 'horizontal' && keyboardEvent.key === 'ArrowRight') next = resizeRegionFromPointer(state.size, increment, state.edge);\n    if (state.axis === 'vertical' && keyboardEvent.key === 'ArrowUp') next = resizeRegionFromPointer(state.size, -increment, state.edge);\n    if (state.axis === 'vertical' && keyboardEvent.key === 'ArrowDown') next = resizeRegionFromPointer(state.size, increment, state.edge);\n    if (next === undefined) return;\n    keyboardEvent.preventDefault();\n    const size = clampRegionSize(next, state.min, state.max);\n    state.region.style.setProperty('--kui-resizable-region-size', `${size}px`);\n    state.handle.setAttribute('aria-valuenow', String(size));\n    onCommit({ id: state.id, size, source: 'keyboard' });\n  });\n\n  const stopPointerDown = delegate(root, 'pointerdown', '[data-kui-resize-handle]', (event, handle) => {\n    const pointerEvent = event as PointerEvent;\n    if (pointerEvent.button !== 0) return;\n    const state = regionState(handle);\n    if (!state) return;\n    pointerEvent.preventDefault();\n    state.handle.setPointerCapture?.(pointerEvent.pointerId);\n    const startCoordinate = state.axis === 'horizontal' ? pointerEvent.clientX : pointerEvent.clientY;\n    let next = state.size;\n    const move = (moveEvent: PointerEvent) => {\n      const coordinate = state.axis === 'horizontal' ? moveEvent.clientX : moveEvent.clientY;\n      next = preview(state, resizeRegionFromPointer(state.size, coordinate - startCoordinate, state.edge), onPreview);\n    };\n    const finish = () => {\n      root.removeEventListener('pointermove', move);\n      root.removeEventListener('pointerup', finish);\n      root.removeEventListener('pointercancel', finish);\n      stopPointer = undefined;\n      onCommit({ id: state.id, size: next, source: 'pointer' });\n    };\n    stopPointer?.();\n    stopPointer = finish;\n    root.addEventListener('pointermove', move);\n    root.addEventListener('pointerup', finish, { once: true });\n    root.addEventListener('pointercancel', finish, { once: true });\n  });\n\n  return () => {\n    stopPointer?.();\n    stopKeydown();\n    stopPointerDown();\n  };\n}\n"]}

package/dist/chunk-55DATV3A.js

@@ -0,0 +1,10 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/loading-spinner.tsx
+function LoadingSpinner({ className = "", label }) {
+  return /* @__PURE__ */ jsx("svg", { class: `kui-loading-spinner ${className}`.trim(), "data-component": "loading-spinner", viewBox: "0 0 24 24", role: label ? "img" : void 0, "aria-label": label, "aria-hidden": label ? void 0 : "true", children: /* @__PURE__ */ jsx("path", { d: "M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" }) });
+}
+
+export { LoadingSpinner };
+
+//# sourceMappingURL=chunk-55DATV3A.js.map

package/dist/chunk-55DATV3A.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/loading-spinner.tsx"],"names":[],"mappings":";;;AAMO,SAAS,cAAA,CAAe,EAAE,SAAA,GAAY,EAAA,EAAI,OAAM,EAAwB;AAC7E,EAAA,uBAAO,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,CAAA,oBAAA,EAAuB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,iBAAA,EAAkB,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAM,QAAQ,KAAA,GAAQ,MAAA,EAAW,YAAA,EAAY,KAAA,EAAO,aAAA,EAAa,KAAA,GAAQ,MAAA,GAAY,MAAA,EAAQ,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,kKAAA,EAAmK,CAAA,EAAO,CAAA;AACpY","file":"chunk-55DATV3A.js","sourcesContent":["export interface LoadingSpinnerProps {\n  className?: string;\n  label?: string;\n}\n\n/** Stable viewBox-centered progress ring based on svg-spinners' MIT-licensed 180-ring. */\nexport function LoadingSpinner({ className = '', label }: LoadingSpinnerProps) {\n  return <svg class={`kui-loading-spinner ${className}`.trim()} data-component=\"loading-spinner\" viewBox=\"0 0 24 24\" role={label ? 'img' : undefined} aria-label={label} aria-hidden={label ? undefined : 'true'}><path d=\"M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z\"></path></svg>;\n}\n"]}

package/dist/chunk-723YNJBH.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/dialog-header.tsx
+function DialogHeader({ title, titleId, summary, summaryId, icon, iconClassName = "", actions }) {
+  return /* @__PURE__ */ jsxs("header", { class: "kui-dialog-header", "data-component": "dialog-header", "data-has-icon": String(Boolean(icon)), children: [
+    icon && /* @__PURE__ */ jsx("span", { class: `kui-dialog-header__icon ${iconClassName}`.trim(), children: icon }),
+    /* @__PURE__ */ jsxs("div", { class: "kui-dialog-header__copy", children: [
+      /* @__PURE__ */ jsx("h2", { id: titleId, children: title }),
+      /* @__PURE__ */ jsx("p", { id: summaryId, children: summary })
+    ] }),
+    actions && /* @__PURE__ */ jsx("div", { class: "kui-dialog-header__actions", children: actions })
+  ] });
+}
+
+export { DialogHeader };
+
+//# sourceMappingURL=chunk-723YNJBH.js.map

package/dist/chunk-723YNJBH.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dialog-header.tsx"],"names":[],"mappings":";;;AAYO,SAAS,YAAA,CAAa,EAAE,KAAA,EAAO,OAAA,EAAS,OAAA,EAAS,WAAW,IAAA,EAAM,aAAA,GAAgB,EAAA,EAAI,OAAA,EAAQ,EAAsB;AACzH,EAAA,uBAAO,IAAA,CAAC,QAAA,EAAA,EAAO,KAAA,EAAM,mBAAA,EAAoB,gBAAA,EAAe,eAAA,EAAgB,eAAA,EAAe,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAC,CAAA,EACxG,QAAA,EAAA;AAAA,IAAA,IAAA,oBAAQ,GAAA,CAAC,UAAK,KAAA,EAAO,CAAA,wBAAA,EAA2B,aAAa,CAAA,CAAA,CAAG,IAAA,IAAS,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,oBAC/E,IAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,yBAAA,EAA0B,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,EAAA,EAAI,OAAA,EAAU,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,sBAAK,GAAA,CAAC,GAAA,EAAA,EAAE,EAAA,EAAI,SAAA,EAAY,QAAA,EAAA,OAAA,EAAQ;AAAA,KAAA,EAAI,CAAA;AAAA,IAChG,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,8BAA8B,QAAA,EAAA,OAAA,EAAQ;AAAA,GAAA,EAC/D,CAAA;AACF","file":"chunk-723YNJBH.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface DialogHeaderProps {\n  title: string;\n  titleId: string;\n  summary: string;\n  summaryId?: string;\n  icon?: SafeHtml;\n  iconClassName?: string;\n  actions?: SafeHtml;\n}\n\nexport function DialogHeader({ title, titleId, summary, summaryId, icon, iconClassName = '', actions }: DialogHeaderProps) {\n  return <header class=\"kui-dialog-header\" data-component=\"dialog-header\" data-has-icon={String(Boolean(icon))}>\n    {icon && <span class={`kui-dialog-header__icon ${iconClassName}`.trim()}>{icon}</span>}\n    <div class=\"kui-dialog-header__copy\"><h2 id={titleId}>{title}</h2><p id={summaryId}>{summary}</p></div>\n    {actions && <div class=\"kui-dialog-header__actions\">{actions}</div>}\n  </header>;\n}\n"]}

package/dist/chunk-DAFFDO33.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/toolbar.tsx
+function Toolbar({ leading, center, trailing, label, divider = true, className = "" }) {
+  return /* @__PURE__ */ jsxs("header", { class: `kui-toolbar ${className}`.trim(), "data-component": "toolbar", "data-divider": String(divider), "data-has-center": String(Boolean(center)), "aria-label": label, children: [
+    /* @__PURE__ */ jsx("div", { class: "kui-toolbar__leading", children: leading }),
+    /* @__PURE__ */ jsx("div", { class: "kui-toolbar__center", children: center }),
+    /* @__PURE__ */ jsx("div", { class: "kui-toolbar__trailing", children: trailing })
+  ] });
+}
+
+export { Toolbar };
+
+//# sourceMappingURL=chunk-DAFFDO33.js.map

package/dist/chunk-DAFFDO33.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toolbar.tsx"],"names":[],"mappings":";;;AAWO,SAAS,OAAA,CAAQ,EAAE,OAAA,EAAS,MAAA,EAAQ,QAAA,EAAU,OAAO,OAAA,GAAU,IAAA,EAAM,SAAA,GAAY,EAAA,EAAG,EAAiB;AAC1G,EAAA,uBAAO,IAAA,CAAC,YAAO,KAAA,EAAO,CAAA,YAAA,EAAe,SAAS,CAAA,CAAA,CAAG,IAAA,IAAQ,gBAAA,EAAe,SAAA,EAAU,gBAAc,MAAA,CAAO,OAAO,GAAG,iBAAA,EAAiB,MAAA,CAAO,QAAQ,MAAM,CAAC,CAAA,EAAG,YAAA,EAAY,KAAA,EACrK,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,sBAAA,EAAwB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,oBAC3C,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,qBAAA,EAAuB,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,oBACzC,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,uBAAA,EAAyB,QAAA,EAAA,QAAA,EAAS;AAAA,GAAA,EAC/C,CAAA;AACF","file":"chunk-DAFFDO33.js","sourcesContent":["import type { SafeHtml } from 'kerfjs';\n\nexport interface ToolbarProps {\n  leading?: SafeHtml;\n  center?: SafeHtml;\n  trailing?: SafeHtml;\n  label?: string;\n  divider?: boolean;\n  className?: string;\n}\n\nexport function Toolbar({ leading, center, trailing, label, divider = true, className = '' }: ToolbarProps) {\n  return <header class={`kui-toolbar ${className}`.trim()} data-component=\"toolbar\" data-divider={String(divider)} data-has-center={String(Boolean(center))} aria-label={label}>\n    <div class=\"kui-toolbar__leading\">{leading}</div>\n    <div class=\"kui-toolbar__center\">{center}</div>\n    <div class=\"kui-toolbar__trailing\">{trailing}</div>\n  </header>;\n}\n"]}

package/dist/chunk-GY5WH7TO.js

@@ -0,0 +1,10 @@
+import { jsx } from 'kerfjs/jsx-runtime';
+
+// src/toolbar-text.tsx
+function ToolbarText({ text, size = "default", className = "" }) {
+  return /* @__PURE__ */ jsx("span", { class: `kui-toolbar-text ${className}`.trim(), "data-component": "toolbar-text", "data-size": size, children: text });
+}
+
+export { ToolbarText };
+
+//# sourceMappingURL=chunk-GY5WH7TO.js.map

package/dist/chunk-GY5WH7TO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/toolbar-text.tsx"],"names":[],"mappings":";;;AAQO,SAAS,YAAY,EAAE,IAAA,EAAM,OAAO,SAAA,EAAW,SAAA,GAAY,IAAG,EAAqB;AACxF,EAAA,uBAAO,GAAA,CAAC,MAAA,EAAA,EAAK,KAAA,EAAO,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK,EAAG,gBAAA,EAAe,cAAA,EAAe,WAAA,EAAW,IAAA,EAAO,QAAA,EAAA,IAAA,EAAK,CAAA;AACnH","file":"chunk-GY5WH7TO.js","sourcesContent":["export type ToolbarTextSize = 'large' | 'default' | 'small';\n\nexport interface ToolbarTextProps {\n  text: string;\n  size?: ToolbarTextSize;\n  className?: string;\n}\n\nexport function ToolbarText({ text, size = 'default', className = '' }: ToolbarTextProps) {\n  return <span class={`kui-toolbar-text ${className}`.trim()} data-component=\"toolbar-text\" data-size={size}>{text}</span>;\n}\n"]}

package/dist/chunk-MBR3TYNL.js

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'kerfjs/jsx-runtime';
+
+// src/tab-bar.tsx
+function TabBar({ id, label, children, leading, trailing, className = "" }) {
+  return /* @__PURE__ */ jsxs("nav", { class: `kui-tab-bar ${className}`.trim(), "data-component": "tab-bar", "data-tab-bar-id": id, "aria-label": label, children: [
+    leading && /* @__PURE__ */ jsx("div", { class: "kui-tab-bar__leading", children: leading }),
+    /* @__PURE__ */ jsx("div", { class: "kui-tab-bar__tabs", role: "tablist", "aria-label": label, "data-kui-tab-list": true, children }),
+    trailing && /* @__PURE__ */ jsx("div", { class: "kui-tab-bar__trailing", children: trailing })
+  ] });
+}
+
+export { TabBar };
+
+//# sourceMappingURL=chunk-MBR3TYNL.js.map