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

package/dist/esm/components/toggle-switch-group-field/ToggleSwitchGroupField.d.ts

@@ -1,82 +0,0 @@
-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.js';
-import { LabelProps } from '../label/Label.js';
-import { ToggleSwitchGroupProps } from '../toggle-switch-group/ToggleSwitchGroup.js';
-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 toggle switch group. */
-    label: string;
-    /** Helper text to display below the toggle switch group. */
-    helperText?: ReactNode;
-    /** A contextual link to display below the toggle switch group. */
-    contextualLink?: ReactNode;
-    /** The default selected values of the toggle switch group. */
-    defaultValue?: string[];
-    /** Whether the toggle switch group is disabled. */
-    isDisabled?: boolean;
-    /** Whether the toggle switch group is read-only. */
-    isReadOnly?: boolean;
-    /** Whether the toggle switch group is invalid. */
-    isInvalid?: boolean;
-    /** Whether the toggle switch group is loading. */
-    isLoading?: boolean;
-    /** Callback when the selection changes. */
-    onChange?: (value: string[]) => void;
-    /** Handler called when the group receives focus. */
-    onFocus?: ToggleSwitchGroupProps['onFocus'];
-    /** Handler called when the group loses focus. */
-    onBlur?: ToggleSwitchGroupProps['onBlur'];
-    /** Handler that is called when the element's focus status changes. */
-    onFocusChange?: (isFocused: boolean) => void;
-}
-export type ToggleSwitchGroupFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName>;
-type ToggleSwitchGroupFieldComponent = (<TSchema extends Schema>(props: ToggleSwitchGroupFieldProps<ZodInfer<TSchema>> & {
-    ref?: ForwardedRef<HTMLFieldSetElement>;
-}) => JSX.Element) & {
-    displayName?: string;
-};
-/**
- * The `ToggleSwitchGroupField` component renders a group of related toggle switches that can be used in forms.
- * It combines the functionality of ToggleSwitchGroup with form integration capabilities, providing
- * automatic form state management, validation, and error handling.
- *
- * The component is ideal for collecting multiple binary preferences or settings within a form context,
- * such as notification preferences or feature toggles.
- * @param {ToggleSwitchGroupFieldProps} props - Props for the ToggleSwitchGroupField component
- * @example
- * ```tsx
- * import { useUnityForm, ToggleSwitchGroupField, ToggleSwitch } from '@payfit/unity-components'
- * import * as z from 'zod'
- *
- * function Example() {
- *   const schema = z.object({
- *     preferences: z.array(z.string())
- *   })
- *
- *   const { Form } = useUnityForm(schema)
- *
- *   return (
- *     <Form action={handleSubmit}>
- *       <ToggleSwitchGroupField<typeof schema>
- *         name="preferences"
- *         label="Select your preferences"
- *         helperText="Choose all that apply"
- *       >
- *         <ToggleSwitch value="email" label="Email notifications" />
- *         <ToggleSwitch value="sms" label="SMS notifications" />
- *       </ToggleSwitchGroupField>
- *     </Form>
- *   )
- * }
- * ```
- * @see {@link ToggleSwitchGroupFieldProps} for all available props
- * @remarks
- * [API](/?path=/docs/forms-toggleswitchgroupfield--docs) • [Demo](/?path=/story/forms-toggleswitchgroupfield--primary)
- * @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 ToggleSwitchGroupField: ToggleSwitchGroupFieldComponent;
-export { ToggleSwitchGroupField };

package/dist/esm/components/toggle-switch-group-field/ToggleSwitchGroupField.js

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

package/dist/esm/components/tooltip/Tooltip.d.ts

@@ -1,7 +0,0 @@
-import { ReactElement } from 'react';
-interface TooltipProps {
-    title: string;
-    children: ReactElement;
-}
-declare function Tooltip({ title, children }: TooltipProps): import("react/jsx-runtime").JSX.Element;
-export { Tooltip };

package/dist/esm/components/tooltip/Tooltip.js

@@ -1,21 +0,0 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { TooltipTrigger as r, Tooltip as y, Button as u } from "react-aria-components";
-import { Button as a } from "../button/Button.js";
-const i = (t) => t.type === a || t.type === u;
-function d({ title: t, children: o }) {
-  return /* @__PURE__ */ l(r, { delay: 500, closeDelay: 1500, children: [
-    o,
-    /* @__PURE__ */ e(
-      y,
-      {
-        "data-dd-privacy": "allow",
-        offset: i(o) ? 4 : 8,
-        className: "uy-inline-flex uy-rounded-50 uy-pl-100 uy-pr-100 uy-pt-50 uy-pb-50 uy-bg-grayscale-L12 uy-max-w-[300px]",
-        children: /* @__PURE__ */ e("p", { className: "uy-typography-body-small uy-text-content-inverted uy-overflow-hidden uy-text-ellipsis uy-line-clamp-3", children: t })
-      }
-    )
-  ] });
-}
-export {
-  d as Tooltip
-};

