ui-svelte 0.2.11 → 0.2.12

package/dist/form/Toggle.svelte

@@ -50,6 +50,6 @@
 		<span class={cn('toggle-label-right', checked && 'is-active')}>{labelRight}</span>
 	{/if}
 	{#if label}
-		<span class="label">{label}</span>
+		<span class="label-md">{label}</span>
 	{/if}
 </label>

package/dist/form/css/checkbox.css

@@ -1,11 +1,15 @@
 @layer components {
 	.checkbox {
-		@apply flex justify-start items-center w-fit gap-2 cursor-pointer;
+		@apply relative flex justify-start items-center w-fit gap-2 cursor-pointer flex-nowrap;
 
 		.checkbox-input {
 			@apply relative appearance-none min-w-5 w-5 h-5 border-2 border-muted rounded-lg;
 			@apply focus:outline-none;
-			@apply transition-all duration-200 ease-in-out;
+			@apply transition-all duration-300 ease-in-out;
+
+			&.is-muted {
+				@apply border-on-muted;
+			}
 
 			&::after {
 				content: '';
@@ -36,6 +40,18 @@
 			&.is-muted {
 				@apply bg-on-muted border-on-muted;
 			}
+			&.is-success {
+				@apply bg-success border-success;
+			}
+			&.is-info {
+				@apply bg-info border-info;
+			}
+			&.is-warning {
+				@apply bg-warning border-warning;
+			}
+			&.is-danger {
+				@apply bg-danger border-danger;
+			}
 
 			&::after {
 				transform: translate(-50%, -50%) scale(1);

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

@@ -0,0 +1,141 @@
+@layer components {
+	.color-field-swatch {
+		@apply size-6 rounded shrink-0;
+		@apply inset-ring inset-ring-muted/30;
+	}
+
+	.color-field-swatch.is-sm {
+		@apply size-5;
+	}
+
+	.color-field-swatch.is-lg {
+		@apply size-8;
+	}
+
+	.color-field-value {
+		@apply flex-1 text-left font-mono text-sm uppercase truncate;
+	}
+
+	.color-picker-popover {
+		@apply flex flex-col gap-4 p-4 w-80 my-1;
+		@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;
+		z-index: 9999;
+
+		&.is-active {
+			@apply visible opacity-100;
+		}
+	}
+
+	.color-picker-canvas-wrapper {
+		@apply relative w-full h-36 rounded-ui overflow-hidden cursor-crosshair;
+	}
+
+	.color-picker-canvas {
+		@apply absolute inset-0 w-full h-full;
+	}
+
+	.color-picker-cursor {
+		@apply absolute size-4 -translate-x-1/2 -translate-y-1/2 rounded-full;
+		@apply border-2 border-white shadow-md pointer-events-none;
+	}
+
+	.color-picker-slider-wrapper {
+		@apply flex flex-col gap-3;
+	}
+
+	.color-picker-slider {
+		@apply relative w-full h-4 rounded-full cursor-pointer;
+	}
+
+	.color-picker-hue {
+		background: linear-gradient(
+			to right,
+			hsl(0, 100%, 50%),
+			hsl(60, 100%, 50%),
+			hsl(120, 100%, 50%),
+			hsl(180, 100%, 50%),
+			hsl(240, 100%, 50%),
+			hsl(300, 100%, 50%),
+			hsl(360, 100%, 50%)
+		);
+	}
+
+	.color-picker-alpha {
+		background-image:
+			linear-gradient(45deg, #ccc 25%, transparent 25%),
+			linear-gradient(-45deg, #ccc 25%, transparent 25%),
+			linear-gradient(45deg, transparent 75%, #ccc 75%),
+			linear-gradient(-45deg, transparent 75%, #ccc 75%);
+		background-size: 8px 8px;
+		background-position:
+			0 0,
+			0 4px,
+			4px -4px,
+			-4px 0px;
+	}
+
+	.color-picker-alpha-overlay {
+		@apply absolute inset-0 rounded-full;
+	}
+
+	.color-picker-slider-thumb {
+		@apply absolute top-1/2 -translate-y-1/2 -translate-x-1/2 size-5;
+		@apply bg-white rounded-full shadow-md border border-muted/30;
+		@apply pointer-events-none;
+	}
+
+	.color-picker-values {
+		@apply flex flex-col gap-2;
+	}
+
+	.color-picker-value-row {
+		@apply flex items-center gap-2;
+	}
+
+	.color-picker-value-label {
+		@apply text-xs font-semibold uppercase w-12 text-on-muted;
+	}
+
+	.color-picker-value-code {
+		@apply flex-1 font-mono text-xs px-2 py-1 rounded-ui bg-muted truncate;
+	}
+
+	.color-picker-preview {
+		@apply flex items-center gap-3;
+	}
+
+	.color-picker-preview-swatch {
+		@apply size-12 rounded-ui shrink-0;
+		@apply inset-ring inset-ring-muted/30;
+		background-image:
+			linear-gradient(45deg, #ccc 25%, transparent 25%),
+			linear-gradient(-45deg, #ccc 25%, transparent 25%),
+			linear-gradient(45deg, transparent 75%, #ccc 75%),
+			linear-gradient(-45deg, transparent 75%, #ccc 75%);
+		background-size: 8px 8px;
+		background-position:
+			0 0,
+			0 4px,
+			4px -4px,
+			-4px 0px;
+	}
+
+	.color-picker-preview-color {
+		@apply absolute inset-0 rounded-ui;
+	}
+
+	.color-picker-preview-info {
+		@apply flex flex-col gap-1 flex-1 min-w-0;
+	}
+
+	.color-picker-preview-hex {
+		@apply font-mono text-base font-semibold uppercase;
+	}
+
+	.color-picker-preview-foreground {
+		@apply text-xs text-on-muted truncate;
+	}
+}

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-on-primary text-primary;
+			&.is-active {
+				@apply bg-on-primary/90;
+			}
+		}
 
-	.control.is-primary {
-		@apply bg-on-primary text-primary rounded-ui;
-	}
+		&.is-secondary {
+			@apply bg-on-secondary text-secondary;
+			&.is-active {
+				@apply bg-on-secondary/90;
+			}
+		}
 
-	.control.is-solid.is-primary {
-		@apply bg-primary text-on-primary;
-	}
+		&.is-muted {
+			@apply bg-muted text-on-muted;
+			&.is-active {
+				@apply bg-muted/90;
+			}
+		}
 
-	.control.is-primary.is-active {
-		@apply bg-on-primary/90;
-	}
+		&.is-success {
+			@apply bg-on-success text-success;
+			&.is-active {
+				@apply bg-on-success/90;
+			}
+		}
 
-	.control.is-solid.is-primary.is-active {
-		@apply bg-primary/90;
-	}
+		&.is-info {
+			@apply bg-on-info text-info;
+			&.is-active {
+				@apply bg-on-info/90;
+			}
+		}
 
-	.control.is-secondary {
-		@apply bg-on-secondary text-secondary rounded-ui;
-	}
+		&.is-danger {
+			@apply bg-on-danger text-danger;
+			&.is-active {
+				@apply bg-on-danger/90;
+			}
+		}
 
-	.control.is-solid.is-secondary {
-		@apply bg-secondary text-on-secondary;
+		&.is-warning {
+			@apply bg-on-warning text-warning;
+			&.is-active {
+				@apply bg-on-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;