@payfit/unity-components 0.0.0-alpha.11 → 0.0.0-alpha.6

package/dist/esm/components/flex/Flex.js

@@ -1,42 +0,0 @@
-import { jsx as N } from "react/jsx-runtime";
-import { forwardRef as j } from "react";
-import { flex as k } from "./Flex.variants.js";
-const e = j(
-  ({
-    asElement: o = "div",
-    children: r,
-    className: t,
-    inline: s,
-    direction: m,
-    isReversed: a,
-    wrap: l,
-    gap: f,
-    gapX: c,
-    gapY: i,
-    justify: n,
-    align: p,
-    alignContent: x,
-    ...d
-  }, y) => {
-    const F = k({
-      inline: s,
-      direction: m,
-      isReversed: a,
-      wrap: l,
-      gap: f,
-      gapX: c,
-      gapY: i,
-      justify: n,
-      align: p,
-      alignContent: x,
-      className: t
-    });
-    return /* @__PURE__ */ N(o, { ref: y, className: F, ...d, children: r });
-  }
-);
-e.displayName = "Flex";
-const E = e;
-export {
-  e as Flex,
-  E as Stack
-};

package/dist/esm/components/flex/FlexItem.js

@@ -1,32 +0,0 @@
-import { jsx as p } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import { flexItem as I } from "./Flex.variants.js";
-const e = x(
-  ({
-    asElement: t = "div",
-    children: m,
-    className: o,
-    grow: r,
-    shrink: s,
-    basis: a,
-    order: l,
-    self: f,
-    ...c
-  }, i) => {
-    const n = I({
-      grow: r,
-      shrink: s,
-      basis: a,
-      order: l,
-      self: f,
-      className: o
-    });
-    return /* @__PURE__ */ p(t, { ref: i, className: n, ...c, children: m });
-  }
-);
-e.displayName = "FlexItem";
-const N = e;
-export {
-  e as FlexItem,
-  N as StackItem
-};

package/dist/esm/components/form/Form.context.d.ts

@@ -1,12 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { UseFormReturn } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
-import { Schema } from '../../hooks/use-form.types.js';
-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/esm/components/form/Form.context.js

@@ -1,30 +0,0 @@
-import { jsx as n } from "react/jsx-runtime";
-import { createContext as i, useContext as m } from "react";
-const o = i(null);
-function c({
-  children: t,
-  schema: r,
-  form: e
-}) {
-  return /* @__PURE__ */ n(
-    o.Provider,
-    {
-      value: {
-        schema: r,
-        form: e
-      },
-      children: t
-    }
-  );
-}
-function x() {
-  const t = m(o);
-  if (!t)
-    throw new Error("useFormContext must be used within a Form component");
-  return t;
-}
-export {
-  o as UnityFormContext,
-  c as UnityFormProvider,
-  x as useUnityFormProvider
-};

package/dist/esm/components/form/Form.js

@@ -1,58 +0,0 @@
-import { jsx as a, jsxs as b, Fragment as g } from "react/jsx-runtime";
-import { forwardRef as u, useMemo as j, Suspense as k, lazy as x } from "react";
-import { Form as D } from "react-aria-components";
-import { FormProvider as w } from "react-hook-form";
-import { UnityFormProvider as O } from "./Form.context.js";
-const P = x(
-  () => import("@hookform/devtools").then((t) => ({ default: t.DevTool }))
-), S = u(
-  ({
-    form: t,
-    schema: n,
-    onSuccess: m,
-    onError: s,
-    action: l,
-    children: d,
-    className: f,
-    onReset: c,
-    debug: p = !1,
-    ...h
-  }, v) => {
-    const y = j(() => {
-      const e = t.formState.errors;
-      if (!Object.keys(e).length) return;
-      const o = {};
-      return Object.entries(e).forEach(([i, r]) => {
-        r != null && r.message && typeof r.message == "string" && (o[i] = r.message);
-      }), o;
-    }, [t.formState.errors]), F = (e) => {
-      e.preventDefault(), t.handleSubmit(async (o) => {
-        try {
-          await l(o), m == null || m(o);
-        } catch (i) {
-          console.error(i), s == null || s(i);
-        }
-      })(e);
-    };
-    return /* @__PURE__ */ a(O, { schema: n, form: t, children: /* @__PURE__ */ b(w, { ...t, children: [
-      p && /* @__PURE__ */ a(k, { fallback: /* @__PURE__ */ a(g, {}), children: /* @__PURE__ */ a(P, { control: t.control }) }),
-      /* @__PURE__ */ a(
-        D,
-        {
-          ...h,
-          ref: v,
-          onSubmit: F,
-          className: f,
-          validationErrors: y,
-          onReset: c,
-          "data-dd-privacy": "mask",
-          children: d
-        }
-      )
-    ] }) });
-  }
-);
-S.displayName = "Form";
-export {
-  S as Form
-};

