feat(button): add support for 2xs and 3xs to button

docs/content.config.ts

@@ -22,7 +22,7 @@ const Button = z.object({
   to: z.string().optional(),
   target: z.enum(['_blank', '_self']).optional(),
   color: z.enum(['primary', 'neutral', 'success', 'warning', 'error', 'info']).optional(),
-  size: z.enum(['xs', 'sm', 'md', 'lg', 'xl']).optional(),
+  size: z.enum(['3xs', '2xs', 'xs', 'sm', 'md', 'lg', 'xl']).optional(),
   variant: z.enum(['solid', 'outline', 'subtle', 'soft', 'ghost', 'link']).optional(),
   id: z.string().optional(),
   class: z.string().optional()

src/theme/button.ts

@@ -25,31 +25,43 @@ export default (options: Required<ModuleOptions>) => ({
       link: ''
     },
     size: {
-      xs: {
+      '3xs': {
+        base: 'px-1 py-0.5 text-[8px]/3 gap-1 rounded-sm',
+        leadingIcon: 'size-3',
+        leadingAvatarSize: '3xs',
+        trailingIcon: 'size-3'
+      },
+      '2xs': {
+        base: 'px-1.5 py-1 text-[10px]/3 gap-1 rounded-sm',
+        leadingIcon: 'size-3',
+        leadingAvatarSize: '3xs',
+        trailingIcon: 'size-3'
+      },
+      'xs': {
         base: 'px-2 py-1 text-xs gap-1',
         leadingIcon: 'size-4',
         leadingAvatarSize: '3xs',
         trailingIcon: 'size-4'
       },
-      sm: {
+      'sm': {
         base: 'px-2.5 py-1.5 text-xs gap-1.5',
         leadingIcon: 'size-4',
         leadingAvatarSize: '3xs',
         trailingIcon: 'size-4'
       },
-      md: {
+      'md': {
         base: 'px-2.5 py-1.5 text-sm gap-1.5',
         leadingIcon: 'size-5',
         leadingAvatarSize: '2xs',
         trailingIcon: 'size-5'
       },
-      lg: {
+      'lg': {
         base: 'px-3 py-2 text-sm gap-2',
         leadingIcon: 'size-5',
         leadingAvatarSize: '2xs',
         trailingIcon: 'size-5'
       },
-      xl: {
+      'xl': {
         base: 'px-3 py-2 text-base gap-2',
         leadingIcon: 'size-6',
         leadingAvatarSize: 'xs',
@@ -131,6 +143,14 @@ export default (options: Required<ModuleOptions>) => ({
     color: 'neutral',
     variant: 'link',
     class: 'text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted outline-inverted/25 focus-visible:outline-3'
+  }, {
+    size: '3xs',
+    square: true,
+    class: 'p-0.5'
+  }, {
+    size: '2xs',
+    square: true,
+    class: 'p-1'
   }, {
     size: 'xs',
     square: true,

test/components/__snapshots__/Button-vue.spec.ts.snap

@@ -271,6 +271,20 @@ exports[`Button > renders with primary variant subtle correctly 1`] = `
 </button>"
 `;
 
+exports[`Button > renders with size 2xs correctly 1`] = `
+"<button type="button" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-1.5 py-1 text-[10px]/3 gap-1 rounded-sm text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
+  <!--v-if-->
+</button>"
+`;
+
+exports[`Button > renders with size 3xs correctly 1`] = `
+"<button type="button" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-1 py-0.5 text-[8px]/3 gap-1 rounded-sm text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
+  <!--v-if-->
+</button>"
+`;
+
 exports[`Button > renders with size lg correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>

test/components/__snapshots__/Button.spec.ts.snap

@@ -271,6 +271,20 @@ exports[`Button > renders with primary variant subtle correctly 1`] = `
 </button>"
 `;
 
+exports[`Button > renders with size 2xs correctly 1`] = `
+"<button type="button" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-1.5 py-1 text-[10px]/3 gap-1 rounded-sm text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
+  <!--v-if-->
+</button>"
+`;
+
+exports[`Button > renders with size 3xs correctly 1`] = `
+"<button type="button" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-1 py-0.5 text-[8px]/3 gap-1 rounded-sm text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+  <!--v-if--><span data-slot="label" class="truncate">Button</span>
+  <!--v-if-->
+</button>"
+`;
+
 exports[`Button > renders with size lg correctly 1`] = `
 "<button type="button" data-slot="base" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
   <!--v-if--><span data-slot="label" class="truncate">Button</span>

test/components/__snapshots__/FieldGroup-vue.spec.ts.snap

@@ -28,6 +28,30 @@ exports[`FieldGroup > renders with default slot correctly 1`] = `
 </div>"
 `;
 
+exports[`FieldGroup > renders with size 2xs correctly 1`] = `
+"<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary" autocomplete="off">
+    <!--v-if-->
+    <!--v-if-->
+  </div> <button type="button" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-1.5 py-1 text-[10px]/3 gap-1 rounded-sm text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+    <!--v-if--> Click me!
+    <!--v-if-->
+  </button>
+</div>"
+`;
+
+exports[`FieldGroup > renders with size 3xs correctly 1`] = `
+"<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary" autocomplete="off">
+    <!--v-if-->
+    <!--v-if-->
+  </div> <button type="button" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-1 py-0.5 text-[8px]/3 gap-1 rounded-sm text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+    <!--v-if--> Click me!
+    <!--v-if-->
+  </button>
+</div>"
+`;
+
 exports[`FieldGroup > renders with size lg correctly 1`] = `
 "<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
   <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base/5 gap-2 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary md:text-sm" autocomplete="off">

test/components/__snapshots__/FieldGroup.spec.ts.snap

@@ -28,6 +28,30 @@ exports[`FieldGroup > renders with default slot correctly 1`] = `
 </div>"
 `;
 
+exports[`FieldGroup > renders with size 2xs correctly 1`] = `
+"<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary" autocomplete="off">
+    <!--v-if-->
+    <!--v-if-->
+  </div> <button type="button" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-1.5 py-1 text-[10px]/3 gap-1 rounded-sm text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+    <!--v-if--> Click me!
+    <!--v-if-->
+  </button>
+</div>"
+`;
+
+exports[`FieldGroup > renders with size 3xs correctly 1`] = `
+"<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
+  <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary" autocomplete="off">
+    <!--v-if-->
+    <!--v-if-->
+  </div> <button type="button" data-slot="base" class="font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none focus-visible:z-[1] px-1 py-0.5 text-[8px]/3 gap-1 rounded-sm text-inverted bg-primary hover:bg-primary/75 active:bg-primary/75 disabled:bg-primary aria-disabled:bg-primary outline-primary/25 focus-visible:outline-3">
+    <!--v-if--> Click me!
+    <!--v-if-->
+  </button>
+</div>"
+`;
+
 exports[`FieldGroup > renders with size lg correctly 1`] = `
 "<div data-orientation="horizontal" class="relative inline-flex -space-x-px">
   <div data-slot="root" class="relative inline-flex items-center group has-focus-visible:z-[1]"><input type="text" data-slot="base" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base/5 gap-2 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary md:text-sm" autocomplete="off">