@funstack/ui 0.0.0-stage → 0.1.0-alpha.0

package/dist/switch/switch.d.mts

@@ -0,0 +1,78 @@
+import { ActionDetails, ChangeAction, ChangeReason, RenderProp, StateValue } from "../internal/types.mjs";
+import { CSSProperties, ComponentPropsWithRef, ViewTransitionClass } from "react";
+//#region src/switch/switch.d.ts
+export interface SwitchState {
+  /** Optimistic checked state: what the user sees, including an in-flight change. */
+  readonly checked: boolean;
+  /** An action dispatched by this Switch is in flight (including the resulting render). */
+  readonly pending: boolean;
+  /** The `disabled` prop. */
+  readonly disabled: boolean;
+}
+/** Details passed as the second argument of `checkedChangeAction`. */
+export interface SwitchCheckedChangeDetails extends ActionDetails {
+  /**
+   * `"activate"`: the user toggled the switch (click, Space, label click); `event` is the native
+   * `click` event. `"platform"`: the browser changed the value itself: a form reset (`event` is
+   * the `reset` event) or a click before hydration / Firefox form-state restoration found on
+   * mount (`event` is `undefined`).
+   */
+  readonly reason: ChangeReason;
+}
+export interface SwitchProps extends Omit<ComponentPropsWithRef<"input">, "type" | "role" | "checked" | "defaultChecked" | "onChange" | "aria-checked" | "className" | "style" | "children"> {
+  /** Controlled checked state. `undefined` means uncontrolled. */
+  checked?: boolean;
+  /**
+   * Initial checked state in uncontrolled mode (default `false`). Also the value a form reset
+   * returns to: the latest prop value is mirrored into the input's `defaultChecked`.
+   */
+  defaultChecked?: boolean;
+  /**
+   * Called with the next checked state on every change. Runs inside the Switch's transition; may
+   * be sync or async (also a Server Function). Rejections reach the nearest Error Boundary.
+   * Also called with `details.reason === "platform"` for a form reset or a pre-hydration click.
+   *
+   * A `setState` placed after your own `await` is not a Transition update; wrap it in
+   * `startTransition` (React limitation). `details.event.preventDefault()` is not a veto and is
+   * unsupported here; use controlled mode to veto a change.
+   */
+  checkedChangeAction?: ChangeAction<boolean, SwitchCheckedChangeDetails>;
+  /** Renders a natively disabled input; never dispatches. Default `false`. */
+  disabled?: boolean;
+  /** Submitted as the input's value when checked. Default `"on"` (platform). */
+  value?: string;
+  /**
+   * Forwarded as `default` to the Switch's `<ViewTransition>`. Default: no boundary. Animates the
+   * commit that ends an action, not the optimistic flip; animate the flip with CSS on `:checked`.
+   *
+   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between
+   * `undefined` and a value remounts the element. Any value, `"none"` included, makes a mount or
+   * `<Activity>` reveal of this part inside a transition start a document view transition: the
+   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).
+   */
+  transition?: ViewTransitionClass;
+  className?: StateValue<string | undefined, SwitchState>;
+  style?: StateValue<CSSProperties | undefined, SwitchState>;
+  /**
+   * Replace the rendered element (element form) or take over rendering (function form). Must keep
+   * an `<input type="checkbox">`.
+   */
+  render?: RenderProp<ComponentPropsWithRef<"input">, SwitchState>;
+}
+/**
+ * An on/off switch (WAI-ARIA "Switch" pattern, HTML checkbox input variant). Renders
+ * `<input type="checkbox" role="switch">` whose DOM `checked` is the optimistic state; the input
+ * carries `data-pending` while `checkedChangeAction` is in flight and takes part in forms natively.
+ *
+ * Owned keys (a `render` element's value is overridden): `type`, `role`, `checked`,
+ * `defaultChecked`, `aria-checked` (always removed), `disabled`, `data-checked`, `data-pending`,
+ * `data-disabled`. Event handlers are merged rather than owned: a `render` element's own
+ * `onChange` (or `onClick`) runs first, then the library's; an `onClick` that calls
+ * `preventDefault()` cancels the change (nothing is dispatched).
+ */
+export declare function Switch({ checked, defaultChecked, checkedChangeAction, disabled, transition, className, style, render, ...rest }: SwitchProps): import("react").ReactNode;
+export declare namespace Switch {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=switch.d.mts.map

package/dist/switch/switch.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.mts","names":[],"sources":["../../src/switch/switch.tsx"],"mappings":";;;iBAiBiB;;WAEN;;WAEA;;WAEA;;;iBAIM,mCAAmC;;;;;;;WAOzC,QAAQ;;iBAGF,oBAAoB,KACnC;;EAYA;;;;;EAKA;;;;;;;;;;EAUA,sBAAsB,sBAAsB;;EAE5C;;EAEA;;;;;;;;;;EAUA,aAAa;EACb,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;;;;;EAK9C,SAAS,WAAW,gCAAgC;;;;;;;;;;;;;wBActC,SACd,SACA,gBACA,qBACA,UACA,YACA,WACA,OACA,WACG,QACF,8BAAW;yBAVE"}

package/dist/switch/switch.mjs

@@ -0,0 +1,77 @@
+"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 { useRender } from "../internal/use-render.mjs";
+import { guardCheckableChange, useNativeChecked } from "../internal/use-native-checked.mjs";
+//#region src/switch/switch.tsx
+/**
+* An on/off switch (WAI-ARIA "Switch" pattern, HTML checkbox input variant). Renders
+* `<input type="checkbox" role="switch">` whose DOM `checked` is the optimistic state; the input
+* carries `data-pending` while `checkedChangeAction` is in flight and takes part in forms natively.
+*
+* Owned keys (a `render` element's value is overridden): `type`, `role`, `checked`,
+* `defaultChecked`, `aria-checked` (always removed), `disabled`, `data-checked`, `data-pending`,
+* `data-disabled`. Event handlers are merged rather than owned: a `render` element's own
+* `onChange` (or `onClick`) runs first, then the library's; an `onClick` that calls
+* `preventDefault()` cancels the change (nothing is dispatched).
+*/
+function Switch({ checked, defaultChecked, checkedChangeAction, disabled = false, transition, className, style, render, ...rest }) {
+	const { optimistic, pending, dispatch, latestInFlight } = useControllableAction({
+		controlled: checked,
+		defaultValue: defaultChecked,
+		initialValue: false,
+		action: checkedChangeAction,
+		transitionTypes: (next) => transitionTypes("switch", next ? "on" : "off"),
+		warn: {
+			component: "Switch",
+			prop: "checked"
+		}
+	});
+	const inputRef = useNativeChecked({
+		type: "checkbox",
+		component: "Switch",
+		checked: optimistic,
+		defaultChecked: checked === void 0 ? defaultChecked ?? false : void 0,
+		latestInFlight,
+		onPlatformChange: (next, event) => dispatch(next, createActionDetails(event, { reason: "platform" }))
+	});
+	const element = useRender({
+		defaultElement: "input",
+		render,
+		state: {
+			checked: optimistic,
+			pending,
+			disabled
+		},
+		className,
+		style,
+		children: void 0,
+		ref: inputRef,
+		props: rest,
+		libraryProps: {
+			type: "checkbox",
+			role: "switch",
+			checked: optimistic,
+			defaultChecked: void 0,
+			"aria-checked": void 0,
+			disabled,
+			"data-checked": dataAttr(optimistic),
+			"data-pending": dataAttr(pending),
+			"data-disabled": dataAttr(disabled),
+			onChange: (event) => {
+				if (disabled) return;
+				const nativeEvent = event.nativeEvent;
+				guardCheckableChange(nativeEvent, () => dispatch(!optimistic, createActionDetails(nativeEvent, { reason: "activate" })), "Switch");
+			}
+		}
+	});
+	return useTransitionBoundary("Switch", transition, element);
+}
+Switch.displayName = "Switch";
+//#endregion
+export { Switch };
+
+//# sourceMappingURL=switch.mjs.map

package/dist/switch/switch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.mjs","names":[],"sources":["../../src/switch/switch.tsx"],"sourcesContent":["\"use client\";\nimport type { ChangeEvent, ComponentPropsWithRef, CSSProperties, ViewTransitionClass } from \"react\";\nimport { useTransitionBoundary } from \"../internal/transition-boundary.js\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type {\n  ActionDetails,\n  ChangeAction,\n  ChangeReason,\n  RenderProp,\n  StateValue,\n} from \"../internal/types.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { guardCheckableChange, useNativeChecked } from \"../internal/use-native-checked.js\";\nimport { useRender } from \"../internal/use-render.js\";\n\nexport interface SwitchState {\n  /** Optimistic checked state: what the user sees, including an in-flight change. */\n  readonly checked: boolean;\n  /** An action dispatched by this Switch is in flight (including the resulting render). */\n  readonly pending: boolean;\n  /** The `disabled` prop. */\n  readonly disabled: boolean;\n}\n\n/** Details passed as the second argument of `checkedChangeAction`. */\nexport interface SwitchCheckedChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user toggled the switch (click, Space, label click); `event` is the native\n   * `click` event. `\"platform\"`: the browser changed the value itself: a form reset (`event` is\n   * the `reset` event) or a click before hydration / Firefox form-state restoration found on\n   * mount (`event` is `undefined`).\n   */\n  readonly reason: ChangeReason;\n}\n\nexport interface SwitchProps extends Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"type\"\n  | \"role\"\n  | \"checked\"\n  | \"defaultChecked\"\n  | \"onChange\"\n  | \"aria-checked\"\n  | \"className\"\n  | \"style\"\n  | \"children\"\n> {\n  /** Controlled checked state. `undefined` means uncontrolled. */\n  checked?: boolean;\n  /**\n   * Initial checked state in uncontrolled mode (default `false`). Also the value a form reset\n   * returns to: the latest prop value is mirrored into the input's `defaultChecked`.\n   */\n  defaultChecked?: boolean;\n  /**\n   * Called with the next checked state on every change. Runs inside the Switch's transition; may\n   * be sync or async (also a Server Function). Rejections reach the nearest Error Boundary.\n   * Also called with `details.reason === \"platform\"` for a form reset or a pre-hydration click.\n   *\n   * A `setState` placed after your own `await` is not a Transition update; wrap it in\n   * `startTransition` (React limitation). `details.event.preventDefault()` is not a veto and is\n   * unsupported here; use controlled mode to veto a change.\n   */\n  checkedChangeAction?: ChangeAction<boolean, SwitchCheckedChangeDetails>;\n  /** Renders a natively disabled input; never dispatches. Default `false`. */\n  disabled?: boolean;\n  /** Submitted as the input's value when checked. Default `\"on\"` (platform). */\n  value?: string;\n  /**\n   * Forwarded as `default` to the Switch's `<ViewTransition>`. Default: no boundary. Animates the\n   * commit that ends an action, not the optimistic flip; animate the flip with CSS on `:checked`.\n   *\n   * Static: without `transition` the part renders no `<ViewTransition>`; changing it between\n   * `undefined` and a value remounts the element. Any value, `\"none\"` included, makes a mount or\n   * `<Activity>` reveal of this part inside a transition start a document view transition: the\n   * page cross-fades for about 250 ms and the next transition commit waits for it (issue #35).\n   */\n  transition?: ViewTransitionClass;\n  className?: StateValue<string | undefined, SwitchState>;\n  style?: StateValue<CSSProperties | undefined, SwitchState>;\n  /**\n   * Replace the rendered element (element form) or take over rendering (function form). Must keep\n   * an `<input type=\"checkbox\">`.\n   */\n  render?: RenderProp<ComponentPropsWithRef<\"input\">, SwitchState>;\n}\n\n/**\n * An on/off switch (WAI-ARIA \"Switch\" pattern, HTML checkbox input variant). Renders\n * `<input type=\"checkbox\" role=\"switch\">` whose DOM `checked` is the optimistic state; the input\n * carries `data-pending` while `checkedChangeAction` is in flight and takes part in forms natively.\n *\n * Owned keys (a `render` element's value is overridden): `type`, `role`, `checked`,\n * `defaultChecked`, `aria-checked` (always removed), `disabled`, `data-checked`, `data-pending`,\n * `data-disabled`. Event handlers are merged rather than owned: a `render` element's own\n * `onChange` (or `onClick`) runs first, then the library's; an `onClick` that calls\n * `preventDefault()` cancels the change (nothing is dispatched).\n */\nexport function Switch({\n  checked,\n  defaultChecked,\n  checkedChangeAction,\n  disabled = false,\n  transition,\n  className,\n  style,\n  render,\n  ...rest\n}: SwitchProps) {\n  const { optimistic, pending, dispatch, latestInFlight } = useControllableAction<\n    boolean,\n    SwitchCheckedChangeDetails\n  >({\n    controlled: checked,\n    defaultValue: defaultChecked,\n    initialValue: false,\n    action: checkedChangeAction,\n    transitionTypes: (next) => transitionTypes(\"switch\", next ? \"on\" : \"off\"),\n    warn: { component: \"Switch\", prop: \"checked\" },\n  });\n\n  const inputRef = useNativeChecked({\n    type: \"checkbox\",\n    component: \"Switch\",\n    checked: optimistic,\n    // Uncontrolled: the latest prop is the reset target. Controlled: React's mount-time value.\n    defaultChecked: checked === undefined ? (defaultChecked ?? false) : undefined,\n    latestInFlight,\n    onPlatformChange: (next, event) =>\n      dispatch(next, createActionDetails(event, { reason: \"platform\" })),\n  });\n\n  const state: SwitchState = { checked: optimistic, pending, disabled };\n\n  const element = useRender<ComponentPropsWithRef<\"input\">, SwitchState>({\n    defaultElement: \"input\",\n    render,\n    state,\n    className,\n    style,\n    children: undefined,\n    ref: inputRef,\n    // Pass-through layer: a `render` element's own props win over these.\n    props: rest,\n    // Library-controlled layer (owned keys, conventions 1.2).\n    libraryProps: {\n      type: \"checkbox\",\n      role: \"switch\",\n      // The DOM state is the optimistic state (conventions 3.2): react-dom restores a controlled\n      // input to its props after every event, and only the sync-lane optimistic value survives.\n      checked: optimistic,\n      defaultChecked: undefined,\n      \"aria-checked\": undefined,\n      // Owned so that native disabledness, `data-disabled` and the click guard always agree: a\n      // `render` element cannot re-enable (`disabled={false}`) or disable the input on its own.\n      disabled,\n      \"data-checked\": dataAttr(optimistic),\n      \"data-pending\": dataAttr(pending),\n      \"data-disabled\": dataAttr(disabled),\n      onChange: (event: ChangeEvent<HTMLInputElement>) => {\n        // A natively disabled input fires no click; this covers `render` elements that do not\n        // honour `disabled`.\n        if (disabled) return;\n        const nativeEvent = event.nativeEvent;\n        guardCheckableChange(\n          nativeEvent,\n          () => dispatch(!optimistic, createActionDetails(nativeEvent, { reason: \"activate\" })),\n          \"Switch\",\n        );\n      },\n    },\n  });\n\n  return useTransitionBoundary(\"Switch\", transition, element);\n}\n\nSwitch.displayName = \"Switch\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAoGA,SAAgB,OAAO,EACrB,SACA,gBACA,qBACA,WAAW,OACX,YACA,WACA,OACA,QACA,GAAG,QACW;CACd,MAAM,EAAE,YAAY,SAAS,UAAU,mBAAmB,sBAGxD;EACA,YAAY;EACZ,cAAc;EACd,cAAc;EACd,QAAQ;EACR,kBAAkB,SAAS,gBAAgB,UAAU,OAAO,OAAO,KAAK;EACxE,MAAM;GAAE,WAAW;GAAU,MAAM;EAAU;CAC/C,CAAC;CAED,MAAM,WAAW,iBAAiB;EAChC,MAAM;EACN,WAAW;EACX,SAAS;EAET,gBAAgB,YAAY,KAAA,IAAa,kBAAkB,QAAS,KAAA;EACpE;EACA,mBAAmB,MAAM,UACvB,SAAS,MAAM,oBAAoB,OAAO,EAAE,QAAQ,WAAW,CAAC,CAAC;CACrE,CAAC;CAID,MAAM,UAAU,UAAuD;EACrE,gBAAgB;EAChB;EACA,OAAA;GAL2B,SAAS;GAAY;GAAS;EAKrD;EACJ;EACA;EACA,UAAU,KAAA;EACV,KAAK;EAEL,OAAO;EAEP,cAAc;GACZ,MAAM;GACN,MAAM;GAGN,SAAS;GACT,gBAAgB,KAAA;GAChB,gBAAgB,KAAA;GAGhB;GACA,gBAAgB,SAAS,UAAU;GACnC,gBAAgB,SAAS,OAAO;GAChC,iBAAiB,SAAS,QAAQ;GAClC,WAAW,UAAyC;IAGlD,IAAI,UAAU;IACd,MAAM,cAAc,MAAM;IAC1B,qBACE,mBACM,SAAS,CAAC,YAAY,oBAAoB,aAAa,EAAE,QAAQ,WAAW,CAAC,CAAC,GACpF,QACF;GACF;EACF;CACF,CAAC;CAED,OAAO,sBAAsB,UAAU,YAAY,OAAO;AAC5D;AAEA,OAAO,cAAc"}

