@payfit/unity-components 2.46.13 → 2.46.14

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

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

@@ -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-(--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

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

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

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