@mesob/ui 0.5.4 → 0.5.6

package/src/styles/style-nova.css

@@ -524,7 +524,15 @@
 
   /* MARK: Card */
   .cn-card {
-    @apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-2 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl;
+    @apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl text-sm ring-1 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl;
+  }
+
+  .cn-card:not([data-sectioned]) {
+    @apply py-2 has-data-[slot=card-footer]:pb-0;
+  }
+
+  .cn-card[data-sectioned] {
+    @apply gap-0 py-0;
   }
 
   .cn-card-with-border {
@@ -540,23 +548,146 @@
   }
 
   .cn-card-header {
-    @apply gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3;
+    @apply gap-1 items-start rounded-t-xl px-3 [.border-b]:pb-4 has-data-[slot=card-action]:gap-x-4 has-data-[slot=card-action]:gap-y-1;
+  }
+
+  .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description'])) {
+    @apply items-center py-1.5;
+  }
+
+  .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
+    .cn-card-title {
+    @apply flex items-center;
+  }
+
+  .cn-card[data-size='xs']
+    .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
+    .cn-card-title {
+    @apply min-h-6 leading-6;
+  }
+
+  .cn-card[data-size='sm']
+    .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
+    .cn-card-title {
+    @apply min-h-7 leading-7;
+  }
+
+  .cn-card[data-size='md']
+    .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
+    .cn-card-title {
+    @apply min-h-7 leading-7;
+  }
+
+  .cn-card[data-size='lg']
+    .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
+    .cn-card-title {
+    @apply min-h-8 leading-8;
+  }
+
+  .cn-card[data-size='xl']
+    .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
+    .cn-card-title {
+    @apply min-h-9 leading-9;
   }
 
   .cn-card-title {
-    @apply text-base leading-snug font-medium group-data-[size=sm]/card:text-sm;
+    @apply text-base leading-snug font-medium;
+  }
+
+  .cn-card[data-size='xs'] .cn-card-title {
+    @apply text-xs leading-tight;
+  }
+
+  .cn-card[data-size='sm'] .cn-card-title {
+    @apply text-sm font-medium;
+  }
+
+  .cn-card[data-size='lg'] .cn-card-title {
+    @apply text-lg;
+  }
+
+  .cn-card[data-size='xl'] .cn-card-title {
+    @apply text-xl;
   }
 
   .cn-card-description {
     @apply text-muted-foreground text-sm;
   }
 
+  .cn-card[data-size='xs'] .cn-card-description {
+    @apply text-xs;
+  }
+
   .cn-card-content {
-    @apply px-4 group-data-[size=sm]/card:px-3;
+    @apply px-4 py-4;
   }
 
   .cn-card-footer {
-    @apply bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3;
+    @apply bg-muted/50 rounded-b-xl border-t;
+  }
+
+  .cn-card:not([data-sectioned]) .cn-card-footer {
+    @apply p-3;
+  }
+
+  .cn-card[data-sectioned][data-size='xs'] [data-slot='card-header'] {
+    @apply px-2.5 py-2 has-data-[slot=card-action]:gap-x-3;
+  }
+
+  .cn-card[data-sectioned][data-size='xs'] [data-slot='card-content'] {
+    @apply px-2.5 py-3;
+  }
+
+  .cn-card[data-sectioned][data-size='xs'] [data-slot='card-footer'] {
+    @apply px-2.5 py-2;
+  }
+
+  .cn-card[data-sectioned][data-size='sm'] [data-slot='card-header'] {
+    @apply px-2.5 py-2 has-data-[slot=card-action]:gap-x-3;
+  }
+
+  .cn-card[data-sectioned][data-size='sm'] [data-slot='card-content'] {
+    @apply px-2.5 py-3;
+  }
+
+  .cn-card[data-sectioned][data-size='sm'] [data-slot='card-footer'] {
+    @apply px-2.5 py-2;
+  }
+
+  .cn-card[data-sectioned][data-size='md'] [data-slot='card-header'] {
+    @apply px-3 py-2 has-data-[slot=card-action]:gap-x-4;
+  }
+
+  .cn-card[data-sectioned][data-size='md'] [data-slot='card-content'] {
+    @apply px-3 py-4;
+  }
+
+  .cn-card[data-sectioned][data-size='md'] [data-slot='card-footer'] {
+    @apply px-3 py-2;
+  }
+
+  .cn-card[data-sectioned][data-size='lg'] [data-slot='card-header'] {
+    @apply px-4 py-4 has-data-[slot=card-action]:gap-x-4;
+  }
+
+  .cn-card[data-sectioned][data-size='lg'] [data-slot='card-content'] {
+    @apply px-4 py-5;
+  }
+
+  .cn-card[data-sectioned][data-size='lg'] [data-slot='card-footer'] {
+    @apply px-4 py-4;
+  }
+
+  .cn-card[data-sectioned][data-size='xl'] [data-slot='card-header'] {
+    @apply px-5 py-5 has-data-[slot=card-action]:gap-x-4;
+  }
+
+  .cn-card[data-sectioned][data-size='xl'] [data-slot='card-content'] {
+    @apply px-5 py-6;
+  }
+
+  .cn-card[data-sectioned][data-size='xl'] [data-slot='card-footer'] {
+    @apply px-5 py-5;
   }
 
   /* MARK: Carousel */