package/dist/tabs/index.d.mts

@@ -0,0 +1,24 @@
+import "../internal/platform-attributes.mjs";
+import { TabsActivationMode, TabsOrientation } from "./tabs-context.mjs";
+import { TabsIndicator, TabsIndicatorProps, TabsIndicatorState } from "./tabs-indicator.mjs";
+import { TabsList, TabsListProps, TabsListState } from "./tabs-list.mjs";
+import { TabsPanel, TabsPanelProps, TabsPanelState } from "./tabs-panel.mjs";
+import { TabsRoot, TabsRootProps, TabsRootState, TabsValueChangeDetails } from "./tabs-root.mjs";
+import { TabsTab, TabsTabProps, TabsTabState } from "./tabs-tab.mjs";
+//#region src/tabs/index.d.ts
+/**
+ * Tabs (WAI-ARIA APG Tabs pattern): `Root` (div) > `List` (tablist) > `Tab` (button) and an
+ * optional `Indicator` (span), plus one `Panel` (tabpanel) per tab. Tabs and the Indicator render
+ * the optimistic selection; Panels render the committed one, so a suspending panel keeps the
+ * current panel on screen while the Root and the selected Tab show `data-pending`.
+ */
+export declare const Tabs: {
+  readonly Root: typeof TabsRoot;
+  readonly List: typeof TabsList;
+  readonly Tab: typeof TabsTab;
+  readonly Panel: typeof TabsPanel;
+  readonly Indicator: typeof TabsIndicator;
+};
+//#endregion
+export type { TabsActivationMode, TabsIndicatorProps, TabsIndicatorState, TabsListProps, TabsListState, TabsOrientation, TabsPanelProps, TabsPanelState, TabsRootProps, TabsRootState, TabsTabProps, TabsTabState, TabsValueChangeDetails };
+//# sourceMappingURL=index.d.mts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/tabs/index.ts"],"mappings":";;;;;;;;;;;;;;qBAea;WACX,aAAI;WACJ,aAAI;WACJ,YAAG;WACH,cAAK;WACL,kBAAS"}

