@soroush.tech/design-system 0.1.0

package/dist/CodeBlock.mjs

@@ -0,0 +1,100 @@
+import { d as styled } from "./src-DcNT2aIK.mjs";
+import { useCopyToClipboard } from "./hooks/useCopyToClipboard.mjs";
+import { View } from "./View.mjs";
+import { Button } from "./Button.mjs";
+import { t as Icon } from "./Icon-CAKRmFz3.mjs";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/CodeBlock/CodeBlock.tsx
+const syntaxStyles = ({ theme }) => ({
+	color: theme.syntax.base,
+	fontFamily: theme.fonts.mono,
+	"& .hljs-comment, & .hljs-quote, & .hljs-doctag, & .hljs-meta.prompt_": {
+		color: theme.syntax.comment,
+		fontStyle: "italic"
+	},
+	"& .hljs-keyword, & .hljs-built_in, & .hljs-literal, & .hljs-selector-tag, & .hljs-selector-pseudo, & .hljs-selector-attr": { color: theme.syntax.keyword },
+	"& .hljs-type, & .hljs-title.class_": { color: theme.syntax.type },
+	"& .hljs-string, & .hljs-regexp, & .hljs-char, & .hljs-meta .hljs-string, & .hljs-addition": { color: theme.syntax.string },
+	"& .hljs-number, & .hljs-symbol, & .hljs-bullet, & .hljs-link": { color: theme.syntax.number },
+	"& .hljs-variable.constant_, & .hljs-property": { color: theme.syntax.constant },
+	"& .hljs-title, & .hljs-section, & .hljs-attr, & .hljs-attribute, & .hljs-selector-id": { color: theme.syntax.title },
+	"& .hljs-tag, & .hljs-name, & .hljs-meta, & .hljs-variable, & .hljs-selector-class, & .hljs-deletion": { color: theme.syntax.tag },
+	"& .hljs-emphasis": { fontStyle: "italic" },
+	"& .hljs-strong": { fontWeight: "bold" }
+});
+const CodeSurface = styled(View, {
+	name: "CodeBlock",
+	slot: "surface",
+	label: "CodeSurface"
+})(syntaxStyles);
+const Wrapper = styled(View, {
+	name: "CodeBlock",
+	label: "CodeBlock"
+})({
+	display: "grid",
+	gridTemplateColumns: "minmax(0, 1fr)",
+	"& .code-copy": {
+		opacity: 0,
+		transition: "opacity 120ms ease"
+	},
+	"&:hover .code-copy, &:focus-within .code-copy": { opacity: 1 },
+	"@media (hover: none)": { "& .code-copy": { opacity: 1 } }
+});
+/**
+* Fenced-code block: a horizontally scrollable, syntax-highlighted surface with a
+* copy-to-clipboard button that sticks to the top-right while the block is in view.
+*/
+function CodeBlock({ children, ...rest }) {
+	const surfaceRef = useRef(null);
+	const { copied, copy } = useCopyToClipboard();
+	const handleCopy = () => {
+		const raw = surfaceRef.current.textContent;
+		let end = raw.length;
+		while (end > 0 && raw[end - 1] === "\n") end--;
+		const text = raw.slice(0, end);
+		if (text) copy(text);
+	};
+	return /* @__PURE__ */ jsxs(Wrapper, {
+		my: 2,
+		position: "relative",
+		...rest,
+		children: [/* @__PURE__ */ jsx(View, {
+			position: "absolute",
+			top: "8px",
+			right: "8px",
+			zIndex: 1,
+			bg: "paper",
+			borderRadius: "sm",
+			className: "code-copy",
+			children: /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "outlined",
+				color: "default",
+				size: "sm",
+				borderRadius: "sm",
+				onClick: handleCopy,
+				"aria-label": copied ? "Copied" : "Copy code",
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: copied ? "check" : "content_copy",
+					color: copied ? "success" : "primary",
+					size: "1.1rem"
+				})
+			})
+		}), /* @__PURE__ */ jsx(CodeSurface, {
+			as: "pre",
+			tabIndex: 0,
+			ref: surfaceRef,
+			bg: "terminal",
+			p: 3,
+			borderRadius: "md",
+			borderColor: "light",
+			borderWidth: "thin",
+			maxWidth: "100%",
+			overflow: "auto",
+			children
+		})]
+	});
+}
+//#endregion
+export { CodeBlock };

