@payfit/unity-components 0.0.0-alpha.9 → 1.0.0

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

@@ -0,0 +1,386 @@
+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: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 { tv as t } from "tailwind-variants";
+const l = t(
+  {
+    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 = 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: "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.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
+};