@ashwa-io/ui 0.0.3 → 0.0.4

package/dist/components/atomic/Checkbox/Checkbox.d.ts

@@ -0,0 +1,11 @@
+import { FieldBaseProps } from "../../../lib/types.js";
+import React from "react";
+export interface CheckboxProps extends FieldBaseProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  onBlur?: () => void;
+  name?: string;
+  readOnly?: boolean;
+  ref?: React.Ref<HTMLElement>;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;

package/dist/components/atomic/Checkbox/Checkbox.js

@@ -0,0 +1,32 @@
+import { FormField } from "../../molecule/FormField/FormField.js";
+import { Checkbox as Checkbox$1 } from "../../ui/checkbox.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/atomic/Checkbox/Checkbox.tsx
+const Checkbox = (props) => {
+	const { label, hideLabel, description, error, required, disabled, id, "data-testid": testId, value, onChange, onBlur, name, readOnly = false, ref } = props;
+	return /* @__PURE__ */ jsx(FormField, {
+		orientation: "horizontal",
+		label,
+		hideLabel,
+		description,
+		error,
+		required,
+		disabled,
+		id,
+		"data-testid": testId,
+		children: (control) => /* @__PURE__ */ jsx(Checkbox$1, {
+			ref,
+			id: control.id,
+			"aria-describedby": control["aria-describedby"],
+			"aria-invalid": control["aria-invalid"],
+			"aria-required": control["aria-required"],
+			disabled: control.disabled,
+			checked: value,
+			onCheckedChange: (checked) => onChange(checked),
+			onBlur,
+			name,
+			readOnly
+		})
+	});
+};
+export { Checkbox };

package/dist/components/atomic/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+import { Checkbox, CheckboxProps } from "./Checkbox.js";
+export { Checkbox, type CheckboxProps };

package/dist/components/atomic/ColorInput/ColorInput.d.ts

@@ -0,0 +1,15 @@
+import { FieldBaseProps } from "../../../lib/types.js";
+import React from "react";
+export interface ColorInputProps extends FieldBaseProps {
+  /** 6-digit hex, e.g. '#1a73e8' (orgs.primaryColor), or the text being typed. */
+  value: string;
+  /**
+   * A valid 6-digit hex arrives normalized ('#1a73e8'); anything else arrives as typed, so the
+   * form's validation can flag it (e.g. `validate: v => /^#[0-9a-f]{6}$/.test(v) || '…'`).
+   */
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  name?: string;
+  ref?: React.Ref<HTMLInputElement>;
+}
+export declare const ColorInput: React.FC<ColorInputProps>;

package/dist/components/atomic/ColorInput/ColorInput.js

@@ -0,0 +1,44 @@
+import { FormField } from "../../molecule/FormField/FormField.js";
+import { Input } from "../../ui/input.js";
+import { normalizeHex } from "./colorHex.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/atomic/ColorInput/ColorInput.tsx
+const ColorInput = (props) => {
+	const { label, hideLabel, description, error, required, disabled, id, "data-testid": testId, value, onChange, onBlur, name, ref } = props;
+	const handleText = (next) => onChange(normalizeHex(next) ?? next);
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		hideLabel,
+		description,
+		error,
+		required,
+		disabled,
+		id,
+		"data-testid": testId,
+		children: (control) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2",
+			children: [/* @__PURE__ */ jsx("input", {
+				type: "color",
+				"aria-label": `${label} picker`,
+				value: normalizeHex(value) ?? "#000000",
+				disabled: control.disabled,
+				onChange: (event) => handleText(event.target.value),
+				className: "border-input h-8 w-10 shrink-0 cursor-pointer rounded-lg border bg-transparent p-0.5 disabled:cursor-not-allowed disabled:opacity-50"
+			}), /* @__PURE__ */ jsx(Input, {
+				ref,
+				id: control.id,
+				"aria-describedby": control["aria-describedby"],
+				"aria-invalid": control["aria-invalid"],
+				"aria-required": control["aria-required"],
+				disabled: control.disabled,
+				name,
+				value,
+				spellCheck: false,
+				autoComplete: "off",
+				onChange: (event) => handleText(event.target.value),
+				onBlur
+			})]
+		})
+	});
+};
+export { ColorInput };

package/dist/components/atomic/ColorInput/colorHex.js

