@trackunit/react-components 2.13.0 → 2.13.1

package/src/components/buttons/shared/Button.variants.d.ts

@@ -1,20 +1,389 @@
-export declare const cvaButton: (props?: ({
-    variant?: "filled" | "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | null | undefined;
-    size?: "small" | "medium" | "large" | null | undefined;
-    fullWidth?: boolean | null | undefined;
-    square?: boolean | null | undefined;
-    disabled?: boolean | null | undefined;
-    loading?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const cvaButtonSpinnerContainer: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
-export declare const cvaButtonSpinner: (props?: ({
-    variant?: "filled" | "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const cvaButtonPrefixSuffix: (props?: ({
-    size?: "small" | "medium" | "large" | null | undefined;
-    variant?: "filled" | "primary" | "primary-danger" | "secondary" | "secondary-danger" | "ghost" | "ghost-neutral" | null | undefined;
-    disabled?: boolean | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export declare const cvaIconButton: (props?: ({
-    size?: "small" | "medium" | "large" | "extraSmall" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const cvaButton: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        variant: {
+            primary: string[];
+            "primary-danger": string[];
+            secondary: string[];
+            "secondary-danger": string[];
+            ghost: string[];
+            "ghost-neutral": string[];
+            filled: string[];
+        };
+        size: {
+            /**
+             * TLDR; Calculating min-height so button sizes are (more) consistently sized.
+             *
+             * OK. let me explain this one.
+             * min-h here is to match the height of a button that has text inside
+             * We could just use the same min-h-[var(--line-height-sm)]) for all sizes
+             * but then the button would be too small since button is using box-sizing: border-box
+             * and what we really want is to make sure it's _content_ is the same height as a
+             * button with text inside.
+             * We could then change the box-sizing to content-box but that would break other things
+             * and be inconsistent with almost all everything else.
+             *
+             * So we need to add padding to the min-height calculation. Two times the vertical
+             * padding aka py-1 * 2 aka --spacing-1 * 2 aka spacing-2 (for small).
+             */
+            small: string[];
+            medium: string[];
+            large: string[];
+        };
+        fullWidth: {
+            true: string[];
+            false: never[];
+        };
+        square: {
+            true: string;
+            false: string;
+        };
+        disabled: {
+            true: string[];
+            false: never[];
+        };
+        loading: {
+            true: string[];
+            false: never[];
+        };
+    };
+    compoundVariants: ({
+        square: true;
+        size: "small";
+        className: "p-1"[];
+        loading?: undefined;
+        variant?: undefined;
+    } | {
+        square: true;
+        size: "medium";
+        className: "p-1.5"[];
+        loading?: undefined;
+        variant?: undefined;
+    } | {
+        square: true;
+        size: "large";
+        className: "p-2"[];
+        loading?: undefined;
+        variant?: undefined;
+    } | {
+        loading: true;
+        variant: "primary";
+        className: "disabled:bg-primary-600"[];
+        square?: undefined;
+        size?: undefined;
+    } | {
+        loading: true;
+        variant: "primary-danger";
+        className: "disabled:bg-danger-600"[];
+        square?: undefined;
+        size?: undefined;
+    } | {
+        loading: true;
+        variant: "secondary";
+        className: "disabled:bg-white"[];
+        square?: undefined;
+        size?: undefined;
+    } | {
+        loading: true;
+        variant: "secondary-danger";
+        className: ("disabled:bg-white" | "disabled:border-neutral-300")[];
+        square?: undefined;
+        size?: undefined;
+    })[];
+    defaultVariants: {
+        variant: "primary";
+        size: "medium";
+        fullWidth: false;
+        square: false;
+        disabled: false;
+    };
+}, "defaultVariants"> & {
+    variants: {
+        variant: {
+            primary: string[];
+            "primary-danger": string[];
+            secondary: string[];
+            "secondary-danger": string[];
+            ghost: string[];
+            "ghost-neutral": string[];
+            filled: string[];
+        };
+        size: {
+            /**
+             * TLDR; Calculating min-height so button sizes are (more) consistently sized.
+             *
+             * OK. let me explain this one.
+             * min-h here is to match the height of a button that has text inside
+             * We could just use the same min-h-[var(--line-height-sm)]) for all sizes
+             * but then the button would be too small since button is using box-sizing: border-box
+             * and what we really want is to make sure it's _content_ is the same height as a
+             * button with text inside.
+             * We could then change the box-sizing to content-box but that would break other things
+             * and be inconsistent with almost all everything else.
+             *
+             * So we need to add padding to the min-height calculation. Two times the vertical
+             * padding aka py-1 * 2 aka --spacing-1 * 2 aka spacing-2 (for small).
+             */
+            small: string[];
+            medium: string[];
+            large: string[];
+        };
+        fullWidth: {
+            true: string[];
+            false: never[];
+        };
+        square: {
+            true: string;
+            false: string;
+        };
+        disabled: {
+            true: string[];
+            false: never[];
+        };
+        loading: {
+            true: string[];
+            false: never[];
+        };
+    };
+    defaultVariants: Omit<{}, "size" | "disabled" | "square" | "variant" | "fullWidth"> & {
+        variant: "primary";
+        size: "medium";
+        fullWidth: false;
+        square: false;
+        disabled: false;
+    };
+}, {
+    variant: {
+        primary: string[];
+        "primary-danger": string[];
+        secondary: string[];
+        "secondary-danger": string[];
+        ghost: string[];
+        "ghost-neutral": string[];
+        filled: string[];
+    };
+    size: {
+        /**
+         * TLDR; Calculating min-height so button sizes are (more) consistently sized.
+         *
+         * OK. let me explain this one.
+         * min-h here is to match the height of a button that has text inside
+         * We could just use the same min-h-[var(--line-height-sm)]) for all sizes
+         * but then the button would be too small since button is using box-sizing: border-box
+         * and what we really want is to make sure it's _content_ is the same height as a
+         * button with text inside.
+         * We could then change the box-sizing to content-box but that would break other things
+         * and be inconsistent with almost all everything else.
+         *
+         * So we need to add padding to the min-height calculation. Two times the vertical
+         * padding aka py-1 * 2 aka --spacing-1 * 2 aka spacing-2 (for small).
+         */
+        small: string[];
+        medium: string[];
+        large: string[];
+    };
+    fullWidth: {
+        true: string[];
+        false: never[];
+    };
+    square: {
+        true: string;
+        false: string;
+    };
+    disabled: {
+        true: string[];
+        false: never[];
+    };
+    loading: {
+        true: string[];
+        false: never[];
+    };
+}>;
+export declare const cvaButtonSpinnerContainer: import("cva").CVAComponent<Omit<{
+    base: string[];
+}, "defaultVariants"> & {
+    variants: unknown;
+    defaultVariants: Omit<{}, never>;
+}, unknown>;
+export declare const cvaButtonSpinner: import("cva").CVAComponent<Omit<{
+    base: never[];
+    variants: {
+        variant: {
+            primary: string[];
+            "primary-danger": string[];
+            secondary: string[];
+            "secondary-danger": string[];
+            ghost: never[];
+            "ghost-neutral": never[];
+            filled: never[];
+        };
+    };
+    defaultVariants: {
+        variant: "primary";
+    };
+}, "defaultVariants"> & {
+    variants: {
+        variant: {
+            primary: string[];
+            "primary-danger": string[];
+            secondary: string[];
+            "secondary-danger": string[];
+            ghost: never[];
+            "ghost-neutral": never[];
+            filled: never[];
+        };
+    };
+    defaultVariants: Omit<{}, "variant"> & {
+        variant: "primary";
+    };
+}, {
+    variant: {
+        primary: string[];
+        "primary-danger": string[];
+        secondary: string[];
+        "secondary-danger": string[];
+        ghost: never[];
+        "ghost-neutral": never[];
+        filled: never[];
+    };
+}>;
+export declare const cvaButtonPrefixSuffix: import("cva").CVAComponent<Omit<{
+    base: string[];
+    variants: {
+        size: {
+            small: string[];
+            medium: string[];
+            large: string[];
+        };
+        variant: {
+            primary: never[];
+            "primary-danger": never[];
+            secondary: string[];
+            "secondary-danger": never[];
+            ghost: never[];
+            "ghost-neutral": string[];
+            filled: never[];
+        };
+        disabled: {
+            true: never[];
+            false: never[];
+        };
+    };
+    compoundVariants: ({
+        variant: "secondary";
+        disabled: true;
+        className: ("text-neutral-400" | "group-focus:text-neutral-400" | "group-hover:text-neutral-400" | "group-active:text-neutral-400")[];
+    } | {
+        variant: "ghost-neutral";
+        disabled: true;
+        className: ("text-neutral-300" | "group-focus:text-neutral-300" | "group-hover:text-neutral-300" | "group-active:text-neutral-300")[];
+    } | {
+        variant: "ghost";
+        disabled: true;
+        className: ("text-neutral-300" | "group-focus:text-neutral-300" | "group-hover:text-neutral-300" | "group-active:text-neutral-300")[];
+    })[];
+    defaultVariants: {
+        size: "medium";
+        variant: "primary";
+        disabled: false;
+    };
+}, "defaultVariants"> & {
+    variants: {
+        size: {
+            small: string[];
+            medium: string[];
+            large: string[];
+        };
+        variant: {
+            primary: never[];
+            "primary-danger": never[];
+            secondary: string[];
+            "secondary-danger": never[];
+            ghost: never[];
+            "ghost-neutral": string[];
+            filled: never[];
+        };
+        disabled: {
+            true: never[];
+            false: never[];
+        };
+    };
+    defaultVariants: Omit<{}, "size" | "disabled" | "variant"> & {
+        size: "medium";
+        variant: "primary";
+        disabled: false;
+    };
+}, {
+    size: {
+        small: string[];
+        medium: string[];
+        large: string[];
+    };
+    variant: {
+        primary: never[];
+        "primary-danger": never[];
+        secondary: string[];
+        "secondary-danger": never[];
+        ghost: never[];
+        "ghost-neutral": string[];
+        filled: never[];
+    };
+    disabled: {
+        true: never[];
+        false: never[];
+    };
+}>;
+export declare const cvaIconButton: import("cva").CVAComponent<Omit<{
+    base: never[];
+    variants: {
+        size: {
+            /**
+             * Sized to match a single text line (20px) so the button fits inside
+             * fixed-height contexts like table rows without clipping its hover state.
+             *
+             * `min-h-5` is what makes this an icon-only step: it overrides the
+             * text-height floor `cvaButton` applies for every size on its own scale.
+             */
+            extraSmall: string[];
+            small: string[];
+            medium: string[];
+            large: string[];
+        };
+    };
+    defaultVariants: {
+        size: "medium";
+    };
+}, "defaultVariants"> & {
+    variants: {
+        size: {
+            /**
+             * Sized to match a single text line (20px) so the button fits inside
+             * fixed-height contexts like table rows without clipping its hover state.
+             *
+             * `min-h-5` is what makes this an icon-only step: it overrides the
+             * text-height floor `cvaButton` applies for every size on its own scale.
+             */
+            extraSmall: string[];
+            small: string[];
+            medium: string[];
+            large: string[];
+        };
+    };
+    defaultVariants: Omit<{}, "size"> & {
+        size: "medium";
+    };
+}, {
+    size: {
+        /**
+         * Sized to match a single text line (20px) so the button fits inside
+         * fixed-height contexts like table rows without clipping its hover state.
+         *
+         * `min-h-5` is what makes this an icon-only step: it overrides the
+         * text-height floor `cvaButton` applies for every size on its own scale.
+         */
+        extraSmall: string[];
+        small: string[];
+        medium: string[];
+        large: string[];
+    };
+}>;