@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.
- package/README.md +6 -0
- package/dist/esm/components/action-bar/parts/ActionBarButton.d.ts +1 -15
- package/dist/esm/components/action-bar/parts/ActionBarButton.js +1 -2
- package/dist/esm/components/actionable/Actionable.d.ts +1 -1
- package/dist/esm/components/app-menu/parts/AppMenuHeader.js +30 -31
- package/dist/esm/components/avatar/parts/AvatarFallback.js +6 -6
- package/dist/esm/components/avatar-group/parts/AvatarGroupCount.d.ts +1 -1
- package/dist/esm/components/badge/Badge.js +1 -1
- package/dist/esm/components/breadcrumbs/parts/RawBreadcrumbLink.d.ts +1 -1
- package/dist/esm/components/button/Button.d.ts +1 -1
- package/dist/esm/components/button/Button.js +42 -48
- package/dist/esm/components/button/Button.variants.js +15 -17
- package/dist/esm/components/carousel/parts/CarouselHeader.d.ts +3 -3
- package/dist/esm/components/checkbox/Checkbox.variants.js +1 -1
- package/dist/esm/components/checkbox/parts/CheckboxIndicator.js +4 -4
- package/dist/esm/components/date-calendar/DateCalendar.js +74 -74
- package/dist/esm/components/date-calendar/DateCalendar.variants.js +3 -3
- package/dist/esm/components/date-picker/parts/DateInput.js +2 -3
- package/dist/esm/components/date-range-calendar/DateRangeCalendar.js +85 -85
- package/dist/esm/components/date-range-picker/parts/DateRangeInput.js +1 -1
- package/dist/esm/components/filter/parts/FilterPopover.js +27 -27
- package/dist/esm/components/form-field/parts/TanstackRawFormContextualLink.d.ts +1 -1
- package/dist/esm/components/form-field/parts/TanstackRawFormContextualLink.js +19 -20
- package/dist/esm/components/funnel-layout/FunnelLayout.d.ts +1 -1
- package/dist/esm/components/funnel-layout/parts/FunnelPageAction.d.ts +2 -2
- package/dist/esm/components/funnel-layout/parts/FunnelPageAction.js +24 -28
- package/dist/esm/components/funnel-layout/parts/FunnelSidebar.d.ts +0 -17
- package/dist/esm/components/funnel-layout/parts/FunnelSidebar.js +14 -23
- package/dist/esm/components/funnel-layout/parts/FunnelTopBar.d.ts +1 -27
- package/dist/esm/components/funnel-layout/parts/FunnelTopBar.js +43 -53
- package/dist/esm/components/icon-button/IconButton.d.ts +1 -1
- package/dist/esm/components/icon-button/IconButton.js +60 -66
- package/dist/esm/components/icon-button/IconButton.variants.js +15 -17
- package/dist/esm/components/link/RawLink.d.ts +1 -1
- package/dist/esm/components/link/RawLink.js +3 -3
- package/dist/esm/components/link-button/LinkButton.variants.js +12 -17
- package/dist/esm/components/link-button/RawLinkButton.js +41 -46
- package/dist/esm/components/menu/parts/MenuContent.d.ts +1 -10
- package/dist/esm/components/menu/parts/MenuContent.js +6 -6
- package/dist/esm/components/nav/parts/NavGroup.js +4 -4
- package/dist/esm/components/nav/parts/RawNavItem.js +9 -9
- package/dist/esm/components/navigation-card/NavigationCard.d.ts +1 -1
- package/dist/esm/components/navigation-card/NavigationCard.variants.js +2 -2
- package/dist/esm/components/page/parts/PageHeader.d.ts +3 -54
- package/dist/esm/components/page/parts/PageHeader.js +18 -28
- package/dist/esm/components/payfit-brand/PayFitBrand.d.ts +1 -11
- package/dist/esm/components/payfit-brand/PayFitBrand.js +48 -73
- package/dist/esm/components/payfit-brand/PayFitPreprod.d.ts +2 -6
- package/dist/esm/components/payfit-brand/PayFitPreprod.js +35 -44
- package/dist/esm/components/pill/Pill.d.ts +3 -3
- package/dist/esm/components/pill/Pill.js +1 -1
- package/dist/esm/components/radio-button-group/parts/RadioButton.js +23 -24
- package/dist/esm/components/radio-button-group/parts/RadioIndicator.d.ts +1 -2
- package/dist/esm/components/radio-button-group/parts/RadioIndicator.js +7 -38
- package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.js +20 -22
- package/dist/esm/components/spinner/Spinner.js +1 -1
- package/dist/esm/components/tabs/Tabs.variant.js +6 -6
- package/dist/esm/components/tabs/parts/NavigationButton.js +2 -2
- package/dist/esm/components/task-menu/parts/RawSubTask.js +3 -3
- package/dist/esm/components/task-menu/parts/TaskGroup.js +3 -3
- package/dist/esm/components/task-menu/parts/task.variants.js +7 -7
- package/dist/esm/components/timeline/Timeline.variants.js +4 -4
- package/dist/esm/components/toast/UnityToast.js +2 -2
- package/dist/esm/components/toast/parts/ToastAction.js +10 -12
- package/dist/esm/components/toggle-switch/ToggleSwitch.js +4 -7
- package/dist/esm/hooks/use-tanstack-form.d.ts +6 -6
- package/dist/esm/index.d.ts +0 -21
- package/dist/esm/index.js +222 -243
- package/dist/esm/integrations/tanstack-router/components/form-contextual-link/TanstackFormContextualLink.js +7 -0
- package/dist/esm/integrations/tanstack-router/index.d.ts +1 -1
- package/dist/esm/integrations/tanstack-router.js +2 -2
- package/dist/esm/modules/ai-kit/components/ai-button/AIButton.d.ts +1 -1
- package/package.json +8 -11
- package/skills/unity-migrate-from-midnight/references/midnight-component-map.md +7 -7
- package/skills/unity-tanstack-form/SKILL.md +1 -25
- package/skills/unity-tanstack-form/references/schema-adapters.md +0 -27
- package/dist/esm/adapters/standardSchemaAdapter.js +0 -19
- package/dist/esm/adapters/zodAdapter.js +0 -60
- package/dist/esm/components/checkbox-field/CheckboxField.d.ts +0 -76
- package/dist/esm/components/checkbox-field/CheckboxField.js +0 -40
- package/dist/esm/components/checkbox-group-field/CheckboxGroupField.d.ts +0 -81
- package/dist/esm/components/checkbox-group-field/CheckboxGroupField.js +0 -37
- package/dist/esm/components/date-picker-field/DatePickerField.d.ts +0 -85
- package/dist/esm/components/date-picker-field/DatePickerField.js +0 -54
- package/dist/esm/components/form/Form.context.d.ts +0 -9
- package/dist/esm/components/form/Form.context.js +0 -17
- package/dist/esm/components/form/Form.d.ts +0 -43
- package/dist/esm/components/form/Form.js +0 -41
- package/dist/esm/components/form-field/FormField.context.d.ts +0 -33
- package/dist/esm/components/form-field/FormField.context.js +0 -47
- package/dist/esm/components/form-field/FormField.d.ts +0 -61
- package/dist/esm/components/form-field/FormField.js +0 -50
- package/dist/esm/components/form-field/parts/FormControl.d.ts +0 -32
- package/dist/esm/components/form-field/parts/FormControl.js +0 -42
- package/dist/esm/components/form-field/parts/FormFeedbackText.d.ts +0 -9
- package/dist/esm/components/form-field/parts/FormFeedbackText.js +0 -24
- package/dist/esm/components/form-field/parts/FormHelperText.d.ts +0 -9
- package/dist/esm/components/form-field/parts/FormHelperText.js +0 -21
- package/dist/esm/components/form-field/parts/FormLabel.d.ts +0 -10
- package/dist/esm/components/form-field/parts/FormLabel.js +0 -21
- package/dist/esm/components/form-field/parts/RawFormContextualLink.d.ts +0 -22
- package/dist/esm/components/form-field/parts/RawFormContextualLink.js +0 -33
- package/dist/esm/components/form-field/utils/isFieldRequired.d.ts +0 -8
- package/dist/esm/components/form-field/utils/isFieldRequired.js +0 -8
- package/dist/esm/components/multi-select-field/MultiSelectField.d.ts +0 -92
- package/dist/esm/components/multi-select-field/MultiSelectField.js +0 -57
- package/dist/esm/components/number-field/NumberField.d.ts +0 -49
- package/dist/esm/components/number-field/NumberField.js +0 -50
- package/dist/esm/components/radio-button-group-field/RadioButtonGroupField.d.ts +0 -49
- package/dist/esm/components/radio-button-group-field/RadioButtonGroupField.js +0 -37
- package/dist/esm/components/select-field/SelectField.d.ts +0 -52
- package/dist/esm/components/select-field/SelectField.js +0 -45
- package/dist/esm/components/selectable-button-group-field/SelectableButtonGroupField.d.ts +0 -61
- package/dist/esm/components/selectable-button-group-field/SelectableButtonGroupField.js +0 -42
- package/dist/esm/components/selectable-card-checkbox-group-field/SelectableCardCheckboxGroupField.d.ts +0 -33
- package/dist/esm/components/selectable-card-checkbox-group-field/SelectableCardCheckboxGroupField.js +0 -38
- package/dist/esm/components/selectable-card-radio-group-field/SelectableCardRadioGroupField.d.ts +0 -33
- package/dist/esm/components/selectable-card-radio-group-field/SelectableCardRadioGroupField.js +0 -38
- package/dist/esm/components/text-field/TextField.d.ts +0 -65
- package/dist/esm/components/text-field/TextField.js +0 -55
- package/dist/esm/components/toggle-switch-field/ToggleSwitchField.d.ts +0 -70
- package/dist/esm/components/toggle-switch-field/ToggleSwitchField.js +0 -35
- package/dist/esm/components/toggle-switch-group-field/ToggleSwitchGroupField.d.ts +0 -84
- package/dist/esm/components/toggle-switch-group-field/ToggleSwitchGroupField.js +0 -43
- package/dist/esm/hooks/use-form.d.ts +0 -50
- package/dist/esm/hooks/use-form.js +0 -38
- package/dist/esm/integrations/tanstack-router/components/form-contextual-link/FormContextualLink.d.ts +0 -45
- package/dist/esm/integrations/tanstack-router/components/form-contextual-link/FormContextualLink.js +0 -7
- package/dist/esm/utils/createSchemaAdapter.js +0 -8
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { MultiSelect as e } from "../multi-select/MultiSelect.js";
|
|
2
|
-
import { FormHelperText as t } from "../form-field/parts/FormHelperText.js";
|
|
3
|
-
import { FormField as n } from "../form-field/FormField.js";
|
|
4
|
-
import { FormControl as r } from "../form-field/parts/FormControl.js";
|
|
5
|
-
import { FormFeedbackText as i } from "../form-field/parts/FormFeedbackText.js";
|
|
6
|
-
import { FormLabel as a } from "../form-field/parts/FormLabel.js";
|
|
7
|
-
import { forwardRef as o } from "react";
|
|
8
|
-
import { uyTv as s } from "@payfit/unity-themes";
|
|
9
|
-
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
10
|
-
import { useFormContext as u } from "react-hook-form";
|
|
11
|
-
//#region src/components/multi-select-field/MultiSelectField.tsx
|
|
12
|
-
var d = s({ base: "uy:flex uy:flex-col uy:gap-100" });
|
|
13
|
-
function f(o, s) {
|
|
14
|
-
let { control: f, setValue: p } = u(), { name: m, label: h, helperText: g, feedbackText: _, contextualLink: v, isRequired: y, isInvalid: b, isLoading: x, isDisabled: S, isReadOnly: C, requiredVariant: w, children: T, onClearButtonPress: E, ...D } = o, O = {
|
|
15
|
-
isRequired: y,
|
|
16
|
-
isInvalid: b,
|
|
17
|
-
isLoading: x,
|
|
18
|
-
isDisabled: S,
|
|
19
|
-
isReadOnly: C
|
|
20
|
-
}, k = {
|
|
21
|
-
onClearButtonPress: () => {
|
|
22
|
-
p(m, /* @__PURE__ */ new Set()), E?.();
|
|
23
|
-
},
|
|
24
|
-
placeholder: o.placeholder,
|
|
25
|
-
isSearchable: o.isSearchable,
|
|
26
|
-
maxVisibleItems: o.maxVisibleItems,
|
|
27
|
-
isDisabled: S,
|
|
28
|
-
isReadOnly: C,
|
|
29
|
-
isLoading: x,
|
|
30
|
-
...o.renderValue && { renderValue: o.renderValue }
|
|
31
|
-
};
|
|
32
|
-
return /* @__PURE__ */ l(n, {
|
|
33
|
-
control: f,
|
|
34
|
-
name: m,
|
|
35
|
-
className: d(),
|
|
36
|
-
...O,
|
|
37
|
-
children: [
|
|
38
|
-
/* @__PURE__ */ c(a, {
|
|
39
|
-
requiredVariant: w,
|
|
40
|
-
children: h
|
|
41
|
-
}),
|
|
42
|
-
g && /* @__PURE__ */ c(t, { children: g }),
|
|
43
|
-
/* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(e, {
|
|
44
|
-
...D,
|
|
45
|
-
...k,
|
|
46
|
-
ref: s,
|
|
47
|
-
children: T
|
|
48
|
-
}) }),
|
|
49
|
-
/* @__PURE__ */ c(i, { children: _ }),
|
|
50
|
-
v
|
|
51
|
-
]
|
|
52
|
-
});
|
|
53
|
-
}
|
|
54
|
-
var p = o(f);
|
|
55
|
-
p.displayName = "MultiSelectField";
|
|
56
|
-
//#endregion
|
|
57
|
-
export { p as MultiSelectField };
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { StandardSchemaV1 } from '@standard-schema/spec';
|
|
2
|
-
import { ForwardedRef, JSX, 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 { NumberProps } from '../number-input/NumberInput.js';
|
|
7
|
-
export declare const numberField: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex uy:flex-col uy:gap-100", {} | {}, undefined, import('tailwind-variants').TVReturnTypeLike<unknown, undefined>>;
|
|
8
|
-
export interface NumberFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'>, Omit<NumberProps, 'name'> {
|
|
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
|
-
/** Helper text to display below the text field. */
|
|
14
|
-
helperText?: ReactNode;
|
|
15
|
-
/** Feedback text to display below the text field. */
|
|
16
|
-
feedbackText?: ReactNode;
|
|
17
|
-
/** A contextual link to display below the text field. */
|
|
18
|
-
contextualLink?: ReactNode;
|
|
19
|
-
}
|
|
20
|
-
type NumberFieldComponent = (<TSchema extends Schema>(props: NumberFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
|
|
21
|
-
ref?: ForwardedRef<HTMLInputElement>;
|
|
22
|
-
}) => JSX.Element) & {
|
|
23
|
-
displayName?: string;
|
|
24
|
-
};
|
|
25
|
-
/**
|
|
26
|
-
* NumberField is a form control component that combines a number input with form field functionality.
|
|
27
|
-
* It integrates with React Hook Form and provides features like validation, labels, helper text, and feedback.
|
|
28
|
-
* @template TFieldValues - The type of the form values
|
|
29
|
-
* @template TName - The type of the field name (must be a key of TFieldValues)
|
|
30
|
-
* @example
|
|
31
|
-
* ```tsx
|
|
32
|
-
* import { NumberField } from '@payfit/unity-components'
|
|
33
|
-
*
|
|
34
|
-
* <NumberField
|
|
35
|
-
* name="age"
|
|
36
|
-
* label="Age"
|
|
37
|
-
* helperText="Enter your age in years"
|
|
38
|
-
* isRequired
|
|
39
|
-
* />
|
|
40
|
-
* ```
|
|
41
|
-
* @template TSchema - The Zod schema type for form validation
|
|
42
|
-
* @param {NumberFieldProps<StandardSchemaV1.InferOutput<TSchema>>} props - The props for the NumberField component
|
|
43
|
-
* @param {ForwardedRef<HTMLInputElement>} ref - Ref forwarded to the underlying input element
|
|
44
|
-
* @returns {JSX.Element} A NumberField component
|
|
45
|
-
* @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
|
|
46
|
-
* @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
|
|
47
|
-
*/
|
|
48
|
-
declare const NumberField: NumberFieldComponent;
|
|
49
|
-
export { NumberField };
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
import { NumberInput as e } from "../number-input/NumberInput.js";
|
|
2
|
-
import { FormHelperText as t } from "../form-field/parts/FormHelperText.js";
|
|
3
|
-
import { FormField as n } from "../form-field/FormField.js";
|
|
4
|
-
import { FormControl as r } from "../form-field/parts/FormControl.js";
|
|
5
|
-
import { FormFeedbackText as i } from "../form-field/parts/FormFeedbackText.js";
|
|
6
|
-
import { FormLabel as a } from "../form-field/parts/FormLabel.js";
|
|
7
|
-
import { forwardRef as o } from "react";
|
|
8
|
-
import { uyTv as s } from "@payfit/unity-themes";
|
|
9
|
-
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
10
|
-
import { useFormContext as u } from "react-hook-form";
|
|
11
|
-
//#region src/components/number-field/NumberField.tsx
|
|
12
|
-
var d = s({ base: "uy:flex uy:flex-col uy:gap-100" });
|
|
13
|
-
function f({ name: o, label: s, defaultValue: f, helperText: p, feedbackText: m, contextualLink: h, isRequired: g, isInvalid: _, isLoading: v, isDisabled: y, isReadOnly: b, requiredVariant: x, onClearButtonPress: S, ...C }, w) {
|
|
14
|
-
let { control: T, setValue: E } = u(), D = {
|
|
15
|
-
isRequired: g,
|
|
16
|
-
isInvalid: _,
|
|
17
|
-
isLoading: v,
|
|
18
|
-
isDisabled: y,
|
|
19
|
-
isReadOnly: b
|
|
20
|
-
}, O = S ?? (() => {
|
|
21
|
-
E(o, NaN);
|
|
22
|
-
});
|
|
23
|
-
return /* @__PURE__ */ l(n, {
|
|
24
|
-
control: T,
|
|
25
|
-
name: o,
|
|
26
|
-
className: d(),
|
|
27
|
-
...D,
|
|
28
|
-
children: [
|
|
29
|
-
/* @__PURE__ */ c(a, {
|
|
30
|
-
requiredVariant: x,
|
|
31
|
-
children: s
|
|
32
|
-
}),
|
|
33
|
-
p && /* @__PURE__ */ c(t, { children: p }),
|
|
34
|
-
/* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(e, {
|
|
35
|
-
ref: w,
|
|
36
|
-
onClearButtonPress: O,
|
|
37
|
-
defaultValue: f,
|
|
38
|
-
...C
|
|
39
|
-
}) }),
|
|
40
|
-
/* @__PURE__ */ c(i, { children: m }),
|
|
41
|
-
h
|
|
42
|
-
]
|
|
43
|
-
});
|
|
44
|
-
}
|
|
45
|
-
var p = o(function(e, t) {
|
|
46
|
-
return f(e, t);
|
|
47
|
-
});
|
|
48
|
-
p.displayName = "NumberField";
|
|
49
|
-
//#endregion
|
|
50
|
-
export { p as NumberField, d as numberField };
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import { PropsWithChildren, ReactNode } from 'react';
|
|
2
|
-
import { FieldPath, FieldValues } from 'react-hook-form';
|
|
3
|
-
import { LabelProps } from '../label/Label.js';
|
|
4
|
-
/**
|
|
5
|
-
* RadioButtonGroupField component provides a form field with radio button group functionality.
|
|
6
|
-
* It integrates with React Hook Form for form state management and validation.
|
|
7
|
-
* @template TFieldValues - The type of the form values
|
|
8
|
-
* @template TName - The type of the field name
|
|
9
|
-
*/
|
|
10
|
-
interface RadioButtonGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
|
|
11
|
-
/** The name of the field, which should match the form schema. */
|
|
12
|
-
name: TName;
|
|
13
|
-
/** The label for the radio button group. */
|
|
14
|
-
label: string;
|
|
15
|
-
/** Helper text to display below the radio button group. */
|
|
16
|
-
helperText?: ReactNode;
|
|
17
|
-
/** Whether the radio button group is disabled. */
|
|
18
|
-
isDisabled?: boolean;
|
|
19
|
-
/** Whether the radio button group is read-only. */
|
|
20
|
-
isReadOnly?: boolean;
|
|
21
|
-
/** Whether the radio button group is invalid. */
|
|
22
|
-
isInvalid?: boolean;
|
|
23
|
-
/** Feedback text to display, typically used for error messages. */
|
|
24
|
-
feedbackText?: ReactNode;
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
* A form field component that wraps a group of radio buttons.
|
|
28
|
-
*
|
|
29
|
-
* This component provides a complete form field with label, helper text, and validation feedback.
|
|
30
|
-
* It integrates with React Hook Form for form state management and validation.
|
|
31
|
-
* @example
|
|
32
|
-
* ```tsx
|
|
33
|
-
* <RadioButtonGroupField
|
|
34
|
-
* name="fruit"
|
|
35
|
-
* label="Choose your favorite fruit"
|
|
36
|
-
* helperText="Select one option"
|
|
37
|
-
* >
|
|
38
|
-
* <RadioButton value="Apple">Apple</RadioButton>
|
|
39
|
-
* <RadioButton value="Banana">Banana</RadioButton>
|
|
40
|
-
* <RadioButton value="Orange">Orange</RadioButton>
|
|
41
|
-
* </RadioButtonGroupField>
|
|
42
|
-
* @remarks
|
|
43
|
-
* [API & Docs](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/forms-radiobuttongroupfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/43631a-radio-group)
|
|
44
|
-
* ```
|
|
45
|
-
* @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
|
|
46
|
-
* @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
|
|
47
|
-
*/
|
|
48
|
-
declare const RadioButtonGroupField: import('react').ForwardRefExoticComponent<RadioButtonGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
|
|
49
|
-
export { RadioButtonGroupField };
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { RadioButtonGroup as e } from "../radio-button-group/RadioButtonGroup.js";
|
|
2
|
-
import { FormHelperText as t } from "../form-field/parts/FormHelperText.js";
|
|
3
|
-
import { FormField as n } from "../form-field/FormField.js";
|
|
4
|
-
import { FormControl as r } from "../form-field/parts/FormControl.js";
|
|
5
|
-
import { FormFeedbackText as i } from "../form-field/parts/FormFeedbackText.js";
|
|
6
|
-
import { FormLabel as a } from "../form-field/parts/FormLabel.js";
|
|
7
|
-
import { forwardRef as o } from "react";
|
|
8
|
-
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
9
|
-
import { useFormContext as l } from "react-hook-form";
|
|
10
|
-
//#region src/components/radio-button-group-field/RadioButtonGroupField.tsx
|
|
11
|
-
var u = o(({ children: o, label: u, isReadOnly: d, isDisabled: f, isInvalid: p, isRequired: m, name: h, requiredVariant: g, feedbackText: _, helperText: v }, y) => {
|
|
12
|
-
let { control: b } = l();
|
|
13
|
-
return /* @__PURE__ */ c(n, {
|
|
14
|
-
control: b,
|
|
15
|
-
name: h,
|
|
16
|
-
isRequired: m,
|
|
17
|
-
isInvalid: p,
|
|
18
|
-
isDisabled: f,
|
|
19
|
-
isReadOnly: d,
|
|
20
|
-
ref: y,
|
|
21
|
-
className: "uy:gap-150",
|
|
22
|
-
children: [/* @__PURE__ */ c("div", {
|
|
23
|
-
className: "uy:flex uy:flex-col uy:gap-50",
|
|
24
|
-
children: [
|
|
25
|
-
/* @__PURE__ */ s(a, {
|
|
26
|
-
requiredVariant: g,
|
|
27
|
-
children: u
|
|
28
|
-
}),
|
|
29
|
-
/* @__PURE__ */ s(t, { children: v }),
|
|
30
|
-
/* @__PURE__ */ s(i, { children: _ })
|
|
31
|
-
]
|
|
32
|
-
}), /* @__PURE__ */ s(r, { children: /* @__PURE__ */ s(e, { children: o }) })]
|
|
33
|
-
});
|
|
34
|
-
});
|
|
35
|
-
u.displayName = "RadioButtonGroupField";
|
|
36
|
-
//#endregion
|
|
37
|
-
export { u as RadioButtonGroupField };
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { StandardSchemaV1 } from '@standard-schema/spec';
|
|
2
|
-
import { ForwardedRef, JSX, 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 { SelectProps } from '../select/Select.js';
|
|
7
|
-
interface SelectFieldProps<TItems extends object, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'>, Omit<SelectProps<TItems>, 'name' | 'value'> {
|
|
8
|
-
/** The name of the field, which should match the form schema. */
|
|
9
|
-
name: TName;
|
|
10
|
-
/** The label for the select field. */
|
|
11
|
-
label: string;
|
|
12
|
-
/** Helper text to display below the text field. */
|
|
13
|
-
helperText?: ReactNode;
|
|
14
|
-
/** Feedback text to display below the text field. */
|
|
15
|
-
feedbackText?: ReactNode;
|
|
16
|
-
}
|
|
17
|
-
type SelectFieldComponent = (<TItems extends object, TSchema extends Schema>(props: SelectFieldProps<TItems, StandardSchemaV1.InferOutput<TSchema>> & {
|
|
18
|
-
ref?: ForwardedRef<HTMLDivElement>;
|
|
19
|
-
}) => JSX.Element) & {
|
|
20
|
-
displayName?: string;
|
|
21
|
-
};
|
|
22
|
-
/**
|
|
23
|
-
* The `SelectField` component renders a list of options to select one, it is fully integrated with the `Form` component.
|
|
24
|
-
* @example
|
|
25
|
-
* ```tsx
|
|
26
|
-
* const schema = z.object({
|
|
27
|
-
* vegetable: z.string()
|
|
28
|
-
* })
|
|
29
|
-
*
|
|
30
|
-
* function MyForm() {
|
|
31
|
-
* const { Form } = useUnityForm(schema)
|
|
32
|
-
*
|
|
33
|
-
* return (
|
|
34
|
-
* <Form action={handleSubmit}>
|
|
35
|
-
* <SelectField<{id?: string, name:string}, typeof schema>
|
|
36
|
-
* name="vegetable"
|
|
37
|
-
* label="Vegetables"
|
|
38
|
-
* >
|
|
39
|
-
* <SelectOption id="Cabbage">Cabbage</SelectOption>
|
|
40
|
-
* <SelectOption id="Broccoli">Broccoli</SelectOption>
|
|
41
|
-
* <SelectOption id="Carrots">Carrots</SelectOption>
|
|
42
|
-
* </SelectField>
|
|
43
|
-
* </Form>
|
|
44
|
-
* )
|
|
45
|
-
* }
|
|
46
|
-
* ```
|
|
47
|
-
* @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.
|
|
48
|
-
* @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
|
|
49
|
-
* @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
|
|
50
|
-
*/
|
|
51
|
-
declare const SelectField: SelectFieldComponent;
|
|
52
|
-
export { SelectField };
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { Select as e } from "../select/Select.js";
|
|
2
|
-
import { FormHelperText as t } from "../form-field/parts/FormHelperText.js";
|
|
3
|
-
import { FormField as n } from "../form-field/FormField.js";
|
|
4
|
-
import { FormControl as r } from "../form-field/parts/FormControl.js";
|
|
5
|
-
import { FormFeedbackText as i } from "../form-field/parts/FormFeedbackText.js";
|
|
6
|
-
import { FormLabel as a } from "../form-field/parts/FormLabel.js";
|
|
7
|
-
import { forwardRef as o } from "react";
|
|
8
|
-
import { uyTv as s } from "@payfit/unity-themes";
|
|
9
|
-
import { jsx as c, jsxs as l } from "react/jsx-runtime";
|
|
10
|
-
import { useFormContext as u } from "react-hook-form";
|
|
11
|
-
//#region src/components/select-field/SelectField.tsx
|
|
12
|
-
var d = s({ base: "uy:flex uy:flex-col uy:gap-100" }), f = ({ children: o, feedbackText: s, helperText: f, isRequired: p, label: m, name: h, requiredVariant: g, isDisabled: _, isInvalid: v, isReadOnly: y, placeholder: b, items: x, ...S }, C) => {
|
|
13
|
-
let { control: w } = u(), T = {
|
|
14
|
-
isRequired: p,
|
|
15
|
-
isInvalid: v,
|
|
16
|
-
isDisabled: _,
|
|
17
|
-
isReadOnly: y
|
|
18
|
-
};
|
|
19
|
-
return /* @__PURE__ */ l(n, {
|
|
20
|
-
control: w,
|
|
21
|
-
name: h,
|
|
22
|
-
className: d(),
|
|
23
|
-
...T,
|
|
24
|
-
children: [
|
|
25
|
-
/* @__PURE__ */ c(a, {
|
|
26
|
-
requiredVariant: g,
|
|
27
|
-
children: m
|
|
28
|
-
}),
|
|
29
|
-
f && /* @__PURE__ */ c(t, { children: f }),
|
|
30
|
-
/* @__PURE__ */ c(r, { children: /* @__PURE__ */ c(e, {
|
|
31
|
-
ref: C,
|
|
32
|
-
placeholder: b,
|
|
33
|
-
items: x,
|
|
34
|
-
...S,
|
|
35
|
-
children: o
|
|
36
|
-
}) }),
|
|
37
|
-
/* @__PURE__ */ c(i, { children: s })
|
|
38
|
-
]
|
|
39
|
-
});
|
|
40
|
-
}, p = o(function(e, t) {
|
|
41
|
-
return f(e, t);
|
|
42
|
-
});
|
|
43
|
-
p.displayName = "SelectField";
|
|
44
|
-
//#endregion
|
|
45
|
-
export { p as SelectField };
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
import { StandardSchemaV1 } from '@standard-schema/spec';
|
|
2
|
-
import { ForwardedRef, JSX, ReactNode } from 'react';
|
|
3
|
-
import { FieldPath, FieldValues } from 'react-hook-form';
|
|
4
|
-
import { Schema } from '../../hooks/use-form.types.js';
|
|
5
|
-
import { SelectableButtonGroupProps } from '../selectable-button-group/SelectableButtonGroup.js';
|
|
6
|
-
import { LabelProps } from '../label/Label.js';
|
|
7
|
-
interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
|
|
8
|
-
/** The name of the field, which should match the form schema. */
|
|
9
|
-
name: TName;
|
|
10
|
-
/** The label for the field. */
|
|
11
|
-
label: string;
|
|
12
|
-
/** The required variant for the label. */
|
|
13
|
-
requiredVariant?: LabelProps['requiredVariant'];
|
|
14
|
-
/** Helper text to display below the field. */
|
|
15
|
-
helperText?: ReactNode;
|
|
16
|
-
/** A contextual link to display below the field. */
|
|
17
|
-
contextualLink?: ReactNode;
|
|
18
|
-
/** Whether the checkbox group is disabled. */
|
|
19
|
-
isDisabled?: boolean;
|
|
20
|
-
/** Whether the checkbox group is invalid. */
|
|
21
|
-
isInvalid?: boolean;
|
|
22
|
-
}
|
|
23
|
-
export type SelectableButtonGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName> & Omit<SelectableButtonGroupProps, 'isDisabled' | 'children'> & {
|
|
24
|
-
/** The options to render as SelectableButton children. */
|
|
25
|
-
children: ReactNode;
|
|
26
|
-
};
|
|
27
|
-
type SelectableButtonGroupFieldComponent = (<TSchema extends Schema>(props: SelectableButtonGroupFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
|
|
28
|
-
ref?: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>;
|
|
29
|
-
}) => JSX.Element) & {
|
|
30
|
-
displayName?: string;
|
|
31
|
-
};
|
|
32
|
-
/**
|
|
33
|
-
* The `SelectableButtonGroupField` component integrates the SelectableButtonGroup with Unity's form system, providing validation, accessibility, and helper/feedback text.
|
|
34
|
-
* @example
|
|
35
|
-
* ```tsx
|
|
36
|
-
* const schema = z.object({
|
|
37
|
-
* choice: z.string()
|
|
38
|
-
* })
|
|
39
|
-
*
|
|
40
|
-
* function MyForm() {
|
|
41
|
-
* const { Form } = useUnityForm(schema)
|
|
42
|
-
*
|
|
43
|
-
* return (
|
|
44
|
-
* <Form action={handleSubmit}>
|
|
45
|
-
* <SelectableButtonGroupField<typeof schema>
|
|
46
|
-
* name="choice"
|
|
47
|
-
* label="Choose an option"
|
|
48
|
-
* >
|
|
49
|
-
* <SelectableButton value="a">A</SelectableButton>
|
|
50
|
-
* <SelectableButton value="b">B</SelectableButton>
|
|
51
|
-
* </SelectableButtonGroupField>
|
|
52
|
-
* </Form>
|
|
53
|
-
* )
|
|
54
|
-
* }
|
|
55
|
-
* ```
|
|
56
|
-
* @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.
|
|
57
|
-
* @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
|
|
58
|
-
* @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
|
|
59
|
-
*/
|
|
60
|
-
declare const SelectableButtonGroupField: SelectableButtonGroupFieldComponent;
|
|
61
|
-
export { SelectableButtonGroupField };
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { SelectableButtonGroup as e } from "../selectable-button-group/SelectableButtonGroup.js";
|
|
2
|
-
import { FormHelperText as t } from "../form-field/parts/FormHelperText.js";
|
|
3
|
-
import { FormField as n } from "../form-field/FormField.js";
|
|
4
|
-
import { FormControl as r } from "../form-field/parts/FormControl.js";
|
|
5
|
-
import { FormFeedbackText as i } from "../form-field/parts/FormFeedbackText.js";
|
|
6
|
-
import { FormLabel as a } from "../form-field/parts/FormLabel.js";
|
|
7
|
-
import { forwardRef as o } from "react";
|
|
8
|
-
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
9
|
-
import { useFormContext as l } from "react-hook-form";
|
|
10
|
-
//#region src/components/selectable-button-group-field/SelectableButtonGroupField.tsx
|
|
11
|
-
function u({ name: o, label: u, helperText: d, contextualLink: f, isDisabled: p, requiredVariant: m, children: h, ...g }, _) {
|
|
12
|
-
let { control: v, watch: y } = l(), b = y(o);
|
|
13
|
-
return /* @__PURE__ */ c(n, {
|
|
14
|
-
control: v,
|
|
15
|
-
name: o,
|
|
16
|
-
ref: _,
|
|
17
|
-
children: [
|
|
18
|
-
/* @__PURE__ */ s(a, {
|
|
19
|
-
requiredVariant: m,
|
|
20
|
-
children: u
|
|
21
|
-
}),
|
|
22
|
-
d && /* @__PURE__ */ s(t, { children: d }),
|
|
23
|
-
/* @__PURE__ */ s(r, {
|
|
24
|
-
className: "uy:my-50",
|
|
25
|
-
children: /* @__PURE__ */ s(e, {
|
|
26
|
-
value: b,
|
|
27
|
-
isDisabled: p,
|
|
28
|
-
...g,
|
|
29
|
-
children: h
|
|
30
|
-
})
|
|
31
|
-
}),
|
|
32
|
-
/* @__PURE__ */ s(i, {}),
|
|
33
|
-
f
|
|
34
|
-
]
|
|
35
|
-
});
|
|
36
|
-
}
|
|
37
|
-
var d = o(function(e, t) {
|
|
38
|
-
return u(e, t);
|
|
39
|
-
});
|
|
40
|
-
d.displayName = "SelectableButtonGroupField";
|
|
41
|
-
//#endregion
|
|
42
|
-
export { d as SelectableButtonGroupField };
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { PropsWithChildren, ReactNode } from 'react';
|
|
2
|
-
import { FieldPath, FieldValues } from 'react-hook-form';
|
|
3
|
-
import { LabelProps } from '../label/Label.js';
|
|
4
|
-
export interface SelectableCardCheckboxGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
|
|
5
|
-
/** The name of the field, which should match the form schema. */
|
|
6
|
-
name: TName;
|
|
7
|
-
/** The label for the radio button group. */
|
|
8
|
-
label: string;
|
|
9
|
-
/** Helper text to display below the radio button group. */
|
|
10
|
-
helperText?: ReactNode;
|
|
11
|
-
/** Feedback text to display, typically used for error messages. */
|
|
12
|
-
feedbackText?: ReactNode;
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* The `SelectableCardCheckboxGroupField` component renders a group of selectable card checkboxes within a form field.
|
|
16
|
-
* Use it to collect multiple selections from users in a visually appealing and accessible manner.
|
|
17
|
-
* @example
|
|
18
|
-
* ```tsx
|
|
19
|
-
* import { SelectableCardCheckboxGroupField, SelectableCardCheckbox } from '@payfit/unity-components'
|
|
20
|
-
*
|
|
21
|
-
* <SelectableCardCheckboxGroupField name="options" label="Choose options">
|
|
22
|
-
* <SelectableCardCheckbox value="option1">Option 1</SelectableCardCheckbox>
|
|
23
|
-
* <SelectableCardCheckbox value="option2">Option 2</SelectableCardCheckbox>
|
|
24
|
-
* <SelectableCardCheckbox value="option3">Option 3</SelectableCardCheckbox>
|
|
25
|
-
* </SelectableCardCheckboxGroupField>
|
|
26
|
-
* ```
|
|
27
|
-
* @see {@link SelectableCardCheckboxGroupFieldProps} for all available props
|
|
28
|
-
* @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/forms-selectablecard-selectablecardradiogroupfield--docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
|
|
29
|
-
* @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
|
|
30
|
-
* @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
|
|
31
|
-
*/
|
|
32
|
-
declare const SelectableCardCheckboxGroupField: import('react').ForwardRefExoticComponent<SelectableCardCheckboxGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
|
|
33
|
-
export { SelectableCardCheckboxGroupField };
|
package/dist/esm/components/selectable-card-checkbox-group-field/SelectableCardCheckboxGroupField.js
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { SelectableCardCheckboxGroup as e } from "../selectable-card/selectable-card-checkbox-group/SelectableCardCheckboxGroup.js";
|
|
2
|
-
import { FormHelperText as t } from "../form-field/parts/FormHelperText.js";
|
|
3
|
-
import { FormField as n } from "../form-field/FormField.js";
|
|
4
|
-
import { FormControl as r } from "../form-field/parts/FormControl.js";
|
|
5
|
-
import { FormFeedbackText as i } from "../form-field/parts/FormFeedbackText.js";
|
|
6
|
-
import { FormLabel as a } from "../form-field/parts/FormLabel.js";
|
|
7
|
-
import { forwardRef as o } from "react";
|
|
8
|
-
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
9
|
-
import { useFormContext as l } from "react-hook-form";
|
|
10
|
-
//#region src/components/selectable-card-checkbox-group-field/SelectableCardCheckboxGroupField.tsx
|
|
11
|
-
var u = o(({ children: o, name: u, isRequired: d, requiredVariant: f, label: p, helperText: m, feedbackText: h, ...g }, _) => {
|
|
12
|
-
let { control: v } = l();
|
|
13
|
-
return /* @__PURE__ */ c(n, {
|
|
14
|
-
isRequired: d,
|
|
15
|
-
control: v,
|
|
16
|
-
name: u,
|
|
17
|
-
className: "uy:gap-150",
|
|
18
|
-
children: [
|
|
19
|
-
/* @__PURE__ */ c("div", {
|
|
20
|
-
className: "uy:flex-col uy:gap-50",
|
|
21
|
-
children: [/* @__PURE__ */ s(a, {
|
|
22
|
-
requiredVariant: f,
|
|
23
|
-
children: p
|
|
24
|
-
}), /* @__PURE__ */ s(t, { children: m })]
|
|
25
|
-
}),
|
|
26
|
-
/* @__PURE__ */ s(r, { children: /* @__PURE__ */ s(e, {
|
|
27
|
-
ref: _,
|
|
28
|
-
name: u,
|
|
29
|
-
...g,
|
|
30
|
-
children: o
|
|
31
|
-
}) }),
|
|
32
|
-
/* @__PURE__ */ s(i, { children: h })
|
|
33
|
-
]
|
|
34
|
-
});
|
|
35
|
-
});
|
|
36
|
-
u.displayName = "SelectableCardCheckboxGroupField";
|
|
37
|
-
//#endregion
|
|
38
|
-
export { u as SelectableCardCheckboxGroupField };
|
package/dist/esm/components/selectable-card-radio-group-field/SelectableCardRadioGroupField.d.ts
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import { PropsWithChildren, ReactNode } from 'react';
|
|
2
|
-
import { FieldPath, FieldValues } from 'react-hook-form';
|
|
3
|
-
import { LabelProps } from '../label/Label.js';
|
|
4
|
-
export interface SelectableCardRadioGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
|
|
5
|
-
/** The name of the field, which should match the form schema. */
|
|
6
|
-
name: TName;
|
|
7
|
-
/** The label for the radio button group. */
|
|
8
|
-
label: string;
|
|
9
|
-
/** Helper text to display below the radio button group. */
|
|
10
|
-
helperText?: ReactNode;
|
|
11
|
-
/** Feedback text to display, typically used for error messages. */
|
|
12
|
-
feedbackText?: ReactNode;
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* The `SelectableCardRadioGroupField` component renders a group of mutually exclusive selectable card options within a form field.
|
|
16
|
-
* Use it to collect a single selection from users in a visually appealing and accessible manner.
|
|
17
|
-
* @example
|
|
18
|
-
* ```tsx
|
|
19
|
-
* import { SelectableCardRadioGroupField, SelectableCardRadio } from '@payfit/unity-components'
|
|
20
|
-
*
|
|
21
|
-
* <SelectableCardRadioGroupField name="option" label="Choose an option">
|
|
22
|
-
* <SelectableCardRadio value="option1">Option 1</SelectableCardRadio>
|
|
23
|
-
* <SelectableCardRadio value="option2">Option 2</SelectableCardRadio>
|
|
24
|
-
* <SelectableCardRadio value="option3">Option 3</SelectableCardRadio>
|
|
25
|
-
* </SelectableCardRadioGroupField>
|
|
26
|
-
* ```
|
|
27
|
-
* @see {@link SelectableCardRadioGroupFieldProps} for all available props
|
|
28
|
-
* @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/forms-selectablecard-selectablecardcheckboxgroupfield--docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
|
|
29
|
-
* @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
|
|
30
|
-
* @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
|
|
31
|
-
*/
|
|
32
|
-
declare const SelectableCardRadioGroupField: import('react').ForwardRefExoticComponent<SelectableCardRadioGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
|
|
33
|
-
export { SelectableCardRadioGroupField };
|
package/dist/esm/components/selectable-card-radio-group-field/SelectableCardRadioGroupField.js
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { SelectableCardRadioGroup as e } from "../selectable-card/selectable-card-radio-group/SelectableCardRadioGroup.js";
|
|
2
|
-
import { FormHelperText as t } from "../form-field/parts/FormHelperText.js";
|
|
3
|
-
import { FormField as n } from "../form-field/FormField.js";
|
|
4
|
-
import { FormControl as r } from "../form-field/parts/FormControl.js";
|
|
5
|
-
import { FormFeedbackText as i } from "../form-field/parts/FormFeedbackText.js";
|
|
6
|
-
import { FormLabel as a } from "../form-field/parts/FormLabel.js";
|
|
7
|
-
import { forwardRef as o } from "react";
|
|
8
|
-
import { jsx as s, jsxs as c } from "react/jsx-runtime";
|
|
9
|
-
import { useFormContext as l } from "react-hook-form";
|
|
10
|
-
//#region src/components/selectable-card-radio-group-field/SelectableCardRadioGroupField.tsx
|
|
11
|
-
var u = o(({ children: o, name: u, isRequired: d, requiredVariant: f, label: p, helperText: m, feedbackText: h, ...g }, _) => {
|
|
12
|
-
let { control: v } = l();
|
|
13
|
-
return /* @__PURE__ */ c(n, {
|
|
14
|
-
isRequired: d,
|
|
15
|
-
control: v,
|
|
16
|
-
name: u,
|
|
17
|
-
className: "uy:gap-150",
|
|
18
|
-
children: [
|
|
19
|
-
/* @__PURE__ */ c("div", {
|
|
20
|
-
className: "uy:flex-col uy:gap-50",
|
|
21
|
-
children: [/* @__PURE__ */ s(a, {
|
|
22
|
-
requiredVariant: f,
|
|
23
|
-
children: p
|
|
24
|
-
}), /* @__PURE__ */ s(t, { children: m })]
|
|
25
|
-
}),
|
|
26
|
-
/* @__PURE__ */ s(r, { children: /* @__PURE__ */ s(e, {
|
|
27
|
-
ref: _,
|
|
28
|
-
name: u,
|
|
29
|
-
...g,
|
|
30
|
-
children: o
|
|
31
|
-
}) }),
|
|
32
|
-
/* @__PURE__ */ s(i, {})
|
|
33
|
-
]
|
|
34
|
-
});
|
|
35
|
-
});
|
|
36
|
-
u.displayName = "SelectableCardRadioGroupField";
|
|
37
|
-
//#endregion
|
|
38
|
-
export { u as SelectableCardRadioGroupField };
|