@@ -0,0 +1,8 @@
+// src/components/atomic/ColorInput/colorHex.ts
+const HEX6 = /^#?([0-9a-f]{6})$/i;
+/** '#1A73E8' | '1a73e8' → '#1a73e8'; anything that is not 6 hex digits → null. */
+const normalizeHex = (input) => {
+	const match = HEX6.exec(input.trim());
+	return match ? `#${match[1].toLowerCase()}` : null;
+};
+export { normalizeHex };

package/dist/components/atomic/ColorInput/index.d.ts

@@ -0,0 +1,2 @@
+import { ColorInput, ColorInputProps } from "./ColorInput.js";
+export { ColorInput, type ColorInputProps };

package/dist/components/atomic/Select/Select.d.ts

@@ -0,0 +1,18 @@
+import { FieldBaseProps } from "../../../lib/types.js";
+import React from "react";
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+export interface SelectProps extends FieldBaseProps {
+  options: SelectOption[];
+  /** null = nothing picked; the placeholder shows. */
+  value: string | null;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  name?: string;
+  placeholder?: string;
+  ref?: React.Ref<HTMLButtonElement>;
+}
+export declare const Select: React.FC<SelectProps>;

package/dist/components/atomic/Select/Select.js

@@ -0,0 +1,47 @@
+import { FormField } from "../../molecule/FormField/FormField.js";
+import { Select as Select$1, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../ui/select.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/atomic/Select/Select.tsx
+const LEFT_FIELD_REASONS = /* @__PURE__ */ new Set(["outside-press", "focus-out"]);
+const Select = (props) => {
+	const { label, hideLabel, description, error, required, disabled, id, "data-testid": testId, options, value, onChange, onBlur, name, placeholder, ref } = props;
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		hideLabel,
+		description,
+		error,
+		required,
+		disabled,
+		id,
+		"data-testid": testId,
+		children: (control) => /* @__PURE__ */ jsxs(Select$1, {
+			items: options,
+			value,
+			onValueChange: (next) => {
+				if (next !== null) onChange(next);
+			},
+			onOpenChange: (open, details) => {
+				if (!open && LEFT_FIELD_REASONS.has(details.reason)) onBlur?.();
+			},
+			name,
+			disabled: control.disabled,
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				ref,
+				id: control.id,
+				"aria-describedby": control["aria-describedby"],
+				"aria-invalid": control["aria-invalid"],
+				"aria-required": control["aria-required"],
+				onBlur: (event) => {
+					if (!event.relatedTarget?.closest("[data-slot=\"select-content\"]")) onBlur?.();
+				},
+				className: "w-full",
+				children: /* @__PURE__ */ jsx(SelectValue, { placeholder })
+			}), /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+				value: option.value,
+				disabled: option.disabled,
+				children: option.label
+			}, option.value)) })]
+		})
+	});
+};
+export { Select };

package/dist/components/atomic/Select/index.d.ts

@@ -0,0 +1,2 @@
+import { Select, SelectOption, SelectProps } from "./Select.js";
+export { Select, type SelectOption, type SelectProps };

package/dist/components/atomic/Switch/Switch.d.ts

@@ -0,0 +1,11 @@
+import { FieldBaseProps } from "../../../lib/types.js";
+import React from "react";
+export interface SwitchProps extends FieldBaseProps {
+  value: boolean;
+  onChange: (value: boolean) => void;
+  onBlur?: () => void;
+  name?: string;
+  readOnly?: boolean;
+  ref?: React.Ref<HTMLElement>;
+}
+export declare const Switch: React.FC<SwitchProps>;

package/dist/components/atomic/Switch/Switch.js

@@ -0,0 +1,32 @@
+import { FormField } from "../../molecule/FormField/FormField.js";
+import { Switch as Switch$1 } from "../../ui/switch.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/atomic/Switch/Switch.tsx
+const Switch = (props) => {
+	const { label, hideLabel, description, error, required, disabled, id, "data-testid": testId, value, onChange, onBlur, name, readOnly = false, ref } = props;
+	return /* @__PURE__ */ jsx(FormField, {
+		orientation: "horizontal",
+		label,
+		hideLabel,
+		description,
+		error,
+		required,
+		disabled,
+		id,
+		"data-testid": testId,
+		children: (control) => /* @__PURE__ */ jsx(Switch$1, {
+			ref,
+			id: control.id,
+			"aria-describedby": control["aria-describedby"],
+			"aria-invalid": control["aria-invalid"],
+			"aria-required": control["aria-required"],
+			disabled: control.disabled,
+			checked: value,
+			onCheckedChange: (checked) => onChange(checked),
+			onBlur,
+			name,
+			readOnly
+		})
+	});
+};
+export { Switch };