package/dist/Drawer.cjs

@@ -0,0 +1,69 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_Paper = require("./Paper.cjs");
+const require_Modal = require("./Modal-BDMPTSXv.cjs");
+require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _emotion_react = require("@emotion/react");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+//#region src/Drawer/Drawer.tsx
+const slideIn = {
+	left: _emotion_react.keyframes`from { transform: translateX(-100%); } to { transform: translateX(0); }`,
+	right: _emotion_react.keyframes`from { transform: translateX(100%); } to { transform: translateX(0); }`,
+	top: _emotion_react.keyframes`from { transform: translateY(-100%); } to { transform: translateY(0); }`,
+	bottom: _emotion_react.keyframes`from { transform: translateY(100%); } to { transform: translateY(0); }`
+};
+const anchorPosition = {
+	left: {
+		top: 0,
+		left: 0,
+		bottom: 0,
+		height: "100%"
+	},
+	right: {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		height: "100%"
+	},
+	top: {
+		top: 0,
+		left: 0,
+		right: 0,
+		width: "100%"
+	},
+	bottom: {
+		bottom: 0,
+		left: 0,
+		right: 0,
+		width: "100%"
+	}
+};
+const DrawerPanel = require_src.styled(require_Paper.Paper, {
+	name: "Drawer",
+	label: "Drawer",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["anchor", "duration"])
+})(({ anchor, duration }) => ({
+	position: "fixed",
+	...anchorPosition[anchor],
+	animation: `${slideIn[anchor]} ${duration}ms ease-out`,
+	"@media (prefers-reduced-motion: reduce)": { animation: "none" }
+}));
+/**
+* @description A panel that slides in from a screen edge, built on Modal. Portals,
+* dims the page, traps focus, locks scroll, and closes on Escape or backdrop click.
+*/
+function Drawer({ children, anchor = "left", elevation = 16, transitionDuration = 225, ...modalProps }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Modal.Modal, {
+		...modalProps,
+		layer: "drawer",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerPanel, {
+			anchor,
+			duration: transitionDuration,
+			elevation,
+			children
+		})
+	});
+}
+//#endregion
+exports.Drawer = Drawer;

package/dist/Drawer.d.cts

@@ -0,0 +1,22 @@
+import { n as PaperElevation } from "./index-x80UG39F.cjs";
+import { o as ModalProps } from "./index-BX5-NfbX.cjs";
+import { ReactNode } from "react";
+//#region src/Drawer/Drawer.d.ts
+type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
+interface DrawerProps extends Pick<ModalProps, 'isOpen' | 'onClose' | 'hasBackdrop' | 'shouldKeepMounted' | 'shouldUsePortal' | 'portalContainer' | 'shouldLockScroll' | 'shouldAutoFocus' | 'shouldTrapFocus' | 'shouldRestoreFocus'> {
+  /** The content of the drawer. */
+  children: ReactNode;
+  /** Edge the drawer slides in from. Default: 'left'. */
+  anchor?: DrawerAnchor;
+  /** Shadow depth of the panel (0–24), forwarded to Paper. Default: 16. */
+  elevation?: PaperElevation;
+  /** Slide duration in milliseconds. Default: 225. */
+  transitionDuration?: number;
+}
+/**
+ * @description A panel that slides in from a screen edge, built on Modal. Portals,
+ * dims the page, traps focus, locks scroll, and closes on Escape or backdrop click.
+ */
+declare function Drawer({ children, anchor, elevation, transitionDuration, ...modalProps }: Readonly<DrawerProps>): import("react").JSX.Element;
+//#endregion
+export { Drawer, DrawerAnchor, DrawerProps };

package/dist/Drawer.d.mts