package/dist/esm/components/form-field/FormField.context.d.ts

@@ -1,38 +0,0 @@
-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 {};

package/dist/esm/components/form-field/FormField.context.js

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

package/dist/esm/components/form-field/FormField.d.ts

@@ -1,61 +0,0 @@
-import { default as React } from 'react';
-import { Control, FieldPath, FieldValues } from 'react-hook-form';
-export interface FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends React.PropsWithChildren<object> {
-    /** The form control from react-hook-form */
-    control: Control<TFieldValues>;
-    /** The name of the field in the form */
-    name: TName;
-    /** Whether the field is required */
-    isRequired?: boolean;
-    /** Whether the field is in an invalid state */
-    isInvalid?: boolean;
-    /** Whether the field is in a loading state */
-    isLoading?: boolean;
-    /** Whether the field is disabled */
-    isDisabled?: boolean;
-    /** Whether the field is read-only */
-    isReadOnly?: boolean;
-    /** Additional class name */
-    className?: string;
-}
-/**
- * The `FormField` component represents a single field in a Unity form. It provides a set of features to manage the state of the field and its interactions, as well as a deep integration with its parent `Form` component.
- * Use this component to create a field in a form with a schema-based approach. It will only work if it is a child of a [`Form` component](/?path=/docs/forms-formfield--docs).
- * @param {FormFieldProps} props - component props to control the field name, and the reference to its form control
- * @see {@link FormFieldProps} for all available props
- * @example
- * ```tsx
- * import { Button, Input, FormLabel, FormControl, FormHelperText, FormFeedbackText } from '@payfit/unity-components'
- * import { useUnityForm } from '@payfit/unity-components'
- * import { z } from 'zod'
- *
- * const loginSchema = z.object({
- *   email: z.string().email('Invalid email address'),
- *   password: z.string().min(8, 'Password must be at least 8 characters'),
- * })
- *
- * const MyForm = () => {
- *   const { Form, FormField } = useUnityForm(loginSchema)
- *
- *   const submitForm = (values: z.infer<typeof loginSchema>) => {
- *     console.log(values)
- *   }
- *
- *   return (
- *     <Form action={submitForm}>
- *       <FormField name="email">
- *         <FormLabel>Email</FormLabel>
- *         <FormHelperText>Enter your primary email address</FormHelperText>
- *         <FormControl>
- *          <Input type="email"/>
- *         </FormControl>
- *         <FormFeedbackText/>
- *       </FormField>
- *    </Form>
- *   )
- * }
- * ```
- * @note Use this component directly from the `useUnityForm` hook to have type-safety based on the form schema.
- */
-declare const FormField: React.ForwardRefExoticComponent<FormFieldProps<FieldValues, string> & React.RefAttributes<HTMLDivElement>>;
-export { FormField };

package/dist/esm/components/form-field/FormField.js

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

package/dist/esm/components/form-field/parts/FormContextualLink.js

