singularity-components 0.1.195 → 0.1.197

package/dist/lib/forms/tanstack-field.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FormControl } from "../../components/primitives/forms/form-control.js";
+import { Checkbox } from "../../components/primitives/forms/checkbox.js";
+import { Input } from "../../components/primitives/forms/input.js";
+import { Textarea } from "../../components/primitives/forms/textarea.js";
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldLabel
+} from "../../components/primitives/forms/field.js";
+import {
+  getCheckboxFieldProps,
+  getInputFieldProps,
+  getSelectFieldProps,
+  isFieldInvalid,
+  normalizeFieldErrors
+} from "./field-props.js";
+function TanStackField({
+  formApi,
+  name,
+  label,
+  description,
+  orientation,
+  labelClassName,
+  className,
+  validators,
+  children,
+  mapControlProps = getInputFieldProps
+}) {
+  const boundForm = formApi;
+  const FieldComponent = boundForm.Field;
+  return /* @__PURE__ */ jsx(FieldComponent, { name, validators, children: (field) => {
+    const invalid = isFieldInvalid(field);
+    const controlId = String(field.name);
+    return /* @__PURE__ */ jsx(
+      FormControl,
+      {
+        id: controlId,
+        label,
+        description,
+        orientation,
+        labelClassName,
+        className,
+        invalid,
+        errors: normalizeFieldErrors(
+          field.state.meta.errors
+        ),
+        children: (resolvedControlId) => children(
+          field,
+          mapControlProps(field, resolvedControlId),
+          resolvedControlId
+        )
+      }
+    );
+  } });
+}
+function TanStackInputField({ type = "text", ...props }) {
+  return /* @__PURE__ */ jsx(TanStackField, { ...props, children: (_field, controlProps) => /* @__PURE__ */ jsx(Input, { ...controlProps, type }) });
+}
+function TanStackTextareaField(props) {
+  return /* @__PURE__ */ jsx(TanStackField, { ...props, children: (_field, controlProps) => /* @__PURE__ */ jsx(Textarea, { ...controlProps }) });
+}
+function TanStackCheckboxField({
+  formApi,
+  name,
+  validators,
+  checkboxClassName,
+  labelClassName,
+  label,
+  description,
+  orientation = "horizontal",
+  className
+}) {
+  const boundForm = formApi;
+  const FieldComponent = boundForm.Field;
+  return /* @__PURE__ */ jsx(FieldComponent, { name, validators, children: (field) => {
+    const invalid = isFieldInvalid(field);
+    const controlProps = getCheckboxFieldProps(field);
+    return /* @__PURE__ */ jsxs(Field, { orientation, invalid, className, children: [
+      /* @__PURE__ */ jsx(Checkbox, { ...controlProps, className: checkboxClassName }),
+      /* @__PURE__ */ jsx(FieldLabel, { htmlFor: controlProps.id, className: labelClassName, children: label }),
+      (description || invalid) && /* @__PURE__ */ jsxs(FieldContent, { className: "sg:basis-full", children: [
+        description && /* @__PURE__ */ jsx(FieldDescription, { children: description }),
+        /* @__PURE__ */ jsx(
+          FieldError,
+          {
+            errors: normalizeFieldErrors(
+              field.state.meta.errors
+            )
+          }
+        )
+      ] })
+    ] });
+  } });
+}
+function TanStackSelectField({ children, ...props }) {
+  return /* @__PURE__ */ jsx(TanStackField, { ...props, mapControlProps: getSelectFieldProps, children: (_field, controlProps, controlId) => children(controlProps, controlId) });
+}
+import {
+  getCheckboxFieldProps as getCheckboxFieldProps2,
+  getInputFieldProps as getInputFieldProps2,
+  getSelectFieldProps as getSelectFieldProps2,
+  isFieldInvalid as isFieldInvalid2,
+  normalizeFieldErrors as normalizeFieldErrors2
+} from "./field-props.js";
+export {
+  TanStackCheckboxField,
+  TanStackField,
+  TanStackInputField,
+  TanStackSelectField,
+  TanStackTextareaField,
+  getCheckboxFieldProps2 as getCheckboxFieldProps,
+  getInputFieldProps2 as getInputFieldProps,
+  getSelectFieldProps2 as getSelectFieldProps,
+  isFieldInvalid2 as isFieldInvalid,
+  normalizeFieldErrors2 as normalizeFieldErrors
+};
+//# sourceMappingURL=tanstack-field.js.map

