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

package/dist/esm/components/popover/Popover.d.ts

@@ -1,56 +0,0 @@
-import { ReactNode } from 'react';
-import { PopoverProps as AriaPopoverProps, DialogTrigger } from 'react-aria-components';
-interface PopoverBaseProps extends Omit<AriaPopoverProps, 'className' | 'style'> {
-    /**
-     * The content to be displayed inside the popover.
-     */
-    children: ReactNode;
-    /**
-     * Title text to be displayed in the header and used as the Popover's label.
-     */
-    title: string;
-}
-interface PopoverPropsWithVisibleTitle extends PopoverBaseProps {
-    /**
-     * If true, the title will not be shown on the screen but will still be accessible to screen readers
-     * @default false
-     */
-    isTitleSrOnly?: false;
-    /**
-     * Whether the popover can be dismissed with a close button.
-     * If true, a close button will be added to the popover header.
-     * @default false
-     */
-    displayCloseButton?: boolean;
-}
-interface PopoverPropsWithHiddenTitle extends PopoverBaseProps {
-    /**
-     * If true, the title will not be shown on the screen but will still be accessible to screen readers
-     * @default false
-     */
-    isTitleSrOnly: true;
-    /**
-     * Whether the popover can be dismissed with a close button.
-     * If true, a close button will be added to the popover header.
-     * @default false
-     */
-    displayCloseButton?: false;
-}
-type PopoverProps = PopoverPropsWithVisibleTitle | PopoverPropsWithHiddenTitle;
-/**
- * The `Popover` component renders a floating container that appears when a user interacts with a trigger element.
- * Use it to display additional information or actions without navigating away from the current context.
- * @example
- * ```tsx
- * import { Popover, PopoverTrigger, Button } from '@payfit/unity-components'
- *
- * <PopoverTrigger>
- *   <Button>Open Popover</Button>
- *   <Popover>
- *     <p>Popover content goes here</p>
- *   </Popover>
- * </PopoverTrigger>
- * ```
- */
-declare const Popover: import('react').ForwardRefExoticComponent<PopoverProps & import('react').RefAttributes<HTMLDivElement>>;
-export { Popover, DialogTrigger as PopoverTrigger };

package/dist/esm/components/popover/Popover.js

@@ -1,37 +0,0 @@
-import { jsx as o, jsxs as d } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { Popover as m, Dialog as n, DialogTrigger as y } from "react-aria-components";
-import { DialogTrigger as B } from "react-aria-components";
-import { tv as g } from "tailwind-variants";
-import { PopoverContent as c } from "./parts/PopoverContent.js";
-import { PopoverHeader as v } from "./parts/PopoverHeader.js";
-const x = g({
-  slots: {
-    base: [
-      "uy-border uy-border-solid uy-border-border-neutral uy-bg-surface-neutral uy-rounded-200 uy-p-200 uy-shadow-floating uy-min-w-[320px] uy-max-w-[800px]"
-    ],
-    dialog: [
-      "uy-flex uy-flex-col",
-      "focus:uy-outline-2 focus:uy-outline-offset-2"
-    ]
-  }
-}), P = f((r, e) => {
-  const { children: i, title: s, isTitleSrOnly: t, displayCloseButton: l, ...a } = r, { base: p, dialog: u } = x();
-  return /* @__PURE__ */ o(m, { ref: e, className: p(), offset: 8, ...a, children: /* @__PURE__ */ d(n, { className: u(), role: "dialog", children: [
-    /* @__PURE__ */ o(
-      v,
-      {
-        title: s,
-        isTitleSrOnly: t,
-        displayCloseButton: l
-      }
-    ),
-    /* @__PURE__ */ o(c, { children: i })
-  ] }) });
-});
-P.displayName = "Popover";
-y.displayName = "PopoverTrigger";
-export {
-  P as Popover,
-  B as PopoverTrigger
-};

package/dist/esm/components/popover/parts/PopoverContent.d.ts

