@funstack/ui 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/toggle-group/toggle-group-item.mjs

@@ -1,7 +1,7 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { rendersButton } from "../internal/render-element.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { isHostButton, rendersButton } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
 import { useToggleGroupContext } from "./toggle-group-context.mjs";
 import { useCallback } from "react";
@@ -12,7 +12,7 @@ import { useCallback } from "react";
 * by the roving engine (the group's, or the enclosing Toolbar's).
 *
 * Owned keys (conventions 1.2): `type` (on a `<button>` only), `aria-pressed`, `disabled`,
-* `data-pressed`, `data-pending`, `data-disabled`, `data-orientation`, `onClick`, and
+* `aria-disabled` (link or component `render`), `data-pressed`, `data-pending`, `data-disabled`, `data-orientation`, `onClick`, and
 * `focusgroupstart` while the Root renders `focusgroup`.
 */
 function ToggleGroupItem({ value, disabled: disabledProp = false, transition, className, style, children, render, ...rest }) {
@@ -22,6 +22,7 @@ function ToggleGroupItem({ value, disabled: disabledProp = false, transition, cl
 	const disabled = ctx.disabled || disabledProp;
 	const { register } = ctx;
 	const registerRef = useCallback((el) => register(el, value), [register, value]);
+	const focusable = !isHostButton(render);
 	const state = {
 		pressed,
 		pending,
@@ -40,7 +41,8 @@ function ToggleGroupItem({ value, disabled: disabledProp = false, transition, cl
 			type: "button"
 		} : rest,
 		libraryProps: {
-			disabled,
+			disabled: focusable ? void 0 : disabled,
+			...focusable && { "aria-disabled": disabled ? true : void 0 },
 			"aria-pressed": pressed,
 			"data-pressed": dataAttr(pressed),
 			"data-pending": dataAttr(pending),
@@ -48,7 +50,10 @@ function ToggleGroupItem({ value, disabled: disabledProp = false, transition, cl
 			"data-orientation": ctx.orientation,
 			...ctx.focusgroupStartValue !== null && { focusgroupstart: ctx.focusgroupStartValue === value ? "" : void 0 },
 			onClick: (event) => {
-				if (disabled) return;
+				if (disabled) {
+					event.preventDefault();
+					return;
+				}
 				ctx.toggle(value, event.nativeEvent);
 			}
 		},

package/dist/toggle-group/toggle-group-item.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group-item.mjs","names":[],"sources":["../../src/toggle-group/toggle-group-item.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback } from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  MouseEvent,\n  ReactNode,\n  ViewTransitionClass,\n} from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\nimport { useToggleGroupContext } from \"./toggle-group-context.js\";\nimport type { ToggleGroupOrientation } from \"./toggle-group-context.js\";\n\nexport interface ToggleGroupItemState {\n  /** Optimistic pressed state. */\n  readonly pressed: boolean;\n  /** The group's action is in flight and this Item's optimistic state differs from its committed one. */\n  readonly pending: boolean;\n  /** Own `disabled` or the Root's. */\n  readonly disabled: boolean;\n  readonly orientation: ToggleGroupOrientation;\n}\n\nexport interface ToggleGroupItemProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"type\" | \"value\" | \"tabIndex\" | \"aria-pressed\" | \"className\" | \"style\" | \"children\"\n> {\n  /** The value this Item presses. Unique within the group. */\n  value: string;\n  /** Renders a native disabled button; never dispatches; skipped by arrow keys. */\n  disabled?: boolean;\n  /**\n   * Forwarded as `default` to the Item's `<ViewTransition>`. As on Toggle: animates the commit\n   * that ends the group's action (and rollbacks), not the optimistic flip, which is a CSS\n   * `transition` on `[data-pressed]`. Static; any value makes a mount inside a transition start a\n   * document view transition (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, ToggleGroupItemState>;\n  style?: StateValue<CSSProperties | undefined, ToggleGroupItemState>;\n  /** Rendered from optimistic state; must not suspend. */\n  children?: StateValue<ReactNode, ToggleGroupItemState>;\n  /** Must be, or render, a `<button>` (a toggle is a button). */\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, ToggleGroupItemState>;\n}\n\n/**\n * One toggle of a ToggleGroup: the `Toggle` element (`<button type=\"button\" aria-pressed>`) whose\n * pressed state is the Root's (design/components/toggle-group.md 16.3). Its `tabindex` is written\n * by the roving engine (the group's, or the enclosing Toolbar's).\n *\n * Owned keys (conventions 1.2): `type` (on a `<button>` only), `aria-pressed`, `disabled`,\n * `data-pressed`, `data-pending`, `data-disabled`, `data-orientation`, `onClick`, and\n * `focusgroupstart` while the Root renders `focusgroup`.\n */\nexport function ToggleGroupItem({\n  value,\n  disabled: disabledProp = false,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ToggleGroupItemProps) {\n  const ctx = useToggleGroupContext(\"ToggleGroup.Item\");\n  const pressed = ctx.optimistic.has(value);\n  const pending = ctx.pending && pressed !== ctx.committed.has(value);\n  const disabled = ctx.disabled || disabledProp;\n  const { register } = ctx;\n  const registerRef = useCallback((el: HTMLElement) => register(el, value), [register, value]);\n\n  const state: ToggleGroupItemState = {\n    pressed,\n    pending,\n    disabled,\n    orientation: ctx.orientation,\n  };\n\n  const element = useRender<ComponentPropsWithRef<\"button\">, ToggleGroupItemState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    // Pass-through layer, as Toggle: a `render` element's own `type` wins.\n    props: rendersButton(render) ? { ...rest, type: \"button\" } : rest,\n    libraryProps: {\n      disabled,\n      \"aria-pressed\": pressed,\n      \"data-pressed\": dataAttr(pressed),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-orientation\": ctx.orientation,\n      ...(ctx.focusgroupStartValue !== null && {\n        focusgroupstart: ctx.focusgroupStartValue === value ? \"\" : undefined,\n      }),\n      onClick: (event: MouseEvent<HTMLButtonElement>) => {\n        // Native buttons do not fire `click` when disabled; the guard covers `render` elements.\n        if (disabled) return;\n        ctx.toggle(value, event.nativeEvent);\n      },\n    },\n    ref: registerRef,\n  });\n\n  return useTransitionBoundary(\"ToggleGroup.Item\", transition, element);\n}\n\nToggleGroupItem.displayName = \"ToggleGroupItem\";\n"],"mappings":";;;;;;;;;;;;;;;;;AA0DA,SAAgB,gBAAgB,EAC9B,OACA,UAAU,eAAe,OACzB,YACA,WACA,OACA,UACA,QACA,GAAG,QACoB;CACvB,MAAM,MAAM,sBAAsB,kBAAkB;CACpD,MAAM,UAAU,IAAI,WAAW,IAAI,KAAK;CACxC,MAAM,UAAU,IAAI,WAAW,YAAY,IAAI,UAAU,IAAI,KAAK;CAClE,MAAM,WAAW,IAAI,YAAY;CACjC,MAAM,EAAE,aAAa;CACrB,MAAM,cAAc,aAAa,OAAoB,SAAS,IAAI,KAAK,GAAG,CAAC,UAAU,KAAK,CAAC;CAE3F,MAAM,QAA8B;EAClC;EACA;EACA;EACA,aAAa,IAAI;CACnB;CAEA,MAAM,UAAU,UAAiE;EAC/E,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EAEA,OAAO,cAAc,MAAM,IAAI;GAAE,GAAG;GAAM,MAAM;EAAS,IAAI;EAC7D,cAAc;GACZ;GACA,gBAAgB;GAChB,gBAAgB,SAAS,OAAO;GAChC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,oBAAoB,IAAI;GACxB,GAAI,IAAI,yBAAyB,QAAQ,EACvC,iBAAiB,IAAI,yBAAyB,QAAQ,KAAK,KAAA,EAC7D;GACA,UAAU,UAAyC;IAEjD,IAAI,UAAU;IACd,IAAI,OAAO,OAAO,MAAM,WAAW;GACrC;EACF;EACA,KAAK;CACP,CAAC;CAED,OAAO,sBAAsB,oBAAoB,YAAY,OAAO;AACtE;AAEA,gBAAgB,cAAc"}
+{"version":3,"file":"toggle-group-item.mjs","names":[],"sources":["../../src/toggle-group/toggle-group-item.tsx"],"sourcesContent":["\"use client\";\nimport { useCallback } from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  MouseEvent,\n  ReactNode,\n  ViewTransitionClass,\n} from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { isHostButton, rendersButton, useRender } from \"../internal/use-render.js\";\nimport { useToggleGroupContext } from \"./toggle-group-context.js\";\nimport type { ToggleGroupOrientation } from \"./toggle-group-context.js\";\n\nexport interface ToggleGroupItemState {\n  /** Optimistic pressed state. */\n  readonly pressed: boolean;\n  /** The group's action is in flight and this Item's optimistic state differs from its committed one. */\n  readonly pending: boolean;\n  /** Own `disabled` or the Root's. */\n  readonly disabled: boolean;\n  readonly orientation: ToggleGroupOrientation;\n}\n\nexport interface ToggleGroupItemProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"type\" | \"value\" | \"tabIndex\" | \"aria-pressed\" | \"className\" | \"style\" | \"children\"\n> {\n  /** The value this Item presses. Unique within the group. */\n  value: string;\n  /**\n   * Never dispatches. Native `disabled` on a `<button>` (skipped by the arrow keys); with a link\n   * or component `render`, `aria-disabled=\"true\"` instead: the element stays focusable and the\n   * arrow keys reach it (the APG Toolbar behaviour).\n   */\n  disabled?: boolean;\n  /**\n   * Forwarded as `default` to the Item's `<ViewTransition>`. As on Toggle: animates the commit\n   * that ends the group's action (and rollbacks), not the optimistic flip, which is a CSS\n   * `transition` on `[data-pressed]`. Static; any value makes a mount inside a transition start a\n   * document view transition (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, ToggleGroupItemState>;\n  style?: StateValue<CSSProperties | undefined, ToggleGroupItemState>;\n  /** Rendered from optimistic state; must not suspend. */\n  children?: StateValue<ReactNode, ToggleGroupItemState>;\n  /** Must be, or render, a `<button>` (a toggle is a button). */\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, ToggleGroupItemState>;\n}\n\n/**\n * One toggle of a ToggleGroup: the `Toggle` element (`<button type=\"button\" aria-pressed>`) whose\n * pressed state is the Root's (design/components/toggle-group.md 16.3). Its `tabindex` is written\n * by the roving engine (the group's, or the enclosing Toolbar's).\n *\n * Owned keys (conventions 1.2): `type` (on a `<button>` only), `aria-pressed`, `disabled`,\n * `aria-disabled` (link or component `render`), `data-pressed`, `data-pending`, `data-disabled`, `data-orientation`, `onClick`, and\n * `focusgroupstart` while the Root renders `focusgroup`.\n */\nexport function ToggleGroupItem({\n  value,\n  disabled: disabledProp = false,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ToggleGroupItemProps) {\n  const ctx = useToggleGroupContext(\"ToggleGroup.Item\");\n  const pressed = ctx.optimistic.has(value);\n  const pending = ctx.pending && pressed !== ctx.committed.has(value);\n  const disabled = ctx.disabled || disabledProp;\n  const { register } = ctx;\n  const registerRef = useCallback((el: HTMLElement) => register(el, value), [register, value]);\n\n  // Not a host <button> (a link, a component): `aria-disabled`, enforced by the click handler\n  // (#83). The roving engine skips `:disabled` only, so such an Item is reached by the arrows.\n  const focusable = !isHostButton(render);\n\n  const state: ToggleGroupItemState = {\n    pressed,\n    pending,\n    disabled,\n    orientation: ctx.orientation,\n  };\n\n  const element = useRender<ComponentPropsWithRef<\"button\">, ToggleGroupItemState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    // Pass-through layer, as Toggle: a `render` element's own `type` wins.\n    props: rendersButton(render) ? { ...rest, type: \"button\" } : rest,\n    libraryProps: {\n      disabled: focusable ? undefined : disabled,\n      // Owned only in the focusable branch: a host button keeps a consumer's own.\n      ...(focusable && { \"aria-disabled\": disabled ? true : undefined }),\n      \"aria-pressed\": pressed,\n      \"data-pressed\": dataAttr(pressed),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      \"data-orientation\": ctx.orientation,\n      ...(ctx.focusgroupStartValue !== null && {\n        focusgroupstart: ctx.focusgroupStartValue === value ? \"\" : undefined,\n      }),\n      onClick: (event: MouseEvent<HTMLButtonElement>) => {\n        // Native buttons do not fire `click` when disabled; the guard covers `render` elements\n        // (a link must not navigate either).\n        if (disabled) {\n          event.preventDefault();\n          return;\n        }\n        ctx.toggle(value, event.nativeEvent);\n      },\n    },\n    ref: registerRef,\n  });\n\n  return useTransitionBoundary(\"ToggleGroup.Item\", transition, element);\n}\n\nToggleGroupItem.displayName = \"ToggleGroupItem\";\n"],"mappings":";;;;;;;;;;;;;;;;;AA8DA,SAAgB,gBAAgB,EAC9B,OACA,UAAU,eAAe,OACzB,YACA,WACA,OACA,UACA,QACA,GAAG,QACoB;CACvB,MAAM,MAAM,sBAAsB,kBAAkB;CACpD,MAAM,UAAU,IAAI,WAAW,IAAI,KAAK;CACxC,MAAM,UAAU,IAAI,WAAW,YAAY,IAAI,UAAU,IAAI,KAAK;CAClE,MAAM,WAAW,IAAI,YAAY;CACjC,MAAM,EAAE,aAAa;CACrB,MAAM,cAAc,aAAa,OAAoB,SAAS,IAAI,KAAK,GAAG,CAAC,UAAU,KAAK,CAAC;CAI3F,MAAM,YAAY,CAAC,aAAa,MAAM;CAEtC,MAAM,QAA8B;EAClC;EACA;EACA;EACA,aAAa,IAAI;CACnB;CAEA,MAAM,UAAU,UAAiE;EAC/E,gBAAgB;EAChB;EACA;EACA;EACA;EACA;EAEA,OAAO,cAAc,MAAM,IAAI;GAAE,GAAG;GAAM,MAAM;EAAS,IAAI;EAC7D,cAAc;GACZ,UAAU,YAAY,KAAA,IAAY;GAElC,GAAI,aAAa,EAAE,iBAAiB,WAAW,OAAO,KAAA,EAAU;GAChE,gBAAgB;GAChB,gBAAgB,SAAS,OAAO;GAChC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,oBAAoB,IAAI;GACxB,GAAI,IAAI,yBAAyB,QAAQ,EACvC,iBAAiB,IAAI,yBAAyB,QAAQ,KAAK,KAAA,EAC7D;GACA,UAAU,UAAyC;IAGjD,IAAI,UAAU;KACZ,MAAM,eAAe;KACrB;IACF;IACA,IAAI,OAAO,OAAO,MAAM,WAAW;GACrC;EACF;EACA,KAAK;CACP,CAAC;CAED,OAAO,sBAAsB,oBAAoB,YAAY,OAAO;AACtE;AAEA,gBAAgB,cAAc"}

package/dist/toggle-group/toggle-group-root.mjs

@@ -1,13 +1,13 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useToolbarContext } from "../internal/toolbar-context.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useLatest } from "../internal/use-latest.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
-import { useRender } from "../internal/use-render.mjs";
 import { ToggleGroupContext } from "./toggle-group-context.mjs";
-import { useToolbarContext } from "../internal/toolbar-context.mjs";
-import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { useRovingFocus } from "../internal/use-roving-focus.mjs";
 import { useCallback, useEffectEvent, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/toolbar/index.d.mts

@@ -1,18 +1,17 @@
 import "../internal/platform-attributes.mjs";
-import { ToolbarButton, ToolbarButtonActionDetails, ToolbarButtonProps, ToolbarButtonState } from "./toolbar-button.mjs";
 import { ToolbarOrientation, ToolbarRoot, ToolbarRootProps, ToolbarRootState } from "./toolbar-root.mjs";
 import { ToolbarSeparator, ToolbarSeparatorProps, ToolbarSeparatorState } from "./toolbar-separator.mjs";
 //#region src/toolbar/index.d.ts
 /**
  * Toolbar (WAI-ARIA APG Toolbar pattern): `Root` (div role="toolbar") with one Tab stop and
- * arrow keys over its focusable descendants, `Button` (an action button, focusable when
- * disabled) and `Separator` (hr). Any focusable element is an item: no wrapper parts.
+ * arrow keys over its focusable descendants, and `Separator` (hr). Any focusable element is an
+ * item: no wrapper parts. A command button is `Button` from `@funstack/ui/button`, which stays
+ * focusable when disabled inside a Toolbar (design/components/button.md 7.3).
  */
 export declare const Toolbar: {
   readonly Root: typeof ToolbarRoot;
-  readonly Button: typeof ToolbarButton;
   readonly Separator: typeof ToolbarSeparator;
 };
 //#endregion
-export type { ToolbarButtonActionDetails, ToolbarButtonProps, ToolbarButtonState, ToolbarOrientation, ToolbarRootProps, ToolbarRootState, ToolbarSeparatorProps, ToolbarSeparatorState };
+export type { ToolbarOrientation, ToolbarRootProps, ToolbarRootState, ToolbarSeparatorProps, ToolbarSeparatorState };
 //# sourceMappingURL=index.d.mts.map

package/dist/toolbar/index.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/toolbar/index.ts"],"mappings":";;;;;;;;;;qBAWa;WACX,aAAI;WACJ,eAAM;WACN,kBAAS"}
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/toolbar/index.ts"],"mappings":";;;;;;;;;;qBAWa;WACX,aAAI;WACJ,kBAAS"}

package/dist/toolbar/index.mjs

@@ -1,15 +1,14 @@
-import { ToolbarButton } from "./toolbar-button.mjs";
 import { ToolbarRoot } from "./toolbar-root.mjs";
 import { ToolbarSeparator } from "./toolbar-separator.mjs";
 //#region src/toolbar/index.ts
 /**
 * Toolbar (WAI-ARIA APG Toolbar pattern): `Root` (div role="toolbar") with one Tab stop and
-* arrow keys over its focusable descendants, `Button` (an action button, focusable when
-* disabled) and `Separator` (hr). Any focusable element is an item: no wrapper parts.
+* arrow keys over its focusable descendants, and `Separator` (hr). Any focusable element is an
+* item: no wrapper parts. A command button is `Button` from `@funstack/ui/button`, which stays
+* focusable when disabled inside a Toolbar (design/components/button.md 7.3).
 */
 const Toolbar = {
 	Root: ToolbarRoot,
-	Button: ToolbarButton,
 	Separator: ToolbarSeparator
 };
 //#endregion

package/dist/toolbar/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../src/toolbar/index.ts"],"sourcesContent":["// Ships the platform attribute typings with this subpath (conventions 7.4). Type-only.\nimport \"../internal/platform-attributes.js\";\nimport { ToolbarButton } from \"./toolbar-button.js\";\nimport { ToolbarRoot } from \"./toolbar-root.js\";\nimport { ToolbarSeparator } from \"./toolbar-separator.js\";\n\n/**\n * Toolbar (WAI-ARIA APG Toolbar pattern): `Root` (div role=\"toolbar\") with one Tab stop and\n * arrow keys over its focusable descendants, `Button` (an action button, focusable when\n * disabled) and `Separator` (hr). Any focusable element is an item: no wrapper parts.\n */\nexport const Toolbar = {\n  Root: ToolbarRoot,\n  Button: ToolbarButton,\n  Separator: ToolbarSeparator,\n} as const;\n\nexport type { ToolbarRootProps, ToolbarRootState, ToolbarOrientation } from \"./toolbar-root.js\";\nexport type {\n  ToolbarButtonProps,\n  ToolbarButtonState,\n  ToolbarButtonActionDetails,\n} from \"./toolbar-button.js\";\nexport type { ToolbarSeparatorProps, ToolbarSeparatorState } from \"./toolbar-separator.js\";\n"],"mappings":";;;;;;;;;AAWA,MAAa,UAAU;CACrB,MAAM;CACN,QAAQ;CACR,WAAW;AACb"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/toolbar/index.ts"],"sourcesContent":["// Ships the platform attribute typings with this subpath (conventions 7.4). Type-only.\nimport \"../internal/platform-attributes.js\";\nimport { ToolbarRoot } from \"./toolbar-root.js\";\nimport { ToolbarSeparator } from \"./toolbar-separator.js\";\n\n/**\n * Toolbar (WAI-ARIA APG Toolbar pattern): `Root` (div role=\"toolbar\") with one Tab stop and\n * arrow keys over its focusable descendants, and `Separator` (hr). Any focusable element is an\n * item: no wrapper parts. A command button is `Button` from `@funstack/ui/button`, which stays\n * focusable when disabled inside a Toolbar (design/components/button.md 7.3).\n */\nexport const Toolbar = {\n  Root: ToolbarRoot,\n  Separator: ToolbarSeparator,\n} as const;\n\nexport type { ToolbarRootProps, ToolbarRootState, ToolbarOrientation } from \"./toolbar-root.js\";\nexport type { ToolbarSeparatorProps, ToolbarSeparatorState } from \"./toolbar-separator.js\";\n"],"mappings":";;;;;;;;;AAWA,MAAa,UAAU;CACrB,MAAM;CACN,WAAW;AACb"}

package/dist/toolbar/toolbar-root.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useRender } from "../internal/use-render.mjs";
 import { ToolbarContext } from "../internal/toolbar-context.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { useRovingFocus } from "../internal/use-roving-focus.mjs";
 import { useMemo, useRef, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/toolbar/toolbar-separator.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useRender } from "../internal/use-render.mjs";
 import { useToolbarContext } from "../internal/toolbar-context.mjs";
+import { useRender } from "../internal/use-render.mjs";
 //#region src/toolbar/toolbar-separator.tsx
 /**
 * `<hr aria-orientation>` between toolbar items: vertical in a horizontal Toolbar, horizontal in

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funstack/ui",
-  "version": "0.1.0-alpha.5",
+  "version": "0.1.0-alpha.7",
   "description": "Headless UI library for React — the first Async React-native UI library",
   "keywords": [
     "components",
@@ -30,6 +30,7 @@
   "exports": {
     ".": "./dist/index.mjs",
     "./accordion": "./dist/accordion/index.mjs",
+    "./button": "./dist/button/index.mjs",
     "./checkbox": "./dist/checkbox/index.mjs",
     "./checkbox-group": "./dist/checkbox-group/index.mjs",
     "./combobox": "./dist/combobox/index.mjs",

package/dist/toolbar/toolbar-button.d.mts

@@ -1,42 +0,0 @@
-import { Action, ActionDetails, RenderProp, StateValue } from "../internal/types.mjs";
-import { CSSProperties, ComponentPropsWithRef, ReactNode, ViewTransitionClass } from "react";
-//#region src/toolbar/toolbar-button.d.ts
-/** Details passed to `Toolbar.Button`'s `action`. */
-export interface ToolbarButtonActionDetails extends ActionDetails {}
-export interface ToolbarButtonState {
-  /** This button's action is in flight. */
-  readonly pending: boolean;
-  readonly disabled: boolean;
-}
-export interface ToolbarButtonProps extends Omit<ComponentPropsWithRef<"button">, "onClick" | "type" | "tabIndex" | "aria-disabled" | "className" | "style" | "children"> {
-  /** Runs inside this button's own transition on click, Enter or Space. Sync or async; rejections reach the nearest Error Boundary. */
-  action?: Action<[details: ToolbarButtonActionDetails]>;
-  /**
-   * `aria-disabled="true"`: the button stays focusable and in the arrow-key sequence so
-   * assistive technology still finds it (APG Toolbar example), and never dispatches.
-   */
-  disabled?: boolean;
-  /**
-   * Forwarded as `default` to the button's `<ViewTransition>`: animates the commit that ends the
-   * action (content keyed on `pending`), not a click. Static; any value makes a mount inside a
-   * transition start a document view transition (issue #35).
-   */
-  transition?: ViewTransitionClass;
-  className?: StateValue<string | undefined, ToolbarButtonState>;
-  style?: StateValue<CSSProperties | undefined, ToolbarButtonState>;
-  children?: StateValue<ReactNode, ToolbarButtonState>;
-  render?: RenderProp<ComponentPropsWithRef<"button">, ToolbarButtonState>;
-}
-/**
- * A toolbar command: `<button type="button">` that runs `action` in its own transition
- * (`data-pending` while it runs). Disabled is `aria-disabled`, so it stays focusable.
- *
- * Owned keys (conventions 1.2): `type` (on a `<button>` only), `aria-disabled`, `data-pending`,
- * `data-disabled`, `onClick`.
- */
-export declare function ToolbarButton({ action, disabled, transition, className, style, children, render, ...rest }: ToolbarButtonProps): ReactNode;
-export declare namespace ToolbarButton {
-  var displayName: string;
-}
-//#endregion
-//# sourceMappingURL=toolbar-button.d.mts.map

package/dist/toolbar/toolbar-button.d.mts.map

@@ -1 +0,0 @@
-{"version":3,"file":"toolbar-button.d.mts","names":[],"sources":["../../src/toolbar/toolbar-button.tsx"],"mappings":";;;;iBAgBiB,mCAAmC;iBAEnC;;WAEN;WACA;;iBAGM,2BAA2B,KAC1C;;EAIA,SAAS,QAAQ,SAAS;;;;;EAK1B;;;;;;EAMA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,iCAAiC;;;;;;;;;wBAUvC,gBACd,QACA,UACA,YACA,WACA,OACA,UACA,WACG,QACF,qBAAkB;yBATL"}

package/dist/toolbar/toolbar-button.mjs

@@ -1,50 +0,0 @@
-"use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
-import { createActionDetails } from "../internal/action-details.mjs";
-import { dataAttr } from "../internal/data-attr.mjs";
-import { rendersButton } from "../internal/render-element.mjs";
-import { useRender } from "../internal/use-render.mjs";
-import { useActionTrigger } from "../internal/use-action-trigger.mjs";
-//#region src/toolbar/toolbar-button.tsx
-/**
-* A toolbar command: `<button type="button">` that runs `action` in its own transition
-* (`data-pending` while it runs). Disabled is `aria-disabled`, so it stays focusable.
-*
-* Owned keys (conventions 1.2): `type` (on a `<button>` only), `aria-disabled`, `data-pending`,
-* `data-disabled`, `onClick`.
-*/
-function ToolbarButton({ action, disabled = false, transition, className, style, children, render, ...rest }) {
-	const { pending, run } = useActionTrigger();
-	const element = useRender({
-		defaultElement: "button",
-		render,
-		state: {
-			pending,
-			disabled
-		},
-		className,
-		style,
-		children,
-		props: rest,
-		libraryProps: {
-			...rendersButton(render) && { type: "button" },
-			"aria-disabled": disabled ? true : void 0,
-			"data-pending": dataAttr(pending),
-			"data-disabled": dataAttr(disabled),
-			onClick: (event) => {
-				if (disabled) {
-					event.preventDefault();
-					return;
-				}
-				const details = createActionDetails(event.nativeEvent, {});
-				run(() => action?.(details));
-			}
-		}
-	});
-	return useTransitionBoundary("Toolbar.Button", transition, element);
-}
-ToolbarButton.displayName = "ToolbarButton";
-//#endregion
-export { ToolbarButton };
-
-//# sourceMappingURL=toolbar-button.mjs.map

package/dist/toolbar/toolbar-button.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"toolbar-button.mjs","names":[],"sources":["../../src/toolbar/toolbar-button.tsx"],"sourcesContent":["\"use client\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  MouseEvent,\n  ReactNode,\n  ViewTransitionClass,\n} from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport type { Action, ActionDetails, RenderProp, StateValue } from \"../internal/types.js\";\nimport { useActionTrigger } from \"../internal/use-action-trigger.js\";\nimport { rendersButton, useRender } from \"../internal/use-render.js\";\n\n/** Details passed to `Toolbar.Button`'s `action`. */\nexport interface ToolbarButtonActionDetails extends ActionDetails {}\n\nexport interface ToolbarButtonState {\n  /** This button's action is in flight. */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n}\n\nexport interface ToolbarButtonProps extends Omit<\n  ComponentPropsWithRef<\"button\">,\n  \"onClick\" | \"type\" | \"tabIndex\" | \"aria-disabled\" | \"className\" | \"style\" | \"children\"\n> {\n  /** Runs inside this button's own transition on click, Enter or Space. Sync or async; rejections reach the nearest Error Boundary. */\n  action?: Action<[details: ToolbarButtonActionDetails]>;\n  /**\n   * `aria-disabled=\"true\"`: the button stays focusable and in the arrow-key sequence so\n   * assistive technology still finds it (APG Toolbar example), and never dispatches.\n   */\n  disabled?: boolean;\n  /**\n   * Forwarded as `default` to the button's `<ViewTransition>`: animates the commit that ends the\n   * action (content keyed on `pending`), not a click. Static; any value makes a mount inside a\n   * transition start a document view transition (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, ToolbarButtonState>;\n  style?: StateValue<CSSProperties | undefined, ToolbarButtonState>;\n  children?: StateValue<ReactNode, ToolbarButtonState>;\n  render?: RenderProp<ComponentPropsWithRef<\"button\">, ToolbarButtonState>;\n}\n\n/**\n * A toolbar command: `<button type=\"button\">` that runs `action` in its own transition\n * (`data-pending` while it runs). Disabled is `aria-disabled`, so it stays focusable.\n *\n * Owned keys (conventions 1.2): `type` (on a `<button>` only), `aria-disabled`, `data-pending`,\n * `data-disabled`, `onClick`.\n */\nexport function ToolbarButton({\n  action,\n  disabled = false,\n  transition,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: ToolbarButtonProps) {\n  const { pending, run } = useActionTrigger();\n  const state: ToolbarButtonState = { pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"button\">, ToolbarButtonState>({\n    defaultElement: \"button\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      ...(rendersButton(render) && { type: \"button\" as const }),\n      \"aria-disabled\": disabled ? true : undefined,\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onClick: (event: MouseEvent<HTMLButtonElement>) => {\n        if (disabled) {\n          // A disabled link must not navigate either.\n          event.preventDefault();\n          return;\n        }\n        const details: ToolbarButtonActionDetails = createActionDetails(event.nativeEvent, {});\n        run(() => action?.(details));\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"Toolbar.Button\", transition, element);\n}\n\nToolbarButton.displayName = \"ToolbarButton\";\n"],"mappings":";;;;;;;;;;;;;;;AAsDA,SAAgB,cAAc,EAC5B,QACA,WAAW,OACX,YACA,WACA,OACA,UACA,QACA,GAAG,QACkB;CACrB,MAAM,EAAE,SAAS,QAAQ,iBAAiB;CAG1C,MAAM,UAAU,UAA+D;EAC7E,gBAAgB;EAChB;EACA,OAAA;GALkC;GAAS;EAKvC;EACJ;EACA;EACA;EACA,OAAO;EACP,cAAc;GACZ,GAAI,cAAc,MAAM,KAAK,EAAE,MAAM,SAAkB;GACvD,iBAAiB,WAAW,OAAO,KAAA;GACnC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,UAAU,UAAyC;IACjD,IAAI,UAAU;KAEZ,MAAM,eAAe;KACrB;IACF;IACA,MAAM,UAAsC,oBAAoB,MAAM,aAAa,CAAC,CAAC;IACrF,UAAU,SAAS,OAAO,CAAC;GAC7B;EACF;CACF,CAAC;CAED,OAAO,sBAAsB,kBAAkB,YAAY,OAAO;AACpE;AAEA,cAAc,cAAc"}