@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/icon/Icon.d.ts

@@ -0,0 +1,574 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { HTMLAttributes } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const icon: import('tailwind-variants').TVReturnType<{
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}, {
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}>, {
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}, {
+    size: {
+        20: string;
+        24: string;
+    };
+    color: {
+        'content.primary': string;
+        'content.primary.enabled': string;
+        'content.primary.hover': string;
+        'content.primary.pressed': string;
+        'content.primary.focus': string;
+        'content.primary.active': string;
+        'content.primary.disabled': string;
+        'content.neutral': string;
+        'content.neutral.enabled': string;
+        'content.neutral.hover': string;
+        'content.neutral.pressed': string;
+        'content.neutral.focus': string;
+        'content.neutral.active': string;
+        'content.neutral.disabled': string;
+        'content.neutral.low': string;
+        'content.neutral.lowest': string;
+        'content.neutral.lowest.enabled': string;
+        'content.neutral.lowest.hover': string;
+        'content.neutral.lowest.pressed': string;
+        'content.neutral.lowest.focus': string;
+        'content.neutral.lowest.active': string;
+        'content.neutral.lowest.disabled': string;
+        'content.danger': string;
+        'content.danger.enabled': string;
+        'content.danger.hover': string;
+        'content.danger.pressed': string;
+        'content.danger.focus': string;
+        'content.danger.active': string;
+        'content.danger.disabled': string;
+        'content.warning': string;
+        'content.warning.enabled': string;
+        'content.warning.hover': string;
+        'content.warning.pressed': string;
+        'content.warning.focus': string;
+        'content.warning.active': string;
+        'content.warning.disabled': string;
+        'content.success': string;
+        'content.success.enabled': string;
+        'content.success.hover': string;
+        'content.success.pressed': string;
+        'content.success.focus': string;
+        'content.success.active': string;
+        'content.success.disabled': string;
+        'content.info': string;
+        'content.info.enabled': string;
+        'content.info.hover': string;
+        'content.info.pressed': string;
+        'content.info.focus': string;
+        'content.info.active': string;
+        'content.info.disabled': string;
+        'content.promo': string;
+        'content.form.enabled': string;
+        'content.form.hover': string;
+        'content.form.pressed': string;
+        'content.form.focus': string;
+        'content.form.active': string;
+        'content.form.disabled': string;
+        'content.form.read-only': string;
+        'content.form.invalid': string;
+        'content.inverted': string;
+        'content.inverted.enabled': string;
+        'content.inverted.hover': string;
+        'content.inverted.pressed': string;
+        'content.inverted.focus': string;
+        'content.inverted.active': string;
+        'content.inverted.disabled': string;
+        inherit: string;
+    };
+    display: {
+        block: string;
+        inline: string;
+    };
+}>, unknown, unknown, undefined>>;
+export type IconProps = VariantProps<typeof icon> & Pick<HTMLAttributes<HTMLSpanElement>, 'className' | 'role' | 'aria-labelledby' | 'aria-hidden'> & {
+    /** The icon to render from the Unity icon set */
+    src: UnityIcon;
+    /**
+     * Alternative text for the icon, used for accessibility
+     * @default ''
+     */
+    alt?: string;
+    /**
+     * The icon's color. Use one of the allowed tokens or the `inherit` value for using the parent's foreground color
+     * @default 'inherit'
+     */
+    color?: VariantProps<typeof icon>['color'];
+    /**
+     * The icon's size.
+     * @default 20
+     */
+    size?: VariantProps<typeof icon>['size'];
+};
+/**
+ * The `Icon` component displays an icon from the Unity icon set.
+ */
+export declare function Icon({ alt, color, size, src, role, display, ...rest }: IconProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,113 @@
+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",
+    {
+      "data-dd-privacy": "allow",
+      ...t,
+      role: a,
+      "aria-label": t["aria-labelledby"] ? void 0 : n,
+      children: /* @__PURE__ */ e(i, { className: u, src: r })
+    }
+  );
+}
+export {
+  f as Icon
+};