package/src/styles/style-vega.css

@@ -520,7 +520,15 @@
 
   /* MARK: Card */
   .cn-card {
-    @apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl;
+    @apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl;
+  }
+
+  .cn-card:not([data-sectioned]) {
+    @apply py-4;
+  }
+
+  .cn-card[data-sectioned] {
+    @apply gap-0 py-0;
   }
 
   .cn-card-with-border {
@@ -536,23 +544,146 @@
   }
 
   .cn-card-header {
-    @apply gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-4 [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4;
+    @apply gap-1 items-start rounded-t-xl px-3 [.border-b]:pb-4 has-data-[slot=card-action]:gap-x-4 has-data-[slot=card-action]:gap-y-1;
+  }
+
+  .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description'])) {
+    @apply items-center py-1.5;
+  }
+
+  .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
+    .cn-card-title {
+    @apply flex items-center;
+  }
+
+  .cn-card[data-size='xs']
+    .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
+    .cn-card-title {
+    @apply min-h-6 leading-6;
+  }
+
+  .cn-card[data-size='sm']
+    .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
+    .cn-card-title {
+    @apply min-h-7 leading-7;
+  }
+
+  .cn-card[data-size='md']
+    .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
+    .cn-card-title {
+    @apply min-h-7 leading-7;
+  }
+
+  .cn-card[data-size='lg']
+    .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
+    .cn-card-title {
+    @apply min-h-8 leading-8;
+  }
+
+  .cn-card[data-size='xl']
+    .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
+    .cn-card-title {
+    @apply min-h-9 leading-9;
   }
 
   .cn-card-title {
-    @apply text-base leading-normal font-medium group-data-[size=sm]/card:text-sm;
+    @apply text-base leading-normal font-medium;
+  }
+
+  .cn-card[data-size='xs'] .cn-card-title {
+    @apply text-xs leading-tight;
+  }
+
+  .cn-card[data-size='sm'] .cn-card-title {
+    @apply text-sm font-medium;
+  }
+
+  .cn-card[data-size='lg'] .cn-card-title {
+    @apply text-lg;
+  }
+
+  .cn-card[data-size='xl'] .cn-card-title {
+    @apply text-xl;
   }
 
   .cn-card-description {
     @apply text-muted-foreground text-sm;
   }
 
