@funstack/ui 0.1.0-alpha.4 → 0.1.0-alpha.6

package/dist/slider/slider-thumb.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { mergeRefs, mergeTokenLists } from "../internal/merge-props.mjs";
 import { resolveStateValue } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
-import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { useSliderContext } from "./slider-context.mjs";
 import { percent, thumbBounds } from "./slider-arithmetic.mjs";
 import { useEffectEvent, useLayoutEffect, useMemo, useRef } from "react";

package/dist/slider/slider-value.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useRender } from "../internal/use-render.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { useSliderContext } from "./slider-context.mjs";
 //#region src/slider/slider-value.tsx
 /**

package/dist/switch/switch.mjs

@@ -1,10 +1,10 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
-import { useRender } from "../internal/use-render.mjs";
 import { fieldInputProps, useFieldControl, useFieldValueChange, useMergedRef } from "../internal/use-field-control.mjs";
 import { guardCheckableChange, useNativeChecked } from "../internal/use-native-checked.mjs";
 //#region src/switch/switch.tsx

package/dist/tabs/tabs-list.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { useRender } from "../internal/use-render.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { TabsListContext, useTabsContext } from "./tabs-context.mjs";
 import { useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/tabs/tabs-panel.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { useRender } from "../internal/use-render.mjs";
 import { useTabsContext } from "./tabs-context.mjs";
 import { panelId, tabId } from "./tabs-ids.mjs";

package/dist/tabs/tabs-root.mjs

@@ -1,10 +1,10 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
 import { transitionTypes } from "../internal/transition-types.mjs";
 import { useControllableAction } from "../internal/use-controllable-action.mjs";
-import { useRender } from "../internal/use-render.mjs";
-import { useDevWarning } from "../internal/use-dev-warning.mjs";
 import { TabsContext } from "./tabs-context.mjs";
 import { tabId } from "./tabs-ids.mjs";
 import { useId, useMemo, useRef } from "react";

package/dist/tabs/tabs-tab.mjs

@@ -1,6 +1,6 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { rendersButton, resolveStateValue } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
 import { TabsListContext, useTabsContext } from "./tabs-context.mjs";

package/dist/toast/toast-action.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useActionTrigger } from "../internal/use-action-trigger.mjs";
 import { rendersButton } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
-import { useActionTrigger } from "../internal/use-action-trigger.mjs";
 import { useToastRootContext } from "./toast-context.mjs";
 import { useLayoutEffect, useState } from "react";
 //#region src/toast/toast-action.tsx

package/dist/toast/toast-root.mjs

@@ -1,8 +1,8 @@
 "use client";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { useLatest } from "../internal/use-latest.mjs";
 import { resolveStateValue } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
+import { useLatest } from "../internal/use-latest.mjs";
 import { exitAnimations } from "../internal/use-exit-animation.mjs";
 import { ToastRootContext, useToastRootContext, useToastViewportContext } from "./toast-context.mjs";
 import { Suspense, useCallback, useId, useLayoutEffect, useMemo, useRef, useState } from "react";

package/dist/toast/toast-viewport.mjs

@@ -1,17 +1,17 @@
 "use client";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { useLatest } from "../internal/use-latest.mjs";
-import { useRender } from "../internal/use-render.mjs";
 import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useLatest } from "../internal/use-latest.mjs";
 import { DialogContext } from "../dialog/dialog-context.mjs";
 import { animationBaseline } from "../internal/use-exit-animation.mjs";
 import { getServerTopmostModal, getTopmostModal, subscribeModals } from "../internal/modal-registry.mjs";
 import { ToastViewportContext } from "./toast-context.mjs";
 import { toast, toastManagerInternals } from "./toast.mjs";
 import { use, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore, useTransition } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/toast/toast-viewport.tsx
 const isDev = process.env.NODE_ENV !== "production";
 const DEFAULT_HOTKEY = ["F8"];

package/dist/toggle/toggle.mjs

@@ -1,11 +1,11 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { createActionDetails } from "../internal/action-details.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
-import { transitionTypes } from "../internal/transition-types.mjs";
-import { useControllableAction } from "../internal/use-controllable-action.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { rendersButton } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
+import { transitionTypes } from "../internal/transition-types.mjs";
+import { useControllableAction } from "../internal/use-controllable-action.mjs";
 //#region src/toggle/toggle.tsx
 /**
 * A two-state button (WAI-ARIA "Button" pattern, toggle variant). Renders

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

@@ -1,6 +1,6 @@
 "use client";
-import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { dataAttr } from "../internal/data-attr.mjs";
+import { useTransitionBoundary } from "../internal/transition-boundary.mjs";
 import { rendersButton } from "../internal/render-element.mjs";
 import { useRender } from "../internal/use-render.mjs";
 import { useToggleGroupContext } from "./toggle-group-context.mjs";

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/dist/tooltip/tooltip-root.mjs

@@ -52,9 +52,11 @@ function TooltipRoot({ delay = 250, closeDelay = 150, disabled = false, provides
 TooltipRoot.displayName = "TooltipRoot";
 /**
 * The containers that move focus among their items with the arrow keys (roving tabindex, or a
-* native `focusgroup`): Menu, Tabs, Toolbar, a radio group, and the other APG composites.
+* native `focusgroup`): Menu, Tabs, Toolbar, a radio group, and the other APG composites, plus
+* `role="group"`, which a standalone `ToggleGroup.Root` renders while its roving engine writes
+* the Items' `tabindex` (#75, design/components/toggle-group.md 18).
 */