package/dist/components/atomic/Switch/index.d.ts

@@ -0,0 +1,2 @@
+import { Switch, SwitchProps } from "./Switch.js";
+export { Switch, type SwitchProps };

package/dist/components/atomic/TextArea/TextArea.d.ts

@@ -0,0 +1,14 @@
+import { FieldBaseProps } from "../../../lib/types.js";
+import React from "react";
+export interface TextAreaProps extends FieldBaseProps {
+  value: string;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  name?: string;
+  placeholder?: string;
+  rows?: number;
+  maxLength?: number;
+  readOnly?: boolean;
+  ref?: React.Ref<HTMLTextAreaElement>;
+}
+export declare const TextArea: React.FC<TextAreaProps>;

package/dist/components/atomic/TextArea/TextArea.js

@@ -0,0 +1,35 @@
+import { FormField } from "../../molecule/FormField/FormField.js";
+import { Textarea } from "../../ui/textarea.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/atomic/TextArea/TextArea.tsx
+const TextArea = (props) => {
+	const { label, hideLabel, description, error, required, disabled, id, "data-testid": testId, value, onChange, onBlur, name, placeholder, rows = 3, maxLength, readOnly = false, ref } = props;
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		hideLabel,
+		description,
+		error,
+		required,
+		disabled,
+		id,
+		"data-testid": testId,
+		children: (control) => /* @__PURE__ */ jsx(Textarea, {
+			ref,
+			id: control.id,
+			"aria-describedby": control["aria-describedby"],
+			"aria-invalid": control["aria-invalid"],
+			"aria-required": control["aria-required"],
+			disabled: control.disabled,
+			name,
+			value,
+			placeholder,
+			rows,
+			maxLength,
+			readOnly,
+			onChange: (event) => onChange(event.target.value),
+			onBlur,
+			className: "field-sizing-fixed"
+		})
+	});
+};
+export { TextArea };

package/dist/components/atomic/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+import { TextArea, TextAreaProps } from "./TextArea.js";
+export { TextArea, type TextAreaProps };

package/dist/components/atomic/TextInput/TextInput.d.ts

@@ -0,0 +1,18 @@
+import { FieldBaseProps, IconComponent } from "../../../lib/types.js";
+import React from "react";
+export type TextInputType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
+export interface TextInputProps extends FieldBaseProps {
+  value: string;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  name?: string;
+  placeholder?: string;
+  type?: TextInputType;
+  /** Leading icon, decorative (aria-hidden). */
+  icon?: IconComponent;
+  readOnly?: boolean;
+  /** e.g. 'username', 'current-password' on login forms. */
+  autoComplete?: string;
+  ref?: React.Ref<HTMLInputElement>;
+}
+export declare const TextInput: React.FC<TextInputProps>;

package/dist/components/atomic/TextInput/TextInput.js

@@ -0,0 +1,42 @@
+import { FormField } from "../../molecule/FormField/FormField.js";
+import { Input } from "../../ui/input.js";
+import { cn } from "../../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/atomic/TextInput/TextInput.tsx
+const TextInput = (props) => {
+	const { label, hideLabel, description, error, required, disabled, id, "data-testid": testId, value, onChange, onBlur, name, placeholder, type = "text", icon: Icon, readOnly = false, autoComplete, ref } = props;
+	return /* @__PURE__ */ jsx(FormField, {
+		label,
+		hideLabel,
+		description,
+		error,
+		required,
+		disabled,
+		id,
+		"data-testid": testId,
+		children: (control) => /* @__PURE__ */ jsxs("div", {
+			className: "relative",
+			children: [Icon && /* @__PURE__ */ jsx(Icon, {
+				"aria-hidden": true,
+				className: "text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2"
+			}), /* @__PURE__ */ jsx(Input, {
+				ref,
+				id: control.id,
+				"aria-describedby": control["aria-describedby"],
+				"aria-invalid": control["aria-invalid"],
+				"aria-required": control["aria-required"],
+				disabled: control.disabled,
+				type,
+				name,
+				value,
+				placeholder,
+				readOnly,
+				autoComplete,
+				onChange: (event) => onChange(event.target.value),
+				onBlur,
+				className: cn(Icon && "pl-8")
+			})]
+		})
+	});
+};
+export { TextInput };

