@payfit/unity-components 0.0.0-alpha.11

package/dist/cjs/components/flex/Flex.variants.d.cts

@@ -0,0 +1,484 @@
+export declare const flex: import('tailwind-variants').TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+    direction: {
+        row: string;
+        col: string;
+    };
+    isReversed: {
+        true: null;
+        false: null;
+    };
+    wrap: {
+        wrap: string;
+        'wrap-reverse': string;
+        nowrap: string;
+    };
+    gap: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    gapX: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    gapY: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    justify: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+    };
+    align: {
+        start: string;
+        end: string;
+        center: string;
+        baseline: string;
+        stretch: string;
+    };
+    alignContent: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+    };
+}, undefined, "uy-flex", {
+    responsiveVariants: ("sm" | "md" | "lg" | "xl")[];
+}, {
+    inline: {
+        true: string;
+        false: string;
+    };
+    direction: {
+        row: string;
+        col: string;
+    };
+    isReversed: {
+        true: null;
+        false: null;
+    };
+    wrap: {
+        wrap: string;
+        'wrap-reverse': string;
+        nowrap: string;
+    };
+    gap: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    gapX: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    gapY: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    justify: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+    };
+    align: {
+        start: string;
+        end: string;
+        center: string;
+        baseline: string;
+        stretch: string;
+    };
+    alignContent: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+    direction: {
+        row: string;
+        col: string;
+    };
+    isReversed: {
+        true: null;
+        false: null;
+    };
+    wrap: {
+        wrap: string;
+        'wrap-reverse': string;
+        nowrap: string;
+    };
+    gap: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    gapX: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    gapY: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    justify: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+    };
+    align: {
+        start: string;
+        end: string;
+        center: string;
+        baseline: string;
+        stretch: string;
+    };
+    alignContent: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+    };
+}, undefined, "uy-flex", {
+    responsiveVariants: ("sm" | "md" | "lg" | "xl")[];
+}, unknown, unknown, undefined>>;
+export declare const flexItem: import('tailwind-variants').TVReturnType<{
+    grow: {
+        0: string;
+        1: string;
+    };
+    shrink: {
+        0: string;
+        1: string;
+    };
+    basis: {
+        auto: string;
+        min: string;
+        max: string;
+        fit: string;
+        full: string;
+        '1/2': string;
+        '1/3': string;
+        '2/3': string;
+        '1/4': string;
+        '2/4': string;
+        '3/4': string;
+        '1/6': string;
+        '2/6': string;
+        '3/6': string;
+        '4/6': string;
+        '5/6': string;
+        '1/12': string;
+        '2/12': string;
+        '3/12': string;
+        '4/12': string;
+        '5/12': string;
+        '6/12': string;
+        '7/12': string;
+        '8/12': string;
+        '9/12': string;
+        '10/12': string;
+        '11/12': string;
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    order: {
+        first: string;
+        last: string;
+        none: string;
+    };
+    self: {
+        auto: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+        baseline: string;
+    };
+}, undefined, undefined, {
+    responsiveVariants: ("sm" | "md" | "lg" | "xl")[];
+}, {
+    grow: {
+        0: string;
+        1: string;
+    };
+    shrink: {
+        0: string;
+        1: string;
+    };
+    basis: {
+        auto: string;
+        min: string;
+        max: string;
+        fit: string;
+        full: string;
+        '1/2': string;
+        '1/3': string;
+        '2/3': string;
+        '1/4': string;
+        '2/4': string;
+        '3/4': string;
+        '1/6': string;
+        '2/6': string;
+        '3/6': string;
+        '4/6': string;
+        '5/6': string;
+        '1/12': string;
+        '2/12': string;
+        '3/12': string;
+        '4/12': string;
+        '5/12': string;
+        '6/12': string;
+        '7/12': string;
+        '8/12': string;
+        '9/12': string;
+        '10/12': string;
+        '11/12': string;
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    order: {
+        first: string;
+        last: string;
+        none: string;
+    };
+    self: {
+        auto: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+        baseline: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    grow: {
+        0: string;
+        1: string;
+    };
+    shrink: {
+        0: string;
+        1: string;
+    };
+    basis: {
+        auto: string;
+        min: string;
+        max: string;
+        fit: string;
+        full: string;
+        '1/2': string;
+        '1/3': string;
+        '2/3': string;
+        '1/4': string;
+        '2/4': string;
+        '3/4': string;
+        '1/6': string;
+        '2/6': string;
+        '3/6': string;
+        '4/6': string;
+        '5/6': string;
+        '1/12': string;
+        '2/12': string;
+        '3/12': string;
+        '4/12': string;
+        '5/12': string;
+        '6/12': string;
+        '7/12': string;
+        '8/12': string;
+        '9/12': string;
+        '10/12': string;
+        '11/12': string;
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    order: {
+        first: string;
+        last: string;
+        none: string;
+    };
+    self: {
+        auto: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+        baseline: string;
+    };
+}, undefined, undefined, {
+    responsiveVariants: ("sm" | "md" | "lg" | "xl")[];
+}, unknown, unknown, undefined>>;

package/dist/cjs/components/flex/FlexItem.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const x=require("react/jsx-runtime"),I=require("react"),d=require("./Flex.variants.cjs"),e=I.forwardRef(({asElement:t="div",children:s,className:r,grow:a,shrink:c,basis:l,order:n,self:m,...o},i)=>{const u=d.flexItem({grow:a,shrink:c,basis:l,order:n,self:m,className:r});return x.jsx(t,{ref:i,className:u,...o,children:s})});e.displayName="FlexItem";const f=e;exports.FlexItem=e;exports.StackItem=f;

package/dist/cjs/components/flex/FlexItem.d.cts

@@ -0,0 +1,40 @@
+import { VariantProps } from 'tailwind-variants';
+import { flexItem } from './Flex.variants.cjs';
+export type FlexItemVariantProps = VariantProps<typeof flexItem>;
+type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';
+export interface FlexItemProps {
+    /** Render the flex item as a specific HTML element */
+    asElement?: ElementType;
+    /** Control if the item grows to fill available space. Use 1 to allow growing, 0 to prevent it */
+    grow?: FlexItemVariantProps['grow'];
+    /** Control if the item shrinks when space is limited. Use 1 to allow shrinking, 0 to prevent it */
+    shrink?: FlexItemVariantProps['shrink'];
+    /** Set the initial size of the item before remaining space is distributed. Use pixel values or fractions */
+    basis?: FlexItemVariantProps['basis'];
+    /** Change the item's position in the flex container. Use 'first', 'last', or 'none' */
+    order?: FlexItemVariantProps['order'];
+    /** Override the container's align-items value for this item. Use 'start', 'center', 'end', 'stretch', or 'baseline' */
+    self?: FlexItemVariantProps['self'];
+    /** Add custom classes to the flex item */
+    className?: string;
+    /** The content of the flex item */
+    children?: React.ReactNode;
+}
+/**
+ * Use FlexItem to control how individual items behave within a Flex container.
+ * This component provides props to manage growing, shrinking, sizing, and positioning of flex items.
+ * @example
+ * ```tsx
+ * <Flex gap="100">
+ *   <FlexItem grow={1}>
+ *     <div>Flexible content</div>
+ *   </FlexItem>
+ *   <FlexItem basis="200" shrink={0}>
+ *     <div>Fixed width content</div>
+ *   </FlexItem>
+ * </Flex>
+ * ```
+ */
+export declare const FlexItem: import('react').ForwardRefExoticComponent<FlexItemProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexItemProps> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const StackItem: import('react').ForwardRefExoticComponent<FlexItemProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexItemProps> & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/cjs/components/form/Form.cjs

@@ -0,0 +1 @@
+"use strict";var p=Object.create;var d=Object.defineProperty;var x=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,S=Object.prototype.hasOwnProperty;var D=(e,t,r,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of q(t))!S.call(e,s)&&s!==r&&d(e,s,{get:()=>t[s],enumerable:!(a=x(t,s))||a.enumerable});return e};var O=(e,t,r)=>(r=e!=null?p(k(e)):{},D(t||!e||!e.__esModule?d(r,"default",{value:e,enumerable:!0}):r,e));Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),m=require("react"),P=require("react-aria-components"),R=require("react-hook-form"),T=require("./Form.context.cjs"),w=m.lazy(()=>import("@hookform/devtools").then(e=>({default:e.DevTool}))),u=m.forwardRef(({form:e,schema:t,onSuccess:r,onError:a,action:s,children:j,className:v,onReset:y,debug:f=!1,...h},F)=>{const b=m.useMemo(()=>{const n=e.formState.errors;if(!Object.keys(n).length)return;const i={};return Object.entries(n).forEach(([l,c])=>{c!=null&&c.message&&typeof c.message=="string"&&(i[l]=c.message)}),i},[e.formState.errors]),g=n=>{n.preventDefault(),e.handleSubmit(async i=>{try{await s(i),r==null||r(i)}catch(l){console.error(l),a==null||a(l)}})(n)};return o.jsx(T.UnityFormProvider,{schema:t,form:e,children:o.jsxs(R.FormProvider,{...e,children:[f&&o.jsx(m.Suspense,{fallback:o.jsx(o.Fragment,{}),children:o.jsx(w,{control:e.control})}),o.jsx(P.Form,{...h,ref:F,onSubmit:g,className:v,validationErrors:b,onReset:y,"data-dd-privacy":"mask",children:j})]})})});u.displayName="Form";exports.Form=u;

package/dist/cjs/components/form/Form.context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),r=require("react"),e=r.createContext(null);function u({children:t,schema:o,form:n}){return i.jsx(e.Provider,{value:{schema:o,form:n},children:t})}function s(){const t=r.useContext(e);if(!t)throw new Error("useFormContext must be used within a Form component");return t}exports.UnityFormContext=e;exports.UnityFormProvider=u;exports.useUnityFormProvider=s;

package/dist/cjs/components/form/Form.context.d.cts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+import { UseFormReturn } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.cjs';
+interface UnityFormContextValue<TSchema extends Schema> {
+    schema: TSchema;
+    form: UseFormReturn<ZodInfer<TSchema>>;
+}
+export declare const UnityFormContext: import('react').Context<UnityFormContextValue<Schema> | null>;
+export declare function UnityFormProvider<TSchema extends Schema>({ children, schema, form, }: PropsWithChildren<UnityFormContextValue<TSchema>>): import("react/jsx-runtime").JSX.Element;
+export declare function useUnityFormProvider<TSchema extends Schema>(): UnityFormContextValue<TSchema>;
+export {};

package/dist/cjs/components/form/Form.d.cts

@@ -0,0 +1,33 @@
+import { PropsWithChildren } from 'react';
+import { FormProps as AriaFormProps } from 'react-aria-components';
+import { UseFormReturn } from 'react-hook-form';
+import { ZodError, infer as ZodInfer } from 'zod';
+import { Schema, TFormValues } from '../../hooks/use-form.types.cjs';
+type AllowedAriaFormProps = Omit<AriaFormProps, 'action' | 'onSubmit' | 'method' | 'target' | 'validationErrors' | 'onInvalid'>;
+export interface FormProps<TSchema extends Schema, TForm extends TFormValues = ZodInfer<TSchema>> extends PropsWithChildren<AllowedAriaFormProps> {
+    /** The form instance from react-hook-form */
+    form: UseFormReturn<TForm>;
+    /** The schema to validate the form data */
+    schema: TSchema;
+    /** The operations to execute when the form is submitted and the input data is valid */
+    action: (values: TForm) => Promise<void> | void;
+    /** Handle successful form submission (when `action` callback resolves its promise or does not throw an error) */
+    onSuccess?: (data: TForm) => void;
+    /** Handle form submission errors (when `action` callback rejects its promise or throws an error) */
+    onError?: (error: ZodError | Error) => void;
+    /** Enable or disable `react-hook-form`'s devtools (only in development mode) */
+    debug?: boolean;
+}
+/**
+ * The `Form` component provides full state management for complex forms with validation, by following a schema-based approach.
+ *
+ * Use this component to create complex form with validation and error handling, alongside the [`FormField` component](/?path=/docs/forms-formfield--docs).
+ *
+ * Under the hood, the `Form` component is a wrapper around the `react-hook-form` library, which takes care of form state management. Additionally, it uses the `zod` library to define a schema used for form data validation. To use the `Form` component correctly, **you must install Zod and react-hook-form** as dependencies in your project:
+ *
+ * ```bash
+ * $ yarn add zod react-hook-form
+ * ```
+ */
+declare const Form: import('react').ForwardRefExoticComponent<FormProps<Schema, TFormValues> & import('react').RefAttributes<HTMLFormElement>>;
+export { Form };

package/dist/cjs/components/form-field/FormField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),o=require("react"),L=require("react-hook-form"),_=require("tailwind-variants"),g=require("../../hooks/use-id.cjs"),P=require("../form/Form.context.cjs"),D=require("./FormField.context.cjs"),I=require("./parts/FormContextualLink.cjs"),M=require("./parts/FormHelperText.cjs"),w=require("./utils/isFieldRequired.cjs"),E=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},c=E(o),N=_.tv({slots:{base:"uy-flex uy-flex-col uy-gap-100"}}),m=o.forwardRef(({children:e,control:f,name:r,isInvalid:p,isLoading:F,isReadOnly:x,className:q,isRequired:h,isDisabled:y},b)=>{const C=g(),{schema:i}=P.useUnityFormProvider(),{fieldState:{invalid:R},formState:s}=L.useController({name:r,control:f}),v=o.useMemo(()=>w.isFieldRequired(i,r),[i,r]),{hasHelperText:j,hasContextualLink:k}=o.useMemo(()=>{let n=!1,l=!1;const a=T=>{c.default.Children.forEach(T,u=>{if(!c.default.isValidElement(u))return;const t=u;t.type===M.FormHelperText?n=!0:t.type===I.FormContextualLink&&(l=!0),t.props&&typeof t.props=="object"&&"children"in t.props&&a(t.props.children)})};return a(e),{hasHelperText:n,hasContextualLink:l}},[e]),H={name:r,isLoading:F,isReadOnly:x,hasHelperText:j,hasContextualLink:k,id:C,isRequired:h??v,isInvalid:p??R,isDisabled:y??(s.isSubmitting||s.disabled)},{base:S}=N();return d.jsx("div",{ref:b,className:S({className:q}),children:d.jsx(D.FormFieldProvider,{...H,children:e})})});m.displayName="FormField";exports.FormField=m;