@@ -0,0 +1,22 @@
+import { n as PaperElevation } from "./index-BLRMuO_x.mjs";
+import { o as ModalProps } from "./index-Dy03o__A.mjs";
+import { ReactNode } from "react";
+//#region src/Drawer/Drawer.d.ts
+type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';
+interface DrawerProps extends Pick<ModalProps, 'isOpen' | 'onClose' | 'hasBackdrop' | 'shouldKeepMounted' | 'shouldUsePortal' | 'portalContainer' | 'shouldLockScroll' | 'shouldAutoFocus' | 'shouldTrapFocus' | 'shouldRestoreFocus'> {
+  /** The content of the drawer. */
+  children: ReactNode;
+  /** Edge the drawer slides in from. Default: 'left'. */
+  anchor?: DrawerAnchor;
+  /** Shadow depth of the panel (0–24), forwarded to Paper. Default: 16. */
+  elevation?: PaperElevation;
+  /** Slide duration in milliseconds. Default: 225. */
+  transitionDuration?: number;
+}
+/**
+ * @description A panel that slides in from a screen edge, built on Modal. Portals,
+ * dims the page, traps focus, locks scroll, and closes on Escape or backdrop click.
+ */
+declare function Drawer({ children, anchor, elevation, transitionDuration, ...modalProps }: Readonly<DrawerProps>): import("react").JSX.Element;
+//#endregion
+export { Drawer, DrawerAnchor, DrawerProps };

package/dist/Drawer.mjs

@@ -0,0 +1,66 @@
+import { a as createShouldForwardProp, d as styled, s as keyframes } from "./src-DcNT2aIK.mjs";
+import { Paper } from "./Paper.mjs";
+import { t as Modal } from "./Modal-DR60peRg.mjs";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/Drawer/Drawer.tsx
+const slideIn = {
+	left: keyframes`from { transform: translateX(-100%); } to { transform: translateX(0); }`,
+	right: keyframes`from { transform: translateX(100%); } to { transform: translateX(0); }`,
+	top: keyframes`from { transform: translateY(-100%); } to { transform: translateY(0); }`,
+	bottom: keyframes`from { transform: translateY(100%); } to { transform: translateY(0); }`
+};
+const anchorPosition = {
+	left: {
+		top: 0,
+		left: 0,
+		bottom: 0,
+		height: "100%"
+	},
+	right: {
+		top: 0,
+		right: 0,
+		bottom: 0,
+		height: "100%"
+	},
+	top: {
+		top: 0,
+		left: 0,
+		right: 0,
+		width: "100%"
+	},
+	bottom: {
+		bottom: 0,
+		left: 0,
+		right: 0,
+		width: "100%"
+	}
+};
+const DrawerPanel = styled(Paper, {
+	name: "Drawer",
+	label: "Drawer",
+	shouldForwardProp: createShouldForwardProp(["anchor", "duration"])
+})(({ anchor, duration }) => ({
+	position: "fixed",
+	...anchorPosition[anchor],
+	animation: `${slideIn[anchor]} ${duration}ms ease-out`,
+	"@media (prefers-reduced-motion: reduce)": { animation: "none" }
+}));
+/**
+* @description A panel that slides in from a screen edge, built on Modal. Portals,
+* dims the page, traps focus, locks scroll, and closes on Escape or backdrop click.
+*/
+function Drawer({ children, anchor = "left", elevation = 16, transitionDuration = 225, ...modalProps }) {
+	return /* @__PURE__ */ jsx(Modal, {
+		...modalProps,
+		layer: "drawer",
+		children: /* @__PURE__ */ jsx(DrawerPanel, {
+			anchor,
+			duration: transitionDuration,
+			elevation,
+			children
+		})
+	});
+}
+//#endregion
+export { Drawer };

package/dist/Field.cjs

