@payfit/unity-components 2.68.15 → 2.68.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (129) hide show
  1. package/README.md +6 -0
  2. package/dist/esm/components/action-bar/parts/ActionBarButton.d.ts +1 -15
  3. package/dist/esm/components/action-bar/parts/ActionBarButton.js +1 -2
  4. package/dist/esm/components/actionable/Actionable.d.ts +1 -1
  5. package/dist/esm/components/app-menu/parts/AppMenuHeader.js +30 -31
  6. package/dist/esm/components/avatar/parts/AvatarFallback.js +6 -6
  7. package/dist/esm/components/avatar-group/parts/AvatarGroupCount.d.ts +1 -1
  8. package/dist/esm/components/badge/Badge.js +1 -1
  9. package/dist/esm/components/breadcrumbs/parts/RawBreadcrumbLink.d.ts +1 -1
  10. package/dist/esm/components/button/Button.d.ts +1 -1
  11. package/dist/esm/components/button/Button.js +42 -48
  12. package/dist/esm/components/button/Button.variants.js +15 -17
  13. package/dist/esm/components/carousel/parts/CarouselHeader.d.ts +3 -3
  14. package/dist/esm/components/checkbox/Checkbox.variants.js +1 -1
  15. package/dist/esm/components/checkbox/parts/CheckboxIndicator.js +4 -4
  16. package/dist/esm/components/date-calendar/DateCalendar.js +74 -74
  17. package/dist/esm/components/date-calendar/DateCalendar.variants.js +3 -3
  18. package/dist/esm/components/date-picker/parts/DateInput.js +2 -3
  19. package/dist/esm/components/date-range-calendar/DateRangeCalendar.js +85 -85
  20. package/dist/esm/components/date-range-picker/parts/DateRangeInput.js +1 -1
  21. package/dist/esm/components/filter/parts/FilterPopover.js +27 -27
  22. package/dist/esm/components/form-field/parts/TanstackRawFormContextualLink.d.ts +1 -1
  23. package/dist/esm/components/form-field/parts/TanstackRawFormContextualLink.js +19 -20
  24. package/dist/esm/components/funnel-layout/FunnelLayout.d.ts +1 -1
  25. package/dist/esm/components/funnel-layout/parts/FunnelPageAction.d.ts +2 -2
  26. package/dist/esm/components/funnel-layout/parts/FunnelPageAction.js +24 -28
  27. package/dist/esm/components/funnel-layout/parts/FunnelSidebar.d.ts +0 -17
  28. package/dist/esm/components/funnel-layout/parts/FunnelSidebar.js +14 -23
  29. package/dist/esm/components/funnel-layout/parts/FunnelTopBar.d.ts +1 -27
  30. package/dist/esm/components/funnel-layout/parts/FunnelTopBar.js +43 -53
  31. package/dist/esm/components/icon-button/IconButton.d.ts +1 -1
  32. package/dist/esm/components/icon-button/IconButton.js +60 -66
  33. package/dist/esm/components/icon-button/IconButton.variants.js +15 -17
  34. package/dist/esm/components/link/RawLink.d.ts +1 -1
  35. package/dist/esm/components/link/RawLink.js +3 -3
  36. package/dist/esm/components/link-button/LinkButton.variants.js +12 -17
  37. package/dist/esm/components/link-button/RawLinkButton.js +41 -46
  38. package/dist/esm/components/menu/parts/MenuContent.d.ts +1 -10
  39. package/dist/esm/components/menu/parts/MenuContent.js +6 -6
  40. package/dist/esm/components/nav/parts/NavGroup.js +4 -4
  41. package/dist/esm/components/nav/parts/RawNavItem.js +9 -9
  42. package/dist/esm/components/navigation-card/NavigationCard.d.ts +1 -1
  43. package/dist/esm/components/navigation-card/NavigationCard.variants.js +2 -2
  44. package/dist/esm/components/page/parts/PageHeader.d.ts +3 -54
  45. package/dist/esm/components/page/parts/PageHeader.js +18 -28
  46. package/dist/esm/components/payfit-brand/PayFitBrand.d.ts +1 -11
  47. package/dist/esm/components/payfit-brand/PayFitBrand.js +48 -73
  48. package/dist/esm/components/payfit-brand/PayFitPreprod.d.ts +2 -6
  49. package/dist/esm/components/payfit-brand/PayFitPreprod.js +35 -44
  50. package/dist/esm/components/pill/Pill.d.ts +3 -3
  51. package/dist/esm/components/pill/Pill.js +1 -1
  52. package/dist/esm/components/radio-button-group/parts/RadioButton.js +23 -24
  53. package/dist/esm/components/radio-button-group/parts/RadioIndicator.d.ts +1 -2
  54. package/dist/esm/components/radio-button-group/parts/RadioIndicator.js +7 -38
  55. package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.js +20 -22
  56. package/dist/esm/components/spinner/Spinner.js +1 -1
  57. package/dist/esm/components/tabs/Tabs.variant.js +6 -6
  58. package/dist/esm/components/tabs/parts/NavigationButton.js +2 -2
  59. package/dist/esm/components/task-menu/parts/RawSubTask.js +3 -3
  60. package/dist/esm/components/task-menu/parts/TaskGroup.js +3 -3
  61. package/dist/esm/components/task-menu/parts/task.variants.js +7 -7
  62. package/dist/esm/components/timeline/Timeline.variants.js +4 -4
  63. package/dist/esm/components/toast/UnityToast.js +2 -2
  64. package/dist/esm/components/toast/parts/ToastAction.js +10 -12
  65. package/dist/esm/components/toggle-switch/ToggleSwitch.js +4 -7
  66. package/dist/esm/hooks/use-tanstack-form.d.ts +6 -6
  67. package/dist/esm/index.d.ts +0 -21
  68. package/dist/esm/index.js +222 -243
  69. package/dist/esm/integrations/tanstack-router/components/form-contextual-link/TanstackFormContextualLink.js +7 -0
  70. package/dist/esm/integrations/tanstack-router/index.d.ts +1 -1
  71. package/dist/esm/integrations/tanstack-router.js +2 -2
  72. package/dist/esm/modules/ai-kit/components/ai-button/AIButton.d.ts +1 -1
  73. package/package.json +8 -11
  74. package/skills/unity-migrate-from-midnight/references/midnight-component-map.md +7 -7
  75. package/skills/unity-tanstack-form/SKILL.md +1 -25
  76. package/skills/unity-tanstack-form/references/schema-adapters.md +0 -27
  77. package/dist/esm/adapters/standardSchemaAdapter.js +0 -19
  78. package/dist/esm/adapters/zodAdapter.js +0 -60
  79. package/dist/esm/components/checkbox-field/CheckboxField.d.ts +0 -76
  80. package/dist/esm/components/checkbox-field/CheckboxField.js +0 -40
  81. package/dist/esm/components/checkbox-group-field/CheckboxGroupField.d.ts +0 -81
  82. package/dist/esm/components/checkbox-group-field/CheckboxGroupField.js +0 -37
  83. package/dist/esm/components/date-picker-field/DatePickerField.d.ts +0 -85
  84. package/dist/esm/components/date-picker-field/DatePickerField.js +0 -54
  85. package/dist/esm/components/form/Form.context.d.ts +0 -9
  86. package/dist/esm/components/form/Form.context.js +0 -17
  87. package/dist/esm/components/form/Form.d.ts +0 -43
  88. package/dist/esm/components/form/Form.js +0 -41
  89. package/dist/esm/components/form-field/FormField.context.d.ts +0 -33
  90. package/dist/esm/components/form-field/FormField.context.js +0 -47
  91. package/dist/esm/components/form-field/FormField.d.ts +0 -61
  92. package/dist/esm/components/form-field/FormField.js +0 -50
  93. package/dist/esm/components/form-field/parts/FormControl.d.ts +0 -32
  94. package/dist/esm/components/form-field/parts/FormControl.js +0 -42
  95. package/dist/esm/components/form-field/parts/FormFeedbackText.d.ts +0 -9
  96. package/dist/esm/components/form-field/parts/FormFeedbackText.js +0 -24
  97. package/dist/esm/components/form-field/parts/FormHelperText.d.ts +0 -9
  98. package/dist/esm/components/form-field/parts/FormHelperText.js +0 -21
  99. package/dist/esm/components/form-field/parts/FormLabel.d.ts +0 -10
  100. package/dist/esm/components/form-field/parts/FormLabel.js +0 -21
  101. package/dist/esm/components/form-field/parts/RawFormContextualLink.d.ts +0 -22
  102. package/dist/esm/components/form-field/parts/RawFormContextualLink.js +0 -33
  103. package/dist/esm/components/form-field/utils/isFieldRequired.d.ts +0 -8
  104. package/dist/esm/components/form-field/utils/isFieldRequired.js +0 -8
  105. package/dist/esm/components/multi-select-field/MultiSelectField.d.ts +0 -92
  106. package/dist/esm/components/multi-select-field/MultiSelectField.js +0 -57
  107. package/dist/esm/components/number-field/NumberField.d.ts +0 -49
  108. package/dist/esm/components/number-field/NumberField.js +0 -50
  109. package/dist/esm/components/radio-button-group-field/RadioButtonGroupField.d.ts +0 -49
  110. package/dist/esm/components/radio-button-group-field/RadioButtonGroupField.js +0 -37
  111. package/dist/esm/components/select-field/SelectField.d.ts +0 -52
  112. package/dist/esm/components/select-field/SelectField.js +0 -45
  113. package/dist/esm/components/selectable-button-group-field/SelectableButtonGroupField.d.ts +0 -61
  114. package/dist/esm/components/selectable-button-group-field/SelectableButtonGroupField.js +0 -42
  115. package/dist/esm/components/selectable-card-checkbox-group-field/SelectableCardCheckboxGroupField.d.ts +0 -33
  116. package/dist/esm/components/selectable-card-checkbox-group-field/SelectableCardCheckboxGroupField.js +0 -38
  117. package/dist/esm/components/selectable-card-radio-group-field/SelectableCardRadioGroupField.d.ts +0 -33
  118. package/dist/esm/components/selectable-card-radio-group-field/SelectableCardRadioGroupField.js +0 -38
  119. package/dist/esm/components/text-field/TextField.d.ts +0 -65
  120. package/dist/esm/components/text-field/TextField.js +0 -55
  121. package/dist/esm/components/toggle-switch-field/ToggleSwitchField.d.ts +0 -70
  122. package/dist/esm/components/toggle-switch-field/ToggleSwitchField.js +0 -35
  123. package/dist/esm/components/toggle-switch-group-field/ToggleSwitchGroupField.d.ts +0 -84
  124. package/dist/esm/components/toggle-switch-group-field/ToggleSwitchGroupField.js +0 -43
  125. package/dist/esm/hooks/use-form.d.ts +0 -50
  126. package/dist/esm/hooks/use-form.js +0 -38
  127. package/dist/esm/integrations/tanstack-router/components/form-contextual-link/FormContextualLink.d.ts +0 -45
  128. package/dist/esm/integrations/tanstack-router/components/form-contextual-link/FormContextualLink.js +0 -7
  129. package/dist/esm/utils/createSchemaAdapter.js +0 -8