package/dist/cjs/components/form-field/FormField.context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const v=require("react/jsx-runtime"),F=require("react"),c=require("react-hook-form"),m=F.createContext({id:"",name:""});function C({children:o,id:i,name:t,isRequired:a,isInvalid:r,isLoading:e,isReadOnly:n,isDisabled:d,hasHelperText:s,hasContextualLink:l}){return v.jsx(m.Provider,{value:{id:i,name:t,isRequired:a,isInvalid:r,isLoading:e,isReadOnly:n,isDisabled:d,hasHelperText:s,hasContextualLink:l},children:o})}function I(){const o=F.useContext(m),{getFieldState:i}=c.useFormContext(),t=c.useFormState({name:o.name}),{invalid:a,...r}=i(o.name,t),{id:e,isRequired:n,isInvalid:d,isLoading:s,isReadOnly:l,isDisabled:x,hasHelperText:f,hasContextualLink:u}=o;if(!o)throw new Error("useFormField should be used within <FormField> component");return{...{id:e,name:o.name,hasHelperText:f,hasContextualLink:u,formLabelId:`${e}-form-field-label`,formItemId:`${e}-form-item`,formDescriptionId:f?`${e}-form-field-description`:void 0,formMessageId:`${e}-form-field-feedback-text`,formContextualLinkId:u?`${e}-form-field-contextual-link`:void 0},fieldState:{...r,isRequired:n,isInvalid:d,isLoading:s,isReadOnly:l,isDisabled:x},formState:t}}exports.FormFieldContext=m;exports.FormFieldProvider=C;exports.useFormField=I;