package/dist/components/atomic/TextInput/index.d.ts

@@ -0,0 +1,2 @@
+import { TextInput, TextInputProps, TextInputType } from "./TextInput.js";
+export { TextInput, type TextInputProps, type TextInputType };

package/dist/components/layout/FormLayout/FormLayout.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export type FormLayoutDirection = 'vertical' | 'horizontal';
+export interface FormLayoutProps {
+  children: React.ReactNode;
+  /** horizontal: fields side by side in equal columns from sm up, stacked on phones. */
+  direction?: FormLayoutDirection;
+  'data-testid'?: string;
+}
+export declare const FormLayout: React.FC<FormLayoutProps>;

package/dist/components/layout/FormLayout/FormLayout.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+// src/components/layout/FormLayout/FormLayout.tsx
+const DIRECTION = {
+	vertical: "flex flex-col gap-5",
+	horizontal: "grid gap-5 sm:auto-cols-fr sm:grid-flow-col"
+};
+const FormLayout = (props) => {
+	const { children, direction = "vertical", "data-testid": testId } = props;
+	return /* @__PURE__ */ jsx("div", {
+		"data-testid": testId,
+		className: DIRECTION[direction],
+		children
+	});
+};
+export { FormLayout };

package/dist/components/layout/FormLayout/index.d.ts

@@ -0,0 +1,2 @@
+import { FormLayout, FormLayoutDirection, FormLayoutProps } from "./FormLayout.js";
+export { FormLayout, type FormLayoutDirection, type FormLayoutProps };

package/dist/components/molecule/FormField/FormField.d.ts

@@ -0,0 +1,16 @@
+import { FieldBaseProps } from "../../../lib/types.js";
+import React from "react";
+/** Wiring FormField hands to its control; pass each prop by name. */
+export interface FormFieldControlProps {
+  id: string;
+  'aria-describedby'?: string;
+  'aria-invalid'?: true;
+  'aria-required'?: true;
+  disabled?: boolean;
+}
+export interface FormFieldProps extends FieldBaseProps {
+  children: (control: FormFieldControlProps) => React.ReactNode;
+  /** horizontal puts the label beside the control (checkbox, switch). */
+  orientation?: 'vertical' | 'horizontal';
+}
+export declare const FormField: React.FC<FormFieldProps>;

package/dist/components/molecule/FormField/FormField.js

@@ -0,0 +1,47 @@
+import { Field, FieldContent, FieldDescription, FieldError, FieldLabel } from "../../ui/field.js";
+import { cn } from "../../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+// src/components/molecule/FormField/FormField.tsx
+const FormField = (props) => {
+	const { children, label, hideLabel = false, description, error, required = false, disabled = false, orientation = "vertical", id: idProp, "data-testid": testId } = props;
+	const generatedId = useId();
+	const id = idProp ?? generatedId;
+	const descriptionId = description ? `${id}-description` : void 0;
+	const errorId = error ? `${id}-error` : void 0;
+	const control = children({
+		id,
+		"aria-describedby": [descriptionId, errorId].filter(Boolean).join(" ") || void 0,
+		"aria-invalid": error ? true : void 0,
+		"aria-required": required ? true : void 0,
+		disabled
+	});
+	const labelNode = /* @__PURE__ */ jsxs(FieldLabel, {
+		htmlFor: id,
+		className: cn(hideLabel && "sr-only"),
+		children: [label, required && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			className: "text-destructive",
+			children: "*"
+		})]
+	});
+	const helpNodes = /* @__PURE__ */ jsxs(Fragment, { children: [description && /* @__PURE__ */ jsx(FieldDescription, {
+		id: descriptionId,
+		children: description
+	}), error && /* @__PURE__ */ jsx(FieldError, {
+		id: errorId,
+		children: error
+	})] });
+	return /* @__PURE__ */ jsx(Field, {
+		orientation,
+		"data-invalid": error ? true : void 0,
+		"data-disabled": disabled || void 0,
+		"data-testid": testId,
+		children: orientation === "horizontal" ? /* @__PURE__ */ jsxs(Fragment, { children: [control, /* @__PURE__ */ jsxs(FieldContent, { children: [labelNode, helpNodes] })] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			labelNode,
+			control,
+			helpNodes
+		] })
+	});
+};
+export { FormField };

package/dist/components/molecule/FormField/index.d.ts

