@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/carousel/parts/CarouselSlide.js

@@ -0,0 +1,35 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { uyTv as l } from "@payfit/unity-themes";
+import { useIntl as u } from "react-intl";
+const t = l({
+  // add the component styles
+  base: [
+    "uy:group uy:min-w-0 uy:shrink-0 uy:grow-0",
+    "uy:basis-[calc(var(--uy-carousel-slide-width)-var(--uy-carousel-slide-gap))]",
+    "uy:focus-visible:outline-0"
+  ]
+}), d = a(
+  ({ className: e, ...o }, r) => {
+    const s = u();
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        ...o,
+        ref: r,
+        role: "group",
+        "aria-roledescription": s.formatMessage({
+          id: "unity:component:carousel:slide:roledescription",
+          defaultMessage: "slide"
+        }),
+        "data-unity-slot": "carousel-item",
+        className: t({ className: e })
+      }
+    );
+  }
+);
+d.displayName = "CarouselSlide";
+export {
+  d as CarouselSlide,
+  t as carouselSlide
+};

package/dist/esm/components/carousel/types.d.ts

@@ -0,0 +1,8 @@
+import { UseEmblaCarouselType, default as useEmblaCarousel } from 'embla-carousel-react';
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+export type CarouselApi = UseEmblaCarouselType[1];
+export type CarouselOptions = UseCarouselParameters[0];
+export type CarouselPlugin = UseCarouselParameters[1];
+export type EmblaCarouselRef = ReturnType<typeof useEmblaCarousel>[0];
+export type EmblaCarouselApi = ReturnType<typeof useEmblaCarousel>[1];
+export {};

package/dist/esm/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,102 @@
+import { ReactNode } from 'react';
+import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components/Checkbox';
+export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className'> {
+    /**
+     * The content to display as the checkbox label.
+     * This is required for accessibility.
+     */
+    children: ReactNode;
+    /**
+     * Additional text displayed below the checkbox to provide context or guidance.
+     * Can contain rich content like links or formatted text.
+     */
+    helperText?: ReactNode;
+    /**
+     * Error message displayed when the checkbox is in an invalid state.
+     * Only shown when `isInvalid` is true.
+     */
+    feedbackText?: ReactNode;
+    /**
+     * Controls how the required state is displayed.
+     * - 'required': Shows an asterisk (*) when isRequired is true
+     * - 'optional': Shows "(optional)" text when isRequired is false
+     * @default 'required'
+     */
+    requiredVariant?: 'required' | 'optional';
+    /**
+     * Whether the checkbox is disabled.
+     * When true, the checkbox cannot be interacted with and appears dimmed.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the checkbox is in a read-only state.
+     * When true, the checkbox cannot be modified but maintains normal appearance and can be focused.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the checkbox is in an invalid state.
+     * Use this for form validation feedback.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the checkbox is required.
+     * This affects form validation and the display of required/optional indicators.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Whether the checkbox is selected (controlled).
+     * Use this with `onChange` for controlled checkbox state.
+     */
+    isSelected?: boolean;
+    /**
+     * The default selected state (uncontrolled).
+     * Use this when you don't need to control the checkbox state.
+     * @default false
+     */
+    defaultSelected?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state.
+     * Useful for parent checkboxes in a tree structure.
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Handler called when the checkbox's selected state changes.
+     * @param isSelected The new selected state
+     */
+    onChange?: (isSelected: boolean) => void;
+    /**
+     * Handler called when the checkbox receives focus.
+     */
+    onFocus?: () => void;
+    /**
+     * Handler called when the checkbox loses focus.
+     */
+    onBlur?: () => void;
+    /**
+     * The name of the checkbox when used in a form.
+     */
+    name?: string;
+    /**
+     * The value of the checkbox when used in a form.
+     */
+    value?: string;
+}
+/**
+ * The `Checkbox` component is an accessible form control that allows users to select multiple options from a set.
+ * It follows WAI-ARIA checkbox patterns and is built on top of React Aria Components.
+ * @param {CheckboxProps} props - The props for the `Checkbox` component
+ * @example
+ * ```tsx
+ * import { Checkbox } from '@payfit/unity-components'
+ *
+ * <Checkbox>Accept terms and conditions</Checkbox>
+ * ```
+ * @see {@link CheckboxProps} for all available props
+ */
+declare const Checkbox: import('react').ForwardRefExoticComponent<CheckboxProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { Checkbox };

package/dist/esm/components/checkbox/Checkbox.js