package/dist/tabs/index.mjs

@@ -0,0 +1,23 @@
+import { TabsIndicator } from "./tabs-indicator.mjs";
+import { TabsList } from "./tabs-list.mjs";
+import { TabsPanel } from "./tabs-panel.mjs";
+import { TabsRoot } from "./tabs-root.mjs";
+import { TabsTab } from "./tabs-tab.mjs";
+//#region src/tabs/index.ts
+/**
+* Tabs (WAI-ARIA APG Tabs pattern): `Root` (div) > `List` (tablist) > `Tab` (button) and an
+* optional `Indicator` (span), plus one `Panel` (tabpanel) per tab. Tabs and the Indicator render
+* the optimistic selection; Panels render the committed one, so a suspending panel keeps the
+* current panel on screen while the Root and the selected Tab show `data-pending`.
+*/
+const Tabs = {
+	Root: TabsRoot,
+	List: TabsList,
+	Tab: TabsTab,
+	Panel: TabsPanel,
+	Indicator: TabsIndicator
+};
+//#endregion
+export { Tabs };
+
+//# sourceMappingURL=index.mjs.map

package/dist/tabs/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/tabs/index.ts"],"sourcesContent":["// Ships the platform attribute typings with this subpath (conventions 7.4). Type-only: the\n// built JS has no import of it.\nimport \"../internal/platform-attributes.js\";\nimport { TabsIndicator } from \"./tabs-indicator.js\";\nimport { TabsList } from \"./tabs-list.js\";\nimport { TabsPanel } from \"./tabs-panel.js\";\nimport { TabsRoot } from \"./tabs-root.js\";\nimport { TabsTab } from \"./tabs-tab.js\";\n\n/**\n * Tabs (WAI-ARIA APG Tabs pattern): `Root` (div) > `List` (tablist) > `Tab` (button) and an\n * optional `Indicator` (span), plus one `Panel` (tabpanel) per tab. Tabs and the Indicator render\n * the optimistic selection; Panels render the committed one, so a suspending panel keeps the\n * current panel on screen while the Root and the selected Tab show `data-pending`.\n */\nexport const Tabs = {\n  Root: TabsRoot,\n  List: TabsList,\n  Tab: TabsTab,\n  Panel: TabsPanel,\n  Indicator: TabsIndicator,\n} as const;\n\nexport type {\n  TabsRootProps,\n  TabsRootState,\n  TabsValueChangeDetails,\n  TabsOrientation,\n  TabsActivationMode,\n} from \"./tabs-root.js\";\nexport type { TabsListProps, TabsListState } from \"./tabs-list.js\";\nexport type { TabsTabProps, TabsTabState } from \"./tabs-tab.js\";\nexport type { TabsPanelProps, TabsPanelState } from \"./tabs-panel.js\";\nexport type { TabsIndicatorProps, TabsIndicatorState } from \"./tabs-indicator.js\";\n"],"mappings":";;;;;;;;;;;;AAeA,MAAa,OAAO;CAClB,MAAM;CACN,MAAM;CACN,KAAK;CACL,OAAO;CACP,WAAW;AACb"}

