@kestack/web-platform 0.0.0-stage → 0.0.1

package/dist/form/create-form-hook.d.ts

@@ -0,0 +1,62 @@
+import { SubmitButton } from "./components/submit-button.js";
+import { TextField } from "./fields/text-field.js";
+import { TextareaField } from "./fields/textarea-field.js";
+import { SelectField } from "./fields/select-field.js";
+import { SwitchField } from "./fields/switch-field.js";
+import { DatePickerField } from "./fields/date-picker-field.js";
+//#region src/form/create-form-hook.d.ts
+/**
+ * Pre-configured form hook with all field and form components registered.
+ *
+ * @example
+ * ```tsx
+ * import { useAppForm } from "@kestack/web-platform/form"
+ *
+ * function MyForm() {
+ *   const form = useAppForm({
+ *     defaultValues: { email: "", message: "" },
+ *     onSubmit: async ({ value }) => { ... },
+ *   })
+ *
+ *   return (
+ *     <form onSubmit={(e) => { e.preventDefault(); form.handleSubmit() }}>
+ *       <form.AppField name="email" children={(field) => (
+ *         <field.TextField label="Email" type="email" required />
+ *       )} />
+ *       <form.AppForm>
+ *         <form.SubmitButton>Send</form.SubmitButton>
+ *       </form.AppForm>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+export declare const useAppForm: <TFormData, TOnMount extends undefined | import("@tanstack/react-form").FormValidateOrFn<TFormData>, TOnChange extends undefined | import("@tanstack/react-form").FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | import("@tanstack/react-form").FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | import("@tanstack/react-form").FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | import("@tanstack/react-form").FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData>, TSubmitMeta>(props: import("@tanstack/react-form").FormOptions<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta>) => import("@tanstack/react-form").AppFieldExtendedReactFormApi<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
+  readonly TextField: typeof TextField;
+  readonly TextareaField: typeof TextareaField;
+  readonly SelectField: typeof SelectField;
+  readonly SwitchField: typeof SwitchField;
+  readonly DatePickerField: typeof DatePickerField;
+}, {
+  readonly SubmitButton: typeof SubmitButton;
+}>, withForm: <TFormData, TOnMount extends undefined | import("@tanstack/react-form").FormValidateOrFn<TFormData>, TOnChange extends undefined | import("@tanstack/react-form").FormValidateOrFn<TFormData>, TOnChangeAsync extends undefined | import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData>, TOnBlur extends undefined | import("@tanstack/react-form").FormValidateOrFn<TFormData>, TOnBlurAsync extends undefined | import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData>, TOnSubmit extends undefined | import("@tanstack/react-form").FormValidateOrFn<TFormData>, TOnSubmitAsync extends undefined | import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData>, TOnDynamic extends undefined | import("@tanstack/react-form").FormValidateOrFn<TFormData>, TOnDynamicAsync extends undefined | import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData>, TOnServer extends undefined | import("@tanstack/react-form").FormAsyncValidateOrFn<TFormData>, TSubmitMeta, TRenderProps extends object = {}>({ render, props }: import("@tanstack/react-form").WithFormProps<TFormData, TOnMount, TOnChange, TOnChangeAsync, TOnBlur, TOnBlurAsync, TOnSubmit, TOnSubmitAsync, TOnDynamic, TOnDynamicAsync, TOnServer, TSubmitMeta, {
+  readonly TextField: typeof TextField;
+  readonly TextareaField: typeof TextareaField;
+  readonly SelectField: typeof SelectField;
+  readonly SwitchField: typeof SwitchField;
+  readonly DatePickerField: typeof DatePickerField;
+}, {
+  readonly SubmitButton: typeof SubmitButton;
+}, TRenderProps>) => import("react").FunctionComponent<import("react").PropsWithChildren<NoInfer<[unknown] extends [TRenderProps] ? any : TRenderProps> & {
+  form: import("@tanstack/react-form").AppFieldExtendedReactFormApi<[unknown] extends [TFormData] ? any : TFormData, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnMount] ? [TOnMount] extends [TOnMount & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnMount : TOnMount, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChange] ? [TOnChange] extends [TOnChange & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChange : TOnChange, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnChangeAsync] ? [TOnChangeAsync] extends [TOnChangeAsync & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnChangeAsync : TOnChangeAsync, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlur] ? [TOnBlur] extends [TOnBlur & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlur : TOnBlur, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnBlurAsync] ? [TOnBlurAsync] extends [TOnBlurAsync & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnBlurAsync : TOnBlurAsync, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmit] ? [TOnSubmit] extends [TOnSubmit & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmit : TOnSubmit, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnSubmitAsync] ? [TOnSubmitAsync] extends [TOnSubmitAsync & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnSubmitAsync : TOnSubmitAsync, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamic] ? [TOnDynamic] extends [TOnDynamic & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamic : TOnDynamic, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnDynamicAsync] ? [TOnDynamicAsync] extends [TOnDynamicAsync & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnDynamicAsync : TOnDynamicAsync, [import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined] extends [TOnServer] ? [TOnServer] extends [TOnServer & (import("@tanstack/react-form").FormValidateOrFn<TFormData> | undefined)] ? any : TOnServer : TOnServer, [unknown] extends [TSubmitMeta] ? any : TSubmitMeta, {
+    readonly TextField: typeof TextField;
+    readonly TextareaField: typeof TextareaField;
+    readonly SelectField: typeof SelectField;
+    readonly SwitchField: typeof SwitchField;
+    readonly DatePickerField: typeof DatePickerField;
+  }, {
+    readonly SubmitButton: typeof SubmitButton;
+  }>;
+}>>;
+//#endregion
+//# sourceMappingURL=create-form-hook.d.ts.map

package/dist/form/create-form-hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-form-hook.d.ts","names":[],"sources":["../../src/form/create-form-hook.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAoCe,aAAU,WAAA,4DAAA,iBAAA,YAAA,6DAAA,iBAAA,YAAA,kEAAA,sBAAA,YAAA,2DAAA,iBAAA,YAAA,gEAAA,sBAAA,YAAA,6DAAA,iBAAA,YAAA,kEAAA,sBAAA,YAAA,8DAAA,iBAAA,YAAA,mEAAA,sBAAA,YAAA,6DAAA,sBAAA,YAAA,aAAA,sCAAA,YAAA,WAAA,UAAA,WAAA,gBAAA,SAAA,cAAA,WAAA,gBAAA,YAAA,iBAAA,WAAA,gDAAA,6BAAA,WAAA,UAAA,WAAA,gBAAA,SAAA,cAAA,WAAA,gBAAA,YAAA,iBAAA,WAAA;;;;;;;;IAAE,WAAQ,WAAA,4DAAA,iBAAA,YAAA,6DAAA,iBAAA,YAAA,kEAAA,sBAAA,YAAA,2DAAA,iBAAA,YAAA,gEAAA,sBAAA,YAAA,6DAAA,iBAAA,YAAA,kEAAA,sBAAA,YAAA,8DAAA,iBAAA,YAAA,mEAAA,sBAAA,YAAA,6DAAA,sBAAA,YAAA,aAAA,oCAAA,QAAA,wCAAA,cAAA,WAAA,UAAA,WAAA,gBAAA,SAAA,cAAA,WAAA,gBAAA,YAAA,iBAAA,WAAA"}

package/dist/form/create-form-hook.js

@@ -0,0 +1,51 @@
+import { fieldContext, formContext } from "./context.js";
+import { TextField } from "./fields/text-field.js";
+import { TextareaField } from "./fields/textarea-field.js";
+import { SelectField } from "./fields/select-field.js";
+import { SwitchField } from "./fields/switch-field.js";
+import { DatePickerField } from "./fields/date-picker-field.js";
+import { SubmitButton } from "./components/submit-button.js";
+import { createFormHook } from "@tanstack/react-form";
+//#region src/form/create-form-hook.ts
+/**
+* Pre-configured form hook with all field and form components registered.
+*
+* @example
+* ```tsx
+* import { useAppForm } from "@kestack/web-platform/form"
+*
+* function MyForm() {
+*   const form = useAppForm({
+*     defaultValues: { email: "", message: "" },
+*     onSubmit: async ({ value }) => { ... },
+*   })
+*
+*   return (
+*     <form onSubmit={(e) => { e.preventDefault(); form.handleSubmit() }}>
+*       <form.AppField name="email" children={(field) => (
+*         <field.TextField label="Email" type="email" required />
+*       )} />
+*       <form.AppForm>
+*         <form.SubmitButton>Send</form.SubmitButton>
+*       </form.AppForm>
+*     </form>
+*   )
+* }
+* ```
+*/
+const { useAppForm, withForm } = createFormHook({
+	fieldContext,
+	formContext,
+	fieldComponents: {
+		TextField,
+		TextareaField,
+		SelectField,
+		SwitchField,
+		DatePickerField
+	},
+	formComponents: { SubmitButton }
+});
+//#endregion
+export { useAppForm, withForm };
+
+//# sourceMappingURL=create-form-hook.js.map