@@ -0,0 +1,2 @@
+import { FormField, FormFieldControlProps, FormFieldProps } from "./FormField.js";
+export { FormField, type FormFieldControlProps, type FormFieldProps };

package/dist/components/ui/checkbox.js

@@ -0,0 +1,18 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { CheckIcon } from "lucide-react";
+import { Checkbox } from "@base-ui/react/checkbox";
+// src/components/ui/checkbox.tsx
+const Checkbox$1 = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		"data-slot": "checkbox",
+		className: cn("peer border-input group-has-[:focus-visible]/field-label:not-data-checked:border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground group-has-[:focus-visible]/field-label:data-checked:border-primary dark:data-checked:bg-primary relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			"data-slot": "checkbox-indicator",
+			className: "grid place-content-center text-current transition-none [&>svg]:size-3.5",
+			children: /* @__PURE__ */ jsx(CheckIcon, {})
+		})
+	});
+};
+export { Checkbox$1 as Checkbox };

package/dist/components/ui/field.js

@@ -0,0 +1,65 @@
+import { Label } from "./label.js";
+import { cva } from "class-variance-authority";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+// src/components/ui/field.tsx
+const fieldVariants = cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
+	variants: { orientation: {
+		vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+		horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+		responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+	} },
+	defaultVariants: { orientation: "vertical" }
+});
+const Field = ({ className, orientation = "vertical", ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		role: "group",
+		"data-slot": "field",
+		"data-orientation": orientation,
+		className: cn(fieldVariants({ orientation }), className),
+		...props
+	});
+};
+const FieldContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "field-content",
+		className: cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className),
+		...props
+	});
+};
+const FieldLabel = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Label, {
+		"data-slot": "field-label",
+		className: cn("group/field-label peer/field-label has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 *:data-[slot=field]:p-2.5", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className),
+		...props
+	});
+};
+const FieldDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "field-description",
+		className: cn("text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className),
+		...props
+	});
+};
+const FieldError = ({ className, children, errors, ...props }) => {
+	const content = useMemo(() => {
+		if (children) return children;
+		if (!errors?.length) return null;
+		const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
+		if (uniqueErrors?.length == 1) return uniqueErrors[0]?.message;
+		return /* @__PURE__ */ jsx("ul", {
+			className: "ml-4 flex list-disc flex-col gap-1",
+			children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index))
+		});
+	}, [children, errors]);
+	if (!content) return null;
+	return /* @__PURE__ */ jsx("div", {
+		role: "alert",
+		"data-slot": "field-error",
+		className: cn("text-destructive text-sm font-normal", className),
+		...props,
+		children: content
+	});
+};
+export { Field, FieldContent, FieldDescription, FieldError, FieldLabel };

package/dist/components/ui/input.js

@@ -0,0 +1,14 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Input } from "@base-ui/react/input";
+// src/components/ui/input.tsx
+const Input$1 = ({ className, type, ...props }) => {
+	return /* @__PURE__ */ jsx(Input, {
+		type,
+		"data-slot": "input",
+		className: cn("border-input file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
+		...props
+	});
+};
+export { Input$1 as Input };

package/dist/components/ui/label.js

@@ -0,0 +1,12 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+// src/components/ui/label.tsx
+const Label = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("label", {
+		"data-slot": "label",
+		className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+		...props
+	});
+};
+export { Label };

package/dist/components/ui/select.js