@@ -1,6 +0,0 @@
-import { PropsWithChildren } from 'react';
-export type PopoverContentProps = PropsWithChildren<object>;
-declare const PopoverContent: import('react').ForwardRefExoticComponent<object & {
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLDivElement>>;
-export { PopoverContent };

package/dist/esm/components/popover/parts/PopoverContent.js

@@ -1,9 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as e } from "react";
-const n = e(
-  ({ children: o }, r) => /* @__PURE__ */ t("div", { ref: r, children: o })
-);
-n.displayName = "PopoverContent";
-export {
-  n as PopoverContent
-};

package/dist/esm/components/popover/parts/PopoverHeader.d.ts

@@ -1,20 +0,0 @@
-import { HeadingProps } from 'react-aria-components';
-export interface PopoverHeaderProps extends Omit<HeadingProps, 'className' | 'style' | 'children'> {
-    /**
-     * Title text to be displayed in the header and used as the Popover's label.
-     */
-    title: string;
-    /**
-     * If true, the title will not be shown on the screen but will still be accessible to screen readers
-     * @default false
-     */
-    isTitleSrOnly?: boolean;
-    /**
-     * Whether the popover can be dismissed with a close button.
-     * If true, a close button will be added to the header.
-     * @default false
-     */
-    displayCloseButton?: boolean;
-}
-declare const PopoverHeader: import('react').ForwardRefExoticComponent<PopoverHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
-export { PopoverHeader };

package/dist/esm/components/popover/parts/PopoverHeader.js

@@ -1,56 +0,0 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { forwardRef as c, useContext as d } from "react";
-import { OverlayTriggerStateContext as u, Heading as y } from "react-aria-components";
-import { useIntl as p } from "react-intl";
-import { tv as f } from "tailwind-variants";
-import { IconButton as g } from "../../icon-button/IconButton.js";
-const h = f({
-  slots: {
-    base: "uy-flex uy-justify-between",
-    heading: "uy-content-center"
-  },
-  variants: {
-    isTitleSrOnly: {
-      true: {
-        heading: "uy-sr-only"
-      },
-      false: {
-        base: "uy-mb-150",
-        heading: "uy-typography-h2 uy-min-h-500 uy-align-center"
-      }
-    }
-  }
-}), v = c(
-  ({ title: t, isTitleSrOnly: r, displayCloseButton: a }, n) => {
-    const e = d(u), s = p(), { base: l, heading: i } = h({ isTitleSrOnly: r });
-    return /* @__PURE__ */ m("div", { className: l(), children: [
-      /* @__PURE__ */ o(
-        y,
-        {
-          ref: n,
-          slot: "title",
-          className: i(),
-          "data-dd-privacy": "allow",
-          children: t
-        }
-      ),
-      a && /* @__PURE__ */ o(
-        g,
-        {
-          variant: "ghost",
-          color: "neutral",
-          label: s.formatMessage({
-            id: "unity:component:common:close:label",
-            defaultMessage: "Close"
-          }),
-          icon: "CloseOutlined",
-          onClick: () => e == null ? void 0 : e.close()
-        }
-      )
-    ] });
-  }
-);
-v.displayName = "PopoverTitle";
-export {
-  v as PopoverHeader
-};

package/dist/esm/components/progress-bar/ProgressBar.js