@@ -0,0 +1,59 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Flex = require("./Flex.cjs");
+const require_FormControl = require("./FormControl.cjs");
+const require_FormLabel = require("./FormLabel.cjs");
+const require_FormHelperText = require("./FormHelperText.cjs");
+require("@emotion/react");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+require("@tanstack/react-form");
+//#region src/Field/Field.tsx
+/**
+* The single bridge between the design-system form layer and TanStack Form.
+* Wraps `form.Field`, derives the error-display flag, and composes
+* FormControl / FormLabel / FormHelperText so id and aria wiring are automatic.
+*
+* Error UX: shown only once the field is touched or after a submit attempt — never on
+* initial render — and only the first error message is displayed.
+*/
+function Field({ form, name, label, labelProps, helperText, required, size, fullWidth, children }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(form.Field, {
+		name,
+		children: (field) => {
+			const api = field;
+			const message = api.state.meta.errors[0]?.message;
+			const hasError = (api.state.meta.isTouched || form.state.isSubmitted) && Boolean(message);
+			const helper = hasError ? message : helperText;
+			const child = children;
+			const control = (0, react.cloneElement)(child, {
+				name: api.name,
+				value: api.state.value,
+				onChange: (event) => api.handleChange(event.target.value),
+				inputProps: {
+					...child.props.inputProps,
+					onBlur: api.handleBlur
+				}
+			});
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormControl.FormControl, {
+				error: hasError,
+				required,
+				size,
+				fullWidth,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Flex.Flex, {
+					flexDirection: "column",
+					gap: 2,
+					children: [
+						label == null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormLabel.FormLabel, {
+							...labelProps,
+							children: label
+						}),
+						control,
+						helper == null ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FormHelperText.FormHelperText, { children: helper })
+					]
+				})
+			});
+		}
+	});
+}
+//#endregion
+exports.Field = Field;

package/dist/Field.d.cts

@@ -0,0 +1,36 @@
+import { n as FormLabelProps } from "./index-Dg8-CPOO.cjs";
+import { Theme } from "@emotion/react";
+import { ReactElement, ReactNode } from "react";
+import { DeepKeys, FormAsyncValidateOrFn, FormValidateOrFn, ReactFormExtendedApi } from "@tanstack/react-form";
+//#region src/Field/Field.d.ts
+interface FieldProps<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TName extends DeepKeys<TFormData> = DeepKeys<TFormData>> {
+  form: ReactFormExtendedApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+  /** Type-safe field name — checked against the form's value schema. */
+  name: TName;
+  /** Optional label; rendered as a FormLabel above the control. */
+  label?: ReactNode;
+  /** Typography props forwarded to the FormLabel — restyle the label without losing the wiring. */
+  labelProps?: Omit<FormLabelProps, 'children' | 'required' | 'htmlFor'>;
+  /** Optional helper text; replaced by the error message while the field is invalid. */
+  helperText?: ReactNode;
+  required?: boolean;
+  size?: keyof Theme['sizes'];
+  fullWidth?: boolean;
+  /**
+   * The control element, e.g. `<TextInput />`. Field clones it and injects the binding
+   * from the TanStack field — `name`, `value`, `onChange`, and `inputProps.onBlur` — so the
+   * call site stays declarative and the control never imports the form library.
+   */
+  children: ReactElement;
+}
+/**
+ * The single bridge between the design-system form layer and TanStack Form.
+ * Wraps `form.Field`, derives the error-display flag, and composes
+ * FormControl / FormLabel / FormHelperText so id and aria wiring are automatic.
+ *
+ * Error UX: shown only once the field is touched or after a submit attempt — never on
+ * initial render — and only the first error message is displayed.
+ */
+declare function Field<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TName extends DeepKeys<TFormData> = DeepKeys<TFormData>>({ form, name, label, labelProps, helperText, required, size, fullWidth, children }: Readonly<FieldProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TName>>): import("react").JSX.Element;
+//#endregion
+export { Field, FieldProps };

package/dist/Field.d.mts

