@payfit/unity-components 0.0.0-alpha.11

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

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

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

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

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

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

@@ -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 { 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

@@ -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 };

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

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