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

package/dist/esm/components/select/parts/SelectOption.mjs

@@ -0,0 +1,63 @@
+import { jsx as e, jsxs as y, Fragment as i } from "react/jsx-runtime";
+import l, { forwardRef as f } from "react";
+import { ListBoxItem as p } from "react-aria-components";
+import { tv as m } from "tailwind-variants";
+import { Icon as b } from "../../icon/Icon.mjs";
+import { SelectOptionProvider as x } from "./SelectOption.context.mjs";
+const v = m({
+  base: "uy-flex uy-flex-col uy-typography-body uy-rounded-50 uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-outline-none",
+  variants: {
+    isFocusVisible: {
+      true: "uy-outline-offset-2 uy-outline-2 uy-outline-utility-focus-ring"
+    },
+    isHovered: {
+      true: "uy-bg-surface-neutral-hover uy-text-content-neutral"
+    },
+    isPressed: {
+      true: "uy-bg-surface-neutral-pressed uy-text-content-neutral-pressed"
+    },
+    isSelected: {
+      true: "uy-bg-surface-neutral-active uy-text-content-neutral-active"
+    },
+    isDisabled: {
+      true: "uy-text-content-neutral-disabled"
+    }
+  },
+  compoundVariants: [
+    {
+      isFocusVisible: !1,
+      isHovered: !1,
+      isPressed: !1,
+      isSelected: !1,
+      isDisabled: !1,
+      class: "uy-bg-surface-neutral-enabled uy-text-content-neutral-enabled"
+    }
+  ]
+}), h = f(
+  (s, n) => {
+    const { children: t, isDisabled: u } = s, o = typeof l.Children.toArray(t)[0] == "string" ? l.Children.toArray(t)[0] : void 0;
+    return /* @__PURE__ */ e(
+      p,
+      {
+        ref: n,
+        ...s,
+        textValue: o,
+        className: ({ isHovered: r, isPressed: a, isFocusVisible: c, isSelected: d }) => v({
+          isHovered: r,
+          isPressed: a,
+          isFocusVisible: c,
+          isSelected: d,
+          isDisabled: u
+        }),
+        children: ({ isSelected: r }) => /* @__PURE__ */ e(x, { isDisabled: u, children: r ? /* @__PURE__ */ y("div", { className: "uy-flex uy-justify-between", children: [
+          /* @__PURE__ */ e("div", { className: "uy-flex uy-flex-col", children: /* @__PURE__ */ e(i, { children: t }) }),
+          /* @__PURE__ */ e(b, { src: "CheckOutlined" })
+        ] }) : /* @__PURE__ */ e(i, { children: t }) })
+      }
+    );
+  }
+);
+h.displayName = "SelectOption";
+export {
+  h as SelectOption
+};

package/dist/esm/components/select/parts/SelectOptionHelper.mjs

@@ -0,0 +1,20 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { tv as l } from "tailwind-variants";
+import { useSelectOptionContext as a } from "./SelectOption.context.mjs";
+const p = l({
+  base: "uy-typography-body",
+  variants: {
+    isDisabled: {
+      true: "uy-text-content-neutral-disabled",
+      false: "uy-text-content-neutral-low"
+    }
+  }
+}), i = n(({ children: t }, e) => {
+  const { isDisabled: o } = a(), r = p({ isDisabled: o });
+  return /* @__PURE__ */ s("span", { className: r, ref: e, children: t });
+});
+i.displayName = "SelectOptionHelper";
+export {
+  i as SelectOptionHelper
+};

package/dist/esm/components/select-field/SelectField.d.mts

