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

package/dist/cjs/components/form-field/parts/FormControl.cjs

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

package/dist/cjs/components/form-field/parts/FormControl.d.cts

@@ -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/cjs/components/form-field/parts/FormFeedbackText.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),c=require("react"),l=require("../../text/Text.cjs"),u=require("../FormField.context.cjs"),r=c.forwardRef(({children:o,...a},s)=>{const{fieldState:{error:e,isInvalid:d},formMessageId:i}=u.useFormField(),t=e?String(e.message):o;return!d||!t?null:n.jsx(l.Text,{...a,id:i,ref:s,"data-unity-slot":"form-feedback-text",className:"uy-typography-body-small-strong uy-text-content-form-invalid","data-dd-privacy":"allow",children:t})});r.displayName="FormFeedbackText";exports.FormFeedbackText=r;

package/dist/cjs/components/form-field/parts/FormHelperText.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),n=require("react"),a=require("../../text/Text.cjs"),c=require("../FormField.context.cjs"),e=n.forwardRef(({children:t,...r},o)=>{const{formDescriptionId:l}=c.useFormField();return i.jsx(a.Text,{...r,id:l,"data-unity-slot":"helper-text",variant:"bodySmall",color:"content.neutral.low",ref:o,"data-dd-privacy":"allow",children:t})});e.displayName="HelperText";exports.FormHelperText=e;

package/dist/cjs/components/form-field/parts/FormHelperText.d.cts

@@ -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/cjs/components/form-field/parts/FormLabel.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("react"),u=require("../../label/Label.cjs"),c=require("../FormField.context.cjs"),r=d.forwardRef(({children:t,...e},o)=>{const{requiredVariant:a}=e,{formLabelId:i,formItemId:l,fieldState:{isRequired:s}}=c.useFormField();return n.jsx(u.Label,{ref:o,id:i,isRequired:s,requiredVariant:a,htmlFor:l,className:"uy-leading-100",...e,children:t})});r.displayName="Label";exports.FormLabel=r;

package/dist/cjs/components/form-field/parts/FormLabel.d.cts

@@ -1,8 +0,0 @@
-import { LabelProps } from '../../label/Label.cjs';
-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/cjs/components/form-field/utils/isFieldRequired.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("zod");function f(n,l){try{if(!n)return!1;const r=l.split(".");let i=n.shape,e;for(let t=0;t<r.length;t++){const o=r[t];if(e=i[o],!e)return!1;if(t<r.length-1){const s=e instanceof a.z.ZodOptional?e._def.innerType.shape:e.shape;if(!s)return!1;i=s}}return e?!(e instanceof a.z.ZodOptional):!1}catch{return!1}}exports.isFieldRequired=f;

package/dist/cjs/components/form-field/utils/isFieldRequired.d.cts

@@ -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/cjs/components/full-page-loader/FullPageLoader.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react-aria"),n=require("react-intl"),i=require("tailwind-variants"),u=require("../spinner/Spinner.cjs"),a=i.tv({base:"uy-w-full uy-h-screen uy-flex uy-place-items-center uy-justify-center"}),r=({label:l})=>{const t=s.useId();return e.jsxs("main",{id:t,className:a(),"aria-busy":"true","data-dd-privacy":"allow",children:[e.jsx("h1",{className:"uy-sr-only",children:l??e.jsx(n.FormattedMessage,{id:"unity:component:full-page-loader:label",defaultMessage:"Content is loading..."})}),e.jsx(u.Spinner,{label:"",size:"medium",role:"presentation"})]})};r.displayName="FullPageLoader";exports.FullPageLoader=r;exports.fullPageLoader=a;

package/dist/cjs/components/full-page-loader/FullPageLoader.d.cts

@@ -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.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/cjs/components/grid/Grid.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react/jsx-runtime"),v=require("react"),G=require("./Grid.variants.cjs"),s=v.forwardRef(({asElement:r="div",className:t,children:a,inline:i,cols:c,flow:l,justifyItems:o,alignItems:d,rows:e,areas:n,...u},m)=>{const y={"--uy-grid-template-rows":e,gridTemplateAreas:n},g=[e?"uy-grid-rows-[var(--uy-grid-template-rows)]":"",t],p=G.grid({inline:i,cols:c,flow:l,justifyItems:o,alignItems:d,className:g});return N.jsx(r,{ref:m,className:p,style:y,...u,children:a})});s.displayName="Grid";exports.Grid=s;

