@payfit/unity-components 3.15.14 → 3.15.16

package/dist/esm/modules/tanstack-form/hooks/use-tanstack-form.js

@@ -3,7 +3,7 @@ import { TanstackForm as n } from "../components/form/TanstackForm.js";
 import { lazy as r } from "react";
 import { createFormHook as i } from "@tanstack/react-form";
 //#region src/modules/tanstack-form/hooks/use-tanstack-form.tsx
-var a = r(() => import("../components/checkbox-field/TanstackCheckboxField.js").then((e) => ({ default: e.TanstackCheckboxField }))), o = r(() => import("../components/form-field/parts/TanstackFormFeedbackText.js").then((e) => ({ default: e.TanstackFormFeedbackText }))), s = r(() => import("../components/form-field/parts/TanstackFormHelperText.js").then((e) => ({ default: e.TanstackFormHelperText }))), c = r(() => import("../components/form-field/parts/TanstackFormLabel.js").then((e) => ({ default: e.TanstackFormLabel }))), l = r(() => import("../components/form-field/parts/TanstackRawFormContextualLink.js").then((e) => ({ default: e.TanstackRawFormContextualLink }))), u = r(() => import("../components/form-field/TanstackFormField.js").then((e) => ({ default: e.TanstackFormField }))), d = r(() => import("../components/checkbox-group/TanstackCheckboxGroup.js").then((e) => ({ default: e.TanstackCheckboxGroup }))), f = r(() => import("../components/checkbox/TanstackCheckbox.js").then((e) => ({ default: e.TanstackCheckbox }))), p = r(() => import("../components/date-picker/TanstackDatePicker.js").then((e) => ({ default: e.TanstackDatePicker }))), m = r(() => import("../components/date-range-picker/TanstackDateRangePicker.js").then((e) => ({ default: e.TanstackDateRangePicker }))), h = r(() => import("../components/multi-select/TanstackMultiSelect.js").then((e) => ({ default: e.TanstackMultiSelect }))), g = r(() => import("../components/phone-number/TanstackPhoneNumberInput.js").then((e) => ({ default: e.TanstackPhoneNumberInput }))), _ = r(() => import("../components/phone-number-field/TanstackPhoneNumberField.js").then((e) => ({ default: e.TanstackPhoneNumberField }))), v = r(() => import("../components/number-input/TanstackNumberInput.js").then((e) => ({ default: e.TanstackNumberInput }))), y = r(() => import("../components/radio-button-group/TanstackRadioButtonGroup.js").then((e) => ({ default: e.TanstackRadioButtonGroup }))), b = r(() => import("../components/selectable-button-group/TanstackSelectableButtonGroup.js").then((e) => ({ default: e.TanstackSelectableButtonGroup }))), x = r(() => import("../components/selectable-card/selectable-card-checkbox-group/TanstackSelectableCardCheckboxGroup.js").then((e) => ({ default: e.TanstackSelectableCardCheckboxGroup }))), S = r(() => import("../components/selectable-card/selectable-card-radio-group/TanstackSelectableCardRadioGroup.js").then((e) => ({ default: e.TanstackSelectableCardRadioGroup }))), C = r(() => import("../components/select/TanstackSelect.js").then((e) => ({ default: e.TanstackSelect }))), w = r(() => import("../components/text-area/TanstackTextArea.js").then((e) => ({ default: e.TanstackTextArea }))), T = r(() => import("../components/input/TanstackInput.js").then((e) => ({ default: e.TanstackInput }))), E = r(() => import("../components/toggle-switch-group/TanstackToggleSwitchGroup.js").then((e) => ({ default: e.TanstackToggleSwitchGroup }))), D = r(() => import("../components/toggle-switch/TanstackToggleSwitch.js").then((e) => ({ default: e.TanstackToggleSwitch }))), O = r(() => import("../components/checkbox-group-field/TanstackCheckGroupField.js").then((e) => ({ default: e.TanstackCheckGroupField }))), k = r(() => import("../components/date-picker-field/TanstackDatePickerField.js").then((e) => ({ default: e.TanstackDatePickerField }))), A = r(() => import("../components/date-range-picker-field/TanstackDateRangePickerField.js").then((e) => ({ default: e.TanstackDateRangePickerField }))), j = r(() => import("../components/multi-select-field/TanstackMultiSelectField.js").then((e) => ({ default: e.TanstackMultiSelectField }))), M = r(() => import("../components/number-field/TanstackNumberField.js").then((e) => ({ default: e.TanstackNumberField }))), N = r(() => import("../components/radio-button-group-field/TanstackRadioButtonGroupField.js").then((e) => ({ default: e.TanstackRadioButtonGroupField }))), P = r(() => import("../components/select-field/TanstackSelectField.js").then((e) => ({ default: e.TanstackSelectField }))), F = r(() => import("../components/selectable-button-group-field/TanstackSelectableButtonGroupField.js").then((e) => ({ default: e.TanstackSelectableButtonGroupField }))), I = r(() => import("../components/selectable-card-checkbox-group-field/TanstackSelectableCardCheckboxGroupField.js").then((e) => ({ default: e.TanstackSelectableCardCheckboxGroupField }))), L = r(() => import("../components/selectable-card-radio-group-field/TanstackSelectableCardRadioGroupField.js").then((e) => ({ default: e.TanstackSelectableCardRadioGroupField }))), R = r(() => import("../components/text-field/TanstackTextField.js").then((e) => ({ default: e.TanstackTextField }))), z = r(() => import("../components/toggle-switch-field/TanstackToggleSwitchField.js").then((e) => ({ default: e.TanstackToggleSwitchField }))), B = r(() => import("../components/toggle-switch-group-field/TanstackToggleSwitchGroupField.js").then((e) => ({ default: e.TanstackToggleSwitchGroupField }))), V = r(() => import("../components/inline-field-group/InlineFieldGroup.js").then((e) => ({ default: e.InlineFieldGroup }))), H = r(() => import("../components/inline-field-group/parts/InlineFieldGroupHeader.js").then((e) => ({ default: e.InlineFieldGroupHeader }))), U = r(() => import("../components/inline-field-group/parts/InlineFieldGroupReadView.js").then((e) => ({ default: e.InlineFieldGroupReadView }))), W = r(() => import("../components/inline-field-group/parts/InlineFieldGroupEditView.js").then((e) => ({ default: e.InlineFieldGroupEditView }))), G = r(() => import("../components/password-field/TanstackPasswordField.js").then((e) => ({ default: e.TanstackPasswordField }))), K = r(() => import("../components/inline-field/parts/InlineFieldEditView.js").then((e) => ({ default: e.InlineFieldEditView }))), q = r(() => import("../components/inline-field/parts/InlineFieldReadView.js").then((e) => ({ default: e.InlineFieldReadView }))), J = i({
+var a = r(() => import("../components/checkbox-field/TanstackCheckboxField.js").then((e) => ({ default: e.TanstackCheckboxField }))), o = r(() => import("../components/form-field/parts/TanstackFormFeedbackText.js").then((e) => ({ default: e.TanstackFormFeedbackText }))), s = r(() => import("../components/form-field/parts/TanstackFormHelperText.js").then((e) => ({ default: e.TanstackFormHelperText }))), c = r(() => import("../components/form-field/parts/TanstackFormLabel.js").then((e) => ({ default: e.TanstackFormLabel }))), l = r(() => import("../components/form-field/parts/TanstackRawFormContextualLink.js").then((e) => ({ default: e.TanstackRawFormContextualLink }))), u = r(() => import("../components/form-field/TanstackFormField.js").then((e) => ({ default: e.TanstackFormField }))), d = r(() => import("../components/checkbox-group/TanstackCheckboxGroup.js").then((e) => ({ default: e.TanstackCheckboxGroup }))), f = r(() => import("../components/checkbox/TanstackCheckbox.js").then((e) => ({ default: e.TanstackCheckbox }))), p = r(() => import("../components/date-picker/TanstackDatePicker.js").then((e) => ({ default: e.TanstackDatePicker }))), m = r(() => import("../components/date-range-picker/TanstackDateRangePicker.js").then((e) => ({ default: e.TanstackDateRangePicker }))), h = r(() => import("../components/multi-select/TanstackMultiSelect.js").then((e) => ({ default: e.TanstackMultiSelect }))), g = r(() => import("../components/phone-number/TanstackPhoneNumberInput.js").then((e) => ({ default: e.TanstackPhoneNumberInput }))), _ = r(() => import("../components/phone-number-field/TanstackPhoneNumberField.js").then((e) => ({ default: e.TanstackPhoneNumberField }))), v = r(() => import("../components/number-input/TanstackNumberInput.js").then((e) => ({ default: e.TanstackNumberInput }))), y = r(() => import("../components/radio-button-group/TanstackRadioButtonGroup.js").then((e) => ({ default: e.TanstackRadioButtonGroup }))), b = r(() => import("../components/selectable-button-group/TanstackSelectableButtonGroup.js").then((e) => ({ default: e.TanstackSelectableButtonGroup }))), x = r(() => import("../components/selectable-card/selectable-card-checkbox-group/TanstackSelectableCardCheckboxGroup.js").then((e) => ({ default: e.TanstackSelectableCardCheckboxGroup }))), S = r(() => import("../components/selectable-card/selectable-card-radio-group/TanstackSelectableCardRadioGroup.js").then((e) => ({ default: e.TanstackSelectableCardRadioGroup }))), C = r(() => import("../components/select/TanstackSelect.js").then((e) => ({ default: e.TanstackSelect }))), w = r(() => import("../components/text-area/TanstackTextArea.js").then((e) => ({ default: e.TanstackTextArea }))), T = r(() => import("../components/input/TanstackInput.js").then((e) => ({ default: e.TanstackInput }))), E = r(() => import("../components/tanstack-file-upload-trigger/TanstackFileUploadTrigger.js").then((e) => ({ default: e.FileUploadTriggerInput }))), D = r(() => import("../components/tanstack-file-upload-dropzone/TanstackFileUploadDropzone.js").then((e) => ({ default: e.FileUploadDropzoneInput }))), ee = r(() => import("../components/toggle-switch-group/TanstackToggleSwitchGroup.js").then((e) => ({ default: e.TanstackToggleSwitchGroup }))), O = r(() => import("../components/toggle-switch/TanstackToggleSwitch.js").then((e) => ({ default: e.TanstackToggleSwitch }))), k = r(() => import("../components/tanstack-file-upload-trigger/TanstackFileUploadTriggerField.js").then((e) => ({ default: e.FileUploadTriggerField }))), A = r(() => import("../components/tanstack-file-upload-dropzone/TanstackFileUploadDropzoneField.js").then((e) => ({ default: e.FileUploadDropzoneField }))), j = r(() => import("../components/checkbox-group-field/TanstackCheckGroupField.js").then((e) => ({ default: e.TanstackCheckGroupField }))), M = r(() => import("../components/date-picker-field/TanstackDatePickerField.js").then((e) => ({ default: e.TanstackDatePickerField }))), N = r(() => import("../components/date-range-picker-field/TanstackDateRangePickerField.js").then((e) => ({ default: e.TanstackDateRangePickerField }))), P = r(() => import("../components/multi-select-field/TanstackMultiSelectField.js").then((e) => ({ default: e.TanstackMultiSelectField }))), F = r(() => import("../components/number-field/TanstackNumberField.js").then((e) => ({ default: e.TanstackNumberField }))), I = r(() => import("../components/radio-button-group-field/TanstackRadioButtonGroupField.js").then((e) => ({ default: e.TanstackRadioButtonGroupField }))), L = r(() => import("../components/select-field/TanstackSelectField.js").then((e) => ({ default: e.TanstackSelectField }))), R = r(() => import("../components/selectable-button-group-field/TanstackSelectableButtonGroupField.js").then((e) => ({ default: e.TanstackSelectableButtonGroupField }))), z = r(() => import("../components/selectable-card-checkbox-group-field/TanstackSelectableCardCheckboxGroupField.js").then((e) => ({ default: e.TanstackSelectableCardCheckboxGroupField }))), B = r(() => import("../components/selectable-card-radio-group-field/TanstackSelectableCardRadioGroupField.js").then((e) => ({ default: e.TanstackSelectableCardRadioGroupField }))), V = r(() => import("../components/text-field/TanstackTextField.js").then((e) => ({ default: e.TanstackTextField }))), H = r(() => import("../components/toggle-switch-field/TanstackToggleSwitchField.js").then((e) => ({ default: e.TanstackToggleSwitchField }))), U = r(() => import("../components/toggle-switch-group-field/TanstackToggleSwitchGroupField.js").then((e) => ({ default: e.TanstackToggleSwitchGroupField }))), W = r(() => import("../components/inline-field-group/InlineFieldGroup.js").then((e) => ({ default: e.InlineFieldGroup }))), G = r(() => import("../components/inline-field-group/parts/InlineFieldGroupHeader.js").then((e) => ({ default: e.InlineFieldGroupHeader }))), K = r(() => import("../components/inline-field-group/parts/InlineFieldGroupReadView.js").then((e) => ({ default: e.InlineFieldGroupReadView }))), q = r(() => import("../components/inline-field-group/parts/InlineFieldGroupEditView.js").then((e) => ({ default: e.InlineFieldGroupEditView }))), J = r(() => import("../components/password-field/TanstackPasswordField.js").then((e) => ({ default: e.TanstackPasswordField }))), Y = r(() => import("../components/inline-field/parts/InlineFieldEditView.js").then((e) => ({ default: e.InlineFieldEditView }))), X = r(() => import("../components/inline-field/parts/InlineFieldReadView.js").then((e) => ({ default: e.InlineFieldReadView }))), Z = i({
 	fieldComponents: {
 		FieldFeedbackText: o,
 		FieldHelperText: s,
@@ -24,37 +24,41 @@ var a = r(() => import("../components/checkbox-field/TanstackCheckboxField.js").
 		SelectInput: C,
 		TextAreaInput: w,
 		TextInput: T,
-		ToggleSwitchGroupInput: E,
-		ToggleSwitchInput: D,
+		FileUploadTriggerInput: E,
+		FileUploadDropzoneInput: D,
+		ToggleSwitchGroupInput: ee,
+		ToggleSwitchInput: O,
 		CheckboxField: a,
-		CheckboxGroupField: O,
-		DatePickerField: k,
-		DateRangePickerField: A,
-		MultiSelectField: j,
-		NumberField: M,
-		PasswordField: G,
+		CheckboxGroupField: j,
+		FileUploadTriggerField: k,
+		FileUploadDropzoneField: A,
+		DatePickerField: M,
+		DateRangePickerField: N,
+		MultiSelectField: P,
+		NumberField: F,
+		PasswordField: J,
 		PhoneNumberField: _,
-		RadioButtonGroupField: N,
-		SelectableButtonGroupField: F,
-		SelectableCardCheckboxGroupField: I,
-		SelectableCardRadioGroupField: L,
-		SelectField: P,
-		TextField: R,
-		ToggleSwitchField: z,
-		ToggleSwitchGroupField: B,
+		RadioButtonGroupField: I,
+		SelectableButtonGroupField: R,
+		SelectableCardCheckboxGroupField: z,
+		SelectableCardRadioGroupField: B,
+		SelectField: L,
+		TextField: V,
+		ToggleSwitchField: H,
+		ToggleSwitchGroupField: U,
 		InlineField: r(() => import("../components/inline-field/InlineField.js").then((e) => ({ default: e.InlineField }))),
-		InlineFieldReadView: q,
-		InlineFieldEditView: K
+		InlineFieldReadView: X,
+		InlineFieldEditView: Y
 	},
 	formComponents: {
 		Form: n,
-		InlineFieldGroup: V,
-		InlineFieldGroupHeader: H,
-		InlineFieldGroupReadView: U,
-		InlineFieldGroupEditView: W
+		InlineFieldGroup: W,
+		InlineFieldGroupHeader: G,
+		InlineFieldGroupReadView: K,
+		InlineFieldGroupEditView: q
 	},
 	fieldContext: e,
 	formContext: t
-}), Y = J.useAppForm, X = J.withForm, Z = J.withFieldGroup;
+}), Q = Z.useAppForm, $ = Z.withForm, te = Z.withFieldGroup;
 //#endregion
-export { Y as useTanstackUnityForm, Z as withFieldGroup, X as withForm };
+export { Q as useTanstackUnityForm, te as withFieldGroup, $ as withForm };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "3.15.14",
+  "version": "3.15.16",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -103,7 +103,7 @@
     "@formatjs/intl": "4.1.12",
     "@internationalized/date": "3.12.4",
     "minimatch": "10.2.5",
-    "@payfit/unity-illustrations": "3.15.14",
+    "@payfit/unity-illustrations": "3.15.16",
     "@radix-ui/react-avatar": "1.2.7",
     "@radix-ui/react-slot": "1.4.0",
     "@react-aria/interactions": "3.28.1",
@@ -132,8 +132,8 @@
     "zod": "4.6.5"
   },
   "peerDependencies": {
-    "@payfit/unity-icons": "3.15.14",
-    "@payfit/unity-themes": "3.15.14",
+    "@payfit/unity-icons": "3.15.16",
+    "@payfit/unity-themes": "3.15.16",
     "@storybook/react-vite": "^10",
     "@tanstack/react-query": "^5",
     "@tanstack/form-core": "1.33.5",
@@ -157,9 +157,9 @@
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-addon-datadog-rum": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "3.15.14",
-    "@payfit/unity-illustrations": "3.15.14",
-    "@payfit/unity-themes": "3.15.14",
+    "@payfit/unity-icons": "3.15.16",
+    "@payfit/unity-illustrations": "3.15.16",
+    "@payfit/unity-themes": "3.15.16",
     "@payfit/vite-configs": "0.0.0-use.local",
     "@storybook/addon-a11y": "10.6.1",
     "@storybook/addon-designs": "11.1.4",

package/src/agent-references/component-catalog.json

@@ -1293,6 +1293,28 @@
       ],
       "title": "Dialog"
     },
