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

package/dist/esm/components/fieldset/Fieldset.d.ts

@@ -0,0 +1,98 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const fieldset: import('tailwind-variants').TVReturnType<{
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    base: string;
+    legend: string;
+    description: string;
+    fieldsContainer: string;
+}, undefined, {
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    base: string;
+    legend: string;
+    description: string;
+    fieldsContainer: string;
+}, import('tailwind-variants').TVReturnType<{
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    base: string;
+    legend: string;
+    description: string;
+    fieldsContainer: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface FieldsetProps extends PropsWithChildren<VariantProps<typeof fieldset>> {
+    /**
+     * The legend of the fieldset.
+     */
+    legend: ReactNode;
+    /**
+     * An optional description of the fieldset.
+     */
+    description?: string;
+    /**
+     * Whether to hide the legend of the fieldset.
+     */
+    isLegendHidden?: boolean;
+}
+/**
+ * The `Fieldset` component groups related form fields together with an accessible structure.
+ * It provides visual organization and semantic HTML for form sections, making forms more understandable and navigable.
+ * @param {FieldsetProps} props - The props for the `Fieldset` component
+ * @see {@link FieldsetProps} for all available props
+ * @example
+ * ```tsx
+ * import { Fieldset } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Fieldset
+ *       legend="Personal Information"
+ *       description="Please provide your contact details"
+ *       isLegendHidden={false}
+ *     >
+ *       <TextField name="firstName" label="First name" />
+ *       <TextField name="lastName" label="Last name" />
+ *     </Fieldset>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/forms-fieldset--docs) • [Design docs](https://www.payfit.design/24f360409/p/1151cf-form-layout)
+ */
+declare const Fieldset: import('react').ForwardRefExoticComponent<FieldsetProps & import('react').RefAttributes<HTMLFieldSetElement>>;
+export { Fieldset };

package/dist/esm/components/fieldset/Fieldset.js

@@ -0,0 +1,66 @@
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { useId as g } from "react-aria";
+import { tv as b } from "tailwind-variants";
+const x = b({
+  slots: {
+    base: "uy:p-0 uy:m-0 uy:[&+&]:mt-500 uy:[&:last-of-type]:mb-500",
+    legend: "uy:typography-h3 uy:text-content-neutral",
+    description: "uy:block uy:typography-body uy:mt-100 uy:text-content-neutral",
+    fieldsContainer: "uy:flex uy:flex-col uy:gap-250"
+  },
+  variants: {
+    isLegendHidden: {
+      true: {
+        legend: "uy:sr-only",
+        description: "uy:sr-only",
+        fieldsContainer: "uy:mt-0"
+      },
+      false: {
+        legend: "uy:block",
+        description: "uy:block",
+        fieldsContainer: "uy:mt-300"
+      }
+    }
+  },
+  defaultVariants: {
+    isLegendHidden: !1
+  }
+}), h = m(
+  ({ children: i, ...d }, n) => {
+    const s = g(), { legend: l, description: e, isLegendHidden: o, ...r } = d, {
+      base: a,
+      legend: y,
+      description: c,
+      fieldsContainer: u
+    } = x({ isLegendHidden: o }), p = e ? `${s}-fieldset-description` : void 0;
+    return /* @__PURE__ */ f(
+      "fieldset",
+      {
+        "data-dd-privacy": "allow",
+        ...r,
+        ref: n,
+        className: a(),
+        "aria-describedby": p,
+        children: [
+          /* @__PURE__ */ t("legend", { className: y(), children: l }),
+          e && /* @__PURE__ */ t(
+            "span",
+            {
+              id: `${s}-fieldset-description`,
+              "data-fieldset-slot": "description",
+              className: c(),
+              children: e
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: u(), children: i })
+        ]
+      }
+    );
+  }
+);
+h.displayName = "Fieldset";
+export {
+  h as Fieldset,
+  x as fieldset
+};

package/dist/esm/components/fieldset/parts/FieldGroup.js

@@ -0,0 +1,18 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+const u = p(
+  ({ children: r, ...o }, d) => /* @__PURE__ */ i(
+    "div",
+    {
+      ...o,
+      ref: d,
+      role: "group",
+      className: "uy:grid uy:grid-cols-1 uy:gap-y-250 uy:md:grid-cols-2 uy:md:gap-x-200",
+      children: r
+    }
+  )
+);
+u.displayName = "FieldGroup";
+export {
+  u as FieldGroup
+};

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

@@ -0,0 +1,42 @@
+import { jsx as N } from "react/jsx-runtime";
+import { forwardRef as j } from "react";
+import { flex as k } from "./Flex.variants.js";
+const e = j(
+  ({
+    asElement: o = "div",
+    children: r,
+    className: t,
+    inline: s,
+    direction: m,
+    isReversed: a,
+    wrap: l,
+    gap: f,
+    gapX: c,
+    gapY: i,
+    justify: n,
+    align: p,
+    alignContent: x,
+    ...d
+  }, y) => {
+    const F = k({
+      inline: s,
+      direction: m,
+      isReversed: a,
+      wrap: l,
+      gap: f,
+      gapX: c,
+      gapY: i,
+      justify: n,
+      align: p,
+      alignContent: x,
+      className: t
+    });
+    return /* @__PURE__ */ N(o, { ref: y, className: F, ...d, children: r });
+  }
+);
+e.displayName = "Flex";
+const E = e;
+export {
+  e as Flex,
+  E as Stack
+};

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>>;