@mesob/ui 0.5.5 → 0.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mesob/ui",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -31,6 +31,11 @@
       "default": "./src/styles/themes.css",
       "import": "./src/styles/themes.css",
       "require": "./src/styles/themes.css"
+    },
+    "./styles/*": {
+      "default": "./src/styles/*",
+      "import": "./src/styles/*",
+      "require": "./src/styles/*"
     }
   },
   "files": [
@@ -40,7 +45,7 @@
   "dependencies": {
     "@base-ui/react": "^1.1.0",
     "@hookform/resolvers": "^5.2.2",
-    "@mesob/common": "0.5.5",
+    "@mesob/common": "0.5.7",
     "@tabler/icons-react": "^3.35.0",
     "@tanstack/react-table": "^8.21.3",
     "@tiptap/core": "^3.18.0",

package/src/styles/style-lyra.css

@@ -1,4 +1,111 @@
-@import './lyra/button.css';
+.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;
+  }
+
+}
+
 
 .style-lyra {
   /* MARK: Accordion */
@@ -388,7 +495,15 @@
 
   /* MARK: Card */
   .cn-card {
-    @apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-none py-2 text-xs/relaxed ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-2 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none;
+    @apply ring-foreground/10 bg-card text-card-foreground overflow-hidden rounded-none text-xs/relaxed ring-1 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none;
+  }
+
+  .cn-card:not([data-sectioned]) {
+    @apply py-0;
+  }
+
+  .cn-card[data-sectioned] {
+    @apply py-0;
   }
 
   .cn-card-with-border {
@@ -404,23 +519,147 @@
   }
 
   .cn-card-header {
-    @apply gap-1 rounded-none 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-none px-3 py-2 [.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 group-data-[size=sm]/card:text-sm;
+    @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-2;
   }
 
   .cn-card-footer {
-    @apply rounded-none border-t p-4 group-data-[size=sm]/card:p-3;
+    @apply rounded-none border-t px-3 py-2;
+  }
+
+  .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-2;
+  }
+
+  .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-2;
+  }
+
+  .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-2;
+  }
+
+  .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-2;
+  }
+
+  .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-2;
+  }
+
+  .cn-card[data-sectioned][data-size='xl'] [data-slot='card-footer'] {
+    @apply px-5 py-5;
   }
 
   /* MARK: Chart */

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 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-0;
+  }
+
+  .cn-card[data-sectioned] {
+    @apply py-0;
   }
 
   .cn-card-with-border {
@@ -437,23 +552,142 @@
   }
 
   .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 py-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-2;
   }
 
   .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 py-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-2;
+  }
+
+  .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-2;
+  }
+
+  .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-2;
+  }
+
+  .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-2;
+  }
+
+  .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-2;
+  }
+
+  .cn-card[data-sectioned][data-size='xl'] [data-slot='card-footer'] {
+    @apply px-5 py-5;
   }
 
   /* MARK: Carousel */