@@ -0,0 +1,75 @@
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import "react";
+import { Select } from "@base-ui/react/select";
+// src/components/ui/select.tsx
+const Select$1 = Select.Root;
+const SelectValue = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.Value, {
+		"data-slot": "select-value",
+		className: cn("flex flex-1 text-left", className),
+		...props
+	});
+};
+const SelectTrigger = ({ className, size = "default", children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Select.Trigger, {
+		"data-slot": "select-trigger",
+		"data-size": size,
+		className: cn("border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select.Icon, { render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-muted-foreground pointer-events-none size-4" }) })]
+	});
+};
+const SelectContent = ({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Positioner, {
+		side,
+		sideOffset,
+		align,
+		alignOffset,
+		alignItemWithTrigger,
+		className: "isolate z-50",
+		children: /* @__PURE__ */ jsxs(Select.Popup, {
+			"data-slot": "select-content",
+			"data-align-trigger": alignItemWithTrigger,
+			className: cn("bg-popover text-popover-foreground ring-foreground/10 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none", className),
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+				/* @__PURE__ */ jsx(Select.List, { children }),
+				/* @__PURE__ */ jsx(SelectScrollDownButton, {})
+			]
+		})
+	}) });
+};
+const SelectItem = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		"data-slot": "select-item",
+		className: cn("focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Select.ItemText, {
+			className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap",
+			children
+		}), /* @__PURE__ */ jsx(Select.ItemIndicator, {
+			render: /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }),
+			children: /* @__PURE__ */ jsx(CheckIcon, { className: "pointer-events-none" })
+		})]
+	});
+};
+const SelectScrollUpButton = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.ScrollUpArrow, {
+		"data-slot": "select-scroll-up-button",
+		className: cn("bg-popover top-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronUpIcon, {})
+	});
+};
+const SelectScrollDownButton = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.ScrollDownArrow, {
+		"data-slot": "select-scroll-down-button",
+		className: cn("bg-popover bottom-0 z-10 flex w-full cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+	});
+};
+export { Select$1 as Select, SelectContent, SelectItem, SelectScrollDownButton, SelectScrollUpButton, SelectTrigger, SelectValue };

package/dist/components/ui/switch.js

@@ -0,0 +1,18 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Switch } from "@base-ui/react/switch";
+// src/components/ui/switch.tsx
+const Switch$1 = ({ className, size = "default", ...props }) => {
+	return /* @__PURE__ */ jsx(Switch.Root, {
+		"data-slot": "switch",
+		"data-size": size,
+		className: cn("peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Switch.Thumb, {
+			"data-slot": "switch-thumb",
+			className: "bg-background dark:data-checked:bg-primary-foreground dark:data-unchecked:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0"
+		})
+	});
+};
+export { Switch$1 as Switch };

package/dist/components/ui/textarea.js

@@ -0,0 +1,12 @@
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import "react";
+// src/components/ui/textarea.tsx
+const Textarea = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("textarea", {
+		"data-slot": "textarea",
+		className: cn("border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
+		...props
+	});
+};
+export { Textarea };

package/dist/index.d.ts

@@ -3,19 +3,35 @@ import { Badge, BadgeProps } from "./components/atomic/Badge/Badge.js";
 import "./components/atomic/Button/index.js";
 import { ButtonVariant } from "./components/atomic/Button/buttonVariant.js";
 import { Button, ButtonProps } from "./components/atomic/Button/Button.js";
+import "./components/atomic/Checkbox/index.js";
+import { Checkbox, CheckboxProps } from "./components/atomic/Checkbox/Checkbox.js";
+import "./components/atomic/ColorInput/index.js";
+import { ColorInput, ColorInputProps } from "./components/atomic/ColorInput/ColorInput.js";
 import "./components/atomic/Divider/index.js";
 import { Divider, DividerProps } from "./components/atomic/Divider/Divider.js";
 import "./components/atomic/Heading/index.js";
 import { Heading, HeadingLevel, HeadingProps } from "./components/atomic/Heading/Heading.js";
+import "./components/atomic/Switch/index.js";
+import { Switch, SwitchProps } from "./components/atomic/Switch/Switch.js";
 import "./components/atomic/Text/index.js";
 import { Text, TextProps, TextSize, TextTone, TextWeight } from "./components/atomic/Text/Text.js";
+import "./components/atomic/TextArea/index.js";
+import { TextArea, TextAreaProps } from "./components/atomic/TextArea/TextArea.js";
+import "./components/atomic/TextInput/index.js";
+import { TextInput, TextInputProps, TextInputType } from "./components/atomic/TextInput/TextInput.js";
 import "./components/atomic/IconButton/index.js";
 import { IconButton, IconButtonProps, IconButtonVariant } from "./components/atomic/IconButton/IconButton.js";
+import "./components/atomic/Select/index.js";
+import { Select, SelectOption, SelectProps } from "./components/atomic/Select/Select.js";
 import "./components/atomic/Skeleton/index.js";
 import { Skeleton, SkeletonProps, SkeletonShape } from "./components/atomic/Skeleton/Skeleton.js";
 import "./components/atomic/Spinner/index.js";
 import { Spinner, SpinnerProps } from "./components/atomic/Spinner/Spinner.js";
