@payfit/unity-components 0.0.0-alpha.8 → 1.0.0

package/dist/esm/components/date-picker-field/DatePickerField.mjs

@@ -1,73 +0,0 @@
-import { jsxs as D, jsx as e } from "react/jsx-runtime";
-import { forwardRef as C } from "react";
-import { useFormContext as b } from "react-hook-form";
-import { tv as B } from "tailwind-variants";
-import { DatePicker as j } from "../date-picker/DatePicker.mjs";
-import { FormField as I } from "../form-field/FormField.mjs";
-import { FormControl as N } from "../form-field/parts/FormControl.mjs";
-import { FormFeedbackText as T } from "../form-field/parts/FormFeedbackText.mjs";
-import { FormHelperText as V } from "../form-field/parts/FormHelperText.mjs";
-import { FormLabel as g } from "../form-field/parts/FormLabel.mjs";
-const v = B({
-  base: "uy-flex uy-flex-col uy-gap-100"
-});
-function w({
-  name: r,
-  label: o,
-  defaultValue: t,
-  helperText: i,
-  feedbackText: m,
-  contextualLink: n,
-  isRequired: s,
-  isInvalid: a,
-  isLoading: c,
-  isDisabled: d,
-  isReadOnly: f,
-  requiredVariant: p,
-  ...l
-}, u) {
-  const { control: F, resetField: k, setValue: P } = b(), h = {
-    isRequired: s,
-    isInvalid: a,
-    isLoading: c,
-    isDisabled: d,
-    isReadOnly: f
-  }, x = () => {
-    k(r, {
-      keepTouched: !1,
-      keepDirty: !1,
-      keepError: !1
-    }), P(r, null, { shouldValidate: !1 });
-  }, y = l.onClearButtonPress ?? x;
-  return /* @__PURE__ */ D(
-    I,
-    {
-      control: F,
-      name: r,
-      className: v(),
-      ...h,
-      children: [
-        /* @__PURE__ */ e(g, { requiredVariant: p, children: o }),
-        i && /* @__PURE__ */ e(V, { children: i }),
-        /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(
-          j,
-          {
-            ref: u,
-            defaultValue: t,
-            onClearButtonPress: y,
-            ...l
-          }
-        ) }),
-        /* @__PURE__ */ e(T, { children: m }),
-        n
-      ]
-    }
-  );
-}
-const E = C(function(o, t) {
-  return w(o, t);
-});
-E.displayName = "DatePickerField";
-export {
-  E as DatePickerField
-};

package/dist/esm/components/dialog/Dialog.d.mts

@@ -1,30 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { DialogTrigger } from 'react-aria-components';
-interface DialogProps {
-    /** aria-label has to be defined if the dialog does not have a visible label*/
-    'aria-label'?: string;
-    /** (optional) modal opened by default or not **If it is set to true, the closing should be handled from outside** /*/
-    isOpen?: boolean;
-    /** it is used for controlled mode (need to be used with isOpen property) */
-    onOpenChange?: (isOpen: boolean) => void;
-    /** if false it does not allow to close the modal when click outside, default: true*/
-    isDismissable?: boolean;
-}
-/**
- * The `Dialog` is the container component for the dialog, it will contain the different parts of the dialog:
- * - `DialogTitle`: It contains the title of the dialog
- * - `DialogContent`: It contains the content of the dialog, **this component has to be defined**
- * - `DialogActions`: It contains the action buttons
- * - `DialogButton`: It can be:
- *  - `close`: The one in charge to close the modal
- *  - `confirm`: The one in charge to trigger an action
- *  - `danger`: The one in charge to trigger a dangerous action
- *
- *
- * **If the title is not a visible label, the `aria-abel` property has to be defined**
- */
-export declare function Dialog({ children, isOpen, onOpenChange, isDismissable, ...rest }: PropsWithChildren<DialogProps>): import("react/jsx-runtime").JSX.Element;
-export declare namespace Dialog {
-    var displayName: string;
-}
-export { DialogTrigger };

package/dist/esm/components/dialog/Dialog.mjs

