@payfit/unity-components 2.46.11 → 2.46.13

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

@@ -1,54 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-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

@@ -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.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-(--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
-};

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

@@ -1,386 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-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:grid-layout", {
-    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:grid-layout", 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, {
-    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, unknown, unknown, undefined>>;
-export type GridItemVariants = VariantProps<typeof gridItem>;

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

@@ -1,164 +0,0 @@
-import { uyTv as u } from "@payfit/unity-themes";
-const l = u(
-  {
-    base: "uy:grid-layout",
-    variants: {
-      // Display mode
-      inline: {
-        true: "uy:inline-grid",
-        false: ""
-      },
-      cols: {
-        6: "uy:[--uy-grid-layout-columns--default:6] uy:[--uy-grid-layout-columns--md:6] uy:[--uy-grid-layout-columns--lg:6]",
-        12: "uy:[--uy-grid-layout-columns--default:12] uy:[--uy-grid-layout-columns--md:12] uy:[--uy-grid-layout-columns--lg:12]"
-      },
-      // Flow
-      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"
-      },
-      // Justify items
-      justifyItems: {
-        initial: "",
-        start: "uy:justify-items-start",
-        end: "uy:justify-items-end",
-        center: "uy:justify-items-center",
-        stretch: "uy:justify-items-stretch"
-      },
-      // Align items
-      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: true,
-  // },
-), y = u(
-  {
-    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: "uy:md:col-span-7",
-        8: "uy:md:col-span-8",
-        9: "uy:md:col-span-9",
-        10: "uy:md:col-span-10",
-        11: "uy:md:col-span-11",
-        12: "uy:md:col-span-12",
-        "1/2": "uy:col-span-3 uy:md:col-span-6",
-        "1/3": "uy:col-span-2 uy:md:col-span-4",
-        "2/3": "uy:col-span-4 uy:md:col-span-8",
-        "1/4": "uy:col-span-1 uy:md:col-span-3",
-        "3/4": "uy:col-span-3 uy:md:col-span-9",
-        "1/6": "uy:col-span-1 uy:md:col-span-2",
-        "5/6": "uy:col-span-5 uy:md:col-span-10",
-        full: "uy:col-span-full"
-      },
-      // Column start for 12-column grid
-      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"
-      },
-      // Self alignment
-      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: true,
-  // },
-);
-export {
-  l as grid,
-  y as gridItem
-};

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

@@ -1,60 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { gridItem } from './Grid.variants.js';
-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 {};