@soroush.tech/design-system 0.1.0

package/dist/FocusTrap.mjs

@@ -0,0 +1,81 @@
+import { d as styled } from "./src-DcNT2aIK.mjs";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/FocusTrap/FocusTrap.tsx
+const FocusTrapRoot = styled("div", {
+	name: "FocusTrap",
+	label: "FocusTrap"
+})({ outline: "none" });
+const FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"textarea:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+function getFocusable(node) {
+	return Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) => element.tabIndex >= 0);
+}
+/** Move focus to the first focusable descendant, or the node itself when there is none. */
+function focusFirst(node) {
+	const [first] = getFocusable(node);
+	(first ?? node).focus();
+}
+/**
+* @description Keeps keyboard focus within its children while active. Moves focus
+* in on activation, cycles Tab / Shift+Tab at the boundaries, pulls focus back when
+* it escapes, and restores focus to the previously focused element on deactivation.
+*/
+function FocusTrap({ children, isEnabled = true, shouldAutoFocus = true, shouldTrapFocus = true, shouldEnforceFocus = true, shouldRestoreFocus = true }) {
+	const rootRef = useRef(null);
+	const previouslyFocused = useRef(null);
+	useEffect(() => {
+		if (!isEnabled) return;
+		const node = rootRef.current;
+		const doc = node.ownerDocument;
+		previouslyFocused.current = doc.activeElement;
+		if (shouldAutoFocus) focusFirst(node);
+		const handleFocusIn = (event) => {
+			if (!node.contains(event.target)) focusFirst(node);
+		};
+		if (shouldEnforceFocus) doc.addEventListener("focusin", handleFocusIn);
+		const handleKeyDown = (event) => {
+			if (!shouldTrapFocus || event.key !== "Tab") return;
+			const focusable = getFocusable(node);
+			if (focusable.length === 0) {
+				event.preventDefault();
+				return;
+			}
+			const first = focusable[0];
+			const last = focusable.at(-1);
+			const active = doc.activeElement;
+			if (event.shiftKey && active === first) {
+				event.preventDefault();
+				last.focus();
+			} else if (!event.shiftKey && active === last) {
+				event.preventDefault();
+				first.focus();
+			}
+		};
+		node.addEventListener("keydown", handleKeyDown);
+		return () => {
+			doc.removeEventListener("focusin", handleFocusIn);
+			node.removeEventListener("keydown", handleKeyDown);
+			if (shouldRestoreFocus) previouslyFocused.current.focus();
+		};
+	}, [
+		isEnabled,
+		shouldAutoFocus,
+		shouldEnforceFocus,
+		shouldRestoreFocus,
+		shouldTrapFocus
+	]);
+	return /* @__PURE__ */ jsx(FocusTrapRoot, {
+		ref: rootRef,
+		tabIndex: -1,
+		children
+	});
+}
+//#endregion
+export { FocusTrap };

package/dist/Form.cjs

@@ -0,0 +1,44 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_FormContext = require("./FormContext-CRmRgDgu.cjs");
+require("@emotion/react");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Form/Form.tsx
+const FormRoot = require_src.styled("form", {
+	name: "Form",
+	label: "Form"
+})();
+/**
+* Renders a `<form>` and provides form-wide defaults via FormContext — the lowest
+* priority in the override chain (FormControl and explicit control props win).
+*/
+function Form({ children, onSubmit, size, color, textColor, disabled, fullWidth, id, className, noValidate, "data-testid": dataTestid }) {
+	const value = (0, react.useMemo)(() => ({
+		size,
+		color,
+		textColor,
+		disabled,
+		fullWidth
+	}), [
+		size,
+		color,
+		textColor,
+		disabled,
+		fullWidth
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormContext.FormContext.Provider, {
+		value,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormRoot, {
+			id,
+			className,
+			noValidate,
+			onSubmit,
+			"data-testid": dataTestid,
+			children
+		})
+	});
+}
+//#endregion
+exports.Form = Form;
+exports.FormContext = require_FormContext.FormContext;

package/dist/Form.d.cts