+import "./components/layout/FormLayout/index.js";
+import { FormLayout, FormLayoutDirection, FormLayoutProps } from "./components/layout/FormLayout/FormLayout.js";
+import "./components/molecule/FormField/index.js";
+import { FormField, FormFieldControlProps, FormFieldProps } from "./components/molecule/FormField/FormField.js";
 import "./components/layout/Stack/index.js";
 import { HStack, HStackProps, Stack, StackAlign, StackGap, StackJustify, StackProps, VStack, VStackProps } from "./components/layout/Stack/Stack.js";
-import { IconComponent, Size, Tone } from "./lib/types.js";
-export { Badge, type BadgeProps, Button, type ButtonProps, type ButtonVariant, Divider, type DividerProps, HStack, type HStackProps, Heading, type HeadingLevel, type HeadingProps, IconButton, type IconButtonProps, type IconButtonVariant, type IconComponent, type Size, Skeleton, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Text, type TextProps, type TextSize, type TextTone, type TextWeight, type Tone, VStack, type VStackProps };
+import { FieldBaseProps, IconComponent, Size, Tone } from "./lib/types.js";
+export { Badge, type BadgeProps, Button, type ButtonProps, type ButtonVariant, Checkbox, type CheckboxProps, ColorInput, type ColorInputProps, Divider, type DividerProps, type FieldBaseProps, FormField, type FormFieldControlProps, type FormFieldProps, FormLayout, type FormLayoutDirection, type FormLayoutProps, HStack, type HStackProps, Heading, type HeadingLevel, type HeadingProps, IconButton, type IconButtonProps, type IconButtonVariant, type IconComponent, Select, type SelectOption, type SelectProps, type Size, Skeleton, type SkeletonProps, type SkeletonShape, Spinner, type SpinnerProps, Stack, type StackAlign, type StackGap, type StackJustify, type StackProps, Switch, type SwitchProps, Text, TextArea, type TextAreaProps, TextInput, type TextInputProps, type TextInputType, type TextProps, type TextSize, type TextTone, type TextWeight, type Tone, VStack, type VStackProps };

package/dist/index.js

@@ -1,10 +1,18 @@
 import { Badge } from "./components/atomic/Badge/Badge.js";
 import { Button } from "./components/atomic/Button/Button.js";
+import { Checkbox } from "./components/atomic/Checkbox/Checkbox.js";
+import { ColorInput } from "./components/atomic/ColorInput/ColorInput.js";
 import { Divider } from "./components/atomic/Divider/Divider.js";
 import { Heading } from "./components/atomic/Heading/Heading.js";
+import { Switch } from "./components/atomic/Switch/Switch.js";
 import { Text } from "./components/atomic/Text/Text.js";
+import { TextArea } from "./components/atomic/TextArea/TextArea.js";
+import { TextInput } from "./components/atomic/TextInput/TextInput.js";
 import { IconButton } from "./components/atomic/IconButton/IconButton.js";
+import { Select } from "./components/atomic/Select/Select.js";
 import { Skeleton } from "./components/atomic/Skeleton/Skeleton.js";
 import { Spinner } from "./components/atomic/Spinner/Spinner.js";
+import { FormLayout } from "./components/layout/FormLayout/FormLayout.js";
+import { FormField } from "./components/molecule/FormField/FormField.js";
 import { HStack, Stack, VStack } from "./components/layout/Stack/Stack.js";
-export { Badge, Button, Divider, HStack, Heading, IconButton, Skeleton, Spinner, Stack, Text, VStack };
+export { Badge, Button, Checkbox, ColorInput, Divider, FormField, FormLayout, HStack, Heading, IconButton, Select, Skeleton, Spinner, Stack, Switch, Text, TextArea, TextInput, VStack };

package/dist/lib/types.d.ts

@@ -7,4 +7,18 @@ export type IconComponent = React.ComponentType<{
   className?: string;
   'aria-hidden'?: boolean;
   'data-icon'?: string;
-}>;
+}>;
+/** Label, help and error props every form input shares (rendered by FormField). */
+export interface FieldBaseProps {
+  /** Accessible name; always required, even when hidden. */
+  label: string;
+  /** Hides the label visually; screen readers still announce it. */
+  hideLabel?: boolean;
+  description?: string;
+  /** Message shown under the field; also sets aria-invalid. */
+  error?: string;
+  required?: boolean;
+  disabled?: boolean;
+  id?: string;
+  'data-testid'?: string;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ashwa-io/ui",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Ashwa design system: locked React components on shadcn/ui (Base UI) and Tailwind v4, with per-org brand theming.",
   "license": "MIT",
   "type": "module",