@@ -1,40 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { ProgressBar as m } from "react-aria-components";
-import { tv as f } from "tailwind-variants";
-const c = f({
-  slots: {
-    base: "uy-rounded-150 uy-bg-surface-neutral-disabled uy-h-150 uy-top-[50%] uy-transform uy-translate-y-[-50%] uy-w-full",
-    meter: "uy-rounded-l-150 uy-absolute uy-h-full uy-top-[50%] uy-transform uy-translate-y-[-50%] uy-rounded-full uy-bg-surface-success"
-  },
-  variants: {
-    isFull: {
-      true: {
-        meter: "uy-rounded-r-150"
-      }
-    }
-  },
-  defaultVariants: {
-    isFull: !1
-  }
-}), p = y(
-  ({ value: a, range: e = [0, 100], ...u }, l) => {
-    const [t, s] = e, o = a >= s, { base: d, meter: i } = c({ isFull: o });
-    return /* @__PURE__ */ r(
-      m,
-      {
-        ref: l,
-        value: a,
-        minValue: t,
-        maxValue: s,
-        "aria-label": u["aria-label"],
-        "data-dd-privacy": "allow",
-        children: ({ percentage: n }) => /* @__PURE__ */ r("div", { className: d(), children: /* @__PURE__ */ r("div", { className: i(), style: { width: `${n}%` } }) })
-      }
-    );
-  }
-);
-p.displayName = "ProgressBar";
-export {
-  p as ProgressBar
-};

package/dist/esm/components/radio-button-group/RadioButtonGroup.d.ts

@@ -1,22 +0,0 @@
-import { RadioGroupProps } from 'react-aria-components';
-/**
- * Props for the RadioButtonGroup component.
- * Excludes className and style props as they are handled internally.
- */
-export type RadioButtonGroupProps = Omit<RadioGroupProps, 'className' | 'style'>;
-/**
- * The `RadioButtonGroup` component enables users to select a single option from a set of mutually exclusive choices.
- * It manages the selection state, keyboard navigation, focus handling, and accessibility features for a group of RadioButton components.
- * @example
- * ```tsx
- * import { RadioButton, RadioButtonGroup } from '@payfit/unity-components'
- *
- * <RadioButtonGroup value="option1" onChange={setValue}>
- *   <RadioButton value="option1">Option 1</RadioButton>
- *   <RadioButton value="option2">Option 2</RadioButton>
- *   <RadioButton value="option3">Option 3</RadioButton>
- * </RadioButtonGroup>
- * ```
- */
-declare const RadioButtonGroup: import('react').ForwardRefExoticComponent<RadioButtonGroupProps & import('react').RefAttributes<HTMLDivElement>>;
-export { RadioButtonGroup };

package/dist/esm/components/radio-button-group/RadioButtonGroup.js

@@ -1,23 +0,0 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { RadioGroup as d } from "react-aria-components";
-const l = i(
-  ({ children: o, isReadOnly: r, isDisabled: t, value: a, onChange: p, onBlur: u, ...m }, e) => /* @__PURE__ */ f(
-    d,
-    {
-      ...m,
-      isReadOnly: r,
-      isDisabled: t,
-      value: a,
-      onBlur: u,
-      onChange: p,
-      className: "uy-flex uy-flex-col uy-gap-150",
-      ref: e,
-      children: o
-    }
-  )
-);
-l.displayName = "RadioButtonGroup";
-export {
-  l as RadioButtonGroup
-};

package/dist/esm/components/radio-button-group/parts/RadioButton.d.ts

