@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/flex/Flex.variants.d.ts

@@ -0,0 +1,476 @@
+export declare const flex: import('tailwind-variants').TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+    direction: {
+        row: string;
+        col: string;
+    };
+    isReversed: {
+        true: null;
+        false: null;
+    };
+    wrap: {
+        wrap: string;
+        'wrap-reverse': string;
+        nowrap: string;
+    };
+    gap: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    gapX: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    gapY: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    justify: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+    };
+    align: {
+        start: string;
+        end: string;
+        center: string;
+        baseline: string;
+        stretch: string;
+    };
+    alignContent: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+    };
+}, undefined, "uy:flex", {
+    inline: {
+        true: string;
+        false: string;
+    };
+    direction: {
+        row: string;
+        col: string;
+    };
+    isReversed: {
+        true: null;
+        false: null;
+    };
+    wrap: {
+        wrap: string;
+        'wrap-reverse': string;
+        nowrap: string;
+    };
+    gap: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    gapX: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    gapY: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    justify: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+    };
+    align: {
+        start: string;
+        end: string;
+        center: string;
+        baseline: string;
+        stretch: string;
+    };
+    alignContent: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+    direction: {
+        row: string;
+        col: string;
+    };
+    isReversed: {
+        true: null;
+        false: null;
+    };
+    wrap: {
+        wrap: string;
+        'wrap-reverse': string;
+        nowrap: string;
+    };
+    gap: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    gapX: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    gapY: {
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    justify: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+    };
+    align: {
+        start: string;
+        end: string;
+        center: string;
+        baseline: string;
+        stretch: string;
+    };
+    alignContent: {
+        start: string;
+        end: string;
+        center: string;
+        between: string;
+        around: string;
+        evenly: string;
+    };
+}, undefined, "uy:flex", unknown, unknown, undefined>>;
+export declare const flexItem: import('tailwind-variants').TVReturnType<{
+    grow: {
+        0: string;
+        1: string;
+    };
+    shrink: {
+        0: string;
+        1: string;
+    };
+    basis: {
+        auto: string;
+        min: string;
+        max: string;
+        fit: string;
+        full: string;
+        '1/2': string;
+        '1/3': string;
+        '2/3': string;
+        '1/4': string;
+        '2/4': string;
+        '3/4': string;
+        '1/6': string;
+        '2/6': string;
+        '3/6': string;
+        '4/6': string;
+        '5/6': string;
+        '1/12': string;
+        '2/12': string;
+        '3/12': string;
+        '4/12': string;
+        '5/12': string;
+        '6/12': string;
+        '7/12': string;
+        '8/12': string;
+        '9/12': string;
+        '10/12': string;
+        '11/12': string;
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    order: {
+        first: string;
+        last: string;
+        none: string;
+    };
+    self: {
+        auto: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+        baseline: string;
+    };
+}, undefined, undefined, {
+    grow: {
+        0: string;
+        1: string;
+    };
+    shrink: {
+        0: string;
+        1: string;
+    };
+    basis: {
+        auto: string;
+        min: string;
+        max: string;
+        fit: string;
+        full: string;
+        '1/2': string;
+        '1/3': string;
+        '2/3': string;
+        '1/4': string;
+        '2/4': string;
+        '3/4': string;
+        '1/6': string;
+        '2/6': string;
+        '3/6': string;
+        '4/6': string;
+        '5/6': string;
+        '1/12': string;
+        '2/12': string;
+        '3/12': string;
+        '4/12': string;
+        '5/12': string;
+        '6/12': string;
+        '7/12': string;
+        '8/12': string;
+        '9/12': string;
+        '10/12': string;
+        '11/12': string;
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    order: {
+        first: string;
+        last: string;
+        none: string;
+    };
+    self: {
+        auto: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+        baseline: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    grow: {
+        0: string;
+        1: string;
+    };
+    shrink: {
+        0: string;
+        1: string;
+    };
+    basis: {
+        auto: string;
+        min: string;
+        max: string;
+        fit: string;
+        full: string;
+        '1/2': string;
+        '1/3': string;
+        '2/3': string;
+        '1/4': string;
+        '2/4': string;
+        '3/4': string;
+        '1/6': string;
+        '2/6': string;
+        '3/6': string;
+        '4/6': string;
+        '5/6': string;
+        '1/12': string;
+        '2/12': string;
+        '3/12': string;
+        '4/12': string;
+        '5/12': string;
+        '6/12': string;
+        '7/12': string;
+        '8/12': string;
+        '9/12': string;
+        '10/12': string;
+        '11/12': string;
+        '0': string;
+        '25': string;
+        '50': string;
+        '75': string;
+        '100': string;
+        '125': string;
+        '150': string;
+        '200': string;
+        '250': string;
+        '300': string;
+        '400': string;
+        '500': string;
+        '600': string;
+        '800': string;
+        '1000': string;
+    };
+    order: {
+        first: string;
+        last: string;
+        none: string;
+    };
+    self: {
+        auto: string;
+        start: string;
+        end: string;
+        center: string;
+        stretch: string;
+        baseline: string;
+    };
+}, undefined, undefined, unknown, unknown, undefined>>;

package/dist/esm/components/flex/Flex.variants.js

@@ -0,0 +1,200 @@
+import { uyTv as s } from "@payfit/unity-themes";
+const y = s({
+  base: "uy:flex",
+  variants: {
+    inline: {
+      true: "uy:inline-flex",
+      false: "uy:flex"
+    },
+    direction: {
+      row: "uy:flex-row",
+      col: "uy:flex-col"
+    },
+    isReversed: {
+      true: null,
+      false: null
+    },
+    wrap: {
+      wrap: "uy:flex-wrap",
+      "wrap-reverse": "uy:flex-wrap-reverse",
+      nowrap: "uy:flex-nowrap"
+    },
+    gap: {
+      0: "uy:gap-0",
+      25: "uy:gap-25",
+      50: "uy:gap-50",
+      75: "uy:gap-75",
+      100: "uy:gap-100",
+      125: "uy:gap-125",
+      150: "uy:gap-150",
+      200: "uy:gap-200",
+      250: "uy:gap-250",
+      300: "uy:gap-300",
+      400: "uy:gap-400",
+      500: "uy:gap-500",
+      600: "uy:gap-600",
+      800: "uy:gap-800",
+      1e3: "uy:gap-1000"
+    },
+    gapX: {
+      0: "uy:gap-x-0",
+      25: "uy:gap-x-25",
+      50: "uy:gap-x-50",
+      75: "uy:gap-x-75",
+      100: "uy:gap-x-100",
+      125: "uy:gap-x-125",
+      150: "uy:gap-x-150",
+      200: "uy:gap-x-200",
+      250: "uy:gap-x-250",
+      300: "uy:gap-x-300",
+      400: "uy:gap-x-400",
+      500: "uy:gap-x-500",
+      600: "uy:gap-x-600",
+      800: "uy:gap-x-800",
+      1e3: "uy:gap-x-1000"
+    },
+    gapY: {
+      0: "uy:gap-y-0",
+      25: "uy:gap-y-25",
+      50: "uy:gap-y-50",
+      75: "uy:gap-y-75",
+      100: "uy:gap-y-100",
+      125: "uy:gap-y-125",
+      150: "uy:gap-y-150",
+      200: "uy:gap-y-200",
+      250: "uy:gap-y-250",
+      300: "uy:gap-y-300",
+      400: "uy:gap-y-400",
+      500: "uy:gap-y-500",
+      600: "uy:gap-y-600",
+      800: "uy:gap-y-800",
+      1e3: "uy:gap-y-1000"
+    },
+    justify: {
+      start: "uy:justify-start",
+      end: "uy:justify-end",
+      center: "uy:justify-center",
+      between: "uy:justify-between",
+      around: "uy:justify-around",
+      evenly: "uy:justify-evenly"
+    },
+    align: {
+      start: "uy:items-start",
+      end: "uy:items-end",
+      center: "uy:items-center",
+      baseline: "uy:items-baseline",
+      stretch: "uy:items-stretch"
+    },
+    alignContent: {
+      start: "uy:content-start",
+      end: "uy:content-end",
+      center: "uy:content-center",
+      between: "uy:content-between",
+      around: "uy:content-around",
+      evenly: "uy:content-evenly"
+    }
+  },
+  defaultVariants: {
+    inline: !1,
+    direction: "row",
+    wrap: "nowrap",
+    justify: "start",
+    align: "stretch",
+    isReversed: !1
+  },
+  compoundVariants: [
+    {
+      isReversed: !0,
+      direction: "row",
+      className: "uy:flex-row-reverse"
+    },
+    {
+      isReversed: !0,
+      direction: void 0,
+      className: "uy:flex-row-reverse"
+    },
+    {
+      isReversed: !0,
+      direction: "col",
+      className: "uy:flex-col-reverse"
+    }
+  ]
+}), e = s({
+  variants: {
+    grow: {
+      0: "uy:grow-0",
+      1: "uy:grow"
+    },
+    shrink: {
+      0: "uy:shrink-0",
+      1: "uy:shrink"
+    },
+    basis: {
+      auto: "uy:basis-auto",
+      min: "uy:basis-min",
+      max: "uy:basis-max",
+      fit: "uy:basis-fit",
+      full: "uy:basis-full",
+      "1/2": "uy:basis-1/2",
+      "1/3": "uy:basis-1/3",
+      "2/3": "uy:basis-2/3",
+      "1/4": "uy:basis-1/4",
+      "2/4": "uy:basis-2/4",
+      "3/4": "uy:basis-3/4",
+      "1/6": "uy:basis-1/6",
+      "2/6": "uy:basis-2/6",
+      "3/6": "uy:basis-3/6",
+      "4/6": "uy:basis-4/6",
+      "5/6": "uy:basis-5/6",
+      "1/12": "uy:basis-1/12",
+      "2/12": "uy:basis-2/12",
+      "3/12": "uy:basis-3/12",
+      "4/12": "uy:basis-4/12",
+      "5/12": "uy:basis-5/12",
+      "6/12": "uy:basis-6/12",
+      "7/12": "uy:basis-7/12",
+      "8/12": "uy:basis-8/12",
+      "9/12": "uy:basis-9/12",
+      "10/12": "uy:basis-10/12",
+      "11/12": "uy:basis-11/12",
+      0: "uy:basis-0",
+      25: "uy:basis-25",
+      50: "uy:basis-50",
+      75: "uy:basis-75",
+      100: "uy:basis-100",
+      125: "uy:basis-125",
+      150: "uy:basis-150",
+      200: "uy:basis-200",
+      250: "uy:basis-250",
+      300: "uy:basis-300",
+      400: "uy:basis-400",
+      500: "uy:basis-500",
+      600: "uy:basis-600",
+      800: "uy:basis-800",
+      1e3: "uy:basis-1000"
+    },
+    order: {
+      first: "uy:order-first",
+      last: "uy:order-last",
+      none: "uy:order-none"
+    },
+    self: {
+      auto: "uy:self-auto",
+      start: "uy:self-start",
+      end: "uy:self-end",
+      center: "uy:self-center",
+      stretch: "uy:self-stretch",
+      baseline: "uy:self-baseline"
+    }
+  },
+  defaultVariants: {
+    grow: 0,
+    shrink: 1,
+    order: "none",
+    self: "auto"
+  }
+});
+export {
+  y as flex,
+  e as flexItem
+};

package/dist/esm/components/flex/FlexItem.d.ts

@@ -0,0 +1,40 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { flexItem } from './Flex.variants.js';
+export type FlexItemVariantProps = VariantProps<typeof flexItem>;
+type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';
+export interface FlexItemProps {
+    /** Render the flex item as a specific HTML element */
+    asElement?: ElementType;
+    /** Control if the item grows to fill available space. Use 1 to allow growing, 0 to prevent it */
+    grow?: FlexItemVariantProps['grow'];
+    /** Control if the item shrinks when space is limited. Use 1 to allow shrinking, 0 to prevent it */
+    shrink?: FlexItemVariantProps['shrink'];
+    /** Set the initial size of the item before remaining space is distributed. Use pixel values or fractions */
+    basis?: FlexItemVariantProps['basis'];
+    /** Change the item's position in the flex container. Use 'first', 'last', or 'none' */
+    order?: FlexItemVariantProps['order'];
+    /** Override the container's align-items value for this item. Use 'start', 'center', 'end', 'stretch', or 'baseline' */
+    self?: FlexItemVariantProps['self'];
+    /** Add custom classes to the flex item */
+    className?: string;
+    /** The content of the flex item */
+    children?: React.ReactNode;
+}
+/**
+ * Use FlexItem to control how individual items behave within a Flex container.
+ * This component provides props to manage growing, shrinking, sizing, and positioning of flex items.
+ * @example
+ * ```tsx
+ * <Flex gap="100">
+ *   <FlexItem grow={1}>
+ *     <div>Flexible content</div>
+ *   </FlexItem>
+ *   <FlexItem basis="200" shrink={0}>
+ *     <div>Fixed width content</div>
+ *   </FlexItem>
+ * </Flex>
+ * ```
+ */
+export declare const FlexItem: import('react').ForwardRefExoticComponent<FlexItemProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexItemProps> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const StackItem: import('react').ForwardRefExoticComponent<FlexItemProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexItemProps> & import('react').RefAttributes<HTMLDivElement>>;
+export {};