@@ -1,37 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { Button as m } from "react-aria-components";
-import { Link as d } from "../../link/Link.js";
-import { Text as e } from "../../text/Text.js";
-import { useFormField as u } from "../FormField.context.js";
-const p = l(({ children: o, href: a, onPress: n }, r) => {
-  const { formContextualLinkId: i } = u();
-  return a ? /* @__PURE__ */ t(
-    d,
-    {
-      id: i,
-      color: "secondary",
-      variant: "standalone",
-      "data-unity-slot": "contextual-link",
-      href: a,
-      ref: r,
-      "data-dd-privacy": "allow",
-      children: /* @__PURE__ */ t(e, { variant: "actionSmall", children: o })
-    }
-  ) : /* @__PURE__ */ t(
-    m,
-    {
-      id: i,
-      onPress: n,
-      "data-unity-slot": "contextual-link",
-      className: "uy-typography-body-small uy-w-fit",
-      ref: r,
-      "data-dd-privacy": "allow",
-      children: o
-    }
-  );
-});
-p.displayName = "FormContextualLink";
-export {
-  p as FormContextualLink
-};

package/dist/esm/components/form-field/parts/FormControl.d.ts

@@ -1,30 +0,0 @@
-import { Slot } from '@radix-ui/react-slot';
-export type FormControlProps = React.ComponentProps<typeof Slot>;
-/**
- * FormControl is a wrapper component that connects input components to form state within a FormField.
- * It handles accessibility concerns like proper ARIA attributes and focus states.
- *
- * This component is required when building custom form fields - it must wrap the actual input element
- * to connect it properly to the form state.
- * @example
- * ```tsx
- * import { FormControl, FormField, Input } from '@payfit/unity-components'
- *
- * function MyFormField() {
- *   return (
- *     <FormField name="email">
- *       <FormControl>
- *         <Input />
- *       </FormControl>
- *     </FormField>
- *   )
- * }
- * ```
- * @remarks
- * [API & Docs](https://unity-components.payfit.io/?path=/docs/forms-formfield-formcontrol--docs)
- */
-declare function FormControl({ ...props }: FormControlProps): import("react/jsx-runtime").JSX.Element;
-declare namespace FormControl {
-    var displayName: string;
-}
-export { FormControl };

package/dist/esm/components/form-field/parts/FormControl.js

@@ -1,50 +0,0 @@
-import { jsx as v } from "react/jsx-runtime";
-import { useMemo as y } from "react";
-import { Slot as g } from "@radix-ui/react-slot";
-import { mergeProps as x } from "react-aria";
-import { useFormContext as C, useController as L } from "react-hook-form";
-import { useFormField as D } from "../FormField.context.js";
-function F({ ...t }) {
-  const {
-    name: d,
-    hasHelperText: r,
-    hasContextualLink: n,
-    fieldState: i,
-    formLabelId: l,
-    formItemId: m,
-    formDescriptionId: e,
-    formMessageId: s,
-    formContextualLinkId: f
-  } = D(), { control: c } = C(), {
-    field: { ref: p, ...u }
-  } = L({ name: d, control: c }), { error: a } = i, b = y(() => [
-    a ? s : void 0,
-    r ? e : void 0
-  ].filter(Boolean).join(" "), [a, r, e, s]), o = {
-    isDisabled: i.isDisabled,
-    isInvalid: i.isInvalid,
-    isLoading: i.isLoading,
-    isReadOnly: i.isReadOnly,
-    isRequired: i.isRequired
-  }, I = x(t, o, u);
-  return /* @__PURE__ */ v(
-    g,
-    {
-      ...I,
-      ref: p,
-      "data-slot": "form-control",
-      id: m,
-      "aria-labelledby": l,
-      "aria-describedby": b,
-      "aria-details": n ? f : void 0,
-      "aria-invalid": o.isInvalid,
-      "aria-disabled": o.isDisabled,
-      "aria-required": o.isRequired,
-      "aria-busy": o.isLoading
-    }
-  );
-}
-F.displayName = "FormControl";
-export {
-  F as FormControl
-};

package/dist/esm/components/form-field/parts/FormFeedbackText.js