@@ -0,0 +1,36 @@
+import { n as FormLabelProps } from "./index-Cv_UOfYx.mjs";
+import { Theme } from "@emotion/react";
+import { ReactElement, ReactNode } from "react";
+import { DeepKeys, FormAsyncValidateOrFn, FormValidateOrFn, ReactFormExtendedApi } from "@tanstack/react-form";
+//#region src/Field/Field.d.ts
+interface FieldProps<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TName extends DeepKeys<TFormData> = DeepKeys<TFormData>> {
+  form: ReactFormExtendedApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>;
+  /** Type-safe field name — checked against the form's value schema. */
+  name: TName;
+  /** Optional label; rendered as a FormLabel above the control. */
+  label?: ReactNode;
+  /** Typography props forwarded to the FormLabel — restyle the label without losing the wiring. */
+  labelProps?: Omit<FormLabelProps, 'children' | 'required' | 'htmlFor'>;
+  /** Optional helper text; replaced by the error message while the field is invalid. */
+  helperText?: ReactNode;
+  required?: boolean;
+  size?: keyof Theme['sizes'];
+  fullWidth?: boolean;
+  /**
+   * The control element, e.g. `<TextInput />`. Field clones it and injects the binding
+   * from the TanStack field — `name`, `value`, `onChange`, and `inputProps.onBlur` — so the
+   * call site stays declarative and the control never imports the form library.
+   */
+  children: ReactElement;
+}
+/**
+ * The single bridge between the design-system form layer and TanStack Form.
+ * Wraps `form.Field`, derives the error-display flag, and composes
+ * FormControl / FormLabel / FormHelperText so id and aria wiring are automatic.
+ *
+ * Error UX: shown only once the field is touched or after a submit attempt — never on
+ * initial render — and only the first error message is displayed.
+ */
+declare function Field<TFormData, TOnMount extends undefined | FormValidateOrFn<TFormData>, TOnChange extends undefined | FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TName extends DeepKeys<TFormData> = DeepKeys<TFormData>>({ form, name, label, labelProps, helperText, required, size, fullWidth, children }: Readonly<FieldProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, TName>>): import("react").JSX.Element;
+//#endregion
+export { Field, FieldProps };

package/dist/Field.mjs