package/dist/form/create-form-hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-form-hook.js","names":[],"sources":["../../src/form/create-form-hook.ts"],"sourcesContent":["import { createFormHook } from '@tanstack/react-form';\n\nimport { fieldContext, formContext } from './context.js';\nimport { TextField } from './fields/text-field.js';\nimport { TextareaField } from './fields/textarea-field.js';\nimport { SelectField } from './fields/select-field.js';\nimport { SwitchField } from './fields/switch-field.js';\nimport { DatePickerField } from './fields/date-picker-field.js';\nimport { SubmitButton } from './components/submit-button.js';\n\n/**\n * Pre-configured form hook with all field and form components registered.\n *\n * @example\n * ```tsx\n * import { useAppForm } from \"@kestack/web-platform/form\"\n *\n * function MyForm() {\n *   const form = useAppForm({\n *     defaultValues: { email: \"\", message: \"\" },\n *     onSubmit: async ({ value }) => { ... },\n *   })\n *\n *   return (\n *     <form onSubmit={(e) => { e.preventDefault(); form.handleSubmit() }}>\n *       <form.AppField name=\"email\" children={(field) => (\n *         <field.TextField label=\"Email\" type=\"email\" required />\n *       )} />\n *       <form.AppForm>\n *         <form.SubmitButton>Send</form.SubmitButton>\n *       </form.AppForm>\n *     </form>\n *   )\n * }\n * ```\n */\nexport const { useAppForm, withForm } = createFormHook({\n  fieldContext,\n  formContext,\n  fieldComponents: {\n    TextField,\n    TextareaField,\n    SelectField,\n    SwitchField,\n    DatePickerField,\n  },\n  formComponents: {\n    SubmitButton,\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAa,EAAE,YAAY,aAAa,eAAe;CACrD;CACA;CACA,iBAAiB;EACf;EACA;EACA;EACA;EACA;CACF;CACA,gBAAgB,EACd,aACF;AACF,CAAC"}

package/dist/form/fields/date-picker-field.d.ts

@@ -0,0 +1,9 @@
+import { BaseFieldProps } from "../types.js";
+import * as React$1 from "react";
+//#region src/form/fields/date-picker-field.d.ts
+export interface DatePickerFieldProps extends Pick<BaseFieldProps, 'label' | 'description' | 'required' | 'disabled' | 'placeholder' | 'className' | 'showAllErrors'> {
+  formatDate?: (date: Date) => string;
+}
+export declare function DatePickerField({ label, description, required, disabled, placeholder, className, formatDate, showAllErrors }: DatePickerFieldProps): React$1.JSX.Element;
+//#endregion
+//# sourceMappingURL=date-picker-field.d.ts.map

package/dist/form/fields/date-picker-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-field.d.ts","names":["React"],"sources":["../../../src/form/fields/date-picker-field.tsx"],"mappings":";;;iBAsBiB,6BAA6B,KAC5C;EASA,cAAc,MAAM;;wBAUN,kBACd,OACA,aACA,UACA,UACA,aACA,WACA,YACA,iBACC,uBAAoBA,QAAA,IAAA"}

package/dist/form/fields/date-picker-field.js

@@ -0,0 +1,84 @@
+"use client";
+import { Button } from "../../components/ui/button.js";
+import { cn } from "../../components/lib/utils.js";
+import { useFieldContext } from "../context.js";
+import { Field, FieldDescription, FieldError, FieldLabel } from "../../components/ui/field.js";
+import { getFieldMeta, toFieldErrors } from "../types.js";
+import { Calendar } from "../../components/ui/calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../components/ui/popover.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarIcon } from "lucide-react";
+//#region src/form/fields/date-picker-field.tsx
+const defaultFormatDate = (date) => date.toLocaleDateString("en-US", {
+	year: "numeric",
+	month: "long",
+	day: "numeric"
+});
+function DatePickerField({ label, description, required, disabled, placeholder = "Pick a date", className, formatDate = defaultFormatDate, showAllErrors = true }) {
+	const field = useFieldContext();
+	const meta = getFieldMeta(field);
+	const showError = meta.isInvalid && meta.isTouched;
+	const value = field.state.value;
+	const [open, setOpen] = React$1.useState(false);
+	const triggerId = React$1.useId();
+	const descriptionId = React$1.useId();
+	const errorId = React$1.useId();
+	const describedBy = [description ? descriptionId : void 0, showError ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs(Field, {
+		"data-slot": "date-picker-field",
+		"data-invalid": showError || void 0,
+		"data-disabled": disabled || void 0,
+		className: cn(className),
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: triggerId,
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: " *"
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Popover, {
+				open,
+				onOpenChange: setOpen,
+				children: [/* @__PURE__ */ jsxs(PopoverTrigger, {
+					render: /* @__PURE__ */ jsx(Button, {
+						id: triggerId,
+						variant: "outline",
+						disabled,
+						className: cn("w-full justify-start text-left font-normal", !value && "text-muted-foreground"),
+						"aria-invalid": showError || void 0,
+						"aria-describedby": describedBy,
+						"aria-required": required || void 0
+					}),
+					children: [/* @__PURE__ */ jsx(CalendarIcon, { className: "mr-2 size-4" }), value ? formatDate(value) : placeholder]
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					className: "w-auto p-0",
+					align: "start",
+					children: /* @__PURE__ */ jsx(Calendar, {
+						mode: "single",
+						selected: value,
+						onSelect: (selected) => {
+							field.handleChange(selected);
+							field.handleBlur();
+							setOpen(false);
+						},
+						disabled
+					})
+				})]
+			}),
+			description && /* @__PURE__ */ jsx(FieldDescription, {
+				id: descriptionId,
+				children: description
+			}),
+			showError && /* @__PURE__ */ jsx(FieldError, {
+				id: errorId,
+				errors: toFieldErrors(meta.errors, showAllErrors)
+			})
+		]
+	});
+}
+//#endregion
+export { DatePickerField };
+
+//# sourceMappingURL=date-picker-field.js.map

package/dist/form/fields/date-picker-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-field.js","names":["React"],"sources":["../../../src/form/fields/date-picker-field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '#lib/utils';\nimport { Button } from '#components/ui/button';\nimport { Calendar } from '#components/ui/calendar';\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '#components/ui/popover';\nimport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n} from '#components/ui/field';\nimport { CalendarIcon } from 'lucide-react';\nimport { useFieldContext } from '../context.js';\nimport { getFieldMeta, toFieldErrors, type BaseFieldProps } from '../types.js';\n\nexport interface DatePickerFieldProps extends Pick<\n  BaseFieldProps,\n  | 'label'\n  | 'description'\n  | 'required'\n  | 'disabled'\n  | 'placeholder'\n  | 'className'\n  | 'showAllErrors'\n> {\n  formatDate?: (date: Date) => string;\n}\n\nconst defaultFormatDate = (date: Date) =>\n  date.toLocaleDateString('en-US', {\n    year: 'numeric',\n    month: 'long',\n    day: 'numeric',\n  });\n\nexport function DatePickerField({\n  label,\n  description,\n  required,\n  disabled,\n  placeholder = 'Pick a date',\n  className,\n  formatDate = defaultFormatDate,\n  showAllErrors = true,\n}: DatePickerFieldProps) {\n  const field = useFieldContext<Date | undefined>();\n  const meta = getFieldMeta(field);\n  const showError = meta.isInvalid && meta.isTouched;\n  const value = field.state.value;\n\n  const [open, setOpen] = React.useState(false);\n  const triggerId = React.useId();\n  const descriptionId = React.useId();\n  const errorId = React.useId();\n\n  const describedBy =\n    [description ? descriptionId : undefined, showError ? errorId : undefined]\n      .filter(Boolean)\n      .join(' ') || undefined;\n\n  return (\n    <Field\n      data-slot=\"date-picker-field\"\n      data-invalid={showError || undefined}\n      data-disabled={disabled || undefined}\n      className={cn(className)}\n    >\n      {label && (\n        <FieldLabel htmlFor={triggerId}>\n          {label}\n          {required && <span aria-hidden=\"true\"> *</span>}\n        </FieldLabel>\n      )}\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger\n          render={\n            <Button\n              id={triggerId}\n              variant=\"outline\"\n              disabled={disabled}\n              className={cn(\n                'w-full justify-start text-left font-normal',\n                !value && 'text-muted-foreground',\n              )}\n              aria-invalid={showError || undefined}\n              aria-describedby={describedBy}\n              aria-required={required || undefined}\n            />\n          }\n        >\n          <CalendarIcon className=\"mr-2 size-4\" />\n          {value ? formatDate(value) : placeholder}\n        </PopoverTrigger>\n        <PopoverContent className=\"w-auto p-0\" align=\"start\">\n          <Calendar\n            mode=\"single\"\n            selected={value}\n            onSelect={(selected) => {\n              field.handleChange(selected);\n              field.handleBlur();\n              setOpen(false);\n            }}\n            disabled={disabled}\n          />\n        </PopoverContent>\n      </Popover>\n      {description && (\n        <FieldDescription id={descriptionId}>{description}</FieldDescription>\n      )}\n      {showError && (\n        <FieldError\n          id={errorId}\n          errors={toFieldErrors(meta.errors, showAllErrors)}\n        />\n      )}\n    </Field>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAmCA,MAAM,qBAAqB,SACzB,KAAK,mBAAmB,SAAS;CAC/B,MAAM;CACN,OAAO;CACP,KAAK;AACP,CAAC;AAEH,SAAgB,gBAAgB,EAC9B,OACA,aACA,UACA,UACA,cAAc,eACd,WACA,aAAa,mBACb,gBAAgB,QACO;CACvB,MAAM,QAAQ,gBAAkC;CAChD,MAAM,OAAO,aAAa,KAAK;CAC/B,MAAM,YAAY,KAAK,aAAa,KAAK;CACzC,MAAM,QAAQ,MAAM,MAAM;CAE1B,MAAM,CAAC,MAAM,WAAWA,QAAM,SAAS,KAAK;CAC5C,MAAM,YAAYA,QAAM,MAAM;CAC9B,MAAM,gBAAgBA,QAAM,MAAM;CAClC,MAAM,UAAUA,QAAM,MAAM;CAE5B,MAAM,cACJ,CAAC,cAAc,gBAAgB,KAAA,GAAW,YAAY,UAAU,KAAA,CAAS,CAAC,CACvE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA;CAElB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,gBAAc,aAAa,KAAA;EAC3B,iBAAe,YAAY,KAAA;EAC3B,WAAW,GAAG,SAAS;EAJzB,UAAA;GAMG,SACC,qBAAC,YAAD;IAAY,SAAS;IAArB,UAAA,CACG,OACA,YAAY,oBAAC,QAAD;KAAM,eAAY;KAAO,UAAA;IAAQ,CAAA,CACpC;;GAEd,qBAAC,SAAD;IAAe;IAAM,cAAc;IAAnC,UAAA,CACE,qBAAC,gBAAD;KACE,QACE,oBAAC,QAAD;MACE,IAAI;MACJ,SAAQ;MACE;MACV,WAAW,GACT,8CACA,CAAC,SAAS,uBACZ;MACA,gBAAc,aAAa,KAAA;MAC3B,oBAAkB;MAClB,iBAAe,YAAY,KAAA;KAC5B,CAAA;KAbL,UAAA,CAgBE,oBAAC,cAAD,EAAc,WAAU,cAAe,CAAA,GACtC,QAAQ,WAAW,KAAK,IAAI,WACf;IAChB,CAAA,GAAA,oBAAC,gBAAD;KAAgB,WAAU;KAAa,OAAM;KAC3C,UAAA,oBAAC,UAAD;MACE,MAAK;MACL,UAAU;MACV,WAAW,aAAa;OACtB,MAAM,aAAa,QAAQ;OAC3B,MAAM,WAAW;OACjB,QAAQ,KAAK;MACf;MACU;KACX,CAAA;IACa,CAAA,CACT;;GACR,eACC,oBAAC,kBAAD;IAAkB,IAAI;IAAgB,UAAA;GAA8B,CAAA;GAErE,aACC,oBAAC,YAAD;IACE,IAAI;IACJ,QAAQ,cAAc,KAAK,QAAQ,aAAa;GACjD,CAAA;EAEE;;AAEX"}

package/dist/form/fields/select-field.d.ts

@@ -0,0 +1,15 @@
+import { BaseFieldProps } from "../types.js";
+import * as React$1 from "react";
+//#region src/form/fields/select-field.d.ts
+export interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+export interface SelectFieldProps extends BaseFieldProps {
+  options: SelectOption[];
+  size?: 'sm' | 'default';
+}
+export declare function SelectField({ label, description, required, disabled, placeholder, className, options, size, showAllErrors }: SelectFieldProps): React$1.JSX.Element;
+//#endregion
+//# sourceMappingURL=select-field.d.ts.map

package/dist/form/fields/select-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-field.d.ts","names":["React"],"sources":["../../../src/form/fields/select-field.tsx"],"mappings":";;;iBAqBiB;EACf;EACA;EACA;;iBAGe,yBAAyB;EACxC,SAAS;EACT;;wBAGc,cACd,OACA,aACA,UACA,UACA,aACA,WACA,SACA,MACA,iBACC,mBAAgBA,QAAA,IAAA"}

package/dist/form/fields/select-field.js

@@ -0,0 +1,65 @@
+"use client";
+import { cn } from "../../components/lib/utils.js";
+import { useFieldContext } from "../context.js";
+import { Field, FieldDescription, FieldError, FieldLabel } from "../../components/ui/field.js";
+import { getFieldMeta, toFieldErrors } from "../types.js";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../../components/ui/select.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/form/fields/select-field.tsx
+function SelectField({ label, description, required, disabled, placeholder, className, options, size, showAllErrors = true }) {
+	const field = useFieldContext();
+	const meta = getFieldMeta(field);
+	const showError = meta.isInvalid && meta.isTouched;
+	const triggerId = React$1.useId();
+	const descriptionId = React$1.useId();
+	const errorId = React$1.useId();
+	const describedBy = [description ? descriptionId : void 0, showError ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs(Field, {
+		"data-slot": "select-field",
+		"data-invalid": showError || void 0,
+		"data-disabled": disabled || void 0,
+		className: cn(className),
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: triggerId,
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: " *"
+				})]
+			}),
+			/* @__PURE__ */ jsxs(Select, {
+				value: field.state.value ?? "",
+				onValueChange: (value) => {
+					field.handleChange(value ?? "");
+					field.handleBlur();
+				},
+				disabled,
+				children: [/* @__PURE__ */ jsx(SelectTrigger, {
+					id: triggerId,
+					size,
+					"aria-invalid": showError || void 0,
+					"aria-describedby": describedBy,
+					"aria-required": required || void 0,
+					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)) })]
+			}),
+			description && /* @__PURE__ */ jsx(FieldDescription, {
+				id: descriptionId,
+				children: description
+			}),
+			showError && /* @__PURE__ */ jsx(FieldError, {
+				id: errorId,
+				errors: toFieldErrors(meta.errors, showAllErrors)
+			})
+		]
+	});
+}
+//#endregion
+export { SelectField };
+
+//# sourceMappingURL=select-field.js.map