@@ -1,74 +0,0 @@
-import { ReactNode } from 'react';
-import { RadioProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
-export declare const radioButton: import('tailwind-variants').TVReturnType<{
-    isFocusVisible: {
-        true: string;
-    };
-}, {
-    base: string[];
-    radio: string[];
-    label: string[];
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
-    isFocusVisible: {
-        true: string;
-    };
-}, {
-    isFocusVisible: {
-        true: string;
-    };
-}>, {
-    isFocusVisible: {
-        true: string;
-    };
-}, {
-    base: string[];
-    radio: string[];
-    label: string[];
-}, import('tailwind-variants').TVReturnType<{
-    isFocusVisible: {
-        true: string;
-    };
-}, {
-    base: string[];
-    radio: string[];
-    label: string[];
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
-    isFocusVisible: {
-        true: string;
-    };
-}, {
-    isFocusVisible: {
-        true: string;
-    };
-}>, unknown, unknown, undefined>>;
-/**
- * The `RadioButton` component enables users to select a single option from a set of choices.
- * It displays as a circular button that can be selected, and provides visual feedback for various states including selected, unselected, disabled, and read-only.
- * @param {RadioButtonProps} props - The props for the `RadioButton` component
- * @example
- * ```tsx
- * import { RadioButton, RadioButtonGroup } from '@payfit/unity-components'
- *
- * <RadioButtonGroup>
- *   <RadioButton value="option1">Option 1</RadioButton>
- *   <RadioButton value="option2">Option 2</RadioButton>
- *   <RadioButton value="option3" isDisabled>Option 3</RadioButton>
- * </RadioButtonGroup>
- * ```
- * @see {@link RadioButtonProps} for all available props
- * @see {@link RadioButtonGroup} for the parent component
- */
-declare const RadioButton: import('react').ForwardRefExoticComponent<RadioButtonProps & import('react').RefAttributes<HTMLLabelElement>>;
-export interface RadioButtonProps extends Omit<RadioProps, 'children'>, VariantProps<typeof radioButton> {
-    /**
-     * The content to display as the radio button's label.
-     */
-    children: ReactNode;
-    /**
-     * Optional helper text to display below the radio button.
-     * Provides additional context or instructions for the option.
-     */
-    helperText?: ReactNode;
-}
-export { RadioButton };

package/dist/esm/components/radio-button-group/parts/RadioButton.js

@@ -1,79 +0,0 @@
-import { jsxs as a, jsx as o, Fragment as b } from "react/jsx-runtime";
-import { forwardRef as m, useContext as f, useMemo as p } from "react";
-import { RadioGroupStateContext as g, Radio as v } from "react-aria-components";
-import { tv as x } from "tailwind-variants";
-import { Flex as R } from "../../flex/Flex.js";
-import { Text as S } from "../../text/Text.js";
-import B from "./radio-input-selected.svg.js";
-import h from "./radio-input-unselected.svg.js";
-import { RadioButtonHelper as w } from "./RadioButtonHelper.js";
-const F = x({
-  slots: {
-    base: [
-      "uy-group uy-flex uy-gap-100 uy-rounded-50 uy-items-center",
-      "data-[disabled]:uy-cursor-not-allowed",
-      "data-[readonly]:uy-cursor-not-allowed"
-    ],
-    radio: [
-      "uy-border-border-form-enabled uy-border-solid uy-bg-surface-form-enabled",
-      "group-data-[disabled]:uy-border-border-form-disabled"
-    ],
-    label: [
-      "uy-text-content-neutral",
-      "group-data-[disabled]:uy-text-content-neutral-disabled",
-      "group-data-[readonly]:uy-text-content-neutral group-data-[readonly]:uy-cursor-text"
-    ]
-  },
-  variants: {
-    isFocusVisible: {
-      true: "uy-outline-none uy-ring-2 uy-ring-offset-2 uy-ring-utility-focus-ring"
-    }
-  }
-}), N = m(
-  ({ children: t, value: l, isDisabled: i, helperText: d, ...u }, n) => {
-    const { base: s, label: c } = F(), r = f(g), y = p(() => r != null && r.isReadOnly ? {
-      "--radio-fill-color": "rgb(var(--uy-colors-border-form-read-only))",
-      "--radio-border-color": "rgb(var(--uy-colors-border-form-disabled))"
-    } : {
-      "--radio-fill-color": "rgb(var(--uy-colors-surface-primary-active))",
-      "--radio-border-color": "rgb(var(--uy-colors-border-form-active))"
-    }, [r == null ? void 0 : r.isReadOnly]);
-    return /* @__PURE__ */ a(R, { direction: "col", gap: "50", children: [
-      /* @__PURE__ */ o(
-        v,
-        {
-          ...u,
-          value: l,
-          isDisabled: i,
-          className: ({ isFocusVisible: e }) => s({ isFocusVisible: e }),
-          ref: n,
-          children: ({ isSelected: e }) => /* @__PURE__ */ a(b, { children: [
-            e ? /* @__PURE__ */ o(
-              B,
-              {
-                style: y
-              }
-            ) : /* @__PURE__ */ o(
-              h,
-              {
-                style: r != null && r.isReadOnly ? {
-                  // @ts-expect-error – annoying TS
-                  "--radio-border-color": "rgb(var(--uy-colors-border-form-disabled))"
-                } : {
-                  "--radio-border-color": "rgb(var(--uy-colors-border-form-enabled))"
-                }
-              }
-            ),
-            /* @__PURE__ */ o(S, { variant: "body", className: c(), children: t })
-          ] })
-        }
-      ),
-      d ? /* @__PURE__ */ o(w, { children: d }) : null
-    ] });
-  }
-);
-N.displayName = "RadioButton";
-export {
-  N as RadioButton,
-  F as radioButton
-};

package/dist/esm/components/radio-button-group/parts/RadioButtonHelper.d.ts

@@ -1,19 +0,0 @@
-import { PropsWithChildren } from 'react';
-export type RadioButtonHelperProps = PropsWithChildren;
-/**
- * The `RadioButtonHelper` component provides additional context or instructions for radio button options.
- * It displays as smaller, lower-contrast text positioned below the radio button to help users understand the option better.
- * @example
- * ```tsx
- * import { RadioButton, RadioButtonHelper } from '@payfit/unity-components'
- *
- * <RadioButton value="option1">
- *   Option 1
- *   <RadioButtonHelper>Additional information about this option</RadioButtonHelper>
- * </RadioButton>
- * ```
- */
-declare const RadioButtonHelper: import('react').ForwardRefExoticComponent<{
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLSpanElement>>;
-export { RadioButtonHelper };

package/dist/esm/components/radio-button-group/parts/RadioButtonHelper.js

@@ -1,19 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as e } from "react";
-import { Text as a } from "../../text/Text.js";
-const l = e(
-  ({ children: o }, r) => /* @__PURE__ */ t(
-    a,
-    {
-      color: "content.neutral.low",
-      variant: "bodySmall",
-      className: "uy-ml-[28px]",
-      ref: r,
-      children: o
-    }
-  )
-);
-l.displayName = "RadioButtonHelper";
-export {
-  l as RadioButtonHelper
-};

package/dist/esm/components/radio-button-group/parts/radio-input-selected.svg.js

@@ -1,5 +0,0 @@
-import * as e from "react";
-const o = (t) => /* @__PURE__ */ e.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { id: "Radio input" }, /* @__PURE__ */ e.createElement("path", { id: "Background", d: "M2.625 10C2.625 5.9269 5.9269 2.625 10 2.625C14.0731 2.625 17.375 5.9269 17.375 10C17.375 14.0731 14.0731 17.375 10 17.375C5.9269 17.375 2.625 14.0731 2.625 10Z", fill: "white", stroke: "var(--radio-border-color, #0157B2)", strokeWidth: 1.25 }), /* @__PURE__ */ e.createElement("path", { id: "Foreground", d: "M5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15C7.23858 15 5 12.7614 5 10Z", fill: "var(--radio-fill-color, #0157B2)" })));
-export {
-  o as default
-};

