@payfit/unity-components 0.0.0-alpha.11

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

@@ -0,0 +1,61 @@
+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/cjs/components/form-field/parts/FormContextualLink.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),s=require("react-aria-components"),u=require("../../link/Link.cjs"),c=require("../../text/Text.cjs"),d=require("../FormField.context.cjs"),r=l.forwardRef(({children:e,href:o,onPress:i},a)=>{const{formContextualLinkId:n}=d.useFormField();return o?t.jsx(u.Link,{id:n,color:"secondary",variant:"standalone","data-unity-slot":"contextual-link",href:o,ref:a,"data-dd-privacy":"allow",children:t.jsx(c.Text,{variant:"actionSmall",children:e})}):t.jsx(s.Button,{id:n,onPress:i,"data-unity-slot":"contextual-link",className:"uy-typography-body-small uy-w-fit",ref:a,"data-dd-privacy":"allow",children:e})});r.displayName="FormContextualLink";exports.FormContextualLink=r;

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

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

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

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

@@ -0,0 +1 @@
+"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/FormFeedbackText.d.cts

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,54 @@
+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/Grid.variants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("tailwind-variants"),u=t.tv({base:"uy-layout-grid-xs md:uy-layout-grid-md lg:uy-layout-grid-lg",variants:{inline:{true:"uy-inline-grid",false:""},cols:{6:"[--uy-layout-grid-lg__columns:6] [--uy-layout-grid-md__columns:6] [--uy-layout-grid-xs__columns:6]",12:"[--uy-layout-grid-lg__columns:12] [--uy-layout-grid-md__columns:12] [--uy-layout-grid-xs__columns:12]"},flow:{row:"uy-grid-flow-row",col:"uy-grid-flow-col",dense:"uy-grid-flow-dense","row-dense":"uy-grid-flow-row-dense","col-dense":"uy-grid-flow-col-dense"},justifyItems:{initial:"",start:"uy-justify-items-start",end:"uy-justify-items-end",center:"uy-justify-items-center",stretch:"uy-justify-items-stretch"},alignItems:{initial:"",start:"uy-items-start",end:"uy-items-end",center:"uy-items-center",stretch:"uy-items-stretch",baseline:"uy-items-baseline uy-items-base"}},defaultVariants:{inline:!1,flow:"row",justifyItems:"initial",alignItems:"initial"}},{responsiveVariants:!0}),l=t.tv({variants:{colSpan:{1:"uy-col-span-1",2:"uy-col-span-2",3:"uy-col-span-3",4:"uy-col-span-4",5:"uy-col-span-5",6:"uy-col-span-6",7:"md:uy-col-span-7",8:"md:uy-col-span-8",9:"md:uy-col-span-9",10:"md:uy-col-span-10",11:"md:uy-col-span-11",12:"md:uy-col-span-12","1/2":"uy-col-span-3 md:uy-col-span-6","1/3":"uy-col-span-2 md:uy-col-span-4","2/3":"uy-col-span-4 md:uy-col-span-8","1/4":"uy-col-span-1 md:uy-col-span-3","3/4":"uy-col-span-3 md:uy-col-span-9","1/6":"uy-col-span-1 md:uy-col-span-2","5/6":"uy-col-span-5 md:uy-col-span-10",full:"uy-col-span-full"},colStart:{"-1":"-uy-col-start-1","-2":"-uy-col-start-2","-3":"-uy-col-start-3","-4":"-uy-col-start-4","-5":"-uy-col-start-5","-6":"-uy-col-start-6","-7":"-uy-col-start-7","-8":"-uy-col-start-8","-9":"-uy-col-start-9","-10":"-uy-col-start-10","-11":"-uy-col-start-11","-12":"-uy-col-start-12","-13":"-uy-col-start-13",1:"uy-col-start-1",2:"uy-col-start-2",3:"uy-col-start-3",4:"uy-col-start-4",5:"uy-col-start-5",6:"uy-col-start-6",7:"uy-col-start-7",8:"uy-col-start-8",9:"uy-col-start-9",10:"uy-col-start-10",11:"uy-col-start-11",12:"uy-col-start-12",13:"uy-col-start-13",auto:"uy-col-start-auto"},colEnd:{1:"uy-col-end-1",2:"uy-col-end-2",3:"uy-col-end-3",4:"uy-col-end-4",5:"uy-col-end-5",6:"uy-col-end-6",7:"uy-col-end-7",8:"uy-col-end-8",9:"uy-col-end-9",10:"uy-col-end-10",11:"uy-col-end-11",12:"uy-col-end-12",13:"uy-col-end-13","-1":"-uy-col-end-1","-2":"-uy-col-end-2","-3":"-uy-col-end-3","-4":"-uy-col-end-4","-5":"-uy-col-end-5","-6":"-uy-col-end-6","-7":"-uy-col-end-7","-8":"-uy-col-end-8","-9":"-uy-col-end-9","-10":"-uy-col-end-10","-11":"-uy-col-end-11","-12":"-uy-col-end-12","-13":"-uy-col-end-13",auto:"uy-col-end-auto"},justify:{initial:"",start:"uy-justify-self-start",end:"uy-justify-self-end",center:"uy-justify-self-center",stretch:"uy-justify-self-stretch"},align:{initial:"uy-self-auto",start:"uy-self-start",end:"uy-self-end",center:"uy-self-center",stretch:"uy-self-stretch",baseline:"uy-self-baseline"}},defaultVariants:{justify:"initial",align:"initial"}},{responsiveVariants:!0});exports.grid=u;exports.gridItem=l;

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