package/dist/form/fields/select-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-field.js","names":["React"],"sources":["../../../src/form/fields/select-field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '#lib/utils';\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '#components/ui/select';\nimport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n} from '#components/ui/field';\nimport { useFieldContext } from '../context.js';\nimport { getFieldMeta, toFieldErrors, type BaseFieldProps } from '../types.js';\n\nexport interface SelectOption {\n  value: string;\n  label: string;\n  disabled?: boolean;\n}\n\nexport interface SelectFieldProps extends BaseFieldProps {\n  options: SelectOption[];\n  size?: 'sm' | 'default';\n}\n\nexport function SelectField({\n  label,\n  description,\n  required,\n  disabled,\n  placeholder,\n  className,\n  options,\n  size,\n  showAllErrors = true,\n}: SelectFieldProps) {\n  const field = useFieldContext<string>();\n  const meta = getFieldMeta(field);\n  const showError = meta.isInvalid && meta.isTouched;\n\n  const triggerId = React.useId();\n  const descriptionId = React.useId();\n  const errorId = React.useId();\n\n  const describedBy =\n    [description ? descriptionId : undefined, showError ? errorId : undefined]\n      .filter(Boolean)\n      .join(' ') || undefined;\n\n  return (\n    <Field\n      data-slot=\"select-field\"\n      data-invalid={showError || undefined}\n      data-disabled={disabled || undefined}\n      className={cn(className)}\n    >\n      {label && (\n        <FieldLabel htmlFor={triggerId}>\n          {label}\n          {required && <span aria-hidden=\"true\"> *</span>}\n        </FieldLabel>\n      )}\n      <Select\n        value={field.state.value ?? ''}\n        onValueChange={(value) => {\n          field.handleChange(value ?? '');\n          field.handleBlur();\n        }}\n        disabled={disabled}\n      >\n        <SelectTrigger\n          id={triggerId}\n          size={size}\n          aria-invalid={showError || undefined}\n          aria-describedby={describedBy}\n          aria-required={required || undefined}\n        >\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent>\n          {options.map((option) => (\n            <SelectItem\n              key={option.value}\n              value={option.value}\n              disabled={option.disabled}\n            >\n              {option.label}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\n      {description && (\n        <FieldDescription id={descriptionId}>{description}</FieldDescription>\n      )}\n      {showError && (\n        <FieldError\n          id={errorId}\n          errors={toFieldErrors(meta.errors, showAllErrors)}\n        />\n      )}\n    </Field>\n  );\n}\n"],"mappings":";;;;;;;;;AAgCA,SAAgB,YAAY,EAC1B,OACA,aACA,UACA,UACA,aACA,WACA,SACA,MACA,gBAAgB,QACG;CACnB,MAAM,QAAQ,gBAAwB;CACtC,MAAM,OAAO,aAAa,KAAK;CAC/B,MAAM,YAAY,KAAK,aAAa,KAAK;CAEzC,MAAM,YAAYA,QAAM,MAAM;CAC9B,MAAM,gBAAgBA,QAAM,MAAM;CAClC,MAAM,UAAUA,QAAM,MAAM;CAE5B,MAAM,cACJ,CAAC,cAAc,gBAAgB,KAAA,GAAW,YAAY,UAAU,KAAA,CAAS,CAAC,CACvE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA;CAElB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,gBAAc,aAAa,KAAA;EAC3B,iBAAe,YAAY,KAAA;EAC3B,WAAW,GAAG,SAAS;EAJzB,UAAA;GAMG,SACC,qBAAC,YAAD;IAAY,SAAS;IAArB,UAAA,CACG,OACA,YAAY,oBAAC,QAAD;KAAM,eAAY;KAAO,UAAA;IAAQ,CAAA,CACpC;;GAEd,qBAAC,QAAD;IACE,OAAO,MAAM,MAAM,SAAS;IAC5B,gBAAgB,UAAU;KACxB,MAAM,aAAa,SAAS,EAAE;KAC9B,MAAM,WAAW;IACnB;IACU;IANZ,UAAA,CAQE,oBAAC,eAAD;KACE,IAAI;KACE;KACN,gBAAc,aAAa,KAAA;KAC3B,oBAAkB;KAClB,iBAAe,YAAY,KAAA;KAE3B,UAAA,oBAAC,aAAD,EAA0B,YAAc,CAAA;IAC3B,CAAA,GACf,oBAAC,eAAD,EAAA,UACG,QAAQ,KAAK,WACZ,oBAAC,YAAD;KAEE,OAAO,OAAO;KACd,UAAU,OAAO;KAEhB,UAAA,OAAO;IACE,GALL,OAAO,KAKF,CACb,EACY,CAAA,CACT;;GACP,eACC,oBAAC,kBAAD;IAAkB,IAAI;IAAgB,UAAA;GAA8B,CAAA;GAErE,aACC,oBAAC,YAAD;IACE,IAAI;IACJ,QAAQ,cAAc,KAAK,QAAQ,aAAa;GACjD,CAAA;EAEE;;AAEX"}