package/dist/cjs/components/form-field/FormField.context.d.cts

@@ -0,0 +1,38 @@
+import { PropsWithChildren } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+interface FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
+    id: string;
+    name: TName;
+    isRequired?: boolean;
+    isInvalid?: boolean;
+    isLoading?: boolean;
+    isReadOnly?: boolean;
+    isDisabled?: boolean;
+    hasHelperText?: boolean;
+    hasContextualLink?: boolean;
+}
+export declare const FormFieldContext: import('react').Context<FormFieldContextValue<FieldValues, string>>;
+export declare function FormFieldProvider({ children, id, name, isRequired, isInvalid, isLoading, isReadOnly, isDisabled, hasHelperText, hasContextualLink, }: PropsWithChildren<FormFieldContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useFormField(): {
+    fieldState: {
+        isRequired: boolean | undefined;
+        isInvalid: boolean | undefined;
+        isLoading: boolean | undefined;
+        isReadOnly: boolean | undefined;
+        isDisabled: boolean | undefined;
+        isDirty: boolean;
+        isTouched: boolean;
+        error?: import('react-hook-form').FieldError;
+    };
+    formState: import('react-hook-form').UseFormStateReturn<FieldValues>;
+    id: string;
+    name: string;
+    hasHelperText: boolean | undefined;
+    hasContextualLink: boolean | undefined;
+    formLabelId: string;
+    formItemId: string;
+    formDescriptionId: string | undefined;
+    formMessageId: string;
+    formContextualLinkId: string | undefined;
+};
+export {};