@@ -1,49 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Children as l, isValidElement as t } from "react";
-import { useId as y } from "react-aria";
-import { ModalOverlay as s, Modal as d, DialogContext as m, Dialog as f } from "react-aria-components";
-import { DialogTrigger as A } from "react-aria-components";
-import { DialogActions as g } from "./parts/DialogActions.mjs";
-import { DialogButton as p } from "./parts/DialogActions/DialogButton.mjs";
-const c = (r) => {
-  const a = l.toArray(r).find(
-    (e) => t(e) && e.type === g
-  );
-  return t(a) ? l.toArray(a.props.children).some(
-    (e) => t(e) && e.type === p && e.props.variant === "danger"
-  ) : !1;
-};
-function b({
-  children: r,
-  isOpen: a,
-  onOpenChange: e,
-  isDismissable: u = !0,
-  ...n
-}) {
-  const i = y();
-  return /* @__PURE__ */ o(
-    s,
-    {
-      isDismissable: u,
-      isOpen: a,
-      onOpenChange: e,
-      className: "uy-fixed uy-inset-0 uy-z-10 uy-overflow-y-auto uy-flex uy-min-h-full uy-items-center uy-justify-center uy-text-center uy-backdrop-blur-sm uy-bg-utility-backdrop/65",
-      children: /* @__PURE__ */ o(d, { className: "uy-bg-surface-neutral uy-max-w-[640px] uy-overflow-hidden uy-rounded-200 uy-bg-white uy-p-400 uy-text-left uy-align-middle uy-shadow-floating", children: /* @__PURE__ */ o(m.Provider, { value: { "aria-describedby": i }, children: /* @__PURE__ */ o(
-        f,
-        {
-          role: c(r) ? "alertdialog" : "dialog",
-          "aria-modal": "true",
-          className: "uy-outline-none uy-relative uy-flex uy-flex-col uy-gap-400",
-          "aria-label": n["aria-label"],
-          "aria-describedby": i,
-          children: r
-        }
-      ) }) })
-    }
-  );
-}
-b.displayName = "Dialog";
-export {
-  b as Dialog,
-  A as DialogTrigger
-};

package/dist/esm/components/dialog/parts/DialogActions/DialogButton.d.mts

