@payfit/unity-components 0.0.0-alpha.11

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

@@ -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/esm/components/icon-button/CircularIconButton.js

@@ -0,0 +1,99 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { Button as g, Pressable as x } from "react-aria-components";
+import { tv as w } from "tailwind-variants";
+import z from "../../hooks/use-id.js";
+import { Icon as d } from "../icon/Icon.js";
+import { Spinner as y } from "../spinner/Spinner.js";
+import { Tooltip as b } from "../tooltip/Tooltip.js";
+const I = w({
+  base: [
+    "uy-rounded-circle uy-flex uy-items-center uy-justify-center uy-transition-colors",
+    "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",
+    "aria-disabled:uy-cursor-not-allowed aria-disabled:uy-text-content-neutral-disabled",
+    "aria-busy:uy-text-content-neutral-disabled aria-busy:uy-cursor-progress"
+  ],
+  variants: {
+    size: {
+      default: "uy-w-300 uy-h-300",
+      large: "uy-w-400 uy-h-400"
+    },
+    color: {
+      "content.neutral": "uy-text-content-neutral",
+      "content.neutral.low": "uy-text-content-neutral-low"
+    },
+    isDisabled: {
+      false: "hover:uy-bg-surface-neutral-hover"
+    }
+  },
+  defaultVariants: {
+    size: "default",
+    color: "content.neutral"
+  }
+});
+function N(f) {
+  const m = z(), {
+    onPress: o,
+    icon: s,
+    color: p,
+    size: i,
+    isLoading: r,
+    title: a,
+    isDisabled: t,
+    asElement: h = "default",
+    className: v,
+    ...n
+  } = f, l = `icon-button-label-${m}`, u = I({ class: v, color: p, size: i, isDisabled: t });
+  return h === "button" ? /* @__PURE__ */ e(b, { title: a, children: /* @__PURE__ */ c(
+    g,
+    {
+      "data-dd-privacy": "allow",
+      ...n,
+      onPress: o,
+      isDisabled: t || r,
+      "aria-labelledby": l,
+      "aria-busy": r,
+      className: u,
+      children: [
+        r ? /* @__PURE__ */ e(y, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
+          d,
+          {
+            src: s,
+            size: i === "large" ? 24 : 20,
+            color: "inherit",
+            role: "presentation"
+          }
+        ),
+        /* @__PURE__ */ e("span", { id: l, className: "uy-sr-only", children: a })
+      ]
+    }
+  ) }) : /* @__PURE__ */ e(b, { title: a, children: /* @__PURE__ */ e(
+    x,
+    {
+      "data-dd-privacy": "allow",
+      ...n,
+      onPress: o,
+      isDisabled: t || r,
+      "aria-labelledby": l,
+      "aria-busy": r,
+      children: /* @__PURE__ */ c("div", { role: "button", "aria-disabled": t, className: u, children: [
+        r ? /* @__PURE__ */ e(y, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
+          d,
+          {
+            src: s,
+            size: i === "large" ? 24 : 20,
+            color: "inherit",
+            role: "presentation"
+          }
+        ),
+        /* @__PURE__ */ e("span", { id: l, className: "uy-sr-only", children: a })
+      ] })
+    }
+  ) });
+}
+N.displayName = "CircularIconButton";
+export {
+  N as CircularIconButton,
+  I as circularIconButton
+};

package/dist/esm/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): import("react/jsx-runtime").JSX.Element;
+export declare namespace IconButton {
+    var displayName: string;
+}
+export {};

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

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