@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/button/Button.variants.d.ts

@@ -0,0 +1,536 @@
+import { VariantProps } from 'tailwind-variants';
+declare const buttonBase: import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, unknown, unknown, undefined>>;
+export declare const buttonFilled: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: string[];
+        warning: string[];
+        danger: string[];
+        inverted: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    color: {
+        primary: string[];
+        warning: string[];
+        danger: string[];
+        inverted: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, unknown, unknown, undefined>>>;
+export declare const buttonOutlined: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: string[];
+        inverted: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+    };
+}, undefined, "uy-border uy-border-solid", import('tailwind-variants/dist/config.js').TVConfig<{
+    color: {
+        primary: string[];
+        inverted: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, unknown, unknown, undefined>>>;
+export declare const buttonGhost: import('tailwind-variants').TVReturnType<{
+    color: {
+        primary: string[];
+        warning: string[];
+        danger: string[];
+        neutral: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    color: {
+        primary: string[];
+        warning: string[];
+        danger: string[];
+        neutral: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}, {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+    size: {
+        default: string;
+        full: string;
+    };
+}>, unknown, unknown, undefined>>>;
+export type ButtonBase = VariantProps<typeof buttonBase>;
+export type ButtonFilled = VariantProps<typeof buttonFilled>;
+export type ButtonOutlined = VariantProps<typeof buttonOutlined>;
+export type ButtonGhost = VariantProps<typeof buttonGhost>;
+export {};

package/dist/esm/components/button/Button.variants.js

@@ -0,0 +1,136 @@
+import { tv as e } from "tailwind-variants";
+const a = e({
+  base: [
+    "uy-group",
+    "uy-rounded-75 uy-px-200 uy-h-500 uy-inline-flex uy-items-center uy-justify-center uy-whitespace-nowrap uy-typography-action uy-transition-colors",
+    "focus-visible:uy-outline-2 focus-visible:uy-outline focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring"
+  ],
+  variants: {
+    isDisabled: {
+      true: "disabled:uy-cursor-not-allowed",
+      false: ""
+    },
+    isLoading: {
+      true: "data-[loading]:uy-cursor-progress data-[loading]:uy-text-content-neutral-disabled",
+      false: ""
+    },
+    size: {
+      default: "uy-w-auto uy-grow-0 uy-basis-auto",
+      full: "uy-grow-1 uy-w-full uy-basis-full"
+    }
+  },
+  defaultVariants: {
+    isDisabled: !1,
+    isLoading: !1,
+    size: "default"
+  }
+}), r = e({
+  extend: a,
+  variants: {
+    color: {
+      primary: [
+        "uy-bg-surface-primary-enabled uy-text-content-inverted-enabled",
+        "hover:uy-bg-surface-primary-hover",
+        "active:uy-bg-surface-primary-active",
+        "data-[pressed]:uy-bg-surface-primary-active"
+      ],
+      warning: [
+        "uy-bg-surface-warning-enabled uy-text-content-inverted-enabled",
+        "hover:uy-bg-surface-warning-hover",
+        "active:uy-bg-surface-warning-active",
+        "data-[pressed]:uy-bg-surface-warning-active"
+      ],
+      danger: [
+        "uy-bg-surface-danger-enabled uy-text-content-inverted-enabled",
+        "hover:uy-bg-surface-danger-hover",
+        "active:uy-bg-surface-danger-active",
+        "data-[pressed]:uy-bg-surface-danger-active"
+      ],
+      inverted: [
+        "uy-bg-surface-inverted-enabled uy-text-content-neutral-enabled",
+        "hover:uy-bg-surface-inverted-hover",
+        "active:uy-bg-surface-inverted-active",
+        "data-[pressed]:uy-bg-surface-inverted-active",
+        "focus-visible:uy-outline-utility-inverted-focus-ring"
+      ]
+    },
+    isDisabled: {
+      true: "disabled:uy-bg-surface-neutral-disabled disabled:uy-text-content-neutral-disabled",
+      false: ""
+    },
+    isLoading: {
+      true: "data-[loading]:uy-bg-surface-neutral-disabled data-[loading]:uy-text-content-neutral-disabled",
+      false: ""
+    }
+  }
+}), u = e({
+  extend: a,
+  base: "uy-border uy-border-solid",
+  variants: {
+    color: {
+      primary: [
+        "uy-bg-transparent uy-text-content-primary-enabled uy-border-border-primary-enabled",
+        "focus-visible:uy-border-border-primary-focus focus-visible:uy-text-content-primary-focus",
+        "hover:uy-text-content-primary-hover hover:uy-border-border-primary-hover",
+        "active:uy-text-content-primary-active active:uy-border-border-primary-active"
+      ],
+      inverted: [
+        "uy-bg-transparent uy-text-content-inverted uy-border-border-inverted-enabled"
+      ]
+    },
+    isDisabled: {
+      true: "disabled:uy-text-content-neutral-disabled disabled:uy-border-border-neutral-disabled",
+      false: ""
+    },
+    isLoading: {
+      true: "data-[loading]:uy-text-content-neutral-disabled data-[loading]:uy-border-border-neutral-disabled"
+    }
+  }
+}), n = e({
+  extend: a,
+  variants: {
+    color: {
+      primary: [
+        "uy-bg-transparent uy-text-content-primary",
+        "enabled:hover:uy-bg-surface-primary-lowest-hover",
+        "active:uy-bg-surface-primary-lowest-active",
+        "data-[pressed]:uy-bg-surface-primary-lowest-active",
+        "focus-visible:uy-bg-transparent"
+      ],
+      warning: [
+        "uy-bg-transparent uy-text-content-warning-enabled",
+        "enabled:hover:uy-bg-surface-warning-lowest-hover",
+        "active:uy-bg-surface-warning-lowest-active",
+        "data-[pressed]:uy-bg-surface-warning-lowest-active",
+        "focus-visible:uy-bg-transparent"
+      ],
+      danger: [
+        "uy-bg-transparent uy-text-content-danger-enabled",
+        "enabled:hover:uy-bg-surface-danger-lowest-hover",
+        "active:uy-bg-surface-danger-lowest-active",
+        "data-[pressed]:uy-bg-surface-danger-lowest-active",
+        "focus-visible:uy-bg-transparent"
+      ],
+      neutral: [
+        "uy-bg-transparent uy-text-content-neutral-enabled",
+        "enabled:hover:uy-bg-surface-neutral-hover",
+        "active:uy-bg-surface-neutral-active",
+        "data-[pressed]:uy-bg-surface-neutral-active",
+        "focus-visible:uy-bg-transparent"
+      ]
+    },
+    isDisabled: {
+      true: "disabled:uy-text-content-neutral-disabled disabled:uy-bg-transparent",
+      false: ""
+    },
+    isLoading: {
+      true: "data-[loading]:uy-text-content-neutral-disabled data-[loading]:uy-bg-transparent",
+      false: ""
+    }
+  }
+});
+export {
+  r as buttonFilled,
+  n as buttonGhost,
+  u as buttonOutlined
+};