package/dist/tabs/tabs-context.d.mts

@@ -0,0 +1,7 @@
+//#region src/tabs/tabs-context.d.ts
+export type TabsOrientation = "horizontal" | "vertical";
+export type TabsActivationMode = "automatic" | "manual";
+/** Why a Tabs change was dispatched (design section 3.1). */
+export type TabsChangeReason = "activate" | "platform";
+//#endregion
+//# sourceMappingURL=tabs-context.d.mts.map

package/dist/tabs/tabs-context.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-context.d.mts","names":[],"sources":["../../src/tabs/tabs-context.ts"],"mappings":";YAGY;YACA;;YAGA"}

package/dist/tabs/tabs-context.mjs

@@ -0,0 +1,13 @@
+"use client";
+import { createContext, use } from "react";
+//#region src/tabs/tabs-context.ts
+const TabsContext = createContext(null);
+function useTabsContext(part) {
+	const context = use(TabsContext);
+	if (context === null) throw new Error(`${part} must be rendered inside a Tabs.Root.`);
+	return context;
+}
+//#endregion
+export { TabsContext, useTabsContext };
+
+//# sourceMappingURL=tabs-context.mjs.map

package/dist/tabs/tabs-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-context.mjs","names":[],"sources":["../../src/tabs/tabs-context.ts"],"sourcesContent":["\"use client\";\nimport { createContext, use } from \"react\";\n\nexport type TabsOrientation = \"horizontal\" | \"vertical\";\nexport type TabsActivationMode = \"automatic\" | \"manual\";\n\n/** Why a Tabs change was dispatched (design section 3.1). */\nexport type TabsChangeReason = \"activate\" | \"platform\";\n\nexport interface TabsContextValue {\n  readonly rootId: string;\n  /** Committed value: Panels render this. */\n  readonly committed: string | null;\n  /** Optimistic value: Tabs and the Indicator render this. */\n  readonly optimistic: string | null;\n  readonly pending: boolean;\n  readonly orientation: TabsOrientation;\n  readonly activationMode: TabsActivationMode;\n  readonly loop: boolean;\n  readonly disabled: boolean;\n  /** Dispatches a change. No-op if `value` is the optimistic value. Never checks `disabled`. */\n  readonly select: (value: string, event: Event | undefined, reason: TabsChangeReason) => void;\n}\n\nexport const TabsContext = createContext<TabsContextValue | null>(null);\n\nexport function useTabsContext(part: string): TabsContextValue {\n  const context = use(TabsContext);\n  if (context === null) {\n    throw new Error(`${part} must be rendered inside a Tabs.Root.`);\n  }\n  return context;\n}\n"],"mappings":";;;AAwBA,MAAa,cAAc,cAAuC,IAAI;AAEtE,SAAgB,eAAe,MAAgC;CAC7D,MAAM,UAAU,IAAI,WAAW;CAC/B,IAAI,YAAY,MACd,MAAM,IAAI,MAAM,GAAG,KAAK,sCAAsC;CAEhE,OAAO;AACT"}

package/dist/tabs/tabs-ids.mjs

@@ -0,0 +1,39 @@
+//#region src/tabs/tabs-ids.ts
+/**
+* Id derivation for Tabs (design section 6). Every part derives its ids from the Root's `useId`
+* and the tab `value`, so there is no registration pass and no extra render.
+*
+* No `"use client"` directive: pure functions, importable from anywhere (conventions 7.1).
+*/
+function escapeChar(char) {
+	return `_${(char.codePointAt(0) ?? 0).toString(16)}_`;
+}
+/**
+* Makes `value` safe as both an HTML id fragment and a CSS dashed-ident suffix. Every character
+* outside `[A-Za-z0-9-]` becomes `_<hex code point>_`. `_` itself is escaped too (`_5f_`), so the
+* mapping is injective: `"a b"` and `"a_20_"` never share an id.
+*/
+function slug(value) {
+	return value.replace(/[^A-Za-z0-9-]/gu, escapeChar);
+}
+/**
+* The Root id from `useId` (`_r_1_` on React 19.3) is already a valid id and CSS ident; anything
+* else (a custom `identifierPrefix`) is escaped defensively for the anchor name, keeping `_`.
+*/
+function cssSafeRootId(rootId) {
+	return rootId.replace(/[^A-Za-z0-9_-]/gu, escapeChar);
+}
+function tabId(rootId, value) {
+	return `${rootId}-tab-${slug(value)}`;
+}
+function panelId(rootId, value) {
+	return `${rootId}-panel-${slug(value)}`;
+}
+/** `anchor-name` of a Tab, and `position-anchor` of the Indicator that points at it. */
+function anchorName(rootId, value) {
+	return `--fsui-tab-${cssSafeRootId(rootId)}-tab-${slug(value)}`;
+}
+//#endregion
+export { anchorName, panelId, slug, tabId };
+
+//# sourceMappingURL=tabs-ids.mjs.map