package/dist/form/fields/switch-field.d.ts

@@ -0,0 +1,9 @@
+import { BaseFieldProps } from "../types.js";
+import * as React$1 from "react";
+//#region src/form/fields/switch-field.d.ts
+export interface SwitchFieldProps extends Pick<BaseFieldProps, 'label' | 'description' | 'disabled' | 'className' | 'showAllErrors'> {
+  size?: 'sm' | 'default';
+}
+export declare function SwitchField({ label, description, disabled, className, size, showAllErrors }: SwitchFieldProps): React$1.JSX.Element;
+//#endregion
+//# sourceMappingURL=switch-field.d.ts.map

package/dist/form/fields/switch-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-field.d.ts","names":["React"],"sources":["../../../src/form/fields/switch-field.tsx"],"mappings":";;;iBAWiB,yBAAyB,KACxC;EAGA;;wBAGc,cACd,OACA,aACA,UACA,WACA,MACA,iBACC,mBAAgBA,QAAA,IAAA"}

package/dist/form/fields/switch-field.js

@@ -0,0 +1,56 @@
+"use client";
+import { Label } from "../../components/ui/label.js";
+import { cn } from "../../components/lib/utils.js";
+import { useFieldContext } from "../context.js";
+import { Field, FieldDescription, FieldError } from "../../components/ui/field.js";
+import { getFieldMeta, toFieldErrors } from "../types.js";
+import { Switch } from "../../components/ui/switch.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/form/fields/switch-field.tsx
+function SwitchField({ label, description, disabled, className, size, showAllErrors = true }) {
+	const field = useFieldContext();
+	const meta = getFieldMeta(field);
+	const showError = meta.isInvalid && meta.isTouched;
+	const switchId = React$1.useId();
+	const descriptionId = React$1.useId();
+	const errorId = React$1.useId();
+	const describedBy = [description ? descriptionId : void 0, showError ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs(Field, {
+		"data-slot": "switch-field",
+		"data-invalid": showError || void 0,
+		"data-disabled": disabled || void 0,
+		orientation: "horizontal",
+		className: cn(className),
+		children: [
+			/* @__PURE__ */ jsx(Switch, {
+				id: switchId,
+				size,
+				checked: field.state.value ?? false,
+				onCheckedChange: (checked) => {
+					field.handleChange(checked);
+					field.handleBlur();
+				},
+				disabled,
+				"aria-invalid": showError || void 0,
+				"aria-describedby": describedBy
+			}),
+			label && /* @__PURE__ */ jsx(Label, {
+				htmlFor: switchId,
+				children: label
+			}),
+			description && /* @__PURE__ */ jsx(FieldDescription, {
+				id: descriptionId,
+				children: description
+			}),
+			showError && /* @__PURE__ */ jsx(FieldError, {
+				id: errorId,
+				errors: toFieldErrors(meta.errors, showAllErrors)
+			})
+		]
+	});
+}
+//#endregion
+export { SwitchField };
+
+//# sourceMappingURL=switch-field.js.map

package/dist/form/fields/switch-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-field.js","names":["React"],"sources":["../../../src/form/fields/switch-field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '#lib/utils';\nimport { Switch } from '#components/ui/switch';\nimport { Field, FieldDescription, FieldError } from '#components/ui/field';\nimport { Label } from '#components/ui/label';\nimport { useFieldContext } from '../context.js';\nimport { getFieldMeta, toFieldErrors, type BaseFieldProps } from '../types.js';\n\nexport interface SwitchFieldProps extends Pick<\n  BaseFieldProps,\n  'label' | 'description' | 'disabled' | 'className' | 'showAllErrors'\n> {\n  size?: 'sm' | 'default';\n}\n\nexport function SwitchField({\n  label,\n  description,\n  disabled,\n  className,\n  size,\n  showAllErrors = true,\n}: SwitchFieldProps) {\n  const field = useFieldContext<boolean>();\n  const meta = getFieldMeta(field);\n  const showError = meta.isInvalid && meta.isTouched;\n\n  const switchId = React.useId();\n  const descriptionId = React.useId();\n  const errorId = React.useId();\n\n  const describedBy =\n    [description ? descriptionId : undefined, showError ? errorId : undefined]\n      .filter(Boolean)\n      .join(' ') || undefined;\n\n  return (\n    <Field\n      data-slot=\"switch-field\"\n      data-invalid={showError || undefined}\n      data-disabled={disabled || undefined}\n      orientation=\"horizontal\"\n      className={cn(className)}\n    >\n      <Switch\n        id={switchId}\n        size={size}\n        checked={field.state.value ?? false}\n        onCheckedChange={(checked: boolean) => {\n          field.handleChange(checked);\n          field.handleBlur();\n        }}\n        disabled={disabled}\n        aria-invalid={showError || undefined}\n        aria-describedby={describedBy}\n      />\n      {label && <Label htmlFor={switchId}>{label}</Label>}\n      {description && (\n        <FieldDescription id={descriptionId}>{description}</FieldDescription>\n      )}\n      {showError && (\n        <FieldError\n          id={errorId}\n          errors={toFieldErrors(meta.errors, showAllErrors)}\n        />\n      )}\n    </Field>\n  );\n}\n"],"mappings":";;;;;;;;;;AAkBA,SAAgB,YAAY,EAC1B,OACA,aACA,UACA,WACA,MACA,gBAAgB,QACG;CACnB,MAAM,QAAQ,gBAAyB;CACvC,MAAM,OAAO,aAAa,KAAK;CAC/B,MAAM,YAAY,KAAK,aAAa,KAAK;CAEzC,MAAM,WAAWA,QAAM,MAAM;CAC7B,MAAM,gBAAgBA,QAAM,MAAM;CAClC,MAAM,UAAUA,QAAM,MAAM;CAE5B,MAAM,cACJ,CAAC,cAAc,gBAAgB,KAAA,GAAW,YAAY,UAAU,KAAA,CAAS,CAAC,CACvE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA;CAElB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,gBAAc,aAAa,KAAA;EAC3B,iBAAe,YAAY,KAAA;EAC3B,aAAY;EACZ,WAAW,GAAG,SAAS;EALzB,UAAA;GAOE,oBAAC,QAAD;IACE,IAAI;IACE;IACN,SAAS,MAAM,MAAM,SAAS;IAC9B,kBAAkB,YAAqB;KACrC,MAAM,aAAa,OAAO;KAC1B,MAAM,WAAW;IACnB;IACU;IACV,gBAAc,aAAa,KAAA;IAC3B,oBAAkB;GACnB,CAAA;GACA,SAAS,oBAAC,OAAD;IAAO,SAAS;IAAW,UAAA;GAAa,CAAA;GACjD,eACC,oBAAC,kBAAD;IAAkB,IAAI;IAAgB,UAAA;GAA8B,CAAA;GAErE,aACC,oBAAC,YAAD;IACE,IAAI;IACJ,QAAQ,cAAc,KAAK,QAAQ,aAAa;GACjD,CAAA;EAEE;;AAEX"}

package/dist/form/fields/text-field.d.ts

@@ -0,0 +1,10 @@
+import { BaseFieldProps } from "../types.js";
+import * as React$1 from "react";
+//#region src/form/fields/text-field.d.ts
+export interface TextFieldProps extends BaseFieldProps {
+  type?: React$1.HTMLInputTypeAttribute;
+  autoComplete?: string;
+}
+export declare function TextField({ label, description, required, disabled, placeholder, className, type, autoComplete, showAllErrors }: TextFieldProps): React$1.JSX.Element;
+//#endregion
+//# sourceMappingURL=text-field.d.ts.map

package/dist/form/fields/text-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.d.ts","names":["React"],"sources":["../../../src/form/fields/text-field.tsx"],"mappings":";;;iBAeiB,uBAAuB;EACtC,OAAOA,QAAM;EACb;;wBAGc,YACd,OACA,aACA,UACA,UACA,aACA,WACA,MACA,cACA,iBACC,iBAAcA,QAAA,IAAA"}

package/dist/form/fields/text-field.js

@@ -0,0 +1,58 @@
+"use client";
+import { Input } from "../../components/ui/input.js";
+import { cn } from "../../components/lib/utils.js";
+import { useFieldContext } from "../context.js";
+import { Field, FieldDescription, FieldError, FieldLabel } from "../../components/ui/field.js";
+import { getFieldMeta, toFieldErrors } from "../types.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/form/fields/text-field.tsx
+function TextField({ label, description, required, disabled, placeholder, className, type = "text", autoComplete, showAllErrors = true }) {
+	const field = useFieldContext();
+	const meta = getFieldMeta(field);
+	const showError = meta.isInvalid && meta.isTouched;
+	const inputId = React$1.useId();
+	const descriptionId = React$1.useId();
+	const errorId = React$1.useId();
+	const describedBy = [description ? descriptionId : void 0, showError ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs(Field, {
+		"data-slot": "text-field",
+		"data-invalid": showError || void 0,
+		"data-disabled": disabled || void 0,
+		className: cn(className),
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: inputId,
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: " *"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Input, {
+				id: inputId,
+				type,
+				value: field.state.value ?? "",
+				onChange: (e) => field.handleChange(e.target.value),
+				onBlur: field.handleBlur,
+				disabled,
+				placeholder,
+				autoComplete,
+				"aria-invalid": showError || void 0,
+				"aria-describedby": describedBy,
+				"aria-required": required || void 0
+			}),
+			description && /* @__PURE__ */ jsx(FieldDescription, {
+				id: descriptionId,
+				children: description
+			}),
+			showError && /* @__PURE__ */ jsx(FieldError, {
+				id: errorId,
+				errors: toFieldErrors(meta.errors, showAllErrors)
+			})
+		]
+	});
+}
+//#endregion
+export { TextField };
+
+//# sourceMappingURL=text-field.js.map