package/dist/esm/components/radio-button-group/parts/radio-input-unselected.svg.js

@@ -1,5 +0,0 @@
-import * as e from "react";
-const o = (t) => /* @__PURE__ */ e.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { id: "Radio input" }, /* @__PURE__ */ e.createElement("path", { id: "Background", d: "M2.625 10C2.625 5.9269 5.9269 2.625 10 2.625C14.0731 2.625 17.375 5.9269 17.375 10C17.375 14.0731 14.0731 17.375 10 17.375C5.9269 17.375 2.625 14.0731 2.625 10Z", fill: "white", stroke: "var(--radio-border-color, #CDCED6)", strokeWidth: 1.25 })));
-export {
-  o as default
-};

package/dist/esm/components/radio-button-group-field/RadioButtonGroupField.d.ts

@@ -1,47 +0,0 @@
-import { PropsWithChildren, ReactNode } from 'react';
-import { FieldPath, FieldValues } from 'react-hook-form';
-import { LabelProps } from '../label/Label.js';
-/**
- * RadioButtonGroupField component provides a form field with radio button group functionality.
- * It integrates with React Hook Form for form state management and validation.
- * @template TFieldValues - The type of the form values
- * @template TName - The type of the field name
- */
-interface RadioButtonGroupFieldProps<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 radio button group. */
-    label: string;
-    /** Helper text to display below the radio button group. */
-    helperText?: ReactNode;
-    /** Whether the radio button group is disabled. */
-    isDisabled?: boolean;
-    /** Whether the radio button group is read-only. */
-    isReadOnly?: boolean;
-    /** Whether the radio button group is invalid. */
-    isInvalid?: boolean;
-    /** Feedback text to display, typically used for error messages. */
-    feedbackText?: ReactNode;
-}
-/**
- * A form field component that wraps a group of radio buttons.
- *
- * This component provides a complete form field with label, helper text, and validation feedback.
- * It integrates with React Hook Form for form state management and validation.
- * @example
- * ```tsx
- * <RadioButtonGroupField
- *   name="fruit"
- *   label="Choose your favorite fruit"
- *   helperText="Select one option"
- * >
- *   <RadioButton value="Apple">Apple</RadioButton>
- *   <RadioButton value="Banana">Banana</RadioButton>
- *   <RadioButton value="Orange">Orange</RadioButton>
- * </RadioButtonGroupField>
- * @remarks
- * [API & Docs](https://master--66fe6715241b661107117e47.chromatic.com/?path=/docs/forms-radiobuttongroupfield--docs) • [Design Guidelines](https://www.payfit.design/24f360409/p/43631a-radio-group)
- * ```
- */
-declare const RadioButtonGroupField: import('react').ForwardRefExoticComponent<RadioButtonGroupFieldProps<FieldValues, string> & import('react').RefAttributes<HTMLDivElement>>;
-export { RadioButtonGroupField };