package/dist/lib/forms/tanstack-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/lib/forms/tanstack-field.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport type { DeepKeys } from \"@tanstack/react-form\";\r\nimport { FormControl } from \"../../components/primitives/forms/form-control\";\r\nimport { Checkbox } from \"../../components/primitives/forms/checkbox\";\r\nimport { Input } from \"../../components/primitives/forms/input\";\r\nimport { Textarea } from \"../../components/primitives/forms/textarea\";\r\nimport {\r\n  Field,\r\n  FieldContent,\r\n  FieldDescription,\r\n  FieldError,\r\n  FieldLabel,\r\n} from \"../../components/primitives/forms/field\";\r\nimport {\r\n  getCheckboxFieldProps,\r\n  getInputFieldProps,\r\n  getSelectFieldProps,\r\n  isFieldInvalid,\r\n  normalizeFieldErrors,\r\n  type TanStackFieldLike,\r\n} from \"./field-props\";\r\n\r\ntype TanStackFormFieldComponent<TFormData> = (props: {\r\n  name: DeepKeys<TFormData>;\r\n  validators?: Record<string, unknown>;\r\n  children: (field: TanStackFieldLike) => React.ReactNode;\r\n}) => React.ReactNode;\r\n\r\n/** Form instance returned by `useForm()` — accepts any TanStack Form API shape. */\r\nexport type TanStackFormLike<TFormData> = {\r\n  Field: TanStackFormFieldComponent<TFormData>;\r\n  Subscribe: (props: {\r\n    selector?: (state: unknown) => unknown;\r\n    children: ((state: unknown) => React.ReactNode) | React.ReactNode;\r\n  }) => React.ReactNode;\r\n  handleSubmit: () => void | Promise<void>;\r\n  reset: (values?: Partial<TFormData>) => void;\r\n};\r\n\r\ntype TanStackFieldProps<\r\n  TFormData,\r\n  TName extends DeepKeys<TFormData>,\r\n> = {\r\n  formApi: unknown;\r\n  name: TName;\r\n  label?: React.ReactNode;\r\n  description?: React.ReactNode;\r\n  orientation?: React.ComponentProps<typeof FormControl>[\"orientation\"];\r\n  labelClassName?: string;\r\n  className?: string;\r\n  validators?: Record<string, unknown>;\r\n  children: (\r\n    field: TanStackFieldLike,\r\n    controlProps: Record<string, unknown>,\r\n    controlId: string,\r\n  ) => React.ReactNode;\r\n  mapControlProps?: (\r\n    field: TanStackFieldLike,\r\n    controlId: string,\r\n  ) => Record<string, unknown>;\r\n};\r\n\r\n/**\r\n * Connects a TanStack Form field to Singularity {@link FormControl} layout primitives.\r\n */\r\nfunction TanStackField<\r\n  TFormData,\r\n  TName extends DeepKeys<TFormData>,\r\n>({\r\n  formApi,\r\n  name,\r\n  label,\r\n  description,\r\n  orientation,\r\n  labelClassName,\r\n  className,\r\n  validators,\r\n  children,\r\n  mapControlProps = getInputFieldProps,\r\n}: TanStackFieldProps<TFormData, TName>) {\r\n  const boundForm = formApi as TanStackFormLike<TFormData>;\r\n  const FieldComponent = boundForm.Field;\r\n\r\n  return (\r\n    <FieldComponent name={name} validators={validators}>\r\n      {(field: TanStackFieldLike) => {\r\n        const invalid = isFieldInvalid(field);\r\n        const controlId = String(field.name);\r\n\r\n        return (\r\n          <FormControl\r\n            id={controlId}\r\n            label={label}\r\n            description={description}\r\n            orientation={orientation}\r\n            labelClassName={labelClassName}\r\n            className={className}\r\n            invalid={invalid}\r\n            errors={normalizeFieldErrors(\r\n              field.state.meta.errors as Array<string | { message?: string }>,\r\n            )}\r\n          >\r\n            {(resolvedControlId) =>\r\n              children(\r\n                field,\r\n                mapControlProps(field, resolvedControlId),\r\n                resolvedControlId,\r\n              )\r\n            }\r\n          </FormControl>\r\n        );\r\n      }}\r\n    </FieldComponent>\r\n  );\r\n}\r\n\r\ntype TanStackInputFieldProps<\r\n  TFormData,\r\n  TName extends DeepKeys<TFormData>,\r\n> = Omit<TanStackFieldProps<TFormData, TName>, \"children\" | \"mapControlProps\"> &\r\n  Omit<\r\n    React.ComponentProps<typeof Input>,\r\n    \"id\" | \"name\" | \"value\" | \"onChange\" | \"onBlur\" | \"form\"\r\n  >;\r\n\r\n/**\r\n * TanStack Form field wired to {@link Input}.\r\n */\r\nfunction TanStackInputField<\r\n  TFormData,\r\n  TName extends DeepKeys<TFormData>,\r\n>({ type = \"text\", ...props }: TanStackInputFieldProps<TFormData, TName>) {\r\n  return (\r\n    <TanStackField {...props}>\r\n      {(_field, controlProps) => <Input {...controlProps} type={type} />}\r\n    </TanStackField>\r\n  );\r\n}\r\n\r\ntype TanStackTextareaFieldProps<\r\n  TFormData,\r\n  TName extends DeepKeys<TFormData>,\r\n> = Omit<TanStackFieldProps<TFormData, TName>, \"children\" | \"mapControlProps\"> &\r\n  Omit<\r\n    React.ComponentProps<typeof Textarea>,\r\n    \"id\" | \"name\" | \"value\" | \"onChange\" | \"onBlur\"\r\n  >;\r\n\r\n/**\r\n * TanStack Form field wired to {@link Textarea}.\r\n */\r\nfunction TanStackTextareaField<\r\n  TFormData,\r\n  TName extends DeepKeys<TFormData>,\r\n>(props: TanStackTextareaFieldProps<TFormData, TName>) {\r\n  return (\r\n    <TanStackField {...props}>\r\n      {(_field, controlProps) => <Textarea {...controlProps} />}\r\n    </TanStackField>\r\n  );\r\n}\r\n\r\ntype TanStackCheckboxFieldProps<\r\n  TFormData,\r\n  TName extends DeepKeys<TFormData>,\r\n> = Omit<TanStackFieldProps<TFormData, TName>, \"children\" | \"mapControlProps\" | \"label\"> & {\r\n  label: React.ReactNode;\r\n  checkboxClassName?: string;\r\n  labelClassName?: string;\r\n};\r\n\r\n/**\r\n * TanStack Form field wired to {@link Checkbox} with a horizontal layout by default.\r\n */\r\nfunction TanStackCheckboxField<\r\n  TFormData,\r\n  TName extends DeepKeys<TFormData>,\r\n>({\r\n  formApi,\r\n  name,\r\n  validators,\r\n  checkboxClassName,\r\n  labelClassName,\r\n  label,\r\n  description,\r\n  orientation = \"horizontal\",\r\n  className,\r\n}: TanStackCheckboxFieldProps<TFormData, TName>) {\r\n  const boundForm = formApi as TanStackFormLike<TFormData>;\r\n  const FieldComponent = boundForm.Field;\r\n\r\n  return (\r\n    <FieldComponent name={name} validators={validators}>\r\n      {(field: TanStackFieldLike) => {\r\n        const invalid = isFieldInvalid(field);\r\n        const controlProps = getCheckboxFieldProps(field);\r\n\r\n        return (\r\n          <Field orientation={orientation} invalid={invalid} className={className}>\r\n            <Checkbox {...controlProps} className={checkboxClassName} />\r\n            <FieldLabel htmlFor={controlProps.id} className={labelClassName}>\r\n              {label}\r\n            </FieldLabel>\r\n            {(description || invalid) && (\r\n              <FieldContent className=\"sg:basis-full\">\r\n                {description && <FieldDescription>{description}</FieldDescription>}\r\n                <FieldError\r\n                  errors={normalizeFieldErrors(\r\n                    field.state.meta.errors as Array<\r\n                      string | { message?: string }\r\n                    >,\r\n                  )}\r\n                />\r\n              </FieldContent>\r\n            )}\r\n          </Field>\r\n        );\r\n      }}\r\n    </FieldComponent>\r\n  );\r\n}\r\n\r\ntype TanStackSelectFieldProps<\r\n  TFormData,\r\n  TName extends DeepKeys<TFormData>,\r\n> = Omit<TanStackFieldProps<TFormData, TName>, \"children\" | \"mapControlProps\"> & {\r\n  children: (\r\n    controlProps: ReturnType<typeof getSelectFieldProps>,\r\n    controlId: string,\r\n  ) => React.ReactNode;\r\n};\r\n\r\n/**\r\n * TanStack Form field wired to {@link Select} via a render prop.\r\n */\r\nfunction TanStackSelectField<\r\n  TFormData,\r\n  TName extends DeepKeys<TFormData>,\r\n>({ children, ...props }: TanStackSelectFieldProps<TFormData, TName>) {\r\n  return (\r\n    <TanStackField {...props} mapControlProps={getSelectFieldProps}>\r\n      {(_field, controlProps, controlId) =>\r\n        children(controlProps as ReturnType<typeof getSelectFieldProps>, controlId)\r\n      }\r\n    </TanStackField>\r\n  );\r\n}\r\n\r\nexport {\r\n  TanStackCheckboxField,\r\n  TanStackField,\r\n  TanStackInputField,\r\n  TanStackSelectField,\r\n  TanStackTextareaField,\r\n};\r\n\r\nexport {\r\n  getCheckboxFieldProps,\r\n  getInputFieldProps,\r\n  getSelectFieldProps,\r\n  isFieldInvalid,\r\n  normalizeFieldErrors,\r\n  type FieldErrorLike,\r\n  type TanStackFieldLike,\r\n} from \"./field-props\";\r\n"],"mappings":";AA2FU,cAkHI,YAlHJ;AAxFV,SAAS,mBAAmB;AAC5B,SAAS,gBAAgB;AACzB,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA6CP,SAAS,cAGP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AACpB,GAAyC;AACvC,QAAM,YAAY;AAClB,QAAM,iBAAiB,UAAU;AAEjC,SACE,oBAAC,kBAAe,MAAY,YACzB,WAAC,UAA6B;AAC7B,UAAM,UAAU,eAAe,KAAK;AACpC,UAAM,YAAY,OAAO,MAAM,IAAI;AAEnC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,IAAI;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ;AAAA,UACN,MAAM,MAAM,KAAK;AAAA,QACnB;AAAA,QAEC,WAAC,sBACA;AAAA,UACE;AAAA,UACA,gBAAgB,OAAO,iBAAiB;AAAA,UACxC;AAAA,QACF;AAAA;AAAA,IAEJ;AAAA,EAEJ,GACF;AAEJ;AAcA,SAAS,mBAGP,EAAE,OAAO,QAAQ,GAAG,MAAM,GAA8C;AACxE,SACE,oBAAC,iBAAe,GAAG,OAChB,WAAC,QAAQ,iBAAiB,oBAAC,SAAO,GAAG,cAAc,MAAY,GAClE;AAEJ;AAcA,SAAS,sBAGP,OAAqD;AACrD,SACE,oBAAC,iBAAe,GAAG,OAChB,WAAC,QAAQ,iBAAiB,oBAAC,YAAU,GAAG,cAAc,GACzD;AAEJ;AAcA,SAAS,sBAGP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AACF,GAAiD;AAC/C,QAAM,YAAY;AAClB,QAAM,iBAAiB,UAAU;AAEjC,SACE,oBAAC,kBAAe,MAAY,YACzB,WAAC,UAA6B;AAC7B,UAAM,UAAU,eAAe,KAAK;AACpC,UAAM,eAAe,sBAAsB,KAAK;AAEhD,WACE,qBAAC,SAAM,aAA0B,SAAkB,WACjD;AAAA,0BAAC,YAAU,GAAG,cAAc,WAAW,mBAAmB;AAAA,MAC1D,oBAAC,cAAW,SAAS,aAAa,IAAI,WAAW,gBAC9C,iBACH;AAAA,OACE,eAAe,YACf,qBAAC,gBAAa,WAAU,iBACrB;AAAA,uBAAe,oBAAC,oBAAkB,uBAAY;AAAA,QAC/C;AAAA,UAAC;AAAA;AAAA,YACC,QAAQ;AAAA,cACN,MAAM,MAAM,KAAK;AAAA,YAGnB;AAAA;AAAA,QACF;AAAA,SACF;AAAA,OAEJ;AAAA,EAEJ,GACF;AAEJ;AAeA,SAAS,oBAGP,EAAE,UAAU,GAAG,MAAM,GAA+C;AACpE,SACE,oBAAC,iBAAe,GAAG,OAAO,iBAAiB,qBACxC,WAAC,QAAQ,cAAc,cACtB,SAAS,cAAwD,SAAS,GAE9E;AAEJ;AAUA;AAAA,EACE,yBAAAA;AAAA,EACA,sBAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,wBAAAC;AAAA,OAGK;","names":["getCheckboxFieldProps","getInputFieldProps","getSelectFieldProps","isFieldInvalid","normalizeFieldErrors"]}

