ui-svelte 0.2.11 → 0.2.12

package/dist/form/css/image-cropper.css

@@ -1,14 +1,217 @@
 @layer components {
-	.image-cropper {
-		@apply flex flex-col gap-4 w-full;
+	.image-cropper-wrapper {
+		@apply relative inline-flex flex-col items-center gap-2;
+	}
+
+	.image-cropper-avatar {
+		@apply relative flex flex-col items-center justify-center;
+		@apply border-2 border-dashed cursor-pointer;
+		@apply transition-all duration-300;
+		@apply overflow-hidden;
+	}
+
+	.image-cropper-avatar.is-circle {
+		@apply rounded-full;
+	}
+
+	.image-cropper-avatar:not(.is-circle) {
+		@apply rounded-ui;
+	}
+
+	.image-cropper-avatar.is-xs {
+		@apply size-12;
+	}
+
+	.image-cropper-avatar.is-sm {
+		@apply size-16;
+	}
+
+	.image-cropper-avatar.is-md {
+		@apply size-24;
+	}
+
+	.image-cropper-avatar.is-lg {
+		@apply size-32;
+	}
+
+	.image-cropper-avatar.is-xl {
+		@apply size-40;
+	}
+
+	.image-cropper-avatar.is-soft {
+		&.is-primary {
+			@apply bg-on-primary/10 text-primary border-primary/30;
+		}
+		&.is-secondary {
+			@apply bg-on-secondary/10 text-secondary border-secondary/30;
+		}
+		&.is-muted {
+			@apply bg-muted/50 text-on-muted border-muted;
+		}
+		&.is-success {
+			@apply bg-on-success/10 text-success border-success/30;
+		}
+		&.is-info {
+			@apply bg-on-info/10 text-info border-info/30;
+		}
+		&.is-warning {
+			@apply bg-on-warning/10 text-warning border-warning/30;
+		}
+		&.is-danger {
+			@apply bg-on-danger/10 text-danger border-danger/30;
+		}
+	}
+
+	.image-cropper-avatar.is-outlined {
+		@apply bg-transparent;
+
+		&.is-primary {
+			@apply border-primary text-primary;
+		}
+		&.is-secondary {
+			@apply border-secondary text-secondary;
+		}
+		&.is-muted {
+			@apply border-muted text-on-muted;
+		}
+		&.is-success {
+			@apply border-success text-success;
+		}
+		&.is-info {
+			@apply border-info text-info;
+		}
+		&.is-warning {
+			@apply border-warning text-warning;
+		}
+		&.is-danger {
+			@apply border-danger text-danger;
+		}
+	}
+
+	.image-cropper-avatar.is-solid {
+		&.is-primary {
+			@apply bg-primary text-on-primary border-primary;
+		}
+		&.is-secondary {
+			@apply bg-secondary text-on-secondary border-secondary;
+		}
+		&.is-muted {
+			@apply bg-muted text-on-muted border-muted;
+		}
+		&.is-success {
+			@apply bg-success text-on-success border-success;
+		}
+		&.is-info {
+			@apply bg-info text-on-info border-info;
+		}
+		&.is-warning {
+			@apply bg-warning text-on-warning border-warning;
+		}
+		&.is-danger {
+			@apply bg-danger text-on-danger border-danger;
+		}
+	}
+
+	.image-cropper-avatar.is-ghost {
+		@apply bg-transparent border-transparent;
+
+		&.is-primary {
+			@apply text-primary;
+		}
+		&.is-secondary {
+			@apply text-secondary;
+		}
+		&.is-muted {
+			@apply text-on-muted;
+		}
+		&.is-success {
+			@apply text-success;
+		}
+		&.is-info {
+			@apply text-info;
+		}
+		&.is-warning {
+			@apply text-warning;
+		}
+		&.is-danger {
+			@apply text-danger;
+		}
+	}
+
+	.image-cropper-avatar:hover:not(.is-disabled) {
+		@apply border-solid;
+		@apply scale-105;
+	}
+
+	.image-cropper-avatar.is-disabled {
+		@apply opacity-50 cursor-not-allowed;
+	}
+
+	.image-cropper-avatar.is-error {
+		@apply border-danger;
+	}
+
+	.image-cropper-icon {
+		@apply size-6 opacity-70;
+	}
+
+	.image-cropper-avatar.is-xs .image-cropper-icon,
+	.image-cropper-avatar.is-sm .image-cropper-icon {
+		@apply size-4;
+	}
+
+	.image-cropper-avatar.is-lg .image-cropper-icon,
+	.image-cropper-avatar.is-xl .image-cropper-icon {
+		@apply size-8;
+	}
+
+	.image-cropper-placeholder {
+		@apply text-xs opacity-70 text-center mt-1;
+	}
+
+	.image-cropper-avatar.is-xs .image-cropper-placeholder,
+	.image-cropper-avatar.is-sm .image-cropper-placeholder {
+		@apply hidden;
+	}
+
+	.image-cropper-preview {
+		@apply absolute inset-0 w-full h-full object-cover;
+	}
+	.image-cropper-overlay-edit {
+		@apply absolute inset-0 flex items-center justify-center;
+		@apply bg-black/50 opacity-0 transition-opacity duration-300;
+		@apply text-white;
+	}
+
+	.image-cropper-avatar:hover .image-cropper-overlay-edit {
+		@apply opacity-100;
+	}
+
+	.image-cropper-actions {
+		@apply flex gap-1;
+	}
+	.image-cropper-modal {
+		@apply max-w-2xl w-full;
+	}
+
+	.image-cropper-modal-title {
+		@apply text-lg font-semibold;
+	}
+
+	.image-cropper-modal-body {
+		@apply flex flex-col gap-4;
+	}
+
+	.image-cropper-modal-footer {
+		@apply flex items-center justify-end gap-2;
 	}
 
 	.image-cropper-container {
 		@apply relative w-full overflow-hidden;
 		@apply bg-muted rounded-ui;
 		@apply flex items-center justify-center;
-		min-height: 400px;
-		max-height: 600px;
+		min-height: 300px;
+		max-height: 500px;
 	}
 
 	.image-cropper-image {
@@ -17,8 +220,11 @@
 		-webkit-user-drag: none;
 	}
 
-	.image-cropper-overlay {
-		@apply absolute inset-0 pointer-events-none;
+	.image-cropper-crop-overlay {
+		@apply absolute pointer-events-none;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
 	}
 
 	.overlay-top,
@@ -33,7 +239,7 @@
 	}
 
 	.overlay-bottom {
-		@apply left-0 right-0 bottom-0;
+		@apply left-0 right-0;
 	}
 
 	.overlay-middle {
@@ -53,17 +259,21 @@
 		@apply absolute pointer-events-auto;
 		@apply border-2 border-primary;
 		@apply cursor-move;
-		@apply transition-shadow duration-200;
+		@apply transition-shadow duration-300;
 		box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
 	}
 
+	.crop-area.is-circle {
+		@apply rounded-full;
+	}
+
 	.crop-area:hover {
 		@apply border-primary/80;
 	}
 
 	.crop-grid {
 		@apply absolute inset-0 pointer-events-none;
-		@apply opacity-0 transition-opacity duration-200;
+		@apply opacity-0 transition-opacity duration-300;
 	}
 
 	.crop-area:hover .crop-grid,
@@ -85,7 +295,7 @@
 
 	.resize-handle {
 		@apply absolute bg-primary border-2 border-background;
-		@apply transition-all duration-200;
+		@apply transition-all duration-300;
 		@apply opacity-0;
 		@apply z-10;
 	}
@@ -130,26 +340,17 @@
 		@apply scale-125 bg-primary/90;
 	}
 
-	.image-cropper-controls {
-		@apply flex items-center justify-end gap-2;
-	}
-
 	.image-cropper-canvas {
 		@apply hidden;
 	}
 
-	/* Responsive */
 	@media (max-width: 640px) {
 		.image-cropper-container {
-			min-height: 300px;
-		}
-
-		.image-cropper-controls {
-			@apply flex-col w-full;
+			min-height: 250px;
 		}
 
-		.image-cropper-controls .btn {
-			@apply w-full;
+		.image-cropper-modal-footer {
+			@apply flex-wrap justify-center;
 		}
 	}
 }

package/dist/form/css/radio-group.css

@@ -8,7 +8,7 @@
 			.radio {
 				@apply relative appearance-none border-2 border-muted rounded-full cursor-pointer;
 				@apply focus:outline-none;
-				@apply transition-colors duration-200;
+				@apply transition-colors duration-300;
 
 				&.is-primary {
 					@apply checked:border-primary;

package/dist/form/css/select.css

@@ -1,7 +1,7 @@
 @layer components {
 	.select-popover {
-		@apply max-h-56 flex flex-col gap-2 p-2 my-1 overflow-hidden;
-		@apply bg-background text-on-background rounded-ui;
+		@apply max-h-56 flex flex-col gap-2 p-2 my-1 overflow-hidden w-full;
+		@apply bg-background text-on-background rounded-box;
 		@apply invisible opacity-0 transition-opacity duration-300 ease-in-out;
 		@apply shadow shadow-muted;
 		position: fixed;

package/dist/form/css/slider.css

@@ -1,6 +1,7 @@
 @layer components {
 	.slider-wrapper {
 		@apply flex flex-col gap-0.5 w-full;
+		@apply transition-all duration-300;
 	}
 	.slider-info {
 		@apply flex justify-between items-center text-sm font-medium leading-none;

package/dist/form/css/textarea.css

@@ -7,124 +7,227 @@
 	.textarea-control-label {
 		@apply absolute left-3 top-3;
 		@apply transition-all duration-300;
-	}
 
-	.textarea-control-label.is-active {
-		@apply text-xs left-3 top-1 translate-y-px!;
+		&.is-active {
+			@apply text-xs left-3 top-1 translate-y-px!;
+		}
 	}
 
-	.textarea-control.is-sm {
-		@apply text-sm py-2;
-	}
+	.textarea-control {
+		&.is-sm {
+			@apply text-sm py-2;
+		}
 
-	.textarea-control.is-md {
-		@apply text-base py-2.5;
-	}
+		&.is-md {
+			@apply text-base py-2.5;
+		}
 
-	.textarea-control.is-lg {
-		@apply text-xl py-3;
+		&.is-lg {
+			@apply text-xl py-3;
 
-		.textarea-control-label.is-active {
-			@apply text-sm;
+			.textarea-control-label.is-active {
+				@apply text-sm;
+			}
 		}
-	}
 
-	.textarea-control.is-float.is-sm {
-		@apply pt-5 pb-2;
-	}
+		&.is-float {
+			&.is-sm {
+				@apply pt-5 pb-2;
+			}
 
-	.textarea-control.is-float.is-md {
-		@apply pt-6 pb-2.5;
-	}
+			&.is-md {
+				@apply pt-6 pb-2.5;
+			}
 
-	.textarea-control.is-float.is-lg {
-		@apply pt-7 pb-3;
+			&.is-lg {
+				@apply pt-7 pb-3;
+			}
+		}
 	}
 
-	.textarea-control.is-primary {
-		@apply bg-on-primary text-primary rounded-ui;
-	}
+	.textarea-control.is-soft {
+		@apply rounded-ui;
 
-	.textarea-control.is-solid.is-primary {
-		@apply bg-primary text-on-primary;
-	}
+		&.is-primary {
+			@apply bg-on-primary text-primary;
+			&.is-active {
+				@apply bg-on-primary/90;
+			}
+		}
 
-	.textarea-control.is-primary.is-active {
-		@apply bg-on-primary/90;
-	}
+		&.is-secondary {
+			@apply bg-on-secondary text-secondary;
+			&.is-active {
+				@apply bg-on-secondary/90;
+			}
+		}
 
-	.textarea-control.is-solid.is-primary.is-active {
-		@apply bg-primary/90;
-	}
+		&.is-muted {
+			@apply bg-muted text-on-muted;
+			&.is-active {
+				@apply bg-muted/90;
+			}
+		}
 
-	.textarea-control.is-secondary {
-		@apply bg-on-secondary text-secondary rounded-ui;
-	}
+		&.is-success {
+			@apply bg-on-success text-success;
+			&.is-active {
+				@apply bg-on-success/90;
+			}
+		}
 
-	.textarea-control.is-solid.is-secondary {
-		@apply bg-secondary text-on-secondary;
-	}
+		&.is-info {
+			@apply bg-on-info text-info;
+			&.is-active {
+				@apply bg-on-info/90;
+			}
+		}
 
-	.textarea-control.is-secondary.is-active {
-		@apply bg-on-secondary/90;
-	}
+		&.is-danger {
+			@apply bg-on-danger text-danger;
+			&.is-active {
+				@apply bg-on-danger/90;
+			}
+		}
 
-	.textarea-control.is-solid.is-secondary.is-active {
-		@apply bg-secondary/90;
+		&.is-warning {
+			@apply bg-on-warning text-warning;
+			&.is-active {
+				@apply bg-on-warning/90;
+			}
+		}
 	}
 
-	.textarea-control.is-muted {
-		@apply bg-muted text-on-muted rounded-ui;
-	}
+	.textarea-control.is-solid {
+		@apply rounded-ui;
 
-	.textarea-control.is-solid.is-muted {
-		@apply bg-on-muted text-muted;
-	}
+		&.is-primary {
+			@apply bg-primary text-on-primary;
+			&.is-active {
+				@apply bg-primary/90;
+			}
+		}
 
-	.textarea-control.is-muted.is-active {
-		@apply bg-muted/90;
-	}
+		&.is-secondary {
+			@apply bg-secondary text-on-secondary;
+			&.is-active {
+				@apply bg-secondary/90;
+			}
+		}
+
+		&.is-muted {
+			@apply bg-on-muted text-muted;
+			&.is-active {
+				@apply bg-on-muted/90;
+			}
+		}
+
+		&.is-success {
+			@apply bg-success text-on-success;
+			&.is-active {
+				@apply bg-success/90;
+			}
+		}
 
-	.textarea-control.is-solid.is-muted.is-active {
-		@apply bg-on-muted/90;
+		&.is-info {
+			@apply bg-info text-on-info;
+			&.is-active {
+				@apply bg-info/90;
+			}
+		}
+
+		&.is-danger {
+			@apply bg-danger text-on-danger;
+			&.is-active {
+				@apply bg-danger/90;
+			}
+		}
+
+		&.is-warning {
+			@apply bg-warning text-on-warning;
+			&.is-active {
+				@apply bg-warning/90;
+			}
+		}
 	}
 
 	.textarea-control.is-outlined {
-		@apply inset-ring-2 inset-ring-muted rounded-ui;
-	}
+		@apply rounded-ui inset-ring;
+
+		&.is-active {
+			@apply inset-ring-2;
+		}
 
-	.textarea-control.is-outlined.is-active {
-		@apply inset-ring-2 inset-ring-primary;
+		&.is-primary {
+			@apply inset-ring-primary;
+		}
+		&.is-secondary {
+			@apply inset-ring-secondary;
+		}
+		&.is-muted {
+			@apply inset-ring-muted;
+		}
+		&.is-success {
+			@apply inset-ring-success;
+		}
+		&.is-info {
+			@apply inset-ring-info;
+		}
+		&.is-danger {
+			@apply inset-ring-danger;
+		}
+		&.is-warning {
+			@apply inset-ring-warning;
+		}
 	}
 
 	.textarea-control.is-line {
-		@apply box-border border-b-2 border-muted text-on-muted px-0;
+		@apply box-border border-b px-0;
 
 		.textarea-control-label {
 			@apply left-0!;
 		}
-	}
 
-	.textarea-control.is-line.is-active {
-		@apply border-primary;
+		&.is-active {
+			@apply border-b-2;
+		}
+
+		&.is-primary {
+			@apply border-primary text-primary;
+		}
+		&.is-secondary {
+			@apply border-secondary text-secondary;
+		}
+		&.is-muted {
+			@apply border-on-muted text-on-muted;
+		}
+		&.is-success {
+			@apply border-success text-success;
+		}
+		&.is-info {
+			@apply border-info text-info;
+		}
+		&.is-danger {
+			@apply border-danger text-danger;
+		}
+		&.is-warning {
+			@apply border-warning text-warning;
+		}
 	}
 
 	.textarea-control-input {
 		@apply appearance-none flex-1 w-full border-none outline-none;
-		@apply placeholder:transition-opacity placeholder:duration-200;
+		@apply placeholder:transition-opacity placeholder:duration-300;
 		@apply bg-transparent;
 		@apply min-h-12;
-	}
-
-	.textarea-control-input.invisible {
-		@apply opacity-0;
-	}
-
-	.textarea-control-input {
 		resize: none;
-	}
 
-	.textarea-control-input.is-resizable {
-		resize: both;
+		&.invisible {
+			@apply opacity-0;
+		}
+
+		&.is-resizable {
+			resize: both;
+		}
 	}
 }

package/dist/form/css/toggle.css

@@ -4,11 +4,11 @@
 
 		.toggle-input {
 			@apply relative appearance-none w-10 h-6 rounded-full;
-			@apply bg-muted transition-colors duration-200 ease-in-out;
+			@apply bg-muted transition-colors duration-300 ease-in-out;
 			@apply focus:outline-none;
 			@apply before:content-[''] before:absolute before:h-4 before:w-4 before:left-1 before:top-1;
 			@apply before:bg-white before:rounded-full before:shadow;
-			@apply before:transition-transform before:duration-200 before:ease-in-out;
+			@apply before:transition-transform before:duration-300 before:ease-in-out;
 			@apply checked:before:translate-x-4;
 		}
 
@@ -26,7 +26,7 @@
 
 		.toggle-label-left,
 		.toggle-label-right {
-			@apply text-muted transition-colors duration-200;
+			@apply text-muted transition-colors duration-300;
 
 			&.is-active {
 				@apply text-on-muted;

package/dist/hooks/use-table.svelte.d.ts

@@ -10,6 +10,7 @@ interface Column {
 export interface TableState {
     data: any[];
     isLoading: boolean;
+    hasInitialized: boolean;
     error: any;
     sortBy?: string;
     sortOrder: 'ASC' | 'DESC';

package/dist/hooks/use-table.svelte.js

@@ -9,6 +9,7 @@ export const useTable = (config) => {
     let sortOrder = $state(config.initialSortOrder ?? 'ASC');
     let search = $state(config.initialSearch ?? '');
     let isLoading = $state(false);
+    let hasInitialized = $state(false);
     let error = $state(null);
     const selectable = config.selectable ?? false;
     const rowKey = config.rowKey ?? 'id';
@@ -82,6 +83,7 @@ export const useTable = (config) => {
         const startIndex = (page - 1) * pageSize;
         const endIndex = startIndex + pageSize;
         data = processedData.slice(startIndex, endIndex);
+        hasInitialized = true;
     };
     const fetchData = async () => {
         if (isManualMode) {
@@ -125,6 +127,7 @@ export const useTable = (config) => {
         catch (err) {
             error = err;
             config.onError?.(err);
+            hasInitialized = true;
         }
         finally {
             isLoading = false;
@@ -307,6 +310,9 @@ export const useTable = (config) => {
         get isLoading() {
             return isLoading;
         },
+        get hasInitialized() {
+            return hasInitialized;
+        },
         get error() {
             return error;
         },