ui-svelte 0.2.11 → 0.2.12

package/dist/form/css/csv-field.css

@@ -0,0 +1,226 @@
+@layer components {
+	.csv-field {
+		@apply relative w-full;
+	}
+
+	.csv-field-input {
+		@apply hidden;
+	}
+
+	/* Error Message */
+	.csv-field-error {
+		@apply mt-2.5 p-2.5 rounded-ui text-sm;
+	}
+
+	.csv-field.is-soft .csv-field-error,
+	.csv-field.is-ghost .csv-field-error {
+		@apply bg-on-danger/20 text-danger;
+	}
+
+	.csv-field.is-solid .csv-field-error {
+		@apply bg-danger text-on-danger;
+	}
+
+	.csv-field.is-outlined .csv-field-error {
+		@apply border border-danger text-danger;
+	}
+
+	/* Modal Styles */
+	.csv-modal-title {
+		@apply m-0 text-xl font-semibold text-on-surface;
+	}
+
+	.csv-modal-body {
+		@apply flex flex-col gap-5;
+	}
+
+	.csv-instructions {
+		@apply m-0 text-on-surface/70 text-sm;
+	}
+
+	.csv-mapping-list {
+		@apply flex flex-col gap-6;
+	}
+
+	.csv-mapping-item {
+		@apply flex flex-col gap-3;
+	}
+
+	.csv-modal-footer {
+		@apply flex justify-end gap-3;
+	}
+
+	/* Preview Container */
+	.csv-preview-container {
+		@apply mt-6 p-5 rounded-ui;
+	}
+
+	.csv-field.is-soft .csv-preview-container {
+		&.is-primary {
+			@apply bg-on-primary/20;
+		}
+		&.is-secondary {
+			@apply bg-on-secondary/20;
+		}
+		&.is-muted {
+			@apply bg-muted/50;
+		}
+		&.is-success {
+			@apply bg-on-success/20;
+		}
+		&.is-info {
+			@apply bg-on-info/20;
+		}
+		&.is-danger {
+			@apply bg-on-danger/20;
+		}
+		&.is-warning {
+			@apply bg-on-warning/20;
+		}
+	}
+
+	.csv-field.is-soft.is-primary .csv-preview-container {
+		@apply bg-on-primary/20;
+	}
+	.csv-field.is-soft.is-secondary .csv-preview-container {
+		@apply bg-on-secondary/20;
+	}
+	.csv-field.is-soft.is-muted .csv-preview-container {
+		@apply bg-muted/50;
+	}
+	.csv-field.is-soft.is-success .csv-preview-container {
+		@apply bg-on-success/20;
+	}
+	.csv-field.is-soft.is-info .csv-preview-container {
+		@apply bg-on-info/20;
+	}
+	.csv-field.is-soft.is-danger .csv-preview-container {
+		@apply bg-on-danger/20;
+	}
+	.csv-field.is-soft.is-warning .csv-preview-container {
+		@apply bg-on-warning/20;
+	}
+
+	.csv-field.is-solid.is-primary .csv-preview-container {
+		@apply bg-primary/10;
+	}
+	.csv-field.is-solid.is-secondary .csv-preview-container {
+		@apply bg-secondary/10;
+	}
+	.csv-field.is-solid.is-muted .csv-preview-container {
+		@apply bg-on-muted/10;
+	}
+	.csv-field.is-solid.is-success .csv-preview-container {
+		@apply bg-success/10;
+	}
+	.csv-field.is-solid.is-info .csv-preview-container {
+		@apply bg-info/10;
+	}
+	.csv-field.is-solid.is-danger .csv-preview-container {
+		@apply bg-danger/10;
+	}
+	.csv-field.is-solid.is-warning .csv-preview-container {
+		@apply bg-warning/10;
+	}
+
+	.csv-field.is-outlined.is-primary .csv-preview-container {
+		@apply border border-primary/30;
+	}
+	.csv-field.is-outlined.is-secondary .csv-preview-container {
+		@apply border border-secondary/30;
+	}
+	.csv-field.is-outlined.is-muted .csv-preview-container {
+		@apply border border-muted;
+	}
+	.csv-field.is-outlined.is-success .csv-preview-container {
+		@apply border border-success/30;
+	}
+	.csv-field.is-outlined.is-info .csv-preview-container {
+		@apply border border-info/30;
+	}
+	.csv-field.is-outlined.is-danger .csv-preview-container {
+		@apply border border-danger/30;
+	}
+	.csv-field.is-outlined.is-warning .csv-preview-container {
+		@apply border border-warning/30;
+	}
+
+	.csv-field.is-ghost .csv-preview-container {
+		@apply bg-surface/50;
+	}
+
+	/* Preview Header */
+	.csv-preview-header {
+		@apply flex justify-between items-start mb-4 gap-4;
+	}
+
+	.csv-preview-info {
+		@apply flex-1 min-w-0;
+	}
+
+	.csv-preview-title {
+		@apply m-0 mb-3 text-base font-semibold text-on-surface;
+		@apply flex items-center gap-2;
+	}
+
+	.csv-preview-count {
+		@apply text-sm font-normal text-on-surface/60;
+	}
+
+	.csv-mapping-summary {
+		@apply flex flex-wrap gap-2;
+	}
+
+	.csv-clear-icon {
+		@apply text-lg leading-none;
+	}
+
+	/* Size Variants */
+	.csv-field.is-xs {
+		.csv-field-error {
+			@apply text-xs p-2;
+		}
+		.csv-preview-container {
+			@apply p-3 mt-4;
+		}
+		.csv-preview-title {
+			@apply text-sm;
+		}
+	}
+
+	.csv-field.is-sm {
+		.csv-field-error {
+			@apply text-xs p-2;
+		}
+		.csv-preview-container {
+			@apply p-4 mt-4;
+		}
+		.csv-preview-title {
+			@apply text-sm;
+		}
+	}
+
+	.csv-field.is-md {
+		.csv-field-error {
+			@apply text-sm p-2.5;
+		}
+		.csv-preview-container {
+			@apply p-5 mt-6;
+		}
+		.csv-preview-title {
+			@apply text-base;
+		}
+	}
+
+	.csv-field.is-lg {
+		.csv-field-error {
+			@apply text-base p-3;
+		}
+		.csv-preview-container {
+			@apply p-6 mt-8;
+		}
+		.csv-preview-title {
+			@apply text-lg;
+		}
+	}
+}