@@ -1,65 +0,0 @@
1
- import { StandardSchemaV1 } from '@standard-schema/spec';
2
- import { ForwardedRef, HTMLAttributes, JSX, ReactNode } from 'react';
3
- import { FieldPath, FieldValues } from 'react-hook-form';
4
- import { Schema } from '../../hooks/use-form.types.js';
5
- import { InputProps } from '../input/Input.js';
6
- import { LabelProps } from '../label/Label.js';
7
- import { TextAreaProps } from '../text-area/TextArea.js';
8
- interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
9
- /** The name of the field, which should match the form schema. */
10
- name: TName;
11
- /** The label for the text field. */
12
- label: string;
13
- /** If true, the text field will be a multi-line text area. */
14
- multiline?: boolean;
15
- /** The default value of the text field. */
16
- defaultValue?: HTMLAttributes<HTMLInputElement>['defaultValue'];
17
- /** Helper text to display below the text field. */
18
- helperText?: ReactNode;
19
- /** Feedback text to display below the text field. */
20
- feedbackText?: ReactNode;
21
- /** A contextual link to display below the text field. */
22
- contextualLink?: ReactNode;
23
- }
24
- interface TextFieldWithInputProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends FieldProps<TFieldValues, TName>, Omit<InputProps, 'name'> {
25
- multiline?: false;
26
- type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search';
27
- }
28
- interface TextFieldWithTextAreaProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends FieldProps<TFieldValues, TName>, Omit<TextAreaProps, 'name'> {
29
- multiline?: true;
30
- type?: never;
31
- }
32
- export type TextFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = TextFieldWithInputProps<TFieldValues, TName> | TextFieldWithTextAreaProps<TFieldValues, TName>;
33
- type TextFieldComponent = (<TSchema extends Schema>(props: TextFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
34
- ref?: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>;
35
- }) => JSX.Element) & {
36
- displayName?: string;
37
- };
38
- /**
39
- * The `TextField` component renders a full field that can accept text input, supporting single-line and multi-line text fields, and integrates with the `Form` component automatically.
40
- * @example
41
- * ```tsx
42
- * const schema = z.object({
43
- * name: z.string(),
44
- * email: z.string().email()
45
- * })
46
- *
47
- * function MyForm() {
48
- * const { Form } = useUnityForm(schema)
49
- *
50
- * return (
51
- * <Form action={handleSubmit}>
52
- * <TextField<typeof schema>
53
- * name="name" // Only "name" | "email" allowed
54
- * label="Name"
55
- * />
56
- * </Form>
57
- * )
58
- * }
59
- * ```
60
- * @note The schema type parameter is needed to ensure type safety with the form's schema. If you omit it, the `name` prop will not be type-safe.
61
- * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
62
- * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
63
- */
64
- declare const TextField: TextFieldComponent;
65
- export { TextField };
@@ -1,55 +0,0 @@
1
- import { Input as e } from "../input/Input.js";
2
- import { TextArea as t } from "../text-area/TextArea.js";
3
- import { FormHelperText as n } from "../form-field/parts/FormHelperText.js";
4
- import { FormField as r } from "../form-field/FormField.js";
5
- import { FormControl as i } from "../form-field/parts/FormControl.js";
6
- import { FormFeedbackText as a } from "../form-field/parts/FormFeedbackText.js";
7
- import { FormLabel as o } from "../form-field/parts/FormLabel.js";
8
- import { forwardRef as s } from "react";
9
- import { uyTv as c } from "@payfit/unity-themes";
10
- import { jsx as l, jsxs as u } from "react/jsx-runtime";
11
- import { useFormContext as d } from "react-hook-form";
12
- //#region src/components/text-field/TextField.tsx
13
- var f = c({ base: "uy:flex uy:flex-col uy:gap-100" });
14
- function p({ name: s, label: c, defaultValue: p, helperText: m, feedbackText: h, contextualLink: g, multiline: _, isRequired: v, isInvalid: y, isLoading: b, isDisabled: x, isReadOnly: S, requiredVariant: C, ...w }, T) {
15
- let { control: E, setValue: D } = d(), O = {
16
- isRequired: v,
17
- isInvalid: y,
18
- isLoading: b,
19
- isDisabled: x,
20
- isReadOnly: S
21
- }, { onClearButtonPress: k } = _ ? {} : w, A = k ?? (() => {
22
- D(s, "");
23
- });
24
- return /* @__PURE__ */ u(r, {
25
- control: E,
26
- name: s,
27
- className: f(),
28
- ...O,
29
- children: [
30
- /* @__PURE__ */ l(o, {
31
- requiredVariant: C,
32
- children: c
33
- }),
34
- m && /* @__PURE__ */ l(n, { children: m }),
35
- /* @__PURE__ */ l(i, { children: _ ? /* @__PURE__ */ l(t, {
36
- ref: T,
37
- defaultValue: p,
38
- ...w
39
- }) : /* @__PURE__ */ l(e, {
40
- ref: T,
41
- defaultValue: p,
42
- onClearButtonPress: A,
43
- ...w
44
- }) }),
45
- /* @__PURE__ */ l(a, { children: h }),
46
- g
47
- ]
48
- });
49
- }
50
- var m = s(function(e, t) {
51
- return p(e, t);
52
- });
53
- m.displayName = "TextField";
54
- //#endregion
55
- export { m as TextField };
@@ -1,70 +0,0 @@
1
- import { StandardSchemaV1 } from '@standard-schema/spec';
2
- import { ForwardedRef, JSX } from 'react';
3
- import { FieldPath, FieldValues } from 'react-hook-form';
4
- import { Schema } from '../../hooks/use-form.types.js';
5
- interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
6
- /** The name of the field, which should match the form schema. */
7
- name: TName;
8
- /** The label for the toggle switch. */
9
- label: string;
10
- /** Helper text to display below the toggle switch. */
11
- switchHelperText?: string;
12
- /** The default selected value of the toggle switch. */
13
- defaultSelected?: boolean;
14
- /** Whether the toggle switch is disabled. */
15
- isDisabled?: boolean;
16
- /** Whether the toggle switch is read-only. */
17
- isReadOnly?: boolean;
18
- /** Whether the toggle switch is invalid. */
19
- isInvalid?: boolean;
20
- /** Whether the toggle switch is loading. */
21
- isLoading?: boolean;
22
- /** Whether the label is visually hidden and accessible only to screen readers. */
23
- isLabelSrOnly?: boolean;
24
- }
25
- export type ToggleSwitchFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName>;
26
- type ToggleSwitchFieldComponent = (<TSchema extends Schema>(props: ToggleSwitchFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
27
- ref?: ForwardedRef<HTMLLabelElement>;
28
- }) => JSX.Element) & {
29
- displayName?: string;
30
- };
31
- /**
32
- * The `ToggleSwitchField` component enhances the base ToggleSwitch with form integration capabilities.
33
- * It automatically integrates with Unity's form context and handles value updates through the form's state management.
34
- *
35
- * The component provides form validation, helper text, and error feedback while maintaining the same
36
- * API as the base ToggleSwitch component. It's the recommended way to use toggle switches within forms.
37
- * @param {ToggleSwitchFieldProps} props - Props for the ToggleSwitchField component
38
- * @example
39
- * ```tsx
40
- * import { useUnityForm, ToggleSwitchField } from '@payfit/unity-components'
41
- * import * as z from 'zod'
42
- *
43
- * function Example() {
44
- * const schema = z.object({
45
- * enableFeature: z.boolean(),
46
- * })
47
- *
48
- * const { Form } = useUnityForm(schema)
49
- *
50
- * return (
51
- * <Form action={handleSubmit}>
52
- * <ToggleSwitchField<typeof schema>
53
- * name="enableFeature"
54
- * label="Enable feature"
55
- * helperText="Turn this on to enable the feature."
56
- * />
57
- * </Form>
58
- * )
59
- * }
60
- * ```
61
- * @see {@link ToggleSwitchFieldProps} for all available props
62
- * @remarks
63
- * [API](/?path=/docs/forms-toggleswitchfield--docs) • [Demo](/?path=/story/forms-toggleswitchfield--primary)
64
- * @note The schema type parameter is needed to ensure type safety with the form's schema.
65
- * If you omit it, the `name` prop will not be type-safe.
66
- * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
67
- * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
68
- */
69
- declare const ToggleSwitchField: ToggleSwitchFieldComponent;
70
- export { ToggleSwitchField };
@@ -1,35 +0,0 @@
1
- import { ToggleSwitch as e } from "../toggle-switch/ToggleSwitch.js";
2
- import { FormField as t } from "../form-field/FormField.js";
3
- import { FormControl as n } from "../form-field/parts/FormControl.js";
4
- import { FormFeedbackText as r } from "../form-field/parts/FormFeedbackText.js";
5
- import { forwardRef as i } from "react";
6
- import { jsx as a, jsxs as o } from "react/jsx-runtime";
7
- import { useFormContext as s } from "react-hook-form";
8
- //#region src/components/toggle-switch-field/ToggleSwitchField.tsx
9
- function c({ name: i, label: c, defaultSelected: l, switchHelperText: u, isInvalid: d, isLoading: f, isDisabled: p, isReadOnly: m, isLabelSrOnly: h, ...g }, _) {
10
- let { control: v, watch: y } = s();
11
- return /* @__PURE__ */ o(t, {
12
- control: v,
13
- name: i,
14
- className: "uy:flex uy:flex-col uy:gap-100",
15
- isInvalid: d,
16
- isLoading: f,
17
- isDisabled: p,
18
- isReadOnly: m,
19
- children: [/* @__PURE__ */ a(n, { children: /* @__PURE__ */ a(e, {
20
- ref: _,
21
- defaultSelected: l,
22
- isSelected: y(i),
23
- label: c,
24
- isLabelSrOnly: h,
25
- helperText: u,
26
- ...g
27
- }) }), /* @__PURE__ */ a(r, {})]
28
- });
29
- }
30
- var l = i(function(e, t) {
31
- return c(e, t);
32
- });
33
- l.displayName = "ToggleSwitchField";
34
- //#endregion
35
- export { l as ToggleSwitchField };
@@ -1,84 +0,0 @@
1
- import { StandardSchemaV1 } from '@standard-schema/spec';
2
- import { ForwardedRef, JSX, PropsWithChildren, ReactNode } from 'react';
3
- import { FieldPath, FieldValues } from 'react-hook-form';
4
- import { Schema } from '../../hooks/use-form.types.js';
5
- import { LabelProps } from '../label/Label.js';
6
- import { ToggleSwitchGroupProps } from '../toggle-switch-group/ToggleSwitchGroup.js';
7
- interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
8
- /** The name of the field, which should match the form schema. */
9
- name: TName;
10
- /** The label for the toggle switch group. */
11
- label: string;
12
- /** Helper text to display below the toggle switch group. */
13
- helperText?: ReactNode;
14
- /** A contextual link to display below the toggle switch group. */
15
- contextualLink?: ReactNode;
16
- /** The default selected values of the toggle switch group. */
17
- defaultValue?: string[];
18
- /** Whether the toggle switch group is disabled. */
19
- isDisabled?: boolean;
20
- /** Whether the toggle switch group is read-only. */
21
- isReadOnly?: boolean;
22
- /** Whether the toggle switch group is invalid. */
23
- isInvalid?: boolean;
24
- /** Whether the toggle switch group is loading. */
25
- isLoading?: boolean;
26
- /** Callback when the selection changes. */
27
- onChange?: (value: string[]) => void;
28
- /** Handler called when the group receives focus. */
29
- onFocus?: ToggleSwitchGroupProps['onFocus'];
30
- /** Handler called when the group loses focus. */
31
- onBlur?: ToggleSwitchGroupProps['onBlur'];
32
- /** Handler that is called when the element's focus status changes. */
33
- onFocusChange?: (isFocused: boolean) => void;
34
- }
35
- export type ToggleSwitchGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName>;
36
- type ToggleSwitchGroupFieldComponent = (<TSchema extends Schema>(props: ToggleSwitchGroupFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
37
- ref?: ForwardedRef<HTMLFieldSetElement>;
38
- }) => JSX.Element) & {
39
- displayName?: string;
40
- };
41
- /**
42
- * The `ToggleSwitchGroupField` component renders a group of related toggle switches that can be used in forms.
43
- * It combines the functionality of ToggleSwitchGroup with form integration capabilities, providing
44
- * automatic form state management, validation, and error handling.
45
- *
46
- * The component is ideal for collecting multiple binary preferences or settings within a form context,
47
- * such as notification preferences or feature toggles.
48
- * @param {ToggleSwitchGroupFieldProps} props - Props for the ToggleSwitchGroupField component
49
- * @example
50
- * ```tsx
51
- * import { useUnityForm, ToggleSwitchGroupField, ToggleSwitch } from '@payfit/unity-components'
52
- * import * as z from 'zod'
53
- *
54
- * function Example() {
55
- * const schema = z.object({
56
- * preferences: z.array(z.string())
57
- * })
58
- *
59
- * const { Form } = useUnityForm(schema)
60
- *
61
- * return (
62
- * <Form action={handleSubmit}>
63
- * <ToggleSwitchGroupField<typeof schema>
64
- * name="preferences"
65
- * label="Select your preferences"
66
- * helperText="Choose all that apply"
67
- * >
68
- * <ToggleSwitch value="email" label="Email notifications" />
69
- * <ToggleSwitch value="sms" label="SMS notifications" />
70
- * </ToggleSwitchGroupField>
71
- * </Form>
72
- * )
73
- * }
74
- * ```
75
- * @see {@link ToggleSwitchGroupFieldProps} for all available props
76
- * @remarks
77
- * [API](/?path=/docs/forms-toggleswitchgroupfield--docs) • [Demo](/?path=/story/forms-toggleswitchgroupfield--primary)
78
- * @note The schema type parameter is needed to ensure type safety with the form's schema.
79
- * If you omit it, the `name` prop will not be type-safe.
80
- * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
81
- * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
82
- */
83
- declare const ToggleSwitchGroupField: ToggleSwitchGroupFieldComponent;
84
- export { ToggleSwitchGroupField };
@@ -1,43 +0,0 @@
1
- import { useUnityFormProvider as e } from "../form/Form.context.js";
2
- import { ToggleSwitchGroup as t } from "../toggle-switch-group/ToggleSwitchGroup.js";
3
- import { createSchemaAdapter as n } from "../../utils/createSchemaAdapter.js";
4
- import { isFieldRequired as r } from "../form-field/utils/isFieldRequired.js";
5
- import { FormField as i } from "../form-field/FormField.js";
6
- import { FormControl as a } from "../form-field/parts/FormControl.js";
7
- import { FormFeedbackText as o } from "../form-field/parts/FormFeedbackText.js";
8
- import { forwardRef as s, useMemo as c } from "react";
9
- import { jsx as l, jsxs as u } from "react/jsx-runtime";
10
- import { useFormContext as d } from "react-hook-form";
11
- //#region src/components/toggle-switch-group-field/ToggleSwitchGroupField.tsx
12
- function f({ name: s, label: f, defaultValue: p, helperText: m, contextualLink: h, isRequired: g, isInvalid: _, isLoading: v, isDisabled: y, isReadOnly: b, requiredVariant: x, children: S, ...C }, w) {
13
- let { control: T, watch: E } = d(), { schema: D } = e(), O = c(() => r(n(D), s), [D, s]);
14
- return /* @__PURE__ */ u(i, {
15
- control: T,
16
- name: s,
17
- isInvalid: _,
18
- isLoading: v,
19
- isDisabled: y,
20
- isReadOnly: b,
21
- children: [
22
- /* @__PURE__ */ l(a, { children: /* @__PURE__ */ l(t, {
23
- ref: w,
24
- label: f,
25
- defaultValue: p,
26
- value: E(s),
27
- helperText: m,
28
- requiredVariant: x,
29
- ...C,
30
- isRequired: O ?? g,
31
- children: S
32
- }) }),
33
- /* @__PURE__ */ l(o, {}),
34
- h
35
- ]
36
- });
37
- }
38
- var p = s(function(e, t) {
39
- return f(e, t);
40
- });
41
- p.displayName = "ToggleSwitchGroupField";
42
- //#endregion
43
- export { p as ToggleSwitchGroupField };
@@ -1,50 +0,0 @@
1
- import { StandardSchemaV1 } from '@standard-schema/spec';
2
- import { JSX, PropsWithChildren } from 'react';
3
- import { UseFormProps as UseHookFormProps, UseFormReturn as UseHookFormReturn } from 'react-hook-form';
4
- import { FormFieldProps } from '../components/form-field/FormField.js';
5
- import { FormProps } from '../components/form/Form.js';
6
- import { Schema } from './use-form.types.js';
7
- export type UseUnityFormReturn<TSchema extends Schema> = {
8
- methods: UseHookFormReturn<StandardSchemaV1.InferInput<TSchema>, any, StandardSchemaV1.InferOutput<TSchema>>;
9
- Form: (props: Omit<FormProps<TSchema, StandardSchemaV1.InferInput<TSchema>, StandardSchemaV1.InferOutput<TSchema>>, 'form' | 'schema'>) => JSX.Element;
10
- FormField: (props: PropsWithChildren<Omit<FormFieldProps<StandardSchemaV1.InferOutput<TSchema>>, 'control'>>) => JSX.Element;
11
- };
12
- /**
13
- * A hook to create `Form` and `FormField` components that are bound to a specific schema definition and form controller. The resulting components will have full type-safety based on the provided schema type.
14
- * @param `schema` a Zod schema definition to validate the form data, {@link [Zod](https://zod.dev)}
15
- * @param `options` the options to pass to the `react-hook-form` hook. See the official documentation for more details. {@link [React Hook Form](https://react-hook-form.com/api/useform)}
16
- * @returns an object containing the bounded `Form` and `FormField` components, as well as the form controller methods {@link UseUnityFormReturn}
17
- * @example
18
- * ```tsx
19
- * import { useUnityForm } from '@payfit/unity-components'
20
- * import * as z from 'zod'
21
- *
22
- * const schema = z.object({
23
- * foo: z.string().min(3),
24
- * bar: z.string().optional(),
25
- * })
26
- *
27
- * function DemoForm() {
28
- * const { Form, FormField } = useUnityForm(schema, {
29
- * defaultValues: { foo: 'Hello world', bar: '' },
30
- * })
31
- *
32
- * return (
33
- * <Form action={() => ...}>
34
- * <FormField name="foo" type="text">
35
- * // ...
36
- * </FormField>
37
- * // Type Error: "baz" is not assignable to "foo" | "bar".
38
- * <FormField name="baz" type="text">
39
- * // ...
40
- * </FormField>
41
- * </Form>
42
- * )
43
- * }
44
- * ```
45
- * @remarks
46
- * [API]() • [Demo]()
47
- * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
48
- * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
49
- */
50
- export declare function useUnityForm<TSchema extends Schema>(schema: TSchema, options?: Omit<UseHookFormProps<StandardSchemaV1.InferInput<TSchema>, any, StandardSchemaV1.InferOutput<TSchema>>, 'resolver'>): UseUnityFormReturn<TSchema>;
@@ -1,38 +0,0 @@
1
- import { Form as e } from "../components/form/Form.js";
2
- import { FormField as t } from "../components/form-field/FormField.js";
3
- import { useMemo as n } from "react";
4
- import { jsx as r } from "react/jsx-runtime";
5
- import { useForm as i } from "react-hook-form";
6
- import { standardSchemaResolver as a } from "@hookform/resolvers/standard-schema";
7
- //#region src/hooks/use-form.tsx
8
- function o(o, s = {
9
- mode: "onTouched",
10
- reValidateMode: "onChange"
11
- }) {
12
- let c = i({
13
- ...s,
14
- resolver: a(o)
15
- });
16
- return {
17
- methods: c,
18
- Form: n(() => {
19
- let t = (t) => /* @__PURE__ */ r(e, {
20
- ...t,
21
- form: c,
22
- schema: o,
23
- children: t.children
24
- });
25
- return t.displayName = "FormWithSchema", t;
26
- }, [c, o]),
27
- FormField: n(() => {
28
- let e = (e) => /* @__PURE__ */ r(t, {
29
- ...e,
30
- control: c.control,
31
- children: e.children
32
- });
33
- return e.displayName = "FormFieldWithSchema", e;
34
- }, [c])
35
- };
36
- }
37
- //#endregion
38
- export { o as useUnityForm };
@@ -1,45 +0,0 @@
1
- import { LinkComponent } from '@tanstack/react-router';
2
- import { RawFormContextualLink } from '../../../../components/form-field/parts/RawFormContextualLink.js';
3
- /**
4
- * Unity's FormContextualLink that integrates with Tanstack Router for seamless client-side navigation within form fields.
5
- * Enables declarative routing with type-safe route parameters, search params, and automatic preloading capabilities while maintaining form field context.
6
- * @example
7
- * ```tsx
8
- * import { FormContextualLink } from '@payfit/unity-components/integrations/tanstack-router'
9
- * import { useTanstackUnityForm } from '@payfit/unity-components'
10
- *
11
- * function MyForm() {
12
- * const { Form, FormField } = useTanstackUnityForm({
13
- * defaultValues: { email: '' },
14
- * })
15
- * return (
16
- * <Form>
17
- * <FormField name="email">
18
- * <FormContextualLink to="/help">
19
- * Need help?
20
- * </FormContextualLink>
21
- * </FormField>
22
- * </Form>
23
- * )
24
- * }
25
- * ```
26
- * @remarks
27
- * - Must be used inside a FormField component to maintain proper form context
28
- * - Supports type-safe navigation with route parameters and search params
29
- * - Provides automatic route preloading on hover or mount via the `preload` prop
30
- * - Handles relative and absolute paths with `from` and `to` props for flexible routing
31
- * - Integrates seamlessly with Tanstack Router's navigation system and loader functions
32
- * - Maintains all accessibility features from the underlying RawFormContextualLink component
33
- * - Automatically detects external URLs and applies appropriate security attributes (target="_blank", rel="noopener noreferrer")
34
- * - Inherits the "small" size and "secondary" color styling appropriate for form contextual links
35
- * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/form-contextual-link GitHub}
36
- * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
37
- * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
38
- * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
39
- * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead (see `TanstackFormContextualLink`).
40
- * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
41
- */
42
- declare const FormContextualLink: LinkComponent<typeof RawFormContextualLink> & {
43
- displayName: string;
44
- };
45
- export { FormContextualLink };
@@ -1,7 +0,0 @@
1
- import { RawFormContextualLink as e } from "../../../../components/form-field/parts/RawFormContextualLink.js";
2
- import { createLink as t } from "@tanstack/react-router";
3
- //#region src/integrations/tanstack-router/components/form-contextual-link/FormContextualLink.tsx
4
- var n = t(e);
5
- n.displayName = "FormContextualLink";
6
- //#endregion
7
- export { n as FormContextualLink };
@@ -1,8 +0,0 @@
1
- import { StandardSchemaAdapter as e } from "../adapters/standardSchemaAdapter.js";
2
- import { ZodV3SchemaAdapter as t, ZodV4SchemaAdapter as n } from "../adapters/zodAdapter.js";
3
- //#region src/utils/createSchemaAdapter.ts
4
- function r(r) {
5
- return r ? r._def && typeof r._def == "object" ? "def" in r ? new n(r) : new t(r) : r["~validate"] && typeof r["~validate"] == "function" ? new e(r) : null : null;
6
- }
7
- //#endregion
8
- export { r as createSchemaAdapter };