ui-svelte 0.2.11 → 0.2.13

package/dist/form/css/editor.css

@@ -0,0 +1,367 @@
+@layer components {
+	.editor {
+		@apply relative flex flex-col w-full outline-0 ring-0;
+		@apply transition-all duration-300 ease-in-out;
+	}
+
+	.editor-label {
+		@apply absolute left-3 top-3 pr-6 text-left truncate z-10;
+		@apply transition-all duration-300;
+	}
+
+	.editor-label.is-active {
+		@apply text-xs left-3 top-1 translate-y-px;
+	}
+
+	.editor.is-sm {
+		@apply text-sm;
+
+		.editor-toolbar {
+			@apply p-1 gap-1;
+		}
+
+		.editor-toolbar-btn {
+			@apply size-6;
+		}
+
+		.editor-content {
+			@apply p-2 text-sm;
+		}
+	}
+
+	.editor.is-md {
+		@apply text-base;
+
+		.editor-toolbar {
+			@apply p-1.5 gap-1.5;
+		}
+
+		.editor-toolbar-btn {
+			@apply size-7;
+		}
+
+		.editor-content {
+			@apply p-3 text-base;
+		}
+	}
+
+	.editor.is-lg {
+		@apply text-lg;
+
+		.editor-toolbar {
+			@apply p-2 gap-2;
+		}
+
+		.editor-toolbar-btn {
+			@apply size-8;
+		}
+
+		.editor-content {
+			@apply p-4 text-lg;
+		}
+
+		.editor-label.is-active {
+			@apply text-sm;
+		}
+	}
+
+	.editor.is-float {
+		.editor-content {
+			@apply pt-8;
+		}
+	}
+
+	.editor.is-soft {
+		@apply rounded-ui;
+
+		&.is-primary {
+			@apply bg-soft-primary text-primary;
+			&.is-active {
+				@apply bg-soft-primary/90;
+			}
+		}
+
+		&.is-secondary {
+			@apply bg-soft-secondary text-secondary;
+			&.is-active {
+				@apply bg-soft-secondary/90;
+			}
+		}
+
+		&.is-muted {
+			@apply bg-soft-muted text-muted;
+			&.is-active {
+				@apply bg-soft-muted/90;
+			}
+		}
+
+		&.is-success {
+			@apply bg-soft-success text-success;
+			&.is-active {
+				@apply bg-soft-success/90;
+			}
+		}
+
+		&.is-info {
+			@apply bg-soft-info text-info;
+			&.is-active {
+				@apply bg-soft-info/90;
+			}
+		}
+
+		&.is-danger {
+			@apply bg-soft-danger text-danger;
+			&.is-active {
+				@apply bg-soft-danger/90;
+			}
+		}
+
+		&.is-warning {
+			@apply bg-soft-warning text-warning;
+			&.is-active {
+				@apply bg-soft-warning/90;
+			}
+		}
+	}
+
+	.editor.is-solid {
+		@apply rounded-ui;
+
+		&.is-primary {
+			@apply bg-primary text-on-primary;
+			&.is-active {
+				@apply bg-primary/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;
+			}
+		}
+
+		&.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;
+			}
+		}
+	}
+
+	.editor.is-outlined {
+		@apply rounded-ui inset-ring;
+
+		&.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;
+		}
+	}
+
+	.editor.is-line {
+		@apply box-border border-b;
+
+		.editor-label {
+			@apply left-0;
+		}
+
+		&.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;
+		}
+
+		.editor-toolbar {
+			@apply px-0;
+		}
+
+		.editor-content {
+			@apply px-0;
+		}
+	}
+
+	.editor.is-disabled {
+		@apply opacity-50 cursor-not-allowed;
+
+		.editor-content {
+			@apply pointer-events-none;
+		}
+	}
+
+	.editor.is-readonly {
+		.editor-content {
+			@apply cursor-default;
+		}
+	}
+
+	.editor.is-error {
+		@apply inset-ring-danger;
+	}
+
+	.editor-toolbar {
+		@apply flex flex-wrap items-center border-b border-current/10;
+	}
+
+	.editor-toolbar-group {
+		@apply flex items-center gap-0.5;
+	}
+
+	.editor-toolbar-divider {
+		@apply w-px h-5 bg-current/20 mx-1;
+	}
+
+	.editor-toolbar-btn {
+		@apply flex items-center justify-center;
+		@apply rounded transition-all duration-200;
+		@apply hover:bg-current/10 active:scale-95;
+		@apply disabled:opacity-40 disabled:pointer-events-none;
+		@apply cursor-pointer;
+	}
+
+	.editor-toolbar-btn.is-active {
+		@apply bg-current/20;
+	}
+
+	.editor-toolbar-btn svg {
+		@apply size-4;
+	}
+
+	.editor-content-wrapper {
+		@apply relative flex-1;
+	}
+
+	.editor-placeholder {
+		@apply absolute top-0 left-0 right-0 p-3 pointer-events-none opacity-50;
+	}
+
+	.editor-content {
+		@apply w-full outline-none;
+		@apply overflow-y-auto;
+	}
+
+	.editor-content h1 {
+		@apply text-3xl font-bold mb-4;
+	}
+
+	.editor-content h2 {
+		@apply text-2xl font-bold mb-3;
+	}
+
+	.editor-content h3 {
+		@apply text-xl font-bold mb-2;
+	}
+
+	.editor-content p {
+		@apply mb-2;
+	}
+
+	.editor-content ul,
+	.editor-content ol {
+		@apply pl-6 mb-2;
+	}
+
+	.editor-content ul {
+		@apply list-disc;
+	}
+
+	.editor-content ol {
+		@apply list-decimal;
+	}
+
+	.editor-content li {
+		@apply mb-1;
+	}
+
+	.editor-content blockquote {
+		@apply border-l-4 border-current/30 pl-4 italic my-4 opacity-80;
+	}
+
+	.editor-content pre {
+		@apply bg-current/5 p-3 rounded font-mono text-sm overflow-x-auto my-4;
+	}
+
+	.editor-content code {
+		@apply bg-current/10 px-1.5 py-0.5 rounded font-mono text-sm;
+	}
+
+	.editor-content a {
+		@apply underline text-primary;
+	}
+
+	.editor-content img {
+		@apply max-w-full h-auto rounded my-4;
+	}
+
+	.editor-content hr {
+		@apply border-current/20 my-4;
+	}
+}

