@maanlamp/react-web-ui 0.0.0-stage → 0.1.1

package/dist/components/switch-field/switch.css

@@ -0,0 +1,138 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._root_75lbt_3 {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--switch-gap, var(--sys-unit-8));
+  }
+  ._label_75lbt_9 {
+    cursor: pointer;
+  }
+  ._label_75lbt_9:hover ._control_75lbt_12 {
+    border-color: var(--sys-color-primary);
+  }
+  :where([data-readonly], [data-disabled]) ._label_75lbt_9 {
+    cursor: default;
+  }
+  :where([data-readonly], [data-disabled]) ._label_75lbt_9:hover ._control_75lbt_12:not([data-checked]) {
+    border-color: var(--box-border, var(--sys-color-border));
+  }
+  ._label_75lbt_9 {
+    display: inline-grid;
+    grid-template-columns: auto 1fr;
+    grid-template-areas: "control text";
+    align-items: center;
+    gap: var(--sys-unit-1) var(--sys-unit-6);
+  }
+  ._label_75lbt_9:has(> [data-optional-suffix]) {
+    grid-template-areas: "control text" "control optional";
+  }
+  ._label_75lbt_9 {
+    min-block-size: var(--sys-unit-20);
+  }
+  ._control_75lbt_12 {
+    --_switch-track-inline-size: var(
+    	--switch-track-inline-size,
+    	var(--sys-unit-26)
+    );
+    --_switch-track-block-size: var(
+    	--switch-track-block-size,
+    	var(--sys-unit-16)
+    );
+    --_switch-track-inset: calc(1px + var(--sys-unit-2));
+    --_switch-thumb-size: calc(
+    	var(--_switch-track-block-size) - 2 *
+    		var(--_switch-track-inset)
+    );
+    --_switch-travel: calc(
+    	var(--_switch-track-inline-size) - 2 *
+    		var(--_switch-track-inset) -
+    		var(--_switch-thumb-size)
+    );
+    --_switch-thumb-bg: var(
+    	--switch-thumb-bg,
+    	var(--sys-color-outline)
+    );
+    --_switch-on-bg: var(
+    	--switch-on-bg,
+    	var(--sys-color-primary)
+    );
+    position: relative;
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    grid-area: control;
+    align-self: center;
+    justify-self: center;
+    box-sizing: border-box;
+    inline-size: var(--_switch-track-inline-size);
+    block-size: var(--_switch-track-block-size);
+    border: 1px solid var(--switch-border, var(--sys-color-border));
+    border-radius: var(--sys-radius-full);
+    background: var(--switch-track-bg, var(--sys-color-surface));
+    padding: var(--sys-unit-2);
+    color: var(--switch-on-thumb-bg, var(--sys-color-on-primary));
+  }
+  ._control_75lbt_12 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._control_75lbt_12[data-focus-visible] {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  @media not (prefers-reduced-motion) {
+    ._control_75lbt_12 {
+      transition: background var(--sys-motion-instant) var(--sys-motion-standard), border-color var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._control_75lbt_12[data-focused] {
+    border-color: var(--_switch-on-bg);
+  }
+  ._control_75lbt_12[data-checked] {
+    border-color: var(--_switch-on-bg);
+    background: var(--_switch-on-bg);
+  }
+  ._control_75lbt_12[data-invalid] {
+    --field-fg: var(--sys-color-error-fg);
+    --field-muted-fg: var(--sys-color-error-fg);
+    border-color: var(--sys-color-error-fg);
+    background-color: var(--sys-color-error-bg);
+    color: var(--field-fg);
+    --_switch-thumb-bg: var(--sys-color-error-outline);
+  }
+  ._control_75lbt_12[data-invalid][data-checked] {
+    background: var(--sys-color-error-fg);
+    color: var(--sys-color-error-bg);
+  }
+  ._control_75lbt_12[data-readonly] {
+    --field-fg: var(--sys-color-text);
+    border-style: dashed;
+    border-color: var(--sys-color-outline);
+    background: var(--sys-color-surface-high);
+    color: var(--field-fg);
+  }
+  ._control_75lbt_12[data-readonly][data-checked] {
+    background: var(--sys-color-primary-container);
+  }
+  ._control_75lbt_12[data-disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  ._thumb_75lbt_122 {
+    inline-size: var(--_switch-thumb-size);
+    block-size: var(--_switch-thumb-size);
+    border-radius: var(--sys-radius-circle);
+    background: var(--_switch-thumb-bg);
+    translate: 0;
+  }
+  @media not (prefers-reduced-motion) {
+    ._thumb_75lbt_122 {
+      transition: translate var(--sys-motion-short) var(--sys-motion-emphasized), background var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._thumb_75lbt_122[data-checked] {
+    background: currentcolor;
+    translate: var(--_switch-travel);
+  }
+}

package/dist/components/switch-field/switch.d.ts

@@ -0,0 +1,36 @@
+import { Field as BaseField } from "@base-ui/react/field";
+import { Switch as BaseSwitch } from "@base-ui/react/switch";
+import type { ReactNode } from "react";
+import { Field, type FieldProps, type FieldRootProps } from "../field/index.ts";
+export type SwitchRootProps = FieldRootProps & Pick<FieldProps, "errors" | "requiredness" | "dirty" | "touched" | "pending"> & Readonly<{
+    /** The switch is on. */
+    filled?: boolean;
+    readOnly?: boolean;
+}>;
+declare const SwitchRoot: ({ errors, requiredness, dirty, touched, pending, filled, readOnly, disabled, className, ...props }: SwitchRootProps) => ReactNode;
+declare const SwitchLabel: ({ className, ...props }: BaseField.Label.Props) => ReactNode;
+declare const SwitchControl: ({ className, ...props }: BaseSwitch.Root.Props) => ReactNode;
+/** The parts of a switch. */
+export type SwitchParts = Readonly<{
+    Root: typeof SwitchRoot;
+    Label: typeof SwitchLabel;
+    Control: typeof SwitchControl;
+    Description: typeof Field.Description;
+    Error: typeof Field.Error;
+}>;
+/**
+ * The styled parts of a base-ui Switch: a track with a sliding thumb that
+ * announces as a switch. `Label` wraps the control and its text, so the two
+ * share one hit area. For the ordinary case, use `SwitchField`.
+ *
+ * @example
+ * <Switch.Root filled={enabled}>
+ * 	<Switch.Label>
+ * 		<Switch.Control checked={enabled} onCheckedChange={setEnabled} />
+ * 		Email me about new messages
+ * 	</Switch.Label>
+ * </Switch.Root>
+ */
+export declare const Switch: SwitchParts;
+export {};
+//# sourceMappingURL=switch.d.ts.map

package/dist/components/switch-field/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../../src/components/switch-field/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAE7D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACN,KAAK,EACL,KAAK,UAAU,EACf,KAAK,cAAc,EAGnB,MAAM,mBAAmB,CAAC;AAI3B,MAAM,MAAM,eAAe,GAAG,cAAc,GAC3C,IAAI,CACH,UAAU,EACR,QAAQ,GACR,cAAc,GACd,OAAO,GACP,SAAS,GACT,SAAS,CACX,GACD,QAAQ,CAAC;IACR,wBAAwB;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEJ,QAAA,MAAM,UAAU,uGAWb,eAAe,KAAG,SAsBpB,CAAC;AAEF,QAAA,MAAM,WAAW,4BAGd,SAAS,CAAC,KAAK,CAAC,KAAK,KAAG,SAK1B,CAAC;AAEF,QAAA,MAAM,aAAa,4BAGhB,UAAU,CAAC,IAAI,CAAC,KAAK,KAAG,SAW1B,CAAC;AAEF,6BAA6B;AAC7B,MAAM,MAAM,WAAW,GAAG,QAAQ,CAAC;IAClC,IAAI,EAAE,OAAO,UAAU,CAAC;IACxB,KAAK,EAAE,OAAO,WAAW,CAAC;IAC1B,OAAO,EAAE,OAAO,aAAa,CAAC;IAC9B,WAAW,EAAE,OAAO,KAAK,CAAC,WAAW,CAAC;IACtC,KAAK,EAAE,OAAO,KAAK,CAAC,KAAK,CAAC;CAC1B,CAAC,CAAC;AAEH;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,MAAM,EAAE,WAMpB,CAAC"}

package/dist/components/switch-field/switch.js

@@ -0,0 +1,205 @@
+import { Field as Field$1 } from "../field/field.js";
+import { fieldStateAttributes } from "../field/field-state.js";
+import { useFieldFocus } from "../field/use-field-focus.js";
+import { normalizeFieldErrors } from "../../lib/forms/errors.js";
+import switch_module_default from "./switch.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Field } from "@base-ui/react/field";
+import { Switch } from "@base-ui/react/switch";
+// src/components/switch-field/switch.tsx
+var SwitchRoot = (t0) => {
+	const $ = c(32);
+	let className;
+	let dirty;
+	let disabled;
+	let errors;
+	let filled;
+	let pending;
+	let props;
+	let readOnly;
+	let requiredness;
+	let touched;
+	if ($[0] !== t0) {
+		({errors, requiredness, dirty, touched, pending, filled, readOnly, disabled, className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = dirty;
+		$[3] = disabled;
+		$[4] = errors;
+		$[5] = filled;
+		$[6] = pending;
+		$[7] = props;
+		$[8] = readOnly;
+		$[9] = requiredness;
+		$[10] = touched;
+	} else {
+		className = $[1];
+		dirty = $[2];
+		disabled = $[3];
+		errors = $[4];
+		filled = $[5];
+		pending = $[6];
+		props = $[7];
+		readOnly = $[8];
+		requiredness = $[9];
+		touched = $[10];
+	}
+	let t1;
+	if ($[11] !== errors) {
+		t1 = normalizeFieldErrors(errors);
+		$[11] = errors;
+		$[12] = t1;
+	} else t1 = $[12];
+	const invalid = t1.length > 0;
+	let t2;
+	if ($[13] !== className) {
+		t2 = clsx(switch_module_default.root, className);
+		$[13] = className;
+		$[14] = t2;
+	} else t2 = $[14];
+	let t3;
+	if ($[15] !== dirty || $[16] !== disabled || $[17] !== filled || $[18] !== invalid || $[19] !== pending || $[20] !== readOnly || $[21] !== requiredness || $[22] !== touched) {
+		t3 = fieldStateAttributes({
+			disabled,
+			readonly: readOnly,
+			requiredness,
+			invalid,
+			dirty,
+			touched,
+			pending,
+			filled
+		});
+		$[15] = dirty;
+		$[16] = disabled;
+		$[17] = filled;
+		$[18] = invalid;
+		$[19] = pending;
+		$[20] = readOnly;
+		$[21] = requiredness;
+		$[22] = touched;
+		$[23] = t3;
+	} else t3 = $[23];
+	let t4;
+	if ($[24] !== dirty || $[25] !== disabled || $[26] !== invalid || $[27] !== props || $[28] !== t2 || $[29] !== t3 || $[30] !== touched) {
+		t4 = /* @__PURE__ */ jsx(Field$1.Root, {
+			className: t2,
+			disabled,
+			invalid,
+			dirty,
+			touched,
+			...t3,
+			...props
+		});
+		$[24] = dirty;
+		$[25] = disabled;
+		$[26] = invalid;
+		$[27] = props;
+		$[28] = t2;
+		$[29] = t3;
+		$[30] = touched;
+		$[31] = t4;
+	} else t4 = $[31];
+	return t4;
+};
+var SwitchLabel = (t0) => {
+	const $ = c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(switch_module_default.label, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Field.Label, {
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+};
+var SwitchControl = (t0) => {
+	const $ = c(13);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	const focus = useFieldFocus(props);
+	let t1;
+	if ($[3] !== className) {
+		t1 = clsx(switch_module_default.control, className);
+		$[3] = className;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== focus) {
+		t2 = fieldStateAttributes(focus);
+		$[5] = focus;
+		$[6] = t2;
+	} else t2 = $[6];
+	let t3;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = /* @__PURE__ */ jsx(Switch.Thumb, { className: switch_module_default.thumb });
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== focus.props || $[9] !== props || $[10] !== t1 || $[11] !== t2) {
+		t4 = /* @__PURE__ */ jsx(Switch.Root, {
+			className: t1,
+			...t2,
+			...props,
+			...focus.props,
+			children: t3
+		});
+		$[8] = focus.props;
+		$[9] = props;
+		$[10] = t1;
+		$[11] = t2;
+		$[12] = t4;
+	} else t4 = $[12];
+	return t4;
+};
+/**
+* The styled parts of a base-ui Switch: a track with a sliding thumb that
+* announces as a switch. `Label` wraps the control and its text, so the two
+* share one hit area. For the ordinary case, use `SwitchField`.
+*
+* @example
+* <Switch.Root filled={enabled}>
+* 	<Switch.Label>
+* 		<Switch.Control checked={enabled} onCheckedChange={setEnabled} />
+* 		Email me about new messages
+* 	</Switch.Label>
+* </Switch.Root>
+*/
+var Switch$1 = {
+	Root: SwitchRoot,
+	Label: SwitchLabel,
+	Control: SwitchControl,
+	Description: Field$1.Description,
+	Error: Field$1.Error
+};
+export { Switch$1 as Switch };

package/dist/components/switch-field/switch.module.js

@@ -0,0 +1,12 @@
+import './switch.css';// src/components/switch-field/switch.module.scss
+var root = "_root_75lbt_3";
+var label = "_label_75lbt_9";
+var control = "_control_75lbt_12";
+var thumb = "_thumb_75lbt_122";
+var switch_module_default = {
+	root,
+	label,
+	control,
+	thumb
+};
+export { control, switch_module_default as default, label, root, thumb };

package/dist/components/switch-field/tsf-switch-field.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type SwitchFieldProps } from "./switch-field.tsx";
+export type TSFSwitchFieldProps = Omit<SwitchFieldProps, keyof ConnectedFieldProps | "checked" | "defaultChecked" | "onCheckedChange">;
+/**
+ * `SwitchField` bound to the TanStack Form field it renders in, whose value is
+ * a boolean. Reach it as `field.SwitchField` inside `form.AppField`.
+ *
+ * @example
+ * <form.AppField name="notify">
+ * 	{field => <field.SwitchField label="Email me about new messages" optionalLabel="optional" />}
+ * </form.AppField>
+ */
+export declare const TSFSwitchField: (props: TSFSwitchFieldProps) => ReactNode;
+//# sourceMappingURL=tsf-switch-field.d.ts.map

package/dist/components/switch-field/tsf-switch-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tsf-switch-field.d.ts","sourceRoot":"","sources":["../../../src/components/switch-field/tsf-switch-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EACN,KAAK,mBAAmB,EAExB,MAAM,wCAAwC,CAAC;AAChD,OAAO,EAEN,KAAK,gBAAgB,EACrB,MAAM,oBAAoB,CAAC;AAE5B,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACrC,gBAAgB,EACd,MAAM,mBAAmB,GACzB,SAAS,GACT,gBAAgB,GAChB,iBAAiB,CACnB,CAAC;AAEF;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,UACnB,mBAAmB,KACxB,SAcF,CAAC"}

package/dist/components/switch-field/tsf-switch-field.js

@@ -0,0 +1,40 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { SwitchField } from "./switch-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/switch-field/tsf-switch-field.tsx
+/**
+* `SwitchField` bound to the TanStack Form field it renders in, whose value is
+* a boolean. Reach it as `field.SwitchField` inside `form.AppField`.
+*
+* @example
+* <form.AppField name="notify">
+* 	{field => <field.SwitchField label="Email me about new messages" optionalLabel="optional" />}
+* </form.AppField>
+*/
+var TSFSwitchField = (props) => {
+	const $ = c(7);
+	const { field, props: connected } = useConnectedField();
+	let t0;
+	if ($[0] !== field) {
+		t0 = (checked) => field.handleChange(checked);
+		$[0] = field;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== connected || $[3] !== field.state.value || $[4] !== props || $[5] !== t0) {
+		t1 = /* @__PURE__ */ jsx(SwitchField, {
+			...props,
+			...connected,
+			checked: field.state.value,
+			onCheckedChange: t0
+		});
+		$[2] = connected;
+		$[3] = field.state.value;
+		$[4] = props;
+		$[5] = t0;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
+};
+export { TSFSwitchField };

package/dist/components/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./tabs.tsx";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tabs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/components/tabs/index.js

@@ -0,0 +1 @@
+export { Tabs } from "./tabs.js";

package/dist/components/tabs/tabs.css

@@ -0,0 +1,122 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._root_3qlri_3 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--tabs-gap, var(--sys-unit-8));
+  }
+  ._scroller_3qlri_8 {
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+  }
+  ._list_3qlri_12 {
+    position: relative;
+    display: flex;
+    gap: var(--tab-gap, var(--sys-unit-2));
+    min-inline-size: max-content;
+  }
+  ._tab_3qlri_18 {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sys-unit-4);
+    padding: var(--sys-unit-6) var(--sys-unit-10);
+    border-radius: var(--sys-radius-full);
+    color: var(--tab-fg, var(--sys-color-text-muted));
+    font: var(--sys-font-label-medium);
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+  ._tab_3qlri_18 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._tab_3qlri_18:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._tab_3qlri_18 {
+    outline-offset: calc(-1 * var(--sys-focus-ring-width));
+  }
+  @media not (prefers-reduced-motion) {
+    ._tab_3qlri_18 {
+      transition: background-color var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._tab_3qlri_18:hover {
+    background: var(--tab-bg-hover, var(--sys-color-primary-container));
+  }
+  ._tab_3qlri_18 {
+    border: none;
+    background: none;
+  }
+  ._tab_3qlri_18[data-disabled] {
+    cursor: not-allowed;
+    opacity: 0.38;
+  }
+  ._indicator_3qlri_56 {
+    --_indicator-slack: var(
+    	--sliding-indicator-slack,
+    	0px
+    );
+    --_indicator-slide: var(--sys-motion-short)
+    	var(--sys-motion-emphasized);
+    position: absolute;
+    inset-inline-start: calc(var(--active-tab-left, 0) - var(--_indicator-slack));
+    inset-block-start: calc(var(--active-tab-top, 0) - var(--_indicator-slack));
+    overflow: hidden;
+    inline-size: calc(var(--active-tab-width, 0) + 2 * var(--_indicator-slack));
+    block-size: calc(var(--active-tab-height, 0) + 2 * var(--_indicator-slack));
+    opacity: 1;
+    scale: 1;
+    pointer-events: none;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicator_3qlri_56 {
+      transition: inset-inline-start var(--_indicator-slide), inset-block-start var(--_indicator-slide), inline-size var(--_indicator-slide), block-size var(--_indicator-slide), opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-overshoot);
+    }
+  }
+  ._indicator_3qlri_56[data-jump] {
+    --_indicator-slide: 0s;
+  }
+  ._indicator_3qlri_56[data-empty] {
+    opacity: 0;
+    scale: 0;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicator_3qlri_56[data-empty] {
+      transition: opacity var(--sys-motion-instant) var(--sys-motion-standard), scale var(--sys-motion-instant) var(--sys-motion-standard);
+    }
+  }
+  ._indicator_3qlri_56 {
+    border-radius: var(--sys-radius-full);
+    background: var(--tab-indicator, var(--sys-color-primary));
+  }
+  ._indicatorLabels_3qlri_94 {
+    position: absolute;
+    inset-inline-start: calc(var(--_indicator-slack) - var(--active-tab-left, 0));
+    inset-block-start: calc(var(--_indicator-slack) - var(--active-tab-top, 0));
+    display: flex;
+    inline-size: max-content;
+  }
+  @media not (prefers-reduced-motion) {
+    ._indicatorLabels_3qlri_94 {
+      transition: inset-inline-start var(--_indicator-slide), inset-block-start var(--_indicator-slide);
+    }
+  }
+  ._indicatorLabels_3qlri_94 {
+    gap: var(--tab-gap, var(--sys-unit-2));
+  }
+  ._indicatorLabels_3qlri_94 ._tab_3qlri_18 {
+    color: var(--tab-fg-active, var(--sys-color-on-primary));
+  }
+  ._panel_3qlri_112 {
+    border-radius: var(--sys-radius-sm);
+  }
+  ._panel_3qlri_112 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._panel_3qlri_112:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+}

package/dist/components/tabs/tabs.d.ts

@@ -0,0 +1,53 @@
+import { type ReactNode } from "react";
+/** One tab in a bar, and the panel it opens. */
+export type Tab = Readonly<{
+    value: string;
+    label: string;
+    /** A count shown as a trailing badge. */
+    count?: number;
+    disabled?: boolean;
+}>;
+export type TabsRootProps = Readonly<{
+    tabs: readonly Tab[];
+    /** The open tab's `value`, when controlled. */
+    value?: string;
+    /** The tab open at first, when uncontrolled. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    children: ReactNode;
+}>;
+declare const Root: ({ tabs, value, defaultValue, onValueChange, className, children, }: TabsRootProps) => ReactNode;
+export type TabsBarProps = Readonly<{
+    /** What the tabs switch between, such as "Declaration". */
+    "aria-label": string;
+    className?: string;
+}>;
+declare const Bar: ({ "aria-label": label, className, }: TabsBarProps) => ReactNode;
+export type TabsPanelProps = Readonly<{
+    /** The `value` of the tab that opens this panel. */
+    value: string;
+    className?: string;
+    children: ReactNode;
+}>;
+declare const Panel: ({ value, className, children, }: TabsPanelProps) => ReactNode;
+type TabsParts = Readonly<{
+    Root: typeof Root;
+    Bar: typeof Bar;
+    Panel: typeof Panel;
+}>;
+/**
+ * In-page tabs over base-ui's `Tabs`: `Root` takes the tabs, `Bar` lays them
+ * out with a pill that slides to the open one, and each `Panel` holds what its
+ * tab opens. Tabs that lead to pages are a horizontal `Nav`.
+ *
+ * @example
+ * <Tabs.Root tabs={[{ value: "details", label: "Details" }, { value: "history", label: "History", count: 3 }]} defaultValue="details">
+ * 	<Tabs.Bar aria-label="Declaration" />
+ * 	<Tabs.Panel value="details">…</Tabs.Panel>
+ * 	<Tabs.Panel value="history">…</Tabs.Panel>
+ * </Tabs.Root>
+ */
+export declare const Tabs: TabsParts;
+export {};
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAiB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,gDAAgD;AAChD,MAAM,MAAM,GAAG,GAAG,QAAQ,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,yCAAyC;IACzC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAYH,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC;IACpC,IAAI,EAAE,SAAS,GAAG,EAAE,CAAC;IACrB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC,CAAC;AAEH,QAAA,MAAM,IAAI,uEAOP,aAAa,KAAG,SAclB,CAAC;AAeF,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IACnC,2DAA2D;IAC3D,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB,CAAC,CAAC;AAEH,QAAA,MAAM,GAAG,wCAGN,YAAY,KAAG,SA+BjB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACrC,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACpB,CAAC,CAAC;AAEH,QAAA,MAAM,KAAK,oCAIR,cAAc,KAAG,SAMnB,CAAC;AAEF,KAAK,SAAS,GAAG,QAAQ,CAAC;IACzB,IAAI,EAAE,OAAO,IAAI,CAAC;IAClB,GAAG,EAAE,OAAO,GAAG,CAAC;IAChB,KAAK,EAAE,OAAO,KAAK,CAAC;CACpB,CAAC,CAAC;AAEH;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,IAAI,EAAE,SAIlB,CAAC"}