@byyuurin/ui 0.0.2 → 0.0.4

package/dist/{components → runtime/components}/index.d.ts

@@ -10,9 +10,11 @@ export { default as Modal } from './Modal.vue';
 export { default as ModalProvider } from './ModalProvider.vue';
 export { default as Popover } from './Popover.vue';
 export { default as RadioGroup } from './RadioGroup.vue';
+export { default as ScrollArea } from './ScrollArea.vue';
 export { default as Select } from './Select.vue';
 export { default as Switch } from './Switch.vue';
 export { default as Tabs } from './Tabs.vue';
+export { default as Textarea } from './Textarea.vue';
 export { default as Toast } from './Toast.vue';
 export { default as Toaster } from './Toaster.vue';
 export { default as Tooltip } from './Tooltip.vue';

package/dist/{components → runtime/components}/index.mjs

@@ -10,9 +10,11 @@ export { default as Modal } from "./Modal.vue";
 export { default as ModalProvider } from "./ModalProvider.vue";
 export { default as Popover } from "./Popover.vue";
 export { default as RadioGroup } from "./RadioGroup.vue";
+export { default as ScrollArea } from "./ScrollArea.vue";
 export { default as Select } from "./Select.vue";
 export { default as Switch } from "./Switch.vue";
 export { default as Tabs } from "./Tabs.vue";
+export { default as Textarea } from "./Textarea.vue";
 export { default as Toast } from "./Toast.vue";
 export { default as Toaster } from "./Toaster.vue";
 export { default as Tooltip } from "./Tooltip.vue";

package/dist/runtime/composables/defineInjection.d.ts

@@ -0,0 +1,11 @@
+import type { InjectionKey } from 'vue';
+export declare function defineInjection<T>(name: string): {
+    InjectionKey: InjectionKey<T>;
+    provide: (value: T) => void;
+    inject: () => T | undefined;
+};
+export declare function defineInjection<T>(name: string, defaultValue: T): {
+    InjectionKey: InjectionKey<T>;
+    provide: (value: T) => void;
+    inject: () => T;
+};

package/dist/runtime/composables/defineInjection.mjs

@@ -0,0 +1,9 @@
+import { inject, provide } from "vue";
+export function defineInjection(name, defaultValue) {
+  const InjectionKey = Symbol(name);
+  return {
+    InjectionKey,
+    provide: (value) => provide(InjectionKey, value),
+    inject: () => inject(InjectionKey, defaultValue)
+  };
+}

package/dist/{composables → runtime/composables}/index.d.ts

@@ -1,3 +1,4 @@
+export { defineInjection } from './defineInjection';
 export { useComponentIcons } from './useComponentIcons';
 export { useModal } from './useModal';
 export { useTheme } from './useTheme';

package/dist/{composables → runtime/composables}/index.mjs

@@ -1,3 +1,4 @@
+export { defineInjection } from "./defineInjection.mjs";
 export { useComponentIcons } from "./useComponentIcons.mjs";
 export { useModal } from "./useModal.mjs";
 export { useTheme } from "./useTheme.mjs";

package/dist/{composables → runtime/composables}/useModal.d.ts

@@ -5,7 +5,7 @@ export interface ModalState {
     component: Component | string;
     props: ModalProps;
 }
