@payfit/unity-components 0.0.0-alpha.11

package/dist/cjs/components/bottom-sheet/parts/BottomSheetHeader.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),y=require("react-aria-components"),d=require("tailwind-variants"),m=require("../../icon-button/CircularIconButton.cjs"),n=d.tv({slots:{base:["uy-py-200 uy-px-300 uy-w-full","uy-flex uy-flex-col uy-shrink-0","uy-bg-surface-neutral uy-rounded-tl-200 uy-rounded-tr-200 uy-shadow-raising","uy-sticky uy-top-0 uy-z-10"],content:["uy-flex uy-items-center uy-w-full"],heading:["uy-typography-h3 uy-text-center uy-text-content-neutral uy-truncate","uy-flex-1 uy-min-w-0"],buttonContainer:["uy-flex-shrink-0 uy-flex-grow-0 uy-w-[28px]"]}}),o=c.forwardRef(({children:r,...u},s)=>{const{base:a,content:l,heading:i,buttonContainer:t}=n();return e.jsx("header",{ref:s,className:a(),...u,children:e.jsxs("div",{className:l(),children:[e.jsx("div",{className:t()}),e.jsx(y.Heading,{slot:"title",className:i(),children:r}),e.jsx("div",{className:t(),children:e.jsx(m.CircularIconButton,{asElement:"button",slot:"close",icon:"CloseOutlined",title:"Close",size:"large",color:"content.neutral.low"})})]})})});o.displayName="BottomSheetHeader";exports.BottomSheetHeader=o;exports.bottomSheetHeader=n;

package/dist/cjs/components/bottom-sheet/parts/BottomSheetHeader.d.cts

@@ -0,0 +1,83 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const bottomSheetHeader: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+    buttonContainer: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    content: string[];
+    heading: string[];
+    buttonContainer: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    content: string[];
+    heading: string[];
+    buttonContainer: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            heading?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            buttonContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+export interface BottomSheetHeaderProps extends PropsWithChildren<VariantProps<typeof bottomSheetHeader>> {
+    className?: string;
+}
+/**
+ * The `BottomSheetHeader` component renders the header section of a side panel.
+ * It includes a title and close button, and on mobile it displays a drag handle for bottom sheet interaction.
+ * @component
+ * @param {BottomSheetHeaderProps} props - The props for the `BottomSheetHeader` component
+ * @example
+ * ```tsx
+ * import { BottomSheetHeader } from '@payfit/unity-components'
+ *
+ * <BottomSheetHeader>Title of the panel</BottomSheetHeader>
+ * ```
+ * @see {@link BottomSheetHeaderProps} for all available props
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-sidepanel--docs) • [Design Docs](https://www.payfit.design/24f360409/p/21bfe4-side-panel)
+ */
+declare const BottomSheetHeader: import('react').ForwardRefExoticComponent<BottomSheetHeaderProps & import('react').RefAttributes<HTMLDivElement>>;
+export { BottomSheetHeader };

package/dist/cjs/components/breadcrumbs/Breadcrumbs.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),o=require("react"),d=require("react-aria-components"),l=require("../../hooks/use-breakpoint-listener.cjs"),b=require("./Breadcrumbs.context.cjs"),B=require("./Breadcrumbs.variant.cjs"),m=(e,r,n)=>e?r.length===0?null:n(r.at(r.length===1?0:-2)):r.map(t=>s.jsx(o.Fragment,{children:n(t)},`${t.label}${t.href}`)),p=o.forwardRef(({items:e,children:r,wrap:n="nowrap"},t)=>{const{base:u}=B.breadcrumbsVariant({wrap:n}),a=l.useBreakpointListener(),c=a==="xs"||a==="sm",i=e===void 0;return s.jsx(b.BreadcrumbsProvider,{wrap:n,isMobile:c,isStaticApi:i,children:s.jsx(d.Breadcrumbs,{"data-dd-privacy":"allow",ref:t,className:u(),children:e?m(c,e,r):r})})});exports.Breadcrumbs=p;

package/dist/cjs/components/breadcrumbs/Breadcrumbs.context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),t=require("react"),r=t.createContext({wrap:"wrap",isMobile:!1,isStaticApi:!1});function c({children:e,wrap:s,isMobile:o,isStaticApi:u}){return n.jsx(r.Provider,{value:{wrap:s,isMobile:o,isStaticApi:u},children:e})}function i(){const e=t.useContext(r);if(!e)throw new Error("useBreadcrumbsContext must be used within an BreadcrumbsProvider");return e}exports.BreadcrumbsContext=r;exports.BreadcrumbsProvider=c;exports.useBreadcrumbsContext=i;

