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

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

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

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

@@ -1,123 +0,0 @@
-export declare const checkbox: import('tailwind-variants').TVReturnType<{
-    isDisabled: {
-        true: {
-            base: string;
-        };
-    };
-    isInvalid: {
-        true: {};
-    };
-    isReadOnly: {
-        true: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    wrapper: string;
-    asterisk: string;
-    optionalTag: string;
-    descriptionsContainer: string;
-    helperText: string;
-    feedbackText: string;
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
-    isDisabled: {
-        true: {
-            base: string;
-        };
-    };
-    isInvalid: {
-        true: {};
-    };
-    isReadOnly: {
-        true: {
-            base: string;
-        };
-    };
-}, {
-    isDisabled: {
-        true: {
-            base: string;
-        };
-    };
-    isInvalid: {
-        true: {};
-    };
-    isReadOnly: {
-        true: {
-            base: string;
-        };
-    };
-}>, {
-    isDisabled: {
-        true: {
-            base: string;
-        };
-    };
-    isInvalid: {
-        true: {};
-    };
-    isReadOnly: {
-        true: {
-            base: string;
-        };
-    };
-}, {
-    base: string;
-    wrapper: 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;
-    asterisk: string;
-    optionalTag: string;
-    descriptionsContainer: string;
-    helperText: string;
-    feedbackText: string;
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
-    isDisabled: {
-        true: {
-            base: string;
-        };
-    };
-    isInvalid: {
-        true: {};
-    };
-    isReadOnly: {
-        true: {
-            base: string;
-        };
-    };
-}, {
-    isDisabled: {
-        true: {
-            base: string;
-        };
-    };
-    isInvalid: {
-        true: {};
-    };
-    isReadOnly: {
-        true: {
-            base: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;

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

@@ -1,65 +0,0 @@
-import { tv as e } from "tailwind-variants";
-const s = e({
-  slots: {
-    base: "uy-group uy-inline-flex uy-flex-col uy-gap-50 uy-py-[1px]",
-    wrapper: "uy-inline-flex uy-items-center uy-gap-[2px] uy-typography-body uy-text-content-form-enabled data-[focus-visible]:uy-outline data-[focus-visible]:uy-outline-[2px] data-[focus-visible]:uy-outline-utility-focus-ring data-[focus-visible]:uy-outline-offset-2 uy-rounded-25",
-    asterisk: "uy-text-content-danger",
-    optionalTag: "uy-typography-body",
-    descriptionsContainer: "uy-ml-300 uy-leading-0 uy-inline-flex uy-flex-col uy-gap-50",
-    helperText: "uy-typography-body-small uy-text-content-neutral-low",
-    feedbackText: "uy-typography-body-small-strong uy-text-content-form-invalid"
-  },
-  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 {
-  s 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';
-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 { useId as p } from "react-aria";
-import { Checkbox as y } from "react-aria-components";
-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 = p(), { 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(
-    y,
-    {
-      ...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/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 };

package/dist/esm/components/checkbox/parts/CheckboxIndicator.js

@@ -1,146 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { tv as u } from "tailwind-variants";
-const c = u({
-  slots: {
-    base: [
-      "uy-flex uy-items-center uy-justify-center uy-rounded-50 uy-w-200 uy-h-200 uy-text-content-inverted uy-border uy-border-solid uy-transition-all uy-duration-100"
-    ],
-    checkmark: [
-      "uy-w-[16px] uy-fill-none uy-stroke-[2px] uy-stroke-content-inverted uy-transition-all uy-duration-500"
-    ]
-  },
-  variants: {
-    isSelected: {
-      true: {
-        base: "uy-border-border-form-active uy-bg-surface-form-active"
-      }
-    },
-    isDisabled: {
-      true: ""
-    },
-    isReadOnly: {
-      true: ""
-    },
-    isInvalid: {
-      true: ""
-    }
-  },
-  defaultVariants: {
-    isSelected: !1,
-    isDisabled: !1,
-    isInvalid: !1,
-    isReadOnly: !1
-  },
-  compoundVariants: [
-    {
-      isSelected: !1,
-      isDisabled: !1,
-      isInvalid: !1,
-      isReadOnly: !1,
-      className: {
-        base: "uy-border-border-form-enabled uy-bg-surface-form-enabled"
-      }
-    },
-    {
-      isSelected: !1,
-      isDisabled: !0,
-      className: {
-        base: "!uy-bg-surface-form-disabled uy-border-border-form-disabled",
-        checkmark: "uy-text-transparent"
-      }
-    },
-    {
-      isSelected: !0,
-      isDisabled: !0,
-      className: {
-        base: "!uy-bg-surface-form-disabled uy-border-border-form-disabled",
-        checkmark: "uy-text-border-form-disabled"
-      }
-    },
-    {
-      isSelected: !1,
-      isInvalid: !0,
-      className: {
-        base: "uy-border-border-form-error uy-bg-surface-form-enabled",
-        checkmark: "uy-text-transparent"
-      }
-    },
-    {
-      isSelected: !0,
-      isInvalid: !0,
-      className: {
-        base: "!uy-border-border-danger !uy-bg-surface-danger",
-        checkmark: "uy-text-content-inverted"
-      }
-    },
-    {
-      isSelected: !1,
-      isReadOnly: !0,
-      className: {
-        base: "uy-border-border-form-disabled uy-bg-surface-form-disabled",
-        checkmark: "uy-text-transparent"
-      }
-    },
-    {
-      isSelected: !0,
-      isReadOnly: !0,
-      className: {
-        base: "!uy-bg-surface-form-disabled uy-border-border-form-disabled",
-        checkmark: "uy-text-border-form-read-only"
-      }
-    }
-  ]
-});
-function n({
-  isSelected: r,
-  isDisabled: s,
-  isIndeterminate: a,
-  isInvalid: t,
-  isReadOnly: d,
-  className: o
-}) {
-  const { base: i, checkmark: l } = c({
-    isSelected: r || a,
-    isDisabled: s,
-    isInvalid: t,
-    isReadOnly: d
-  });
-  return /* @__PURE__ */ e("div", { className: i({ className: o }), "data-dd-privacy": "mask", children: /* @__PURE__ */ e(
-    "svg",
-    {
-      fill: "none",
-      stroke: "currentColor",
-      viewBox: "0 0 16 16",
-      "aria-hidden": "true",
-      className: l(),
-      style: {
-        strokeDashoffset: r ? 44 : 66
-      },
-      children: a ? /* @__PURE__ */ e(
-        "rect",
-        {
-          x: "3",
-          y: "7",
-          width: "10",
-          height: "2",
-          rx: "0.5",
-          stroke: "none",
-          fill: "currentColor"
-        }
-      ) : /* @__PURE__ */ e(
-        "polyline",
-        {
-          points: "3.5,8 6.5,11 12.5,5",
-          stroke: "currentColor",
-          strokeDasharray: "22",
-          strokeLinecap: "butt",
-          strokeLinejoin: "bevel"
-        }
-      )
-    }
-  ) });
-}
-n.displayName = "CheckboxIndicator";
-export {
-  n as CheckboxIndicator
-};