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

package/dist/cjs/components/actionable/Actionable.d.ts

@@ -0,0 +1,11 @@
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+/**
+ * The Actionable primitive is a component that helps you build interactive surfaces of any kind.
+ */
+declare const Actionable: import('react').ForwardRefExoticComponent<Omit<AriaButtonProps, "style" | "slot"> & {
+    /** Additional class names to apply to the actionable */
+    className?: string;
+    /** set to true to remove the Actionable's base styles */
+    isUnstyled?: boolean;
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export { Actionable };

package/dist/cjs/components/alert/Alert.d.ts

@@ -0,0 +1,155 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const alert: import('tailwind-variants').TVReturnType<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    icon: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}>, {
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    icon: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}, {
+    variant: {
+        info: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+type BaseAlertProps = PropsWithChildren<{
+    /**
+     * The alert's variant, which determines its visual style.
+     */
+    variant: NonNullable<VariantProps<typeof alert>['variant']>;
+}>;
+type DismissableConfig = {
+    /**
+     * Whether the alert is dismissable by the user, and should render a close button.
+     * @default false
+     */
+    isDismissable?: false;
+    onDismiss?: never;
+    dismissButtonLabel?: never;
+} | {
+    /**
+     * Whether the alert is dismissable by the user, and should render a close button.
+     * @default false
+     */
+    isDismissable: true;
+    /**
+     * Callback function to handle the alert's dismissal behavior.
+     */
+    onDismiss: () => void;
+    /**
+     * Label for the close button.
+     */
+    dismissButtonLabel: string;
+};
+export type AlertProps = BaseAlertProps & DismissableConfig;
+/**
+ * Alerts display brief messages for the user without interrupting their use of the app. They can provide feedback, confirmations, warnings, or errors.
+ */
+declare const Alert: import('react').ForwardRefExoticComponent<AlertProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Alert };

package/dist/cjs/components/alert/Alert.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),g=require("react"),f=require("tailwind-variants"),w=require("../icon-button/CircularIconButton.js"),p=require("../icon/Icon.js"),x=f.tv({slots:{base:"uy-p-200 uy-flex uy-gap-200 uy-border uy-rounded-100",content:"uy-flex uy-flex-col uy-flex-1 uy-gap-200 uy-pt-50 uy-pb-100",icon:"uy-mt-50"},variants:{variant:{info:{base:"uy-bg-surface-info-lowest uy-border-border-info-lowest"},warning:{base:"uy-bg-surface-warning-lowest uy-border-border-warning-lowest"},success:{base:"uy-bg-surface-success-lowest uy-border-border-success-lowest"},danger:{base:"uy-bg-surface-danger-lowest uy-border-border-danger-lowest"}}},defaultVariants:{variant:"info"}}),m={info:{src:"InfoFilled",color:"content.info"},warning:{src:"WarningFilled",color:"content.warning"},success:{src:"CheckCircleFilled",color:"content.success"},danger:{src:"WarningCircleFilled",color:"content.danger"}},s=g.forwardRef(({children:o,variant:e,isDismissable:n,onDismiss:t,dismissButtonLabel:a,...c},i)=>{const{base:l,content:u,icon:d}=x({variant:e}),y=m[e],b={role:e==="danger"?"alert":"status","aria-live":e==="danger"?"assertive":"polite","aria-atomic":!0,"aria-relevant":"additions removals"};return r.jsxs("div",{ref:i,className:l(),...b,...c,children:[r.jsx("div",{className:d(),children:r.jsx(p.Icon,{size:24,...y,alt:`${e} alert`})}),r.jsx("section",{className:u(),children:o}),n&&r.jsx(w.CircularIconButton,{title:a,icon:"CloseOutlined",onPress:t})]})});s.displayName="Alert";exports.Alert=s;

package/dist/cjs/components/alert/parts/AlertActions.d.ts

