@mesob/ui 0.5.4 → 0.5.6

package/src/styles/style-maia.css

@@ -1,4 +1,111 @@
-@import './maia/button.css';
+.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;
+  }
+
+}
+
 
 .style-maia {
   /* MARK: Accordion */
@@ -421,7 +528,15 @@
 
   /* MARK: Card */
   .cn-card {
-    @apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-2xl py-4 text-sm 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-2xl 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-4;
+  }
+
+  .cn-card[data-sectioned] {
+    @apply gap-0 py-0;
   }
 
   .cn-card-with-border {
@@ -437,23 +552,146 @@
   }
 
   .cn-card-header {
-    @apply gap-2 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-2 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-2;
+  }
+
+  .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 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 has-data-[slot=card-action]:gap-y-2;
+  }
+
+  .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 has-data-[slot=card-action]:gap-y-2;
+  }
+
+  .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 has-data-[slot=card-action]:gap-y-2;
+  }
+
+  .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 has-data-[slot=card-action]:gap-y-2;
+  }
+
+  .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 has-data-[slot=card-action]:gap-y-2;
+  }
+
+  .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-mira.css

@@ -1,4 +1,111 @@
-@import './mira/button.css';
+.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;
+  }
+
+}
+
 
 .style-mira {
   /* MARK: Accordion */
@@ -421,7 +528,15 @@
 
   /* MARK: Card */
   .cn-card {
-    @apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-lg py-2 text-xs/relaxed ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg;
+    @apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-lg text-xs/relaxed ring-1 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg;
+  }
+
+  .cn-card:not([data-sectioned]) {
+    @apply py-2;
+  }
+
+  .cn-card[data-sectioned] {
+    @apply gap-0 py-0;
   }
 
   .cn-card-with-border {
@@ -437,23 +552,151 @@
   }
 
   .cn-card-header {
-    @apply gap-1 rounded-t-lg 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-lg 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-sm 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-xs font-medium;
+  }
+
+  .cn-card[data-size='md'] .cn-card-title {
+    @apply text-sm;
+  }
+
+  .cn-card[data-size='lg'] .cn-card-title {
+    @apply text-base;
+  }
+
+  .cn-card[data-size='xl'] .cn-card-title {
+    @apply text-lg;
+  }
+
   .cn-card-description {
     @apply text-muted-foreground text-xs/relaxed;
   }
 
+  .cn-card[data-size='lg'] .cn-card-description,
+  .cn-card[data-size='xl'] .cn-card-description {
+    @apply text-sm;
+  }
+
   .cn-card-content {
-    @apply px-4 group-data-[size=sm]/card:px-3;
+    @apply px-4 py-4;
   }
 
   .cn-card-footer {
-    @apply rounded-b-lg px-4 group-data-[size=sm]/card:px-3 [.border-t]:pt-4 group-data-[size=sm]/card:[.border-t]:pt-3;
+    @apply rounded-b-lg 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 */