ui-svelte 0.2.11 → 0.2.13

package/dist/form/css/drag-drop.css

@@ -0,0 +1,234 @@
+@layer components {
+	.drag-drop {
+		@apply relative w-full;
+		--dd-color: var(--color-muted);
+		--dd-on-color: var(--color-on-muted);
+	}
+
+	.drag-drop.is-primary {
+		--dd-color: var(--color-primary);
+		--dd-on-color: var(--color-on-primary);
+		--dd-soft: var(--color-soft-primary);
+	}
+	.drag-drop.is-secondary {
+		--dd-color: var(--color-secondary);
+		--dd-on-color: var(--color-on-secondary);
+		--dd-soft: var(--color-soft-secondary);
+	}
+	.drag-drop.is-muted {
+		--dd-color: var(--color-muted);
+		--dd-on-color: var(--color-on-muted);
+		--dd-soft: var(--color-soft-muted);
+	}
+	.drag-drop.is-success {
+		--dd-color: var(--color-success);
+		--dd-on-color: var(--color-on-success);
+		--dd-soft: var(--color-soft-success);
+	}
+	.drag-drop.is-info {
+		--dd-color: var(--color-info);
+		--dd-on-color: var(--color-on-info);
+		--dd-soft: var(--color-soft-info);
+	}
+	.drag-drop.is-danger {
+		--dd-color: var(--color-danger);
+		--dd-on-color: var(--color-on-danger);
+		--dd-soft: var(--color-soft-danger);
+	}
+	.drag-drop.is-warning {
+		--dd-color: var(--color-warning);
+		--dd-on-color: var(--color-on-warning);
+		--dd-soft: var(--color-soft-warning);
+	}
+
+	.drag-drop.is-horizontal {
+		@apply flex gap-4 overflow-x-auto;
+	}
+
+	.drag-drop.is-vertical {
+		@apply flex flex-col gap-4;
+	}
+
+	.drag-drop.is-disabled {
+		@apply opacity-60 pointer-events-none;
+	}
+
+	.drag-drop.is-dragging {
+		@apply select-none;
+	}
+
+	.drag-drop-group {
+		@apply flex flex-col min-w-64 max-w-80;
+	}
+
+	.drag-drop.is-vertical .drag-drop-group {
+		@apply min-w-full max-w-full;
+	}
+
+	.drag-drop-group-header {
+		@apply flex items-center justify-between gap-2 px-3 py-2 mb-2 font-semibold;
+	}
+
+	.drag-drop-group-title {
+		@apply truncate;
+	}
+
+	.drag-drop-group-count {
+		@apply px-2 py-0.5 text-xs rounded-full;
+		background: oklch(from var(--dd-color) l c h / 0.15);
+	}
+
+	.drag-drop-list {
+		@apply flex flex-col gap-2 min-h-24 p-2 rounded-ui;
+		@apply transition-colors duration-200;
+	}
+	.drag-drop.is-soft .drag-drop-list {
+		background: oklch(from var(--dd-soft, var(--dd-color)) l c h / 0.5);
+	}
+	.drag-drop.is-solid .drag-drop-list {
+		background: oklch(from var(--dd-color) l c h / 0.2);
+	}
+	.drag-drop.is-outlined .drag-drop-list {
+		@apply border-2 border-dashed;
+		border-color: oklch(from var(--dd-color) l c h / 0.3);
+	}
+	.drag-drop.is-ghost .drag-drop-list {
+		@apply bg-transparent;
+	}
+	.drag-drop-item {
+		@apply relative flex items-center gap-3 p-3 rounded-ui cursor-grab;
+		@apply bg-surface border border-transparent;
+		@apply transition-all duration-200;
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		-webkit-tap-highlight-color: transparent;
+	}
+
+	.drag-drop-item:hover {
+		border-color: oklch(from var(--dd-color) l c h / 0.2);
+		@apply shadow-sm;
+	}
+
+	.drag-drop-item.is-dragging {
+		@apply opacity-50 cursor-grabbing scale-[1.02] shadow-lg;
+		border-color: oklch(from var(--dd-color) l c h / 0.3);
+	}
+
+	.drag-drop-item.is-drag-over {
+		border-color: oklch(from var(--dd-color) l c h / 0.5);
+	}
+
+	.drag-drop-item.is-drag-over::before,
+	.drag-drop-item.is-touch-drag-over::before {
+		content: '';
+		@apply absolute -top-1.5 left-0 right-0 h-0.5 rounded-full;
+		background: var(--dd-color);
+	}
+
+	.drag-drop-item-content {
+		@apply flex-1 min-w-0 truncate;
+	}
+	.drag-drop-handle {
+		@apply shrink-0 opacity-30 cursor-grab;
+		@apply transition-opacity duration-200;
+	}
+
+	.drag-drop-item:hover .drag-drop-handle {
+		@apply opacity-60;
+	}
+
+	.drag-drop-handle svg {
+		@apply size-4;
+	}
+
+	.drag-drop-empty {
+		@apply flex items-center justify-center min-h-24 p-4;
+		@apply text-sm opacity-50 text-center;
+		@apply border-2 border-dashed rounded-ui;
+		@apply transition-all duration-200;
+		border-color: oklch(from var(--dd-color) l c h / 0.2);
+	}
+
+	.drag-drop-empty.is-drag-over {
+		border-color: oklch(from var(--dd-color) l c h / 0.5);
+		background: oklch(from var(--dd-color) l c h / 0.05);
+	}
+
+	.drag-drop.is-sm {
+		.drag-drop-item {
+			@apply p-2 gap-2 text-sm;
+		}
+		.drag-drop-handle svg {
+			@apply size-3;
+		}
+		.drag-drop-group-header {
+			@apply text-sm px-2 py-1;
+		}
+		.drag-drop-list {
+			@apply gap-1.5 p-1.5;
+		}
+		.drag-drop-empty {
+			@apply min-h-16 text-xs;
+		}
+	}
+
+	.drag-drop.is-md {
+		.drag-drop-item {
+			@apply p-3 gap-3 text-base;
+		}
+		.drag-drop-handle svg {
+			@apply size-4;
+		}
+		.drag-drop-group-header {
+			@apply text-base px-3 py-2;
+		}
+		.drag-drop-list {
+			@apply gap-2 p-2;
+		}
+	}
+
+	.drag-drop.is-lg {
+		.drag-drop-item {
+			@apply p-4 gap-4 text-lg;
+		}
+		.drag-drop-handle svg {
+			@apply size-5;
+		}
+		.drag-drop-group-header {
+			@apply text-lg px-4 py-3;
+		}
+		.drag-drop-list {
+			@apply gap-3 p-3;
+		}
+		.drag-drop-empty {
+			@apply min-h-32;
+		}
+	}
+
+	.drag-drop.is-touch-dragging {
+		@apply select-none touch-none;
+	}
+
+	.drag-drop-item.is-touch-drag-over {
+		border-color: oklch(from var(--dd-color) l c h / 0.5);
+	}
+
+	.drag-drop-ghost {
+		@apply rounded-ui bg-surface;
+		border: 1px solid oklch(from var(--dd-color) l c h / 0.3);
+	}
+
+	@media (pointer: coarse) {
+		.drag-drop-item {
+			touch-action: pan-y;
+		}
+
+		.drag-drop.is-touch-dragging .drag-drop-item {
+			touch-action: none;
+		}
+
+		.drag-drop-handle {
+			@apply opacity-50;
+		}
+	}
+}

