@payfit/unity-components 0.0.0-alpha.9 → 1.1.0

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

@@ -1,20 +0,0 @@
-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.mjs

@@ -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.mjs";
-import { Text as e } from "../../text/Text.mjs";
-import { useFormField as u } from "../FormField.context.mjs";
-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.mts

@@ -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.mjs

@@ -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.mjs";
-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.mts

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

@@ -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.mjs";
-import { useFormField as n } from "../FormField.context.mjs";
-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.mts

@@ -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.mjs

@@ -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.mjs";
-import { useFormField as i } from "../FormField.context.mjs";
-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.mts

@@ -1,8 +0,0 @@
-import { LabelProps } from '../../label/Label.mjs';
-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.mjs

@@ -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.mjs";
-import { useFormField as s } from "../FormField.context.mjs";
-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.mts

@@ -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/full-page-loader/FullPageLoader.d.mts

@@ -1,13 +0,0 @@
-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').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').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.mjs

@@ -1,35 +0,0 @@
-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.mjs";
-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.mts

@@ -1,54 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import { grid } from './Grid.variants.mjs';
-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.mjs

@@ -1,38 +0,0 @@
-import { jsx as y } from "react/jsx-runtime";
-import { forwardRef as N } from "react";
-import { grid as f } from "./Grid.variants.mjs";
-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
-};