package/dist/form/css/date-range.css

@@ -0,0 +1,122 @@
+@layer components {
+	.date-range-popover {
+		@apply h-auto overflow-y-auto drop-shadow-sm flex flex-col gap-2 p-3 my-1 scrollbar-hide;
+		@apply bg-background text-on-background rounded-box;
+		@apply invisible opacity-0 transition-opacity duration-300 ease-in-out;
+		position: fixed;
+		z-index: 9999;
+
+		&.is-active {
+			@apply visible opacity-100;
+		}
+	}
+
+	.date-range-calendars {
+		@apply flex gap-4;
+	}
+
+	.date-range-calendar {
+		@apply flex flex-col gap-1;
+	}
+
+	.date-range-spacer {
+		@apply w-8 h-8;
+	}
+
+	.date-range-day-button {
+		@apply outline-hidden rounded-ui;
+		@apply flex items-center justify-center w-8 h-8 text-sm transition-colors;
+
+		&:not(.is-start):not(.is-end):not(.is-in-range):not(.is-disabled) {
+			@apply hover:bg-muted hover:text-on-muted;
+		}
+
+		&.is-start,
+		&.is-end {
+			@apply rounded-ui;
+		}
+
+		&.is-start.is-primary,
+		&.is-end.is-primary {
+			@apply bg-primary text-on-primary;
+		}
+		&.is-start.is-secondary,
+		&.is-end.is-secondary {
+			@apply bg-secondary text-on-secondary;
+		}
+		&.is-start.is-muted,
+		&.is-end.is-muted {
+			@apply bg-muted text-on-muted;
+		}
+		&.is-start.is-success,
+		&.is-end.is-success {
+			@apply bg-success text-on-success;
+		}
+		&.is-start.is-info,
+		&.is-end.is-info {
+			@apply bg-info text-on-info;
+		}
+		&.is-start.is-danger,
+		&.is-end.is-danger {
+			@apply bg-danger text-on-danger;
+		}
+		&.is-start.is-warning,
+		&.is-end.is-warning {
+			@apply bg-warning text-on-warning;
+		}
+
+		&.is-in-range {
+			@apply rounded-none;
+		}
+
+		&.is-in-range.is-primary {
+			@apply bg-primary/20 text-primary;
+		}
+		&.is-in-range.is-secondary {
+			@apply bg-secondary/20 text-secondary;
+		}
+		&.is-in-range.is-muted {
+			@apply bg-muted/50 text-on-muted;
+		}
+		&.is-in-range.is-success {
+			@apply bg-success/20 text-success;
+		}
+		&.is-in-range.is-info {
+			@apply bg-info/20 text-info;
+		}
+		&.is-in-range.is-danger {
+			@apply bg-danger/20 text-danger;
+		}
+		&.is-in-range.is-warning {
+			@apply bg-warning/20 text-warning;
+		}
+
+		&.is-start {
+			@apply rounded-l-ui rounded-r-none;
+		}
+
+		&.is-end {
+			@apply rounded-r-ui rounded-l-none;
+		}
+
+		&.is-start.is-end {
+			@apply rounded-ui;
+		}
+
+		&.today {
+			@apply font-semibold;
+		}
+
+		&.is-disabled {
+			@apply opacity-50 cursor-not-allowed;
+		}
+	}
+
+	.date-range-footer {
+		@apply flex items-center justify-center pt-2 border-t border-muted;
+	}
+
+	.date-range-selection {
+		@apply text-sm text-on-muted;
+	}
+}