@@ -0,0 +1,106 @@
+import { jsxs as r, jsx as e, Fragment as B } from "react/jsx-runtime";
+import { forwardRef as R, isValidElement as h, cloneElement as f } from "react";
+import { Checkbox as D } from "react-aria-components/Checkbox";
+import { useId as E } from "react-aria/useId";
+import { Text as N } from "../text/Text.js";
+import { checkbox as V } from "./Checkbox.variants.js";
+import { CheckboxIndicator as F } from "./parts/CheckboxIndicator.js";
+const L = R(
+  ({ children: v, helperText: i, feedbackText: l, ...o }, u) => {
+    const a = E(), {
+      isDisabled: t,
+      isReadOnly: d,
+      isInvalid: s,
+      isRequired: n,
+      requiredVariant: c = "required",
+      ...x
+    } = o, {
+      base: g,
+      wrapper: $,
+      label: k,
+      asterisk: C,
+      optionalTag: q,
+      descriptionsContainer: w,
+      helperText: m,
+      feedbackText: b
+    } = V({
+      isDisabled: t,
+      isReadOnly: d,
+      isInvalid: s
+    }), p = [o["aria-labelledby"], `${a}-label`].filter(Boolean), y = [
+      o["aria-describedby"],
+      typeof i == "string" ? `${a}-helper-text` : void 0,
+      typeof l == "string" ? `${a}-feedback-text` : void 0
+    ].filter(Boolean), I = p.length > 0 ? p.join(" ") : void 0, S = y.length > 0 ? y.join(" ") : void 0;
+    return /* @__PURE__ */ r("div", { className: g(), children: [
+      /* @__PURE__ */ e(
+        D,
+        {
+          ...x,
+          isInvalid: s,
+          ref: u,
+          className: $(),
+          "aria-labelledby": I,
+          "aria-describedby": S,
+          isDisabled: t,
+          isReadOnly: d,
+          children: (j) => /* @__PURE__ */ r(B, { children: [
+            /* @__PURE__ */ e(
+              F,
+              {
+                ...j,
+                className: "uy:mt-25 uy:ml-0"
+              }
+            ),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                id: `${a}-label`,
+                className: k(),
+                "data-dd-privacy": "allow",
+                children: v
+              }
+            ),
+            c === "required" && n && /* @__PURE__ */ r("span", { className: C(), children: [
+              "*",
+              /* @__PURE__ */ e("span", { className: "uy:sr-only", children: "required" })
+            ] }),
+            c === "optional" && !n && /* @__PURE__ */ e("span", { className: q(), children: "(optional)" })
+          ] })
+        }
+      ),
+      (i || l) && /* @__PURE__ */ r("div", { className: w(), "data-dd-privacy": "allow", children: [
+        typeof i == "string" ? /* @__PURE__ */ e(
+          N,
+          {
+            variant: "bodySmall",
+            color: "content.neutral.low",
+            id: `${a}-helper-text`,
+            className: m(),
+            children: i
+          }
+        ) : h(i) && f(i, {
+          "data-id": `${a}-helper-text`,
+          className: m()
+        }),
+        s && (typeof l == "string" ? /* @__PURE__ */ e(
+          N,
+          {
+            variant: "bodySmallStrong",
+            color: "content.form.invalid",
+            id: `${a}-feedback-text`,
+            className: b(),
+            children: l
+          }
+        ) : h(l) && f(l, {
+          "data-id": `${a}-feedback-text`,
+          className: b()
+        }))
+      ] })
+    ] });
+  }
+);
+L.displayName = "Checkbox";
+export {
+  L as Checkbox
+};

package/dist/esm/components/checkbox/Checkbox.variants.d.ts