@@ -0,0 +1,55 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const alertActions: import('tailwind-variants').TVReturnType<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, undefined, "uy-flex uy-gap-100", import('tailwind-variants/dist/config').TVConfig<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, {
+    direction: {
+        row: string;
+        column: string;
+    };
+}>, {
+    direction: {
+        row: string;
+        column: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, undefined, "uy-flex uy-gap-100", import('tailwind-variants/dist/config').TVConfig<{
+    direction: {
+        row: string;
+        column: string;
+    };
+}, {
+    direction: {
+        row: string;
+        column: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type AlertActionsProps = PropsWithChildren<{
+    /**
+     * The direction in which to lay out the child actions.
+     * @default 'column'
+     */
+    direction?: VariantProps<typeof alertActions>['direction'];
+}>;
+declare const AlertActions: import('react').ForwardRefExoticComponent<{
+    /**
+     * The direction in which to lay out the child actions.
+     * @default 'column'
+     */
+    direction?: VariantProps<typeof alertActions>["direction"];
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { AlertActions };

package/dist/cjs/components/alert/parts/AlertContent.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("react"),s=require("../../text/Text.js"),e=i.forwardRef(({children:t,...r},n)=>o.jsx(s.Text,{variant:"body",ref:n,...r,children:t}));e.displayName="AlertContent";exports.AlertContent=e;

package/dist/cjs/components/alert/parts/AlertTitle.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("react"),n=require("../../text/Text.js"),t=a.forwardRef(({children:r,asElement:i="h3",...l},s)=>e.jsx("header",{children:e.jsx(n.Text,{variant:"h4",asElement:i,ref:s,className:"uy-pt-50",...l,children:r})}));t.displayName="AlertTitle";exports.AlertTitle=t;

package/dist/cjs/components/anchor/Anchor.d.ts

@@ -0,0 +1,15 @@
+import { ReactElement } from 'react';
+export type AnchorPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+interface AnchorProps {
+    children: [ReactElement, ReactElement];
+    position?: AnchorPosition;
+    offset?: number | [number, number];
+}
+/**
+ * The Anchor component is a primitive used to anchor a small component to a larger one in any of the large component's corners.
+ */
+declare const Anchor: {
+    ({ children, position, offset, }: AnchorProps): JSX.Element;
+    displayName: string;
+};
+export { Anchor };

package/dist/cjs/components/app-layout/AppLayout.d.ts

@@ -0,0 +1,22 @@
+import { PropsWithChildren, ReactNode } from 'react';
+export type AppLayoutProps = PropsWithChildren<{
+    /**
+     * The header component to be displayed at the top of the layout
+     * @default undefined
+     */
+    header?: ReactNode;
+    /**
+     * The menu component to be displayed on the side of the layout
+     */
+    menu: ReactNode;
+    /**
+     * The footer component to be displayed at the bottom of the layout
+     * @default undefined
+     */
+    footer?: ReactNode;
+}>;
+/**
+ * The `AppLayout` component creates a responsive base structure with a fixed menu sidebar.
+ * Use this when you need a complex layout with a persistent navigation menu.
+ */
+export declare function AppLayout({ children, menu: MenuElement, header: HeaderElement, footer: FooterElement, }: AppLayoutProps): JSX.Element;

package/dist/cjs/components/app-layout/AppLayout.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),m=require("tailwind-variants"),x=require("usehooks-ts"),v=m.tv({slots:{body:"uy-h-screen uy-relative uy-overflow-hidden",header:"uy-fixed uy-top-0 uy-left-0 uy-right-0 uy-z-30",layoutWrapper:["uy-flex uy-flex-col uy-w-full uy-mt-[--uy-app-layout-header-sticky-offset] uy-h-[--uy-app-layout-menu-height]","md:uy-flex-row"],menu:["uy-w-full","md:uy-max-w-app-menu"],contentWrapper:["uy-flex uy-flex-col","uy-flex-grow uy-overflow-y-auto uy-relative","md:uy-pl-100"],content:["uy-flex-1","md:uy-pr-300 md:uy-pt-250"],footer:["uy-hidden","md:uy-block"]}});function b({children:a,menu:s,header:u,footer:t}){const r=h.useRef(null),{height:o=0}=x.useResizeObserver({ref:r,box:"border-box"}),{body:l,header:y,menu:i,layoutWrapper:n,contentWrapper:c,content:d,footer:p}=v(),f={"--uy-app-layout-menu-height":`calc(100dvh - ${o}px)`,"--uy-app-layout-header-sticky-offset":`${o}px`};return e.jsxs("div",{className:l(),style:f,children:[u&&e.jsx("div",{ref:r,className:y(),role:"alert","aria-live":"assertive",children:u}),e.jsxs("div",{className:n(),children:[e.jsx("div",{className:i(),children:s}),e.jsxs("div",{className:c(),children:[e.jsx("main",{className:d(),children:a}),t&&e.jsx("footer",{className:p(),children:t})]})]})]})}exports.AppLayout=b;

package/dist/cjs/components/avatar/Avatar.context.d.ts

@@ -0,0 +1,11 @@
+type AvatarContextValue = {
+    variant: 'circle' | 'square';
+    size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    hasPair: boolean;
+};
+export declare const AvatarContext: import('react').Context<AvatarContextValue>;
+export declare function AvatarProvider({ variant, size, hasPair, children, }: AvatarContextValue & {
+    children: React.ReactNode;
+}): JSX.Element;
+export declare function useAvatarContext(): AvatarContextValue;
+export {};

package/dist/cjs/components/avatar/Avatar.d.ts

@@ -0,0 +1,206 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+declare const avatarRoot: import('tailwind-variants').TVReturnType<{} | {
+    size: {
+        xs: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        sm: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        md: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        lg: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        xl: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+    variant: {
+        circle: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        square: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+}, undefined, "uy-inline-block uy-relative uy-shrink-0", import('tailwind-variants/dist/config').TVConfig<{} | {
+    size: {
+        xs: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        sm: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        md: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        lg: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        xl: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+    variant: {
+        circle: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+        square: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, unknown, unknown, undefined>>>;
+export type AvatarProps = PropsWithChildren<{
+    /** Additional class names to apply to the avatar */
+    className?: string;
+    /** The avatar's variant. One of: circle or square */
+    variant?: VariantProps<typeof avatarRoot>['variant'];
+    /** Size of the avatar. One of: xs, sm, md, lg, xl */
+    size?: VariantProps<typeof avatarRoot>['size'];
+    /** Accessible label for the avatar */
+    'aria-label': string;
+    /** ID of the element that labels the avatar */
+    'aria-labelledby'?: string;
+    /** ID of the element that describes the avatar */
+    'aria-describedby'?: string;
+    /** Additional details for the avatar */
+    'aria-details'?: string;
+    /** Indicates if the avatar is hidden from assistive technologies */
+    'aria-hidden'?: boolean;
+}>;
+/**
+ * The Avatar component displays visual or text content for representing people or entities.
+ */
+declare const Avatar: React.ForwardRefExoticComponent<{
+    /** Additional class names to apply to the avatar */
+    className?: string;
+    /** The avatar's variant. One of: circle or square */
+    variant?: VariantProps<typeof avatarRoot>["variant"];
+    /** Size of the avatar. One of: xs, sm, md, lg, xl */
+    size?: VariantProps<typeof avatarRoot>["size"];
+    /** Accessible label for the avatar */
+    'aria-label': string;
+    /** ID of the element that labels the avatar */
+    'aria-labelledby'?: string;
+    /** ID of the element that describes the avatar */
+    'aria-describedby'?: string;
+    /** Additional details for the avatar */
+    'aria-details'?: string;
+    /** Indicates if the avatar is hidden from assistive technologies */
+    'aria-hidden'?: boolean;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export { Avatar };

package/dist/cjs/components/avatar/Avatar.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),d=require("react"),v=require("@radix-ui/react-avatar"),m=require("tailwind-merge"),f=require("tailwind-variants"),p=require("./Avatar.context.js"),b=require("./Avatar.variants.js");function n(e){if(e&&typeof e=="object"&&"default"in e)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,r.get?r:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const y=n(d),o=n(v),g=f.tv({extend:b.avatarBase,base:"uy-inline-block uy-relative uy-shrink-0",defaultVariants:{size:"md",variant:"circle"}}),c=y.forwardRef(({size:e="md",variant:t="circle",className:a,...r},s)=>{const l=g({variant:t,size:e}),u=m.twMerge(l,a);return i.jsx(p.AvatarProvider,{variant:t,size:e,hasPair:!1,children:i.jsx(o.Root,{ref:s,role:"img",className:u,...r})})});c.displayName=o.Root.displayName;exports.Avatar=c;

package/dist/cjs/components/avatar/Avatar.variants.d.ts

@@ -0,0 +1,85 @@
+export declare const avatarBase: import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}, {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    variant: {
+        circle: string;
+        square: string;
+    };
+}>, unknown, unknown, undefined>>;