ui-svelte 0.2.11 → 0.2.13

package/dist/form/css/control.css

@@ -5,120 +5,224 @@
 	}
 
 	.control-label {
-		@apply absolute left-3 top-1/2 -translate-y-1/2;
+		@apply absolute left-3 top-1/2 -translate-y-1/2 pr-6 w-full text-left truncate;
 		@apply transition-all duration-300;
-	}
 
-	.control-label.is-active {
-		@apply text-xs left-3 top-[1.2px]! translate-y-px!;
+		&.is-active {
+			@apply text-xs left-3 top-[1.2px]! translate-y-px!;
+		}
 	}
 
-	.control.is-sm {
-		@apply h-8 text-sm;
-	}
+	.control {
+		&.is-sm {
+			@apply h-8 text-sm;
 
-	.control.is-sm .control-icon {
-		@apply h-5 w-auto;
-	}
+			.control-icon {
+				@apply h-5 w-auto;
+			}
 
-	.control.is-float.is-sm {
-		@apply h-10 pt-3;
-	}
+			&.is-float {
+				@apply h-10 pt-3;
+			}
+		}
 
-	.control.is-md {
-		@apply h-10 text-base;
-	}
+		&.is-md {
+			@apply h-10 text-base;
 
-	.control.is-md .control-icon {
-		@apply h-6 w-auto;
-	}
+			.control-icon {
+				@apply h-6 w-auto;
+			}
 
-	.control.is-float.is-md {
-		@apply h-12 pt-3.5;
-	}
+			&.is-float {
+				@apply h-12 pt-3.5;
+			}
+		}
+
+		&.is-lg {
+			@apply h-12 text-xl;
+
+			.control-icon {
+				@apply h-8 w-auto;
+			}
 
-	.control.is-lg {
-		@apply h-12 text-xl;
+			.control-label.is-active {
+				@apply text-sm;
+			}
 
-		.control-label.is-active {
-			@apply text-sm;
+			&.is-float {
+				@apply h-14 pt-3.5;
+			}
 		}
 	}
 
-	.control.is-lg .control-icon {
-		@apply h-8 w-auto;
-	}
+	.control.is-soft {
+		@apply rounded-ui;
 
-	.control.is-float.is-lg {
-		@apply h-14 pt-3.5;
-	}
+		&.is-primary {
+			@apply bg-soft-primary text-primary;
+			&.is-active {
+				@apply bg-soft-primary/90;
+			}
+		}
 
-	.control.is-primary {
-		@apply bg-on-primary text-primary rounded-ui;
-	}
+		&.is-secondary {
+			@apply bg-soft-secondary text-secondary;
+			&.is-active {
+				@apply bg-soft-secondary/90;
+			}
+		}
 
-	.control.is-solid.is-primary {
-		@apply bg-primary text-on-primary;
-	}
+		&.is-muted {
+			@apply bg-soft-muted text-on-muted;
+			&.is-active {
+				@apply bg-soft-muted/90;
+			}
+		}
 
-	.control.is-primary.is-active {
-		@apply bg-on-primary/90;
-	}
+		&.is-success {
+			@apply bg-soft-success text-success;
+			&.is-active {
+				@apply bg-soft-success/90;
+			}
+		}
 
-	.control.is-solid.is-primary.is-active {
-		@apply bg-primary/90;
-	}
+		&.is-info {
+			@apply bg-soft-info text-info;
+			&.is-active {
+				@apply bg-soft-info/90;
+			}
+		}
 
-	.control.is-secondary {
-		@apply bg-on-secondary text-secondary rounded-ui;
-	}
+		&.is-danger {
+			@apply bg-soft-danger text-danger;
+			&.is-active {
+				@apply bg-soft-danger/90;
+			}
+		}
 
-	.control.is-solid.is-secondary {
-		@apply bg-secondary text-on-secondary;
+		&.is-warning {
+			@apply bg-soft-warning text-warning;
+			&.is-active {
+				@apply bg-soft-warning/90;
+			}
+		}
 	}
 
-	.control.is-secondary.is-active {
-		@apply bg-on-secondary/90;
-	}
+	.control.is-solid {
+		@apply rounded-ui;
 
-	.control.is-solid.is-secondary.is-active {
-		@apply bg-secondary/90;
-	}
+		&.is-primary {
+			@apply bg-primary text-on-primary;
+			&.is-active {
+				@apply bg-primary/90;
+			}
+		}
 
-	.control.is-muted {
-		@apply bg-muted text-on-muted rounded-ui;
-	}
+		&.is-secondary {
+			@apply bg-secondary text-on-secondary;
+			&.is-active {
+				@apply bg-secondary/90;
+			}
+		}
 
-	.control.is-solid.is-muted {
-		@apply bg-on-muted text-muted;
-	}
+		&.is-muted {
+			@apply bg-on-muted text-muted;
+			&.is-active {
+				@apply bg-on-muted/90;
+			}
+		}
 
-	.control.is-muted.is-active {
-		@apply bg-muted/90;
-	}
+		&.is-success {
+			@apply bg-success text-on-success;
+			&.is-active {
+				@apply bg-success/90;
+			}
+		}
 
-	.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;
+			}
+		}
 	}
 
 	.control.is-outlined {
-		@apply inset-ring-2 inset-ring-muted rounded-ui;
-	}
+		@apply rounded-ui inset-ring;
 
-	.control.is-outlined.is-active {
-		@apply inset-ring-2 inset-ring-primary;
+		&.is-active {
+			@apply inset-ring-2;
+		}
+
+		&.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;
+		}
 	}
 
 	.control.is-line {
-		@apply box-border border-b-2  border-muted text-on-muted px-0;
+		@apply box-border border-b px-0;
 
 		.control-label {
 			@apply left-0!;
 		}
-	}
 