package/dist/esm/docs/blocks/Cards.d.ts

@@ -1,18 +0,0 @@
-import { PropsWithChildren, default as React } from 'react';
-type CardProps = React.PropsWithChildren;
-export declare const Card: React.FC<CardProps>;
-export declare const CardWithCover: React.FC<CardProps & {
-    coverSrc: string;
-    coverAlt: string;
-}>;
-export declare const CardHeader: React.FC<PropsWithChildren>;
-export declare const CardTitle: React.FC<PropsWithChildren>;
-export declare const CardContent: React.FC<PropsWithChildren>;
-export declare const CardActions: React.FC<PropsWithChildren>;
-export declare const Link: React.FC<PropsWithChildren<React.ComponentProps<"a">>>;
-type CardGridProps = {
-    children: React.ReactNode;
-    cols?: number;
-};
-export declare const CardGrid: React.FC<CardGridProps>;
-export {};

package/dist/esm/docs/table/mocks/employee-columns.d.ts

@@ -1,3 +0,0 @@
-import { Employee } from '../../../mocks/employees.js';
-export declare const employeeColumns: (import('@tanstack/table-core').AccessorKeyColumnDefBase<Employee, string> & Partial<import('@tanstack/table-core').IdIdentifier<Employee, string>>)[];
-export declare const employeeColumnsWithCheckbox: ((import('@tanstack/table-core').AccessorKeyColumnDefBase<Employee, string> & Partial<import('@tanstack/table-core').IdIdentifier<Employee, string>>) | import('@tanstack/table-core').DisplayColumnDef<Employee, unknown>)[];

package/dist/esm/hooks/use-async-list.d.ts

@@ -1,2 +0,0 @@
-import { useAsyncList } from 'react-stately';
-export { useAsyncList };

package/dist/esm/hooks/use-breakpoint-listener.js

@@ -1,14 +0,0 @@
-import { useMediaQuery as r } from "./use-media-query.js";
-const o = (e) => {
-  const t = getComputedStyle(document.documentElement).getPropertyValue(
-    `--uy-screens-${e}`
-  );
-  return parseInt(t.replace("px", ""), 10);
-}, n = (e) => `(min-width: ${o(e)}px)`;
-function c() {
-  const e = r(n("xl")), t = r(n("lg")), s = r(n("md")), u = r(n("sm"));
-  return e ? "xl" : t ? "lg" : s ? "md" : u ? "sm" : "xs";
-}
-export {
-  c as useBreakpointListener
-};

package/dist/esm/hooks/use-form.d.ts

@@ -1,48 +0,0 @@
-import { JSX, PropsWithChildren } from 'react';
-import { UseFormProps as UseHookFormProps, UseFormReturn as UseHookFormReturn } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
-import { FormFieldProps } from '../components/form-field/FormField.js';
-import { FormProps } from '../components/form/Form.js';
-import { Schema } from './use-form.types.js';
-export type UseUnityFormReturn<TSchema extends Schema> = {
-    methods: UseHookFormReturn<ZodInfer<TSchema>>;
-    Form: (props: Omit<FormProps<TSchema>, 'form' | 'schema'>) => JSX.Element;
-    FormField: (props: PropsWithChildren<Omit<FormFieldProps<ZodInfer<TSchema>>, 'control'>>) => JSX.Element;
-};
-/**
- * A hook to create `Form` and `FormField` components that are bound to a specific schema definition and form controller. The resulting components will have full type-safety based on the provided schema type.
- * @param `schema` a Zod schema definition to validate the form data, {@link [Zod](https://zod.dev)}
- * @param `options` the options to pass to the `react-hook-form` hook. See the official documentation for more details. {@link [React Hook Form](https://react-hook-form.com/api/useform)}
- * @returns an object containing the bounded  `Form` and `FormField` components, as well as the form controller methods {@link UseUnityFormReturn}
- * @example
- * ```tsx
- * import { useUnityForm } from '@payfit/unity-components'
- * import * as z from 'zod'
- *
- * const schema = z.object({
- *  foo: z.string().min(3),
- *  bar: z.string().optional(),
- * })
- *
- * function DemoForm() {
- *   const { Form, FormField } = useUnityForm(schema, {
- *     defaultValues: { foo: 'Hello world', bar: '' },
- *   })
- *
- *   return (
- *    <Form action={() => ...}>
- *      <FormField name="foo" type="text">
- *        // ...
- *      </FormField>
- *      // Type Error: "baz" is not assignable to "foo" | "bar".
- *      <FormField name="baz" type="text">
- *        // ...
- *      </FormField>
- *    </Form>
- *   )
- * }
- * ```
- * @remarks
- * [API]() • [Demo]()
- */
-export declare function useUnityForm<TSchema extends Schema>(schema: TSchema, options?: Omit<UseHookFormProps<ZodInfer<TSchema>>, 'resolver'>): UseUnityFormReturn<TSchema>;