+    {
+      "description": "Accepts arbitrary dragged data with accessible labels.",
+      "docsHref": "?path=/docs/component-reference-dropzone--docs",
+      "id": "component-reference-dropzone",
+      "keywords": [
+        "drop",
+        "drag",
+        "file"
+      ],
+      "preview": {
+        "type": "story",
+        "story": "Primary",
+        "storyId": "component-reference-dropzone--Primary"
+      },
+      "related": [],
+      "section": "components",
+      "tags": [
+        "type:component",
+        "category:inputs"
+      ],
+      "title": "Dropzone"
+    },
     {
       "description": "Explains an empty view and offers the next action when there is no content to show.",
       "docsHref": "?path=/docs/component-reference-emptystate--docs",
@@ -1396,6 +1418,154 @@
       ],
       "title": "Fieldset"
     },
+    {
+      "description": "Combines native file selection with file dropping.",
+      "docsHref": "?path=/docs/component-reference-fileuploaddropzone--docs",
+      "id": "component-reference-fileuploaddropzone",
+      "keywords": [
+        "file",
+        "upload",
+        "dropzone",
+        "picker"
+      ],
+      "preview": {
+        "type": "story",
+        "story": "Primary",
+        "storyId": "component-reference-fileuploaddropzone--Primary"
+      },
+      "related": [],
+      "section": "components",
+      "tags": [
+        "type:component",
+        "category:inputs"
+      ],
+      "title": "FileUploadDropzone"
+    },
+    {
+      "description": "Combines a file dropzone with TanStack Form field metadata.",
+      "docsHref": "?path=/docs/forms-reference-fileuploaddropzonefield--docs",
+      "id": "forms-reference-fileuploaddropzonefield",
+      "keywords": [
+        "file",
+        "upload",
+        "dropzone",
+        "tanstack",
+        "form",
+        "field"
+      ],
+      "preview": {
+        "type": "story",
+        "story": "Primary",
+        "storyId": "forms-reference-fileuploaddropzonefield--Primary"
+      },
+      "related": [],
+      "section": "forms",
+      "tags": [
+        "type:form-control",
+        "category:inputs",
+        "behavior:validation"
+      ],
+      "title": "FileUploadDropzoneField"
+    },
+    {
+      "description": "Stores file drops and picker selections in the current TanStack Form field.",
+      "docsHref": "?path=/docs/forms-reference-fileuploaddropzoneinput--docs",
+      "id": "forms-reference-fileuploaddropzoneinput",
+      "keywords": [
+        "file",
+        "upload",
+        "dropzone",
+        "tanstack",
+        "form"
+      ],
+      "preview": {
+        "type": "story",
+        "story": "Primary",
+        "storyId": "forms-reference-fileuploaddropzoneinput--Primary"
+      },
+      "related": [],
+      "section": "forms",
+      "tags": [
+        "type:form-control",
+        "category:inputs",
+        "behavior:validation"
+      ],
+      "title": "FileUploadDropzoneInput"
+    },
+    {
+      "description": "Opens the native file picker from a pressable surface.",
+      "docsHref": "?path=/docs/component-reference-fileuploadtrigger--docs",
+      "id": "component-reference-fileuploadtrigger",
+      "keywords": [
+        "file",
+        "upload",
+        "picker",
+        "trigger"
+      ],
+      "preview": {
+        "type": "story",
+        "story": "Primary",
+        "storyId": "component-reference-fileuploadtrigger--Primary"
+      },
+      "related": [],
+      "section": "components",
+      "tags": [
+        "type:component",
+        "category:inputs"
+      ],
+      "title": "FileUploadTrigger"
+    },
+    {
+      "description": "Combines a file-picker action with TanStack Form field metadata.",
+      "docsHref": "?path=/docs/forms-reference-fileuploadtriggerfield--docs",
+      "id": "forms-reference-fileuploadtriggerfield",
+      "keywords": [
+        "file",
+        "upload",
+        "picker",
+        "tanstack",
+        "form",
+        "field"
+      ],
+      "preview": {
+        "type": "story",
+        "story": "Primary",
+        "storyId": "forms-reference-fileuploadtriggerfield--Primary"
+      },
+      "related": [],
+      "section": "forms",
+      "tags": [
+        "type:form-control",
+        "category:inputs",
+        "behavior:validation"
+      ],
+      "title": "FileUploadTriggerField"
+    },
+    {
+      "description": "Stores native file-picker selections in the current TanStack Form field.",
+      "docsHref": "?path=/docs/forms-reference-fileuploadtriggerinput--docs",
+      "id": "forms-reference-fileuploadtriggerinput",
+      "keywords": [
+        "file",
+        "upload",
+        "picker",
+        "tanstack",
+        "form"
+      ],
+      "preview": {
+        "type": "story",
+        "story": "Primary",
+        "storyId": "forms-reference-fileuploadtriggerinput--Primary"
+      },
+      "related": [],
+      "section": "forms",
+      "tags": [
+        "type:form-control",
+        "category:inputs",
+        "behavior:validation"
+      ],
+      "title": "FileUploadTriggerInput"
+    },
     {
       "description": "Defines one table filter with a trigger, operator, and custom value control.",
       "docsHref": "?path=/docs/component-reference-filter--docs",