+  .cn-card[data-size='xs'] .cn-card-description {
+    @apply text-xs;
+  }
+
   .cn-card-content {
-    @apply px-4 group-data-[size=sm]/card:px-4;
+    @apply px-4 py-4;
   }
 
   .cn-card-footer {
-    @apply rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4;
+    @apply rounded-b-xl px-3;
+  }
+
+  .cn-card:not([data-sectioned]) .cn-card-footer {
+    @apply pt-3;
+  }
+
+  .cn-card[data-sectioned][data-size='xs'] [data-slot='card-header'] {
+    @apply px-2.5 py-2 has-data-[slot=card-action]:gap-x-3;
+  }
+
+  .cn-card[data-sectioned][data-size='xs'] [data-slot='card-content'] {
+    @apply px-2.5 py-3;
+  }
+
+  .cn-card[data-sectioned][data-size='xs'] [data-slot='card-footer'] {
+    @apply px-2.5 py-2;
+  }
+
+  .cn-card[data-sectioned][data-size='sm'] [data-slot='card-header'] {
+    @apply px-2.5 py-2 has-data-[slot=card-action]:gap-x-3;
+  }
+
+  .cn-card[data-sectioned][data-size='sm'] [data-slot='card-content'] {
+    @apply px-2.5 py-3;
+  }
+
+  .cn-card[data-sectioned][data-size='sm'] [data-slot='card-footer'] {
+    @apply px-2.5 py-2;
+  }
+
+  .cn-card[data-sectioned][data-size='md'] [data-slot='card-header'] {
+    @apply px-3 py-2 has-data-[slot=card-action]:gap-x-4;
+  }
+
+  .cn-card[data-sectioned][data-size='md'] [data-slot='card-content'] {
+    @apply px-3 py-4;
+  }
+
+  .cn-card[data-sectioned][data-size='md'] [data-slot='card-footer'] {
+    @apply px-3 py-2;
+  }
+
+  .cn-card[data-sectioned][data-size='lg'] [data-slot='card-header'] {
+    @apply px-4 py-4 has-data-[slot=card-action]:gap-x-4;
+  }
+
+  .cn-card[data-sectioned][data-size='lg'] [data-slot='card-content'] {
+    @apply px-4 py-5;
+  }
+
+  .cn-card[data-sectioned][data-size='lg'] [data-slot='card-footer'] {
+    @apply px-4 py-4;
+  }
+
+  .cn-card[data-sectioned][data-size='xl'] [data-slot='card-header'] {
+    @apply px-5 py-5 has-data-[slot=card-action]:gap-x-4;
+  }
+
+  .cn-card[data-sectioned][data-size='xl'] [data-slot='card-content'] {
+    @apply px-5 py-6;
+  }
+
+  .cn-card[data-sectioned][data-size='xl'] [data-slot='card-footer'] {
+    @apply px-5 py-5;
   }
 
   /* MARK: Carousel */

package/src/styles/themes.css

@@ -13,6 +13,37 @@
     scroll-behavior: auto;
     transition-duration: 0.01ms;
   }
+
+  .cn-spinner {
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+  }
+
+  .cn-toast,
+  .cn-toast::before,
+  .cn-toast::after {
+    animation-duration: 0.2s;
+    transition-duration: 0.2s;
+  }
+
+  .toaster [data-sonner-toast] {
+    /* biome-ignore lint/complexity/noImportantStyles: override Sonner reduce-motion reset */
+    transition-property: transform, opacity, height, box-shadow !important;
+    /* biome-ignore lint/complexity/noImportantStyles: override Sonner reduce-motion reset */
+    transition-duration: 0.2s !important;
+    /* biome-ignore lint/complexity/noImportantStyles: override Sonner reduce-motion reset */
+    transition-timing-function: ease !important;
+  }
+
+  .toaster [data-sonner-toast] > * {
+    /* biome-ignore lint/complexity/noImportantStyles: override Sonner reduce-motion reset */
+    transition: opacity 0.2s ease !important;
+  }
+
+  .toaster .sonner-loading-bar {
+    /* biome-ignore lint/complexity/noImportantStyles: override Sonner reduce-motion reset */
+    transition: width 0.2s linear !important;
+  }
 }
 
 /* MARK: AI Trigger (global; outside theme layers for consistent priority) */

package/src/styles/lyra/button.css