package/dist/form/css/date.css

@@ -1,7 +1,7 @@
 @layer components {
 	.date-popover {
 		@apply h-auto overflow-y-auto drop-shadow-sm flex flex-col gap-1 p-2 my-1 scrollbar-hide w-72;
-		@apply bg-background text-on-background rounded-ui;
+		@apply bg-background text-on-background rounded-box;
 		@apply invisible opacity-0 transition-opacity duration-300 ease-in-out;
 		position: fixed;
 		z-index: 9999;
@@ -46,7 +46,29 @@
 		@apply flex items-center justify-center w-8 h-8 text-sm transition-colors;
 
 		&.selected {
-			@apply bg-primary text-on-primary rounded-ui;
+			@apply rounded-ui;
+		}
+
+		&.selected.is-primary {
+			@apply bg-primary text-on-primary;
+		}
+		&.selected.is-secondary {
+			@apply bg-secondary text-on-secondary;
+		}
+		&.selected.is-muted {
+			@apply bg-muted text-on-muted;
+		}
+		&.selected.is-success {
+			@apply bg-success text-on-success;
+		}
+		&.selected.is-info {
+			@apply bg-info text-on-info;
+		}
+		&.selected.is-danger {
+			@apply bg-danger text-on-danger;
+		}
+		&.selected.is-warning {
+			@apply bg-warning text-on-warning;
 		}
 
 		&.today {

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

@@ -0,0 +1,271 @@
+@layer components {
+	.drag-drop {
+		@apply relative w-full;
+	}
+
+	.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;
+		@apply font-semibold;
+	}
+
+	.drag-drop-group-title {
+		@apply truncate;
+	}
+
+	.drag-drop-group-count {
+		@apply px-2 py-0.5 text-xs rounded-full;
+		@apply bg-current/10;
+	}
+
+	.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 {
+			@apply rounded-ui;
+		}
+
+		&.is-primary .drag-drop-list {
+			@apply bg-on-primary/50;
+		}
+		&.is-secondary .drag-drop-list {
+			@apply bg-on-secondary/50;
+		}
+		&.is-muted .drag-drop-list {
+			@apply bg-muted/50;
+		}
+		&.is-success .drag-drop-list {
+			@apply bg-on-success/50;
+		}
+		&.is-info .drag-drop-list {
+			@apply bg-on-info/50;
+		}
+		&.is-danger .drag-drop-list {
+			@apply bg-on-danger/50;
+		}
+		&.is-warning .drag-drop-list {
+			@apply bg-on-warning/50;
+		}
+	}
+
+	.drag-drop.is-solid {
+		.drag-drop-list {
+			@apply rounded-ui;
+		}
+
+		&.is-primary .drag-drop-list {
+			@apply bg-primary/20;
+		}
+		&.is-secondary .drag-drop-list {
+			@apply bg-secondary/20;
+		}
+		&.is-muted .drag-drop-list {
+			@apply bg-on-muted/10;
+		}
+		&.is-success .drag-drop-list {
+			@apply bg-success/20;
+		}
+		&.is-info .drag-drop-list {
+			@apply bg-info/20;
+		}
+		&.is-danger .drag-drop-list {
+			@apply bg-danger/20;
+		}
+		&.is-warning .drag-drop-list {
+			@apply bg-warning/20;
+		}
+	}
+
+	.drag-drop.is-outlined {
+		.drag-drop-list {
+			@apply rounded-ui border-2 border-dashed;
+		}
+
+		&.is-primary .drag-drop-list {
+			@apply border-primary/30;
+		}
+		&.is-secondary .drag-drop-list {
+			@apply border-secondary/30;
+		}
+		&.is-muted .drag-drop-list {
+			@apply border-muted;
+		}
+		&.is-success .drag-drop-list {
+			@apply border-success/30;
+		}
+		&.is-info .drag-drop-list {
+			@apply border-info/30;
+		}
+		&.is-danger .drag-drop-list {
+			@apply border-danger/30;
+		}
+		&.is-warning .drag-drop-list {
+			@apply border-warning/30;
+		}
+	}
+
+	.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;
+		@apply hover:border-current/20 hover:shadow-sm;
+	}
+
+	.drag-drop-item.is-dragging {
+		@apply opacity-50 cursor-grabbing scale-[1.02];
+		@apply shadow-lg border-current/30;
+	}
+
+	.drag-drop-item.is-drag-over {
+		@apply border-current/50;
+	}
+
+	.drag-drop-item.is-drag-over::before {
+		content: '';
+		@apply absolute -top-1.5 left-0 right-0 h-0.5;
+		@apply bg-current rounded-full;
+	}
+
+	.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 border-current/20 rounded-ui;
+		@apply transition-all duration-200;
+	}
+
+	.drag-drop-empty.is-drag-over {
+		@apply border-current/50 bg-current/5;
+	}
+
+	.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-primary .drag-drop-item.is-drag-over::before {
+		@apply bg-primary;
+	}
+	.drag-drop.is-secondary .drag-drop-item.is-drag-over::before {
+		@apply bg-secondary;
+	}
+	.drag-drop.is-muted .drag-drop-item.is-drag-over::before {
+		@apply bg-on-muted;
+	}
+	.drag-drop.is-success .drag-drop-item.is-drag-over::before {
+		@apply bg-success;
+	}
+	.drag-drop.is-info .drag-drop-item.is-drag-over::before {
+		@apply bg-info;
+	}
+	.drag-drop.is-danger .drag-drop-item.is-drag-over::before {
+		@apply bg-danger;
+	}
+	.drag-drop.is-warning .drag-drop-item.is-drag-over::before {
+		@apply bg-warning;
+	}
+}