@payfit/unity-components 0.0.0-alpha.9 → 1.1.0

package/dist/esm/components/icon-button/IconButton.variants.d.ts

@@ -0,0 +1,290 @@
+import { VariantProps } from '@payfit/unity-themes';
+export declare const iconButtonPrimary: import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: string;
+    };
+    color: {
+        primary: string;
+        danger: string;
+        warning: string;
+        inverted: string;
+    };
+}, undefined, undefined, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, undefined, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, undefined, unknown, unknown, undefined>>>;
+export declare const iconButtonSecondary: import('tailwind-variants').TVReturnType<{
+    variant: {
+        secondary: {
+            button: string;
+        };
+    };
+    color: {
+        primary: string;
+        inverted: string;
+    };
+}, undefined, undefined, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, undefined, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, undefined, unknown, unknown, undefined>>>;
+export declare const iconButtonGhost: import('tailwind-variants').TVReturnType<{
+    variant: {
+        ghost: string;
+    };
+    color: {
+        neutral: string;
+        primary: string;
+        danger: string;
+        warning: string;
+        inverted: string;
+    };
+}, undefined, undefined, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, undefined, {
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: {
+            button: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+    isLoading: {
+        true: {
+            button: string;
+            icon: string;
+        };
+        false: {
+            button: string;
+        };
+    };
+}, {
+    button: string[];
+    icon: string;
+}, undefined, unknown, unknown, undefined>>>;
+export type IconButtonPrimary = VariantProps<typeof iconButtonPrimary>;
+export type IconButtonSecondary = VariantProps<typeof iconButtonSecondary>;
+export type IconButtonGhost = VariantProps<typeof iconButtonGhost>;

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

@@ -0,0 +1,379 @@
+import { uyTv as e } from "@payfit/unity-themes";
+const t = e({
+  slots: {
+    button: [
+      "uy:group",
+      "uy:w-500 uy:min-w-500 uy:h-500 uy:min-h-500 uy:flex uy:justify-center uy:items-center uy:rounded-75 uy:cursor-pointer",
+      "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+    ],
+    icon: "uy:w-250 uy:h-250"
+  },
+  variants: {
+    isDisabled: {
+      true: {
+        button: "uy:cursor-not-allowed"
+      },
+      false: {
+        button: ""
+      }
+    },
+    isLoading: {
+      true: {
+        button: "uy:cursor-progress uy:text-content-neutral-disabled",
+        icon: ""
+      },
+      false: {
+        button: ""
+      }
+    }
+  },
+  defaultVariants: {
+    isDisabled: !1,
+    isLoading: !1
+  }
+}), n = e({
+  extend: t,
+  variants: {
+    variant: {
+      primary: ""
+    },
+    color: {
+      primary: "",
+      danger: "",
+      warning: "",
+      inverted: "uy:focus-visible:outline-utility-inverted-focus-ring"
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "primary",
+      color: "primary",
+      isDisabled: !1,
+      isLoading: !1,
+      class: {
+        button: [
+          "uy:bg-surface-primary-enabled",
+          "uy:hover:bg-surface-primary-hover",
+          "uy:active:bg-surface-primary-active",
+          "uy:focus-visible:bg-surface-primary-focus",
+          "uy:data-[pressed]:bg-surface-primary-pressed"
+        ],
+        icon: [
+          "uy:text-content-inverted-enabled",
+          "uy:group-hover:text-content-inverted-hover",
+          "uy:active:text-content-inverted-active",
+          "uy:focus-visible:text-content-inverted-focus",
+          "uy:data-[pressed]:text-content-inverted-pressed"
+        ]
+      }
+    },
+    {
+      variant: "primary",
+      color: "danger",
+      isDisabled: !1,
+      isLoading: !1,
+      class: {
+        button: [
+          "uy:bg-surface-danger-enabled",
+          "uy:hover:bg-surface-danger-hover",
+          "uy:active:bg-surface-danger-active",
+          "uy:focus:bg-surface-danger-focus",
+          "uy:data-[pressed]:bg-surface-danger-pressed"
+        ],
+        icon: [
+          "uy:text-content-inverted-enabled",
+          "uy:group-hover:text-content-inverted-hover",
+          "uy:active:text-content-inverted-active",
+          "uy:focus:text-content-inverted-focus",
+          "uy:data-[pressed]:text-content-inverted-pressed"
+        ]
+      }
+    },
+    {
+      variant: "primary",
+      color: "warning",
+      isDisabled: !1,
+      isLoading: !1,
+      class: {
+        button: [
+          "uy:bg-surface-warning-enabled",
+          "uy:hover:bg-surface-warning-hover",
+          "uy:active:bg-surface-warning-pressed",
+          "uy:focus-visible:bg-surface-warning-focus",
+          "uy:data-[pressed]:bg-surface-warning-pressed"
+        ],
+        icon: [
+          "uy:text-content-neutral-enabled",
+          "uy:group-hover:text-content-neutral-hover",
+          "uy:active:text-content-neutral-pressed",
+          "uy:focus-visible:text-content-neutral-focus",
+          "uy:data-[pressed]:text-content-neutral-pressed"
+        ]
+      }
+    },
+    {
+      variant: "primary",
+      color: "inverted",
+      isDisabled: !1,
+      isLoading: !1,
+      class: {
+        button: [
+          "uy:bg-surface-neutral-enabled",
+          "uy:hover:bg-surface-neutral-hover",
+          "uy:active:bg-surface-neutral-pressed",
+          "uy:focus-visible:bg-surface-neutral-focus",
+          "uy:data-[pressed]:bg-surface-neutral-pressed"
+        ],
+        icon: [
+          "uy:text-content-neutral-enabled",
+          "uy:group-hover:text-content-neutral-hover",
+          "uy:active:text-content-neutral-pressed",
+          "uy:focus-visible:text-content-neutral-focus",
+          "uy:data-[pressed]:text-content-neutral-pressed"
+        ]
+      }
+    },
+    {
+      variant: "primary",
+      color: "primary",
+      isDisabled: !0,
+      isLoading: !1,
+      class: {
+        button: "uy:bg-surface-neutral-disabled",
+        icon: "uy:text-content-neutral-disabled"
+      }
+    },
+    {
+      variant: "primary",
+      color: ["primary", "danger", "warning", "inverted"],
+      isLoading: !0,
+      isDisabled: !1,
+      class: {
+        button: "uy:bg-surface-neutral-disabled",
+        icon: "uy:text-content-neutral-disabled"
+      }
+    }
+  ]
+}), a = e({
+  extend: t,
+  variants: {
+    variant: {
+      secondary: { button: "uy:focus-visible:outline-offset-4" }
+    },
+    color: {
+      primary: "",
+      inverted: "uy:focus-visible:outline-utility-inverted-focus-ring"
+    }
+  },
+  compoundVariants: [
+    {
+      color: "primary",
+      isDisabled: !1,
+      isLoading: !1,
+      class: {
+        button: [
+          "uy:border uy:border-solid uy:border-border-neutral-high-enabled",
+          "uy:hover:border-border-neutral-high-hover",
+          "uy:active:border-border-neutral-high-active",
+          "uy:data-[pressed]:border-border-neutral-high-pressed"
+        ],
+        icon: [
+          "uy:text-content-neutral-low-enabled",
+          "uy:group-hover:text-content-low-neutral-hover",
+          "uy:active:text-content-neutral-low-active",
+          "uy:data-[pressed]:text-content-neutral-low-pressed",
+          "uy:focus-visible:text-content-neutral-low-focus"
+        ]
+      }
+    },
+    {
+      color: "primary",
+      isLoading: !0,
+      isDisabled: !1,
+      class: {
+        button: [
+          "uy:border uy:border-solid uy:border-border-neutral-disabled",
+          "uy:focus-visible:border-border-primary-focus"
+        ],
+        icon: ["uy:text-content-neutral-disabled"]
+      }
+    },
+    {
+      color: "primary",
+      isLoading: !1,
+      isDisabled: !0,
+      class: {
+        button: [
+          "uy:border uy:border-solid uy:border-border-neutral-disabled",
+          "uy:focus-visible:border-border-primary-focus"
+        ],
+        icon: ["uy:text-content-neutral-disabled"]
+      }
+    },
+    {
+      color: "inverted",
+      isDisabled: !1,
+      isLoading: !1,
+      class: {
+        button: [
+          "uy:border uy:border-solid uy:border-border-inverted",
+          "uy:hover:border-border-inverted-hover",
+          "uy:data-[pressed]:border-border-inverted-pressed",
+          "uy:active:border-border-inverted-active",
+          "uy:focus-visible:border-border-inverted-focus uy:focus-visible:outline-utility-inverted-focus-ring"
+        ],
+        icon: [
+          "uy:text-content-inverted",
+          "uy:group-hover:text-content-inverted-hover",
+          "uy:data-[pressed]:text-content-inverted-pressed",
+          "uy:active:text-content-inverted-active",
+          "uy:focus-visible:text-content-inverted-focus"
+        ]
+      }
+    },
+    {
+      color: "inverted",
+      isLoading: !1,
+      isDisabled: !0,
+      class: {
+        button: [
+          "uy:border uy:border-solid uy:border-border-inverted-disabled",
+          "uy:focus-visible:border-border-primary-focus"
+        ],
+        icon: ["uy:text-content-inverted-disabled"]
+      }
+    }
+  ]
+}), s = e({
+  extend: t,
+  variants: {
+    variant: {
+      ghost: ""
+    },
+    color: {
+      neutral: "",
+      primary: "",
+      danger: "",
+      warning: "",
+      inverted: ""
+    }
+  },
+  compoundVariants: [
+    {
+      color: "inverted",
+      isDisabled: !1,
+      isLoading: !1,
+      class: {
+        button: [
+          "uy:bg-transparent",
+          "uy:hover:bg-surface-inverted-hover",
+          "uy:active:bg-surface-inverted-active",
+          "uy:data-[pressed=true]:bg-surface-inverted-pressed",
+          "uy:focus-visible:outline-utility-inverted-focus-ring",
+          "uy:focus-visible:bg-transparent"
+        ],
+        icon: [
+          "uy:text-content-inverted",
+          "uy:group-hover:text-content-inverted-hover",
+          "uy:data-[pressed]:text-content-inverted-pressed",
+          "uy:active:text-content-inverted-active",
+          "uy:focus-visible:text-content-inverted-focus"
+        ]
+      }
+    },
+    {
+      color: "neutral",
+      isDisabled: !1,
+      isLoading: !1,
+      class: {
+        button: [
+          "uy:hover:bg-surface-neutral-hover",
+          "uy:data-[pressed]:bg-surface-neutral-pressed",
+          "uy:active:bg-surface-neutral-active"
+        ],
+        icon: ["uy:text-content-neutral-low"]
+      }
+    },
+    {
+      color: "primary",
+      isDisabled: !1,
+      isLoading: !1,
+      class: {
+        button: [
+          "uy:text-content-primary-enabled",
+          "uy:hover:bg-surface-primary-lowest-hover",
+          "uy:data-[pressed]:bg-surface-primary-lowest-pressed",
+          "uy:active:bg-surface-primary-lowest-active"
+        ],
+        icon: [
+          "uy:text-content-primary",
+          "uy:group-hover:text-content-primary",
+          "uy:data-[pressed]:text-content-primary",
+          "uy:focus-visible:text-content-primary",
+          "uy:active:text-content-primary"
+        ]
+      }
+    },
+    {
+      color: "danger",
+      isDisabled: !1,
+      isLoading: !1,
+      class: {
+        button: [
+          "uy:hover:bg-surface-danger-lowest-hover",
+          "uy:data-[pressed]:bg-surface-danger-lowest-pressed",
+          "uy:active:bg-surface-danger-lowest-active"
+        ],
+        icon: [
+          "uy:text-content-danger",
+          "uy:group-hover:text-content-danger",
+          "uy:data-[pressed]:text-content-danger",
+          "uy:focus-visible:text-content-danger",
+          "uy:active:text-content-danger"
+        ]
+      }
+    },
+    {
+      color: "warning",
+      isDisabled: !1,
+      isLoading: !1,
+      class: {
+        button: [
+          "uy:hover:bg-surface-warning-lowest-hover",
+          "uy:data-[pressed]:bg-surface-warning-lowest-pressed",
+          "uy:active:bg-surface-warning-lowest-active"
+        ],
+        icon: [
+          "uy:text-content-warning-high",
+          "uy:group-hover:text-content-warning-high",
+          "uy:data-[pressed]:text-content-warning-high",
+          "uy:focus-visible:text-content-warning-high",
+          "uy:active:text-content-warning-high"
+        ]
+      }
+    },
+    {
+      color: ["primary", "neutral", "danger", "warning", "inverted"],
+      isDisabled: !0,
+      isLoading: !1,
+      class: {
+        button: "",
+        icon: "uy:text-content-neutral-disabled"
+      }
+    },
+    {
+      color: ["primary", "neutral", "danger", "warning", "inverted"],
+      isDisabled: !1,
+      isLoading: !0,
+      class: {
+        button: "",
+        icon: "uy:text-content-neutral-disabled"
+      }
+    }
+  ]
+});
+export {
+  s as iconButtonGhost,
+  n as iconButtonPrimary,
+  a as iconButtonSecondary
+};