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

package/dist/cjs/components/avatar/parts/AvatarFallback.d.ts

@@ -0,0 +1,170 @@
+import { VariantProps } from 'tailwind-variants';
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+declare const avatarPlaceholder: import('tailwind-variants').TVReturnType<{
+    color: {
+        blue: {
+            background: string;
+            foreground: string;
+        };
+        sunglow: {
+            background: string;
+            foreground: string;
+        };
+        peach: {
+            background: string;
+            foreground: string;
+        };
+    };
+}, {
+    base: string;
+    background: string;
+    foreground: string;
+}, undefined, import('tailwind-variants/dist/config').TVConfig<{
+    color: {
+        blue: {
+            background: string;
+            foreground: string;
+        };
+        sunglow: {
+            background: string;
+            foreground: string;
+        };
+        peach: {
+            background: string;
+            foreground: 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;
+    };
+}>, {
+    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>>>;
+type AvatarFallbackBaseProps = Pick<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>, 'delayMs'>;
+type AvatarFallbackInitialsProps = AvatarFallbackBaseProps & {
+    /** The fallback's variant. It can be one of: `initials`, `placeholder` */
+    variant: 'initials';
+    /** The initials to display as fallback content. Only available when variant is set to `initials` */
+    children: string | null | undefined;
+    color?: never;
+};
+type AvatarFallbackPlaceholderProps = AvatarFallbackBaseProps & {
+    /** The variant of the fallback, should be 'placeholder' */
+    variant: 'placeholder';
+    /**
+     * The color variant for the placeholder. Can be one of: `blue`, `peach`, `sunglow`. Only available when variant is set to `placeholder`
+     * @default 'blue'
+     */
+    color?: VariantProps<typeof avatarPlaceholder>['color'];
+    children?: never;
+};
+type AvatarFallbackProps = AvatarFallbackInitialsProps | AvatarFallbackPlaceholderProps;
+/**
+ * The AvatarFallback component displays a fallback content for an `Avatar` component when no image is provided or failed to load.
+ */
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
+export { AvatarFallback };

package/dist/cjs/components/avatar/parts/AvatarFallback.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),v=require("react"),m=require("@radix-ui/react-avatar"),h=require("tailwind-merge"),s=require("tailwind-variants"),w=require("../Avatar.context.js"),u=require("../Avatar.variants.js"),x=require("../utils.js");function i(e){if(e&&typeof e=="object"&&"default"in e)return e;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const j=i(v),c=i(m),k=s.tv({extend:u.avatarBase,slots:{base:"uy-absolute uy-overflow-hidden",background:"",foreground:""},variants:{color:{blue:{background:"uy-bg-blue-L7",foreground:"uy-fill-blue-L5"},sunglow:{background:"uy-bg-sunglow-L3",foreground:"uy-fill-sunglow-L2"},peach:{background:"uy-bg-peach-L3",foreground:"uy-fill-peach-L2"}}}}),q=s.tv({extend:u.avatarBase,base:"uy-absolute uy-flex uy-h-full uy-w-full uy-items-center uy-justify-center uy-text-content-neutral uy-bg-surface-neutral-lowest",variants:{size:{xs:"uy-typography-body-small-strong",sm:"uy-typography-body-small-strong",md:"uy-typography-body-small-strong",lg:"uy-typography-body-strong",xl:"uy-typography-h2"}}}),y=j.forwardRef(({variant:e,color:a,children:t,...r},d)=>{const g=w.useAvatarContext(),{size:o,variant:l}=g;if(e==="placeholder"){const{base:b,background:f,foreground:p}=k({color:a,size:o,variant:l});return n.jsx("svg",{role:"img","aria-hidden":!0,xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 16 16",className:h.twMerge(b(),f()),...r,children:n.jsx("path",{className:p(),fillRule:"evenodd",d:"M0 8.322c.245.06.49.117.732.17 2.113.455 3.727.487 4.79.12.478-.166.824-.405 1.09-.732.276-.336.567-.888.737-1.82.4-2.19.02-3.485-.47-4.283C6.407 1.012 5.665.432 4.732 0h6.861c.904 1.906 1.173 4.227.674 6.959-.29 1.587-.871 2.97-1.784 4.086-.921 1.126-2.08 1.86-3.328 2.292-2.283.789-4.872.574-7.156.11V8.322Z",clipRule:"evenodd"})})}return n.jsx(c.Fallback,{ref:d,role:"presentation",className:q({size:o,variant:l}),...r,children:x.getInitials(t)})});y.displayName=c.Fallback.displayName;exports.AvatarFallback=y;

package/dist/cjs/components/avatar/parts/AvatarImage.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),l=require("react"),m=require("@radix-ui/react-avatar"),v=require("tailwind-merge"),f=require("tailwind-variants"),g=require("../Avatar.context.js"),p=require("../Avatar.variants.js");function n(e){if(e&&typeof e=="object"&&"default"in e)return e;const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(a,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return a.default=e,Object.freeze(a)}const d=n(l),s=n(m),y=f.tv({extend:p.avatarBase,base:"uy-aspect-square uy-w-full uy-h-full uy-object-cover uy-bg-surface-neutral-lowest"}),i=d.forwardRef(({className:e,...a},t)=>{const{variant:r,size:c}=g.useAvatarContext(),o=v.twMerge(y({variant:r,size:c}),e);return u.jsx(s.Image,{ref:t,className:o,...a})});i.displayName=s.Image.displayName;exports.AvatarImage=i;

package/dist/cjs/components/avatar/parts/AvatarPair.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),y=require("react"),m=require("@radix-ui/react-avatar"),p=require("tailwind-variants"),o=require("../Avatar.context.js"),b=require("../Avatar.variants.js");function c(e){if(e&&typeof e=="object"&&"default"in e)return e;const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const P=c(y),g=c(m),x=p.tv({extend:b.avatarBase,base:"uy-absolute uy-overflow-hidden uy-leading-[0] uy-border uy-border-content-inverted -uy-bottom-[var(--pair-offset)] -uy-right-[var(--pair-offset)] uy-transition-transform uy-origin-center",variants:{size:{xs:"uy-size-200",sm:"uy-size-300"},isHidden:{true:"uy-scale-0",false:"uy-scale-100"}},defaultVariants:{size:"sm",variant:"circle",isHidden:!1}}),u=P.forwardRef(({variant:e,isHidden:t,children:r,...a},l)=>{const{size:f}=o.useAvatarContext(),i=f==="xl",s=i?"sm":"xs",d=i?0:4,v=x({variant:e,size:s,isHidden:t});return n.jsx(o.AvatarProvider,{variant:e,size:s,hasPair:!0,children:n.jsx(g.Root,{ref:l,role:"img",className:v,"aria-hidden":t,style:{"--pair-offset":`${d}px`},...a,children:r})})});u.displayName="AvatarPair";exports.AvatarPair=u;

package/dist/cjs/components/badge/Badge.d.ts

@@ -0,0 +1,67 @@
+import { AriaRole } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const badge: import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: string;
+        warning: string;
+        danger: string;
+        neutral: string;
+        promo: string;
+        attention: string;
+        contextual: string;
+    };
+}, undefined, "uy-inline-block uy-rounded-75 uy-px-75 uy-py-25 uy-font-sans uy-typography-body uy-whitespace-nowrap uy-text-center", {
+    twMerge: false;
+}, {
+    variant: {
+        success: string;
+        warning: string;
+        danger: string;
+        neutral: string;
+        promo: string;
+        attention: string;
+        contextual: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: string;
+        warning: string;
+        danger: string;
+        neutral: string;
+        promo: string;
+        attention: string;
+        contextual: string;
+    };
+}, undefined, "uy-inline-block uy-rounded-75 uy-px-75 uy-py-25 uy-font-sans uy-typography-body uy-whitespace-nowrap uy-text-center", {
+    twMerge: false;
+}, unknown, unknown, undefined>>;
+/**
+ * The Badge component is a visual label or indicator used to convey status or highlight content.
+ */
+declare const Badge: import('react').ForwardRefExoticComponent<{
+    /**
+     * To add classes to the badge
+     */
+    className?: string;
+    /**
+     * Defines the visual style of the badge
+     * @default 'neutral'
+     */
+    variant?: VariantProps<typeof badge>["variant"];
+    /**
+     * Explicit ARIA role for the badge. If not provided, will be determined by variant
+     */
+    role?: Extract<AriaRole, "status" | "alert">;
+    /**
+     * Changes the root element to a different HTML element. The default element is a `<span>`.
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Accessible label for the badge
+     */
+    'aria-label'?: string;
+} & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLSpanElement>>;
+export { Badge };

package/dist/cjs/components/badge/Badge.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react/jsx-runtime"),i=require("react"),g=require("@radix-ui/react-slot"),d=require("tailwind-merge"),b=require("tailwind-variants"),w=b.tv({base:"uy-inline-block uy-rounded-75 uy-px-75 uy-py-25 uy-font-sans uy-typography-body uy-whitespace-nowrap uy-text-center",variants:{variant:{success:"uy-bg-surface-success-low uy-text-content-neutral",warning:"uy-bg-surface-warning-low uy-text-content-neutral",danger:"uy-bg-surface-danger-low uy-text-content-neutral",neutral:"uy-bg-surface-neutral-lowest uy-text-content-neutral",promo:"uy-bg-surface-promo-low uy-text-content-neutral",attention:"uy-bg-surface-danger uy-text-content-inverted",contextual:"uy-bg-surface-neutral uy-border uy-border-border-neutral uy-text-content-neutral"}},defaultVariants:{variant:"neutral"}},{twMerge:!1}),f={success:"status",warning:"alert",danger:"alert",neutral:"status",promo:"status",attention:"alert",contextual:"status"},t=i.forwardRef(({className:a,variant:e="neutral",role:n,asChild:r=!1,children:u,...s},o)=>{const l=n??f[e]??"status",c=r?g.Slot:"span";return y.jsx(c,{ref:o,className:d.twMerge(w({variant:e}),a),role:l,...s,children:u})});t.displayName="Badge";exports.Badge=t;

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

@@ -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"),b=require("../../hooks/use-breakpoint-listener.js"),l=require("./Breadcrumbs.context.js"),B=require("./Breadcrumbs.variant.js"),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=b.useBreakpointListener(),c=a==="xs"||a==="sm",i=e===void 0;return s.jsx(l.BreadcrumbsProvider,{wrap:n,isMobile:c,isStaticApi:i,children:s.jsx(d.Breadcrumbs,{ref:t,className:u(),children:e?m(c,e,r):r})})});exports.Breadcrumbs=p;

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

@@ -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').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').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.js

@@ -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.js"),u=require("../../link/Link.js"),h=require("../../tooltip/Tooltip.js"),q=require("../Breadcrumbs.context.js"),B=require("../Breadcrumbs.variant.js"),C=25,d=({children:e,href:t})=>e.length>C?r.jsx(h,{title:e,children:r.jsx(u.Link,{href:t,color:"secondary",maxCharactersTruncation:25,children:e})}):r.jsx(u.Link,{href:t,color:"secondary",maxCharactersTruncation:25,children:e}),L=j.forwardRef((e,t,...c)=>{const{wrap:l,isMobile:m,isStaticApi:x}=q.useBreadcrumbsContext(),{breadcrumb:s}=B.breadcrumbsVariant({wrap:l});if(!e)return null;const{href:a,label:n}=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=L;

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("react"),f=require("react-aria-components"),o=require("tailwind-merge"),g=require("../icon/Icon.js"),j=require("../spinner/Spinner.js"),c=require("./Button.variants.js"),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]),b={...e&&{"data-loading":e}};return n.jsx(f.Button,{...p,ref:h,isDisabled:s||e,className:q,...b,children:e?n.jsx(j.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(g.Icon,{src:l,size:20,color:"inherit",role:"presentation"}),y]})})});m.displayName="Button";exports.Button=m;