@mesob/ui 0.3.4 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mesob/ui",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -71,6 +71,7 @@
     "motion": "^12.23.25",
     "next-themes": "^0.4.6",
     "react-day-picker": "^9.11.2",
+    "react-easy-crop": "^5.5.3",
     "react-hook-form": "^7.66.1",
     "react-resizable-panels": "^3.0.6",
     "react-use": "^17.6.0",

package/src/styles/style-lyra.css

@@ -1625,28 +1625,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 dark:bg-input/30 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-none border-2 border-dashed px-3 py-6 text-xs transition-colors outline-none focus-within:ring-1 data-[dragging=true]:border-ring data-[dragging=true]:bg-input/50;
+  .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-none border px-3 py-2 text-left text-xs transition-colors outline-none focus-visible:ring-1;
   }
 
-  .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-none border bg-background;
   }
 
-  .cn-file-input-icon {
-    @apply size-8;
+  .cn-file-input-preview {
+    @apply border-input bg-background size-11 shrink-0 overflow-hidden rounded-none border;
   }
 
-  .cn-file-input-title {
-    @apply text-xs;
+  .cn-file-input-body {
+    @apply flex min-w-0 flex-1 flex-col;
   }
 
-  .cn-file-input-accept {
-    @apply text-xs opacity-70;
+  .cn-file-input-placeholder,
+  .cn-file-input-value {
+    @apply truncate text-xs 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-trigger {
+    @apply text-muted-foreground flex size-8 items-center justify-center rounded-none border bg-background;
   }
 
   .cn-file-input-list {
@@ -1673,8 +1686,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-background hover:bg-accent/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-none border-2 border-dashed p-4 transition-colors outline-none focus-within:ring-1 data-[dragging=true]:border-ring data-[dragging=true]:bg-accent/20;
+  }
+
+  .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-none 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-background flex items-center justify-between rounded-none border px-3 py-2 text-xs;
+  }
+
+  .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-none border-2;
+  }
+
+  .cn-file-upload-prompt {
+    @apply items-start;
+  }
+
+  .cn-file-upload-icon {
+    @apply border-input bg-background rounded-none border;
+  }
+
+  .cn-file-upload-button {
+    @apply shrink-0;
+  }
+
+  .cn-file-upload-item {
+    @apply border-input bg-background rounded-none;
+  }
+
+  .cn-file-upload-preview {
+    @apply border-input bg-background rounded-none border;
+  }
+
+  .cn-file-upload-item-icon {
+    @apply border-input bg-background rounded-none border;
+  }
+
+  .cn-file-upload-empty {
+    @apply border-input bg-background rounded-none;
+  }
+
+  /* MARK: Image Upload */
+  .cn-image-upload {
+    @apply rounded-none;
+  }
+
+  .cn-image-upload-dropzone {
+    @apply border-input bg-background rounded-none border-2;
+  }
+
+  .cn-image-upload-preview {
+    @apply border-input bg-background rounded-none border;
+  }
+
+  .cn-image-upload-sidebar {
+    @apply text-xs;
+  }
+
+  .cn-image-upload-placeholder {
+    @apply border-input bg-background rounded-none border border-dashed;
+  }
+
+  .cn-image-upload-placeholder-icon {
+    @apply border-input bg-background rounded-none border;
   }
 
   /* MARK: Animated Tabs */

package/src/styles/style-maia.css

@@ -1671,28 +1671,41 @@
     @apply w-full space-y-3 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50;
   }
 
-  .cn-file-input-dropzone {
-    @apply border-input bg-input/30 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-2xl border-2 border-dashed px-5 py-7 text-sm transition-colors outline-none focus-within:ring-[3px] data-[dragging=true]:border-ring data-[dragging=true]:bg-input/50;
+  .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-2xl border px-4 py-3 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-9 shrink-0 items-center justify-center rounded-xl border bg-muted/30;
   }
 
-  .cn-file-input-icon {
-    @apply size-8;
+  .cn-file-input-preview {
+    @apply border-input bg-input/15 size-14 shrink-0 overflow-hidden rounded-xl 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-9 items-center justify-center rounded-xl border bg-muted/30;
   }
 
   .cn-file-input-list {
@@ -1719,8 +1732,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-3 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-2xl border-2 border-dashed p-5 transition-colors outline-none focus-within:ring-[3px] 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-5 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-xl border;
+  }
+
+  .cn-file-drop-input-preview-actions {
+    @apply absolute top-4 right-4 flex gap-2;
+  }
+
+  .cn-file-drop-input-list {
+    @apply space-y-3;
+  }
+
+  .cn-file-drop-input-item {
+    @apply border-input bg-input/20 flex items-center justify-between rounded-2xl border px-4 py-3 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-2xl border-2;
+  }
+
+  .cn-file-upload-prompt {
+    @apply items-start;
+  }
+
+  .cn-file-upload-icon {
+    @apply border-input bg-input/30 rounded-xl border;
+  }
+
+  .cn-file-upload-button {
+    @apply shrink-0;
+  }
+
+  .cn-file-upload-item {
+    @apply border-input bg-input/30 rounded-2xl;
+  }
+
+  .cn-file-upload-preview {
+    @apply border-input bg-input/15 rounded-xl border;
+  }
+
+  .cn-file-upload-item-icon {
+    @apply border-input bg-background rounded-lg border;
+  }
+
+  .cn-file-upload-empty {
+    @apply border-input bg-input/15 rounded-2xl;
+  }
+
+  /* MARK: Image Upload */
+  .cn-image-upload {
+    @apply rounded-2xl;
+  }
+
+  .cn-image-upload-dropzone {
+    @apply border-input bg-background rounded-2xl border-2;
+  }
+
+  .cn-image-upload-preview {
+    @apply border-input bg-input/30 rounded-xl border;
+  }
+
+  .cn-image-upload-sidebar {
+    @apply text-sm;
+  }
+
+  .cn-image-upload-placeholder {
+    @apply border-input bg-input/15 rounded-xl border border-dashed;
+  }
+
+  .cn-image-upload-placeholder-icon {
+    @apply border-input bg-background rounded-xl border;
   }
 
   /* MARK: Animated Tabs */

package/src/styles/style-mira.css

@@ -1673,28 +1673,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/30 relative flex min-h-[9rem] w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed px-3 py-6 text-xs/relaxed transition-colors outline-none focus-within:ring-2 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/30 flex min-h-9 w-full items-center gap-2 rounded-lg border px-3 py-2 text-left text-xs/relaxed transition-colors outline-none focus-visible:ring-2;
   }
 
-  .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-7 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-10 shrink-0 overflow-hidden rounded-md border;
   }
 