@@ -0,0 +1,41 @@
+import { Theme } from "@emotion/react";
+import { ReactNode, SyntheticEvent } from "react";
+//#region src/Form/Form.d.ts
+interface FormProps {
+  children: ReactNode;
+  onSubmit?: (event: SyntheticEvent<HTMLFormElement>) => void;
+  /** Default control size for every field — overridable per FormControl/control. */
+  size?: keyof Theme['sizes'];
+  /** Default accent color for every field. */
+  color?: keyof Theme['palette'];
+  /** Default text color for every field's label/helper/input — resolves against `theme.text`. */
+  textColor?: keyof Theme['text'];
+  /** Disables every field. */
+  disabled?: boolean;
+  /** Stretches every field to fill its container. */
+  fullWidth?: boolean;
+  id?: string;
+  className?: string;
+  /** Skips native browser validation so field-level validation owns the UX. */
+  noValidate?: boolean;
+  'data-testid'?: string;
+}
+/**
+ * Renders a `<form>` and provides form-wide defaults via FormContext — the lowest
+ * priority in the override chain (FormControl and explicit control props win).
+ */
+declare function Form({ children, onSubmit, size, color, textColor, disabled, fullWidth, id, className, noValidate, 'data-testid': dataTestid }: Readonly<FormProps>): import("react").JSX.Element;
+//#endregion
+//#region src/Form/FormContext.d.ts
+/** Form-wide defaults, lowest priority in the override chain (overridden by FormControl, then explicit props). */
+interface FormContextValue {
+  size?: keyof Theme['sizes'];
+  color?: keyof Theme['palette'];
+  /** Text color for label/helper/input content — resolves against `theme.text`. */
+  textColor?: keyof Theme['text'];
+  disabled?: boolean;
+  fullWidth?: boolean;
+}
+declare const FormContext: import("react").Context<FormContextValue>;
+//#endregion
+export { Form, FormContext, FormContextValue, FormProps };

package/dist/Form.d.mts

@@ -0,0 +1,41 @@
+import { Theme } from "@emotion/react";
+import { ReactNode, SyntheticEvent } from "react";
+//#region src/Form/Form.d.ts
+interface FormProps {
+  children: ReactNode;
+  onSubmit?: (event: SyntheticEvent<HTMLFormElement>) => void;
+  /** Default control size for every field — overridable per FormControl/control. */
+  size?: keyof Theme['sizes'];
+  /** Default accent color for every field. */
+  color?: keyof Theme['palette'];
+  /** Default text color for every field's label/helper/input — resolves against `theme.text`. */
+  textColor?: keyof Theme['text'];
+  /** Disables every field. */
+  disabled?: boolean;
+  /** Stretches every field to fill its container. */
+  fullWidth?: boolean;
+  id?: string;
+  className?: string;
+  /** Skips native browser validation so field-level validation owns the UX. */
+  noValidate?: boolean;
+  'data-testid'?: string;
+}
+/**
+ * Renders a `<form>` and provides form-wide defaults via FormContext — the lowest
+ * priority in the override chain (FormControl and explicit control props win).
+ */
+declare function Form({ children, onSubmit, size, color, textColor, disabled, fullWidth, id, className, noValidate, 'data-testid': dataTestid }: Readonly<FormProps>): import("react").JSX.Element;
+//#endregion
+//#region src/Form/FormContext.d.ts
+/** Form-wide defaults, lowest priority in the override chain (overridden by FormControl, then explicit props). */
+interface FormContextValue {
+  size?: keyof Theme['sizes'];
+  color?: keyof Theme['palette'];
+  /** Text color for label/helper/input content — resolves against `theme.text`. */
+  textColor?: keyof Theme['text'];
+  disabled?: boolean;
+  fullWidth?: boolean;
+}
+declare const FormContext: import("react").Context<FormContextValue>;
+//#endregion
+export { Form, FormContext, FormContextValue, FormProps };

package/dist/Form.mjs

@@ -0,0 +1,42 @@
+import { d as styled } from "./src-DcNT2aIK.mjs";
+import { t as FormContext } from "./FormContext-_G3sxJyQ.mjs";
+import "@emotion/react";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Form/Form.tsx
+const FormRoot = styled("form", {
+	name: "Form",
+	label: "Form"
+})();
+/**
+* Renders a `<form>` and provides form-wide defaults via FormContext — the lowest
+* priority in the override chain (FormControl and explicit control props win).
+*/
+function Form({ children, onSubmit, size, color, textColor, disabled, fullWidth, id, className, noValidate, "data-testid": dataTestid }) {
+	const value = useMemo(() => ({
+		size,
+		color,
+		textColor,
+		disabled,
+		fullWidth
+	}), [
+		size,
+		color,
+		textColor,
+		disabled,
+		fullWidth
+	]);
+	return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(FormRoot, {
+			id,
+			className,
+			noValidate,
+			onSubmit,
+			"data-testid": dataTestid,
+			children
+		})
+	});
+}
+//#endregion
+export { Form, FormContext };

