feat(ui): add xs button type

pkgs/clan-app/ui/src/components/Button/Button.css

@@ -1,17 +1,12 @@
 .button {
   @apply flex gap-2 shrink-0 items-center justify-center;
-  @apply px-4 py-2;
+  @apply h-[2.125rem] px-4 py-2 rounded-[0.1875rem];
-
-  height: theme(height.9);
-  border-radius: 3px;
 
   /* Add transition for smooth width animation */
   transition: width 0.5s ease 0.1s;
 
   &.s {
-    @apply px-3 py-1.5;
+    @apply h-[1.625rem] px-3 py-1.5 rounded-[0.125rem];
-    height: theme(height.7);
-    border-radius: 2px;
 
     &:has(> .icon-start):has(> .label) {
       @apply pl-2;
@@ -22,6 +17,18 @@
     }
   }
 
+  &.xs {
+    @apply h-[1.125rem] gap-0.5 p-2 rounded-[0.125rem];
+
+    &:has(> .icon-start):has(> .label) {
+      @apply pl-1.5;
+    }
+
+    &:has(> .icon-end):has(> .label) {
+      @apply pr-1.5;
+    }
+  }
+
   &.primary {
     @apply bg-inv-acc-4 fg-inv-1;
     @apply border border-solid border-inv-4;

pkgs/clan-app/ui/src/components/Button/Button.stories.tsx

@@ -8,7 +8,7 @@ const getCursorStyle = (el: Element) => window.getComputedStyle(el).cursor;
 
 const ButtonExamples: Component<ButtonProps> = (props) => (
   <>
-    <div class="grid w-fit grid-cols-4 gap-8">
+    <div class="grid w-fit grid-cols-6 gap-8">
       <div>
         <Button data-testid="default" {...props}>
           Label
@@ -19,6 +19,11 @@ const ButtonExamples: Component<ButtonProps> = (props) => (
           Label
         </Button>
       </div>
+      <div>
+        <Button data-testid="xsmall" size="xs" {...props}>
+          Label
+        </Button>
+      </div>
       <div>
         <Button data-testid="default-disabled" {...props} disabled={true}>
           Disabled
@@ -35,6 +40,18 @@ const ButtonExamples: Component<ButtonProps> = (props) => (
         </Button>
       </div>
 
+      <div>
+        <Button
+          data-testid="xsmall-disabled"
+          {...props}
+          disabled={true}
+          size="xs"
+        >
+          Disabled
+        </Button>
+      </div>
+
+
       <div>
         <Button data-testid="default-start-icon" {...props} startIcon="Flash">
           Label
@@ -50,6 +67,16 @@ const ButtonExamples: Component<ButtonProps> = (props) => (
           Label
         </Button>
       </div>
+      <div>
+        <Button
+          data-testid="xsmall-start-icon"
+          {...props}
+          startIcon="Flash"
+          size="xs"
+        >
+          Label
+        </Button>
+      </div>
       <div>
         <Button
           data-testid="default-disabled-start-icon"
@@ -72,6 +99,18 @@ const ButtonExamples: Component<ButtonProps> = (props) => (
         </Button>
       </div>
 
+      <div>
+        <Button
+          data-testid="xsmall-disabled-start-icon"
+          {...props}
+          startIcon="Flash"
+          size="xs"
+          disabled={true}
+        >
+          Disabled
+        </Button>
+      </div>
+
       <div>
         <Button data-testid="default-end-icon" {...props} endIcon="Flash">
           Label
@@ -87,6 +126,16 @@ const ButtonExamples: Component<ButtonProps> = (props) => (
           Label
         </Button>
       </div>
+      <div>
+        <Button
+          data-testid="xsmall-end-icon"
+          {...props}
+          endIcon="Flash"
+          size="xs"
+        >
+          Label
+        </Button>
+      </div>
       <div>
         <Button
           data-testid="default-disabled-end-icon"
@@ -108,12 +157,27 @@ const ButtonExamples: Component<ButtonProps> = (props) => (
           Disabled
         </Button>
       </div>
+      <div>
+        <Button
+          data-testid="xsmall-disabled-end-icon"
+          {...props}
+          endIcon="Flash"
+          size="xs"
+          disabled={true}
+        >
+          Disabled
+        </Button>
+      </div>
+
       <div>
         <Button data-testid="default-icon" {...props} icon="Flash" />
       </div>
       <div>
         <Button data-testid="small-icon" {...props} icon="Flash" size="s" />
       </div>
+      <div>
+        <Button data-testid="xsmall-icon" {...props} icon="Flash" size="xs" />
+      </div>
       <div>
         <Button
           data-testid="default-disabled-icon"
@@ -131,6 +195,15 @@ const ButtonExamples: Component<ButtonProps> = (props) => (
           size="s"
         />
       </div>
+      <div>
+        <Button
+          data-testid="xsmall-disabled-icon"
+          {...props}
+          icon="Flash"
+          disabled={true}
+          size="xs"
+        />
+      </div>
     </div>
   </>
 );

pkgs/clan-app/ui/src/components/Button/Button.tsx

@@ -7,7 +7,7 @@ import "./Button.css";
 import Icon, { IconVariant } from "@/src/components/Icon/Icon";
 import { Loader } from "@/src/components/Loader/Loader";
 
-export type Size = "default" | "s";
+export type Size = "default" | "s" | "xs";
 export type Hierarchy = "primary" | "secondary";
 
 export type Action = () => Promise<void>;
@@ -28,6 +28,7 @@ export interface ButtonProps
 const iconSizes: Record<Size, string> = {
   default: "1rem",
   s: "0.8125rem",
+  xs: "0.625rem",
 };
 
 export const Button = (props: ButtonProps) => {