package/dist/form/css/dropzone.css

@@ -5,7 +5,7 @@
 
 	.dropzone-input {
 		@apply flex justify-center items-center border-2 border-dashed h-48 w-full;
-		@apply border-muted p-6 transition-all rounded-ui cursor-pointer;
+		@apply p-6 transition-all rounded-box cursor-pointer;
 	}
 
 	.dropzone-input.is-active {
@@ -20,44 +20,163 @@
 		@apply border-danger;
 	}
 
-	.dropzone-input.is-primary {
-		@apply bg-on-primary border-primary;
-	}
-
-	.dropzone-input.is-solid.is-primary {
-		@apply bg-primary border-primary;
-	}
-
-	.dropzone-input.is-secondary {
-		@apply bg-on-secondary border-secondary;
-	}
-
-	.dropzone-input.is-solid.is-secondary {
-		@apply bg-secondary border-secondary;
-	}
-
-	.dropzone-input.is-muted {
-		@apply bg-muted border-muted;
-	}
-
-	.dropzone-input.is-solid.is-muted {
-		@apply bg-on-muted border-on-muted;
+	.dropzone-input.is-soft {
+		&.is-primary {
+			@apply bg-soft-primary text-primary border-primary;
+		}
+		&.is-secondary {
+			@apply bg-soft-secondary text-secondary border-secondary;
+		}
+		&.is-muted {
+			@apply bg-soft-muted text-on-muted border-muted;
+		}
+		&.is-success {
+			@apply bg-soft-success text-success border-success;
+		}
+		&.is-info {
+			@apply bg-soft-info text-info border-info;
+		}
+		&.is-warning {
+			@apply bg-soft-warning text-warning border-warning;
+		}
+		&.is-danger {
+			@apply bg-soft-danger text-danger border-danger;
+		}
+		&.is-background {
+			@apply bg-background text-on-background border-muted;
+		}
+		&.is-surface {
+			@apply bg-surface text-on-surface border-muted;
+		}
+	}
+
+	.dropzone-input.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-on-muted text-muted border-on-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;
+		}
+		&.is-default {
+			@apply bg-background text-on-background border-on-background;
+		}
+		&.is-surface {
+			@apply bg-surface text-on-surface border-on-surface;
+		}
 	}
 
 	.dropzone-input.is-outlined {
-		@apply border-muted;
-	}
-
-	.dropzone-input.is-outlined.is-active {
-		@apply border-primary;
+		@apply bg-transparent;
+
+		&.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-warning {
+			@apply border-warning text-warning;
+		}
+		&.is-danger {
+			@apply border-danger text-danger;
+		}
+		&.is-default {
+			@apply border-muted text-on-background;
+		}
+		&.is-surface {
+			@apply border-on-surface text-on-surface;
+		}
+	}
+
+	.dropzone-input.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;
+		}
+		&.is-default {
+			@apply text-on-background;
+		}
+		&.is-surface {
+			@apply text-on-surface;
+		}
+
+		&:hover,
+		&.is-active {
+			@apply bg-muted/20;
+		}
 	}
 
-	.dropzone-input.is-line {
-		@apply border-0 border-b-2 border-muted rounded-none;
-	}
-
-	.dropzone-input.is-line.is-active {
-		@apply border-primary;
+	.dropzone-input.is-active {
+		&.is-primary {
+			@apply border-primary bg-primary/10;
+		}
+		&.is-secondary {
+			@apply border-secondary bg-secondary/10;
+		}
+		&.is-muted {
+			@apply border-on-muted bg-muted/10;
+		}
+		&.is-success {
+			@apply border-success bg-success/10;
+		}
+		&.is-info {
+			@apply border-info bg-info/10;
+		}
+		&.is-warning {
+			@apply border-warning bg-warning/10;
+		}
+		&.is-danger {
+			@apply border-danger bg-danger/10;
+		}
+		&.is-default {
+			@apply border-primary bg-primary/5;
+		}
+		&.is-surface {
+			@apply border-primary bg-primary/5;
+		}
 	}
 
 	.dropzone-input.is-sm {