@@ -0,0 +1,394 @@
+import { VariantProps } from 'tailwind-variants';
+export declare const grid: import('tailwind-variants').TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+    cols: {
+        6: string;
+        12: string;
+    };
+    flow: {
+        row: string;
+        col: string;
+        dense: string;
+        'row-dense': string;
+        'col-dense': string;
+    };
+    justifyItems: {
+        initial: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+    };
+    alignItems: {
+        initial: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+        baseline: string;
+    };
+}, undefined, "uy-layout-grid-xs md:uy-layout-grid-md lg:uy-layout-grid-lg", {
+    responsiveVariants: true;
+}, {
+    inline: {
+        true: string;
+        false: string;
+    };
+    cols: {
+        6: string;
+        12: string;
+    };
+    flow: {
+        row: string;
+        col: string;
+        dense: string;
+        'row-dense': string;
+        'col-dense': string;
+    };
+    justifyItems: {
+        initial: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+    };
+    alignItems: {
+        initial: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+        baseline: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+    cols: {
+        6: string;
+        12: string;
+    };
+    flow: {
+        row: string;
+        col: string;
+        dense: string;
+        'row-dense': string;
+        'col-dense': string;
+    };
+    justifyItems: {
+        initial: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+    };
+    alignItems: {
+        initial: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+        baseline: string;
+    };
+}, undefined, "uy-layout-grid-xs md:uy-layout-grid-md lg:uy-layout-grid-lg", {
+    responsiveVariants: true;
+}, unknown, unknown, undefined>>;
+export type GridVariants = VariantProps<typeof grid>;
+export declare const gridItem: import('tailwind-variants').TVReturnType<{
+    colSpan: {
+        '1': string;
+        '2': string;
+        '3': string;
+        '4': string;
+        '5': string;
+        '6': string;
+        '7': string;
+        '8': string;
+        '9': string;
+        '10': string;
+        '11': string;
+        '12': string;
+        '1/2': string;
+        '1/3': string;
+        '2/3': string;
+        '1/4': string;
+        '3/4': string;
+        '1/6': string;
+        '5/6': string;
+        full: string;
+    };
+    colStart: {
+        '-1': string;
+        '-2': string;
+        '-3': string;
+        '-4': string;
+        '-5': string;
+        '-6': string;
+        '-7': string;
+        '-8': string;
+        '-9': string;
+        '-10': string;
+        '-11': string;
+        '-12': string;
+        '-13': string;
+        '1': string;
+        '2': string;
+        '3': string;
+        '4': string;
+        '5': string;
+        '6': string;
+        '7': string;
+        '8': string;
+        '9': string;
+        '10': string;
+        '11': string;
+        '12': string;
+        '13': string;
+        auto: string;
+    };
+    colEnd: {
+        '1': string;
+        '2': string;
+        '3': string;
+        '4': string;
+        '5': string;
+        '6': string;
+        '7': string;
+        '8': string;
+        '9': string;
+        '10': string;
+        '11': string;
+        '12': string;
+        '13': string;
+        '-1': string;
+        '-2': string;
+        '-3': string;
+        '-4': string;
+        '-5': string;
+        '-6': string;
+        '-7': string;
+        '-8': string;
+        '-9': string;
+        '-10': string;
+        '-11': string;
+        '-12': string;
+        '-13': string;
+        auto: string;
+    };
+    justify: {
+        initial: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+    };
+    align: {
+        initial: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+        baseline: string;
+    };
+}, undefined, undefined, {
+    responsiveVariants: true;
+}, {
+    colSpan: {
+        '1': string;
+        '2': string;
+        '3': string;
+        '4': string;
+        '5': string;
+        '6': string;
+        '7': string;
+        '8': string;
+        '9': string;
+        '10': string;
+        '11': string;
+        '12': string;
+        '1/2': string;
+        '1/3': string;
+        '2/3': string;
+        '1/4': string;
+        '3/4': string;
+        '1/6': string;
+        '5/6': string;
+        full: string;
+    };
+    colStart: {
+        '-1': string;
+        '-2': string;
+        '-3': string;
+        '-4': string;
+        '-5': string;
+        '-6': string;
+        '-7': string;
+        '-8': string;
+        '-9': string;
+        '-10': string;
+        '-11': string;
+        '-12': string;
+        '-13': string;
+        '1': string;
+        '2': string;
+        '3': string;
+        '4': string;
+        '5': string;
+        '6': string;
+        '7': string;
+        '8': string;
+        '9': string;
+        '10': string;
+        '11': string;
+        '12': string;
+        '13': string;
+        auto: string;
+    };
+    colEnd: {
+        '1': string;
+        '2': string;
+        '3': string;
+        '4': string;
+        '5': string;
+        '6': string;
+        '7': string;
+        '8': string;
+        '9': string;
+        '10': string;
+        '11': string;
+        '12': string;
+        '13': string;
+        '-1': string;
+        '-2': string;
+        '-3': string;
+        '-4': string;
+        '-5': string;
+        '-6': string;
+        '-7': string;
+        '-8': string;
+        '-9': string;
+        '-10': string;
+        '-11': string;
+        '-12': string;
+        '-13': string;
+        auto: string;
+    };
+    justify: {
+        initial: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+    };
+    align: {
+        initial: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+        baseline: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    colSpan: {
+        '1': string;
+        '2': string;
+        '3': string;
+        '4': string;
+        '5': string;
+        '6': string;
+        '7': string;
+        '8': string;
+        '9': string;
+        '10': string;
+        '11': string;
+        '12': string;
+        '1/2': string;
+        '1/3': string;
+        '2/3': string;
+        '1/4': string;
+        '3/4': string;
+        '1/6': string;
+        '5/6': string;
+        full: string;
+    };
+    colStart: {
+        '-1': string;
+        '-2': string;
+        '-3': string;
+        '-4': string;
+        '-5': string;
+        '-6': string;
+        '-7': string;
+        '-8': string;
+        '-9': string;
+        '-10': string;
+        '-11': string;
+        '-12': string;
+        '-13': string;
+        '1': string;
+        '2': string;
+        '3': string;
+        '4': string;
+        '5': string;
+        '6': string;
+        '7': string;
+        '8': string;
+        '9': string;
+        '10': string;
+        '11': string;
+        '12': string;
+        '13': string;
+        auto: string;
+    };
+    colEnd: {
+        '1': string;
+        '2': string;
+        '3': string;
+        '4': string;
+        '5': string;
+        '6': string;
+        '7': string;
+        '8': string;
+        '9': string;
+        '10': string;
+        '11': string;
+        '12': string;
+        '13': string;
+        '-1': string;
+        '-2': string;
+        '-3': string;
+        '-4': string;
+        '-5': string;
+        '-6': string;
+        '-7': string;
+        '-8': string;
+        '-9': string;
+        '-10': string;
+        '-11': string;
+        '-12': string;
+        '-13': string;
+        auto: string;
+    };
+    justify: {
+        initial: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+    };
+    align: {
+        initial: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+        baseline: string;
+    };
+}, undefined, undefined, {
+    responsiveVariants: true;
+}, unknown, unknown, undefined>>;
+export type GridItemVariants = VariantProps<typeof gridItem>;

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

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