@@ -1,107 +0,0 @@
-.style-lyra {
-  /* MARK: Button */
-  .cn-button {
-    @apply focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-none border border-transparent bg-clip-padding text-xs font-medium focus-visible:ring-1 aria-invalid:ring-1 [&_svg:not([class*='size-'])]:size-4;
-  }
-
-  .cn-button-variant-default {
-    @apply bg-primary text-primary-foreground [a]:hover:bg-primary/80;
-  }
-
-  .cn-button-variant-outline {
-    @apply border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground;
-  }
-
-  .cn-button-variant-secondary {
-    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
-  }
-
-  .cn-button-variant-ghost {
-    @apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
-  }
-
-  .cn-button-variant-destructive {
-    @apply bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30;
-  }
-
-  .cn-button-variant-link {
-    @apply text-primary underline-offset-4 hover:underline;
-  }
-
-  .cn-button-variant-light {
-    @apply bg-primary/12 text-primary hover:bg-primary/18 dark:bg-primary/20 dark:hover:bg-primary/28;
-  }
-
-  .cn-button-variant-destructive-filled {
-    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
-  }
-
-  .cn-dropdown-button-shell {
-    @apply inline-flex w-fit items-stretch isolate overflow-hidden align-middle;
-  }
-
-  .cn-dropdown-button-main {
-    @apply rounded-r-none! border-r-0;
-  }
-
-  .cn-dropdown-button-trigger {
-    @apply relative -ml-px rounded-l-none! border-l-0;
-  }
-
-  .cn-dropdown-button-trigger::before {
-    @apply bg-border absolute top-1 bottom-1 left-0 w-px content-[''];
-  }
-
-  .cn-dropdown-button-trigger[data-size='xs']::before {
-    @apply top-0.5 bottom-0.5;
-  }
-
-  .cn-dropdown-button-trigger[data-size='sm']::before {
-    @apply top-0.5 bottom-0.5;
-  }
-
-  .cn-dropdown-button-variant-danger {
-    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
-  }
-
-  .cn-button-size-xl {
-    @apply h-10 gap-2 px-4.5 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4 text-sm;
-  }
-
-  .cn-button-size-icon-xl {
-    @apply size-10 [&_svg:not([class*='size-'])]:size-4.5;
-  }
-
-  .cn-button-size-xs {
-    @apply h-6 gap-1 rounded-none px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3;
-  }
-
-  .cn-button-size-sm {
-    @apply h-7 gap-1.5 rounded-none px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3.5;
-  }
-
-  .cn-button-size-default {
-    @apply h-8 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5;
-  }
-
-  .cn-button-size-lg {
-    @apply h-9 gap-2 px-3.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3;
-  }
-
-  .cn-button-size-icon-xs {
-    @apply size-6 rounded-none [&_svg:not([class*='size-'])]:size-3;
-  }
-
-  .cn-button-size-icon-sm {
-    @apply size-7 rounded-none [&_svg:not([class*='size-'])]:size-3.5;
-  }
-
-  .cn-button-size-icon {
-    @apply size-8 [&_svg:not([class*='size-'])]:size-4;
-  }
-
-  .cn-button-size-icon-lg {
-    @apply size-9 [&_svg:not([class*='size-'])]:size-4;
-  }
-
-}

package/src/styles/maia/button.css

@@ -1,107 +0,0 @@
-.style-maia {
-  /* MARK: Button */
-  .cn-button {
-    @apply focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4;
-  }
-
-  .cn-button-variant-default {
-    @apply bg-primary text-primary-foreground hover:bg-primary/80;
-  }
-
-  .cn-button-variant-outline {
-    @apply border-border bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground;
-  }
-
-  .cn-button-variant-secondary {
-    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
-  }
-
-  .cn-button-variant-ghost {
-    @apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
-  }
-
-  .cn-button-variant-destructive {
-    @apply bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30;
-  }
-
-  .cn-button-variant-link {
-    @apply text-primary underline-offset-4 hover:underline;
-  }
-
-  .cn-button-variant-light {
-    @apply bg-primary/12 text-primary hover:bg-primary/18 dark:bg-primary/20 dark:hover:bg-primary/28;
-  }
-
-  .cn-button-variant-destructive-filled {
-    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
-  }
-
-  .cn-dropdown-button-shell {
-    @apply inline-flex w-fit items-stretch isolate overflow-hidden align-middle;
-  }
-
-  .cn-dropdown-button-main {
-    @apply rounded-r-none! border-r-0;
-  }
-
-  .cn-dropdown-button-trigger {
-    @apply relative -ml-px rounded-l-none! border-l-0;
-  }
-
-  .cn-dropdown-button-trigger::before {
-    @apply bg-border/70 absolute top-2 bottom-2 left-0 w-px content-[''];
-  }
-
-  .cn-dropdown-button-trigger[data-size='xs']::before {
-    @apply top-0.5 bottom-0.5;
-  }
-
-  .cn-dropdown-button-trigger[data-size='sm']::before {
-    @apply top-1 bottom-1;
-  }
-
-  .cn-dropdown-button-variant-danger {
-    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
-  }
-
-  .cn-button-size-xl {
-    @apply h-12 gap-2 px-7 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 text-lg;
-  }
-
-  .cn-button-size-icon-xl {
-    @apply size-12;
-  }
-
-  .cn-button-size-xs {
-    @apply h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3;
-  }
-
-  .cn-button-size-sm {
-    @apply h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2;
-  }
-
-  .cn-button-size-default {
-    @apply h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5;
-  }
-
-  .cn-button-size-lg {
-    @apply h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3;
-  }
-
-  .cn-button-size-icon-xs {
-    @apply size-6 [&_svg:not([class*='size-'])]:size-3;
-  }
-
-  .cn-button-size-icon-sm {
-    @apply size-8;
-  }
-
-  .cn-button-size-icon {
-    @apply size-9;
-  }
-
-  .cn-button-size-icon-lg {
-    @apply size-10;
-  }
-
-}

