@payfit/unity-components 0.0.0-alpha.11

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

@@ -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/esm/components/grid/Grid.variants.js

@@ -0,0 +1,164 @@
+import { tv as t } from "tailwind-variants";
+const l = t(
+  {
+    base: "uy-layout-grid-xs md:uy-layout-grid-md lg:uy-layout-grid-lg",
+    variants: {
+      // Display mode
+      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
+      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: !0
+  }
+), s = t(
+  {
+    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"
+      },
+      // 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: !0
+  }
+);
+export {
+  l as grid,
+  s as gridItem
+};

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

@@ -0,0 +1,60 @@
+import { VariantProps } from 'tailwind-variants';
+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 {};

package/dist/esm/components/grid/GridItem.js

@@ -0,0 +1,43 @@
+import { jsx as y } from "react/jsx-runtime";
+import { forwardRef as I } from "react";
+import { gridItem as g } from "./Grid.variants.js";
+const j = I(
+  ({
+    asElement: r = "div",
+    area: e,
+    children: t,
+    className: o,
+    colSpan: s,
+    colStart: m,
+    colEnd: i,
+    justify: a,
+    align: l,
+    ...c
+  }, d) => {
+    const f = Object.fromEntries(
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      [["gridArea", e]].filter(([u, p]) => !!p)
+    ), n = g({
+      colSpan: s,
+      colStart: m,
+      colEnd: i,
+      justify: a,
+      align: l,
+      className: o
+    });
+    return /* @__PURE__ */ y(
+      r,
+      {
+        ref: d,
+        className: n,
+        style: f,
+        ...c,
+        children: t
+      }
+    );
+  }
+);
+j.displayName = "GridItem";
+export {
+  j as GridItem
+};