@@ -0,0 +1,70 @@
+export declare const checkbox: import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    wrapper: string[];
+    label: string;
+    asterisk: string;
+    optionalTag: string;
+    descriptionsContainer: string;
+    helperText: string[];
+    feedbackText: string;
+}, undefined, {
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    wrapper: string[];
+    label: string;
+    asterisk: string;
+    optionalTag: string;
+    descriptionsContainer: string;
+    helperText: string[];
+    feedbackText: string;
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            base: string;
+        };
+    };
+    isInvalid: {
+        true: {};
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    wrapper: string[];
+    label: string;
+    asterisk: string;
+    optionalTag: string;
+    descriptionsContainer: string;
+    helperText: string[];
+    feedbackText: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/esm/components/checkbox/Checkbox.variants.js

@@ -0,0 +1,82 @@
+import { uyTv as e } from "@payfit/unity-themes";
+const r = e({
+  slots: {
+    base: [
+      "uy:group uy:inline-flex uy:flex-col",
+      "uy:rounded-md uy:sm:rounded-25",
+      "uy:px-150 uy:sm:px-0 uy:py-125 uy:sm:py-px",
+      "uy:border uy:sm:border-none uy:border-solid uy:border-border-neutral-enabled",
+      'uy:has-data-[focus-visible="true"]:outline-2 uy:has-data-[focus-visible="true"]:outline-utility-focus-ring uy:has-data-[focus-visible="true"]:outline-offset-2',
+      "uy:has-data-[disabled=true]:border-border-neutral-disabled",
+      "uy:has-data-[readonly=true]:border-border-neutral-disabled"
+    ],
+    wrapper: [
+      "uy:group uy:sm:rounded-25 uy:leading-none uy:sm:leading-[1lh]",
+      "uy:inline-flex uy:items-center",
+      "uy:typography-body uy:text-content-form-enabled",
+      "uy:data-[disabled=true]:text-content-form-disabled uy:data-[disabled]:cursor-not-allowed",
+      "uy:data-[readonly=true]:cursor-not-allowed uy:theme-rebrand:data-[readonly=true]:text-content-form-read-only"
+    ],
+    label: "uy:ml-75 uy:leading-[1]",
+    asterisk: "uy:text-content-danger uy:ml-25",
+    optionalTag: "uy:typography-body uy:leading-1 uy:ml-25",
+    descriptionsContainer: "uy:ml-300 uy:leading-1 uy:inline-flex uy:flex-col",
+    helperText: [
+      "uy:block uy:typography-body-small uy:text-content-neutral-low uy:mt-50"
+    ],
+    feedbackText: "uy:typography-body-small-strong uy:text-content-form-invalid uy:mt-50"
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        base: "uy:text-content-form-disabled!"
+      }
+    },
+    isInvalid: {
+      true: {}
+    },
+    isReadOnly: {
+      true: {
+        base: "uy:cursor-not-allowed"
+      }
+    }
+  },
+  defaultVariants: {
+    isDisabled: !1,
+    isInvalid: !1,
+    isReadOnly: !1
+  },
+  compoundVariants: [
+    {
+      isDisabled: !1,
+      isReadOnly: !1,
+      className: {
+        wrapper: "uy:cursor-pointer"
+      }
+    },
+    {
+      isDisabled: !0,
+      isReadOnly: !1,
+      className: {
+        wrapper: "uy:cursor-not-allowed"
+      }
+    },
+    {
+      isDisabled: !1,
+      isReadOnly: !0,
+      className: {
+        wrapper: "uy:cursor-not-allowed"
+      }
+    },
+    {
+      isDisabled: !0,
+      isReadOnly: !0,
+      className: {
+        wrapper: "uy:cursor-not-allowed"
+      }
+    }
+  ]
+});
+export {
+  r as checkbox
+};

package/dist/esm/components/checkbox/CheckboxStandalone.d.ts

@@ -0,0 +1,63 @@
+import { ReactNode } from 'react';
+import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components/Checkbox';
+export interface CheckboxStandaloneProps extends AriaCheckboxProps {
+    /**
+     * The content to display as the checkbox label.
+     * This is required for accessibility.
+     */
+    children: ReactNode;
+    /**
+     * Whether the checkbox is disabled.
+     * When true, the checkbox cannot be interacted with and appears dimmed.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the checkbox is in a read-only state.
+     * When true, the checkbox cannot be modified but maintains normal appearance and can be focused.
+     * @default false
+     */
+    isReadOnly?: boolean;
+    /**
+     * Whether the checkbox is in an invalid state.
+     * Use this for form validation feedback.
+     * @default false
+     */
+    isInvalid?: boolean;
+    /**
+     * Whether the checkbox is selected (controlled).
+     * Use this with `onChange` for controlled checkbox state.
+     */
+    isSelected?: boolean;
+    /**
+     * The default selected state (uncontrolled).
+     * Use this when you don't need to control the checkbox state.
+     * @default false
+     */
+    defaultSelected?: boolean;
+    /**
+     * Whether the checkbox is in an indeterminate state.
+     * Useful for parent checkboxes in a tree structure.
+     * @default false
+     */
+    isIndeterminate?: boolean;
+    /**
+     * Handler called when the checkbox's selected state changes.
+     * @param isSelected The new selected state
+     */
+    onChange?: (isSelected: boolean) => void;
+    /**
+     * Handler called when the checkbox receives focus.
+     */
+    onFocus?: () => void;
+    /**
+     * Handler called when the checkbox loses focus.
+     */
+    onBlur?: () => void;
+}
+/**
+ * This is an inner version of the checkbox that does not have any label.
+ * Used for internal purposes as part of other components, like table row selection.
+ */
+declare const CheckboxStandalone: import('react').ForwardRefExoticComponent<CheckboxStandaloneProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { CheckboxStandalone };

package/dist/esm/components/checkbox/CheckboxStandalone.js