package/dist/lib/index.d.ts

@@ -1,2 +1,13 @@
 export { formatDate } from './helpers/date.js';
+export { FieldErrorLike, TanStackFieldLike, getCheckboxFieldProps, getInputFieldProps, getSelectFieldProps, isFieldInvalid, normalizeFieldErrors } from './forms/field-props.js';
+export { TanStackCheckboxField, TanStackField, TanStackFormLike, TanStackInputField, TanStackSelectField, TanStackTextareaField } from './forms/tanstack-field.js';
 export { useIsClient } from './hooks/useIsClient.js';
+import 'react';
+import '@tanstack/react-form';
+import '../components/primitives/forms/form-control.js';
+import '../components/primitives/forms/field.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+import '../components/primitives/label/label.js';
+import '../components/primitives/forms/input.js';
+import '../components/primitives/forms/textarea.js';

package/dist/lib/index.js

@@ -1,3 +1,4 @@
 export * from "./helpers/index.js";
+export * from "./forms/index.js";
 export * from "./hooks/useIsClient.js";
 //# sourceMappingURL=index.js.map

package/dist/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/lib/index.ts"],"sourcesContent":["/**\n * Library index\n *\n * Please keep exports sorted alphabetically by path!\n */\n\nexport * from \"./helpers/index\";\nexport * from \"./hooks/useIsClient\";\n"],"mappings":"AAMA,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../../src/lib/index.ts"],"sourcesContent":["/**\n * Library index\n *\n * Please keep exports sorted alphabetically by path!\n */\n\nexport * from \"./helpers/index\";\nexport * from \"./forms/index\";\nexport * from \"./hooks/useIsClient\";\n"],"mappings":"AAMA,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}