-	.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;
+		}
 	}
 
 	.control-btn {
@@ -130,22 +234,29 @@
 	}
 
 	.control-arrow {
-		@apply size-4 transition-transform;
-		@apply transition-all duration-300 ease-in-out;
-	}
+		@apply size-4 transition-all duration-300 ease-in-out;
 
-	.control-arrow.is-active {
-		@apply rotate-90;
+		&.is-active {
+			@apply rotate-90;
+		}
 	}
 
 	.control-selected {
-		@apply flex-1 text-left truncate;
+		@apply flex-1 text-left truncate w-full;
+	}
+
+	.control-pin {
+		@apply appearance-none border-none outline-none truncate text-center w-6;
+		@apply placeholder:transition-opacity placeholder:duration-300;
 	}
 
 	.control-input {
-		@apply appearance-none flex-1 border-none outline-none;
-		@apply placeholder:transition-opacity placeholder:duration-200;
+		@apply appearance-none flex-1 border-none outline-none truncate;
+		@apply placeholder:transition-opacity placeholder:duration-300;
+	}
 
+	.control-input,
+	.control-pin {
 		&::-webkit-outer-spin-button,
 		&::-webkit-inner-spin-button {
 			-webkit-appearance: none;

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

@@ -0,0 +1,221 @@
+@layer components {
+	.csv-field {
+		@apply relative w-full;
+	}
+
+	.csv-field-input {
+		@apply hidden;
+	}
+
+	.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-soft-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;
+	}
+
+	.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;
+	}
+
+	.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-soft-primary/20;
+	}
+	.csv-field.is-soft.is-secondary .csv-preview-container {
+		@apply bg-soft-secondary/20;
+	}
+	.csv-field.is-soft.is-muted .csv-preview-container {
+		@apply bg-soft-muted/50;
+	}
+	.csv-field.is-soft.is-success .csv-preview-container {
+		@apply bg-soft-success/20;
+	}
+	.csv-field.is-soft.is-info .csv-preview-container {
+		@apply bg-soft-info/20;
+	}
+	.csv-field.is-soft.is-danger .csv-preview-container {
+		@apply bg-soft-danger/20;
+	}
+	.csv-field.is-soft.is-warning .csv-preview-container {
+		@apply bg-soft-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;
+	}
+
+	.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;
+	}
+
+	.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 {