@mesob/ui 0.3.4 → 0.4.0

package/src/styles/style-nova.css

@@ -421,6 +421,34 @@
     @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.5 bottom-1.5 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;
   }
@@ -1746,28 +1774,41 @@
     @apply w-full space-y-2 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50;
   }
 
-  .cn-file-input-dropzone {
-    @apply border-input bg-input/20 dark:bg-input/30 hover:bg-input/30 dark:hover:bg-input/50 focus-within:border-ring focus-within:ring-ring/50 relative flex min-h-[9rem] w-full cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed px-4 py-6 text-sm transition-colors outline-none focus-within:ring-3 data-[dragging=true]:border-ring data-[dragging=true]:bg-input/30;
+  .cn-file-input-hidden-input {
+    @apply sr-only;
   }
 
-  .cn-file-input-hidden-input {
-    @apply absolute inset-0 cursor-pointer opacity-0;
+  .cn-file-input-root {
+    @apply border-input bg-background hover:bg-accent/40 focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-10 w-full items-center gap-3 rounded-lg border px-3 py-2 text-left transition-colors outline-none focus-visible:ring-3;
   }
 
-  .cn-file-input-prompt {
-    @apply text-muted-foreground flex flex-col items-center gap-2 text-center;
+  .cn-file-input-section {
+    @apply text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-md border bg-muted/30;
   }
 
-  .cn-file-input-icon {
-    @apply size-8;
+  .cn-file-input-preview {
+    @apply border-input bg-input/10 size-11 shrink-0 overflow-hidden rounded-md border;
   }
 
-  .cn-file-input-title {
-    @apply text-sm;
+  .cn-file-input-body {
+    @apply flex min-w-0 flex-1 flex-col;
+  }
+
+  .cn-file-input-placeholder,
+  .cn-file-input-value {
+    @apply truncate text-sm font-medium;
+  }
+
+  .cn-file-input-meta {
+    @apply text-muted-foreground text-xs;
   }
 
-  .cn-file-input-accept {
-    @apply text-xs opacity-70;
+  .cn-file-input-actions {
+    @apply flex items-center gap-1;
+  }
+
+  .cn-file-input-trigger {
+    @apply text-muted-foreground flex size-8 items-center justify-center rounded-md border bg-muted/30;
   }
 
   .cn-file-input-list {
@@ -1775,7 +1816,7 @@
   }
 
   .cn-file-input-item {
-    @apply border-input bg-input/20 dark:bg-input/30 flex items-center justify-between rounded-xl border px-4 py-2 text-sm;
+    @apply border-input bg-input/20 dark:bg-input/30 flex items-center justify-between rounded-lg border px-3 py-2 text-sm;
   }
 
   .cn-file-input-item-left {
@@ -1794,8 +1835,127 @@
     @apply text-muted-foreground text-xs tabular-nums;
   }
 
-  .cn-file-input-item-remove {
-    @apply hover:bg-accent transition-colors;
+  /* MARK: File Drop Input */
+  .cn-file-drop-input-wrapper {
+    @apply w-full space-y-2 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50;
+  }
+
+  .cn-file-drop-input-dropzone {
+    @apply border-input bg-input/10 hover:bg-input/20 focus-within:border-ring focus-within:ring-ring/50 relative flex min-h-[12rem] w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-4 transition-colors outline-none focus-within:ring-3 data-[dragging=true]:border-ring data-[dragging=true]:bg-input/30;
+  }
+
+  .cn-file-drop-input-hidden-input {
+    @apply sr-only;
+  }
+
+  .cn-file-drop-input-prompt {
+    @apply text-muted-foreground flex items-center gap-4 text-left;
+  }
+
+  .cn-file-drop-input-icon {
+    @apply size-10 shrink-0;
+  }
+
+  .cn-file-drop-input-title {
+    @apply text-foreground text-xl font-medium;
+  }
+
+  .cn-file-drop-input-description {
+    @apply text-muted-foreground mt-1 text-base;
+  }
+
+  .cn-file-drop-input-single-preview {
+    @apply relative size-full;
+  }
+
+  .cn-file-drop-input-preview {
+    @apply border-input bg-background size-full overflow-hidden rounded-md border;
+  }
+
+  .cn-file-drop-input-preview-actions {
+    @apply absolute top-3 right-3 flex gap-2;
+  }
+
+  .cn-file-drop-input-list {
+    @apply space-y-2;
+  }
+
+  .cn-file-drop-input-item {
+    @apply border-input bg-input/20 flex items-center justify-between rounded-lg border px-3 py-2 text-sm;
+  }
+
+  .cn-file-drop-input-item-left {
+    @apply flex min-w-0 items-center gap-2;
+  }
+
+  .cn-file-drop-input-item-icon {
+    @apply text-muted-foreground size-4 shrink-0;
+  }
+
+  .cn-file-drop-input-item-name {
+    @apply truncate;
+  }
+
+  .cn-file-drop-input-item-size {
+    @apply text-muted-foreground text-xs tabular-nums;
+  }
+
+  /* MARK: File Upload */
+  .cn-file-upload {
+    @apply border-input bg-background rounded-lg border-2;
+  }
+
+  .cn-file-upload-prompt {
+    @apply items-start;
+  }
+
+  .cn-file-upload-icon {
+    @apply border-input bg-input/20 rounded-md border;
+  }
+
+  .cn-file-upload-button {
+    @apply shrink-0;
+  }
+
+  .cn-file-upload-item {
+    @apply border-input bg-input/20 rounded-lg;
+  }
+
+  .cn-file-upload-preview {
+    @apply border-input bg-input/10 rounded-md border;
+  }
+
+  .cn-file-upload-item-icon {
+    @apply border-input bg-background rounded-md border;
+  }
+
+  .cn-file-upload-empty {
+    @apply border-input bg-input/10 rounded-lg;
+  }
+
+  /* MARK: Image Upload */
+  .cn-image-upload {
+    @apply rounded-lg;
+  }
+
+  .cn-image-upload-dropzone {
+    @apply border-input bg-background rounded-lg border-2;
+  }
+
+  .cn-image-upload-preview {
+    @apply border-input bg-input/20 rounded-md border;
+  }
+
+  .cn-image-upload-sidebar {
+    @apply text-sm;
+  }
+
+  .cn-image-upload-placeholder {
+    @apply border-input bg-input/10 rounded-md border border-dashed;
+  }
+
+  .cn-image-upload-placeholder-icon {
+    @apply border-input bg-background rounded-md border;
   }
 
   /* MARK: Animated Tabs */

package/src/styles/style-vega.css

@@ -417,6 +417,34 @@
     @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.5 bottom-1.5 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;
   }
@@ -1742,28 +1770,41 @@
     @apply w-full space-y-2 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50;
   }
 
-  .cn-file-input-dropzone {
-    @apply border-input bg-input/20 dark:bg-input/30 hover:bg-input/30 dark:hover:bg-input/50 focus-within:border-ring focus-within:ring-ring/50 relative flex min-h-[9rem] w-full cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed px-4 py-6 text-sm transition-colors outline-none focus-within:ring-3 data-[dragging=true]:border-ring data-[dragging=true]:bg-input/30;
+  .cn-file-input-hidden-input {
+    @apply sr-only;
   }
 
-  .cn-file-input-hidden-input {
-    @apply absolute inset-0 cursor-pointer opacity-0;
+  .cn-file-input-root {
+    @apply border-input bg-background hover:bg-accent/40 focus-visible:border-ring focus-visible:ring-ring/50 flex min-h-11 w-full items-center gap-3 rounded-xl border px-3 py-2 text-left transition-colors outline-none focus-visible:ring-3;
   }
 
-  .cn-file-input-prompt {
-    @apply text-muted-foreground flex flex-col items-center gap-2 text-center;
+  .cn-file-input-section {
+    @apply text-muted-foreground flex size-8 shrink-0 items-center justify-center rounded-lg border bg-muted/30;
   }
 
-  .cn-file-input-icon {
-    @apply size-8;
+  .cn-file-input-preview {
+    @apply border-input bg-input/10 size-12 shrink-0 overflow-hidden rounded-lg border;
   }
 
-  .cn-file-input-title {
-    @apply text-sm;
+  .cn-file-input-body {
+    @apply flex min-w-0 flex-1 flex-col;
+  }
+
+  .cn-file-input-placeholder,
+  .cn-file-input-value {
+    @apply truncate text-sm font-medium;
+  }
+
+  .cn-file-input-meta {
+    @apply text-muted-foreground text-xs;
+  }
+
+  .cn-file-input-actions {
+    @apply flex items-center gap-1;
   }
 
-  .cn-file-input-accept {
-    @apply text-xs opacity-70;
+  .cn-file-input-trigger {
+    @apply text-muted-foreground flex size-8 items-center justify-center rounded-lg border bg-muted/30;
   }
 
   .cn-file-input-list {
@@ -1790,8 +1831,127 @@
     @apply text-muted-foreground text-xs tabular-nums;
   }
 
-  .cn-file-input-item-remove {
-    @apply hover:bg-accent transition-colors;
+  /* MARK: File Drop Input */
+  .cn-file-drop-input-wrapper {
+    @apply w-full space-y-2 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50;
+  }
+
+  .cn-file-drop-input-dropzone {
+    @apply border-input bg-input/10 hover:bg-input/20 focus-within:border-ring focus-within:ring-ring/50 relative flex min-h-[13rem] w-full cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed p-4 transition-colors outline-none focus-within:ring-3 data-[dragging=true]:border-ring data-[dragging=true]:bg-input/30;
+  }
+
+  .cn-file-drop-input-hidden-input {
+    @apply sr-only;
+  }
+
+  .cn-file-drop-input-prompt {
+    @apply text-muted-foreground flex items-center gap-4 text-left;
+  }
+
+  .cn-file-drop-input-icon {
+    @apply size-12 shrink-0;
+  }
+
+  .cn-file-drop-input-title {
+    @apply text-foreground text-2xl font-medium;
+  }
+
+  .cn-file-drop-input-description {
+    @apply text-muted-foreground mt-1 text-lg;
+  }
+
+  .cn-file-drop-input-single-preview {
+    @apply relative size-full;
+  }
+
+  .cn-file-drop-input-preview {
+    @apply border-input bg-background size-full overflow-hidden rounded-lg border;
+  }
+
+  .cn-file-drop-input-preview-actions {
+    @apply absolute top-4 right-4 flex gap-2;
+  }
+
+  .cn-file-drop-input-list {
+    @apply space-y-2;
+  }
+
+  .cn-file-drop-input-item {
+    @apply border-input bg-input/20 flex items-center justify-between rounded-xl border px-4 py-2 text-sm;
+  }
+
+  .cn-file-drop-input-item-left {
+    @apply flex min-w-0 items-center gap-2;
+  }
+
+  .cn-file-drop-input-item-icon {
+    @apply text-muted-foreground size-4 shrink-0;
+  }
+
+  .cn-file-drop-input-item-name {
+    @apply truncate;
+  }
+
+  .cn-file-drop-input-item-size {
+    @apply text-muted-foreground text-xs tabular-nums;
+  }
+
+  /* MARK: File Upload */
+  .cn-file-upload {
+    @apply border-input bg-background rounded-xl border-2;
+  }
+
+  .cn-file-upload-prompt {
+    @apply items-start;
+  }
+
+  .cn-file-upload-icon {
+    @apply border-input bg-input/20 rounded-lg border;
+  }
+
+  .cn-file-upload-button {
+    @apply shrink-0;
+  }
+
+  .cn-file-upload-item {
+    @apply border-input bg-input/20 rounded-xl;
+  }
+
+  .cn-file-upload-preview {
+    @apply border-input bg-input/10 rounded-lg border;
+  }
+
+  .cn-file-upload-item-icon {
+    @apply border-input bg-background rounded-md border;
+  }
+
+  .cn-file-upload-empty {
+    @apply border-input bg-input/10 rounded-xl;
+  }
+
+  /* MARK: Image Upload */
+  .cn-image-upload {
+    @apply rounded-xl;
+  }
+
+  .cn-image-upload-dropzone {
+    @apply border-input bg-background rounded-xl border-2;
+  }
+
+  .cn-image-upload-preview {
+    @apply border-input bg-input/20 rounded-lg border;
+  }
+
+  .cn-image-upload-sidebar {
+    @apply text-sm;
+  }
+
+  .cn-image-upload-placeholder {
+    @apply border-input bg-input/10 rounded-lg border border-dashed;
+  }
+
+  .cn-image-upload-placeholder-icon {
+    @apply border-input bg-background rounded-lg border;
   }
 
   /* MARK: Animated Tabs */

package/src/styles/themes.css

@@ -3,3 +3,14 @@
 @import "./style-maia.css" layer(base);
 @import "./style-lyra.css" layer(base);
 @import "./style-mira.css" layer(base);
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.01ms;
+    animation-iteration-count: 1;
+    scroll-behavior: auto;
+    transition-duration: 0.01ms;
+  }
+}