package/dist/form/fields/text-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.js","names":["React"],"sources":["../../../src/form/fields/text-field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '#lib/utils';\nimport { Input } from '#components/ui/input';\nimport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n} from '#components/ui/field';\nimport { useFieldContext } from '../context.js';\nimport { getFieldMeta, toFieldErrors, type BaseFieldProps } from '../types.js';\n\nexport interface TextFieldProps extends BaseFieldProps {\n  type?: React.HTMLInputTypeAttribute;\n  autoComplete?: string;\n}\n\nexport function TextField({\n  label,\n  description,\n  required,\n  disabled,\n  placeholder,\n  className,\n  type = 'text',\n  autoComplete,\n  showAllErrors = true,\n}: TextFieldProps) {\n  const field = useFieldContext<string>();\n  const meta = getFieldMeta(field);\n  const showError = meta.isInvalid && meta.isTouched;\n\n  const inputId = React.useId();\n  const descriptionId = React.useId();\n  const errorId = React.useId();\n\n  const describedBy =\n    [description ? descriptionId : undefined, showError ? errorId : undefined]\n      .filter(Boolean)\n      .join(' ') || undefined;\n\n  return (\n    <Field\n      data-slot=\"text-field\"\n      data-invalid={showError || undefined}\n      data-disabled={disabled || undefined}\n      className={cn(className)}\n    >\n      {label && (\n        <FieldLabel htmlFor={inputId}>\n          {label}\n          {required && <span aria-hidden=\"true\"> *</span>}\n        </FieldLabel>\n      )}\n      <Input\n        id={inputId}\n        type={type}\n        value={field.state.value ?? ''}\n        onChange={(e) => field.handleChange(e.target.value)}\n        onBlur={field.handleBlur}\n        disabled={disabled}\n        placeholder={placeholder}\n        autoComplete={autoComplete}\n        aria-invalid={showError || undefined}\n        aria-describedby={describedBy}\n        aria-required={required || undefined}\n      />\n      {description && (\n        <FieldDescription id={descriptionId}>{description}</FieldDescription>\n      )}\n      {showError && (\n        <FieldError\n          id={errorId}\n          errors={toFieldErrors(meta.errors, showAllErrors)}\n        />\n      )}\n    </Field>\n  );\n}\n"],"mappings":";;;;;;;;;AAoBA,SAAgB,UAAU,EACxB,OACA,aACA,UACA,UACA,aACA,WACA,OAAO,QACP,cACA,gBAAgB,QACC;CACjB,MAAM,QAAQ,gBAAwB;CACtC,MAAM,OAAO,aAAa,KAAK;CAC/B,MAAM,YAAY,KAAK,aAAa,KAAK;CAEzC,MAAM,UAAUA,QAAM,MAAM;CAC5B,MAAM,gBAAgBA,QAAM,MAAM;CAClC,MAAM,UAAUA,QAAM,MAAM;CAE5B,MAAM,cACJ,CAAC,cAAc,gBAAgB,KAAA,GAAW,YAAY,UAAU,KAAA,CAAS,CAAC,CACvE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA;CAElB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,gBAAc,aAAa,KAAA;EAC3B,iBAAe,YAAY,KAAA;EAC3B,WAAW,GAAG,SAAS;EAJzB,UAAA;GAMG,SACC,qBAAC,YAAD;IAAY,SAAS;IAArB,UAAA,CACG,OACA,YAAY,oBAAC,QAAD;KAAM,eAAY;KAAO,UAAA;IAAQ,CAAA,CACpC;;GAEd,oBAAC,OAAD;IACE,IAAI;IACE;IACN,OAAO,MAAM,MAAM,SAAS;IAC5B,WAAW,MAAM,MAAM,aAAa,EAAE,OAAO,KAAK;IAClD,QAAQ,MAAM;IACJ;IACG;IACC;IACd,gBAAc,aAAa,KAAA;IAC3B,oBAAkB;IAClB,iBAAe,YAAY,KAAA;GAC5B,CAAA;GACA,eACC,oBAAC,kBAAD;IAAkB,IAAI;IAAgB,UAAA;GAA8B,CAAA;GAErE,aACC,oBAAC,YAAD;IACE,IAAI;IACJ,QAAQ,cAAc,KAAK,QAAQ,aAAa;GACjD,CAAA;EAEE;;AAEX"}