@@ -1,18 +0,0 @@
-import { UnityIcon } from '@payfit/unity-icons';
-import { PropsWithChildren } from 'react';
-import { ButtonProps } from '../../../button/Button.mjs';
-export interface DialogButtonProps extends Omit<ButtonProps, 'variant' | 'color'> {
-    /** the different variants for the button */
-    variant: 'close' | 'confirm' | 'danger';
-    /** the icon, it is a discouraged practice, except for `danger` variant which has a `WarningCircleOutlined` as default */
-    icon?: UnityIcon;
-}
-/**
- * A `DialogButton` is a button which has to be included into `DialogActions` container
- *
- */
-declare const DialogButton: {
-    ({ children, variant, onPress, icon, }: PropsWithChildren<DialogButtonProps>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { DialogButton };

package/dist/esm/components/dialog/parts/DialogActions/DialogButton.mjs

@@ -1,43 +0,0 @@
-import { jsx as e } from "react/jsx-runtime";
-import { useContext as p } from "react";
-import { OverlayTriggerStateContext as c } from "react-aria-components";
-import { Button as i } from "../../../button/Button.mjs";
-const f = ({
-  children: t,
-  variant: n,
-  onPress: r,
-  icon: o
-}) => {
-  const a = p(c);
-  switch (n) {
-    case "close":
-      return /* @__PURE__ */ e(
-        i,
-        {
-          prefixIcon: o,
-          variant: "secondary",
-          onPress: (m) => {
-            r && r(m), a == null || a.close();
-          },
-          children: t
-        }
-      );
-    case "confirm":
-      return /* @__PURE__ */ e(i, { prefixIcon: o, variant: "primary", onPress: r, children: t });
-    case "danger":
-      return /* @__PURE__ */ e(
-        i,
-        {
-          variant: "primary",
-          color: "danger",
-          prefixIcon: o ?? "WarningCircleOutlined",
-          onPress: r,
-          children: t
-        }
-      );
-  }
-};
-f.displayName = "DialogButton";
-export {
-  f as DialogButton
-};

package/dist/esm/components/dialog/parts/DialogActions.d.mts

@@ -1,6 +0,0 @@
-import { PropsWithChildren } from 'react';
-declare const DialogActions: {
-    ({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { DialogActions };

package/dist/esm/components/dialog/parts/DialogActions.mjs

@@ -1,6 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-const e = ({ children: s }) => /* @__PURE__ */ t("div", { className: "uy-flex uy-justify-end uy-items-start uy-gap-100 uy-self-stretch", children: s });
-e.displayName = "DialogActions";
-export {
-  e as DialogActions
-};

package/dist/esm/components/dialog/parts/DialogContent.d.mts

@@ -1,4 +0,0 @@
-declare const DialogContent: import('react').ForwardRefExoticComponent<object & {
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLElement>>;
-export { DialogContent };

package/dist/esm/components/dialog/parts/DialogContent.mjs

@@ -1,14 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { useContextProps as a, DialogContext as d } from "react-aria-components";
-const m = n(
-  (o, t) => {
-    [o] = a(o, t, d);
-    const { children: r, ...e } = o;
-    return /* @__PURE__ */ i("div", { id: e["aria-describedby"], children: r });
-  }
-);
-m.displayName = "DialogContent";
-export {
-  m as DialogContent
-};

package/dist/esm/components/dialog/parts/DialogTitle.d.mts

@@ -1,6 +0,0 @@
-import { PropsWithChildren } from 'react';
-declare const DialogTitle: {
-    ({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { DialogTitle };

package/dist/esm/components/dialog/parts/DialogTitle.mjs

@@ -1,7 +0,0 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Heading as i } from "react-aria-components";
-const a = ({ children: t }) => /* @__PURE__ */ o(i, { slot: "title", className: "uy-typography-h2", children: t });
-a.displayName = "DialogTitle";
-export {
-  a as DialogTitle
-};

package/dist/esm/components/fieldset/Fieldset.d.mts

@@ -1,150 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
-export declare const fieldset: import('tailwind-variants').TVReturnType<{
-    isLegendHidden: {
-        true: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-        false: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-    };
-}, {
-    base: string;
-    legend: string;
-    description: string;
-    fieldsContainer: string;
-}, undefined, import('tailwind-variants/dist/config').TVConfig<{
-    isLegendHidden: {
-        true: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-        false: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-    };
-}, {
-    isLegendHidden: {
-        true: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-        false: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-    };
-}>, {
-    isLegendHidden: {
-        true: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-        false: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-    };
-}, {
-    base: string;
-    legend: string;
-    description: string;
-    fieldsContainer: string;
-}, import('tailwind-variants').TVReturnType<{
-    isLegendHidden: {
-        true: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-        false: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-    };
-}, {
-    base: string;
-    legend: string;
-    description: string;
-    fieldsContainer: string;
-}, undefined, import('tailwind-variants/dist/config').TVConfig<{
-    isLegendHidden: {
-        true: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-        false: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-    };
-}, {
-    isLegendHidden: {
-        true: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-        false: {
-            legend: string;
-            description: string;
-            fieldsContainer: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;
-export interface FieldsetProps extends PropsWithChildren<VariantProps<typeof fieldset>> {
-    /**
-     * The legend of the fieldset.
-     */
-    legend: string;
-    /**
-     * An optional description of the fieldset.
-     */
-    description?: string;
-    /**
-     * Whether to hide the legend of the fieldset.
-     */
-    isLegendHidden?: boolean;
-}
-/**
- * The `Fieldset` component groups related form fields together with an accessible structure.
- * It provides visual organization and semantic HTML for form sections, making forms more understandable and navigable.
- * @param {FieldsetProps} props - The props for the `Fieldset` component
- * @see {@link FieldsetProps} for all available props
- * @example
- * ```tsx
- * import { Fieldset } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <Fieldset
- *       legend="Personal Information"
- *       description="Please provide your contact details"
- *       isLegendHidden={false}
- *     >
- *       <TextField name="firstName" label="First name" />
- *       <TextField name="lastName" label="Last name" />
- *     </Fieldset>
- *   )
- * }
- * ```
- * @remarks
- * [API](https://unity-components.payfit.io/?path=/docs/forms-fieldset--docs) • [Design docs](https://www.payfit.design/24f360409/p/1151cf-form-layout)
- */
-declare const Fieldset: import('react').ForwardRefExoticComponent<FieldsetProps & import('react').RefAttributes<HTMLFieldSetElement>>;
-export { Fieldset };

package/dist/esm/components/fieldset/Fieldset.mjs

@@ -1,65 +0,0 @@
-import { jsxs as f, jsx as t } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { useId as g } from "react-aria";
-import { tv as b } from "tailwind-variants";
-const x = b({
-  slots: {
-    base: "uy-p-0 uy-m-0 [&+&]:uy-mt-500 [&:last-of-type]:uy-mb-500",
-    legend: "uy-typography-h3 uy-text-content-neutral",
-    description: "uy-block uy-typography-body uy-mt-100 uy-text-content-neutral",
-    fieldsContainer: "uy-flex uy-flex-col uy-gap-250"
-  },
-  variants: {
-    isLegendHidden: {
-      true: {
-        legend: "uy-sr-only",
-        description: "uy-sr-only",
-        fieldsContainer: "uy-mt-0"
-      },
-      false: {
-        legend: "uy-block",
-        description: "uy-block",
-        fieldsContainer: "uy-mt-300"
-      }
-    }
-  },
-  defaultVariants: {
-    isLegendHidden: !1
-  }
-}), h = m(
-  ({ children: i, ...d }, n) => {
-    const s = g(), { legend: l, description: e, isLegendHidden: o, ...r } = d, {
-      base: a,
-      legend: y,
-      description: c,
-      fieldsContainer: u
-    } = x({ isLegendHidden: o }), p = e ? `${s}-fieldset-description` : void 0;
-    return /* @__PURE__ */ f(
-      "fieldset",
-      {
-        ...r,
-        ref: n,
-        className: a(),
-        "aria-describedby": p,
-        children: [
-          /* @__PURE__ */ t("legend", { className: y(), children: l }),
-          e && /* @__PURE__ */ t(
-            "span",
-            {
-              id: `${s}-fieldset-description`,
-              "data-fieldset-slot": "description",
-              className: c(),
-              children: e
-            }
-          ),
-          /* @__PURE__ */ t("div", { className: u(), children: i })
-        ]
-      }
-    );
-  }
-);
-h.displayName = "Fieldset";
-export {
-  h as Fieldset,
-  x as fieldset
-};

package/dist/esm/components/fieldset/parts/FieldGroup.d.mts

@@ -1,27 +0,0 @@
-/**
- * The `FieldGroup` component arranges form fields in a responsive grid layout within a Fieldset.
- * It optimizes space by displaying fields side-by-side on larger screens while stacking them on mobile devices.
- * @param {PropsWithChildren<object>} props - The props for the `FieldGroup` component
- * @example
- * ```tsx
- * import { Fieldset, FieldGroup } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <Fieldset legend="Personal Information">
- *       <FieldGroup>
- *         <TextField name="firstName" label="First name" />
- *         <TextField name="lastName" label="Last name" />
- *       </FieldGroup>
- *       <TextField name="email" label="Email" />
- *     </Fieldset>
- *   )
- * }
- * ```
- * @remarks
- * [API](https://unity-components.payfit.io/?path=/docs/forms-fieldset-fieldgroup--docs) • [Design docs](https://www.payfit.design/24f360409/p/1151cf-form-layout)
- */
-declare const FieldGroup: import('react').ForwardRefExoticComponent<object & {
-    children?: import('react').ReactNode | undefined;
-} & import('react').RefAttributes<HTMLDivElement>>;
-export { FieldGroup };

package/dist/esm/components/fieldset/parts/FieldGroup.mjs

@@ -1,18 +0,0 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-const u = p(
-  ({ children: r, ...o }, d) => /* @__PURE__ */ i(
-    "div",
-    {
-      ...o,
-      ref: d,
-      role: "group",
-      className: "uy-grid uy-grid-cols-1 uy-gap-y-250 md:uy-grid-cols-2 md:uy-gap-x-200",
-      children: r
-    }
-  )
-);
-u.displayName = "FieldGroup";
-export {
-  u as FieldGroup
-};

package/dist/esm/components/flex/Flex.d.mts

@@ -1,64 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import { flex } from './Flex.variants.mjs';
-export type FlexContainerVariantProps = VariantProps<typeof flex>;
-type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';
-export interface FlexProps {
-    /** Render the flex container as a specific HTML element */
-    asElement?: ElementType;
-    /** Create an inline flex container instead of a block-level container */
-    inline?: FlexContainerVariantProps['inline'];
-    /** Set the main axis direction. Use 'row' for horizontal or 'col' for vertical layout */
-    direction?: FlexContainerVariantProps['direction'];
-    /** Reverse the flow of items along the main axis */
-    isReversed?: FlexContainerVariantProps['isReversed'];
-    /** Control how items wrap when they exceed container size. Use 'wrap', 'wrap-reverse', or 'nowrap' */
-    wrap?: FlexContainerVariantProps['wrap'];
-    /** Add equal spacing between items in both directions */
-    gap?: FlexContainerVariantProps['gap'];
-    /** Add horizontal spacing between items */
-    gapX?: FlexContainerVariantProps['gapX'];
-    /** Add vertical spacing between items */
-    gapY?: FlexContainerVariantProps['gapY'];
-    /** Align items along the main axis. Use 'start', 'center', 'end', 'between', 'around', or 'evenly' */
-    justify?: FlexContainerVariantProps['justify'];
-    /** Align items along the cross axis. Use 'start', 'center', 'end', 'baseline', or 'stretch' */
-    align?: FlexContainerVariantProps['align'];
-    /** Align wrapped lines. Use 'start', 'center', 'end', 'between', 'around', or 'evenly' */
-    alignContent?: FlexContainerVariantProps['alignContent'];
-    /** Add custom classes to the flex container */
-    className?: string;
-    /** The content to be laid out using flexbox */
-    children?: React.ReactNode;
-}
-/**
- * The Flex component provides a powerful and intuitive way to create flexible layouts using CSS Flexbox.
- * Use it to create rows, columns, and complex layouts with precise control over item alignment and spacing.
- *
- * Key features:
- * - Create row or column layouts with the `direction` prop
- * - Control spacing with `gap`, `gapX`, and `gapY` props
- * - Align items with `justify` and `align` props
- * - Control wrapping behavior with the `wrap` prop
- * - Reverse item order with `isReversed`
- *
- * Use `FlexItem` components inside `Flex` to control individual item behavior.
- *
- * > Note: `Flex` and `FlexItem` also export the aliases `Stack` and `StackItem`. We recommend you use `Flex` and `FlexItem` for clarity.
- * @example
- * ```tsx
- * // Create a basic row layout with gap
- * <Flex gap="100">
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- * </Flex>
- *
- * // Create a column layout with items centered
- * <Flex direction="col" align="center" justify="center">
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- * </Flex>
- * ```
- */
-export declare const Flex: import('react').ForwardRefExoticComponent<FlexProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexProps> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const Stack: import('react').ForwardRefExoticComponent<FlexProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexProps> & import('react').RefAttributes<HTMLDivElement>>;
-export {};

package/dist/esm/components/flex/Flex.mjs

@@ -1,42 +0,0 @@
-import { jsx as N } from "react/jsx-runtime";
-import { forwardRef as j } from "react";
-import { flex as k } from "./Flex.variants.mjs";
-const e = j(
-  ({
-    asElement: o = "div",
-    children: r,
-    className: t,
-    inline: s,
-    direction: m,
-    isReversed: a,
-    wrap: l,
-    gap: f,
-    gapX: c,
-    gapY: i,
-    justify: n,
-    align: p,
-    alignContent: x,
-    ...d
-  }, y) => {
-    const F = k({
-      inline: s,
-      direction: m,
-      isReversed: a,
-      wrap: l,
-      gap: f,
-      gapX: c,
-      gapY: i,
-      justify: n,
-      align: p,
-      alignContent: x,
-      className: t
-    });
-    return /* @__PURE__ */ N(o, { ref: y, className: F, ...d, children: r });
-  }
-);
-e.displayName = "Flex";
-const E = e;
-export {
-  e as Flex,
-  E as Stack
-};