-const COMPOSITE = "[role=\"menu\"],[role=\"menubar\"],[role=\"tablist\"],[role=\"toolbar\"],[role=\"radiogroup\"],[role=\"listbox\"],[role=\"grid\"],[role=\"treegrid\"],[role=\"tree\"],[focusgroup]";
+const COMPOSITE = "[role=\"menu\"],[role=\"menubar\"],[role=\"tablist\"],[role=\"toolbar\"],[role=\"group\"],[role=\"radiogroup\"],[role=\"listbox\"],[role=\"grid\"],[role=\"treegrid\"],[role=\"tree\"],[focusgroup]";
 /**
 * Whether keyboard users can focus the trigger: it is in the tab order, or it is a
 * roving-tabindex item (`tabindex="-1"` set explicitly, so script can focus it) inside a

package/dist/tooltip/tooltip-root.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-root.mjs","names":[],"sources":["../../src/tooltip/tooltip-root.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { StateValue } from \"../internal/types.js\";\nimport { resolveStateValue } from \"../internal/use-render.js\";\nimport { TooltipContext } from \"./tooltip-context.js\";\nimport type { TooltipContextValue, TooltipProvides } from \"./tooltip-context.js\";\nimport { useTooltipInteraction } from \"./use-tooltip-interaction.js\";\n\nexport type { TooltipProvides } from \"./tooltip-context.js\";\n\nexport interface TooltipRootState {\n  readonly disabled: boolean;\n}\n\nexport interface TooltipRootProps {\n  /**\n   * Milliseconds from hover or keyboard focus to open. Default 250 (Chromium's\n   * `interest-delay-start`). The same delay applies to hover and focus.\n   */\n  delay?: number;\n  /** Milliseconds from de-hover or blur to close. Default 150 (Chromium's `interest-delay-end`). */\n  closeDelay?: number;\n  /** When true the tooltip never opens. The ARIA relation stays in place. */\n  disabled?: boolean;\n  /**\n   * Which accessibility relation the tooltip provides for the trigger.\n   * `\"description\"` (default): `aria-describedby`, for triggers that have their own name.\n   * `\"name\"`: `aria-labelledby`, for icon-only triggers; do not also set `aria-label`.\n   */\n  provides?: TooltipProvides;\n  children?: StateValue<ReactNode, TooltipRootState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\nconst FOCUSABLE =\n  \"a[href],area[href],button,input,select,textarea,iframe,[tabindex],[contenteditable]\";\n\n/**\n * Owns the popup id, the options and the one interaction effect. Renders no DOM, so it has no\n * `ref`, `className` or `style`. The open state is browser-owned (the popover's top-layer state):\n * there is no `open` prop, no action, and no `data-open`; style with `:popover-open`.\n *\n * Render `Tooltip.Popup` immediately after `Tooltip.Trigger` in DOM order: the HTML spec\n * recommends that reading order for popovers, and some screen readers attach an adjacent tooltip\n * to the wrong control otherwise. This is documented, not enforced.\n */\nexport function TooltipRoot({\n  delay = 250,\n  closeDelay = 150,\n  disabled = false,\n  provides = \"description\",\n  children,\n}: TooltipRootProps) {\n  const popupId = useId();\n  const [trigger, setTriggerElement] = useState<HTMLElement | null>(null);\n  const [popup, setPopupElement] = useState<HTMLElement | null>(null);\n  const [interestForRequested, setInterestForRequested] = useState(false);\n\n  useTooltipInteraction(trigger, popup, { delay, closeDelay, disabled, interestForRequested });\n  useTooltipDevWarnings(trigger, popup, provides);\n\n  const context = useMemo<TooltipContextValue>(\n    () => ({\n      popupId,\n      disabled,\n      delay,\n      closeDelay,\n      provides,\n      setTriggerElement,\n      setPopupElement,\n      setInterestForRequested,\n    }),\n    [popupId, disabled, delay, closeDelay, provides],\n  );\n\n  const state: TooltipRootState = { disabled };\n  return <TooltipContext value={context}>{resolveStateValue(children, state)}</TooltipContext>;\n}\n\nTooltipRoot.displayName = \"TooltipRoot\";\n\n/**\n * The containers that move focus among their items with the arrow keys (roving tabindex, or a\n * native `focusgroup`): Menu, Tabs, Toolbar, a radio group, and the other APG composites.\n */\nconst COMPOSITE =\n  '[role=\"menu\"],[role=\"menubar\"],[role=\"tablist\"],[role=\"toolbar\"],[role=\"radiogroup\"],[role=\"listbox\"],[role=\"grid\"],[role=\"treegrid\"],[role=\"tree\"],[focusgroup]';\n\n/**\n * Whether keyboard users can focus the trigger: it is in the tab order, or it is a\n * roving-tabindex item (`tabindex=\"-1\"` set explicitly, so script can focus it) inside a\n * composite widget that moves focus to it (#57).\n */\nfunction isKeyboardReachable(trigger: HTMLElement): boolean {\n  if (trigger.tabIndex >= 0) return true;\n  return trigger.hasAttribute(\"tabindex\") && trigger.parentElement?.closest(COMPOSITE) != null;\n}\n\n/** Development-only checks that need the mounted elements (design 12.5). Each fires once. */\nfunction useTooltipDevWarnings(\n  trigger: HTMLElement | null,\n  popup: HTMLElement | null,\n  provides: TooltipProvides,\n): void {\n  const warned = useRef({ label: false, focusable: false, interactive: false });\n  useEffect(() => {\n    if (!isDev) return;\n    const w = warned.current;\n    if (trigger !== null) {\n      if (provides === \"name\" && trigger.hasAttribute(\"aria-label\") && !w.label) {\n        w.label = true;\n        console.error(\n          '[Tooltip] provides=\"name\" together with aria-label on the trigger announces the name twice. Remove aria-label.',\n        );\n      }\n      if (!isKeyboardReachable(trigger) && !w.focusable) {\n        w.focusable = true;\n        console.error(\n          \"[Tooltip] The trigger is not focusable; keyboard users cannot open the tooltip. Render a <button> or a link, or set tabIndex={0}.\",\n        );\n      }\n    }\n    if (popup !== null && popup.querySelector(FOCUSABLE) !== null && !w.interactive) {\n      w.interactive = true;\n      console.error(\n        \"[Tooltip] Tooltips must not contain interactive content. Use a non-modal dialog or a popover instead.\",\n      );\n    }\n  }, [trigger, popup, provides]);\n}\n"],"mappings":";;;;;;;AAkCA,MAAM,QAAQ,QAAQ,IAAI,aAAa;AAEvC,MAAM,YACJ;;;;;;;;;;AAWF,SAAgB,YAAY,EAC1B,QAAQ,KACR,aAAa,KACb,WAAW,OACX,WAAW,eACX,YACmB;CACnB,MAAM,UAAU,MAAM;CACtB,MAAM,CAAC,SAAS,qBAAqB,SAA6B,IAAI;CACtE,MAAM,CAAC,OAAO,mBAAmB,SAA6B,IAAI;CAClE,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,KAAK;CAEtE,sBAAsB,SAAS,OAAO;EAAE;EAAO;EAAY;EAAU;CAAqB,CAAC;CAC3F,sBAAsB,SAAS,OAAO,QAAQ;CAE9C,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAS;EAAU;EAAO;EAAY;CAAQ,CACjD;CAGA,OAAO,oBAAC,gBAAD;EAAgB,OAAO;EAAU,UAAA,kBAAkB,UAAU,EADlC,SACsC,CAAC;CAAkB,CAAA;AAC7F;AAEA,YAAY,cAAc;;;;;AAM1B,MAAM,YACJ;;;;;;AAOF,SAAS,oBAAoB,SAA+B;CAC1D,IAAI,QAAQ,YAAY,GAAG,OAAO;CAClC,OAAO,QAAQ,aAAa,UAAU,KAAK,QAAQ,eAAe,QAAQ,SAAS,KAAK;AAC1F;;AAGA,SAAS,sBACP,SACA,OACA,UACM;CACN,MAAM,SAAS,OAAO;EAAE,OAAO;EAAO,WAAW;EAAO,aAAa;CAAM,CAAC;CAC5E,gBAAgB;EACd,IAAI,CAAC,OAAO;EACZ,MAAM,IAAI,OAAO;EACjB,IAAI,YAAY,MAAM;GACpB,IAAI,aAAa,UAAU,QAAQ,aAAa,YAAY,KAAK,CAAC,EAAE,OAAO;IACzE,EAAE,QAAQ;IACV,QAAQ,MACN,kHACF;GACF;GACA,IAAI,CAAC,oBAAoB,OAAO,KAAK,CAAC,EAAE,WAAW;IACjD,EAAE,YAAY;IACd,QAAQ,MACN,mIACF;GACF;EACF;EACA,IAAI,UAAU,QAAQ,MAAM,cAAc,SAAS,MAAM,QAAQ,CAAC,EAAE,aAAa;GAC/E,EAAE,cAAc;GAChB,QAAQ,MACN,uGACF;EACF;CACF,GAAG;EAAC;EAAS;EAAO;CAAQ,CAAC;AAC/B"}
+{"version":3,"file":"tooltip-root.mjs","names":[],"sources":["../../src/tooltip/tooltip-root.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport type { StateValue } from \"../internal/types.js\";\nimport { resolveStateValue } from \"../internal/use-render.js\";\nimport { TooltipContext } from \"./tooltip-context.js\";\nimport type { TooltipContextValue, TooltipProvides } from \"./tooltip-context.js\";\nimport { useTooltipInteraction } from \"./use-tooltip-interaction.js\";\n\nexport type { TooltipProvides } from \"./tooltip-context.js\";\n\nexport interface TooltipRootState {\n  readonly disabled: boolean;\n}\n\nexport interface TooltipRootProps {\n  /**\n   * Milliseconds from hover or keyboard focus to open. Default 250 (Chromium's\n   * `interest-delay-start`). The same delay applies to hover and focus.\n   */\n  delay?: number;\n  /** Milliseconds from de-hover or blur to close. Default 150 (Chromium's `interest-delay-end`). */\n  closeDelay?: number;\n  /** When true the tooltip never opens. The ARIA relation stays in place. */\n  disabled?: boolean;\n  /**\n   * Which accessibility relation the tooltip provides for the trigger.\n   * `\"description\"` (default): `aria-describedby`, for triggers that have their own name.\n   * `\"name\"`: `aria-labelledby`, for icon-only triggers; do not also set `aria-label`.\n   */\n  provides?: TooltipProvides;\n  children?: StateValue<ReactNode, TooltipRootState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\nconst FOCUSABLE =\n  \"a[href],area[href],button,input,select,textarea,iframe,[tabindex],[contenteditable]\";\n\n/**\n * Owns the popup id, the options and the one interaction effect. Renders no DOM, so it has no\n * `ref`, `className` or `style`. The open state is browser-owned (the popover's top-layer state):\n * there is no `open` prop, no action, and no `data-open`; style with `:popover-open`.\n *\n * Render `Tooltip.Popup` immediately after `Tooltip.Trigger` in DOM order: the HTML spec\n * recommends that reading order for popovers, and some screen readers attach an adjacent tooltip\n * to the wrong control otherwise. This is documented, not enforced.\n */\nexport function TooltipRoot({\n  delay = 250,\n  closeDelay = 150,\n  disabled = false,\n  provides = \"description\",\n  children,\n}: TooltipRootProps) {\n  const popupId = useId();\n  const [trigger, setTriggerElement] = useState<HTMLElement | null>(null);\n  const [popup, setPopupElement] = useState<HTMLElement | null>(null);\n  const [interestForRequested, setInterestForRequested] = useState(false);\n\n  useTooltipInteraction(trigger, popup, { delay, closeDelay, disabled, interestForRequested });\n  useTooltipDevWarnings(trigger, popup, provides);\n\n  const context = useMemo<TooltipContextValue>(\n    () => ({\n      popupId,\n      disabled,\n      delay,\n      closeDelay,\n      provides,\n      setTriggerElement,\n      setPopupElement,\n      setInterestForRequested,\n    }),\n    [popupId, disabled, delay, closeDelay, provides],\n  );\n\n  const state: TooltipRootState = { disabled };\n  return <TooltipContext value={context}>{resolveStateValue(children, state)}</TooltipContext>;\n}\n\nTooltipRoot.displayName = \"TooltipRoot\";\n\n/**\n * The containers that move focus among their items with the arrow keys (roving tabindex, or a\n * native `focusgroup`): Menu, Tabs, Toolbar, a radio group, and the other APG composites, plus\n * `role=\"group\"`, which a standalone `ToggleGroup.Root` renders while its roving engine writes\n * the Items' `tabindex` (#75, design/components/toggle-group.md 18).\n */\nconst COMPOSITE =\n  '[role=\"menu\"],[role=\"menubar\"],[role=\"tablist\"],[role=\"toolbar\"],[role=\"group\"],[role=\"radiogroup\"],[role=\"listbox\"],[role=\"grid\"],[role=\"treegrid\"],[role=\"tree\"],[focusgroup]';\n\n/**\n * Whether keyboard users can focus the trigger: it is in the tab order, or it is a\n * roving-tabindex item (`tabindex=\"-1\"` set explicitly, so script can focus it) inside a\n * composite widget that moves focus to it (#57).\n */\nfunction isKeyboardReachable(trigger: HTMLElement): boolean {\n  if (trigger.tabIndex >= 0) return true;\n  return trigger.hasAttribute(\"tabindex\") && trigger.parentElement?.closest(COMPOSITE) != null;\n}\n\n/** Development-only checks that need the mounted elements (design 12.5). Each fires once. */\nfunction useTooltipDevWarnings(\n  trigger: HTMLElement | null,\n  popup: HTMLElement | null,\n  provides: TooltipProvides,\n): void {\n  const warned = useRef({ label: false, focusable: false, interactive: false });\n  useEffect(() => {\n    if (!isDev) return;\n    const w = warned.current;\n    if (trigger !== null) {\n      if (provides === \"name\" && trigger.hasAttribute(\"aria-label\") && !w.label) {\n        w.label = true;\n        console.error(\n          '[Tooltip] provides=\"name\" together with aria-label on the trigger announces the name twice. Remove aria-label.',\n        );\n      }\n      if (!isKeyboardReachable(trigger) && !w.focusable) {\n        w.focusable = true;\n        console.error(\n          \"[Tooltip] The trigger is not focusable; keyboard users cannot open the tooltip. Render a <button> or a link, or set tabIndex={0}.\",\n        );\n      }\n    }\n    if (popup !== null && popup.querySelector(FOCUSABLE) !== null && !w.interactive) {\n      w.interactive = true;\n      console.error(\n        \"[Tooltip] Tooltips must not contain interactive content. Use a non-modal dialog or a popover instead.\",\n      );\n    }\n  }, [trigger, popup, provides]);\n}\n"],"mappings":";;;;;;;AAkCA,MAAM,QAAQ,QAAQ,IAAI,aAAa;AAEvC,MAAM,YACJ;;;;;;;;;;AAWF,SAAgB,YAAY,EAC1B,QAAQ,KACR,aAAa,KACb,WAAW,OACX,WAAW,eACX,YACmB;CACnB,MAAM,UAAU,MAAM;CACtB,MAAM,CAAC,SAAS,qBAAqB,SAA6B,IAAI;CACtE,MAAM,CAAC,OAAO,mBAAmB,SAA6B,IAAI;CAClE,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,KAAK;CAEtE,sBAAsB,SAAS,OAAO;EAAE;EAAO;EAAY;EAAU;CAAqB,CAAC;CAC3F,sBAAsB,SAAS,OAAO,QAAQ;CAE9C,MAAM,UAAU,eACP;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,IACA;EAAC;EAAS;EAAU;EAAO;EAAY;CAAQ,CACjD;CAGA,OAAO,oBAAC,gBAAD;EAAgB,OAAO;EAAU,UAAA,kBAAkB,UAAU,EADlC,SACsC,CAAC;CAAkB,CAAA;AAC7F;AAEA,YAAY,cAAc;;;;;;;AAQ1B,MAAM,YACJ;;;;;;AAOF,SAAS,oBAAoB,SAA+B;CAC1D,IAAI,QAAQ,YAAY,GAAG,OAAO;CAClC,OAAO,QAAQ,aAAa,UAAU,KAAK,QAAQ,eAAe,QAAQ,SAAS,KAAK;AAC1F;;AAGA,SAAS,sBACP,SACA,OACA,UACM;CACN,MAAM,SAAS,OAAO;EAAE,OAAO;EAAO,WAAW;EAAO,aAAa;CAAM,CAAC;CAC5E,gBAAgB;EACd,IAAI,CAAC,OAAO;EACZ,MAAM,IAAI,OAAO;EACjB,IAAI,YAAY,MAAM;GACpB,IAAI,aAAa,UAAU,QAAQ,aAAa,YAAY,KAAK,CAAC,EAAE,OAAO;IACzE,EAAE,QAAQ;IACV,QAAQ,MACN,kHACF;GACF;GACA,IAAI,CAAC,oBAAoB,OAAO,KAAK,CAAC,EAAE,WAAW;IACjD,EAAE,YAAY;IACd,QAAQ,MACN,mIACF;GACF;EACF;EACA,IAAI,UAAU,QAAQ,MAAM,cAAc,SAAS,MAAM,QAAQ,CAAC,EAAE,aAAa;GAC/E,EAAE,cAAc;GAChB,QAAQ,MACN,uGACF;EACF;CACF,GAAG;EAAC;EAAS;EAAO;CAAQ,CAAC;AAC/B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funstack/ui",
-  "version": "0.1.0-alpha.4",
+  "version": "0.1.0-alpha.6",
   "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"}