package/dist/esm/hooks/use-form.js

@@ -1,32 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useMemo as n } from "react";
-import { zodResolver as l } from "@hookform/resolvers/zod";
-import { useForm as c } from "react-hook-form";
-import { FormField as u } from "../components/form-field/FormField.js";
-import { Form as s } from "../components/form/Form.js";
-function v(m, i = {
-  mode: "onTouched",
-  reValidateMode: "onChange"
-}) {
-  const r = c({
-    ...i,
-    resolver: l(m)
-  }), d = n(() => {
-    const o = (e) => /* @__PURE__ */ t(s, { ...e, form: r, schema: m, children: e.children });
-    return o.displayName = "FormWithSchema", o;
-  }, [r, m]), F = n(() => {
-    const o = (e) => (
-      // @ts-expect-error: REACT-18-MIGRATION
-      /* @__PURE__ */ t(u, { ...e, control: r.control, children: e.children })
-    );
-    return o.displayName = "FormFieldWithSchema", o;
-  }, [r]);
-  return {
-    methods: r,
-    Form: d,
-    FormField: F
-  };
-}
-export {
-  v as useUnityForm
-};

package/dist/esm/hooks/use-media-query.js

@@ -1,19 +0,0 @@
-import { useMemo as o, useState as c, useCallback as u, useLayoutEffect as d } from "react";
-import { isBrowser as m, isTestEnvironment as M } from "../utils/platform.js";
-const f = (t) => m() && !M() ? window.matchMedia(t) : null, s = (t) => t.matches;
-function v(t, r = !1) {
-  const e = o(() => f(t), [t]), [a, i] = c(
-    e ? s(e) : r
-  ), n = u(() => {
-    e && i(s(e));
-  }, [e]);
-  return d(() => {
-    if (e)
-      return e.addEventListener("change", n), () => {
-        e.removeEventListener("change", n);
-      };
-  }), a;
-}
-export {
-  v as useMediaQuery
-};

package/dist/esm/hooks/use-resizable.d.ts

@@ -1,13 +0,0 @@
-import { RefObject } from 'react';
-interface UseResizableOptions {
-    minWidth?: number;
-    minHeight?: number;
-    isDisabled?: boolean;
-}
-interface UseResizableReturn {
-    containerRef: RefObject<HTMLDivElement>;
-    handleResizeStart: (e: React.MouseEvent) => void;
-    isResizing: boolean;
-}
-export declare function useResizable({ isDisabled, minWidth, minHeight, }?: UseResizableOptions): UseResizableReturn;
-export {};

package/dist/esm/hooks/use-resizable.js

@@ -1,51 +0,0 @@
-import { useRef as R, useState as z, useEffect as g } from "react";
-function x({
-  isDisabled: c = !1,
-  minWidth: i,
-  minHeight: a
-} = {}) {
-  const e = R(null), [t, o] = z({
-    isResizing: !1,
-    startX: 0,
-    startY: 0,
-    startWidth: 0,
-    startHeight: 0
-  }), l = (r) => {
-    var s;
-    if (c) return;
-    r.preventDefault();
-    const n = (s = e.current) == null ? void 0 : s.querySelector("textarea");
-    !e.current || !n || o({
-      isResizing: !0,
-      startX: r.clientX,
-      startY: r.clientY,
-      startWidth: e.current.offsetWidth,
-      startHeight: n.offsetHeight
-    });
-  };
-  return g(() => {
-    if (!t.isResizing) return;
-    const r = (s) => {
-      if (!e.current) return;
-      const u = e.current.querySelector("textarea");
-      if (!u) return;
-      const d = s.clientX - t.startX, f = s.clientY - t.startY, h = Math.max(t.startWidth + d, i ?? 0), m = Math.max(
-        t.startHeight + f,
-        a ?? 0
-      );
-      e.current.style.width = `${h}px`, u.style.height = `${m}px`;
-    }, n = () => {
-      o((s) => ({ ...s, isResizing: !1 }));
-    };
-    return document.addEventListener("mousemove", r), document.addEventListener("mouseup", n), () => {
-      document.removeEventListener("mousemove", r), document.removeEventListener("mouseup", n);
-    };
-  }, [t, i, a]), {
-    containerRef: e,
-    handleResizeStart: l,
-    isResizing: t.isResizing
-  };
-}
-export {
-  x as useResizable
-};