package/src/styles/mira/button.css

@@ -1,107 +0,0 @@
-.style-mira {
-  /* MARK: Button */
-  .cn-button {
-    @apply focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-2 aria-invalid:ring-2 [&_svg:not([class*='size-'])]:size-4;
-  }
-
-  .cn-button-variant-default {
-    @apply bg-primary text-primary-foreground hover:bg-primary/80;
-  }
-
-  .cn-button-variant-outline {
-    @apply border-border dark:bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground;
-  }
-
-  .cn-button-variant-secondary {
-    @apply bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
-  }
-
-  .cn-button-variant-ghost {
-    @apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
-  }
-
-  .cn-button-variant-destructive {
-    @apply bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30;
-  }
-
-  .cn-button-variant-link {
-    @apply text-primary underline-offset-4 hover:underline;
-  }
-
-  .cn-button-variant-light {
-    @apply bg-primary/12 text-primary hover:bg-primary/18 dark:bg-primary/20 dark:hover:bg-primary/28;
-  }
-
-  .cn-button-variant-destructive-filled {
-    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
-  }
-
-  .cn-dropdown-button-shell {
-    @apply inline-flex w-fit items-stretch isolate overflow-hidden align-middle;
-  }
-
-  .cn-dropdown-button-main {
-    @apply rounded-r-none! border-r-0;
-  }
-
-  .cn-dropdown-button-trigger {
-    @apply relative -ml-px rounded-l-none! border-l-0;
-  }
-
-  .cn-dropdown-button-trigger::before {
-    @apply bg-border/80 absolute top-1 bottom-1 left-0 w-px content-[''];
-  }
-
-  .cn-dropdown-button-trigger[data-size='xs']::before {
-    @apply top-0.5 bottom-0.5;
-  }
-
-  .cn-dropdown-button-trigger[data-size='sm']::before {
-    @apply top-0.5 bottom-0.5;
-  }
-
-  .cn-dropdown-button-variant-danger {
-    @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
-  }
-
-  .cn-button-size-xl {
-    @apply h-12 gap-2 px-7 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 text-lg;
-  }
-
-  .cn-button-size-icon-xl {
-    @apply size-12;
-  }
-
-  .cn-button-size-xs {
-    @apply h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5;
-  }
-
-  .cn-button-size-sm {
-    @apply h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3;
-  }
-
-  .cn-button-size-default {
-    @apply h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5;
-  }
-
-  .cn-button-size-lg {
-    @apply h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4;
-  }
-
-  .cn-button-size-icon-xs {
-    @apply size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5;
-  }
-
-  .cn-button-size-icon-sm {
-    @apply size-6 [&_svg:not([class*='size-'])]:size-3;
-  }
-
-  .cn-button-size-icon {
-    @apply size-7 [&_svg:not([class*='size-'])]:size-3.5;
-  }
-
-  .cn-button-size-icon-lg {
-    @apply size-8 [&_svg:not([class*='size-'])]:size-4;
-  }
-
-}