package/dist/esm/components/radio-button-group-field/RadioButtonGroupField.js

@@ -1,52 +0,0 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { useFormContext as F } from "react-hook-form";
-import { FormField as x } from "../form-field/FormField.js";
-import { FormControl as h } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as y } from "../form-field/parts/FormFeedbackText.js";
-import { FormHelperText as R } from "../form-field/parts/FormHelperText.js";
-import { FormLabel as B } from "../form-field/parts/FormLabel.js";
-import { RadioButtonGroup as G } from "../radio-button-group/RadioButtonGroup.js";
-const N = u(
-  ({
-    children: m,
-    label: t,
-    isReadOnly: e,
-    isDisabled: i,
-    isInvalid: p,
-    isRequired: l,
-    name: n,
-    requiredVariant: c,
-    feedbackText: d,
-    helperText: a
-  }, s) => {
-    const { control: f } = F();
-    return /* @__PURE__ */ r(
-      x,
-      {
-        control: f,
-        name: n,
-        ...{
-          isRequired: l,
-          isInvalid: p,
-          isDisabled: i,
-          isReadOnly: e
-        },
-        ref: s,
-        className: "uy-gap-150",
-        children: [
-          /* @__PURE__ */ r("div", { className: "uy-flex-col uy-gap-50", children: [
-            /* @__PURE__ */ o(B, { requiredVariant: c, children: t }),
-            /* @__PURE__ */ o(R, { children: a }),
-            /* @__PURE__ */ o(y, { children: d })
-          ] }),
-          /* @__PURE__ */ o(h, { children: /* @__PURE__ */ o(G, { children: m }) })
-        ]
-      }
-    );
-  }
-);
-N.displayName = "RadioButtonGroupField";
-export {
-  N as RadioButtonGroupField
-};