@payfit/unity-components 0.0.0-alpha.9 → 1.1.0

package/dist/cjs/components/dialog/Dialog.d.ts

@@ -1,117 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
-import { DialogTrigger } from 'react-aria-components';
-export declare const dialog: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    overlay: string[];
-    wrapper: string[];
-    content: string[];
-}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}>, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    overlay: string[];
-    wrapper: string[];
-    content: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
-    overlay: string[];
-    wrapper: string[];
-    content: string[];
-}, undefined, import('tailwind-variants/dist/config').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            content?: import('tailwind-merge').ClassNameValue;
-            overlay?: import('tailwind-merge').ClassNameValue;
-            wrapper?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}>, unknown, unknown, undefined>>;
-interface DialogProps extends PropsWithChildren<VariantProps<typeof dialog>> {
-    /** 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 component provides a modal interface for displaying important information and gathering user input
- * without requiring navigation to a different page. It maintains context and focus while demanding attention.
- *
- * Use Dialog when you need to capture user attention, gather critical input, or display important information
- * that requires acknowledgment before proceeding.
- *
- * The Dialog consists of several parts that work together:
- * - `DialogTitle`: Displays the title of the dialog
- * - `DialogContent`: Contains the main content of the dialog (required)
- * - `DialogActions`: Contains action buttons for user interaction
- * - `DialogButton`: Handles specific actions (close, confirm, or danger)
- * @param props - The props for the Dialog component
- * @see {@link DialogProps} for all available props
- * @example
- * ```tsx
- * import {
- *   Dialog,
- *   DialogTrigger,
- *   DialogTitle,
- *   DialogContent,
- *   DialogActions,
- *   DialogButton
- * } from '@payfit/unity-components'
- *
- * function BasicExample() {
- *   return (
- *     <DialogTrigger>
- *       <Button>Open dialog</Button>
- *       <Dialog>
- *         <DialogTitle>Important information</DialogTitle>
- *         <DialogContent>
- *           This content requires your attention before proceeding.
- *         </DialogContent>
- *         <DialogActions>
- *           <DialogButton variant="close">Cancel</DialogButton>
- *           <DialogButton variant="confirm">Confirm</DialogButton>
- *         </DialogActions>
- *       </Dialog>
- *     </DialogTrigger>
- *   )
- * }
- * ```
- * @remarks
- * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-dialog--docs) • [Design Docs](https://www.payfit.design/24f360409/p/01f5dc-dialog)
- */
-export declare function Dialog({ children, isOpen, onOpenChange, isDismissable, ...rest }: DialogProps): import("react/jsx-runtime").JSX.Element;
-export declare namespace Dialog {
-    var displayName: string;
-}
-export { DialogTrigger };

package/dist/cjs/components/dialog/Dialog.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),r=require("react"),m=require("react-aria"),a=require("react-aria-components"),p=require("tailwind-variants"),f=require("./parts/DialogActions.js"),b=require("./parts/DialogActions/DialogButton.js"),u=p.tv({slots:{overlay:["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"],wrapper:["uy-w-full md:uy-max-w-[640px]","uy-m-400 md:uy-m-0","uy-overflow-hidden uy-rounded-200 uy-bg-white uy-p-300 md:uy-p-400","uy-text-left uy-align-middle uy-shadow-floating","uy-bg-surface-neutral"],content:["uy-outline-none uy-relative uy-flex uy-flex-col uy-gap-300 md:uy-gap-400"]}}),D=t=>{const i=r.Children.toArray(t).find(e=>r.isValidElement(e)&&e.type===f.DialogActions);return r.isValidElement(i)?r.Children.toArray(i.props.children).some(e=>r.isValidElement(e)&&e.type===b.DialogButton&&e.props.variant==="danger"):!1};function n({children:t,isOpen:i,onOpenChange:e,isDismissable:s=!0,...y}){const o=m.useId(),{overlay:d,wrapper:g,content:c}=u();return l.jsx(a.ModalOverlay,{isDismissable:s,isOpen:i,onOpenChange:e,className:d(),children:l.jsx(a.Modal,{className:g(),"data-unity-dialog":!0,"data-dd-privacy":"allow",children:l.jsx(a.DialogContext.Provider,{value:{"aria-describedby":o},children:l.jsx(a.Dialog,{role:D(t)?"alertdialog":"dialog","aria-modal":"true",className:c(),"aria-label":y["aria-label"],"aria-describedby":o,children:t})})})})}n.displayName="Dialog";a.DialogTrigger.displayName="DialogTrigger";Object.defineProperty(exports,"DialogTrigger",{enumerable:!0,get:()=>a.DialogTrigger});exports.Dialog=n;exports.dialog=u;