package/dist/cjs/components/breadcrumbs/Breadcrumbs.context.d.cts

@@ -0,0 +1,12 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { breadcrumbsVariant } from './Breadcrumbs.variant.cjs';
+interface BreadcrumbsContextValue {
+    wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
+    isMobile: boolean;
+    isStaticApi: boolean;
+}
+export declare const BreadcrumbsContext: import('react').Context<BreadcrumbsContextValue>;
+export declare function BreadcrumbsProvider({ children, wrap, isMobile, isStaticApi, }: PropsWithChildren<BreadcrumbsContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useBreadcrumbsContext(): BreadcrumbsContextValue;
+export {};

package/dist/cjs/components/breadcrumbs/Breadcrumbs.d.cts

@@ -0,0 +1,33 @@
+import { ReactNode } from 'react';
+import { AriaBreadcrumbsProps as AriaAriaBreadcrumbsProps } from 'react-aria';
+import { BreadcrumbsProps as AriaBreadcrumbsProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+import { BreadcrumbProps } from './parts/Breadcrumb.cjs';
+import { breadcrumbsVariant } from './Breadcrumbs.variant.cjs';
+export interface BreadcrumbsProps extends AriaAriaBreadcrumbsProps, Pick<AriaBreadcrumbsProps<BreadcrumbsProps>, 'onAction'> {
+    items?: never;
+    /**
+     * The breadcrumb list to render (static api)
+     */
+    children: ReactNode;
+    /**
+     * If the breadcrumbs should wrap or not
+     */
+    wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
+}
+export interface BreadcrumbsWithItemProps extends AriaAriaBreadcrumbsProps, VariantProps<typeof breadcrumbsVariant> {
+    /**
+     * The list of items to render, when using the dynamic API.
+     */
+    items: BreadcrumbProps[];
+    /**
+     * The function renderer to render each part of the breadcrumbs (dynamic api)
+     */
+    children: (item: BreadcrumbProps) => ReactNode;
+    /**
+     * If the breadcrumbs should wrap or not
+     */
+    wrap: VariantProps<typeof breadcrumbsVariant>['wrap'];
+}
+declare const Breadcrumbs: import('react').ForwardRefExoticComponent<(BreadcrumbsProps | BreadcrumbsWithItemProps) & import('react').RefAttributes<HTMLOListElement>>;
+export { Breadcrumbs };

package/dist/cjs/components/breadcrumbs/Breadcrumbs.variant.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("tailwind-variants"),e=a.tv({slots:{base:"uy-flex uy-gap-50 uy-list-none uy-text-content-neutral-enabled uy-typography-action",breadcrumb:"uy-flex uy-gap-50 sm:uy-leading-175 sm:uy-items-center"},variants:{wrap:{wrap:{base:"uy-flex-wrap"},nowrap:{base:""}}}});exports.breadcrumbsVariant=e;

package/dist/cjs/components/breadcrumbs/Breadcrumbs.variant.d.cts

@@ -0,0 +1,73 @@
+export declare const breadcrumbsVariant: import('tailwind-variants').TVReturnType<{
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    breadcrumb: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}>, {
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    breadcrumb: string;
+}, import('tailwind-variants').TVReturnType<{
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    breadcrumb: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}, {
+    wrap: {
+        wrap: {
+            base: string;
+        };
+        nowrap: {
+            base: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

package/dist/cjs/components/breadcrumbs/parts/Breadcrumb.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),j=require("react"),i=require("react-aria-components"),o=require("../../icon/Icon.cjs"),u=require("../../link/Link.cjs"),h=require("../../tooltip/Tooltip.cjs"),q=require("../Breadcrumbs.context.cjs"),B=require("../Breadcrumbs.variant.cjs"),g=25,d=({children:e,href:t})=>e.length>g?r.jsx(h.Tooltip,{title:e,children:r.jsx(u.Link,{isExact:!0,href:t,color:"secondary",maxCharactersTruncation:25,children:e})}):r.jsx(u.Link,{isExact:!0,href:t,color:"secondary",maxCharactersTruncation:25,children:e}),p=j.forwardRef((e,t)=>{const{wrap:l,isMobile:m,isStaticApi:x}=q.useBreadcrumbsContext(),{breadcrumb:s}=B.breadcrumbsVariant({wrap:l});if(!e)return null;const{href:a,label:n,...c}=e;return m&&!x?r.jsxs(i.Breadcrumb,{ref:t,...c,className:s(),children:[r.jsx(o.Icon,{src:"CaretLeftOutlined","aria-hidden":"true"}),r.jsx(d,{href:a,children:n})]}):r.jsx(i.Breadcrumb,{ref:t,...c,className:s(),children:({isCurrent:b})=>b?r.jsx("span",{className:"uy-text-nowrap",children:n}):r.jsxs(r.Fragment,{children:[r.jsx(d,{href:a,children:n}),r.jsx(o.Icon,{src:"CaretRightOutlined","aria-hidden":"true"})]})})});exports.Breadcrumb=p;

package/dist/cjs/components/breadcrumbs/parts/Breadcrumb.d.cts

@@ -0,0 +1,9 @@
+import { BreadcrumbProps as AriaBreadcrumbProps } from 'react-aria-components';
+export interface BreadcrumbProps extends Omit<AriaBreadcrumbProps, 'children'> {
+    /** The link of the breadcrumb */
+    href: string;
+    /** The text of the breadcrumb */
+    label: string;
+}
+declare const Breadcrumb: import('react').ForwardRefExoticComponent<BreadcrumbProps & import('react').RefAttributes<HTMLSpanElement | HTMLLIElement>>;
+export { Breadcrumb };

package/dist/cjs/components/button/Button.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("react"),b=require("react-aria-components"),o=require("tailwind-merge"),f=require("../icon/Icon.cjs"),g=require("../spinner/Spinner.cjs"),c=require("./Button.variants.cjs"),m=d.forwardRef(({variant:u,children:y,color:r="primary",size:i="default",isDisabled:s=!1,isLoading:e=!1,prefixIcon:l=void 0,...p},h)=>{const q=d.useMemo(()=>{const a={size:i,isDisabled:s,isLoading:e};switch(u){case"primary":{const t={...a,color:r};return o.twMerge(c.buttonFilled(t))}case"secondary":{const t={...a,color:r};return o.twMerge(c.buttonOutlined(t))}case"ghost":{const t={...a,color:r};return o.twMerge(c.buttonGhost(t))}}},[u,r,i,s,e]),w={...e&&{"data-loading":e}};return n.jsx(b.Button,{"data-dd-privacy":"allow",...p,ref:h,isDisabled:s||e,className:q,...w,children:e?n.jsx(g.Spinner,{size:"small",color:"inherit",label:"Loading..."}):n.jsxs("span",{className:"uy-inline-flex uy-gap-50 uy-leading-175 uy-items-center",children:[l&&n.jsx(f.Icon,{src:l,size:20,color:"inherit",role:"presentation"}),y]})})});m.displayName="Button";exports.Button=m;

package/dist/cjs/components/button/Button.d.cts

@@ -0,0 +1,42 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { PropsWithChildren } from 'react';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+import { ButtonBase, ButtonFilled, ButtonGhost, ButtonOutlined } from './Button.variants.cjs';
+type UnityButtonProps = AriaButtonProps & ButtonBase & {
+    /**
+     * The button's appearance. It can be one of the following: 'primary', 'secondary', 'ghost'.
+     * @default 'primary'
+     */
+    variant: 'primary' | 'secondary' | 'ghost';
+    /**
+     * The button size. It can be full size or default size (min-content).
+     * @default 'default'
+     */
+    size?: ButtonBase['size'];
+    /**
+     * The button's color. It can be one of the following: 'primary', 'inverted'.
+     * @default 'primary'
+     */
+    color?: ButtonFilled['color'] | ButtonOutlined['color'] | ButtonGhost['color'];
+    /**
+     * The button's prefix icon. It has to be one of the icons from the Unity Icons package.
+     */
+    prefixIcon?: UnityIcon;
+    /**
+     * The loading state of the button.
+     * @default false
+     */
+    isLoading?: boolean;
+};
+export type ButtonProps = (UnityButtonProps & {
+    variant: 'primary';
+} & ButtonFilled) | (UnityButtonProps & {
+    variant: 'secondary';
+} & ButtonOutlined) | (UnityButtonProps & {
+    variant: 'ghost';
+} & ButtonGhost);
+/**
+ * Buttons allow users to take actions, and make choices, with a single tap.
+ */
+declare const Button: import('react').ForwardRefExoticComponent<PropsWithChildren<ButtonProps> & import('react').RefAttributes<HTMLButtonElement>>;
+export { Button };

package/dist/cjs/components/button/Button.variants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("tailwind-variants"),a=e.tv({base:["uy-group","uy-rounded-75 uy-px-200 uy-h-500 uy-inline-flex uy-items-center uy-justify-center uy-whitespace-nowrap uy-typography-action uy-transition-colors","focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring"],variants:{isDisabled:{true:"disabled:uy-cursor-not-allowed",false:""},isLoading:{true:"data-[loading]:uy-cursor-progress data-[loading]:uy-text-content-neutral-disabled",false:""},size:{default:"uy-w-auto uy-grow-0 uy-basis-auto",full:"uy-grow-1 uy-w-full uy-basis-full"}},defaultVariants:{isDisabled:!1,isLoading:!1,size:"default"}}),t=e.tv({extend:a,variants:{color:{primary:["uy-bg-surface-primary-enabled uy-text-content-inverted-enabled","hover:uy-bg-surface-primary-hover","active:uy-bg-surface-primary-active","data-[pressed]:uy-bg-surface-primary-active"],warning:["uy-bg-surface-warning-enabled uy-text-content-inverted-enabled","hover:uy-bg-surface-warning-hover","active:uy-bg-surface-warning-active","data-[pressed]:uy-bg-surface-warning-active"],danger:["uy-bg-surface-danger-enabled uy-text-content-inverted-enabled","hover:uy-bg-surface-danger-hover","active:uy-bg-surface-danger-active","data-[pressed]:uy-bg-surface-danger-active"],inverted:["uy-bg-surface-inverted-enabled uy-text-content-neutral-enabled","hover:uy-bg-surface-inverted-hover","active:uy-bg-surface-inverted-active","data-[pressed]:uy-bg-surface-inverted-active","focus-visible:uy-outline-utility-inverted-focus-ring"]},isDisabled:{true:"disabled:uy-bg-surface-neutral-disabled disabled:uy-text-content-neutral-disabled",false:""},isLoading:{true:"data-[loading]:uy-bg-surface-neutral-disabled data-[loading]:uy-text-content-neutral-disabled",false:""}}}),r=e.tv({extend:a,base:"uy-border uy-border-solid",variants:{color:{primary:["uy-bg-transparent uy-text-content-primary-enabled uy-border-border-primary-enabled","focus-visible:uy-border-border-primary-focus focus-visible:uy-text-content-primary-focus","hover:uy-text-content-primary-hover hover:uy-border-border-primary-hover","active:uy-text-content-primary-active active:uy-border-border-primary-active"],inverted:["uy-bg-transparent uy-text-content-inverted uy-border-border-inverted-enabled"]},isDisabled:{true:"disabled:uy-text-content-neutral-disabled disabled:uy-border-border-neutral-disabled",false:""},isLoading:{true:"data-[loading]:uy-text-content-neutral-disabled data-[loading]:uy-border-border-neutral-disabled"}}}),n=e.tv({extend:a,variants:{color:{primary:["uy-bg-transparent uy-text-content-primary","enabled:hover:uy-bg-surface-primary-lowest-hover","active:uy-bg-surface-primary-lowest-active","data-[pressed]:uy-bg-surface-primary-lowest-active","focus-visible:uy-bg-transparent"],warning:["uy-bg-transparent uy-text-content-warning-enabled","enabled:hover:uy-bg-surface-warning-lowest-hover","active:uy-bg-surface-warning-lowest-active","data-[pressed]:uy-bg-surface-warning-lowest-active","focus-visible:uy-bg-transparent"],danger:["uy-bg-transparent uy-text-content-danger-enabled","enabled:hover:uy-bg-surface-danger-lowest-hover","active:uy-bg-surface-danger-lowest-active","data-[pressed]:uy-bg-surface-danger-lowest-active","focus-visible:uy-bg-transparent"],neutral:["uy-bg-transparent uy-text-content-neutral-enabled","enabled:hover:uy-bg-surface-neutral-hover","active:uy-bg-surface-neutral-active","data-[pressed]:uy-bg-surface-neutral-active","focus-visible:uy-bg-transparent"]},isDisabled:{true:"disabled:uy-text-content-neutral-disabled disabled:uy-bg-transparent",false:""},isLoading:{true:"data-[loading]:uy-text-content-neutral-disabled data-[loading]:uy-bg-transparent",false:""}}});exports.buttonFilled=t;exports.buttonGhost=n;exports.buttonOutlined=r;