@payfit/unity-components 0.0.0-alpha.11

package/dist/cjs/components/icon-button/CircularIconButton.d.cts

@@ -0,0 +1,100 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+export declare const circularIconButton: import('tailwind-variants').TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+    isDisabled: {
+        false: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+    isDisabled: {
+        false: string;
+    };
+}, {
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+    isDisabled: {
+        false: string;
+    };
+}>, {
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+    isDisabled: {
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+    isDisabled: {
+        false: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+    isDisabled: {
+        false: string;
+    };
+}, {
+    size: {
+        default: string;
+        large: string;
+    };
+    color: {
+        'content.neutral': string;
+        'content.neutral.low': string;
+    };
+    isDisabled: {
+        false: string;
+    };
+}>, unknown, unknown, undefined>>;
+export interface CircularIconButtonProps extends Omit<AriaButtonProps, 'className'>, VariantProps<typeof circularIconButton> {
+    icon: UnityIcon;
+    title: string;
+    asElement?: 'button' | 'default';
+    isLoading?: boolean;
+    isDisabled?: boolean;
+    className?: string;
+}
+export declare function CircularIconButton(props: CircularIconButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CircularIconButton {
+    var displayName: string;
+}

package/dist/cjs/components/icon-button/IconButton.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),B=require("react-aria-components"),I=require("../../hooks/use-id.cjs"),j=require("../icon/Icon.cjs"),p=require("../spinner/Spinner.cjs"),q=require("../tooltip/Tooltip.cjs"),i=require("./IconButton.variants.cjs"),x=({variant:n,color:e,isLoading:o,isDisabled:t})=>n==="primary"?i.iconButtonPrimary({variant:n,color:e,isDisabled:t,isLoading:o}):n==="secondary"?i.iconButtonSecondary({variant:n,color:e,isDisabled:t,isLoading:o}):i.iconButtonGhost({variant:n,color:e,isDisabled:t,isLoading:o});function a(n){const e=I(),{button:o,icon:t}=x(n),{onClick:u,icon:d,isLoading:s,label:r,isDisabled:y,iconRole:b,...m}=n,l=`icon-button-label-${e}`;return c.jsx(q.Tooltip,{title:r,children:c.jsxs(B.Button,{"data-dd-privacy":"allow",...m,className:o({class:n.className}),onPress:u,isDisabled:y||s,"aria-label":r,children:[s?c.jsx(p.Spinner,{size:"small",label:"Loading",color:"inherit"}):c.jsx(j.Icon,{role:b,src:d,className:t(),"aria-labelledby":l,color:"inherit"}),c.jsx("span",{id:l,className:"uy-sr-only",children:r})]})})}a.displayName="IconButton";exports.IconButton=a;

package/dist/cjs/components/icon-button/IconButton.d.cts

@@ -0,0 +1,26 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { AriaRole } from 'react';
+import { IconButtonGhost, IconButtonPrimary, IconButtonSecondary } from './IconButton.variants.cjs';
+interface IconButtonBaseProps {
+    /** Label used to describe the action of the button */
+    label: string;
+    /** The icon to display inside the button */
+    icon: UnityIcon;
+    /** The function to trigger when the button is clicked */
+    onClick: () => void;
+    /** Override the icon role */
+    iconRole?: AriaRole;
+    /** className to add to the button */
+    className?: string;
+}
+interface IconButtonVariantsPrimaryProps extends IconButtonBaseProps, Omit<IconButtonPrimary, 'variant' | 'color'>, Required<Pick<IconButtonPrimary, 'variant' | 'color'>> {
+}
+interface IconButtonVariantsSecondaryProps extends IconButtonBaseProps, Omit<IconButtonSecondary, 'variant' | 'color'>, Required<Pick<IconButtonSecondary, 'variant' | 'color'>> {
+}
+interface IconButtonVariantsGhostProps extends IconButtonBaseProps, Omit<IconButtonGhost, 'variant' | 'color'>, Required<Pick<IconButtonGhost, 'variant' | 'color'>> {
+}
+export declare function IconButton(props: IconButtonVariantsPrimaryProps | IconButtonVariantsSecondaryProps | IconButtonVariantsGhostProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IconButton {
+    var displayName: string;
+}
+export {};

package/dist/cjs/components/icon-button/IconButton.variants.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("tailwind-variants"),t=e.tv({slots:{button:["uy-group","uy-w-500 uy-min-w-500 uy-h-500 uy-min-h-500 uy-flex uy-justify-center uy-items-center uy-rounded-75","focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring"],icon:"uy-w-250 uy-h-250"},variants:{isDisabled:{true:{button:"uy-cursor-not-allowed"},false:{button:""}},isLoading:{true:{button:"uy-cursor-progress uy-text-content-neutral-disabled",icon:""},false:{button:""}}},defaultVariants:{isDisabled:!1,isLoading:!1}}),r=e.tv({extend:t,variants:{variant:{primary:""},color:{primary:"",danger:"",warning:"",inverted:"focus-visible:uy-outline-utility-inverted-focus-ring"}},compoundVariants:[{variant:"primary",color:"primary",isDisabled:!1,isLoading:!1,class:{button:["uy-bg-surface-primary-enabled","hover:uy-bg-surface-primary-hover","active:uy-bg-surface-primary-active","focus-visible:uy-bg-surface-primary-focus","data-[pressed]:uy-bg-surface-primary-pressed"],icon:["uy-text-content-inverted-enabled","group-hover:uy-text-content-inverted-hover","active:uy-text-content-inverted-active","focus-visible:uy-text-content-inverted-focus","data-[pressed]:uy-text-content-inverted-pressed"]}},{variant:"primary",color:"danger",isDisabled:!1,isLoading:!1,class:{button:["uy-bg-content-danger-enabled","hover:uy-bg-content-danger-hover","active:uy-bg-content-danger-active","focus:uy-bg-content-danger-focus","data-[pressed]:uy-bg-content-danger-pressed"],icon:["uy-text-content-inverted-enabled","group-hover:uy-text-content-inverted-hover","active:uy-text-content-inverted-active","focus:uy-text-content-inverted-focus","data-[pressed]:uy-text-content-inverted-pressed"]}},{variant:"primary",color:"warning",isDisabled:!1,isLoading:!1,class:{button:["uy-bg-content-warning","hover:uy-bg-content-warning-hover","active:uy-bg-content-warning-pressed","focus-visible:uy-bg-content-warning-focus","data-[pressed]:uy-bg-content-warning-pressed"],icon:["uy-text-content-inverted","group-hover:uy-text-content-inverted-hover","active:uy-text-content-inverted-pressed","focus-visible:uy-text-content-inverted-focus","data-[pressed]:uy-text-content-inverted-pressed"]}},{variant:"primary",color:"inverted",isDisabled:!1,isLoading:!1,class:{button:["uy-bg-surface-inverted","hover:uy-accent-surface-inverted-hover","active:uy-accent-surface-inverted-pressed","focus-visible:uy-accent-surface-inverted-focus","data-[pressed]:uy-accent-surface-inverted-pressed"],icon:["uy-text-content-neutral","group-hover:uy-text-content-neutral-hover","active:uy-text-content-neutral-pressed","focus-visible:uy-text-content-neutral-focus","data-[pressed]:uy-text-content-neutral-pressed"]}},{variant:"primary",color:"primary",isDisabled:!0,isLoading:!1,class:{button:"uy-bg-surface-neutral-disabled",icon:"uy-text-content-neutral-disabled"}},{variant:"primary",color:["primary","danger","warning","inverted"],isLoading:!0,isDisabled:!1,class:{button:"uy-bg-surface-neutral-disabled",icon:"uy-text-content-neutral-disabled"}}]}),n=e.tv({extend:t,variants:{variant:{secondary:{button:"focus-visible:uy-outline-offset-4"}},color:{primary:"",inverted:"focus-visible:uy-outline-utility-inverted-focus-ring"}},compoundVariants:[{color:"primary",isDisabled:!1,isLoading:!1,class:{button:["uy-border uy-border-solid uy-border-border-primary-enabled","hover:uy-border-border-primary-hover","active:uy-border-border-primary-active","data-[pressed]:uy-border-border-primary-pressed"],icon:["uy-text-content-primary-enabled","group-hover:uy-text-content-primary-hover","active:uy-text-content-primary-active","data-[pressed]:uy-text-content-primary-pressed","focus-visible:uy-text-content-primary-focus"]}},{color:"primary",isLoading:!0,isDisabled:!1,class:{button:["uy-border uy-border-solid uy-border-border-neutral-disabled","focus-visible:uy-border-border-primary-focus"],icon:["uy-text-content-neutral-disabled"]}},{color:"primary",isLoading:!1,isDisabled:!0,class:{button:["uy-border uy-border-solid uy-border-border-neutral-disabled","focus-visible:uy-border-border-primary-focus"],icon:["uy-text-content-neutral-disabled"]}},{color:"inverted",isDisabled:!1,isLoading:!1,class:{button:["uy-border uy-border-solid uy-border-border-inverted","hover:uy-border-border-inverted-hover","data-[pressed]:uy-border-border-inverted-pressed","active:uy-border-border-inverted-active","focus-visible:uy-border-border-inverted-focus"],icon:["uy-text-content-inverted","group-hover:uy-text-content-inverted-hover","data-[pressed]:uy-text-content-inverted-pressed","active:uy-text-content-inverted-active","focus-visible:uy-text-content-inverted-focus"]}},{color:"inverted",isLoading:!1,isDisabled:!0,class:{button:["uy-border uy-border-solid uy-border-border-inverted-disabled","focus-visible:uy-border-border-primary-focus"],icon:["uy-text-content-inverted-disabled"]}}]}),a=e.tv({extend:t,variants:{variant:{ghost:""},color:{neutral:"",primary:"",danger:"",warning:""}},compoundVariants:[{color:"neutral",isDisabled:!1,isLoading:!1,class:{button:["hover:uy-bg-surface-neutral-hover","data-[pressed]:uy-bg-surface-neutral-pressed","active:uy-bg-surface-neutral-active"],icon:["uy-text-content-neutral"]}},{color:"primary",isDisabled:!1,isLoading:!1,class:{button:["uy-text-content-primary-enabled","hover:uy-bg-surface-primary-lowest-hover","data-[pressed]:uy-bg-surface-primary-lowest-pressed","active:uy-bg-surface-primary-lowest-active"],icon:["uy-text-content-primary","group-hover:uy-text-content-primary","data-[pressed]:uy-text-content-primary","focus-visible:uy-text-content-primary","active:uy-text-content-primary"]}},{color:"danger",isDisabled:!1,isLoading:!1,class:{button:["hover:uy-bg-surface-danger-lowest-hover","data-[pressed]:uy-bg-surface-danger-lowest-pressed","active:uy-bg-surface-danger-lowest-active"],icon:["uy-text-content-danger","group-hover:uy-text-content-danger-hover","data-[pressed]:uy-text-content-danger-pressed","focus-visible:uy-text-content-danger-focus","active:uy-text-content-danger-active"]}},{color:"warning",isDisabled:!1,isLoading:!1,class:{button:["hover:uy-bg-surface-warning-lowest-hover","data-[pressed]:uy-bg-surface-warning-lowest-pressed","active:uy-bg-surface-warning-lowest-active"],icon:["uy-text-content-warning","group-hover:uy-text-content-warning-hover","data-[pressed]:uy-text-content-warning-pressed","focus-visible:uy-text-content-warning-focus","active:uy-text-content-warning-active"]}},{color:["primary","neutral","danger","warning"],isDisabled:!0,isLoading:!1,class:{button:"",icon:"uy-text-content-neutral-disabled"}},{color:["primary","neutral","danger","warning"],isDisabled:!1,isLoading:!0,class:{button:"",icon:"uy-text-content-neutral-disabled"}}]});exports.iconButtonGhost=a;exports.iconButtonPrimary=r;exports.iconButtonSecondary=n;