@payfit/unity-components 0.0.0-alpha.11 → 0.0.0-alpha.6

package/dist/esm/components/pill/Pill.d.mts

@@ -0,0 +1,143 @@
+import { AriaAttributes } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const pill: import('tailwind-variants').TVReturnType<{
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, undefined, "uy-min-w-200 uy-max-w-400 uy-inline-flex uy-items-center uy-justify-center uy-text-center uy-typography-body-small", import('tailwind-variants/dist/config').TVConfig<{
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, {
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}>, {
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, undefined, "uy-min-w-200 uy-max-w-400 uy-inline-flex uy-items-center uy-justify-center uy-text-center uy-typography-body-small", import('tailwind-variants/dist/config').TVConfig<{
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}, {
+    variant: {
+        critical: string;
+        info: string;
+        neutral: string;
+    };
+    shape: {
+        circle: string;
+        pill: string;
+    };
+    isVisible: {
+        true: string;
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type PillProps = Partial<Pick<HTMLDivElement, 'id'>> & Required<Pick<AriaAttributes, 'aria-label'>> & Pick<AriaAttributes, 'aria-details' | 'aria-describedby' | 'aria-live'> & {
+    /** The value to be displayed inside the Pill */
+    value: number;
+    /**
+     * The variant of the Pill, determining its color scheme
+     * @default 'critical'
+     */
+    variant?: VariantProps<typeof pill>['variant'];
+    /**
+     * Determines if the Pill is visible or not
+     * @default true
+     */
+    isVisible?: VariantProps<typeof pill>['isVisible'];
+    /**
+     * The maximum number of digits to display. If the value exceeds this limit, it will be truncated and a '+' will be appended
+     * @default 2
+     */
+    maxDigits?: number;
+};
+/**
+ * The Pill component displays a count of notifications or other numerical values.
+ */
+declare const Pill: import('react').ForwardRefExoticComponent<Partial<Pick<HTMLDivElement, "id">> & Required<Pick<AriaAttributes, "aria-label">> & Pick<AriaAttributes, "aria-describedby" | "aria-details" | "aria-live"> & {
+    /** The value to be displayed inside the Pill */
+    value: number;
+    /**
+     * The variant of the Pill, determining its color scheme
+     * @default 'critical'
+     */
+    variant?: VariantProps<typeof pill>["variant"];
+    /**
+     * Determines if the Pill is visible or not
+     * @default true
+     */
+    isVisible?: VariantProps<typeof pill>["isVisible"];
+    /**
+     * The maximum number of digits to display. If the value exceeds this limit, it will be truncated and a '+' will be appended
+     * @default 2
+     */
+    maxDigits?: number;
+} & import('react').RefAttributes<HTMLSpanElement>>;
+export { Pill };

package/dist/esm/components/pill/Pill.mjs

@@ -0,0 +1,52 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { tv as o } from "tailwind-variants";
+const y = o({
+  base: "uy-min-w-200 uy-max-w-400 uy-inline-flex uy-items-center uy-justify-center uy-text-center uy-typography-body-small",
+  variants: {
+    variant: {
+      critical: "uy-bg-surface-danger uy-text-content-inverted",
+      info: "uy-bg-surface-primary uy-text-content-inverted",
+      neutral: "uy-bg-surface-neutral-lowest uy-text-content-neutral"
+    },
+    shape: {
+      circle: "uy-rounded-circle",
+      pill: "uy-rounded-pill uy-px-50"
+    },
+    isVisible: {
+      true: "uy-visible",
+      false: "uy-invisible"
+    }
+  },
+  defaultVariants: {
+    variant: "critical",
+    shape: "pill",
+    isVisible: !0
+  }
+}), p = (t, i) => {
+  const e = 10 ** i - 1;
+  return t > e ? `${e}+` : t.toString();
+}, m = c(
+  ({ variant: t = "critical", isVisible: i = !0, maxDigits: e = 2, value: a, ...l }, n) => {
+    const r = p(Math.abs(a), e), u = y({
+      variant: t,
+      isVisible: i,
+      shape: r.length === 1 ? "circle" : "pill"
+    });
+    return /* @__PURE__ */ s(
+      "span",
+      {
+        ...l,
+        ref: n,
+        role: "status",
+        className: u,
+        "aria-atomic": "true",
+        children: r
+      }
+    );
+  }
+);
+m.displayName = "Pill";
+export {
+  m as Pill
+};

package/dist/esm/components/progress-bar/ProgressBar.mjs

@@ -0,0 +1,39 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { ProgressBar as d } from "react-aria-components";
+import { tv as f } from "tailwind-variants";
+const c = f({
+  slots: {
+    base: "uy-rounded-150 uy-bg-surface-neutral-disabled uy-h-150 uy-top-[50%] uy-transform uy-translate-y-[-50%] uy-w-full",
+    meter: "uy-rounded-l-150 uy-absolute uy-h-full uy-top-[50%] uy-transform uy-translate-y-[-50%] uy-rounded-full uy-bg-surface-success"
+  },
+  variants: {
+    isFull: {
+      true: {
+        meter: "uy-rounded-r-150"
+      }
+    }
+  },
+  defaultVariants: {
+    isFull: !1
+  }
+}), p = y(
+  ({ value: s, range: e = [0, 100], ...u }, l) => {
+    const [t, a] = e, o = s >= a, { base: n, meter: i } = c({ isFull: o });
+    return /* @__PURE__ */ r(
+      d,
+      {
+        ref: l,
+        value: s,
+        minValue: t,
+        maxValue: a,
+        "aria-label": u["aria-label"],
+        children: ({ percentage: m }) => /* @__PURE__ */ r("div", { className: n(), children: /* @__PURE__ */ r("div", { className: i(), style: { width: `${m}%` } }) })
+      }
+    );
+  }
+);
+p.displayName = "ProgressBar";
+export {
+  p as ProgressBar
+};

package/dist/esm/components/spinner/Spinner.d.mts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'react';
+export type SpinnerProps = Pick<HTMLAttributes<HTMLDivElement>, 'aria-hidden'> & {
+    /** The label text for the spinner */
+    label: string;
+    /** The size of the spinner, can be 'small' for 16px size or 'medium' for 24px size */
+    size: 'small' | 'medium';
+    /** Te spinner's color, can be 'primary', 'inverted', or 'inherit', which will make it take the element's `currentColor` */
+    color?: 'primary' | 'inverted' | 'inherit';
+};
+export declare const Spinner: import('react').ForwardRefExoticComponent<Pick<HTMLAttributes<HTMLDivElement>, "aria-hidden"> & {
+    /** The label text for the spinner */
+    label: string;
+    /** The size of the spinner, can be 'small' for 16px size or 'medium' for 24px size */
+    size: "small" | "medium";
+    /** Te spinner's color, can be 'primary', 'inverted', or 'inherit', which will make it take the element's `currentColor` */
+    color?: "primary" | "inverted" | "inherit";
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/esm/components/spinner/Spinner.mjs

@@ -0,0 +1,100 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { tv as u } from "tailwind-variants";
+import p from "../../hooks/use-id.mjs";
+import f from "./Spinner.module.css.mjs";
+const b = u({
+  slots: {
+    base: "uy-flex uy-flex-col uy-items-center uy-gap-200",
+    indicator: "",
+    label: "uy-typography-body uy-text-left uy-truncate"
+  },
+  variants: {
+    size: {
+      small: {
+        indicator: "uy-w-200 uy-h-200",
+        label: "uy-hidden"
+      },
+      medium: {
+        indicator: "uy-w-300 uy-h-300"
+      }
+    },
+    color: {
+      primary: {
+        indicator: "uy-text-content-primary"
+      },
+      inverted: {
+        indicator: "uy-text-content-inverted",
+        label: "uy-text-content-inverted"
+      },
+      inherit: {
+        indicator: ""
+      }
+    }
+  },
+  defaultVariants: {
+    size: "small",
+    color: "primary"
+  }
+});
+function n({ label: a, color: l, size: i, ...o }, s) {
+  const r = `uy-spinner-label-${p()}`, {
+    base: c,
+    indicator: d,
+    label: y
+  } = b({
+    size: i,
+    color: l
+  });
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ...o,
+      ref: s,
+      role: "status",
+      className: c(),
+      "aria-labelledby": r,
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ t(
+          "svg",
+          {
+            viewBox: "0 0 100 100",
+            "aria-hidden": "true",
+            className: d(),
+            children: [
+              /* @__PURE__ */ e("title", { children: "Loading" }),
+              /* @__PURE__ */ e(
+                "circle",
+                {
+                  className: f.spinnerCircle,
+                  cx: "50",
+                  cy: "50",
+                  r: "45",
+                  fill: "none",
+                  stroke: "currentColor"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            id: r,
+            className: y(),
+            "aria-hidden": i !== "small",
+            children: a
+          }
+        )
+      ]
+    }
+  );
+}
+n.displayName = "Spinner";
+const w = m(
+  n
+);
+export {
+  w as Spinner
+};

package/dist/esm/components/spinner/Spinner.module.css.mjs

@@ -0,0 +1,10 @@
+const s = "_spinnerCircle_16ssj_25", n = "_spin_16ssj_25", i = {
+  spinnerCircle: s,
+  "arc-shrink": "_arc-shrink_16ssj_1",
+  spin: n
+};
+export {
+  i as default,
+  n as spin,
+  s as spinnerCircle
+};

package/dist/esm/components/spinner/dynamic-content.d.mts

@@ -0,0 +1,2 @@
+declare const DynamicContent: () => JSX.Element;
+export default DynamicContent;

package/dist/esm/components/stepper/Stepper.context.d.mts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+interface StepperContextValue {
+    currentStep: number;
+}
+export declare const StepperContext: import('react').Context<StepperContextValue>;
+export declare function StepperProvider({ children, currentStep, }: PropsWithChildren<StepperContextValue>): JSX.Element;
+export declare function useStepperContext(): StepperContextValue;
+export {};

package/dist/esm/components/tabs/Tabs.context.d.mts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { tabsVariant } from './Tabs.variant.mjs';
+interface TabsContextValue {
+    variant: VariantProps<typeof tabsVariant>['variant'];
+    scrollable: boolean;
+}
+export declare const TabsContext: import('react').Context<TabsContextValue>;
+export declare function TabsProvider({ children, variant, scrollable, }: PropsWithChildren<TabsContextValue>): JSX.Element;
+export declare function useTabsContext(): TabsContextValue;
+export {};

package/dist/esm/components/tabs/Tabs.d.mts

@@ -0,0 +1,12 @@
+import { TabsProps as AriaTabsProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+import { tabsVariant } from './Tabs.variant.mjs';
+export interface TabsProps extends Omit<AriaTabsProps, 'isDisabled' | 'orientation' | 'className' | 'style' | 'disabledKeys' | 'keyboardActivation' | 'slot'>, VariantProps<typeof tabsVariant> {
+    /** set to true to make the tabs scrollable */
+    scrollable?: boolean;
+}
+/**
+ * Tabs allow users to explore and switch between different views.
+ */
+declare const Tabs: import('react').ForwardRefExoticComponent<TabsProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Tabs };

package/dist/esm/components/tabs/Tabs.mjs

@@ -0,0 +1,15 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { Tabs as i } from "react-aria-components";
+import { TabsProvider as p } from "./Tabs.context.mjs";
+import { tabsVariant as b } from "./Tabs.variant.mjs";
+const T = f(
+  ({ children: a, variant: r, scrollable: o = !1, ...m }, t) => {
+    const { base: e } = b({ variant: r, scrollable: o });
+    return /* @__PURE__ */ s(p, { variant: r, scrollable: o, children: /* @__PURE__ */ s(i, { ref: t, className: e(), ...m, children: a }) });
+  }
+);
+T.displayName = "Tabs";
+export {
+  T as Tabs
+};

package/dist/esm/components/tabs/Tabs.variant.d.mts

@@ -0,0 +1,139 @@
+export declare const tabsVariant: import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    tab: string[];
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}>, {
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    tab: string[];
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    tab: string[];
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/dist/esm/components/tabs/Tabs.variant.mjs

@@ -0,0 +1,35 @@
+import { tv as e } from "tailwind-variants";
+const a = e({
+  slots: {
+    base: "uy-w-full",
+    tabList: "uy-flex",
+    tab: [
+      "uy-flex uy-relative uy-shrink-0 uy-gap-100 uy-whitespace-nowrap uy-min-w-[3ch] uy-text-center uy-text-content-form-enabled uy-text-action uy-pt-150 uy-pb-150 uy-pl-200 uy-pr-200 uy-rounded-25 uy-cursor-pointer",
+      'data-[selected]:after:uy-content:" " data-[selected]:after:uy-w-full data-[selected]:after:uy-h-[4px] data-[selected]:after:uy-absolute data-[selected]:after:uy-bottom-[-1px] data-[selected]:after:uy-left-0 data-[selected]:after:uy-right-0',
+      "hover:uy-cursor-pointer focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-[4px]"
+    ]
+  },
+  variants: {
+    variant: {
+      primary: {
+        tab: "data-[selected]:after:uy-bg-border-form-active"
+      },
+      neutral: {
+        tab: "data-[selected]:after:uy-bg-content-neutral"
+      }
+    },
+    scrollable: {
+      true: {
+        tabList: ""
+      },
+      false: {
+        base: "",
+        tabList: "uy-border-b-[1.25px] uy-border-b-border-form-enabled"
+      }
+    }
+  },
+  defaultVariants: { variant: "primary", scrollable: !1 }
+});
+export {
+  a as tabsVariant
+};

package/dist/esm/components/tabs/parts/NavigationButton.d.mts

@@ -0,0 +1,7 @@
+import { ButtonProps } from 'react-aria-components';
+type Direction = 'left' | 'right';
+interface NavigationButtonProps extends Pick<ButtonProps, 'onPress'> {
+    direction: Direction;
+}
+declare const NavigationButton: ({ direction, onPress }: NavigationButtonProps) => JSX.Element;
+export { NavigationButton };

package/dist/esm/components/tabs/parts/NavigationButton.mjs

@@ -0,0 +1,43 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Button as i } from "react-aria-components";
+import { tv as n } from "tailwind-variants";
+import { Icon as a } from "../../icon/Icon.mjs";
+const s = n({
+  slots: {
+    base: "uy-absolute uy-pt-150 uy-pb-150",
+    button: "uy-rounded-circle hover:uy-text-content-neutral-hover focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring",
+    icon: "uy-text-content-neutral-enabled"
+  },
+  variants: {
+    direction: {
+      left: {
+        base: "uy-top-0 uy-left-0 uy-z-10 uy-bg-gradient-to-r uy-from-surface-inverted/0 uy-from-surface-inverted/100 uy-pl-50 uy-pr-200"
+      },
+      right: {
+        base: "uy-right-0 uy-top-0 uy-z-10 uy-bg-gradient-to-l uy-from-surface-inverted/100 uy-from-surface-inverted/0 uy-pl-200 uy-pr-50"
+      }
+    }
+  }
+}), m = ({ direction: t, onPress: u }) => {
+  const { base: o, button: r, icon: l } = s({ direction: t });
+  return /* @__PURE__ */ e("div", { className: o(), children: /* @__PURE__ */ e(
+    i,
+    {
+      id: `scroll-${t}`,
+      className: r(),
+      "aria-label": `Scroll ${t}`,
+      onPress: u,
+      children: /* @__PURE__ */ e(
+        a,
+        {
+          className: l(),
+          "aria-labelledby": `scroll-${t}`,
+          src: t === "left" ? "CaretLeftOutlined" : "CaretRightOutlined"
+        }
+      )
+    }
+  ) });
+};
+export {
+  m as NavigationButton
+};

package/dist/esm/components/tabs/parts/Tab.d.mts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { TabProps as AriaTabProps } from 'react-aria-components';
+export interface TabProps extends Omit<AriaTabProps, 'isDisabled' | 'className' | 'style' | 'download' | 'ping' | 'routerOptions'> {
+    suffix?: ReactNode;
+}
+declare const Tab: import('react').ForwardRefExoticComponent<TabProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Tab };

package/dist/esm/components/tabs/parts/Tab.mjs

@@ -0,0 +1,18 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { Tab as b } from "react-aria-components";
+import { useTabsContext as p } from "../Tabs.context.mjs";
+import { tabsVariant as c } from "../Tabs.variant.mjs";
+const f = l(
+  ({ children: a, suffix: r, ...o }, t) => {
+    const { variant: s, scrollable: m } = p(), { tab: n } = c({ variant: s, scrollable: m });
+    return /* @__PURE__ */ e(b, { ref: t, ...o, className: n(), children: [
+      a,
+      r ? /* @__PURE__ */ i("span", { children: r }) : null
+    ] });
+  }
+);
+f.displayName = "Tab";
+export {
+  f as Tab
+};