package/dist/cjs/components/grid/Grid.d.cts

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

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),j=require("react"),p=require("./Grid.variants.cjs"),e=j.forwardRef(({asElement:t="div",area:r,children:s,className:i,colSpan:o,colStart:a,colEnd:n,justify:c,align:d,...l},m)=>{const u=Object.fromEntries([["gridArea",r]].filter(([G,y])=>!!y)),f=p.gridItem({colSpan:o,colStart:a,colEnd:n,justify:c,align:d,className:i});return g.jsx(t,{ref:m,className:f,style:u,...l,children:s})});e.displayName="GridItem";exports.GridItem=e;

package/dist/cjs/components/grid/GridItem.d.cts

@@ -1,60 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import { gridItem } from './Grid.variants.cjs';
-export type GridItemVariantProps = VariantProps<typeof gridItem>;
-type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';
-/** Base properties shared across all grid item variants */
-interface GridItemBaseProps {
-    /** Render the grid item as a specific HTML element */
-    asElement?: ElementType;
-    /** Override the container's justify-items value for this item. Use 'start', 'center', 'end', or 'stretch' */
-    justify?: GridItemVariantProps['justify'];
-    /** Override the container's align-items value for this item. Use 'start', 'center', 'end', 'stretch', or 'baseline' */
-    align?: GridItemVariantProps['align'];
-    /** Add custom classes to the grid item */
-    className?: string;
-    /** The content of the grid item */
-    children?: React.ReactNode;
-}
-/** Properties for grid items using named grid areas */
-interface GridItemAreaProps extends GridItemBaseProps {
-    /** The named grid area this item should occupy */
-    area: string;
-    colSpan?: never;
-    colStart?: never;
-    colEnd?: never;
-}
-/** Properties for grid items using column-based positioning */
-interface GridItemTracksProps extends GridItemBaseProps {
-    area?: never;
-    /** Set how many columns this item should span */
-    colSpan?: GridItemVariantProps['colSpan'];
-    /** Set which column this item should start from */
-    colStart?: GridItemVariantProps['colStart'];
-    /** Set which column this item should end at */
-    colEnd?: GridItemVariantProps['colEnd'];
-}
-/**
- * Props for the GridItem component. This component accepts either:
- * - Named grid area positioning using the `area` prop
- * - Column- and row-based positioning using `colSpan`, `colStart`, and/or `colEnd`, and `rowSpan`, `rowStart`, and/or `rowEnd`
- * These two positioning methods cannot be mixed.
- */
-export type GridItemProps = GridItemAreaProps | GridItemTracksProps;
-type InternalGridItemProps = GridItemProps & Omit<React.HTMLAttributes<HTMLElement>, keyof GridItemProps>;
-/**
- * Use GridItem to control how individual items behave within a Grid container.
- * This component provides props to manage column spanning, positioning, and alignment of grid items.
- * @example
- * ```tsx
- * <Grid cols={12}>
- *   <GridItem colSpan={6}>
- *     <div>Half width content</div>
- *   </GridItem>
- *   <GridItem colStart={7} colEnd={13}>
- *     <div>Other half content</div>
- *   </GridItem>
- * </Grid>
- * ```
- */
-export declare const GridItem: import('react').ForwardRefExoticComponent<InternalGridItemProps & import('react').RefAttributes<HTMLDivElement>>;
-export {};