package/dist/form/css/field.css

@@ -14,4 +14,8 @@
 	.field-help.is-danger {
 		@apply text-danger;
 	}
+
+	.field-pin-wrapper {
+		@apply flex gap-2 w-fit;
+	}
 }

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-soft-primary/10 text-primary border-primary/30;
+		}
+		&.is-secondary {
+			@apply bg-soft-secondary/10 text-secondary border-secondary/30;
+		}
+		&.is-muted {
+			@apply bg-soft-muted/50 text-on-muted border-muted;
+		}
+		&.is-success {
+			@apply bg-soft-success/10 text-success border-success/30;
+		}
+		&.is-info {
+			@apply bg-soft-info/10 text-info border-info/30;
+		}
+		&.is-warning {
+			@apply bg-soft-warning/10 text-warning border-warning/30;
+		}
+		&.is-danger {
+			@apply bg-soft-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,8 +259,16 @@
 		@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);
+		-webkit-touch-callout: none;
+		-webkit-user-select: none;
+		-webkit-tap-highlight-color: transparent;
+		touch-action: none;
+	}
+
+	.crop-area.is-circle {
+		@apply rounded-full;
 	}
 
 	.crop-area:hover {
@@ -63,7 +277,7 @@
 
 	.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 +299,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 +344,34 @@
 		@apply scale-125 bg-primary/90;
 	}
 
-	.image-cropper-controls {
-		@apply flex items-center justify-end gap-2;
+	@media (pointer: coarse) {
+		.resize-handle {
+			@apply opacity-100 w-5 h-5;
+			touch-action: none;
+		}
+
+		.resize-handle.handle-n,
+		.resize-handle.handle-s {
+			@apply w-10 h-3;
+		}
+
+		.resize-handle.handle-e,
+		.resize-handle.handle-w {
+			@apply w-3 h-10;
+		}
 	}
 
 	.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;
@@ -29,6 +29,31 @@
 					}
 				}
 
+				&.is-success {
+					@apply checked:border-success;
+					&:checked {
+						@apply after:bg-success;
+					}
+				}
+				&.is-info {
+					@apply checked:border-info;
+					&:checked {
+						@apply after:bg-info;
+					}
+				}
+				&.is-danger {
+					@apply checked:border-danger;
+					&:checked {
+						@apply after:bg-danger;
+					}
+				}
+				&.is-warning {
+					@apply checked:border-warning;
+					&:checked {
+						@apply after:bg-warning;
+					}
+				}
+
 				&.is-sm {
 					@apply w-4 h-4;
 					&:checked {