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

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

@@ -1,180 +0,0 @@
-import { ReactNode } from 'react';
-import { SearchFieldProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
-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, import('tailwind-variants/dist/config.js').TVConfig<{
-    isReadOnly: {
-        true: {
-            base: string;
-            icon: string;
-            button: string;
-            input: string;
-        };
-        false: {
-            base: string[];
-            icon: string;
-            input: string;
-        };
-    };
-}, {
-    isReadOnly: {
-        true: {
-            base: string;
-            icon: string;
-            button: string;
-            input: string;
-        };
-        false: {
-            base: string[];
-            icon: string;
-            input: string;
-        };
-    };
-}>, {
-    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, import('tailwind-variants/dist/config.js').TVConfig<{
-    isReadOnly: {
-        true: {
-            base: string;
-            icon: string;
-            button: string;
-            input: string;
-        };
-        false: {
-            base: string[];
-            icon: string;
-            input: string;
-        };
-    };
-}, {
-    isReadOnly: {
-        true: {
-            base: string;
-            icon: string;
-            button: string;
-            input: string;
-        };
-        false: {
-            base: string[];
-            icon: string;
-            input: string;
-        };
-    };
-}>, 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 };

package/dist/esm/components/search/Search.js

@@ -1,164 +0,0 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import { forwardRef as w } from "react";
-import { SearchField as M, Input as N, FieldError as S } from "react-aria-components";
-import { useIntl as I } from "react-intl";
-import { tv as k } from "tailwind-variants";
-import { CircularIconButton as C } from "../icon-button/CircularIconButton.js";
-import { Icon as l } from "../icon/Icon.js";
-import { Spinner as B } from "../spinner/Spinner.js";
-const E = k({
-  slots: {
-    base: [
-      "uy-w-full uy-flex uy-gap-100 uy-border uy-border-solid uy-pt-100 uy-pb-100 uy-pl-150 uy-pr-150 uy-rounded-75 uy-border-border-form-enabled uy-items-center",
-      "enabled:uy-border-border-form-enabled enabled:uy-bg-surface-danger-enabled enabled:uy-border-border-form-enabled",
-      "focus-visible:uy-outline-none focus-visible:uy-ring-2 focus-visible:uy-ring-utility-focus-ring focus-visible:uy-ring-offset-2 focus-visible:uy-border-border-form-focus focus-visible:uy-bg-surface-form-focus",
-      "active:uy-border-border-form-active",
-      "group-data-[disabled=true]:uy-border-border-form-disabled group-data-[disabled=true]:uy-bg-surface-form-disabled",
-      "group-data-[invalid=true]:uy-border-border-form-error group-data-[invalid=true]:uy-bg-surface-form-error"
-    ],
-    input: [
-      "uy-h-300 uy-typography-body uy-flex-grow uy-outline-none [&::-webkit-search-cancel-button]:uy-hidden",
-      "enabled:uy-text-content-form-enabled",
-      "hover:uy-text-content-form-hover",
-      "focus-visible:uy-text-content-form-focus",
-      "active:uy-text-content-form-active",
-      "group-data-[invalid=true]:uy-bg-surface-form-error"
-    ],
-    icon: [
-      "group-data-[disabled=true]:uy-text-content-neutral-lowest-disabled"
-    ],
-    invalidIcon: ["uy-hidden", "group-data-[invalid=true]:uy-block"],
-    wrapperState: ["uy-flex uy-items-center"],
-    feedbackText: [
-      "uy-typography-body-small-strong uy-text-content-form-invalid"
-    ],
-    closeButton: [
-      "uy-text-content-neutral-enabled group-data-[empty=true]:uy-hidden"
-    ]
-  },
-  variants: {
-    isReadOnly: {
-      true: {
-        base: "uy-bg-surface-form-disabled",
-        icon: "uy-text-content-neutral-lowest-disabled",
-        button: "uy-bg-surface-form-error uy-text-content-neutral-disabled",
-        input: "uy-bg-surface-form-disabled uy-text-content-form-read-only uy-placeholder-content-form-read-only"
-      },
-      false: {
-        base: [
-          "uy-bg-surface-form-enabled",
-          "hover:uy-border-border-form-hover hover:uy-bg-surface-form-hover"
-        ],
-        icon: "uy-text-content-neutral-lowest",
-        input: "uy-bg-text-content-form-active uy-placeholder-content-neutral-lowest"
-      }
-    }
-  }
-}), T = ({
-  intl: a,
-  placeholder: r,
-  isDisabled: o
-}) => o ? "" : r || a.formatMessage({
-  id: "unity:component:search:placeholder",
-  defaultMessage: "Search"
-}), j = w(
-  ({
-    isLoading: a = !1,
-    isInvalid: r,
-    isDisabled: o,
-    isReadOnly: n,
-    name: i,
-    placeholder: d,
-    feedbackText: s,
-    label: c,
-    ...f
-  }, y) => {
-    const {
-      base: b,
-      icon: m,
-      input: p,
-      invalidIcon: g,
-      wrapperState: v,
-      feedbackText: h,
-      closeButton: x
-    } = E({
-      isReadOnly: n
-    }), t = I();
-    return /* @__PURE__ */ u(
-      M,
-      {
-        "aria-label": c,
-        className: "uy-group",
-        name: i,
-        ref: y,
-        isInvalid: r,
-        isDisabled: o || n,
-        isReadOnly: n,
-        ...f,
-        children: [
-          /* @__PURE__ */ u("div", { className: b(), children: [
-            /* @__PURE__ */ e(
-              l,
-              {
-                src: "MagnifyingGlassOutlined",
-                className: m(),
-                "aria-hidden": "true"
-              }
-            ),
-            /* @__PURE__ */ e(
-              N,
-              {
-                className: p(),
-                placeholder: T({ intl: t, placeholder: d, isDisabled: o })
-              }
-            ),
-            /* @__PURE__ */ u("div", { className: v(), children: [
-              /* @__PURE__ */ e(
-                l,
-                {
-                  className: g(),
-                  src: "WarningCircleOutlined",
-                  color: "content.form.invalid",
-                  alt: t.formatMessage({
-                    id: "unity:component:form-field:form-input:error:alt",
-                    defaultMessage: "Error"
-                  })
-                }
-              ),
-              a && /* @__PURE__ */ e(
-                B,
-                {
-                  label: t.formatMessage({
-                    id: "unity:component:common:loading:label",
-                    defaultMessage: "Loading..."
-                  }),
-                  color: "primary",
-                  size: "small",
-                  "aria-hidden": "true"
-                }
-              ),
-              /* @__PURE__ */ e(
-                C,
-                {
-                  asElement: "button",
-                  title: t.formatMessage({
-                    id: "unity:component:common:clear:title",
-                    defaultMessage: "Clear"
-                  }),
-                  className: x(),
-                  icon: "CloseOutlined"
-                }
-              )
-            ] })
-          ] }),
-          /* @__PURE__ */ e(S, { className: h(), children: s })
-        ]
-      }
-    );
-  }
-);
-j.displayName = "Search";
-export {
-  j as Search,
-  E as search
-};

package/dist/esm/components/segmented-button-group/SegmentedButtonGroup.d.ts

@@ -1,43 +0,0 @@
-import { ReactNode } from 'react';
-import { RadioGroupProps } from 'react-aria-components';
-export interface BasedSegmentedButtonGroupProps extends Omit<RadioGroupProps, 'children' | 'style' | 'className' | 'isDisabled' | 'isInvalid' | 'isReadOnly' | 'orientation' | 'validationBehavior' | 'isRequired' | 'validate' | 'defaultValue'> {
-    /**
-     * The content of the `SegmentedButtonGroup`. Should contain `ToggleButton` components as children.
-     */
-    children: ReactNode;
-}
-export interface UncontrolledSegmentedButtonGroupProps extends BasedSegmentedButtonGroupProps, Required<Pick<RadioGroupProps, 'defaultValue'>> {
-}
-/**
- * The `SegmentedButtonGroup` component is an accessible control that allows users to select one option from a set of mutually exclusive options.
- * It's similar to a radio group but styled as connected buttons, providing a more compact and visually distinct selection mechanism.
- * Use this component when you need to:
- * - Present a small set of related but mutually exclusive options
- * - Create a toggle between different views or modes
- * - Provide a compact alternative to radio buttons or tabs
- * - Allow users to switch between different states of the same content*
- * The component supports both controlled and uncontrolled usage patterns.
- * @see {@link ToggleButton} - The child component used within SegmentedButtonGroup
- * @see {@link https://react-spectrum.adobe.com/react-aria/useRadioGroup.html|React Aria useRadioGroup} - The underlying hook used for accessibility
- * @see {@link https://www.payfit.design/24f360409/p/2745fe-segmented-control|Design System Documentation}
- * @example
- * Basic usage:
- * ```tsx
- * import { SegmentedButtonGroup, ToggleButton } from '@payfit/unity'
- *
- * function Example() {
- *   return (
- *     <SegmentedButtonGroup>
- *       <ToggleButton value="option1">Option 1</ToggleButton>
- *       <ToggleButton value="option2">Option 2</ToggleButton>
- *       <ToggleButton value="option3">Option 3</ToggleButton>
- *     </SegmentedButtonGroup>
- *   )
- * }
- * ```
- */
-declare const SegmentedButtonGroup: {
-    (props: UncontrolledSegmentedButtonGroupProps | BasedSegmentedButtonGroupProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { SegmentedButtonGroup };

package/dist/esm/components/segmented-button-group/SegmentedButtonGroup.js

@@ -1,22 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useRadioGroup as n } from "react-aria";
-import { useRadioGroupState as i } from "react-stately";
-import { SegmentedButtonGroupProvider as a } from "./SegmentedButtonGroups.context.js";
-const p = (o) => {
-  const { children: e } = o, t = i(o), { radioGroupProps: u } = n(
-    { ...o, orientation: "horizontal" },
-    t
-  );
-  return /* @__PURE__ */ r(
-    "div",
-    {
-      ...u,
-      className: "uy-bg-surface-neutral-lowest uy-pl-50 uy-pr-50 uy-pt-50 uy-pb-50 uy-flex uy-gap-50 uy-rounded-75 uy-w-fit",
-      children: /* @__PURE__ */ r(a, { state: t, children: e })
-    }
-  );
-};
-p.displayName = "SegmentedButtonGroup";
-export {
-  p as SegmentedButtonGroup
-};

package/dist/esm/components/segmented-button-group/SegmentedButtonGroups.context.d.ts

@@ -1,8 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { RadioGroupState } from 'react-stately';
-interface SegmentedButtonGroupContextValue {
-    state: RadioGroupState;
-}
-export declare const SegmentedButtonGroupContext: import('react').Context<SegmentedButtonGroupContextValue>;
-export declare function SegmentedButtonGroupProvider({ children, state, }: PropsWithChildren<SegmentedButtonGroupContextValue>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/esm/components/segmented-button-group/SegmentedButtonGroups.context.js

@@ -1,15 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { createContext as r } from "react";
-const n = r({
-  state: {}
-});
-function i({
-  children: t,
-  state: e
-}) {
-  return /* @__PURE__ */ o(n.Provider, { value: { state: e }, children: t });
-}
-export {
-  n as SegmentedButtonGroupContext,
-  i as SegmentedButtonGroupProvider
-};

package/dist/esm/components/segmented-button-group/parts/ToggleButton.d.ts

@@ -1,47 +0,0 @@
-import { UnityIcon } from '@payfit/unity-icons';
-import { AriaRadioProps } from 'react-aria';
-import { IconName } from '../../../types/utils.js';
-export interface ToggleButtonProps extends AriaRadioProps {
-    /**
-     * The icon to display before the button text.
-     * The icon will automatically switch between outlined and filled variants based on the selection state:
-     * - When selected: Uses the filled variant (`${prefixIcon}Filled`)
-     * - When not selected: Uses the outlined variant (`${prefixIcon}Outlined`)
-     */
-    prefixIcon?: IconName<UnityIcon>;
-    /**
-     * Whether the button is in a loading state.
-     * When `true`, the button content is replaced with a spinner and the button becomes non-interactive.
-     * Use this prop to indicate that an action is being processed after the button is clicked.
-     * @default false
-     */
-    isLoading?: boolean;
-}
-/**
- * The `ToggleButton` component is a specialized button used within a `SegmentedButtonGroup`.
- * It functions like a radio button but is styled as a button, providing a more visual selection mechanism.
- *
- * `ToggleButton`s can display text, icons, or both, and support various states including selected, loading, and focused.
- * They should always be used as children of a `SegmentedButtonGroup` component, which manages their selection state.
- * @remarks
- * This component must be used inside a SegmentedButtonGroup component
- * @see {@link SegmentedButtonGroup} - The parent component required for ToggleButton
- * @see {@link https://react-spectrum.adobe.com/react-aria/useRadio.html|React Aria useRadio} - The underlying hook used for accessibility
- * @example
- * Basic usage within a SegmentedButtonGroup:
- * ```tsx
- * import { SegmentedButtonGroup, ToggleButton } from '@payfit/unity'
- *
- * function Example() {
- *   return (
- *     <SegmentedButtonGroup defaultValue="option1">
- *       <ToggleButton value="option1">Option 1</ToggleButton>
- *       <ToggleButton value="option2">Option 2</ToggleButton>
- *       <ToggleButton value="option3">Option 3</ToggleButton>
- *     </SegmentedButtonGroup>
- *   )
- * }
- * ```
- */
-declare const ToggleButton: import('react').ForwardRefExoticComponent<ToggleButtonProps & import('react').RefAttributes<HTMLLabelElement>>;
-export { ToggleButton };

package/dist/esm/components/segmented-button-group/parts/ToggleButton.js

@@ -1,122 +0,0 @@
-import { jsxs as c, jsx as s, Fragment as b } from "react/jsx-runtime";
-import { forwardRef as h, useContext as x, useRef as v } from "react";
-import { useRadio as P, useFocusRing as w, VisuallyHidden as L, mergeProps as I } from "react-aria";
-import { useIntl as N } from "react-intl";
-import { tv as S } from "tailwind-variants";
-import { Icon as V } from "../../icon/Icon.js";
-import { Spinner as F } from "../../spinner/Spinner.js";
-import { SegmentedButtonGroupContext as R } from "../SegmentedButtonGroups.context.js";
-const B = S({
-  slots: {
-    base: [
-      "uy-rounded-50 uy-pt-50 uy-pb-50 uy-pr-150 uy-flex uy-gap-25",
-      "active:uy-gb-surface-neutral-pressed"
-    ],
-    wrapper: [
-      "uy-flex uy-gap-50 uy-items-center uy-typography-action",
-      "active:uy-text-content-neutral-pressed"
-    ]
-  },
-  variants: {
-    isSelected: {
-      true: { base: "uy-bg-surface-neutral-enabled uy-shadow-raising" }
-    },
-    isLoading: {
-      true: {
-        base: "uy-bg-surface-neutral-disabled uy-cursor-not-allowed",
-        wrapper: "uy-text-content-inverted-disabled"
-      }
-    },
-    isFocusVisible: {
-      true: {
-        base: "uy-outline-none uy-ring-2 uy-ring-ring uy-ring-offset-2 uy-ring-utility-focus-ring"
-      }
-    },
-    hasPrefixIcon: { true: "", false: "" }
-  },
-  compoundVariants: [
-    {
-      isLoading: !1,
-      isSelected: !1,
-      className: {
-        base: "hover:uy-bg-surface-neutral-hover",
-        wrapper: "uy-text-content-neutral-enabled hover:uy-text-content-neutral-hover"
-      }
-    },
-    {
-      isLoading: !0,
-      hasPrefixIcon: !1,
-      className: { base: "uy-pl-150 uy-cursor-not-allowed" }
-    },
-    {
-      isLoading: !0,
-      hasPrefixIcon: !0,
-      className: { base: "uy-pl-150 uy-cursor-not-allowed" }
-    },
-    {
-      isLoading: !1,
-      hasPrefixIcon: !1,
-      className: { base: "uy-pl-150 uy-cursor-pointer" }
-    },
-    {
-      isLoading: !1,
-      hasPrefixIcon: !0,
-      className: { base: "uy-pl-50 uy-cursor-pointer" }
-    }
-  ],
-  defaultVariants: {
-    isSelected: !1,
-    isLoading: !1,
-    hasPrefixIcon: !1
-  }
-}), C = ({
-  intl: t,
-  children: n,
-  isLoading: o,
-  prefixIcon: e,
-  isSelected: r
-}) => o ? /* @__PURE__ */ s(
-  F,
-  {
-    label: t.formatMessage({
-      id: "unity:component:common:loading:label",
-      defaultMessage: "Loading..."
-    }),
-    color: "inherit",
-    size: "small"
-  }
-) : /* @__PURE__ */ c(b, { children: [
-  e ? /* @__PURE__ */ s(
-    V,
-    {
-      src: r ? `${e}Filled` : `${e}Outlined`,
-      color: "inherit",
-      role: "presentation"
-    }
-  ) : null,
-  n
-] }), j = h(
-  (t, n) => {
-    const { children: o, value: e, prefixIcon: r, isLoading: a } = t, { state: i } = x(R), u = v(null), { inputProps: d } = P(t, i, u), { focusProps: f, isFocusVisible: p } = w(), y = N(), l = i.selectedValue === e, { base: g, wrapper: m } = B({
-      isSelected: l,
-      hasPrefixIcon: !!r,
-      isLoading: a,
-      isFocusVisible: p
-    });
-    return /* @__PURE__ */ c("label", { ref: n, className: g(), "aria-disabled": a, children: [
-      /* @__PURE__ */ s(L, { children: /* @__PURE__ */ s(
-        "input",
-        {
-          ...I(d, f),
-          ref: u,
-          disabled: a
-        }
-      ) }),
-      /* @__PURE__ */ s("span", { className: m(), children: C({ intl: y, children: o, isLoading: a, isSelected: l, prefixIcon: r }) })
-    ] });
-  }
-);
-j.displayName = "ToggleButton";
-export {
-  j as ToggleButton
-};

package/dist/esm/components/select/Select.d.ts

@@ -1,54 +0,0 @@
-import { ForwardedRef, JSX, ReactNode } from 'react';
-import { SelectProps as AriaSelectProps } from 'react-aria-components';
-export interface SelectProps<T extends object> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'style' | 'className' | 'selectedKey' | 'onSelectionChange'> {
-    /** In static mode, contains <SelectOption /> and <SelectOptionGroup /> components, in dynamic mode, contains a function to render items passed to the component*/
-    children: ReactNode | ((item: T) => ReactNode);
-    /** In dynamic mode, contains the items to display in the select */
-    items?: Iterable<T>;
-    /** Whether the field is read-only */
-    isReadOnly?: boolean;
-    /** The value of the selected item */
-    value?: AriaSelectProps<T>['selectedKey'];
-    /** The default value of the selected item in uncontrolled mode */
-    defaultValue?: AriaSelectProps<T>['defaultSelectedKey'];
-    /** Function trigger when a item is selected */
-    onChange?: AriaSelectProps<T>['onSelectionChange'];
-    /** Whether the search input should be displayed or not */
-    isSearchable?: boolean;
-}
-type SelectComponent = (<TItems extends object>(props: SelectProps<TItems> & {
-    ref?: ForwardedRef<HTMLDivElement>;
-}) => JSX.Element) & {
-    displayName?: string;
-};
-/**
- * The `Select` component is used to render a list of options
- * @example
- * ```tsx
- * const schema = z.object({
- *  vegetable: z.string()
- * })
- *
- * function MyForm() {
- *   const { Form, FormField } = useUnityForm(schema)
- *
- *   return (
- *    <Form action={handleSubmit}>
- *      <FormField name="vegetable">
- *        <FormLabel>Vegetables</FormLabel>
- *        <FormHelperText>Select your favorite vegetable</FormHelperText>
- *        <FormControl>
- *          <Select>
- *            <SelectOption id="Cabbage">Cabbage</SelectOption>
- *            <SelectOption id="Broccoli">Broccoli</SelectOption>
- *           <SelectOption id="Carrots">Carrots</SelectOption>
- *          </Select>
- *        </FormControl>
- *      </FormField>
- *    </Form>
- *   )
- * }
- * ```
- */
-declare const Select: SelectComponent;
-export { Select };