package/dist/form/fields/textarea-field.d.ts

@@ -0,0 +1,10 @@
+import { BaseFieldProps } from "../types.js";
+import * as React$1 from "react";
+//#region src/form/fields/textarea-field.d.ts
+export interface TextareaFieldProps extends BaseFieldProps {
+  rows?: number;
+  maxLength?: number;
+}
+export declare function TextareaField({ label, description, required, disabled, placeholder, className, rows, maxLength, showAllErrors }: TextareaFieldProps): React$1.JSX.Element;
+//#endregion
+//# sourceMappingURL=textarea-field.d.ts.map

package/dist/form/fields/textarea-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-field.d.ts","names":["React"],"sources":["../../../src/form/fields/textarea-field.tsx"],"mappings":";;;iBAeiB,2BAA2B;EAC1C;EACA;;wBAGc,gBACd,OACA,aACA,UACA,UACA,aACA,WACA,MACA,WACA,iBACC,qBAAkBA,QAAA,IAAA"}

package/dist/form/fields/textarea-field.js

@@ -0,0 +1,58 @@
+"use client";
+import { cn } from "../../components/lib/utils.js";
+import { useFieldContext } from "../context.js";
+import { Field, FieldDescription, FieldError, FieldLabel } from "../../components/ui/field.js";
+import { getFieldMeta, toFieldErrors } from "../types.js";
+import { Textarea } from "../../components/ui/textarea.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/form/fields/textarea-field.tsx
+function TextareaField({ label, description, required, disabled, placeholder, className, rows, maxLength, showAllErrors = true }) {
+	const field = useFieldContext();
+	const meta = getFieldMeta(field);
+	const showError = meta.isInvalid && meta.isTouched;
+	const textareaId = React$1.useId();
+	const descriptionId = React$1.useId();
+	const errorId = React$1.useId();
+	const describedBy = [description ? descriptionId : void 0, showError ? errorId : void 0].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs(Field, {
+		"data-slot": "textarea-field",
+		"data-invalid": showError || void 0,
+		"data-disabled": disabled || void 0,
+		className: cn(className),
+		children: [
+			label && /* @__PURE__ */ jsxs(FieldLabel, {
+				htmlFor: textareaId,
+				children: [label, required && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: " *"
+				})]
+			}),
+			/* @__PURE__ */ jsx(Textarea, {
+				id: textareaId,
+				value: field.state.value ?? "",
+				onChange: (e) => field.handleChange(e.target.value),
+				onBlur: field.handleBlur,
+				disabled,
+				placeholder,
+				rows,
+				maxLength,
+				"aria-invalid": showError || void 0,
+				"aria-describedby": describedBy,
+				"aria-required": required || void 0
+			}),
+			description && /* @__PURE__ */ jsx(FieldDescription, {
+				id: descriptionId,
+				children: description
+			}),
+			showError && /* @__PURE__ */ jsx(FieldError, {
+				id: errorId,
+				errors: toFieldErrors(meta.errors, showAllErrors)
+			})
+		]
+	});
+}
+//#endregion
+export { TextareaField };
+
+//# sourceMappingURL=textarea-field.js.map

