@payfit/unity-components 0.0.0-alpha.8 → 1.0.0

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

@@ -1,112 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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): import("react/jsx-runtime").JSX.Element;
-export declare namespace CircularIconButton {
-    var displayName: string;
-}

package/dist/esm/components/icon-button/CircularIconButton.mjs

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

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

@@ -1,26 +0,0 @@
-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): import("react/jsx-runtime").JSX.Element;
-export declare namespace IconButton {
-    var displayName: string;
-}
-export {};

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

@@ -1,58 +0,0 @@
-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
-};