package/dist/FormContext-CRmRgDgu.cjs

@@ -0,0 +1,10 @@
+require("@emotion/react");
+//#region src/Form/FormContext.ts
+const FormContext = (0, require("react").createContext)({});
+//#endregion
+Object.defineProperty(exports, "FormContext", {
+	enumerable: true,
+	get: function() {
+		return FormContext;
+	}
+});

package/dist/FormContext-_G3sxJyQ.mjs

@@ -0,0 +1,6 @@
+import "@emotion/react";
+import { createContext } from "react";
+//#region src/Form/FormContext.ts
+const FormContext = createContext({});
+//#endregion
+export { FormContext as t };

package/dist/FormControl.cjs

@@ -0,0 +1,84 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_View = require("./View.cjs");
+const require_FormControlContext = require("./FormControlContext-aeKTjRKY.cjs");
+const require_FormContext = require("./FormContext-CRmRgDgu.cjs");
+let _emotion_react = require("@emotion/react");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/FormControl/FormControl.tsx
+const FormControlRoot = require_src.styled(require_View.View, {
+	name: "FormControl",
+	label: "FormControl"
+})();
+/**
+* Groups a label, control, and helper text and shares their state via context.
+* Works standalone (no parent Form) and auto-generates the id wiring so
+* `htmlFor` / `aria-describedby` link without manual coordination.
+*/
+function FormControl({ children, id, error, disabled, required, size, fullWidth, color, textColor, ...viewProps }) {
+	const generatedId = (0, react.useId)();
+	const resolvedId = id ?? generatedId;
+	const helperId = `${resolvedId}-helper`;
+	const [hasHelperText, setHasHelperText] = (0, react.useState)(false);
+	const value = (0, react.useMemo)(() => ({
+		id: resolvedId,
+		helperId,
+		error,
+		disabled,
+		required,
+		size,
+		fullWidth,
+		color,
+		textColor,
+		hasHelperText,
+		setHasHelperText
+	}), [
+		resolvedId,
+		helperId,
+		error,
+		disabled,
+		required,
+		size,
+		fullWidth,
+		color,
+		textColor,
+		hasHelperText
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormControlContext.FormControlContext.Provider, {
+		value,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormControlRoot, {
+			width: fullWidth ? "100%" : void 0,
+			...viewProps,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/FormControl/useFormControl.ts
+/**
+* Merges a control's explicit props with FormControl and Form context.
+* Priority: explicit prop → FormControl → Form → default.
+* `error` and `required` are field-only and never read from Form.
+*/
+function useFormControl(overrides = {}) {
+	const form = (0, react.useContext)(require_FormContext.FormContext);
+	const control = (0, react.useContext)(require_FormControlContext.FormControlContext);
+	const theme = (0, _emotion_react.useTheme)();
+	return {
+		id: overrides.id ?? control?.id,
+		error: overrides.error ?? control?.error ?? false,
+		disabled: overrides.disabled ?? control?.disabled ?? form.disabled ?? false,
+		required: overrides.required ?? control?.required ?? false,
+		size: overrides.size ?? control?.size ?? form.size ?? require_themeDefault.themeDefault(theme, "size", "md"),
+		fullWidth: overrides.fullWidth ?? control?.fullWidth ?? form.fullWidth ?? false,
+		color: overrides.color ?? control?.color ?? form.color,
+		textColor: overrides.textColor ?? control?.textColor ?? form.textColor,
+		"aria-describedby": control?.hasHelperText ? control.helperId : void 0
+	};
+}
+//#endregion
+exports.FormControl = FormControl;
+exports.FormControlContext = require_FormControlContext.FormControlContext;
+exports.useFormControl = useFormControl;

package/dist/FormControl.d.cts

@@ -0,0 +1,78 @@
+import { s as ViewProps } from "./index-FwTocqhP.cjs";
+import { Theme } from "@emotion/react";
+import { ReactNode } from "react";
+//#region src/FormControl/FormControl.d.ts
+interface FormControlProps extends Omit<ViewProps, 'color'> {
+  children: ReactNode;
+  /** Field id — auto-generated via `useId()` when omitted. Links FormLabel, control, and helper text. */
+  id?: string;
+  error?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  size?: keyof Theme['sizes'];
+  fullWidth?: boolean;
+  color?: keyof Theme['palette'];
+  textColor?: keyof Theme['text'];
+}
+/**
+ * Groups a label, control, and helper text and shares their state via context.
+ * Works standalone (no parent Form) and auto-generates the id wiring so
+ * `htmlFor` / `aria-describedby` link without manual coordination.
+ */
+declare function FormControl({ children, id, error, disabled, required, size, fullWidth, color, textColor, ...viewProps }: Readonly<FormControlProps>): import("react").JSX.Element;
+//#endregion
+//#region src/FormControl/FormControlContext.d.ts
+/** Per-field state, middle priority in the override chain (overrides Form, overridden by explicit props). */
+interface FormControlContextValue {
+  /** Field id — links FormLabel `htmlFor` and the control. Auto-generated by FormControl when not provided. */
+  id: string;
+  /** Id of the helper/error text node, used for `aria-describedby`. */
+  helperId: string;
+  error?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  size?: keyof Theme['sizes'];
+  fullWidth?: boolean;
+  color?: keyof Theme['palette'];
+  /** Text color for label/helper/input content — resolves against `theme.text`. */
+  textColor?: keyof Theme['text'];
+  /** Whether a FormHelperText is currently rendered — drives `aria-describedby` on the control. */
+  hasHelperText: boolean;
+  /** Stable setter FormHelperText calls to register/unregister its presence. */
+  setHasHelperText: (present: boolean) => void;
+}
+declare const FormControlContext: import("react").Context<FormControlContextValue | null>;
+//#endregion
+//#region src/FormControl/useFormControl.d.ts
+/** Explicit props a control passes in — always win over context when defined. */
+interface FormControlOverrides {
+  id?: string;
+  error?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  size?: keyof Theme['sizes'];
+  fullWidth?: boolean;
+  color?: keyof Theme['palette'];
+  textColor?: keyof Theme['text'];
+}
+/** Resolved field state. Uniform defaults (`size`, the booleans) are applied here; `color`/`textColor` are left for each control to default since their domains differ. */
+interface ResolvedFormControl {
+  id?: string;
+  error: boolean;
+  disabled: boolean;
+  required: boolean;
+  size: keyof Theme['sizes'];
+  fullWidth: boolean;
+  color?: keyof Theme['palette'];
+  textColor?: keyof Theme['text'];
+  /** Points at the helper text id only while one is rendered — avoids a dangling reference. */
+  'aria-describedby'?: string;
+}
+/**
+ * Merges a control's explicit props with FormControl and Form context.
+ * Priority: explicit prop → FormControl → Form → default.
+ * `error` and `required` are field-only and never read from Form.
+ */
+declare function useFormControl(overrides?: FormControlOverrides): ResolvedFormControl;
+//#endregion
+export { FormControl, FormControlContext, FormControlContextValue, FormControlOverrides, FormControlProps, ResolvedFormControl, useFormControl };

package/dist/FormControl.d.mts

@@ -0,0 +1,78 @@
+import { s as ViewProps } from "./index-pX7tBQdJ.mjs";
+import { Theme } from "@emotion/react";
+import { ReactNode } from "react";
+//#region src/FormControl/FormControl.d.ts
+interface FormControlProps extends Omit<ViewProps, 'color'> {
+  children: ReactNode;
+  /** Field id — auto-generated via `useId()` when omitted. Links FormLabel, control, and helper text. */
+  id?: string;
+  error?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  size?: keyof Theme['sizes'];
+  fullWidth?: boolean;
+  color?: keyof Theme['palette'];
+  textColor?: keyof Theme['text'];
+}
+/**
+ * Groups a label, control, and helper text and shares their state via context.
+ * Works standalone (no parent Form) and auto-generates the id wiring so
+ * `htmlFor` / `aria-describedby` link without manual coordination.
+ */
+declare function FormControl({ children, id, error, disabled, required, size, fullWidth, color, textColor, ...viewProps }: Readonly<FormControlProps>): import("react").JSX.Element;
+//#endregion
+//#region src/FormControl/FormControlContext.d.ts
+/** Per-field state, middle priority in the override chain (overrides Form, overridden by explicit props). */
+interface FormControlContextValue {
+  /** Field id — links FormLabel `htmlFor` and the control. Auto-generated by FormControl when not provided. */
+  id: string;
+  /** Id of the helper/error text node, used for `aria-describedby`. */
+  helperId: string;
+  error?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  size?: keyof Theme['sizes'];
+  fullWidth?: boolean;
+  color?: keyof Theme['palette'];
+  /** Text color for label/helper/input content — resolves against `theme.text`. */
+  textColor?: keyof Theme['text'];
+  /** Whether a FormHelperText is currently rendered — drives `aria-describedby` on the control. */
+  hasHelperText: boolean;
+  /** Stable setter FormHelperText calls to register/unregister its presence. */
+  setHasHelperText: (present: boolean) => void;
+}
+declare const FormControlContext: import("react").Context<FormControlContextValue | null>;
+//#endregion
+//#region src/FormControl/useFormControl.d.ts
+/** Explicit props a control passes in — always win over context when defined. */
+interface FormControlOverrides {
+  id?: string;
+  error?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  size?: keyof Theme['sizes'];
+  fullWidth?: boolean;
+  color?: keyof Theme['palette'];
+  textColor?: keyof Theme['text'];
+}
+/** Resolved field state. Uniform defaults (`size`, the booleans) are applied here; `color`/`textColor` are left for each control to default since their domains differ. */
+interface ResolvedFormControl {
+  id?: string;
+  error: boolean;
+  disabled: boolean;
+  required: boolean;
+  size: keyof Theme['sizes'];
+  fullWidth: boolean;
+  color?: keyof Theme['palette'];
+  textColor?: keyof Theme['text'];
+  /** Points at the helper text id only while one is rendered — avoids a dangling reference. */
+  'aria-describedby'?: string;
+}
+/**
+ * Merges a control's explicit props with FormControl and Form context.
+ * Priority: explicit prop → FormControl → Form → default.
+ * `error` and `required` are field-only and never read from Form.
+ */
+declare function useFormControl(overrides?: FormControlOverrides): ResolvedFormControl;
+//#endregion
+export { FormControl, FormControlContext, FormControlContextValue, FormControlOverrides, FormControlProps, ResolvedFormControl, useFormControl };

package/dist/FormControl.mjs

@@ -0,0 +1,81 @@
+import { d as styled, u as useTheme } from "./src-DcNT2aIK.mjs";
+import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
+import { View } from "./View.mjs";
+import { t as FormControlContext } from "./FormControlContext-CyxdOxdN.mjs";
+import { t as FormContext } from "./FormContext-_G3sxJyQ.mjs";
+import "@emotion/react";
+import { useContext, useId, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/FormControl/FormControl.tsx
+const FormControlRoot = styled(View, {
+	name: "FormControl",
+	label: "FormControl"
+})();
+/**
+* Groups a label, control, and helper text and shares their state via context.
+* Works standalone (no parent Form) and auto-generates the id wiring so
+* `htmlFor` / `aria-describedby` link without manual coordination.
+*/
+function FormControl({ children, id, error, disabled, required, size, fullWidth, color, textColor, ...viewProps }) {
+	const generatedId = useId();
+	const resolvedId = id ?? generatedId;
+	const helperId = `${resolvedId}-helper`;
+	const [hasHelperText, setHasHelperText] = useState(false);
+	const value = useMemo(() => ({
+		id: resolvedId,
+		helperId,
+		error,
+		disabled,
+		required,
+		size,
+		fullWidth,
+		color,
+		textColor,
+		hasHelperText,
+		setHasHelperText
+	}), [
+		resolvedId,
+		helperId,
+		error,
+		disabled,
+		required,
+		size,
+		fullWidth,
+		color,
+		textColor,
+		hasHelperText
+	]);
+	return /* @__PURE__ */ jsx(FormControlContext.Provider, {
+		value,
+		children: /* @__PURE__ */ jsx(FormControlRoot, {
+			width: fullWidth ? "100%" : void 0,
+			...viewProps,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/FormControl/useFormControl.ts
+/**
+* Merges a control's explicit props with FormControl and Form context.
+* Priority: explicit prop → FormControl → Form → default.
+* `error` and `required` are field-only and never read from Form.
+*/
+function useFormControl(overrides = {}) {
+	const form = useContext(FormContext);
+	const control = useContext(FormControlContext);
+	const theme = useTheme();
+	return {
+		id: overrides.id ?? control?.id,
+		error: overrides.error ?? control?.error ?? false,
+		disabled: overrides.disabled ?? control?.disabled ?? form.disabled ?? false,
+		required: overrides.required ?? control?.required ?? false,
+		size: overrides.size ?? control?.size ?? form.size ?? themeDefault(theme, "size", "md"),
+		fullWidth: overrides.fullWidth ?? control?.fullWidth ?? form.fullWidth ?? false,
+		color: overrides.color ?? control?.color ?? form.color,
+		textColor: overrides.textColor ?? control?.textColor ?? form.textColor,
+		"aria-describedby": control?.hasHelperText ? control.helperId : void 0
+	};
+}
+//#endregion
+export { FormControl, FormControlContext, useFormControl };

package/dist/FormControlContext-CyxdOxdN.mjs

@@ -0,0 +1,6 @@
+import "@emotion/react";
+import { createContext } from "react";
+//#region src/FormControl/FormControlContext.ts
+const FormControlContext = createContext(null);
+//#endregion
+export { FormControlContext as t };

package/dist/FormControlContext-aeKTjRKY.cjs

@@ -0,0 +1,10 @@
+require("@emotion/react");
+//#region src/FormControl/FormControlContext.ts
+const FormControlContext = (0, require("react").createContext)(null);
+//#endregion
+Object.defineProperty(exports, "FormControlContext", {
+	enumerable: true,
+	get: function() {
+		return FormControlContext;
+	}
+});

package/dist/FormHelperText.cjs

@@ -0,0 +1,40 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_Typography = require("./Typography.cjs");
+const require_FormControlContext = require("./FormControlContext-aeKTjRKY.cjs");
+const require_FormContext = require("./FormContext-CRmRgDgu.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/FormHelperText/FormHelperText.tsx
+const FormHelperTextRoot = require_src.styled(require_Typography.Typography, {
+	name: "FormHelperText",
+	label: "FormHelperText"
+})();
+/**
+* Helper or error text for a field. Reads its id and error state from
+* FormControl context and registers its presence so the control can point
+* `aria-describedby` at it only while it is rendered.
+*/
+function FormHelperText({ children, error, id, role, color, ...rest }) {
+	const control = (0, react.useContext)(require_FormControlContext.FormControlContext);
+	const form = (0, react.useContext)(require_FormContext.FormContext);
+	const isError = error ?? control?.error ?? false;
+	const resolvedId = id ?? control?.helperId;
+	const resolvedColor = isError ? "error" : color ?? control?.textColor ?? form.textColor ?? "secondary";
+	const setHasHelperText = control?.setHasHelperText;
+	(0, react.useEffect)(() => {
+		setHasHelperText?.(true);
+		return () => setHasHelperText?.(false);
+	}, [setHasHelperText]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormHelperTextRoot, {
+		as: "p",
+		id: resolvedId,
+		variant: "caption",
+		role: isError ? "alert" : role,
+		...rest,
+		color: resolvedColor,
+		children
+	});
+}
+//#endregion
+exports.FormHelperText = FormHelperText;

package/dist/FormHelperText.d.cts

@@ -0,0 +1,16 @@
+import { a as TypographyProps } from "./index-CDVnvjIE.cjs";
+import { ReactNode } from "react";
+//#region src/FormHelperText/FormHelperText.d.ts
+interface FormHelperTextProps extends TypographyProps {
+  children: ReactNode;
+  /** Renders in the error color and announces via `role="alert"`. Falls back to the FormControl `error` value. */
+  error?: boolean;
+}
+/**
+ * Helper or error text for a field. Reads its id and error state from
+ * FormControl context and registers its presence so the control can point
+ * `aria-describedby` at it only while it is rendered.
+ */
+declare function FormHelperText({ children, error, id, role, color, ...rest }: Readonly<FormHelperTextProps>): import("react").JSX.Element;
+//#endregion
+export { FormHelperText, FormHelperTextProps };