@@ -1,28 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { Text as l } from "../../text/Text.js";
-import { useFormField as n } from "../FormField.context.js";
-const f = s(
-  ({ children: t, ...o }, a) => {
-    const {
-      fieldState: { error: r, isInvalid: d },
-      formMessageId: m
-    } = n(), e = r ? String(r.message) : t;
-    return !d || !e ? null : /* @__PURE__ */ i(
-      l,
-      {
-        ...o,
-        id: m,
-        ref: a,
-        "data-unity-slot": "form-feedback-text",
-        className: "uy-typography-body-small-strong uy-text-content-form-invalid",
-        "data-dd-privacy": "allow",
-        children: e
-      }
-    );
-  }
-);
-f.displayName = "FormFeedbackText";
-export {
-  f as FormFeedbackText
-};

package/dist/esm/components/form-field/parts/FormHelperText.d.ts

@@ -1,7 +0,0 @@
-/**
- * FormHelperText is a component that displays helper text for a form field.
- */
-declare const FormHelperText: import('react').ForwardRefExoticComponent<{
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLElement>>;
-export { FormHelperText };

package/dist/esm/components/form-field/parts/FormHelperText.js

@@ -1,26 +0,0 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { Text as m } from "../../text/Text.js";
-import { useFormField as i } from "../FormField.context.js";
-const p = l(
-  ({ children: r, ...o }, t) => {
-    const { formDescriptionId: e } = i();
-    return /* @__PURE__ */ a(
-      m,
-      {
-        ...o,
-        id: e,
-        "data-unity-slot": "helper-text",
-        variant: "bodySmall",
-        color: "content.neutral.low",
-        ref: t,
-        "data-dd-privacy": "allow",
-        children: r
-      }
-    );
-  }
-);
-p.displayName = "HelperText";
-export {
-  p as FormHelperText
-};

package/dist/esm/components/form-field/parts/FormLabel.d.ts

@@ -1,8 +0,0 @@
-import { LabelProps } from '../../label/Label.js';
-export type FormLabelProps = Omit<LabelProps, 'isRequired'>;
-/**
- * FormLabel is a component that displays a label for a form field.
- * It is used to provide context for the form field.
- */
-declare const FormLabel: import('react').ForwardRefExoticComponent<FormLabelProps & import('react').RefAttributes<HTMLLabelElement>>;
-export { FormLabel };

package/dist/esm/components/form-field/parts/FormLabel.js

@@ -1,30 +0,0 @@
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { Label as f } from "../../label/Label.js";
-import { useFormField as s } from "../FormField.context.js";
-const n = l(
-  ({ children: e, ...r }, o) => {
-    const { requiredVariant: m } = r, {
-      formLabelId: t,
-      formItemId: a,
-      fieldState: { isRequired: i }
-    } = s();
-    return /* @__PURE__ */ d(
-      f,
-      {
-        ref: o,
-        id: t,
-        isRequired: i,
-        requiredVariant: m,
-        htmlFor: a,
-        className: "uy-leading-100",
-        ...r,
-        children: e
-      }
-    );
-  }
-);
-n.displayName = "Label";
-export {
-  n as FormLabel
-};

package/dist/esm/components/form-field/utils/isFieldRequired.d.ts

@@ -1,8 +0,0 @@
-import { ZodObject, ZodRawShape } from 'zod';
-/**
- * Determines if a field is required based on its path in a Zod schema
- * @param schema - The Zod schema object
- * @param fieldPath - The path to the field (e.g., "preferences.marketing")
- * @returns true if the field is required, false if optional or not found
- */
-export declare function isFieldRequired(schema: ZodObject<ZodRawShape> | null | undefined, fieldPath: string): boolean;

package/dist/esm/components/form-field/utils/isFieldRequired.js

@@ -1,23 +0,0 @@
-import { z as f } from "zod";
-function p(r, s) {
-  try {
-    if (!r) return !1;
-    const n = s.split(".");
-    let a = r.shape, e;
-    for (let t = 0; t < n.length; t++) {
-      const l = n[t];
-      if (e = a[l], !e) return !1;
-      if (t < n.length - 1) {
-        const i = e instanceof f.ZodOptional ? e._def.innerType.shape : e.shape;
-        if (!i) return !1;
-        a = i;
-      }
-    }
-    return e ? !(e instanceof f.ZodOptional) : !1;
-  } catch {
-    return !1;
-  }
-}
-export {
-  p as isFieldRequired
-};