package/dist/form/fields/textarea-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-field.js","names":["React"],"sources":["../../../src/form/fields/textarea-field.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { cn } from '#lib/utils';\nimport { Textarea } from '#components/ui/textarea';\nimport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n} from '#components/ui/field';\nimport { useFieldContext } from '../context.js';\nimport { getFieldMeta, toFieldErrors, type BaseFieldProps } from '../types.js';\n\nexport interface TextareaFieldProps extends BaseFieldProps {\n  rows?: number;\n  maxLength?: number;\n}\n\nexport function TextareaField({\n  label,\n  description,\n  required,\n  disabled,\n  placeholder,\n  className,\n  rows,\n  maxLength,\n  showAllErrors = true,\n}: TextareaFieldProps) {\n  const field = useFieldContext<string>();\n  const meta = getFieldMeta(field);\n  const showError = meta.isInvalid && meta.isTouched;\n\n  const textareaId = React.useId();\n  const descriptionId = React.useId();\n  const errorId = React.useId();\n\n  const describedBy =\n    [description ? descriptionId : undefined, showError ? errorId : undefined]\n      .filter(Boolean)\n      .join(' ') || undefined;\n\n  return (\n    <Field\n      data-slot=\"textarea-field\"\n      data-invalid={showError || undefined}\n      data-disabled={disabled || undefined}\n      className={cn(className)}\n    >\n      {label && (\n        <FieldLabel htmlFor={textareaId}>\n          {label}\n          {required && <span aria-hidden=\"true\"> *</span>}\n        </FieldLabel>\n      )}\n      <Textarea\n        id={textareaId}\n        value={field.state.value ?? ''}\n        onChange={(e) => field.handleChange(e.target.value)}\n        onBlur={field.handleBlur}\n        disabled={disabled}\n        placeholder={placeholder}\n        rows={rows}\n        maxLength={maxLength}\n        aria-invalid={showError || undefined}\n        aria-describedby={describedBy}\n        aria-required={required || undefined}\n      />\n      {description && (\n        <FieldDescription id={descriptionId}>{description}</FieldDescription>\n      )}\n      {showError && (\n        <FieldError\n          id={errorId}\n          errors={toFieldErrors(meta.errors, showAllErrors)}\n        />\n      )}\n    </Field>\n  );\n}\n"],"mappings":";;;;;;;;;AAoBA,SAAgB,cAAc,EAC5B,OACA,aACA,UACA,UACA,aACA,WACA,MACA,WACA,gBAAgB,QACK;CACrB,MAAM,QAAQ,gBAAwB;CACtC,MAAM,OAAO,aAAa,KAAK;CAC/B,MAAM,YAAY,KAAK,aAAa,KAAK;CAEzC,MAAM,aAAaA,QAAM,MAAM;CAC/B,MAAM,gBAAgBA,QAAM,MAAM;CAClC,MAAM,UAAUA,QAAM,MAAM;CAE5B,MAAM,cACJ,CAAC,cAAc,gBAAgB,KAAA,GAAW,YAAY,UAAU,KAAA,CAAS,CAAC,CACvE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,KAAK,KAAA;CAElB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,gBAAc,aAAa,KAAA;EAC3B,iBAAe,YAAY,KAAA;EAC3B,WAAW,GAAG,SAAS;EAJzB,UAAA;GAMG,SACC,qBAAC,YAAD;IAAY,SAAS;IAArB,UAAA,CACG,OACA,YAAY,oBAAC,QAAD;KAAM,eAAY;KAAO,UAAA;IAAQ,CAAA,CACpC;;GAEd,oBAAC,UAAD;IACE,IAAI;IACJ,OAAO,MAAM,MAAM,SAAS;IAC5B,WAAW,MAAM,MAAM,aAAa,EAAE,OAAO,KAAK;IAClD,QAAQ,MAAM;IACJ;IACG;IACP;IACK;IACX,gBAAc,aAAa,KAAA;IAC3B,oBAAkB;IAClB,iBAAe,YAAY,KAAA;GAC5B,CAAA;GACA,eACC,oBAAC,kBAAD;IAAkB,IAAI;IAAgB,UAAA;GAA8B,CAAA;GAErE,aACC,oBAAC,YAAD;IACE,IAAI;IACJ,QAAQ,cAAc,KAAK,QAAQ,aAAa;GACjD,CAAA;EAEE;;AAEX"}

package/dist/form/index.d.ts

@@ -0,0 +1,10 @@
+import { SubmitButtonProps } from "./components/submit-button.js";
+import { BaseFieldProps, FieldMeta } from "./types.js";
+import { TextFieldProps } from "./fields/text-field.js";
+import { TextareaFieldProps } from "./fields/textarea-field.js";
+import { SelectFieldProps, SelectOption } from "./fields/select-field.js";
+import { SwitchFieldProps } from "./fields/switch-field.js";
+import { DatePickerFieldProps } from "./fields/date-picker-field.js";
+import { useAppForm, withForm } from "./create-form-hook.js";
+import { formOptions } from "@tanstack/react-form";
+export { type BaseFieldProps, type DatePickerFieldProps, type FieldMeta, type SelectFieldProps, type SelectOption, type SubmitButtonProps, type SwitchFieldProps, type TextFieldProps, type TextareaFieldProps, formOptions, useAppForm, withForm };

package/dist/form/index.js

@@ -0,0 +1,3 @@
+import { useAppForm, withForm } from "./create-form-hook.js";
+import { formOptions } from "@tanstack/react-form";
+export { formOptions, useAppForm, withForm };