@igne-agency/react-web-ui 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type TimeFieldProps } from "./time-field.tsx";
+export type TSFTimeFieldProps = Omit<TimeFieldProps, keyof ConnectedFieldProps | "value" | "defaultValue" | "onValueChange">;
+/**
+ * `TimeField` bound to the TanStack Form field it renders in, reached as
+ * `field.TimeField`. The field's value is a `"HH:mm"` string, or `null`.
+ *
+ * @example
+ * <form.AppField name="startTime">
+ * 	{field => <field.TimeField label="Start time" optionalLabel="optional" />}
+ * </form.AppField>
+ */
+export declare const TSFTimeField: (props: TSFTimeFieldProps) => ReactNode;

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

@@ -0,0 +1,40 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { TimeField } from "./time-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/time-field/tsf-time-field.tsx
+/**
+* `TimeField` bound to the TanStack Form field it renders in, reached as
+* `field.TimeField`. The field's value is a `"HH:mm"` string, or `null`.
+*
+* @example
+* <form.AppField name="startTime">
+* 	{field => <field.TimeField label="Start time" optionalLabel="optional" />}
+* </form.AppField>
+*/
+var TSFTimeField = (props) => {
+	const $ = c(7);
+	const { field, props: connected } = useConnectedField(props.label);
+	let t0;
+	if ($[0] !== field) {
+		t0 = (next) => field.handleChange(next);
+		$[0] = field;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== connected || $[3] !== field.state.value || $[4] !== props || $[5] !== t0) {
+		t1 = /* @__PURE__ */ jsx(TimeField, {
+			...props,
+			...connected,
+			value: field.state.value,
+			onValueChange: t0
+		});
+		$[2] = connected;
+		$[3] = field.state.value;
+		$[4] = props;
+		$[5] = t0;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
+};
+export { TSFTimeField };

package/dist/components/time-zone-provider/index.d.ts

@@ -0,0 +1 @@
+export * from "./time-zone-provider.tsx";

package/dist/components/time-zone-provider/index.js

@@ -0,0 +1 @@
+export { TimeZoneProvider, useTimeZone } from "./time-zone-provider.js";

package/dist/components/time-zone-provider/time-zone-provider.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+export type TimeZoneProviderProps = Readonly<{
+    /** The IANA zone the app's users live in, such as "Europe/Amsterdam". */
+    timeZone: string;
+    children: ReactNode;
+}>;
+/**
+ * The time zone every "today" and every instant the kit shows or takes is read
+ * in.
+ *
+ * @example
+ * <TimeZoneProvider timeZone="Europe/Amsterdam">{app}</TimeZoneProvider>
+ */
+export declare const TimeZoneProvider: ({ timeZone, children, }: TimeZoneProviderProps) => ReactNode;
+/**
+ * The IANA zone of the nearest `TimeZoneProvider`; it throws where there is
+ * none.
+ *
+ * @example
+ * const timeZone = useTimeZone(); // "Europe/Amsterdam"
+ */
+export declare const useTimeZone: () => string;

package/dist/components/time-zone-provider/time-zone-provider.js

@@ -0,0 +1,39 @@
+import { useRequiredContext } from "../../lib/use-required-context.js";
+import { c } from "react/compiler-runtime";
+import { createContext } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/time-zone-provider/time-zone-provider.tsx
+var TimeZoneContext = createContext(void 0);
+/**
+* The time zone every "today" and every instant the kit shows or takes is read
+* in.
+*
+* @example
+* <TimeZoneProvider timeZone="Europe/Amsterdam">{app}</TimeZoneProvider>
+*/
+var TimeZoneProvider = (t0) => {
+	const $ = c(3);
+	const { timeZone, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== timeZone) {
+		t1 = /* @__PURE__ */ jsx(TimeZoneContext, {
+			value: timeZone,
+			children
+		});
+		$[0] = children;
+		$[1] = timeZone;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+};
+/**
+* The IANA zone of the nearest `TimeZoneProvider`; it throws where there is
+* none.
+*
+* @example
+* const timeZone = useTimeZone(); // "Europe/Amsterdam"
+*/
+var useTimeZone = () => {
+	return useRequiredContext(TimeZoneContext, "useTimeZone must be used inside a TimeZoneProvider");
+};
+export { TimeZoneProvider, useTimeZone };

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

@@ -0,0 +1,2 @@
+export { type ToastAction, type ToastData, type ToastHelpers, type ToastOptions, type ToastTone, toast, toastManager, } from "./toast.ts";
+export * from "./toast-provider.tsx";

package/dist/components/toast/index.js

@@ -0,0 +1,3 @@
+import { toast, toastManager } from "./toast.js";
+import { ToastProvider } from "./toast-provider.js";
+export { ToastProvider, toast, toastManager };

package/dist/components/toast/toast-provider.css

@@ -0,0 +1,99 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._viewport_r09x9_3 {
+    position: fixed;
+    inset-block: auto var(--toast-viewport-inset, var(--sys-unit-16));
+    inset-inline: auto var(--toast-viewport-inset, var(--sys-unit-16));
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-unit-8);
+    inline-size: var(--toast-width, min(24rem, 100vw - 2rem));
+  }
+  ._viewport_r09x9_3 {
+    outline: 0 solid var(--sys-color-focus-ring);
+    outline-offset: var(--sys-focus-ring-offset);
+  }
+  ._viewport_r09x9_3:focus-visible {
+    outline-width: var(--sys-focus-ring-width);
+  }
+  ._toast_r09x9_19 {
+    --_toast-fg: var(--sys-color-text);
+    --_toast-bg: var(--sys-color-surface-overlay-high);
+    box-sizing: border-box;
+    border-radius: var(--toast-radius, var(--sys-radius-md));
+    background: var(--toast-bg, var(--_toast-bg));
+    box-shadow: var(--sys-elevation-2);
+    padding: var(--sys-unit-8);
+    color: var(--toast-fg, var(--_toast-fg));
+    font: var(--sys-font-body-medium);
+  }
+  @media not (prefers-reduced-motion) {
+    ._toast_r09x9_19 {
+      transition: opacity var(--sys-motion-short) var(--sys-motion-standard), scale var(--sys-motion-short) var(--sys-motion-emphasized);
+    }
+  }
+  ._toast_r09x9_19[data-starting-style], ._toast_r09x9_19[data-ending-style] {
+    opacity: 0;
+    scale: 0.8;
+  }
+  ._toast_r09x9_19[data-tone=success] {
+    --_toast-fg: var(--sys-color-success-fg);
+    --_toast-bg: var(--sys-color-success-bg);
+  }
+  ._toast_r09x9_19[data-tone=error] {
+    --_toast-fg: var(--sys-color-error-fg);
+    --_toast-bg: var(--sys-color-error-bg);
+  }
+  ._toast_r09x9_19[data-tone=warning] {
+    --_toast-fg: var(--sys-color-warning-fg);
+    --_toast-bg: var(--sys-color-warning-bg);
+  }
+  ._toast_r09x9_19[data-tone=info] {
+    --_toast-fg: var(--sys-color-info-fg);
+    --_toast-bg: var(--sys-color-info-bg);
+  }
+  ._content_r09x9_55 {
+    display: flex;
+    flex-direction: column;
+    gap: var(--sys-unit-6);
+  }
+  ._header_r09x9_60 {
+    display: flex;
+    align-items: center;
+    gap: var(--sys-unit-6);
+  }
+  ._headingMain_r09x9_65 {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    gap: var(--sys-unit-4);
+    min-inline-size: 0;
+  }
+  ._title_r09x9_72 {
+    font: var(--sys-font-label-medium);
+  }
+  ._description_r09x9_75 {
+    font: var(--sys-font-body-medium);
+    text-wrap: pretty;
+  }
+  ._actions_r09x9_79 {
+    display: flex;
+    gap: var(--sys-unit-4);
+    margin-block-start: var(--sys-unit-2);
+  }
+  ._closeButton_r09x9_84 {
+    --btn-fg: var(--toast-fg, var(--_toast-fg));
+    flex-shrink: 0;
+  }
+  ._action_r09x9_79[data-variant=primary] {
+    --btn-bg: var(--toast-fg, var(--_toast-fg));
+    --btn-fg: var(--toast-bg, var(--_toast-bg));
+  }
+  ._action_r09x9_79[data-variant=secondary] {
+    --btn-bg: var(--sys-color-surface-overlay-high);
+    --btn-fg: var(--toast-fg, var(--_toast-fg));
+  }
+  ._action_r09x9_79[data-variant=tertiary] {
+    --btn-fg: var(--toast-fg, var(--_toast-fg));
+  }
+}

