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

package/dist/esm/components/icon/Icon.mjs

@@ -0,0 +1,112 @@
+import { jsx as e } from "react/jsx-runtime";
+import { IconSprite as i } from "@payfit/unity-icons";
+import { tv as d } from "tailwind-variants";
+const l = d({
+  variants: {
+    size: {
+      20: "uy-w-250 uy-h-250",
+      24: "uy-w-300 uy-h-300"
+    },
+    color: {
+      "content.primary": "uy-text-content-primary",
+      "content.primary.enabled": "uy-text-content-primary-enabled",
+      "content.primary.hover": "uy-text-content-primary-hover",
+      "content.primary.pressed": "uy-text-content-primary-pressed",
+      "content.primary.focus": "uy-text-content-primary-focus",
+      "content.primary.active": "uy-text-content-primary-active",
+      "content.primary.disabled": "uy-text-content-primary-disabled",
+      "content.neutral": "uy-text-content-neutral",
+      "content.neutral.enabled": "uy-text-content-neutral-enabled",
+      "content.neutral.hover": "uy-text-content-neutral-hover",
+      "content.neutral.pressed": "uy-text-content-neutral-pressed",
+      "content.neutral.focus": "uy-text-content-neutral-focus",
+      "content.neutral.active": "uy-text-content-neutral-active",
+      "content.neutral.disabled": "uy-text-content-neutral-disabled",
+      "content.neutral.low": "uy-text-content-neutral-low",
+      "content.neutral.lowest": "uy-text-content-neutral-lowest",
+      "content.neutral.lowest.enabled": "uy-text-content-neutral-lowest-enabled",
+      "content.neutral.lowest.hover": "uy-text-content-neutral-lowest-hover",
+      "content.neutral.lowest.pressed": "uy-text-content-neutral-lowest-pressed",
+      "content.neutral.lowest.focus": "uy-text-content-neutral-lowest-focus",
+      "content.neutral.lowest.active": "uy-text-content-neutral-lowest-active",
+      "content.neutral.lowest.disabled": "uy-text-content-neutral-lowest-disabled",
+      "content.danger": "uy-text-content-danger",
+      "content.danger.enabled": "uy-text-content-danger-enabled",
+      "content.danger.hover": "uy-text-content-danger-hover",
+      "content.danger.pressed": "uy-text-content-danger-pressed",
+      "content.danger.focus": "uy-text-content-danger-focus",
+      "content.danger.active": "uy-text-content-danger-active",
+      "content.danger.disabled": "uy-text-content-danger-disabled",
+      "content.warning": "uy-text-content-warning",
+      "content.warning.enabled": "uy-text-content-warning-enabled",
+      "content.warning.hover": "uy-text-content-warning-hover",
+      "content.warning.pressed": "uy-text-content-warning-pressed",
+      "content.warning.focus": "uy-text-content-warning-focus",
+      "content.warning.active": "uy-text-content-warning-active",
+      "content.warning.disabled": "uy-text-content-warning-disabled",
+      "content.success": "uy-text-content-success",
+      "content.success.enabled": "uy-text-content-success-enabled",
+      "content.success.hover": "uy-text-content-success-hover",
+      "content.success.pressed": "uy-text-content-success-pressed",
+      "content.success.focus": "uy-text-content-success-focus",
+      "content.success.active": "uy-text-content-success-active",
+      "content.success.disabled": "uy-text-content-success-disabled",
+      "content.info": "uy-text-content-info",
+      "content.info.enabled": "uy-text-content-info-enabled",
+      "content.info.hover": "uy-text-content-info-hover",
+      "content.info.pressed": "uy-text-content-info-pressed",
+      "content.info.focus": "uy-text-content-info-focus",
+      "content.info.active": "uy-text-content-info-active",
+      "content.info.disabled": "uy-text-content-info-disabled",
+      "content.promo": "uy-text-content-promo",
+      "content.form.enabled": "uy-text-content-form",
+      "content.form.hover": "uy-text-content-form-hover",
+      "content.form.pressed": "uy-text-content-form-pressed",
+      "content.form.focus": "uy-text-content-form-focus",
+      "content.form.active": "uy-text-content-form-active",
+      "content.form.disabled": "uy-text-content-form-disabled",
+      "content.form.read-only": "uy-text-content-form-read-only",
+      "content.form.invalid": "uy-text-content-form-invalid",
+      "content.inverted": "uy-text-content-inverted",
+      "content.inverted.enabled": "uy-text-content-inverted-enabled",
+      "content.inverted.hover": "uy-text-content-inverted-hover",
+      "content.inverted.pressed": "uy-text-content-inverted-pressed",
+      "content.inverted.focus": "uy-text-content-inverted-focus",
+      "content.inverted.active": "uy-text-content-inverted-active",
+      "content.inverted.disabled": "uy-text-content-inverted-disabled",
+      inherit: "uy-text-inherit"
+    },
+    display: {
+      block: "uy-block",
+      inline: "uy-inline-block"
+    }
+  },
+  defaultVariants: {
+    size: 20,
+    color: "inherit",
+    display: "block"
+  }
+});
+function f({
+  alt: n,
+  color: o,
+  size: c,
+  src: r,
+  role: a = "img",
+  display: s = "block",
+  ...t
+}) {
+  const u = l({ size: c, color: o, display: s });
+  return /* @__PURE__ */ e(
+    "span",
+    {
+      ...t,
+      role: a,
+      "aria-label": t["aria-labelledby"] ? void 0 : n,
+      children: /* @__PURE__ */ e(i, { className: u, src: r })
+    }
+  );
+}
+export {
+  f as Icon
+};

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

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

@@ -0,0 +1,33 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { Button as d } from "react-aria-components";
+import { tv as y } from "tailwind-variants";
+import b from "../../hooks/use-id.mjs";
+import { Icon as f } from "../icon/Icon.mjs";
+import { Spinner as m } from "../spinner/Spinner.mjs";
+import p from "../tooltip/Tooltip.mjs";
+const h = y({
+  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 v(i) {
+  const s = b(), { onPress: n, icon: u, isLoading: t, title: o, isDisabled: l, ...a } = i, r = `icon-button-label-${s}`;
+  return /* @__PURE__ */ e(p, { title: o, children: /* @__PURE__ */ c(
+    d,
+    {
+      ...a,
+      className: h(),
+      onPress: n,
+      isDisabled: l || t,
+      "aria-labelledby": r,
+      "aria-busy": t,
+      children: [
+        t ? /* @__PURE__ */ e(m, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(f, { src: u, color: "inherit", role: "presentation" }),
+        /* @__PURE__ */ e("span", { id: r, className: "uy-sr-only", children: o })
+      ]
+    }
+  ) });
+}
+v.displayName = "CircularIconButton";
+export {
+  v as CircularIconButton,
+  h as circularIconButton
+};

package/dist/esm/components/icon-button/IconButton.d.mts

@@ -0,0 +1,26 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { AriaRole } from 'react';
+import { IconButtonGhost, IconButtonPrimary, IconButtonSecondary } from './IconButton.variants.mjs';
+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/esm/components/icon-button/IconButton.mjs

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