@payfit/unity-components 2.46.12 → 2.46.13

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

@@ -1,78 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { ReactNode } from 'react';
-import { RadioProps } from 'react-aria-components/RadioGroup';
-export { RadioIndicator } from './RadioIndicator.js';
-export type { RadioIndicatorProps, RadioState } from './RadioIndicator.js';
-export declare const radioButton: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            container?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            radio?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            container?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            radio?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    container: string[];
-    base: string[];
-    radio: string[];
-    label: string[];
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            container?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            radio?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    container: string[];
-    base: string[];
-    radio: string[];
-    label: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
-    container: string[];
-    base: string[];
-    radio: string[];
-    label: string[];
-}, undefined, 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,67 +0,0 @@
-import { jsxs as a, jsx as t, Fragment as f } from "react/jsx-runtime";
-import { forwardRef as x, useContext as g } from "react";
-import { uyTv as h, useUnityTheme as R } from "@payfit/unity-themes";
-import { RadioGroupStateContext as w, Radio as N } from "react-aria-components/RadioGroup";
-import { Flex as v } from "../../flex/Flex.js";
-import { Text as B } from "../../text/Text.js";
-import { RadioButtonHelper as S } from "./RadioButtonHelper.js";
-import { RadioIndicator as j } from "./RadioIndicator.js";
-const C = h({
-  slots: {
-    container: [
-      "uy:group uy:inline-flex uy:flex-col uy:gap-50",
-      "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:focus-within:outline-2 uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-offset-2",
-      "uy:has-data-[disabled=true]:border-border-neutral-disabled",
-      "uy:has-data-[readonly=true]:border-border-neutral-disabled"
-    ],
-    base: [
-      "uy:group uy:flex uy:gap-100 uy:rounded-50 uy:items-start uy:cursor-pointer",
-      "uy:data-[disabled=true]:cursor-not-allowed",
-      "uy:data-[readonly=true]:cursor-not-allowed"
-    ],
-    radio: ["uy:mt-25 uy:sm:mt-px"],
-    label: [
-      "uy:text-content-neutral",
-      "uy:group-data-[disabled=true]:text-content-neutral-disabled",
-      "uy:group-data-[readonly=true]:text-content-neutral uy:group-data-[readonly]:cursor-text"
-    ]
-  }
-}), F = x(
-  ({ children: u, value: d, isDisabled: o, helperText: r, ...n }, i) => {
-    const { base: l, label: s, container: y, radio: m } = C(), e = g(w), { theme: c } = R(), p = e?.isReadOnly ? "readonly" : e?.isDisabled || o ? "disabled" : e?.isInvalid ? "invalid" : "enabled";
-    return /* @__PURE__ */ a(v, { direction: "col", gap: "50", className: y(), children: [
-      /* @__PURE__ */ t(
-        N,
-        {
-          ...n,
-          value: d,
-          isDisabled: o,
-          className: () => l(),
-          ref: i,
-          children: ({ isSelected: b }) => /* @__PURE__ */ a(f, { children: [
-            /* @__PURE__ */ t(
-              j,
-              {
-                isSelected: b,
-                state: p,
-                theme: c,
-                className: m()
-              }
-            ),
-            /* @__PURE__ */ t(B, { variant: "body", className: s(), children: u })
-          ] })
-        }
-      ),
-      r ? /* @__PURE__ */ t(S, { children: r }) : null
-    ] });
-  }
-);
-F.displayName = "RadioButton";
-export {
-  F as RadioButton,
-  j as RadioIndicator,
-  C 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/RadioIndicator.d.ts

@@ -1,11 +0,0 @@
-type EnabledState = 'enabled' | 'disabled' | 'readonly';
-type ValidationState = 'valid' | 'invalid';
-export type RadioState = EnabledState | ValidationState;
-export interface RadioIndicatorProps {
-    isSelected: boolean;
-    state: RadioState;
-    theme: string;
-    className?: string;
-}
-export declare const RadioIndicator: ({ isSelected, state, theme, className, }: RadioIndicatorProps) => import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,131 +0,0 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-const c = {
-  unselected: {
-    enabled: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
-    valid: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
-    invalid: { "--radio-border-color": "var(--uy-color-border-form-error)" },
-    disabled: {
-      "--radio-border-color": "var(--uy-color-border-form-disabled)"
-    },
-    readonly: {
-      "--radio-border-color": "var(--uy-color-border-form-disabled)"
-    }
-  },
-  selected: {
-    enabled: {
-      "--radio-bg-color": "var(--uy-color-surface-form-active)",
-      "--radio-border-color": "var(--uy-color-surface-form-active)",
-      "--radio-dot-size": "3px",
-      "--radio-dot-color": "var(--uy-color-content-inverted)"
-    },
-    valid: {
-      "--radio-bg-color": "var(--uy-color-surface-form-active)",
-      "--radio-border-color": "var(--uy-color-surface-form-active)",
-      "--radio-dot-size": "3px",
-      "--radio-dot-color": "var(--uy-color-content-inverted)"
-    },
-    invalid: {
-      "--radio-bg-color": "var(--uy-color-surface-danger)",
-      "--radio-border-color": "transparent",
-      "--radio-dot-size": "3px",
-      "--radio-dot-color": "var(--uy-color-content-inverted)"
-    },
-    disabled: {
-      "--radio-bg-color": "var(--uy-color-surface-form-disabled)",
-      "--radio-border-color": "var(--uy-color-border-form-disabled)",
-      "--radio-dot-size": "3px",
-      "--radio-dot-color": "var(--uy-color-content-form-disabled)"
-    },
-    readonly: {
-      "--radio-bg-color": "var(--uy-color-surface-form-read-only)",
-      "--radio-border-color": "transparent",
-      "--radio-dot-size": "3px",
-      "--radio-dot-color": "var(--uy-color-surface-neutral-disabled)"
-    }
-  }
-}, i = {
-  unselected: {
-    enabled: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
-    valid: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
-    invalid: { "--radio-border-color": "var(--uy-color-border-form-error)" },
-    disabled: {
-      "--radio-border-color": "var(--uy-color-border-form-disabled)"
-    },
-    readonly: {
-      "--radio-border-color": "var(--uy-color-border-form-disabled)"
-    }
-  },
-  selected: {
-    enabled: {
-      "--radio-border-color": "var(--uy-color-border-form-active)",
-      "--radio-dot-color": "var(--uy-color-surface-primary-active)"
-    },
-    valid: {
-      "--radio-border-color": "var(--uy-color-border-form-active)",
-      "--radio-dot-color": "var(--uy-color-surface-primary-active)"
-    },
-    invalid: {
-      "--radio-border-color": "var(--uy-color-border-form-error)",
-      "--radio-dot-color": "var(--uy-color-content-form-invalid)"
-    },
-    disabled: {
-      "--radio-border-color": "var(--uy-color-border-form-disabled)",
-      "--radio-dot-color": "var(--uy-color-border-form-disabled)"
-    },
-    readonly: {
-      "--radio-border-color": "var(--uy-color-border-form-disabled)",
-      "--radio-dot-color": "var(--uy-color-border-form-read-only)"
-    }
-  }
-};
-function t({
-  isSelected: r,
-  state: o,
-  theme: d
-}) {
-  return (d === "rebrand" ? c : i)[r ? "selected" : "unselected"][o];
-}
-const n = ({
-  isSelected: r,
-  state: o,
-  theme: d,
-  className: a
-}) => /* @__PURE__ */ e(
-  "svg",
-  {
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    style: t({ isSelected: r, state: o, theme: d }),
-    className: a,
-    children: /* @__PURE__ */ l("g", { id: "Radio input", children: [
-      /* @__PURE__ */ e(
-        "circle",
-        {
-          id: "Background",
-          cx: "10",
-          cy: "10",
-          r: "7",
-          fill: "var(--radio-bg-color, white)",
-          stroke: "var(--radio-border-color, #0157B2)",
-          strokeWidth: "1.25"
-        }
-      ),
-      /* @__PURE__ */ e(
-        "circle",
-        {
-          id: "Dot",
-          cx: "10",
-          cy: "10",
-          style: { r: "var(--radio-dot-size, 5px)" },
-          fill: "var(--radio-dot-color, transparent)"
-        }
-      )
-    ] })
-  }
-);
-export {
-  n as RadioIndicator
-};

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

@@ -1,49 +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)
- * ```
- * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
- * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
- */
-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: e,
-    isReadOnly: t,
-    isDisabled: i,
-    isInvalid: l,
-    isRequired: p,
-    name: n,
-    requiredVariant: c,
-    feedbackText: d,
-    helperText: a
-  }, s) => {
-    const { control: f } = F();
-    return /* @__PURE__ */ r(
-      x,
-      {
-        control: f,
-        name: n,
-        ...{
-          isRequired: p,
-          isInvalid: l,
-          isDisabled: i,
-          isReadOnly: t
-        },
-        ref: s,
-        className: "uy:gap-150",
-        children: [
-          /* @__PURE__ */ r("div", { className: "uy:flex uy:flex-col uy:gap-50", children: [
-            /* @__PURE__ */ o(B, { requiredVariant: c, children: e }),
-            /* @__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
-};

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

@@ -1,13 +0,0 @@
-import { ReactNode } from 'react';
-import { LabelProps } from '../label/Label.js';
-import { TanstackRadioButtonGroupProps } from '../radio-button-group/TanstackRadioButtonGroup.js';
-export interface TanstackRadioButtonGroupFieldProps extends Pick<LabelProps, 'isRequired' | 'requiredVariant'>, TanstackRadioButtonGroupProps {
-    /** The label for the radio group. Required for accessibility. */
-    label: string;
-    /** Helper text to display above the radio group. Can be any React node. */
-    helperText?: ReactNode;
-    /** A contextual link to display under the field. Rendered after feedback. */
-    contextualLink?: ReactNode;
-}
-declare const TanstackRadioButtonGroupField: import('react').ForwardRefExoticComponent<TanstackRadioButtonGroupFieldProps & import('react').RefAttributes<HTMLDivElement>>;
-export { TanstackRadioButtonGroupField };

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

@@ -1,38 +0,0 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { TanstackFormFeedbackText as p } from "../form-field/parts/TanstackFormFeedbackText.js";
-import { TanstackFormHelperText as l } from "../form-field/parts/TanstackFormHelperText.js";
-import { TanstackFormLabel as u } from "../form-field/parts/TanstackFormLabel.js";
-import { TanstackFormField as f } from "../form-field/TanstackFormField.js";
-import { TanstackRadioButtonGroup as k } from "../radio-button-group/TanstackRadioButtonGroup.js";
-function F({
-  label: t,
-  helperText: r,
-  contextualLink: a,
-  isRequired: i,
-  requiredVariant: m,
-  children: n,
-  ...e
-}, c) {
-  return /* @__PURE__ */ d(f, { children: [
-    /* @__PURE__ */ o(
-      u,
-      {
-        isRequired: i,
-        requiredVariant: m,
-        children: t
-      }
-    ),
-    r && /* @__PURE__ */ o(l, { children: r }),
-    /* @__PURE__ */ o("div", { className: "uy:mt-25", children: /* @__PURE__ */ o(k, { ref: c, ...e, children: n }) }),
-    /* @__PURE__ */ o(p, {}),
-    a
-  ] });
-}
-const T = s(
-  F
-);
-T.displayName = "TanstackRadioButtonGroupField";
-export {
-  T as TanstackRadioButtonGroupField
-};

package/dist/esm/components/search/Search.d.ts

@@ -1,124 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { ReactNode } from 'react';
-import { SearchFieldProps } from 'react-aria-components/SearchField';
-export declare const search: import('tailwind-variants').TVReturnType<{
-    isReadOnly: {
-        true: {
-            base: string;
-            icon: string;
-            button: string;
-            input: string;
-        };
-        false: {
-            base: string[];
-            icon: string;
-            input: string;
-        };
-    };
-}, {
-    base: string[];
-    input: string[];
-    icon: string[];
-    invalidIcon: string[];
-    wrapperState: string[];
-    feedbackText: string[];
-    closeButton: string[];
-}, undefined, {
-    isReadOnly: {
-        true: {
-            base: string;
-            icon: string;
-            button: string;
-            input: string;
-        };
-        false: {
-            base: string[];
-            icon: string;
-            input: string;
-        };
-    };
-}, {
-    base: string[];
-    input: string[];
-    icon: string[];
-    invalidIcon: string[];
-    wrapperState: string[];
-    feedbackText: string[];
-    closeButton: string[];
-}, import('tailwind-variants').TVReturnType<{
-    isReadOnly: {
-        true: {
-            base: string;
-            icon: string;
-            button: string;
-            input: string;
-        };
-        false: {
-            base: string[];
-            icon: string;
-            input: string;
-        };
-    };
-}, {
-    base: string[];
-    input: string[];
-    icon: string[];
-    invalidIcon: string[];
-    wrapperState: string[];
-    feedbackText: string[];
-    closeButton: string[];
-}, undefined, unknown, unknown, undefined>>;
-export interface SearchProps extends VariantProps<typeof search>, SearchFieldProps {
-    /**
-     * Use this when search results are being fetched asynchronously.
-     * @default false
-     */
-    isLoading?: boolean;
-    /**
-     * Text displayed below the search field, typically used for error messages.
-     * Only visible when isInvalid is true.
-     */
-    feedbackText?: ReactNode;
-    /**
-     * Custom placeholder text for the search input.
-     * @default "Search"
-     */
-    placeholder?: string;
-    /**
-     * A label used as aria-label for the search input
-     */
-    label: string;
-}
-/**
- * The `Search` component enables users to search or filter content within your application. The component
- * supports various states including loading, invalid, disabled, and read-only modes to handle different
- * @param {SearchProps} props - The props for the Search component
- * @see {@link SearchProps} for all available props
- * @example
- * ```tsx
- * import { Search } from '@payfit/unity-components'
- *
- * function OnChangeExample() {
- *   const [filteredItems, setFilteredItems] = useState(items)
- *
- *   const handleChange = (value) => {
- *     setFilteredItems(
- *       value !== '' ? items.filter(item => item.name.includes(value)) : items
- *     )
- *   }
- *
- *   return (
- *     <>
- *       <Search onChange={handleChange} />
- *       {filteredItems.map(item => (
- *         <div key={item.id}>{item.name}</div>
- *       ))}
- *     </>
- *   )
- * }
- * ```
- * @remarks
- * [API Docs](https://unity-components.payfit.io/?path=/docs/search--docs)
- */
-declare const Search: import('react').ForwardRefExoticComponent<SearchProps & import('react').RefAttributes<HTMLDivElement>>;
-export { Search };