-export declare const injectModalState: () => ShallowRef<ModalState> | undefined, provideModalState: (value: ShallowRef<ModalState>) => void;
+export declare const InjectionKeyModalState: import("vue").InjectionKey<ShallowRef<ModalState>>, injectModalState: () => ShallowRef<ModalState> | undefined, provideModalState: (value: ShallowRef<ModalState>) => void;
 export declare const useModal: () => {
     open: <T extends Component>(component: T, props?: ModalProps & ComponentProps<T>) => void;
     close: () => void;

package/dist/{composables → runtime/composables}/useModal.mjs

@@ -1,10 +1,11 @@
 import { createSharedComposable } from "@vueuse/core";
 import { ref } from "vue";
-import { createInjection } from "../utils/index.mjs";
+import { defineInjection } from "./defineInjection.mjs";
 export const {
+  InjectionKey: InjectionKeyModalState,
   inject: injectModalState,
   provide: provideModalState
-} = createInjection("ui.modal");
+} = defineInjection("ui.modal");
 export const useModal = createSharedComposable(() => {
   const modalState = injectModalState();
   const isOpen = ref(false);

package/dist/{composables → runtime/composables}/useTheme.d.ts

@@ -1,7 +1,8 @@
+import type { UserConfig } from 'unocss';
 import type { MaybeRefOrGetter } from 'vue';
 import * as theme from '../theme';
-export declare const provideThemeExtension: (value: MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>) => void, injectThemeExtension: () => MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>;
-export declare const mergeRules: import("@byyuurin/ui-kit/index").CRRule[];
+export declare const InjectionKeyThemeExtension: import("vue").InjectionKey<MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>>, provideThemeExtension: (value: MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>) => void, injectThemeExtension: () => MaybeRefOrGetter<import("../types").PartialTheme<typeof theme>>;
+export declare const InjectionKeyUnoConfig: import("vue").InjectionKey<UserConfig<object>>, provideUnoConfig: (value: UserConfig<object>) => void, injectUnoConfig: () => UserConfig<object>;
 export declare const useTheme: () => {
     theme: import("vue").ComputedRef<typeof theme>;
     createStyler: <V extends import("@byyuurin/ui-kit/index").CVVariants<S, B>, CV extends import("@byyuurin/ui-kit/index").CVCompoundVariants<V, S, B>, B extends import("@byyuurin/ui-kit/index").ClassValue = undefined, S extends import("@byyuurin/ui-kit/index").CVSlots = undefined>(theme: import("@byyuurin/ui-kit/index").CVMeta<V, CV, never, B, S>) => [keyof V] extends string[] ? (props: Required<import("@byyuurin/ui-kit/index").VariantProps<import("@byyuurin/ui-kit/index").CVReturnType<V, S, B>>> & import("../types").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit/index").CVHandler<V, S, string>; } : (props?: import("../types").StylerBaseProps) => S extends undefined ? string : { [K in keyof S | (B extends undefined ? never : "base")]: import("@byyuurin/ui-kit/index").CVHandler<V, S, string>; };

package/dist/runtime/composables/useTheme.mjs

@@ -0,0 +1,26 @@
+import { transformUnoRules } from "@byyuurin/ui/unocss-preset";
+import { createSharedComposable } from "@vueuse/core";
+import { computed, toValue } from "vue";
+import * as theme from "../theme/index.mjs";
+import { extendTheme, prepareStyler } from "../utils/index.mjs";
+import { defineInjection } from "./defineInjection.mjs";
+export const {
+  InjectionKey: InjectionKeyThemeExtension,
+  provide: provideThemeExtension,
+  inject: injectThemeExtension
+} = defineInjection("ui.themeExtension", {});
+export const {
+  InjectionKey: InjectionKeyUnoConfig,
+  provide: provideUnoConfig,
+  inject: injectUnoConfig
+} = defineInjection("ui.unoConfig", {});
+export const useTheme = createSharedComposable(() => {
+  const themeExtension = injectThemeExtension();
+  const unoConfig = injectUnoConfig();
+  const mergeRules = transformUnoRules(unoConfig);
+  const { createStyler } = prepareStyler(mergeRules);
+  return {
+    theme: computed(() => extendTheme(toValue(themeExtension), theme)),
+    createStyler
+  };
+});

package/dist/{composables → runtime/composables}/useToast.d.ts

@@ -1,4 +1,4 @@
-import type { ToastProps } from '../types';
+import type { ToastProps } from '@byyuurin/ui';
 export interface Toast extends Omit<ToastProps, 'defaultOpen'> {
     id: string | number;
     click?: (toast: Toast) => void;

package/dist/{theme → runtime/theme}/button.d.ts

@@ -41,14 +41,6 @@ declare const _default: {
                 base: string;
             };
         };
-        round: {
-            true: {
-                base: string;
-            };
-            false: {
-                base: string;
-            };
-        };
         active: {
             true: "";
         };

package/dist/{theme → runtime/theme}/button.mjs

@@ -2,7 +2,7 @@ import { ct } from "@byyuurin/ui-kit";
 export default ct({
   slots: {
     base: [
-      "inline-flex items-center leading-normal transition-colors",
+      "inline-flex items-center rounded-ui-button leading-normal transition-colors",
       "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:opacity-50"
     ],
     label: "color-inherit",
@@ -64,14 +64,6 @@ export default ct({
         base: "text-xl"
       }
     },
-    round: {
-      true: {
-        base: "rounded-full"
-      },
-      false: {
-        base: "rounded-ui-button"
-      }
-    },
     active: {
       true: ""
     },

package/dist/{theme → runtime/theme}/checkbox.d.ts

@@ -40,12 +40,6 @@ declare const _default: {
                 label: string;
             };
         };
-        checked: {
-            true: {
-                base: string;
-                icon: string;
-            };
-        };
     };
     compoundVariants: import("@byyuurin/ui-kit/index").CVCompoundVariants<{
         size: {
@@ -78,12 +72,6 @@ declare const _default: {
                 label: string;
             };
         };
-        checked: {
-            true: {
-                base: string;
-                icon: string;
-            };
-        };
     }, {
         root: string;
         base: string[];

package/dist/{theme → runtime/theme}/checkbox.mjs

@@ -3,12 +3,13 @@ export default ct({
   slots: {
     root: "relative flex items-start",
     base: [
-      "size-1.25em shrink-0 flex items-center justify-center rounded-ui-base color-ui-c1 ring ring-inset ring-ui-cb",
-      "focus-visible:outline-ui-cb focus-visible:outline-2 focus-visible:outline-offset-2"
+      "size-1.25em shrink-0 flex items-center justify-center rounded-ui-checkbox color-ui-c1 ring-2 ring-ui-content ring-inset bg-ui-content",
+      "focus-visible:outline-ui-cb focus-visible:outline-2 focus-visible:outline-offset-2",
+      "aria-[checked=false]:ring-1 aria-[checked=false]:ring-ui-cb aria-[checked=false]:bg-ui-c1"
     ],
     container: "flex items-center h-1.25em",
     wrapper: "text-inherit ms-2",
-    icon: "shrink-0 size-1em data-[state=checked]:animate-[scale-in_200ms_ease-out]",
+    icon: "color-ui-c1 shrink-0 size-1em transition data-[state=unchecked]:translate-y-full",
     label: "flex color-ui-cb after:content-empty",
     description: "color-ui-cb/60"
   },
@@ -42,12 +43,6 @@ export default ct({
       false: {
         label: "cursor-pointer"
       }
-    },
-    checked: {
-      true: {
-        base: "ring-2 ring-ui-content bg-ui-content",
-        icon: "color-ui-c1"
-      }
     }
   }
 });

package/dist/{theme → runtime/theme}/index.d.ts

@@ -9,9 +9,11 @@ export { default as link } from './link';
 export { default as modal } from './modal';
 export { default as popover } from './popover';
 export { default as radioGroup } from './radioGroup';
+export { default as scrollArea } from './scrollArea';
 export { default as select } from './select';
 export { default as switch } from './switch';
 export { default as tabs } from './tabs';
+export { default as textarea } from './textarea';
 export { default as toast } from './toast';
 export { default as toaster } from './toaster';
 export { default as tooltip } from './tooltip';

package/dist/{theme → runtime/theme}/index.mjs

@@ -9,9 +9,11 @@ export { default as link } from "./link.mjs";
 export { default as modal } from "./modal.mjs";
 export { default as popover } from "./popover.mjs";
 export { default as radioGroup } from "./radioGroup.mjs";
+export { default as scrollArea } from "./scrollArea.mjs";
 export { default as select } from "./select.mjs";
 export { default as switch } from "./switch.mjs";
 export { default as tabs } from "./tabs.mjs";
+export { default as textarea } from "./textarea.mjs";
 export { default as toast } from "./toast.mjs";
 export { default as toaster } from "./toaster.mjs";
 export { default as tooltip } from "./tooltip.mjs";

package/dist/{theme → runtime/theme}/radioGroup.d.ts

@@ -16,7 +16,6 @@ declare const _default: {
         orientation: {
             horizontal: {
                 fieldset: string;
-                wrapper: string;
             };
             vertical: {
                 fieldset: string;
@@ -39,17 +38,6 @@ declare const _default: {
                 root: string;
             };
         };
-        dot: {
-            true: {
-                indicator: string;
-            };
-        };
-        round: {
-            true: {
-                base: string;
-                indicator: string;
-            };
-        };
         disabled: {
             true: {
                 root: string;
@@ -68,7 +56,6 @@ declare const _default: {
         orientation: {
             horizontal: {
                 fieldset: string;
-                wrapper: string;
             };
             vertical: {
                 fieldset: string;
@@ -91,17 +78,6 @@ declare const _default: {
                 root: string;
             };
         };
-        dot: {
-            true: {
-                indicator: string;
-            };
-        };
-        round: {
-            true: {
-                base: string;
-                indicator: string;
-            };
-        };
         disabled: {
             true: {
                 root: string;

package/dist/{theme → runtime/theme}/radioGroup.mjs

@@ -2,21 +2,20 @@ import { ct } from "@byyuurin/ui-kit";
 export default ct({
   slots: {
     root: "relative",
-    fieldset: "flex flex-wrap gap-0.5em",
-    legend: "mb-1 block font-medium color-ui-cb",
+    fieldset: "flex flex-wrap gap-2 gap-x-4",
+    legend: "mb-2 color-ui-cb",
     item: "flex items-start",
-    base: "size-1.25em rounded-ui-base ring ring-inset ring-ui-cb focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-cb",
-    indicator: "flex items-center justify-center size-full rounded-ui-base bg-ui-fill",
+    base: "relative size-1.25em rounded-ui-radio ring ring-inset ring-ui-cb focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-cb transition data-[state=checked]:ring-ui-base",
+    indicator: "absolute inset-0 scale-0 rounded-ui-radio bg-ui-fill transition data-[state=checked]:scale-66",
     container: "h-1.5em flex items-center",
-    wrapper: "ms-2",
-    label: "block font-medium color-ui-cb",
-    description: "color-ui-cb/60"
+    wrapper: "",
+    label: "block ps-2 color-ui-cb",
+    description: "ps-2 color-ui-cb/60"
   },
   variants: {
     orientation: {
       horizontal: {
-        fieldset: "flex-row",
-        wrapper: "me-2"
+        fieldset: "flex-row"
       },
       vertical: {
         fieldset: "flex-col"
@@ -39,17 +38,6 @@ export default ct({
         root: "text-xl"
       }
     },
-    dot: {
-      true: {
-        indicator: "after:content-empty after:size-0.75em after:bg-ui-c1 after:rounded-ui-base"
-      }
-    },
-    round: {
-      true: {
-        base: "rounded-full",
-        indicator: "rounded-full after:rounded-full"
-      }
-    },
     disabled: {
       true: {
         root: "opacity-50 after:content-empty after:absolute after:inset-0 after:cursor-not-allowed"

package/dist/runtime/theme/scrollArea.d.ts

@@ -0,0 +1,51 @@
+import type { TransitionGroupProps } from 'vue';
+export declare const transitionProps: TransitionGroupProps;
+declare const _default: {
+    base: undefined;
+    slots: {
+        /** Contains all the parts of a scroll area. */
+        root: string;
+        /** The viewport area of the scroll area. */
+        viewport: string;
+        /** The vertical and horizontal scrollbar. */
+        scrollbar: string[];
+        /** The thumb to be used in `ScrollAreaScrollbar`. */
+        thumb: string[];
+        /** The corner where both vertical and horizontal scrollbars meet. */
+        corner: string;
+    };
+    variants: {
+        [key: string]: {
+            [key: string]: "" | {
+                root?: import("@byyuurin/ui-kit/index").ClassValue;
+                viewport?: import("@byyuurin/ui-kit/index").ClassValue;
+                corner?: import("@byyuurin/ui-kit/index").ClassValue;
+                scrollbar?: import("@byyuurin/ui-kit/index").ClassValue;
+                thumb?: import("@byyuurin/ui-kit/index").ClassValue;
+            } | null;
+        };
+    };
+    compoundVariants: import("@byyuurin/ui-kit/index").CVCompoundVariants<{
+        [key: string]: {
+            [key: string]: "" | {
+                root?: import("@byyuurin/ui-kit/index").ClassValue;
+                viewport?: import("@byyuurin/ui-kit/index").ClassValue;
+                corner?: import("@byyuurin/ui-kit/index").ClassValue;
+                scrollbar?: import("@byyuurin/ui-kit/index").ClassValue;
+                thumb?: import("@byyuurin/ui-kit/index").ClassValue;
+            } | null;
+        };
+    }, {
+        /** Contains all the parts of a scroll area. */
+        root: string;
+        /** The viewport area of the scroll area. */
+        viewport: string;
+        /** The vertical and horizontal scrollbar. */
+        scrollbar: string[];
+        /** The thumb to be used in `ScrollAreaScrollbar`. */
+        thumb: string[];
+        /** The corner where both vertical and horizontal scrollbars meet. */
+        corner: string;
+    }, undefined>;
+};
+export default _default;

package/dist/runtime/theme/scrollArea.mjs

@@ -0,0 +1,30 @@
+import { ct } from "@byyuurin/ui-kit";
+export const transitionProps = {
+  enterFromClass: "opacity-0",
+  enterActiveClass: "transition",
+  leaveToClass: "opacity-0",
+  leaveActiveClass: "transition",
+  moveClass: "transition"
+};
+export default ct({
+  slots: {
+    /** Contains all the parts of a scroll area. */
+    root: "relative overflow-hidden shadow-sm shadow-ui-cb/10 bg-ui-c1 border border-ui-cb/10 rounded-ui-base",
+    /** The viewport area of the scroll area. */
+    viewport: "size-full rounded-ui-base",
+    /** The vertical and horizontal scrollbar. */
+    scrollbar: [
+      "flex select-none touch-none p-0.5 duration-160 ease-out",
+      "data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:my-[calc(var(--ui-radius-box)+0.25rem)]",
+      "data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:mx-[calc(var(--ui-radius-box)+0.25rem)]"
+    ],
+    /** The thumb to be used in `ScrollAreaScrollbar`. */
+    thumb: [
+      "relative flex-1 bg-ui-cb/20 rounded-ui-base cursor-pointer transition-colors",
+      "hover:bg-ui-cb/30 active:bg-ui-cb/40",
+      "before:content-empty before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-10 before:min-h-10 "
+    ],
+    /** The corner where both vertical and horizontal scrollbars meet. */
+    corner: ""
+  }
+});

package/dist/{theme → runtime/theme}/switch.d.ts

@@ -28,12 +28,6 @@ declare const _default: {
                 root: string;
             };
         };
-        round: {
-            true: {
-                base: string;
-                thumb: string;
-            };
-        };
         checked: {
             true: {
                 icon: string;
@@ -82,12 +76,6 @@ declare const _default: {
                 root: string;
             };
         };
-        round: {
-            true: {
-                base: string;
-                thumb: string;
-            };
-        };
         checked: {
             true: {
                 icon: string;

package/dist/{theme → runtime/theme}/switch.mjs

@@ -3,14 +3,14 @@ export default ct({
   slots: {
     root: "relative flex items-start",
     base: [
-      "inline-flex items-center shrink-0 rounded-ui-base border-2 border-transparent transition-colors duration-200",
+      "inline-flex items-center shrink-0 rounded-ui-switch border-2 border-transparent transition-colors duration-200",
       "focus-visible:outline-2 focus-visible:outline-offset-2",
       "data-[state=unchecked]:bg-ui-cb/10 data-[state=checked]:bg-ui-fill/80 focus-visible:outline-ui-base",
       "w-2.7em"
     ],
     container: "flex items-center h-1.5em",
     thumb: [
-      "group pointer-events-none rounded-ui-base size-1.25em bg-ui-c1 shadow-lg ring-0 transition-transform duration-200 flex items-center justify-center",
+      "group pointer-events-none rounded-ui-switch size-1.25em bg-ui-c1 shadow-lg ring-0 transition-transform duration-200 flex items-center justify-center",
       "data-[state=unchecked]:translate-x-0 data-[state=unchecked]:rtl:translate-x-0 data-[state=checked]:translate-x-1.25em data-[state=checked]:rtl:-translate-x-1.25em"
     ],
     icon: [
@@ -39,12 +39,6 @@ export default ct({
         root: "text-xl"
       }
     },
-    round: {
-      true: {
-        base: "rounded-full",
-        thumb: "rounded-full"
-      }
-    },
     checked: {
       true: {
         icon: "group-data-[state=checked]:opacity-100"

package/dist/{theme → runtime/theme}/tabs.d.ts

@@ -6,7 +6,7 @@ declare const _default: {
         indicator: string;
         trigger: string[];
         content: string;
-        leadingIcon: string;
+        prefixIcon: string;
         label: string;
     };
     variants: {
@@ -42,24 +42,19 @@ declare const _default: {
         };
         size: {
             xs: {
-                trigger: string;
-                leadingIcon: string;
+                root: string;
             };
             sm: {
-                trigger: string;
-                leadingIcon: string;
+                root: string;
             };
             md: {
-                trigger: string;
-                leadingIcon: string;
+                root: string;
             };
             lg: {
-                trigger: string;
-                leadingIcon: string;
+                root: string;
             };
             xl: {
-                trigger: string;
-                leadingIcon: string;
+                root: string;
             };
         };
         full: {
@@ -69,33 +64,59 @@ declare const _default: {
         };
     };
     compoundVariants: ({
+        size: ("xs" | "sm" | "md")[];
+        class: {
+            trigger: string;
+            indicator?: undefined;
+            list?: undefined;
+        };
+        orientation?: undefined;
+        variant?: undefined;
+    } | {
+        size: ("lg" | "xl")[];
+        class: {
+            trigger: string;
+            indicator?: undefined;
+            list?: undefined;
+        };
+        orientation?: undefined;
+        variant?: undefined;
+    } | {
         orientation: "horizontal";
         variant: ("solid" | "soft")[];
         class: {
             indicator: string;
+            trigger?: undefined;
             list?: undefined;
         };
+        size?: undefined;
     } | {
         orientation: "horizontal";
         variant: "link";
         class: {
             list: string;
             indicator: string;
+            trigger?: undefined;
         };
+        size?: undefined;
     } | {
         orientation: "vertical";
         variant: ("solid" | "soft")[];
         class: {
             indicator: string;
             list: string;
+            trigger?: undefined;
         };
+        size?: undefined;
     } | {
         orientation: "vertical";
         variant: "link";
         class: {
             list: string;
             indicator: string;
+            trigger?: undefined;
         };
+        size?: undefined;
     })[];
 };
 export default _default;

package/dist/{theme → runtime/theme}/tabs.mjs

@@ -5,12 +5,12 @@ export default ct({
     list: "relative flex p-1 group",
     indicator: "absolute transition-all duration-200",
     trigger: [
-      "group relative inline-flex items-center shrink-0 min-w-0 font-medium rounded-ui-tabs transition-colors",
+      "group relative inline-flex items-center gap-0.25em shrink-0 min-w-0 font-medium rounded-ui-tabs transition-colors",
       "focus:outline-hidden",
       "disabled:cursor-not-allowed disabled:opacity-50"
     ],
     content: "w-full focus:outline-none",
-    leadingIcon: "shrink-0",
+    prefixIcon: "shrink-0 size-1.5em",
     label: "truncate"
   },
   variants: {
@@ -55,24 +55,19 @@ export default ct({
     },
     size: {
       xs: {
-        trigger: "px-2 py-1 text-xs gap-1",
-        leadingIcon: "size-4"
+        root: "text-sm"
       },
       sm: {
-        trigger: "px-2.5 py-1.5 text-xs gap-1.5",
-        leadingIcon: "size-4"
+        root: "tex-tsm"
       },
       md: {
-        trigger: "px-3 py-1.5 text-sm gap-1.5",
-        leadingIcon: "size-5"
+        root: "text-base"
       },
       lg: {
-        trigger: "px-3 py-2 text-sm gap-2",
-        leadingIcon: "size-5"
+        root: "text-lg"
       },
       xl: {
-        trigger: "px-3 py-2 text-base gap-2",
-        leadingIcon: "size-6"
+        root: "text-xl"
       }
     },
     full: {
@@ -82,6 +77,18 @@ export default ct({
     }
   },
   compoundVariants: [
+    {
+      size: ["xs", "sm", "md"],
+      class: {
+        trigger: "p-1.5 px-2.5"
+      }
+    },
+    {
+      size: ["lg", "xl"],
+      class: {
+        trigger: "p-2.5 px-4.5"
+      }
+    },
     {
       orientation: "horizontal",
       variant: ["solid", "soft"],