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

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

@@ -0,0 +1,13 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { ButtonProps as AriaButtonProps } from 'react-aria-components';
+export type CircularIconButtonProps = AriaButtonProps & {
+    icon: UnityIcon;
+    title: string;
+    isLoading?: boolean;
+    isDisabled?: boolean;
+};
+export declare const circularIconButton: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy-w-300 uy-h-300 uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-text-content-neutral uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy-w-300 uy-h-300 uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-text-content-neutral uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled", import('tailwind-variants/dist/config').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+export declare function CircularIconButton(props: CircularIconButtonProps): JSX.Element;
+export declare namespace CircularIconButton {
+    var displayName: string;
+}

package/dist/cjs/components/icon-button/CircularIconButton.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),y=require("react-aria-components"),b=require("tailwind-variants"),f=require("../../hooks/use-id.js"),p=require("../icon/Icon.js"),x=require("../spinner/Spinner.js"),v=require("../tooltip/Tooltip.js"),i=b.tv({base:"uy-w-300 uy-h-300 uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-text-content-neutral uy-transition-colors hover:uy-bg-surface-neutral-hover active:uy-bg-surface-neutral-active data-[pressed]:uy-bg-surface-neutral-pressed focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring disabled:uy-cursor-not-allowed disabled:uy-text-content-neutral-disabled aria-busy:uy-cursor-not-allowed aria-busy:uy-text-content-neutral-disabled"});function s(o){const u=f(),{onPress:a,icon:c,isLoading:t,title:n,isDisabled:l,...d}=o,r=`icon-button-label-${u}`;return e.jsx(v,{title:n,children:e.jsxs(y.Button,{...d,className:i(),onPress:a,isDisabled:l||t,"aria-labelledby":r,"aria-busy":t,children:[t?e.jsx(x.Spinner,{size:"small",label:"Loading",color:"inherit"}):e.jsx(p.Icon,{src:c,color:"inherit",role:"presentation"}),e.jsx("span",{id:r,className:"uy-sr-only",children:n})]})})}s.displayName="CircularIconButton";exports.CircularIconButton=s;exports.circularIconButton=i;

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

@@ -0,0 +1,26 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { AriaRole } from 'react';
+import { IconButtonGhost, IconButtonPrimary, IconButtonSecondary } from './IconButton.variants.js';
+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): JSX.Element;
+export declare namespace IconButton {
+    var displayName: string;
+}
+export {};

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

@@ -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.js"),j=require("../icon/Icon.js"),q=require("../spinner/Spinner.js"),x=require("../tooltip/Tooltip.js"),s=require("./IconButton.variants.js"),h=({variant:n,color:e,isLoading:o,isDisabled:t})=>n==="primary"?s.iconButtonPrimary({variant:n,color:e,isDisabled:t,isLoading:o}):n==="secondary"?s.iconButtonSecondary({variant:n,color:e,isDisabled:t,isLoading:o}):s.iconButtonGhost({variant:n,color:e,isDisabled:t,isLoading:o});function u(n){const e=I(),{button:o,icon:t}=h(n),{onClick:a,icon:d,isLoading:i,label:r,isDisabled:b,iconRole:m,...y}=n,l=`icon-button-label-${e}`;return c.jsx(x,{title:r,children:c.jsxs(B.Button,{className:o({class:n.className}),onPress:a,isDisabled:b||i,"aria-label":r,...y,children:[i?c.jsx(q.Spinner,{size:"small",label:"Loading",color:"inherit"}):c.jsx(j.Icon,{role:m,src:d,className:t(),"aria-labelledby":l,color:"inherit"}),c.jsx("span",{id:l,className:"uy-sr-only",children:r})]})})}u.displayName="IconButton";exports.IconButton=u;