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

package/dist/esm/components/checkbox-group/CheckboxGroup.d.mts

@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+import { CheckboxGroupProps as AriaCheckboxGroupProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+export declare const checkboxGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy-flex uy-flex-col uy-gap-50", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-flex uy-flex-col uy-gap-50", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export interface CheckboxGroupProps extends VariantProps<typeof checkboxGroup>, Omit<AriaCheckboxGroupProps, 'className' | 'class'> {
+    /** The label for the checkbox group. */
+    label: string;
+    /** Helper text to display below the checkbox group. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the checkbox group. */
+    feedbackText?: ReactNode;
+    /** The default selected values of the checkbox group. */
+    defaultValue?: string[];
+    /** The current selected values of the checkbox group (controlled). */
+    value?: string[];
+    /** Whether the checkbox group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the checkbox group is read-only. */
+    isReadOnly?: boolean;
+    /** Whether the checkbox group is invalid. */
+    isInvalid?: boolean;
+    /** Whether the checkbox group is required. */
+    isRequired?: boolean;
+    /** Whether the checkbox group is loading. */
+    isLoading?: boolean;
+    /** The variant of the required indicator. */
+    requiredVariant?: 'required' | 'optional';
+    /** Callback when the selection changes. */
+    onChange?: (value: string[]) => void;
+    /**
+     * Handler called when the checkbox receives focus.
+     */
+    onFocus?: AriaCheckboxGroupProps['onFocus'];
+    /**
+     * Handler called when the checkbox loses focus.
+     */
+    onBlur?: AriaCheckboxGroupProps['onBlur'];
+    /**
+     * Handler that is called when the element's focus status changes.
+     * @param isFocused
+     */
+    onFocusChange?: (isFocused: boolean) => void;
+    children: ReactNode;
+}
+/**
+ * The `CheckboxGroup` component is an accessible group of related checkboxes.
+ * It provides a way to select multiple options from a list of choices.
+ * @param {CheckboxGroupProps} props - The props for the `CheckboxGroup` component
+ * @example
+ * ```tsx
+ * import { CheckboxGroup, Checkbox } from '@payfit/unity-components'
+ *
+ * <CheckboxGroup
+ *   label="Notification preferences"
+ *   helperText="Choose how you want to receive notifications"
+ * >
+ *   <Checkbox value="email">Email notifications</Checkbox>
+ *   <Checkbox value="sms">SMS notifications</Checkbox>
+ *   <Checkbox value="push">Push notifications</Checkbox>
+ * </CheckboxGroup>
+ * ```
+ * @see {@link CheckboxProps} for all available props
+ */
+declare const CheckboxGroup: import('react').ForwardRefExoticComponent<CheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { CheckboxGroup };

package/dist/esm/components/checkbox-group/CheckboxGroup.mjs

@@ -0,0 +1,66 @@
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
+import { forwardRef as x, isValidElement as h, cloneElement as d } from "react";
+import { CheckboxGroup as g } from "react-aria-components";
+import { tv as b } from "tailwind-variants";
+import { Label as G } from "../label/Label.mjs";
+import { Text as n } from "../text/Text.mjs";
+const v = b({
+  base: "uy-flex uy-flex-col uy-gap-50"
+}), C = x(
+  ({
+    label: l,
+    helperText: t,
+    feedbackText: o,
+    isDisabled: s,
+    isReadOnly: c,
+    isInvalid: m,
+    isRequired: e,
+    isLoading: p,
+    children: a,
+    requiredVariant: i,
+    ...u
+  }, y) => /* @__PURE__ */ f(
+    g,
+    {
+      ...{
+        isDisabled: s,
+        isReadOnly: c,
+        isInvalid: m,
+        isRequired: e,
+        isLoading: p
+      },
+      ...u,
+      ref: y,
+      className: v(),
+      children: [
+        l && /* @__PURE__ */ r(G, { isRequired: e, requiredVariant: i, children: l }),
+        t && /* @__PURE__ */ r(
+          n,
+          {
+            variant: "bodySmall",
+            color: "content.neutral.low",
+            slot: "description",
+            children: t
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: "uy-mt-100 uy-flex uy-flex-col uy-gap-150 uy-py-25", children: a }),
+        m && (typeof o == "string" ? /* @__PURE__ */ r(
+          n,
+          {
+            variant: "bodySmallStrong",
+            color: "content.form.invalid",
+            slot: "errorMessage",
+            children: o
+          }
+        ) : h(o) && d(o, {
+          slot: "errorMessage"
+        }))
+      ]
+    }
+  )
+);
+C.displayName = "CheckboxGroup";
+export {
+  C as CheckboxGroup,
+  v as checkboxGroup
+};

package/dist/esm/components/checkbox-group-field/CheckboxGroupField.d.mts

@@ -0,0 +1,79 @@
+import { ForwardedRef, JSX, PropsWithChildren, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.mjs';
+import { CheckboxGroupProps } from '../checkbox-group/CheckboxGroup.mjs';
+import { LabelProps } from '../label/Label.mjs';
+interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends PropsWithChildren<Pick<LabelProps, 'isRequired' | 'requiredVariant'>> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the checkbox group. */
+    label: string;
+    /** Helper text to display below the checkbox group. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the checkbox group. */
+    contextualLink?: ReactNode;
+    /** The default selected values of the checkbox group. */
+    defaultValue?: string[];
+    /** Whether the checkbox group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the checkbox group is read-only. */
+    isReadOnly?: boolean;
+    /** Whether the checkbox group is invalid. */
+    isInvalid?: boolean;
+    /** Whether the checkbox group is loading. */
+    isLoading?: boolean;
+    /** Callback when the selection changes. */
+    onChange?: (value: string[]) => void;
+    /**
+     * Handler called when the checkbox receives focus.
+     */
+    onFocus?: CheckboxGroupProps['onFocus'];
+    /**
+     * Handler called when the checkbox loses focus.
+     */
+    onBlur?: CheckboxGroupProps['onBlur'];
+    /**
+     * Handler that is called when the element's focus status changes.
+     * @param isFocused
+     */
+    onFocusChange?: (isFocused: boolean) => void;
+}
+export type CheckboxGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName>;
+type CheckboxGroupFieldComponent = (<TSchema extends Schema>(props: CheckboxGroupFieldProps<ZodInfer<TSchema>> & {
+    ref?: ForwardedRef<HTMLDivElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `CheckboxGroupField` component renders a group of related checkboxes that can be used in forms.
+ * It integrates with the `Form` component automatically and provides form validation, helper text,
+ * and error feedback.
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *   preferences: z.array(z.string())
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <CheckboxGroupField<typeof schema>
+ *         name="preferences"
+ *         label="Select your preferences"
+ *         helperText="Choose all that apply"
+ *       >
+ *         <Checkbox value="email">Email notifications</Checkbox>
+ *         <Checkbox value="sms">SMS notifications</Checkbox>
+ *       </CheckboxGroupField>
+ *     </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 CheckboxGroupField: CheckboxGroupFieldComponent;
+export { CheckboxGroupField };

package/dist/esm/components/checkbox-group-field/CheckboxGroupField.mjs

@@ -0,0 +1,54 @@
+import { jsxs as k, jsx as t } from "react/jsx-runtime";
+import { forwardRef as C } from "react";
+import { useFormContext as a } from "react-hook-form";
+import { CheckboxGroup as G } from "../checkbox-group/CheckboxGroup.mjs";
+import { FormField as j } from "../form-field/FormField.mjs";
+import { FormControl as w } from "../form-field/parts/FormControl.mjs";
+import { FormFeedbackText as y } from "../form-field/parts/FormFeedbackText.mjs";
+function P({
+  name: o,
+  label: r,
+  defaultValue: e,
+  helperText: m,
+  contextualLink: c,
+  isRequired: i,
+  isInvalid: n,
+  isLoading: p,
+  isDisabled: f,
+  isReadOnly: l,
+  requiredVariant: d,
+  children: s,
+  ...u
+}, x) {
+  const { control: F, watch: h } = a(), b = h(o);
+  return /* @__PURE__ */ k(j, { control: F, name: o, ...{
+    isRequired: i,
+    isInvalid: n,
+    isLoading: p,
+    isDisabled: f,
+    isReadOnly: l
+  }, children: [
+    /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t(
+      G,
+      {
+        ref: x,
+        label: r,
+        defaultValue: e,
+        value: b,
+        helperText: m,
+        feedbackText: /* @__PURE__ */ t(y, {}),
+        requiredVariant: d,
+        ...u,
+        children: s
+      }
+    ) }),
+    c
+  ] });
+}
+const T = C(function(r, e) {
+  return P(r, e);
+});
+T.displayName = "CheckboxGroupField";
+export {
+  T as CheckboxGroupField
+};

package/dist/esm/components/date-picker/DatePicker.mjs

@@ -0,0 +1,163 @@
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { forwardRef as W } from "react";
+import { DatePicker as I, Group as P, Button as U, Popover as j } from "react-aria-components";
+import { useIntl as E } from "react-intl";
+import { tv as c } from "tailwind-variants";
+import { Icon as M } from "../icon/Icon.mjs";
+import { DateCalendar as O } from "./parts/DateCalendar.mjs";
+import { DateInput as R } from "./parts/DateInput.mjs";
+const G = c({
+  slots: {
+    base: [
+      "uy-group uy-flex uy-h-500 uy-border uy-rounded-100",
+      "active:uy-border-border-form-active data-[focus-visible]:uy-border-border-form-active"
+    ],
+    inputWrapper: [
+      "uy-flex uy-grow uy-rounded-75 uy-outline-none",
+      // Show focus styles when input wrapper is focused AND button is not focused
+      "focus-within:uy-outline-2 focus-within:uy-outline-utility-focus-ring focus-within:uy-outline-offset-2",
+      // Hide focus styles when button is focused
+      "group-[:has(button:focus)]:data-[focus-within]:uy-outline-none group-[:has(button:focus)]:data-[focus-within]:uy-outline-offset-0 group-[:has(button:focus)]:data-[focus-within]:uy-outline-transparent"
+    ],
+    suffix: [
+      "uy-flex-grow-0 uy-content-center uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-border-l uy-rounded-r-100",
+      "hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-pressed active:uy-border-border-form-active data-[pressed]:uy-bg-surface-neutral-pressed data-[pressed]:uy-border-border-form-active",
+      "focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-[3px]"
+    ]
+  },
+  variants: {
+    isInvalid: {
+      true: {
+        base: "uy-border-border-form-error uy-bg-surface-form-error",
+        suffix: "uy-bg-surface-form-error uy-border-border-form-error"
+      }
+    },
+    isReadOnly: {
+      true: {
+        base: "uy-border-border-form-disabled uy-bg-surface-form-disabled",
+        inputWrapper: "uy-border-border-form-disabled uy-bg-surface-form-disabled",
+        suffix: "uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"
+      }
+    },
+    isDisabled: {
+      true: {
+        base: "uy-border-border-form-disabled uy-bg-surface-form-disabled",
+        inputWrapper: "uy-bg-surface-form-disabled uy-text-content-form-disabled",
+        suffix: "uy-bg-surface-form-disabled uy-border-border-form-disabled uy-text-content-form-disabled"
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      isInvalid: !1,
+      isDisabled: !1,
+      isReadOnly: !1,
+      className: {
+        base: "uy-border-border-form-enabled uy-bg-surface-form-enabled",
+        suffix: "uy-border-border-form-enabled uy-bg-surface-neutral-low uy-text-content-form-enabled"
+      }
+    }
+  ]
+}), $ = c({
+  base: "uy-overflow-auto uy-shadow-floating uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-rounded-75",
+  variants: {
+    isEntering: {
+      true: "uy-animate-in uy-fade-in data-[placement-bottom]:uy-slide-in-from-top-1 data-[placement-top]:uy-slide-in-from-bottom-1 uy-duration-200 uy-ease-out"
+    },
+    isExiting: {
+      true: "uy-animate-out uy-fade-out data-[placement-bottom]:uy-slide-out-to-top-1 data-[placement-top]:uy-slide-out-to-bottom-1 uy-duration-150 uy-ease-in"
+    }
+  }
+}), q = W(
+  ({
+    value: l,
+    defaultValue: n,
+    isInvalid: b,
+    isLoading: p,
+    isDisabled: t,
+    isReadOnly: u,
+    onClearButtonPress: d,
+    onBlur: o,
+    onFocus: i,
+    onChange: s,
+    onOpenChange: f,
+    id: v,
+    ...e
+  }, z) => {
+    const g = E(), { base: x, inputWrapper: h, suffix: D } = G({
+      isInvalid: !!b,
+      isReadOnly: !!u,
+      isDisabled: !!t
+    }), y = (r) => {
+      s == null || s(r ?? void 0);
+    }, w = (r) => {
+      f == null || f(r), r ? i == null || i() : o == null || o();
+    }, k = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, V = () => {
+      d == null || d();
+    };
+    return /* @__PURE__ */ m(
+      I,
+      {
+        ...e,
+        className: x(),
+        value: l,
+        defaultValue: n,
+        minValue: e.minValue,
+        maxValue: e.maxValue,
+        isReadOnly: !!u,
+        isDisabled: !!t,
+        onChange: y,
+        onFocus: i,
+        onBlur: o,
+        onOpenChange: w,
+        isDateUnavailable: k,
+        children: [
+          /* @__PURE__ */ m(P, { className: h(), id: v, children: [
+            /* @__PURE__ */ a(
+              R,
+              {
+                isLoading: p,
+                isDisabled: t,
+                isReadOnly: u,
+                isInvalid: b,
+                onClearButtonPress: V
+              }
+            ),
+            /* @__PURE__ */ a(U, { className: D(), isDisabled: u || t, children: /* @__PURE__ */ a(
+              M,
+              {
+                src: "CalendarBlankOutlined",
+                color: "inherit",
+                alt: g.formatMessage({
+                  id: "unity:component:form-field:date-picker:calendar-button",
+                  defaultMessage: "Open Calendar"
+                })
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ a(
+            j,
+            {
+              className: ({ isEntering: r, isExiting: N }) => $({ isEntering: r, isExiting: N }),
+              children: /* @__PURE__ */ a(
+                O,
+                {
+                  value: l,
+                  defaultValue: n,
+                  minValue: e.minValue,
+                  maxValue: e.maxValue,
+                  onChange: y,
+                  firstDayOfWeek: e.firstDayOfWeek
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+q.displayName = "DatePicker";
+export {
+  q as DatePicker
+};

package/dist/esm/components/date-picker/parts/DateCalendar.mjs

@@ -0,0 +1,172 @@
+import { jsx as a, jsxs as r } from "react/jsx-runtime";
+import { useState as f } from "react";
+import { today as Y, getLocalTimeZone as h, isToday as j } from "@internationalized/date";
+import { Dialog as I, Calendar as B, Heading as F, CalendarGrid as M, CalendarGridHeader as O, CalendarHeaderCell as T, CalendarGridBody as W, CalendarCell as k } from "react-aria-components";
+import { tv as P } from "tailwind-variants";
+import { IconButton as m } from "../../icon-button/IconButton.mjs";
+import { useMonthsList as R } from "../hooks/useMonthsList.mjs";
+import { useYearsList as Z } from "../hooks/useYearsList.mjs";
+import { DateSegmentSelect as b } from "./DateSegmentSelect.mjs";
+const $ = P({
+  slots: {
+    dialog: "uy-p-150",
+    calendarWrapper: "uy-flex uy-flex-col uy-gap-150",
+    dialogHeader: "uy-flex uy-items-center uy-h-500 uy-w-full",
+    dialogHeaderGroup: "uy-flex uy-items-center",
+    calendarGrid: "uy-border-separate uy-border-spacing-0 uy-w-full",
+    calendarHeaderCell: "uy-typography-body-strong uy-text-content-neutral-low uy-w-[44px] uy-h-[44px] uy-uppercase",
+    calendarCell: [
+      // base styles
+      "uy-typography-body uy-relative uy-text-content-form-enabled uy-w-[44px] uy-h-[44px] uy-outline-hidden uy-cursor-pointer uy-rounded-circle uy-flex uy-items-center uy-justify-center",
+      // interaction states
+      "hover:uy-bg-surface-neutral-hover active:uy-bg-surface-form-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-2",
+      // cells outside of current month
+      "data-[outside-month]:uy-text-content-neutral-disabled data-[outside-month]:uy-cursor-not-allowed data-[disabled]:uy-text-content-neutral-disabled data-[disabled]:uy-cursor-not-allowed data-[unavailable]:uy-text-content-neutral-disabled data-[unavailable]:uy-cursor-not-allowed",
+      // selected cells
+      "data-[selected]:uy-bg-surface-form-active data-[selected]:uy-text-content-inverted",
+      // "current day" (today) indicator
+      "data-[today]:after:uy-content-' ' data-[today]:after:uy-absolute data-[today]:after:uy-bottom-150 data-[today]:after:uy-w-100 data-[today]:after:uy-h-25 data-[today]:after:uy-bg-border-primary-active data-[today]:data-[selected]:after:uy-bg-content-inverted"
+    ]
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        calendarHeaderCell: "uy-text-content-form-disabled"
+      }
+    }
+  },
+  defaultVariants: {
+    isDisabled: !1
+  }
+});
+function q({
+  value: u,
+  defaultValue: l,
+  minValue: d,
+  maxValue: o,
+  ...t
+}) {
+  const y = Y(h()), [g, p] = f(
+    u ?? l ?? y
+  ), [s, n] = f(
+    u ?? l ?? y
+  ), v = R(), C = Z({
+    startYear: d == null ? void 0 : d.year,
+    endYear: o == null ? void 0 : o.year
+  }), D = (e) => {
+    n(
+      (i) => i.set({ month: parseInt(e, 10) })
+    );
+  }, x = (e) => {
+    n(
+      (i) => i.set({ year: parseInt(e, 10) })
+    );
+  }, {
+    dialog: N,
+    calendarWrapper: w,
+    dialogHeader: H,
+    dialogHeaderGroup: c,
+    calendarGrid: G,
+    calendarHeaderCell: L,
+    calendarCell: S
+  } = $({ isDisabled: t.isDisabled });
+  return /* @__PURE__ */ a(I, { className: N(), children: /* @__PURE__ */ a(
+    B,
+    {
+      ...t,
+      minValue: d,
+      maxValue: o,
+      value: g,
+      defaultValue: l,
+      onChange: (e) => {
+        p(e);
+      },
+      focusedValue: s,
+      onFocusChange: (e) => {
+        n(e);
+      },
+      children: /* @__PURE__ */ r("div", { className: w(), children: [
+        /* @__PURE__ */ r("header", { className: H(), children: [
+          /* @__PURE__ */ a(F, { className: "uy-sr-only" }),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: c({
+                className: "uy-pl-100 uy-gap-200"
+              }),
+              children: [
+                /* @__PURE__ */ a(
+                  b,
+                  {
+                    type: "month",
+                    items: v,
+                    value: s.month.toString(),
+                    onChange: D,
+                    isDisabled: t.isDisabled
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  b,
+                  {
+                    type: "year",
+                    items: C,
+                    value: s.year.toString(),
+                    onChange: x,
+                    isDisabled: t.isDisabled
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ r(
+            "div",
+            {
+              className: c({
+                className: "uy-ml-auto uy-gap-100"
+              }),
+              children: [
+                /* @__PURE__ */ a(
+                  m,
+                  {
+                    slot: "previous",
+                    icon: "CaretLeftOutlined",
+                    color: "neutral",
+                    label: "Previous",
+                    variant: "ghost",
+                    isDisabled: t.isDisabled
+                  }
+                ),
+                /* @__PURE__ */ a(
+                  m,
+                  {
+                    slot: "next",
+                    icon: "CaretRightOutlined",
+                    color: "neutral",
+                    label: "Next",
+                    variant: "ghost",
+                    isDisabled: t.isDisabled
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ r(M, { className: G(), weekdayStyle: "short", children: [
+          /* @__PURE__ */ a(O, { children: (e) => /* @__PURE__ */ a(T, { className: L(), children: e }) }),
+          /* @__PURE__ */ a(W, { children: (e) => /* @__PURE__ */ a(
+            k,
+            {
+              date: e,
+              "data-today": j(e, h()) ? !0 : void 0,
+              className: S()
+            }
+          ) })
+        ] })
+      ] })
+    }
+  ) });
+}
+q.displayName = "DateCalendar";
+export {
+  q as DateCalendar
+};