package/dist/tabs/tabs-ids.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-ids.mjs","names":[],"sources":["../../src/tabs/tabs-ids.ts"],"sourcesContent":["/**\n * Id derivation for Tabs (design section 6). Every part derives its ids from the Root's `useId`\n * and the tab `value`, so there is no registration pass and no extra render.\n *\n * No `\"use client\"` directive: pure functions, importable from anywhere (conventions 7.1).\n */\n\nfunction escapeChar(char: string): string {\n  return `_${(char.codePointAt(0) ?? 0).toString(16)}_`;\n}\n\n/**\n * Makes `value` safe as both an HTML id fragment and a CSS dashed-ident suffix. Every character\n * outside `[A-Za-z0-9-]` becomes `_<hex code point>_`. `_` itself is escaped too (`_5f_`), so the\n * mapping is injective: `\"a b\"` and `\"a_20_\"` never share an id.\n */\nexport function slug(value: string): string {\n  return value.replace(/[^A-Za-z0-9-]/gu, escapeChar);\n}\n\n/**\n * The Root id from `useId` (`_r_1_` on React 19.3) is already a valid id and CSS ident; anything\n * else (a custom `identifierPrefix`) is escaped defensively for the anchor name, keeping `_`.\n */\nfunction cssSafeRootId(rootId: string): string {\n  return rootId.replace(/[^A-Za-z0-9_-]/gu, escapeChar);\n}\n\nexport function tabId(rootId: string, value: string): string {\n  return `${rootId}-tab-${slug(value)}`;\n}\n\nexport function panelId(rootId: string, value: string): string {\n  return `${rootId}-panel-${slug(value)}`;\n}\n\n/** `anchor-name` of a Tab, and `position-anchor` of the Indicator that points at it. */\nexport function anchorName(rootId: string, value: string): `--${string}` {\n  return `--fsui-tab-${cssSafeRootId(rootId)}-tab-${slug(value)}`;\n}\n"],"mappings":";;;;;;;AAOA,SAAS,WAAW,MAAsB;CACxC,OAAO,KAAK,KAAK,YAAY,CAAC,KAAK,EAAA,CAAG,SAAS,EAAE,EAAE;AACrD;;;;;;AAOA,SAAgB,KAAK,OAAuB;CAC1C,OAAO,MAAM,QAAQ,mBAAmB,UAAU;AACpD;;;;;AAMA,SAAS,cAAc,QAAwB;CAC7C,OAAO,OAAO,QAAQ,oBAAoB,UAAU;AACtD;AAEA,SAAgB,MAAM,QAAgB,OAAuB;CAC3D,OAAO,GAAG,OAAO,OAAO,KAAK,KAAK;AACpC;AAEA,SAAgB,QAAQ,QAAgB,OAAuB;CAC7D,OAAO,GAAG,OAAO,SAAS,KAAK,KAAK;AACtC;;AAGA,SAAgB,WAAW,QAAgB,OAA8B;CACvE,OAAO,cAAc,cAAc,MAAM,EAAE,OAAO,KAAK,KAAK;AAC9D"}

package/dist/tabs/tabs-indicator.d.mts