package/dist/cjs/components/dialog/parts/DialogActions/DialogButton.d.ts

@@ -1,18 +0,0 @@
-import { UnityIcon } from '@payfit/unity-icons';
-import { PropsWithChildren } from 'react';
-import { ButtonProps } from '../../../button/Button.js';
-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/cjs/components/dialog/parts/DialogActions/DialogButton.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),s=require("react"),l=require("react-aria-components"),a=require("../../../button/Button.js"),i=({children:e,variant:u,onPress:t,icon:r})=>{const n=s.useContext(l.OverlayTriggerStateContext);switch(u){case"close":return o.jsx(a.Button,{prefixIcon:r,variant:"secondary",onPress:c=>{t&&t(c),n==null||n.close()},children:e});case"confirm":return o.jsx(a.Button,{prefixIcon:r,variant:"primary",onPress:t,children:e});case"danger":return o.jsx(a.Button,{variant:"primary",color:"danger",prefixIcon:r??"WarningCircleOutlined",onPress:t,children:e})}};i.displayName="DialogButton";exports.DialogButton=i;

package/dist/cjs/components/dialog/parts/DialogActions.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=({children:e})=>s.jsx("div",{className:"uy-flex uy-justify-end uy-items-start uy-gap-100 uy-self-stretch","data-dd-privacy":"allow",children:e});t.displayName="DialogActions";exports.DialogActions=t;

package/dist/cjs/components/dialog/parts/DialogContent.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),s=require("react"),t=require("react-aria-components"),o=s.forwardRef((e,n)=>{[e]=t.useContextProps(e,n,t.DialogContext);const{children:a,...r}=e;return i.jsx("div",{id:r["aria-describedby"],"data-dd-privacy":"mask",className:"uy-typography-body uy-text-content-neutral",children:a})});o.displayName="DialogContent";exports.DialogContent=o;

package/dist/cjs/components/dialog/parts/DialogTitle.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),i=require("react-aria-components"),e=({children:t})=>a.jsx(i.Heading,{slot:"title",className:"uy-typography-h2","data-dd-privacy":"allow",children:t});e.displayName="DialogTitle";exports.DialogTitle=e;

package/dist/cjs/components/fieldset/Fieldset.d.ts

@@ -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/cjs/components/fieldset/Fieldset.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),m=require("react"),b=require("react-aria"),x=require("tailwind-variants"),i=x.tv({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}}),d=m.forwardRef(({children:n,...l},r)=>{const s=b.useId(),{legend:a,description:t,isLegendHidden:o,...c}=l,{base:y,legend:u,description:p,fieldsContainer:f}=i({isLegendHidden:o}),g=t?`${s}-fieldset-description`:void 0;return e.jsxs("fieldset",{"data-dd-privacy":"allow",...c,ref:r,className:y(),"aria-describedby":g,children:[e.jsx("legend",{className:u(),children:a}),t&&e.jsx("span",{id:`${s}-fieldset-description`,"data-fieldset-slot":"description",className:p(),children:t}),e.jsx("div",{className:f(),children:n})]})});d.displayName="Fieldset";exports.Fieldset=d;exports.fieldset=i;

package/dist/cjs/components/fieldset/parts/FieldGroup.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),d=require("react"),e=d.forwardRef(({children:r,...u},o)=>i.jsx("div",{...u,ref:o,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}));e.displayName="FieldGroup";exports.FieldGroup=e;

package/dist/cjs/components/flex/Flex.d.ts

@@ -1,64 +0,0 @@
-import { VariantProps } from 'tailwind-variants';
-import { flex } from './Flex.variants.js';
-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/cjs/components/flex/Flex.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react/jsx-runtime"),j=require("react"),q=require("./Flex.variants.js"),e=j.forwardRef(({asElement:t="div",children:s,className:r,inline:a,direction:c,isReversed:l,wrap:n,gap:o,gapX:i,gapY:u,justify:x,align:d,alignContent:m,...f},y)=>{const F=q.flex({inline:a,direction:c,isReversed:l,wrap:n,gap:o,gapX:i,gapY:u,justify:x,align:d,alignContent:m,className:r});return S.jsx(t,{ref:y,className:F,...f,children:s})});e.displayName="Flex";const v=e;exports.Flex=e;exports.Stack=v;