package/dist/components/toast/toast-provider.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export type ToastProviderProps = Readonly<{
+    /** Accessible name of each toast's close button, also its tooltip. */
+    closeLabel: string;
+    /** Accessible name of the region the toasts appear in, reached with F6. */
+    viewportLabel: string;
+    children: ReactNode;
+}>;
+/**
+ * Mounts the toast system once at the app root: provides the global
+ * {@link toastManager} to base-ui and renders the viewport alongside the app.
+ *
+ * @example
+ * <ToastProvider closeLabel="Close" viewportLabel="Notifications">
+ *   <App />
+ * </ToastProvider>
+ */
+export declare const ToastProvider: ({ closeLabel, viewportLabel, children, }: ToastProviderProps) => ReactNode;

package/dist/components/toast/toast-provider.js

@@ -0,0 +1,203 @@
+import SvgCheckCircle from "../../vendor/@material-design-icons/svg/outlined/check_circle.js";
+import SvgClose from "../../vendor/@material-design-icons/svg/outlined/close.js";
+import SvgError from "../../vendor/@material-design-icons/svg/outlined/error.js";
+import SvgInfo from "../../vendor/@material-design-icons/svg/outlined/info.js";
+import SvgWarningAmber from "../../vendor/@material-design-icons/svg/outlined/warning_amber.js";
+import { Button } from "../button/button.js";
+import { Icon } from "../icon/icon.js";
+import { flushBufferedToasts, toastManager } from "./toast.js";
+import toast_provider_module_default from "./toast-provider.module.js";
+import { c } from "react/compiler-runtime";
+import { useEffect } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Toast } from "@base-ui/react/toast";
+// src/components/toast/toast-provider.tsx
+var TONE_ICON = {
+	success: SvgCheckCircle,
+	error: SvgError,
+	warning: SvgWarningAmber,
+	info: SvgInfo
+};
+var ToastBody = (t0) => {
+	const $ = c(22);
+	const { data, closeLabel, onClose } = t0;
+	if (!data) return null;
+	const t1 = TONE_ICON[data.tone];
+	let t2;
+	if ($[0] !== t1) {
+		t2 = /* @__PURE__ */ jsx(Icon, {
+			svg: t1,
+			size: 1.2,
+			label: ""
+		});
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = data.title ?? data.body;
+	let t4;
+	if ($[2] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Toast.Title, {
+			className: toast_provider_module_default.title,
+			children: t3
+		});
+		$[2] = t3;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== t2 || $[5] !== t4) {
+		t5 = /* @__PURE__ */ jsxs("div", {
+			className: toast_provider_module_default.headingMain,
+			children: [t2, t4]
+		});
+		$[4] = t2;
+		$[5] = t4;
+		$[6] = t5;
+	} else t5 = $[6];
+	let t6;
+	if ($[7] !== closeLabel || $[8] !== onClose) {
+		t6 = /* @__PURE__ */ jsx(Button, {
+			className: toast_provider_module_default.closeButton,
+			variant: "tertiary",
+			size: "sm",
+			iconOnly: true,
+			icon: SvgClose,
+			label: closeLabel,
+			onClick: onClose
+		});
+		$[7] = closeLabel;
+		$[8] = onClose;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== t5 || $[11] !== t6) {
+		t7 = /* @__PURE__ */ jsxs("div", {
+			className: toast_provider_module_default.header,
+			children: [t5, t6]
+		});
+		$[10] = t5;
+		$[11] = t6;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== data.body || $[14] !== data.title) {
+		t8 = data.title !== void 0 && /* @__PURE__ */ jsx(Toast.Description, {
+			className: toast_provider_module_default.description,
+			children: data.body
+		});
+		$[13] = data.body;
+		$[14] = data.title;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== data.actions) {
+		t9 = data.actions && data.actions.length > 0 && /* @__PURE__ */ jsx("div", {
+			className: toast_provider_module_default.actions,
+			children: data.actions.map(_temp)
+		});
+		$[16] = data.actions;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
+	if ($[18] !== t7 || $[19] !== t8 || $[20] !== t9) {
+		t10 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			t7,
+			t8,
+			t9
+		] });
+		$[18] = t7;
+		$[19] = t8;
+		$[20] = t9;
+		$[21] = t10;
+	} else t10 = $[21];
+	return t10;
+};
+var ToastList = (t0) => {
+	const $ = c(7);
+	const { closeLabel } = t0;
+	const { toasts, close } = Toast.useToastManager();
+	let t1;
+	if ($[0] !== close || $[1] !== closeLabel || $[2] !== toasts) {
+		let t2;
+		if ($[4] !== close || $[5] !== closeLabel) {
+			t2 = (toast) => /* @__PURE__ */ jsx(Toast.Root, {
+				toast,
+				className: toast_provider_module_default.toast,
+				"data-tone": toast.data?.tone,
+				children: /* @__PURE__ */ jsx("div", {
+					className: toast_provider_module_default.content,
+					children: /* @__PURE__ */ jsx(ToastBody, {
+						data: toast.data,
+						closeLabel,
+						onClose: () => close(toast.id)
+					})
+				})
+			}, toast.id);
+			$[4] = close;
+			$[5] = closeLabel;
+			$[6] = t2;
+		} else t2 = $[6];
+		t1 = toasts.map(t2);
+		$[0] = close;
+		$[1] = closeLabel;
+		$[2] = toasts;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+};
+/**
+* Mounts the toast system once at the app root: provides the global
+* {@link toastManager} to base-ui and renders the viewport alongside the app.
+*
+* @example
+* <ToastProvider closeLabel="Close" viewportLabel="Notifications">
+*   <App />
+* </ToastProvider>
+*/
+var ToastProvider = (t0) => {
+	const $ = c(9);
+	const { closeLabel, viewportLabel, children } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = [];
+		$[0] = t1;
+	} else t1 = $[0];
+	useEffect(flushBufferedToasts, t1);
+	let t2;
+	if ($[1] !== closeLabel) {
+		t2 = /* @__PURE__ */ jsx(ToastList, { closeLabel });
+		$[1] = closeLabel;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== t2 || $[4] !== viewportLabel) {
+		t3 = /* @__PURE__ */ jsx(Toast.Portal, { children: /* @__PURE__ */ jsx(Toast.Viewport, {
+			className: toast_provider_module_default.viewport,
+			"aria-label": viewportLabel,
+			children: t2
+		}) });
+		$[3] = t2;
+		$[4] = viewportLabel;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== children || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsxs(Toast.Provider, {
+			toastManager,
+			children: [children, t3]
+		});
+		$[6] = children;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+};
+function _temp(action) {
+	return /* @__PURE__ */ jsx(Button, {
+		className: toast_provider_module_default.action,
+		size: "sm",
+		variant: action.variant ?? "secondary",
+		onClick: action.onClick,
+		children: action.label
+	}, action.label);
+}
+export { ToastProvider };

package/dist/components/toast/toast-provider.module.js

@@ -0,0 +1,24 @@
+import './toast-provider.css';// src/components/toast/toast-provider.module.scss
+var viewport = "_viewport_r09x9_3";
+var toast = "_toast_r09x9_19";
+var content = "_content_r09x9_55";
+var header = "_header_r09x9_60";
+var headingMain = "_headingMain_r09x9_65";
+var title = "_title_r09x9_72";
+var description = "_description_r09x9_75";
+var actions = "_actions_r09x9_79";
+var closeButton = "_closeButton_r09x9_84";
+var action = "_action_r09x9_79";
+var toast_provider_module_default = {
+	viewport,
+	toast,
+	content,
+	header,
+	headingMain,
+	title,
+	description,
+	actions,
+	closeButton,
+	action
+};
+export { action, actions, closeButton, content, toast_provider_module_default as default, description, header, headingMain, title, toast, viewport };

package/dist/components/toast/toast.d.ts

@@ -0,0 +1,79 @@
+import { type ToastManager } from "@base-ui/react/toast";
+import type { ReactNode } from "react";
+import type { Tone } from "../../lib/tone.ts";
+/** A toast's status role; drives its colour and icon. */
+export type ToastTone = Exclude<Tone, "neutral">;
+/** An action button rendered inside a toast, such as Retry on a failed send. */
+export type ToastAction = Readonly<{
+    /** Button label. */
+    label: string;
+    /** Invoked when the button is clicked. */
+    onClick: () => void;
+    /** Visual tier for the action button. @default "secondary" */
+    variant?: "primary" | "secondary" | "tertiary";
+}>;
+/** The data every kit toast carries. */
+export type ToastData = Readonly<{
+    tone: ToastTone;
+    /** Heading above the body, where one line will not carry the news. */
+    title?: ReactNode;
+    body: ReactNode;
+    actions?: ReadonlyArray<ToastAction>;
+}>;
+/** Options accepted by the push helpers. */
+export type ToastOptions = Readonly<{
+    /**
+     * Dedupe key. While a toast pushed with this key is still open, a second
+     * push with the same key is a no-op and returns the existing id.
+     */
+    key?: string;
+    /**
+     * Heading above the body. Without it the body is the toast's own heading, for
+     * copy short enough to read at a glance.
+     */
+    title?: ReactNode;
+    /** Action buttons rendered in the toast. */
+    actions?: ReadonlyArray<ToastAction>;
+    /**
+     * Auto-dismiss timeout in ms. `0` keeps the toast until dismissed. Defaults
+     * to 5000, or `0` when actions are present.
+     */
+    timeout?: number;
+}>;
+/** The global toast manager, living outside React so non-component code can push. */
+export declare const toastManager: ToastManager<ToastData>;
+/**
+ * Releases the toasts pushed before the viewport subscribed to the manager.
+ * Called once by `ToastProvider`, whose own effect runs after base-ui's
+ * subscription; the manager drops anything emitted before that.
+ *
+ * @example
+ * useEffect(flushBufferedToasts, []);
+ */
+export declare const flushBufferedToasts: () => void;
+/** The toast push helpers {@link toast} hands out. */
+export type ToastHelpers = Readonly<{
+    /** Pushes a success toast. Returns the toast id. */
+    success: (body: ReactNode, options?: ToastOptions) => string;
+    /** Pushes an error toast. Returns the toast id. */
+    error: (body: ReactNode, options?: ToastOptions) => string;
+    /** Pushes an info toast. Returns the toast id. */
+    info: (body: ReactNode, options?: ToastOptions) => string;
+    /** Pushes a warning toast. Returns the toast id. */
+    warning: (body: ReactNode, options?: ToastOptions) => string;
+    /** Pushes a toast of a tone known only at runtime. Returns the toast id. */
+    notify: (tone: ToastTone, body: ReactNode, options?: ToastOptions) => string;
+    /** Dismisses a toast by id. */
+    dismiss: (id: string) => void;
+}>;
+/**
+ * Pushes toasts from anywhere, components or not, into the viewport
+ * `ToastProvider` renders. `key` dedupes, so one failed item raises one toast.
+ *
+ * @example
+ * toast.error("The comment failed to send.", {
+ * 	key: `outbox-${item.id}`,
+ * 	actions: [{ label: "Retry", onClick: () => retry(item.id) }],
+ * });
+ */
+export declare const toast: ToastHelpers;

package/dist/components/toast/toast.js

@@ -0,0 +1,68 @@
+import { Toast } from "@base-ui/react/toast";
+// src/components/toast/toast.ts
+/** The global toast manager, living outside React so non-component code can push. */
+var toastManager = Toast.createToastManager();
+var DEFAULT_TIMEOUT_MS = 5e3;
+var activeKeys = /* @__PURE__ */ new Map();
+var viewportReady = false;
+var buffered = [];
+/**
+* Releases the toasts pushed before the viewport subscribed to the manager.
+* Called once by `ToastProvider`, whose own effect runs after base-ui's
+* subscription; the manager drops anything emitted before that.
+*
+* @example
+* useEffect(flushBufferedToasts, []);
+*/
+var flushBufferedToasts = () => {
+	viewportReady = true;
+	for (const add of buffered.splice(0)) add();
+};
+var push = (tone, body, options = {}) => {
+	const { key, title, actions, timeout } = options;
+	if (key !== void 0) {
+		const existing = activeKeys.get(key);
+		if (existing !== void 0) return existing;
+	}
+	const resolvedTimeout = timeout ?? (actions && actions.length > 0 ? 0 : DEFAULT_TIMEOUT_MS);
+	const id = crypto.randomUUID();
+	const add = () => {
+		toastManager.add({
+			id,
+			type: tone,
+			timeout: resolvedTimeout,
+			data: {
+				tone,
+				title,
+				body,
+				actions
+			},
+			onClose: key !== void 0 ? () => {
+				if (activeKeys.get(key) === id) activeKeys.delete(key);
+			} : void 0
+		});
+	};
+	if (viewportReady) add();
+	else buffered.push(add);
+	if (key !== void 0) activeKeys.set(key, id);
+	return id;
+};
+/**
+* Pushes toasts from anywhere, components or not, into the viewport
+* `ToastProvider` renders. `key` dedupes, so one failed item raises one toast.
+*
+* @example
+* toast.error("The comment failed to send.", {
+* 	key: `outbox-${item.id}`,
+* 	actions: [{ label: "Retry", onClick: () => retry(item.id) }],
+* });
+*/
+var toast = {
+	success: (body, options) => push("success", body, options),
+	error: (body, options) => push("error", body, options),
+	info: (body, options) => push("info", body, options),
+	warning: (body, options) => push("warning", body, options),
+	notify: (tone, body, options) => push(tone, body, options),
+	dismiss: (id) => toastManager.close(id)
+};
+export { flushBufferedToasts, toast, toastManager };

package/dist/components/toggle-group-field/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./toggle-group.tsx";
+export * from "./toggle-group-field.tsx";
+export * from "./tsf-toggle-group-field.tsx";

package/dist/components/toggle-group-field/index.js

@@ -0,0 +1,4 @@
+import { ToggleGroup } from "./toggle-group.js";
+import { ToggleGroupField } from "./toggle-group-field.js";
+import { TSFToggleGroupField } from "./tsf-toggle-group-field.js";
+export { TSFToggleGroupField, ToggleGroup, ToggleGroupField };

package/dist/components/toggle-group-field/toggle-group-field.d.ts

@@ -0,0 +1,32 @@
+import type { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group";
+import type { ReactNode } from "react";
+import type { FieldBlurHandler, ChoiceOption, FieldProps } from "../field/index.ts";
+export type ToggleGroupFieldProps = FieldProps & Readonly<{
+    /** The choices, in the order they read. */
+    options: readonly ChoiceOption[];
+    /** The chosen values. */
+    value: readonly string[];
+    onValueChange: (value: readonly string[]) => void;
+    onBlur?: FieldBlurHandler;
+    /** The form field's name. */
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    orientation?: BaseToggleGroup.Props["orientation"];
+    /** Applied to the field wrapper, so callers can place the group. */
+    className?: string;
+}>;
+/**
+ * The assembled toggle group: a labelled row of chips, any number of them
+ * pressed, then the description and the error.
+ *
+ * @example
+ * <ToggleGroupField
+ * 	label="Days"
+ * 	optionalLabel="optional"
+ * 	options={[{ label: "Monday", value: "mon" }, { label: "Tuesday", value: "tue" }]}
+ * 	value={days}
+ * 	onValueChange={setDays}
+ * />
+ */
+export declare const ToggleGroupField: ({ label, description, errors, requiredness, optionalLabel, dirty, touched, pending, options, value, onValueChange, onBlur, name, disabled, readOnly, orientation, className, }: ToggleGroupFieldProps) => ReactNode;