@@ -0,0 +1,32 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { TabsOrientation } from "./tabs-context.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/tabs/tabs-indicator.d.ts
+export interface TabsIndicatorState {
+  /** Optimistic selected value, or `null` (the indicator is then `hidden`). */
+  readonly value: string | null;
+  readonly pending: boolean;
+  readonly orientation: TabsOrientation;
+}
+export interface TabsIndicatorProps extends Omit<ComponentPropsWithRef<"span">, "hidden" | "className" | "style" | "children"> {
+  className?: StateValue<string | undefined, TabsIndicatorState>;
+  style?: StateValue<CSSProperties | undefined, TabsIndicatorState>;
+  children?: StateValue<ReactNode, TabsIndicatorState>;
+  render?: RenderProp<ComponentPropsWithRef<"span">, TabsIndicatorState>;
+}
+/**
+ * A decorative marker that follows the optimistic selection. Positioned by CSS Anchor
+ * Positioning: it sets `position-anchor` to the selected Tab's `anchor-name`; the consumer's CSS
+ * gives it `position: absolute` and `anchor()` insets, and a CSS `transition` on those insets
+ * slides it. It must come after the Tabs inside `Tabs.List` (an anchor must precede the
+ * positioned element in tree order). No `<ViewTransition>`: it changes only in optimistic (sync)
+ * commits, which never start a view transition (design 10.1).
+ *
+ * Owned keys (conventions 1.2): `aria-hidden`, `hidden`, `data-selected`, `data-pending`.
+ */
+export declare function TabsIndicator({ className, style, children, render, ...rest }: TabsIndicatorProps): ReactNode;
+export declare namespace TabsIndicator {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=tabs-indicator.d.mts.map

package/dist/tabs/tabs-indicator.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-indicator.d.mts","names":[],"sources":["../../src/tabs/tabs-indicator.tsx"],"mappings":";;;;iBASiB;;WAEN;WACA;WACA,aAAa;;iBAGP,2BAA2B,KAC1C;EAGA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,+BAA+B;;;;;;;;;;;;wBAarC,gBAAgB,WAAW,OAAO,UAAU,WAAW,QAAQ,qBAAkB;yBAAjF"}

package/dist/tabs/tabs-indicator.mjs

@@ -0,0 +1,49 @@
+"use client";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { resolveStateValue, useRender } from "../internal/use-render.mjs";
+import { useTabsContext } from "./tabs-context.mjs";
+import { anchorName } from "./tabs-ids.mjs";
+//#region src/tabs/tabs-indicator.tsx
+/**
+* A decorative marker that follows the optimistic selection. Positioned by CSS Anchor
+* Positioning: it sets `position-anchor` to the selected Tab's `anchor-name`; the consumer's CSS
+* gives it `position: absolute` and `anchor()` insets, and a CSS `transition` on those insets
+* slides it. It must come after the Tabs inside `Tabs.List` (an anchor must precede the
+* positioned element in tree order). No `<ViewTransition>`: it changes only in optimistic (sync)
+* commits, which never start a view transition (design 10.1).
+*
+* Owned keys (conventions 1.2): `aria-hidden`, `hidden`, `data-selected`, `data-pending`.
+*/
+function TabsIndicator({ className, style, children, render, ...rest }) {
+	const ctx = useTabsContext("Tabs.Indicator");
+	const value = ctx.optimistic;
+	const state = {
+		value,
+		pending: ctx.pending,
+		orientation: ctx.orientation
+	};
+	const anchor = value === null ? void 0 : anchorName(ctx.rootId, value);
+	return useRender({
+		defaultElement: "span",
+		render,
+		state,
+		className,
+		style: (s) => ({
+			positionAnchor: anchor,
+			...resolveStateValue(style, s)
+		}),
+		children,
+		props: rest,
+		libraryProps: {
+			"aria-hidden": true,
+			hidden: value === null,
+			"data-selected": dataAttr(value !== null),
+			"data-pending": dataAttr(ctx.pending)
+		}
+	});
+}
+TabsIndicator.displayName = "TabsIndicator";
+//#endregion
+export { TabsIndicator };
+
+//# sourceMappingURL=tabs-indicator.mjs.map

package/dist/tabs/tabs-indicator.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-indicator.mjs","names":[],"sources":["../../src/tabs/tabs-indicator.tsx"],"sourcesContent":["\"use client\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode } from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { resolveStateValue, useRender } from \"../internal/use-render.js\";\nimport { useTabsContext } from \"./tabs-context.js\";\nimport type { TabsOrientation } from \"./tabs-context.js\";\nimport { anchorName } from \"./tabs-ids.js\";\n\nexport interface TabsIndicatorState {\n  /** Optimistic selected value, or `null` (the indicator is then `hidden`). */\n  readonly value: string | null;\n  readonly pending: boolean;\n  readonly orientation: TabsOrientation;\n}\n\nexport interface TabsIndicatorProps extends Omit<\n  ComponentPropsWithRef<\"span\">,\n  \"hidden\" | \"className\" | \"style\" | \"children\"\n> {\n  className?: StateValue<string | undefined, TabsIndicatorState>;\n  style?: StateValue<CSSProperties | undefined, TabsIndicatorState>;\n  children?: StateValue<ReactNode, TabsIndicatorState>;\n  render?: RenderProp<ComponentPropsWithRef<\"span\">, TabsIndicatorState>;\n}\n\n/**\n * A decorative marker that follows the optimistic selection. Positioned by CSS Anchor\n * Positioning: it sets `position-anchor` to the selected Tab's `anchor-name`; the consumer's CSS\n * gives it `position: absolute` and `anchor()` insets, and a CSS `transition` on those insets\n * slides it. It must come after the Tabs inside `Tabs.List` (an anchor must precede the\n * positioned element in tree order). No `<ViewTransition>`: it changes only in optimistic (sync)\n * commits, which never start a view transition (design 10.1).\n *\n * Owned keys (conventions 1.2): `aria-hidden`, `hidden`, `data-selected`, `data-pending`.\n */\nexport function TabsIndicator({ className, style, children, render, ...rest }: TabsIndicatorProps) {\n  const ctx = useTabsContext(\"Tabs.Indicator\");\n  const value = ctx.optimistic;\n  const state: TabsIndicatorState = {\n    value,\n    pending: ctx.pending,\n    orientation: ctx.orientation,\n  };\n  const anchor = value === null ? undefined : anchorName(ctx.rootId, value);\n\n  return useRender<ComponentPropsWithRef<\"span\">, TabsIndicatorState>({\n    defaultElement: \"span\",\n    render,\n    state,\n    className,\n    // `position-anchor` sits under the consumer's style: the consumer wins.\n    style: (s) => ({ positionAnchor: anchor, ...resolveStateValue(style, s) }),\n    children,\n    props: rest,\n    libraryProps: {\n      \"aria-hidden\": true,\n      hidden: value === null,\n      \"data-selected\": dataAttr(value !== null),\n      \"data-pending\": dataAttr(ctx.pending),\n    },\n  });\n}\n\nTabsIndicator.displayName = \"TabsIndicator\";\n"],"mappings":";;;;;;;;;;;;;;;;AAoCA,SAAgB,cAAc,EAAE,WAAW,OAAO,UAAU,QAAQ,GAAG,QAA4B;CACjG,MAAM,MAAM,eAAe,gBAAgB;CAC3C,MAAM,QAAQ,IAAI;CAClB,MAAM,QAA4B;EAChC;EACA,SAAS,IAAI;EACb,aAAa,IAAI;CACnB;CACA,MAAM,SAAS,UAAU,OAAO,KAAA,IAAY,WAAW,IAAI,QAAQ,KAAK;CAExE,OAAO,UAA6D;EAClE,gBAAgB;EAChB;EACA;EACA;EAEA,QAAQ,OAAO;GAAE,gBAAgB;GAAQ,GAAG,kBAAkB,OAAO,CAAC;EAAE;EACxE;EACA,OAAO;EACP,cAAc;GACZ,eAAe;GACf,QAAQ,UAAU;GAClB,iBAAiB,SAAS,UAAU,IAAI;GACxC,gBAAgB,SAAS,IAAI,OAAO;EACtC;CACF,CAAC;AACH;AAEA,cAAc,cAAc"}

package/dist/tabs/tabs-list.d.mts

@@ -0,0 +1,34 @@
+import { RenderProp, StateValue } from "../internal/types.mjs";
+import { TabsOrientation } from "./tabs-context.mjs";
+import { CSSProperties, ComponentPropsWithRef, ReactNode } from "react";
+//#region src/tabs/tabs-list.d.ts
+export interface TabsListState {
+  readonly orientation: TabsOrientation;
+  readonly disabled: boolean;
+}
+export interface TabsListProps extends Omit<ComponentPropsWithRef<"div">, "onKeyDown" | "onFocus" | "className" | "style" | "children"> {
+  /**
+   * Render `focusgroup="tablist …"` and, where the browser implements it, let the browser handle
+   * arrow keys, Home and End. Chromium 150+ only; elsewhere the JS path stays active.
+   * Default `false`.
+   */
+  experimental_focusgroup?: boolean;
+  className?: StateValue<string | undefined, TabsListState>;
+  style?: StateValue<CSSProperties | undefined, TabsListState>;
+  children?: StateValue<ReactNode, TabsListState>;
+  render?: RenderProp<ComponentPropsWithRef<"div">, TabsListState>;
+}
+/**
+ * The `role="tablist"` container. Owns arrow-key / Home / End navigation between Tabs: it only
+ * moves focus; automatic activation happens in the Tab's focus handler.
+ *
+ * Owned keys (a `render` element cannot override them, conventions 1.2): `role`,
+ * `aria-orientation`, `data-orientation`, `data-disabled`, `tabIndex`, `onKeyDown`, `onFocus`,
+ * and `focusgroup` when `experimental_focusgroup` is on.
+ */
+export declare function TabsList({ experimental_focusgroup, className, style, children, render, ...rest }: TabsListProps): ReactNode;
+export declare namespace TabsList {
+  var displayName: string;
+}
+//#endregion
+//# sourceMappingURL=tabs-list.d.mts.map