@@ -0,0 +1,30 @@
+import { jsx as e, jsxs as f, Fragment as h } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { Checkbox as p } from "react-aria-components/Checkbox";
+import { useId as y } from "react-aria/useId";
+import { checkbox as k } from "./Checkbox.variants.js";
+import { CheckboxIndicator as C } from "./parts/CheckboxIndicator.js";
+const I = x(({ children: r, ...a }, i) => {
+  const o = y(), { isDisabled: n, isReadOnly: s, isInvalid: d } = a, { base: t, wrapper: c } = k({
+    isDisabled: n,
+    isReadOnly: s,
+    isInvalid: d
+  }), l = [a["aria-labelledby"], `${o}-label`].filter(Boolean), m = l.length > 0 ? l.join(" ") : void 0;
+  return /* @__PURE__ */ e("div", { className: t(), children: /* @__PURE__ */ e(
+    p,
+    {
+      ...a,
+      ref: i,
+      className: c(),
+      "aria-labelledby": m,
+      children: (b) => /* @__PURE__ */ f(h, { children: [
+        /* @__PURE__ */ e(C, { ...b }),
+        /* @__PURE__ */ e("span", { id: `${o}-label`, className: "uy:sr-only", children: r })
+      ] })
+    }
+  ) });
+});
+I.displayName = "CheckboxStandalone";
+export {
+  I as CheckboxStandalone
+};

package/dist/esm/components/checkbox/TanstackCheckbox.d.ts

@@ -0,0 +1,28 @@
+import { CheckboxProps } from './Checkbox.js';
+export type TanstackCheckboxProps = Omit<CheckboxProps, 'name' | 'selected' | 'defaultSelected' | 'isInvalid'>;
+/**
+ * `TanstackCheckbox` is a controlled checkbox wired to the TanStack Form field context.
+ * It is based on the Unity `Checkbox` component.
+ *
+ * Value, invalid state, and events are driven by the TanStack field API.
+ *
+ * Example:
+ * ```tsx
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ acceptTerms: boolean }>({ validators: {} })
+ *   return (
+ *     <form>
+ *       <form.AppField name="acceptTerms">
+ *         {() => (
+ *           <TanstackCheckbox>
+ *             I accept the terms and conditions
+ *           </TanstackCheckbox>
+ *         )}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackCheckbox: import('react').ForwardRefExoticComponent<TanstackCheckboxProps & import('react').RefAttributes<HTMLLabelElement>>;
+export { TanstackCheckbox };

package/dist/esm/components/checkbox/TanstackCheckbox.js

@@ -0,0 +1,51 @@
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { useFieldContext as k } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as C } from "../form-field/TanstackFormField.context.js";
+import { Checkbox as y } from "./Checkbox.js";
+const I = u(
+  ({
+    children: i,
+    value: r,
+    isIndeterminate: d,
+    onBlur: n,
+    onChange: l,
+    isReadOnly: s,
+    isDisabled: c,
+    isRequired: m,
+    requiredVariant: b,
+    ...f
+  }, h) => {
+    const e = k(), a = C(), x = e.state.meta.isTouched && !e.state.meta.isValid, t = [a.helperTextId, a.feedbackTextId].filter(Boolean).join(" ");
+    return /* @__PURE__ */ p(
+      y,
+      {
+        ...f,
+        id: a.inputId,
+        ref: h,
+        value: r,
+        isSelected: e.state.value,
+        isIndeterminate: d,
+        requiredVariant: b,
+        isRequired: m,
+        onChange: (o) => {
+          e.handleChange(o), l?.(o);
+        },
+        onBlur: () => {
+          e.handleBlur(), n?.();
+        },
+        isReadOnly: s,
+        isDisabled: c,
+        isInvalid: x,
+        "aria-labelledby": a.labelId,
+        "aria-describedby": t.length > 0 ? t : void 0,
+        "aria-details": a.contextualLinkId,
+        children: i
+      }
+    );
+  }
+);
+I.displayName = "TanstackCheckbox";
+export {
+  I as TanstackCheckbox
+};

package/dist/esm/components/checkbox/parts/CheckboxIndicator.d.ts

@@ -0,0 +1,13 @@
+export interface CheckboxIndicatorProps {
+    isDisabled?: boolean;
+    isSelected?: boolean;
+    isIndeterminate?: boolean;
+    isInvalid?: boolean;
+    isReadOnly?: boolean;
+    className?: string;
+}
+declare function CheckboxIndicator({ isSelected, isDisabled, isIndeterminate, isInvalid, isReadOnly, className, }: CheckboxIndicatorProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CheckboxIndicator {
+    var displayName: string;
+}
+export { CheckboxIndicator };