@@ -0,0 +1,50 @@
+import { ForwardedRef, JSX, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod/lib/types';
+import { Schema } from '../../hooks/use-form.types.mjs';
+import { LabelProps } from '../label/Label.mjs';
+import { SelectProps } from '../select/Select.mjs';
+interface SelectFieldProps<TItems extends object, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'>, Omit<SelectProps<TItems>, 'name' | 'value'> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the select field. */
+    label: string;
+    /** Helper text to display below the text field. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the text field. */
+    feedbackText?: ReactNode;
+}
+type SelectFieldComponent = (<TItems extends object, TSchema extends Schema>(props: SelectFieldProps<TItems, ZodInfer<TSchema>> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `SelectField` component renders a list of options to select one, it is fully integrated with the `Form` component.
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *  vegetable: z.string()
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *    <Form action={handleSubmit}>
+ *      <SelectField<typeof schema>
+ *        name="vegetable"
+ *        label="Vegetables"
+ *        >
+ *        <SelectOption id="Cabbage">Cabbage</SelectOption>
+ *        <SelectOption id="Broccoli">Broccoli</SelectOption>
+ *        <SelectOption id="Carrots">Carrots</SelectOption>
+ *        </SelectField>
+ *    </Form>
+ *   )
+ * }
+ * ```
+ * @note The schema type parameter is needed to ensure type safety with the form's schema. If you omit it, the `name` prop will not be type-safe.
+ */
+declare const SelectField: SelectFieldComponent;
+export { SelectField };

package/dist/esm/components/select-field/SelectField.mjs

@@ -0,0 +1,65 @@
+import { jsxs as y, jsx as o } from "react/jsx-runtime";
+import { forwardRef as S } from "react";
+import { useFormContext as h } from "react-hook-form";
+import { tv as b } from "tailwind-variants";
+import { FormField as j } from "../form-field/FormField.mjs";
+import { FormControl as C } from "../form-field/parts/FormControl.mjs";
+import { FormFeedbackText as N } from "../form-field/parts/FormFeedbackText.mjs";
+import { FormHelperText as g } from "../form-field/parts/FormHelperText.mjs";
+import { FormLabel as k } from "../form-field/parts/FormLabel.mjs";
+import { Select as v } from "../select/Select.mjs";
+const w = b({
+  base: "uy-flex uy-flex-col uy-gap-100"
+}), H = ({
+  children: t,
+  feedbackText: e,
+  helperText: r,
+  isRequired: l,
+  label: i,
+  name: m,
+  requiredVariant: c,
+  isDisabled: n,
+  isInvalid: f,
+  isReadOnly: p,
+  placeholder: s,
+  items: d,
+  ...F
+}, a) => {
+  const { control: u } = h(), x = {
+    isRequired: l,
+    isInvalid: f,
+    isDisabled: n,
+    isReadOnly: p
+  };
+  return /* @__PURE__ */ y(
+    j,
+    {
+      control: u,
+      name: m,
+      className: w(),
+      ...x,
+      children: [
+        /* @__PURE__ */ o(k, { requiredVariant: c, children: i }),
+        r && /* @__PURE__ */ o(g, { children: r }),
+        /* @__PURE__ */ o(C, { children: /* @__PURE__ */ o(
+          v,
+          {
+            ref: a,
+            name: m,
+            placeholder: s,
+            items: d,
+            ...F,
+            children: t
+          }
+        ) }),
+        /* @__PURE__ */ o(N, { children: e })
+      ]
+    }
+  );
+}, I = S(function(e, r) {
+  return H(e, r);
+});
+I.displayName = "SelectField";
+export {
+  I as SelectField
+};

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

@@ -0,0 +1,107 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { tv as p } from "tailwind-variants";
+import f from "../../hooks/use-id.mjs";
+const h = p({
+  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: l, color: o, size: i, role: r = "status", ...s }, c) {
+  const t = `uy-spinner-label-${f()}`, {
+    base: d,
+    indicator: y,
+    label: u
+  } = h({
+    size: i,
+    color: o
+  });
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ...s,
+      ref: c,
+      role: r,
+      className: d(),
+      "aria-labelledby": r === "status" ? t : void 0,
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ a(
+          "svg",
+          {
+            viewBox: "0 0 100 100",
+            "aria-hidden": "true",
+            className: y(),
+            children: [
+              /* @__PURE__ */ e("title", { children: "Loading" }),
+              /* @__PURE__ */ e(
+                "circle",
+                {
+                  cx: "50",
+                  cy: "50",
+                  r: "45",
+                  fill: "none",
+                  stroke: "currentColor",
+                  style: {
+                    "--r": "45px",
+                    "--1deg": "calc(2 * pi * var(--r) / 360)",
+                    strokeWidth: "9.6px",
+                    shapeRendering: "geometricPrecision",
+                    strokeDasharray: "calc(40 * var(--1deg)) calc(80 * var(--1deg))",
+                    transformOrigin: "50% 50%",
+                    animation: "arc-shrink 1.4s ease-in-out infinite, spin 2s linear infinite"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          "span",
+          {
+            id: t,
+            className: u(),
+            "aria-hidden": i !== "small",
+            children: l
+          }
+        )
+      ]
+    }
+  );
+}
+n.displayName = "Spinner";
+const k = m(
+  n
+);
+export {
+  k as Spinner
+};

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>): import("react/jsx-runtime").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.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.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
+};

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

@@ -0,0 +1,56 @@
+import { jsxs as L, jsx as o } from "react/jsx-runtime";
+import { forwardRef as S, useRef as x, useState as i } from "react";
+import { TabList as n } from "react-aria-components";
+import { useTabsContext as N } from "../Tabs.context.mjs";
+import { tabsVariant as T } from "../Tabs.variant.mjs";
+import { NavigationButton as f } from "./NavigationButton.mjs";
+const m = 20, g = S(
+  ({ children: e }, s) => {
+    const r = x(null), [b, d] = i(!1), [u, p] = i(!0), { variant: h, scrollable: l } = N(), { tabList: a } = T({ variant: h, scrollable: l });
+    return l ? /* @__PURE__ */ L("div", { className: "uy-relative", children: [
+      b && /* @__PURE__ */ o(
+        f,
+        {
+          direction: "left",
+          onPress: () => {
+            var t;
+            (t = r.current) == null || t.scrollBy({
+              behavior: "smooth",
+              left: -m
+            });
+          }
+        }
+      ),
+      /* @__PURE__ */ o(
+        "div",
+        {
+          ref: r,
+          "data-testid": "scrollable-tab-list",
+          className: "uy-overflow-x-auto uy-overflow-y-hidden uy-border-b-[1.25px] uy-border-b-border-form-enabled",
+          onScroll: (t) => {
+            const { scrollLeft: c, scrollWidth: v, clientWidth: y } = t.currentTarget;
+            d(c > 0), p(c + y < v);
+          },
+          children: /* @__PURE__ */ o(n, { ref: s, className: a(), children: e })
+        }
+      ),
+      u && /* @__PURE__ */ o(
+        f,
+        {
+          direction: "right",
+          onPress: () => {
+            var t;
+            (t = r.current) == null || t.scrollBy({
+              behavior: "smooth",
+              left: m
+            });
+          }
+        }
+      )
+    ] }) : /* @__PURE__ */ o(n, { ref: s, className: a(), children: e });
+  }
+);
+g.displayName = "TabList";
+export {
+  g as TabList
+};