package/dist/tabs/tabs-list.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-list.d.mts","names":[],"sources":["../../src/tabs/tabs-list.tsx"],"mappings":";;;;iBAgBiB;WACN,aAAa;WACb;;iBAGM,sBAAsB,KACrC;;;;;;EAQA;EACA,YAAY,+BAA+B;EAC3C,QAAQ,WAAW,2BAA2B;EAC9C,WAAW,WAAW,WAAW;EACjC,SAAS,WAAW,8BAA8B;;;;;;;;;;wBA4CpC,WACd,yBACA,WACA,OACA,UACA,WACG,QACF,gBAAa;yBAPA"}

package/dist/tabs/tabs-list.mjs

@@ -0,0 +1,122 @@
+"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 { useTabsContext } from "./tabs-context.mjs";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+//#region src/tabs/tabs-list.tsx
+function resolveKey(key, orientation, rtl) {
+	switch (key) {
+		case "Home": return "first";
+		case "End": return "last";
+		case "ArrowRight": return orientation === "horizontal" ? rtl ? "prev" : "next" : null;
+		case "ArrowLeft": return orientation === "horizontal" ? rtl ? "next" : "prev" : null;
+		case "ArrowDown": return orientation === "vertical" ? "next" : null;
+		case "ArrowUp": return orientation === "vertical" ? "prev" : null;
+		default: return null;
+	}
+}
+/** The tabs that belong to `list` (not to a nested tablist), in DOM order. Disabled included. */
+function tabsOf(list) {
+	return Array.from(list.querySelectorAll("[role=\"tab\"]")).filter((tab) => tab.closest("[role=\"tablist\"]") === list);
+}
+function focusTab(tab) {
+	tab.focus({ focusVisible: true });
+}
+/**
+* The `role="tablist"` container. Owns arrow-key / Home / End navigation between Tabs: it only
+* moves focus; automatic activation happens in the Tab's focus handler.
+*
+* Owned keys (a `render` element cannot override them, conventions 1.2): `role`,
+* `aria-orientation`, `data-orientation`, `data-disabled`, `tabIndex`, `onKeyDown`, `onFocus`,
+* and `focusgroup` when `experimental_focusgroup` is on.
+*/
+function TabsList({ experimental_focusgroup = false, className, style, children, render, ...rest }) {
+	const { orientation, loop, disabled, optimistic } = useTabsContext("Tabs.List");
+	const nativeFocusgroup = useRef(false);
+	useEffect(() => {
+		nativeFocusgroup.current = experimental_focusgroup && "focusgroup" in HTMLElement.prototype;
+	}, [experimental_focusgroup]);
+	const listRef = useRef(null);
+	const [unmatched, setUnmatched] = useState(false);
+	useLayoutEffect(() => {
+		const list = listRef.current;
+		const next = optimistic !== null && list !== null && !tabsOf(list).some((tab) => tab.getAttribute("tabindex") === "0");
+		if (next !== unmatched) setUnmatched(next);
+	}, [
+		optimistic,
+		children,
+		unmatched
+	]);
+	useDevWarning(unmatched, `Tabs: the value ${JSON.stringify(optimistic)} matches no Tabs.Tab. No tab is selected; the tablist itself is the tab stop. Pass null to select nothing on purpose.`);
+	const listIsTabStop = optimistic === null || unmatched;
+	const state = {
+		orientation,
+		disabled
+	};
+	const onKeyDown = (event) => {
+		if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
+		const list = event.currentTarget;
+		const target = event.target;
+		if (target.getAttribute("role") !== "tab" || target.closest("[role=\"tablist\"]") !== list) return;
+		const rtl = orientation === "horizontal" && getComputedStyle(list).direction === "rtl";
+		const move = resolveKey(event.key, orientation, rtl);
+		if (move === null) return;
+		if (nativeFocusgroup.current) return;
+		event.preventDefault();
+		const tabs = tabsOf(list);
+		if (tabs.length === 0) return;
+		const index = tabs.indexOf(target);
+		const last = tabs.length - 1;
+		let nextIndex;
+		switch (move) {
+			case "first":
+				nextIndex = 0;
+				break;
+			case "last":
+				nextIndex = last;
+				break;
+			case "next":
+				nextIndex = index >= last ? loop ? 0 : last : index + 1;
+				break;
+			case "prev": nextIndex = index <= 0 ? loop ? last : 0 : index - 1;
+		}
+		const next = tabs[nextIndex];
+		if (next !== void 0 && next !== target) focusTab(next);
+	};
+	const onFocus = (event) => {
+		const list = event.currentTarget;
+		if (event.target !== list || !listIsTabStop) return;
+		const from = event.relatedTarget;
+		if (from instanceof Node && list.contains(from)) return;
+		const tabs = tabsOf(list);
+		const first = tabs.find((tab) => tab.getAttribute("aria-disabled") !== "true") ?? tabs[0];
+		if (first !== void 0) focusTab(first);
+	};
+	const focusgroup = experimental_focusgroup ? `tablist ${orientation === "vertical" ? "block" : "inline"} ${loop ? "wrap" : "nowrap"}` : void 0;
+	return useRender({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps: {
+			role: "tablist",
+			"aria-orientation": orientation,
+			"data-orientation": orientation,
+			"data-disabled": dataAttr(disabled),
+			tabIndex: listIsTabStop ? 0 : void 0,
+			...focusgroup !== void 0 && { focusgroup },
+			onKeyDown,
+			onFocus
+		},
+		ref: listRef
+	});
+}
+TabsList.displayName = "TabsList";
+//#endregion
+export { TabsList };
+
+//# sourceMappingURL=tabs-list.mjs.map