package/dist/cjs/components/icon/Icon.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("@payfit/unity-icons"),d=require("tailwind-variants"),l=d.tv({variants:{size:{20:"uy-w-250 uy-h-250",24:"uy-w-300 uy-h-300"},color:{"content.primary":"uy-text-content-primary","content.primary.enabled":"uy-text-content-primary-enabled","content.primary.hover":"uy-text-content-primary-hover","content.primary.pressed":"uy-text-content-primary-pressed","content.primary.focus":"uy-text-content-primary-focus","content.primary.active":"uy-text-content-primary-active","content.primary.disabled":"uy-text-content-primary-disabled","content.neutral":"uy-text-content-neutral","content.neutral.enabled":"uy-text-content-neutral-enabled","content.neutral.hover":"uy-text-content-neutral-hover","content.neutral.pressed":"uy-text-content-neutral-pressed","content.neutral.focus":"uy-text-content-neutral-focus","content.neutral.active":"uy-text-content-neutral-active","content.neutral.disabled":"uy-text-content-neutral-disabled","content.neutral.low":"uy-text-content-neutral-low","content.neutral.lowest":"uy-text-content-neutral-lowest","content.neutral.lowest.enabled":"uy-text-content-neutral-lowest-enabled","content.neutral.lowest.hover":"uy-text-content-neutral-lowest-hover","content.neutral.lowest.pressed":"uy-text-content-neutral-lowest-pressed","content.neutral.lowest.focus":"uy-text-content-neutral-lowest-focus","content.neutral.lowest.active":"uy-text-content-neutral-lowest-active","content.neutral.lowest.disabled":"uy-text-content-neutral-lowest-disabled","content.danger":"uy-text-content-danger","content.danger.enabled":"uy-text-content-danger-enabled","content.danger.hover":"uy-text-content-danger-hover","content.danger.pressed":"uy-text-content-danger-pressed","content.danger.focus":"uy-text-content-danger-focus","content.danger.active":"uy-text-content-danger-active","content.danger.disabled":"uy-text-content-danger-disabled","content.warning":"uy-text-content-warning","content.warning.enabled":"uy-text-content-warning-enabled","content.warning.hover":"uy-text-content-warning-hover","content.warning.pressed":"uy-text-content-warning-pressed","content.warning.focus":"uy-text-content-warning-focus","content.warning.active":"uy-text-content-warning-active","content.warning.disabled":"uy-text-content-warning-disabled","content.success":"uy-text-content-success","content.success.enabled":"uy-text-content-success-enabled","content.success.hover":"uy-text-content-success-hover","content.success.pressed":"uy-text-content-success-pressed","content.success.focus":"uy-text-content-success-focus","content.success.active":"uy-text-content-success-active","content.success.disabled":"uy-text-content-success-disabled","content.info":"uy-text-content-info","content.info.enabled":"uy-text-content-info-enabled","content.info.hover":"uy-text-content-info-hover","content.info.pressed":"uy-text-content-info-pressed","content.info.focus":"uy-text-content-info-focus","content.info.active":"uy-text-content-info-active","content.info.disabled":"uy-text-content-info-disabled","content.promo":"uy-text-content-promo","content.form.enabled":"uy-text-content-form","content.form.hover":"uy-text-content-form-hover","content.form.pressed":"uy-text-content-form-pressed","content.form.focus":"uy-text-content-form-focus","content.form.active":"uy-text-content-form-active","content.form.disabled":"uy-text-content-form-disabled","content.form.read-only":"uy-text-content-form-read-only","content.form.invalid":"uy-text-content-form-invalid","content.inverted":"uy-text-content-inverted","content.inverted.enabled":"uy-text-content-inverted-enabled","content.inverted.hover":"uy-text-content-inverted-hover","content.inverted.pressed":"uy-text-content-inverted-pressed","content.inverted.focus":"uy-text-content-inverted-focus","content.inverted.active":"uy-text-content-inverted-active","content.inverted.disabled":"uy-text-content-inverted-disabled",inherit:"uy-text-inherit"},display:{block:"uy-block",inline:"uy-inline-block"}},defaultVariants:{size:20,color:"inherit",display:"block"}});function y({alt:n,color:o,size:c,src:r,role:a="img",display:s="block",...t}){const u=l({size:c,color:o,display:s});return e.jsx("span",{"data-dd-privacy":"allow",...t,role:a,"aria-label":t["aria-labelledby"]?void 0:n,children:e.jsx(i.IconSprite,{className:u,src:r})})}exports.Icon=y;