-  .cn-file-input-title {
-    @apply text-xs/relaxed;
+  .cn-file-input-body {
+    @apply flex min-w-0 flex-1 flex-col;
+  }
+
+  .cn-file-input-placeholder,
+  .cn-file-input-value {
+    @apply truncate text-xs font-medium;
+  }
+
+  .cn-file-input-meta {
+    @apply text-muted-foreground text-[0.625rem];
+  }
+
+  .cn-file-input-actions {
+    @apply flex items-center gap-1;
   }
 
-  .cn-file-input-accept {
-    @apply text-[0.625rem] opacity-70;
+  .cn-file-input-trigger {
+    @apply text-muted-foreground flex size-7 items-center justify-center rounded-md border bg-muted/30;
   }
 
   .cn-file-input-list {
@@ -1721,8 +1734,127 @@
     @apply text-muted-foreground text-[0.625rem] 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/30 relative flex min-h-[11rem] w-full cursor-pointer flex-col items-center justify-center rounded-lg border-2 border-dashed p-3 transition-colors outline-none focus-within:ring-2 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-3 text-left;
+  }
+
+  .cn-file-drop-input-icon {
+    @apply size-9 shrink-0;
+  }
+
+  .cn-file-drop-input-title {
+    @apply text-foreground text-lg font-medium;
+  }
+
+  .cn-file-drop-input-description {
+    @apply text-muted-foreground mt-1 text-sm;
+  }
+
+  .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-xs/relaxed;
+  }
+
+  .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-[0.625rem] tabular-nums;
+  }
+
+  /* MARK: File Upload */
+  .cn-file-upload {
+    @apply border-input bg-background rounded-lg border-2 text-xs/relaxed;
+  }
+
+  .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 text-xs/relaxed;
+  }
+
+  .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-xs/relaxed;
+  }
+
+  .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 */