package/dist/tabs/tabs-list.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-list.mjs","names":[],"sources":["../../src/tabs/tabs-list.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithRef,\n  CSSProperties,\n  FocusEvent,\n  KeyboardEvent,\n  ReactNode,\n} from \"react\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport type { RenderProp, StateValue } from \"../internal/types.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport { useTabsContext } from \"./tabs-context.js\";\nimport type { TabsOrientation } from \"./tabs-context.js\";\n\nexport interface TabsListState {\n  readonly orientation: TabsOrientation;\n  readonly disabled: boolean;\n}\n\nexport interface TabsListProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"onKeyDown\" | \"onFocus\" | \"className\" | \"style\" | \"children\"\n> {\n  /**\n   * Render `focusgroup=\"tablist …\"` and, where the browser implements it, let the browser handle\n   * arrow keys, Home and End. Chromium 150+ only; elsewhere the JS path stays active.\n   * Default `false`.\n   */\n  experimental_focusgroup?: boolean;\n  className?: StateValue<string | undefined, TabsListState>;\n  style?: StateValue<CSSProperties | undefined, TabsListState>;\n  children?: StateValue<ReactNode, TabsListState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, TabsListState>;\n}\n\ntype Move = \"next\" | \"prev\" | \"first\" | \"last\";\n\nfunction resolveKey(key: string, orientation: TabsOrientation, rtl: boolean): Move | null {\n  switch (key) {\n    case \"Home\":\n      return \"first\";\n    case \"End\":\n      return \"last\";\n    case \"ArrowRight\":\n      return orientation === \"horizontal\" ? (rtl ? \"prev\" : \"next\") : null;\n    case \"ArrowLeft\":\n      return orientation === \"horizontal\" ? (rtl ? \"next\" : \"prev\") : null;\n    case \"ArrowDown\":\n      return orientation === \"vertical\" ? \"next\" : null;\n    case \"ArrowUp\":\n      return orientation === \"vertical\" ? \"prev\" : null;\n    default:\n      return null;\n  }\n}\n\n/** The tabs that belong to `list` (not to a nested tablist), in DOM order. Disabled included. */\nfunction tabsOf(list: Element): HTMLElement[] {\n  return Array.from(list.querySelectorAll<HTMLElement>('[role=\"tab\"]')).filter(\n    (tab) => tab.closest('[role=\"tablist\"]') === list,\n  );\n}\n\nfunction focusTab(tab: HTMLElement): void {\n  // `focusVisible` shows the ring even where the engine's heuristic would not (survey: adopt).\n  tab.focus({ focusVisible: true } as FocusOptions);\n}\n\n/**\n * The `role=\"tablist\"` container. Owns arrow-key / Home / End navigation between Tabs: it only\n * moves focus; automatic activation happens in the Tab's focus handler.\n *\n * Owned keys (a `render` element cannot override them, conventions 1.2): `role`,\n * `aria-orientation`, `data-orientation`, `data-disabled`, `tabIndex`, `onKeyDown`, `onFocus`,\n * and `focusgroup` when `experimental_focusgroup` is on.\n */\nexport function TabsList({\n  experimental_focusgroup = false,\n  className,\n  style,\n  children,\n  render,\n  ...rest\n}: TabsListProps) {\n  const ctx = useTabsContext(\"Tabs.List\");\n  const { orientation, loop, disabled, optimistic } = ctx;\n\n  // Feature detection only when the flag is on, and only in an effect (conventions 8): markup\n  // never differs between server and client.\n  const nativeFocusgroup = useRef(false);\n  useEffect(() => {\n    nativeFocusgroup.current = experimental_focusgroup && \"focusgroup\" in HTMLElement.prototype;\n  }, [experimental_focusgroup]);\n\n  // A value that matches no Tab (a controlled `value` for a route without a tab, design 11.5)\n  // leaves no tab with tabindex=0, so the List takes over as the tab stop exactly as for `null`.\n  // Read from the DOM (Tabs register nowhere) whenever the value or the List's children change; a\n  // Tab added or removed by a component below that re-renders on its own is picked up on the\n  // List's next render. The state only changes when the answer does.\n  const listRef = useRef<HTMLElement | null>(null);\n  const [unmatched, setUnmatched] = useState(false);\n  useLayoutEffect(() => {\n    const list = listRef.current;\n    const next =\n      optimistic !== null &&\n      list !== null &&\n      !tabsOf(list).some((tab) => tab.getAttribute(\"tabindex\") === \"0\");\n    if (next !== unmatched) setUnmatched(next);\n  }, [optimistic, children, unmatched]);\n  useDevWarning(\n    unmatched,\n    `Tabs: the value ${JSON.stringify(optimistic)} matches no Tabs.Tab. No tab is selected; the ` +\n      \"tablist itself is the tab stop. Pass null to select nothing on purpose.\",\n  );\n  const listIsTabStop = optimistic === null || unmatched;\n\n  const state: TabsListState = { orientation, disabled };\n\n  const onKeyDown = (event: KeyboardEvent<HTMLElement>) => {\n    if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;\n    const list = event.currentTarget;\n    const target = event.target as Element;\n    if (target.getAttribute(\"role\") !== \"tab\" || target.closest('[role=\"tablist\"]') !== list) {\n      return;\n    }\n    const rtl = orientation === \"horizontal\" && getComputedStyle(list).direction === \"rtl\";\n    const move = resolveKey(event.key, orientation, rtl);\n    if (move === null) return;\n    // The browser moves focus itself where `focusgroup` is implemented.\n    if (nativeFocusgroup.current) return;\n\n    event.preventDefault();\n    const tabs = tabsOf(list);\n    if (tabs.length === 0) return;\n    const index = tabs.indexOf(target as HTMLElement);\n    const last = tabs.length - 1;\n    let nextIndex: number;\n    switch (move) {\n      case \"first\":\n        nextIndex = 0;\n        break;\n      case \"last\":\n        nextIndex = last;\n        break;\n      case \"next\":\n        nextIndex = index >= last ? (loop ? 0 : last) : index + 1;\n        break;\n      case \"prev\":\n        nextIndex = index <= 0 ? (loop ? last : 0) : index - 1;\n        break;\n    }\n    const next = tabs[nextIndex];\n    if (next !== undefined && next !== target) focusTab(next);\n  };\n\n  // With no selected tab (value null or matching no Tab) no Tab has tabindex=0, so the list\n  // itself is the tab stop and hands focus to the first enabled tab (design section 8). Only when\n  // focus arrives from outside the list: Shift+Tab from a tab inside would otherwise bounce\n  // straight back. The redirect never selects: the Tab only dispatches on focus that moves\n  // between tabs.\n  const onFocus = (event: FocusEvent<HTMLElement>) => {\n    const list = event.currentTarget;\n    if (event.target !== list || !listIsTabStop) return;\n    const from = event.relatedTarget;\n    if (from instanceof Node && list.contains(from)) return;\n    const tabs = tabsOf(list);\n    const first = tabs.find((tab) => tab.getAttribute(\"aria-disabled\") !== \"true\") ?? tabs[0];\n    if (first !== undefined) focusTab(first);\n  };\n\n  const focusgroup = experimental_focusgroup\n    ? `tablist ${orientation === \"vertical\" ? \"block\" : \"inline\"} ${loop ? \"wrap\" : \"nowrap\"}`\n    : undefined;\n\n  return useRender<ComponentPropsWithRef<\"div\">, TabsListState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps: {\n      role: \"tablist\",\n      \"aria-orientation\": orientation,\n      \"data-orientation\": orientation,\n      \"data-disabled\": dataAttr(disabled),\n      tabIndex: listIsTabStop ? 0 : undefined,\n      // Owned only while the flag is on; otherwise the key is omitted, not `undefined`, so it is not\n      // owned (conventions 1.2).\n      ...(focusgroup !== undefined && { focusgroup }),\n      onKeyDown,\n      onFocus,\n    },\n    ref: listRef,\n  });\n}\n\nTabsList.displayName = \"TabsList\";\n"],"mappings":"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"}