package/dist/esm/index.d.ts

@@ -1,142 +0,0 @@
-export * from './components/actionable/Actionable.js';
-export * from './components/alert/Alert.js';
-export * from './components/alert/parts/AlertActions.js';
-export * from './components/alert/parts/AlertContent.js';
-export * from './components/alert/parts/AlertTitle.js';
-export * from './components/anchor/Anchor.js';
-export * from './components/app-layout/AppLayout.js';
-export * from './components/app-menu/AppMenu.js';
-export * from './components/app-menu/parts/AppMenuHeader.js';
-export * from './components/app-menu/parts/AppMenuFooter.js';
-export * from './components/app-menu/parts/AppMenuNavContent.js';
-export * from './components/app-menu/parts/AppMenu.context.js';
-export * from './components/autocomplete/Autocomplete.js';
-export * from './components/autocomplete/parts/AutocompleteItem.js';
-export * from './components/autocomplete/parts/AutocompleteItemGroup.js';
-export * from './components/avatar/Avatar.js';
-export * from './components/avatar/utils.js';
-export * from './components/avatar/parts/AvatarFallback.js';
-export * from './components/avatar/parts/AvatarImage.js';
-export * from './components/avatar/parts/AvatarPair.js';
-export * from './components/badge/Badge.js';
-export * from './components/bottom-sheet/BottomSheet.js';
-export * from './components/bottom-sheet/parts/BottomSheetHeader.js';
-export * from './components/bottom-sheet/parts/BottomSheetContent.js';
-export * from './components/bottom-sheet/parts/BottomSheetFooter.js';
-export * from './components/breadcrumbs/Breadcrumbs.js';
-export * from './components/breadcrumbs/parts/Breadcrumb.js';
-export * from './components/button/Button.js';
-export * from './components/checkbox/Checkbox.js';
-export * from './components/checkbox/CheckboxStandalone.js';
-export * from './components/checkbox-field/CheckboxField.js';
-export * from './components/checkbox-group/CheckboxGroup.js';
-export * from './components/checkbox-group-field/CheckboxGroupField.js';
-export * from './components/collapsible/Collapsible.js';
-export * from './components/collapsible/parts/CollapsibleContent.js';
-export * from './components/collapsible/parts/CollapsibleTitle.js';
-export * from './components/data-table/DataTable.js';
-export * from './components/date-picker/DatePicker.js';
-export * from './components/date-picker-field/DatePickerField.js';
-export * from './components/dialog/Dialog.js';
-export * from './components/dialog/parts/DialogActions.js';
-export * from './components/dialog/parts/DialogActions/DialogButton.js';
-export * from './components/dialog/parts/DialogContent.js';
-export * from './components/dialog/parts/DialogTitle.js';
-export * from './components/fieldset/Fieldset.js';
-export * from './components/fieldset/parts/FieldGroup.js';
-export * from './components/flex/Flex.js';
-export * from './components/flex/Flex.variants.js';
-export * from './components/flex/FlexItem.js';
-export * from './components/form/Form.js';
-export * from './components/form-field/FormField.js';
-export * from './components/form-field/parts/FormControl.js';
-export * from './components/form-field/parts/FormContextualLink.js';
-export * from './components/form-field/parts/FormFeedbackText.js';
-export * from './components/form-field/parts/FormHelperText.js';
-export * from './components/form-field/parts/FormLabel.js';
-export * from './components/full-page-loader/FullPageLoader.js';
-export * from './components/grid/Grid.js';
-export * from './components/grid/Grid.variants.js';
-export * from './components/grid/GridItem.js';
-export * from './components/icon/Icon.js';
-export * from './components/icon-button/IconButton.js';
-export * from './components/input/Input.js';
-export * from './components/label/Label.js';
-export * from './components/link/Link.js';
-export * from './components/menu/Menu.js';
-export * from './components/menu/parts/MenuContent.js';
-export * from './components/menu/parts/MenuHeader.js';
-export * from './components/menu/parts/MenuItem.js';
-export * from './components/menu/parts/MenuSeparator.js';
-export * from './components/menu/parts/MenuTrigger.js';
-export * from './components/multi-select/MultiSelect.js';
-export * from './components/multi-select/parts/MultiSelectOption.js';
-export * from './components/multi-select/parts/MultiSelectOptGroup.js';
-export * from './components/multi-select-field/MultiSelectField.js';
-export * from './components/nav/Nav.js';
-export * from './components/nav/parts/NavGroup.js';
-export * from './components/nav/parts/NavItem.js';
-export * from './components/page/Page.js';
-export * from './components/page/parts/PageHeader.js';
-export * from './components/page/parts/PageHeading.js';
-export * from './components/pagination/Pagination.js';
-export * from './components/payfit-brand/PayFitBrand.js';
-export * from './components/payfit-brand/PayFitPreprod.js';
-export * from './components/pill/Pill.js';
-export * from './components/popover/Popover.js';
-export * from './components/progress-bar/ProgressBar.js';
-export * from './components/radio-button-group/RadioButtonGroup.js';
-export * from './components/radio-button-group/parts/RadioButton.js';
-export * from './components/radio-button-group/parts/RadioButtonHelper.js';
-export * from './components/radio-button-group-field/RadioButtonGroupField.js';
-export * from './components/search/Search.js';
-export * from './components/segmented-button-group/SegmentedButtonGroup.js';
-export * from './components/segmented-button-group/parts/ToggleButton.js';
-export * from './components/select/parts/SelectButton.js';
-export * from './components/select/parts/SelectOption.js';
-export * from './components/select/parts/SelectOptionGroup.js';
-export * from './components/select/parts/SelectOptionHelper.js';
-export * from './components/select/Select.js';
-export * from './components/select-field/SelectField.js';
-export * from './components/selectable-button-group/SelectableButtonGroup.js';
-export * from './components/selectable-button-group/parts/SelectableButton.js';
-export * from './components/selectable-card/selectable-card-checkbox-group/parts/SelectableCardCheckbox.js';
-export * from './components/selectable-card/selectable-card-checkbox-group/SelectableCardCheckboxGroup.js';
-export * from './components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.js';
-export * from './components/selectable-card/selectable-card-radio-group/SelectableCardRadioGroup.js';
-export * from './components/selectable-card-checkbox-group-field/SelectableCardCheckboxGroupField.js';
-export * from './components/selectable-card-radio-group-field/SelectableCardRadioGroupField.js';
-export * from './components/side-panel/SidePanel.js';
-export * from './components/side-panel/parts/SidePanelHeader.js';
-export * from './components/side-panel/parts/SidePanelContent.js';
-export * from './components/side-panel/parts/SidePanelFooter.js';
-export * from './components/spinner/Spinner.js';
-export * from './components/table/Table.js';
-export * from './components/table/parts/TableBody.js';
-export * from './components/table/parts/TableCell.js';
-export * from './components/table/parts/TableColumnHeader.js';
-export * from './components/table/parts/TableEmptyState.js';
-export * from './components/table/parts/TableHeader.js';
-export * from './components/table/parts/TablePagination.js';
-export * from './components/table/parts/TableRow.js';
-export * from './components/tabs/Tabs.js';
-export * from './components/tabs/parts/Tab.js';
-export * from './components/tabs/parts/TabList.js';
-export * from './components/tabs/parts/TabPanel.js';
-export * from './components/text/Text.js';
-export * from './components/text/Text.variants.js';
-export * from './components/text-area/TextArea.js';
-export * from './components/text-field/TextField.js';
-export * from './components/toast/toast.js';
-export * from './components/toast/ToastManager.js';
-export * from './components/tooltip/Tooltip.js';
-export * from './hooks/use-async-list.js';
-export * from './hooks/use-breakpoint-listener.js';
-export * from './hooks/use-form.js';
-export * from './hooks/use-media-query.js';
-export * from './providers/router/RouterProvider.js';
-export * from './providers/router/integrations/UnityReactRouterV5Provider.js';
-export * from './components/toggle-switch/ToggleSwitch.js';
-export * from './components/toggle-switch-group/ToggleSwitchGroup.js';
-export * from './components/toggle-switch-field/ToggleSwitchField.js';
-export * from './components/toggle-switch-group-field/ToggleSwitchGroupField.js';