@payfit/unity-components 2.46.11 → 2.46.13

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

@@ -1,35 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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

@@ -1,70 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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 };