@noxlovette/material 0.5.0 → 0.6.0

package/dist/components/buttons/theme.d.ts

@@ -1,185 +1,255 @@
 import { type VariantProps } from 'tailwind-variants';
+import type { Breakpoint } from '../containers/pane/theme.js';
 export type ButtonVariants = VariantProps<typeof button>;
-export type FABVariants = VariantProps<typeof fab>;
-export type FABMenuVariants = VariantProps<typeof fabMenu>;
-export type ButtonMDVariants = VariantProps<typeof button>;
 export type ButtonIconVariants = VariantProps<typeof buttonIcon>;
+export type ButtonColorVariants = VariantProps<typeof buttonColor>;
+export type FABVariants = VariantProps<typeof fab>;
 export type FABMenuItemVariants = VariantProps<typeof fabMenuItem>;
-export declare const button: import("tailwind-variants").TVReturnType<{
+/** @deprecated Use `ButtonVariants`. */
+export type ButtonMDVariants = ButtonVariants;
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+/** Container, border and content colours for one button colour style in one state. */
+export declare const buttonColor: import("tailwind-variants").TVReturnType<{
     variant: {
         elevated: "";
         filled: "";
         tonal: "";
-        outlined: "";
+        outlined: "[border-width:var(--btn-outline)] border-solid";
         text: "";
-        bare: "";
+        standard: "";
     };
-    color: {
+    /** `default` for plain buttons; `unselected`/`selected` for toggles. */
+    state: {
         default: "";
-        primary: "";
-        secondary: "";
-        tertiary: "";
-        error: "";
+        unselected: "";
+        selected: "";
+    };
+}, undefined, "", {
+    variant: {
+        elevated: "";
+        filled: "";
+        tonal: "";
+        outlined: "[border-width:var(--btn-outline)] border-solid";
+        text: "";
+        standard: "";
+    };
+    /** `default` for plain buttons; `unselected`/`selected` for toggles. */
+    state: {
+        default: "";
+        unselected: "";
+        selected: "";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        elevated: "";
+        filled: "";
+        tonal: "";
+        outlined: "[border-width:var(--btn-outline)] border-solid";
+        text: "";
+        standard: "";
     };
-    usage: {
-        selection: "";
+    /** `default` for plain buttons; `unselected`/`selected` for toggles. */
+    state: {
         default: "";
+        unselected: "";
+        selected: "";
+    };
+}, undefined>>;
+export declare const buttonBase = "md-btn md-sys-state-focus-indicator relative inline-flex shrink-0 cursor-pointer items-center justify-center whitespace-nowrap select-none disabled:cursor-not-allowed disabled:bg-md-sys-color-on-surface/10 disabled:text-md-sys-color-on-surface/38 disabled:shadow-none aria-disabled:cursor-not-allowed aria-disabled:bg-md-sys-color-on-surface/10 aria-disabled:text-md-sys-color-on-surface/38 aria-disabled:shadow-none";
+/** Button measurements per size: height, padding, icon-label gap, label type, shape and outline. */
+export declare const buttonSizes: {
+    readonly xs: {
+        readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]";
+        readonly icon: "size-spacing-250 text-[20px]";
+    };
+    readonly sm: {
+        readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]";
+        readonly icon: "size-spacing-250 text-[20px]";
+    };
+    readonly md: {
+        readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]";
+        readonly icon: "size-spacing-300 text-[24px]";
+    };
+    readonly lg: {
+        readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]";
+        readonly icon: "size-spacing-400 text-[32px]";
+    };
+    readonly xl: {
+        readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]";
+        readonly icon: "size-spacing-500 text-[40px]";
+    };
+};
+/** Resting elevation and hover lift per colour style (the text and outlined styles have none). */
+export declare const buttonElevation: {
+    readonly elevated: "shadow-elevation-1 not-disabled:hover:shadow-elevation-2";
+    readonly filled: "not-disabled:hover:shadow-elevation-1";
+    readonly tonal: "not-disabled:hover:shadow-elevation-1";
+    readonly outlined: "";
+    readonly text: "";
+};
+export declare const button: import("tailwind-variants").TVReturnType<{
+    variant: {
+        elevated: {
+            base: "shadow-elevation-1 not-disabled:hover:shadow-elevation-2";
+        };
+        filled: {
+            base: "not-disabled:hover:shadow-elevation-1";
+        };
+        tonal: {
+            base: "not-disabled:hover:shadow-elevation-1";
+        };
+        outlined: {};
+        text: {};
     };
     size: {
-        xs: {
-            base: string;
-            icon: string;
+        readonly xs: {
+            readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]";
+            readonly icon: "size-spacing-250 text-[20px]";
         };
-        sm: {
-            base: string;
-            icon: string;
+        readonly sm: {
+            readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]";
+            readonly icon: "size-spacing-250 text-[20px]";
         };
-        md: {
-            base: string;
-            icon: string;
+        readonly md: {
+            readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]";
+            readonly icon: "size-spacing-300 text-[24px]";
         };
-        lg: {
-            base: string;
-            icon: string;
+        readonly lg: {
+            readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]";
+            readonly icon: "size-spacing-400 text-[32px]";
         };
-        xl: {
-            base: string;
-            icon: string;
+        readonly xl: {
+            readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]";
+            readonly icon: "size-spacing-500 text-[40px]";
         };
     };
     shape: {
-        round: "";
-        square: "[--btn-shape-override:0.375rem]";
+        round: {
+            base: string;
+        };
+        square: {
+            base: string;
+        };
     };
+    /** Toggle buttons only: selected swaps the resting shape (round ↔ square). */
     selected: {
-        true: "";
-        false: "";
+        true: {};
+        false: {};
     };
 }, {
-    base: string;
+    base: string[];
     icon: string;
 }, undefined, {
     variant: {
-        elevated: "";
-        filled: "";
-        tonal: "";
-        outlined: "";
-        text: "";
-        bare: "";
-    };
-    color: {
-        default: "";
-        primary: "";
-        secondary: "";
-        tertiary: "";
-        error: "";
-    };
-    usage: {
-        selection: "";
-        default: "";
+        elevated: {
+            base: "shadow-elevation-1 not-disabled:hover:shadow-elevation-2";
+        };
+        filled: {
+            base: "not-disabled:hover:shadow-elevation-1";
+        };
+        tonal: {
+            base: "not-disabled:hover:shadow-elevation-1";
+        };
+        outlined: {};
+        text: {};
     };
     size: {
-        xs: {
-            base: string;
-            icon: string;
+        readonly xs: {
+            readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]";
+            readonly icon: "size-spacing-250 text-[20px]";
         };
-        sm: {
-            base: string;
-            icon: string;
+        readonly sm: {
+            readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]";
+            readonly icon: "size-spacing-250 text-[20px]";
         };
-        md: {
-            base: string;
-            icon: string;
+        readonly md: {
+            readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]";
+            readonly icon: "size-spacing-300 text-[24px]";
         };
-        lg: {
-            base: string;
-            icon: string;
+        readonly lg: {
+            readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]";
+            readonly icon: "size-spacing-400 text-[32px]";
         };
-        xl: {
-            base: string;
-            icon: string;
+        readonly xl: {
+            readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]";
+            readonly icon: "size-spacing-500 text-[40px]";
         };
     };
     shape: {
-        round: "";
-        square: "[--btn-shape-override:0.375rem]";
+        round: {
+            base: string;
+        };
+        square: {
+            base: string;
+        };
     };
+    /** Toggle buttons only: selected swaps the resting shape (round ↔ square). */
     selected: {
-        true: "";
-        false: "";
+        true: {};
+        false: {};
     };
 }, {
-    base: string;
+    base: string[];
     icon: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        elevated: "";
-        filled: "";
-        tonal: "";
-        outlined: "";
-        text: "";
-        bare: "";
-    };
-    color: {
-        default: "";
-        primary: "";
-        secondary: "";
-        tertiary: "";
-        error: "";
-    };
-    usage: {
-        selection: "";
-        default: "";
+        elevated: {
+            base: "shadow-elevation-1 not-disabled:hover:shadow-elevation-2";
+        };
+        filled: {
+            base: "not-disabled:hover:shadow-elevation-1";
+        };
+        tonal: {
+            base: "not-disabled:hover:shadow-elevation-1";
+        };
+        outlined: {};
+        text: {};
     };
     size: {
-        xs: {
-            base: string;
-            icon: string;
+        readonly xs: {
+            readonly base: "md-sys-typescale-label-large h-spacing-400 gap-spacing-50 px-spacing-150 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1rem] [--btn-square:0.75rem]";
+            readonly icon: "size-spacing-250 text-[20px]";
         };
-        sm: {
-            base: string;
-            icon: string;
+        readonly sm: {
+            readonly base: "md-sys-typescale-label-large h-spacing-500 gap-spacing-100 px-spacing-200 [--btn-outline:1px] [--btn-pressed:0.5rem] [--btn-round:1.25rem] [--btn-square:0.75rem]";
+            readonly icon: "size-spacing-250 text-[20px]";
         };
-        md: {
-            base: string;
-            icon: string;
+        readonly md: {
+            readonly base: "md-sys-typescale-title-medium h-spacing-700 gap-spacing-100 px-spacing-300 [--btn-outline:1px] [--btn-pressed:0.75rem] [--btn-round:1.75rem] [--btn-square:1rem]";
+            readonly icon: "size-spacing-300 text-[24px]";
         };
-        lg: {
-            base: string;
-            icon: string;
+        readonly lg: {
+            readonly base: "md-sys-typescale-headline-small h-24 gap-spacing-150 px-spacing-600 [--btn-outline:2px] [--btn-pressed:1rem] [--btn-round:3rem] [--btn-square:1.75rem]";
+            readonly icon: "size-spacing-400 text-[32px]";
         };
-        xl: {
-            base: string;
-            icon: string;
+        readonly xl: {
+            readonly base: "md-sys-typescale-headline-large h-34 gap-spacing-200 px-spacing-800 [--btn-outline:3px] [--btn-pressed:1rem] [--btn-round:4.25rem] [--btn-square:1.75rem]";
+            readonly icon: "size-spacing-500 text-[40px]";
         };
     };
     shape: {
-        round: "";
-        square: "[--btn-shape-override:0.375rem]";
+        round: {
+            base: string;
+        };
+        square: {
+            base: string;
+        };
     };
+    /** Toggle buttons only: selected swaps the resting shape (round ↔ square). */
     selected: {
-        true: "";
-        false: "";
+        true: {};
+        false: {};
     };
 }, {
-    base: string;
+    base: string[];
     icon: string;
 }>>;
 export declare const buttonIcon: import("tailwind-variants").TVReturnType<{
     variant: {
-        elevated: "";
-        filled: "";
-        tonal: "";
-        outlined: "";
-        text: "";
-        bare: "";
-    };
-    color: {
-        default: "";
-        primary: "";
-        secondary: "";
-        tertiary: "";
-        error: "";
+        filled: {};
+        tonal: {};
+        outlined: {};
+        standard: {};
     };
     size: {
         xs: {
@@ -203,41 +273,33 @@ export declare const buttonIcon: import("tailwind-variants").TVReturnType<{
             icon: string;
         };
     };
+    /** Container width: the icon plus the size's narrow, default or wide leading/trailing space. */
     width: {
-        narrow: "";
-        wide: "";
-        default: "aspect-square";
+        narrow: {};
+        default: {};
+        wide: {};
     };
     shape: {
-        round: "";
-        square: "[--btn-shape-override:0.75rem]";
+        round: {
+            base: string;
+        };
+        square: {
+            base: string;
+        };
     };
     selected: {
-        true: "";
-        false: "";
-    };
-    variation: {
-        toggle: "";
-        default: "";
+        true: {};
+        false: {};
     };
 }, {
-    base: string;
+    base: string[];
     icon: string;
 }, undefined, {
     variant: {
-        elevated: "";
-        filled: "";
-        tonal: "";
-        outlined: "";
-        text: "";
-        bare: "";
-    };
-    color: {
-        default: "";
-        primary: "";
-        secondary: "";
-        tertiary: "";
-        error: "";
+        filled: {};
+        tonal: {};
+        outlined: {};
+        standard: {};
     };
     size: {
         xs: {
@@ -261,41 +323,33 @@ export declare const buttonIcon: import("tailwind-variants").TVReturnType<{
             icon: string;
         };
     };
+    /** Container width: the icon plus the size's narrow, default or wide leading/trailing space. */
     width: {
-        narrow: "";
-        wide: "";
-        default: "aspect-square";
+        narrow: {};
+        default: {};
+        wide: {};
     };
     shape: {
-        round: "";
-        square: "[--btn-shape-override:0.75rem]";
+        round: {
+            base: string;
+        };
+        square: {
+            base: string;
+        };
     };
     selected: {
-        true: "";
-        false: "";
-    };
-    variation: {
-        toggle: "";
-        default: "";
+        true: {};
+        false: {};
     };
 }, {
-    base: string;
+    base: string[];
     icon: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
-        elevated: "";
-        filled: "";
-        tonal: "";
-        outlined: "";
-        text: "";
-        bare: "";
-    };
-    color: {
-        default: "";
-        primary: "";
-        secondary: "";
-        tertiary: "";
-        error: "";
+        filled: {};
+        tonal: {};
+        outlined: {};
+        standard: {};
     };
     size: {
         xs: {
@@ -319,157 +373,276 @@ export declare const buttonIcon: import("tailwind-variants").TVReturnType<{
             icon: string;
         };
     };
+    /** Container width: the icon plus the size's narrow, default or wide leading/trailing space. */
     width: {
-        narrow: "";
-        wide: "";
-        default: "aspect-square";
+        narrow: {};
+        default: {};
+        wide: {};
     };
     shape: {
-        round: "";
-        square: "[--btn-shape-override:0.75rem]";
+        round: {
+            base: string;
+        };
+        square: {
+            base: string;
+        };
     };
     selected: {
-        true: "";
-        false: "";
-    };
-    variation: {
-        toggle: "";
-        default: "";
+        true: {};
+        false: {};
     };
 }, {
-    base: string;
+    base: string[];
     icon: string;
 }>>;
+export type FABColor = 'primary-container' | 'secondary-container' | 'tertiary-container' | 'primary' | 'secondary' | 'tertiary';
+/** The FAB menu's colour set follows the FAB's colour family. */
+export declare const fabMenuSet: (color: FABColor) => "primary" | "secondary" | "tertiary";
 export declare const fab: import("tailwind-variants").TVReturnType<{
-    config: {
+    color: {
+        'primary-container': {
+            base: string;
+        };
+        'secondary-container': {
+            base: string;
+        };
+        'tertiary-container': {
+            base: string;
+        };
         primary: {
             base: string;
-            icon: string;
-            label: string;
         };
         secondary: {
             base: string;
-            icon: string;
-            label: string;
         };
         tertiary: {
             base: string;
-            icon: string;
-            label: string;
         };
     };
-    expanded: {
-        true: "gap-3 px-4";
-        false: "aspect-square";
-    };
     size: {
+        /** Baseline small FAB. No longer recommended by M3; kept for dense layouts. */
         small: {
             base: string;
             icon: string;
-            label: string;
         };
         regular: {
             base: string;
             icon: string;
             label: string;
         };
+        medium: {
+            base: string;
+            icon: string;
+            label: string;
+        };
         large: {
             base: string;
             icon: string;
             label: string;
         };
     };
+    /**
+     * The FAB menu's open state: the FAB becomes the round close button, label shut. Its size and
+     * corners spring to 56dp round in FAB.svelte.
+     */
+    menuOpen: {
+        true: {
+            base: string;
+            icon: string;
+            labelTrack: string;
+        };
+        false: {};
+    };
+    menuSet: {
+        primary: {};
+        secondary: {};
+        tertiary: {};
+    };
 }, {
     base: string;
     icon: string;
+    labelTrack: string;
+    labelClip: string;
     label: string;
 }, undefined, {
-    config: {
+    color: {
+        'primary-container': {
+            base: string;
+        };
+        'secondary-container': {
+            base: string;
+        };
+        'tertiary-container': {
+            base: string;
+        };
         primary: {
             base: string;
-            icon: string;
-            label: string;
         };
         secondary: {
             base: string;
-            icon: string;
-            label: string;
         };
         tertiary: {
             base: string;
-            icon: string;
-            label: string;
         };
     };
-    expanded: {
-        true: "gap-3 px-4";
-        false: "aspect-square";
-    };
     size: {
+        /** Baseline small FAB. No longer recommended by M3; kept for dense layouts. */
         small: {
             base: string;
             icon: string;
-            label: string;
         };
         regular: {
             base: string;
             icon: string;
             label: string;
         };
+        medium: {
+            base: string;
+            icon: string;
+            label: string;
+        };
         large: {
             base: string;
             icon: string;
             label: string;
         };
     };
+    /**
+     * The FAB menu's open state: the FAB becomes the round close button, label shut. Its size and
+     * corners spring to 56dp round in FAB.svelte.
+     */
+    menuOpen: {
+        true: {
+            base: string;
+            icon: string;
+            labelTrack: string;
+        };
+        false: {};
+    };
+    menuSet: {
+        primary: {};
+        secondary: {};
+        tertiary: {};
+    };
 }, {
     base: string;
     icon: string;
+    labelTrack: string;
+    labelClip: string;
     label: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
-    config: {
+    color: {
+        'primary-container': {
+            base: string;
+        };
+        'secondary-container': {
+            base: string;
+        };
+        'tertiary-container': {
+            base: string;
+        };
         primary: {
             base: string;
-            icon: string;
-            label: string;
         };
         secondary: {
             base: string;
-            icon: string;
-            label: string;
         };
         tertiary: {
             base: string;
-            icon: string;
-            label: string;
         };
     };
-    expanded: {
-        true: "gap-3 px-4";
-        false: "aspect-square";
-    };
     size: {
+        /** Baseline small FAB. No longer recommended by M3; kept for dense layouts. */
         small: {
             base: string;
             icon: string;
-            label: string;
         };
         regular: {
             base: string;
             icon: string;
             label: string;
         };
+        medium: {
+            base: string;
+            icon: string;
+            label: string;
+        };
         large: {
             base: string;
             icon: string;
             label: string;
         };
     };
+    /**
+     * The FAB menu's open state: the FAB becomes the round close button, label shut. Its size and
+     * corners spring to 56dp round in FAB.svelte.
+     */
+    menuOpen: {
+        true: {
+            base: string;
+            icon: string;
+            labelTrack: string;
+        };
+        false: {};
+    };
+    menuSet: {
+        primary: {};
+        secondary: {};
+        tertiary: {};
+    };
 }, {
     base: string;
     icon: string;
+    labelTrack: string;
+    labelClip: string;
     label: string;
 }>>;
+export declare const fabExpandedClasses: Record<Breakpoint, Record<'true' | 'false', {
+    track: string;
+    large: string;
+}>>;
+/**
+ * The surface a FAB opens into with a container transform, anchored at the FAB's corner. It is
+ * `surface`, the colour lists and most content paint, so padding doesn't show as bands. The
+ * shadow is a filter on the wrapper, because the surface's shape is a clip-path while it morphs.
+ */
+export declare const fabSurface: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            anchor?: import("tailwind-variants").ClassValue;
+            wrapper?: import("tailwind-variants").ClassValue;
+            surface?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            anchor?: import("tailwind-variants").ClassValue;
+            wrapper?: import("tailwind-variants").ClassValue;
+            surface?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    anchor: string;
+    wrapper: string;
+    surface: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            anchor?: import("tailwind-variants").ClassValue;
+            wrapper?: import("tailwind-variants").ClassValue;
+            surface?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    anchor: string;
+    wrapper: string;
+    surface: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    anchor: string;
+    wrapper: string;
+    surface: string;
+}>>;
 export declare const fabMenu: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
@@ -495,29 +668,48 @@ export declare const fabMenu: import("tailwind-variants").TVReturnType<{
 }, import("tailwind-variants").TVReturnTypeLike<unknown, {
     base: string;
 }>>;
+/** FAB menu items share the medium button's measurements, fully round, without elevation. */
 export declare const fabMenuItem: import("tailwind-variants").TVReturnType<{
-    variant: {
-        primary: "md-component-button-filled-primary";
-        secondary: "md-component-button-tonal-secondary";
-        tertiary: "md-component-button-outline-tertiary";
+    set: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
     };
 }, {
     base: string;
     icon: string;
 }, undefined, {
-    variant: {
-        primary: "md-component-button-filled-primary";
-        secondary: "md-component-button-tonal-secondary";
-        tertiary: "md-component-button-outline-tertiary";
+    set: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
     };
 }, {
     base: string;
     icon: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
-    variant: {
-        primary: "md-component-button-filled-primary";
-        secondary: "md-component-button-tonal-secondary";
-        tertiary: "md-component-button-outline-tertiary";
+    set: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
     };
 }, {
     base: string;