@@ -0,0 +1,58 @@
+import { Flex } from "./Flex.mjs";
+import { FormControl } from "./FormControl.mjs";
+import { FormLabel } from "./FormLabel.mjs";
+import { FormHelperText } from "./FormHelperText.mjs";
+import "@emotion/react";
+import { cloneElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import "@tanstack/react-form";
+//#region src/Field/Field.tsx
+/**
+* The single bridge between the design-system form layer and TanStack Form.
+* Wraps `form.Field`, derives the error-display flag, and composes
+* FormControl / FormLabel / FormHelperText so id and aria wiring are automatic.
+*
+* Error UX: shown only once the field is touched or after a submit attempt — never on
+* initial render — and only the first error message is displayed.
+*/
+function Field({ form, name, label, labelProps, helperText, required, size, fullWidth, children }) {
+	return /* @__PURE__ */ jsx(form.Field, {
+		name,
+		children: (field) => {
+			const api = field;
+			const message = api.state.meta.errors[0]?.message;
+			const hasError = (api.state.meta.isTouched || form.state.isSubmitted) && Boolean(message);
+			const helper = hasError ? message : helperText;
+			const child = children;
+			const control = cloneElement(child, {
+				name: api.name,
+				value: api.state.value,
+				onChange: (event) => api.handleChange(event.target.value),
+				inputProps: {
+					...child.props.inputProps,
+					onBlur: api.handleBlur
+				}
+			});
+			return /* @__PURE__ */ jsx(FormControl, {
+				error: hasError,
+				required,
+				size,
+				fullWidth,
+				children: /* @__PURE__ */ jsxs(Flex, {
+					flexDirection: "column",
+					gap: 2,
+					children: [
+						label == null ? null : /* @__PURE__ */ jsx(FormLabel, {
+							...labelProps,
+							children: label
+						}),
+						control,
+						helper == null ? null : /* @__PURE__ */ jsx(FormHelperText, { children: helper })
+					]
+				})
+			});
+		}
+	});
+}
+//#endregion
+export { Field };

package/dist/Flex.cjs

@@ -0,0 +1,21 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_View = require("./View.cjs");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+//#region src/Flex/Flex.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([..._soroush_tech_styled_system_should_forward_prop.props, "gap"]);
+const gapSystem = (0, require_src.src_exports.system)({ gap: {
+	property: "gap",
+	scale: "space"
+} });
+const Flex = require_src.styled(require_View.View, {
+	name: "Flex",
+	label: "flex",
+	shouldForwardProp,
+	systemProps: [require_src.src_exports.flexbox, gapSystem]
+})({
+	display: "flex",
+	flexDirection: "column"
+});
+//#endregion
+exports.Flex = Flex;

package/dist/Flex.d.cts

@@ -0,0 +1,2 @@
+import { n as FlexProps, r as GapToken, t as Flex } from "./index-B1rCD6Oo.cjs";
+export { Flex, FlexProps, GapToken };

package/dist/Flex.d.mts

@@ -0,0 +1,2 @@
+import { n as FlexProps, r as GapToken, t as Flex } from "./index-z35LEYG8.mjs";
+export { Flex, FlexProps, GapToken };

package/dist/Flex.mjs

@@ -0,0 +1,19 @@
+import { a as createShouldForwardProp, c as props, d as styled, l as src_exports } from "./src-DcNT2aIK.mjs";
+import { View } from "./View.mjs";
+//#region src/Flex/Flex.tsx
+const shouldForwardProp = createShouldForwardProp([...props, "gap"]);
+const gapSystem = (0, src_exports.system)({ gap: {
+	property: "gap",
+	scale: "space"
+} });
+const Flex = styled(View, {
+	name: "Flex",
+	label: "flex",
+	shouldForwardProp,
+	systemProps: [src_exports.flexbox, gapSystem]
+})({
+	display: "flex",
+	flexDirection: "column"
+});
+//#endregion
+export { Flex };

package/dist/FocusTrap.cjs

@@ -0,0 +1,82 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/FocusTrap/FocusTrap.tsx
+const FocusTrapRoot = require_src.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 = (0, react.useRef)(null);
+	const previouslyFocused = (0, react.useRef)(null);
+	(0, react.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__ */ (0, react_jsx_runtime.jsx)(FocusTrapRoot, {
+		ref: rootRef,
+		tabIndex: -1,
+		children
+	});
+}
+//#endregion
+exports.FocusTrap = FocusTrap;

package/dist/FocusTrap.d.cts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+//#region src/FocusTrap/FocusTrap.d.ts
+interface FocusTrapProps {
+  /** The content whose focusable descendants are trapped. */
+  children: ReactNode;
+  /** When false, focus is neither moved nor trapped (e.g. a non-top modal). */
+  isEnabled?: boolean;
+  /** Move focus into the trap when it activates. */
+  shouldAutoFocus?: boolean;
+  /** Keep Tab / Shift+Tab cycling within the trap. */
+  shouldTrapFocus?: boolean;
+  /** Pull focus back inside whenever it escapes the trap (e.g. a click outside). */
+  shouldEnforceFocus?: boolean;
+  /** Restore focus to the previously focused element when the trap deactivates. */
+  shouldRestoreFocus?: boolean;
+}
+/**
+ * @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.
+ */
+declare function FocusTrap({ children, isEnabled, shouldAutoFocus, shouldTrapFocus, shouldEnforceFocus, shouldRestoreFocus }: Readonly<FocusTrapProps>): import("react").JSX.Element;
+//#endregion
+export { FocusTrap, FocusTrapProps };

package/dist/FocusTrap.d.mts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+//#region src/FocusTrap/FocusTrap.d.ts
+interface FocusTrapProps {
+  /** The content whose focusable descendants are trapped. */
+  children: ReactNode;
+  /** When false, focus is neither moved nor trapped (e.g. a non-top modal). */
+  isEnabled?: boolean;
+  /** Move focus into the trap when it activates. */
+  shouldAutoFocus?: boolean;
+  /** Keep Tab / Shift+Tab cycling within the trap. */
+  shouldTrapFocus?: boolean;
+  /** Pull focus back inside whenever it escapes the trap (e.g. a click outside). */
+  shouldEnforceFocus?: boolean;
+  /** Restore focus to the previously focused element when the trap deactivates. */
+  shouldRestoreFocus?: boolean;
+}
+/**
+ * @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.
+ */
+declare function FocusTrap({ children, isEnabled, shouldAutoFocus, shouldTrapFocus, shouldEnforceFocus, shouldRestoreFocus }: Readonly<FocusTrapProps>): import("react").JSX.Element;
+//#endregion
+export { FocusTrap, FocusTrapProps };