@payfit/unity-components 0.0.0-alpha.11

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

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from 'react';
+interface FormContextualLinkProps {
+    /**
+     * The href of the contextual link
+     */
+    href: string;
+    onPress?: never;
+}
+interface FormContextualLinkActionProps {
+    /**
+     * A function to open a contextual panel
+     */
+    onPress: () => void;
+    href?: never;
+}
+/**
+ * FormContextualLink is a component that displays a contextual link for a form field.
+ */
+declare const FormContextualLink: import('react').ForwardRefExoticComponent<PropsWithChildren<FormContextualLinkProps | FormContextualLinkActionProps> & import('react').RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export { FormContextualLink };

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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,50 @@
+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.d.ts

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

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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,7 @@
+/**
+ * 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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,8 @@
+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

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

package/dist/esm/components/full-page-loader/FullPageLoader.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+export declare const fullPageLoader: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy-w-full uy-h-screen uy-flex uy-place-items-center uy-justify-center", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-w-full uy-h-screen uy-flex uy-place-items-center uy-justify-center", import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export type FullPageLoaderProps = {
+    label?: ReactNode;
+};
+/**
+ * The `FullPageLoader` component should used to inform the user that the entire page content is loading
+ */
+declare const FullPageLoader: {
+    ({ label }: FullPageLoaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { FullPageLoader };

package/dist/esm/components/full-page-loader/FullPageLoader.js

@@ -0,0 +1,35 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { useId as o } from "react-aria";
+import { FormattedMessage as t } from "react-intl";
+import { tv as s } from "tailwind-variants";
+import { Spinner as i } from "../spinner/Spinner.js";
+const n = s({
+  // add the component styles
+  base: "uy-w-full uy-h-screen uy-flex uy-place-items-center uy-justify-center"
+}), m = ({ label: a }) => {
+  const r = o();
+  return /* @__PURE__ */ l(
+    "main",
+    {
+      id: r,
+      className: n(),
+      "aria-busy": "true",
+      "data-dd-privacy": "allow",
+      children: [
+        /* @__PURE__ */ e("h1", { className: "uy-sr-only", children: a ?? /* @__PURE__ */ e(
+          t,
+          {
+            id: "unity:component:full-page-loader:label",
+            defaultMessage: "Content is loading..."
+          }
+        ) }),
+        /* @__PURE__ */ e(i, { label: "", size: "medium", role: "presentation" })
+      ]
+    }
+  );
+};
+m.displayName = "FullPageLoader";
+export {
+  m as FullPageLoader,
+  n as fullPageLoader
+};

package/dist/esm/components/grid/Grid.d.ts

@@ -0,0 +1,54 @@
+import { VariantProps } from 'tailwind-variants';
+import { grid } from './Grid.variants.js';
+export type GridContainerVariantProps = VariantProps<typeof grid>;
+type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';
+export interface GridProps {
+    /** Render the grid container as a specific HTML element */
+    asElement?: ElementType;
+    /** Create an inline grid container instead of a block-level container */
+    inline?: GridContainerVariantProps['inline'];
+    /** Set the number of columns in the grid. Use 6 for small grids or 12 for larger ones */
+    cols?: GridContainerVariantProps['cols'];
+    /** Set the grid template rows. Use any valid syntax from CSS' grid-template-rows property */
+    rows?: string;
+    /** Set the grid template areas. Use any valid syntax from CSS' grid-template-areas property */
+    areas?: string;
+    /** Control how grid items flow. Use 'row', 'col', 'dense', 'row-dense', or 'col-dense' */
+    flow?: GridContainerVariantProps['flow'];
+    /** Align grid items along the inline axis within their cells. Use 'start', 'center', 'end', or 'stretch' */
+    justifyItems?: GridContainerVariantProps['justifyItems'];
+    /** Align grid items along the block axis within their cells. Use 'start', 'center', 'end', 'stretch', or 'baseline' */
+    alignItems?: GridContainerVariantProps['alignItems'];
+    /** Add custom classes to the grid container */
+    className?: string;
+    /** The content to be laid out using CSS Grid */
+    children?: React.ReactNode;
+}
+/**
+ * The Grid component provides a powerful and intuitive way to create grid layouts using CSS Grid.
+ * Use it to create responsive grid layouts with precise control over item placement and alignment.
+ *
+ * Key features:
+ * - Create 6 or 12 column grids with the `cols` prop
+ * - Control item flow with the `flow` prop
+ * - Align items with `justifyItems` and `alignItems` props
+ * - Create inline grids with the `inline` prop
+ *
+ * Use GridItem components inside Grid to control individual item behavior.
+ * @example
+ * ```tsx
+ * // Create a basic 12-column grid
+ * <Grid cols={12}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Grid>
+ *
+ * // Create a grid with items aligned to center
+ * <Grid justifyItems="center" alignItems="center">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Grid>
+ * ```
+ */
+export declare const Grid: import('react').ForwardRefExoticComponent<GridProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof GridProps> & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/components/grid/Grid.js

@@ -0,0 +1,38 @@
+import { jsx as y } from "react/jsx-runtime";
+import { forwardRef as N } from "react";
+import { grid as f } from "./Grid.variants.js";
+const g = N(
+  ({
+    asElement: r = "div",
+    className: e,
+    children: a,
+    inline: t,
+    cols: m,
+    flow: o,
+    justifyItems: l,
+    alignItems: i,
+    rows: s,
+    areas: d,
+    ...c
+  }, p) => {
+    const u = {
+      "--uy-grid-template-rows": s,
+      gridTemplateAreas: d
+    }, n = f({
+      inline: t,
+      cols: m,
+      flow: o,
+      justifyItems: l,
+      alignItems: i,
+      className: [
+        s ? "uy-grid-rows-[var(--uy-grid-template-rows)]" : "",
+        e
+      ]
+    });
+    return /* @__PURE__ */ y(r, { ref: p, className: n, style: u, ...c, children: a });
+  }
+);
+g.displayName = "Grid";
+export {
+  g as Grid
+};