ui-svelte 0.2.10 → 0.2.12

package/dist/form/css/textarea.css

@@ -7,124 +7,227 @@
 	.textarea-control-label {
 		@apply absolute left-3 top-3;
 		@apply transition-all duration-300;
-	}
 
-	.textarea-control-label.is-active {
-		@apply text-xs left-3 top-1 translate-y-px!;
+		&.is-active {
+			@apply text-xs left-3 top-1 translate-y-px!;
+		}
 	}
 
-	.textarea-control.is-sm {
-		@apply text-sm py-2;
-	}
+	.textarea-control {
+		&.is-sm {
+			@apply text-sm py-2;
+		}
 
-	.textarea-control.is-md {
-		@apply text-base py-2.5;
-	}
+		&.is-md {
+			@apply text-base py-2.5;
+		}
 
-	.textarea-control.is-lg {
-		@apply text-xl py-3;
+		&.is-lg {
+			@apply text-xl py-3;
 
-		.textarea-control-label.is-active {
-			@apply text-sm;
+			.textarea-control-label.is-active {
+				@apply text-sm;
+			}
 		}
-	}
 
-	.textarea-control.is-float.is-sm {
-		@apply pt-5 pb-2;
-	}
+		&.is-float {
+			&.is-sm {
+				@apply pt-5 pb-2;
+			}
 
-	.textarea-control.is-float.is-md {
-		@apply pt-6 pb-2.5;
-	}
+			&.is-md {
+				@apply pt-6 pb-2.5;
+			}
 
-	.textarea-control.is-float.is-lg {
-		@apply pt-7 pb-3;
+			&.is-lg {
+				@apply pt-7 pb-3;
+			}
+		}
 	}
 
-	.textarea-control.is-primary {
-		@apply bg-on-primary text-primary rounded-ui;
-	}
+	.textarea-control.is-soft {
+		@apply rounded-ui;
 
-	.textarea-control.is-solid.is-primary {
-		@apply bg-primary text-on-primary;
-	}
+		&.is-primary {
+			@apply bg-on-primary text-primary;
+			&.is-active {
+				@apply bg-on-primary/90;
+			}
+		}
 
-	.textarea-control.is-primary.is-active {
-		@apply bg-on-primary/90;
-	}
+		&.is-secondary {
+			@apply bg-on-secondary text-secondary;
+			&.is-active {
+				@apply bg-on-secondary/90;
+			}
+		}
 
-	.textarea-control.is-solid.is-primary.is-active {
-		@apply bg-primary/90;
-	}
+		&.is-muted {
+			@apply bg-muted text-on-muted;
+			&.is-active {
+				@apply bg-muted/90;
+			}
+		}
 
-	.textarea-control.is-secondary {
-		@apply bg-on-secondary text-secondary rounded-ui;
-	}
+		&.is-success {
+			@apply bg-on-success text-success;
+			&.is-active {
+				@apply bg-on-success/90;
+			}
+		}
 
-	.textarea-control.is-solid.is-secondary {
-		@apply bg-secondary text-on-secondary;
-	}
+		&.is-info {
+			@apply bg-on-info text-info;
+			&.is-active {
+				@apply bg-on-info/90;
+			}
+		}
 
-	.textarea-control.is-secondary.is-active {
-		@apply bg-on-secondary/90;
-	}
+		&.is-danger {
+			@apply bg-on-danger text-danger;
+			&.is-active {
+				@apply bg-on-danger/90;
+			}
+		}
 
-	.textarea-control.is-solid.is-secondary.is-active {
-		@apply bg-secondary/90;
+		&.is-warning {
+			@apply bg-on-warning text-warning;
+			&.is-active {
+				@apply bg-on-warning/90;
+			}
+		}
 	}
 
-	.textarea-control.is-muted {
-		@apply bg-muted text-on-muted rounded-ui;
-	}
+	.textarea-control.is-solid {
+		@apply rounded-ui;
 
-	.textarea-control.is-solid.is-muted {
-		@apply bg-on-muted text-muted;
-	}
+		&.is-primary {
+			@apply bg-primary text-on-primary;
+			&.is-active {
+				@apply bg-primary/90;
+			}
+		}
 
-	.textarea-control.is-muted.is-active {
-		@apply bg-muted/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;
+			}
+		}
 
-	.textarea-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;
+			}
+		}
 	}
 
 	.textarea-control.is-outlined {
-		@apply inset-ring-2 inset-ring-muted rounded-ui;
-	}
+		@apply rounded-ui inset-ring;
+
+		&.is-active {
+			@apply inset-ring-2;
+		}
 
-	.textarea-control.is-outlined.is-active {
-		@apply inset-ring-2 inset-ring-primary;
+		&.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;
+		}
 	}
 
 	.textarea-control.is-line {
-		@apply box-border border-b-2 border-muted text-on-muted px-0;
+		@apply box-border border-b px-0;
 
 		.textarea-control-label {
 			@apply left-0!;
 		}
-	}
 
-	.textarea-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;
+		}
 	}
 
 	.textarea-control-input {
 		@apply appearance-none flex-1 w-full border-none outline-none;
-		@apply placeholder:transition-opacity placeholder:duration-200;
+		@apply placeholder:transition-opacity placeholder:duration-300;
 		@apply bg-transparent;
 		@apply min-h-12;
-	}
-
-	.textarea-control-input.invisible {
-		@apply opacity-0;
-	}
-
-	.textarea-control-input {
 		resize: none;
-	}
 
-	.textarea-control-input.is-resizable {
-		resize: both;
+		&.invisible {
+			@apply opacity-0;
+		}
+
+		&.is-resizable {
+			resize: both;
+		}
 	}
 }

package/dist/form/css/toggle.css

@@ -4,11 +4,11 @@
 
 		.toggle-input {
 			@apply relative appearance-none w-10 h-6 rounded-full;
-			@apply bg-muted transition-colors duration-200 ease-in-out;
+			@apply bg-muted transition-colors duration-300 ease-in-out;
 			@apply focus:outline-none;
 			@apply before:content-[''] before:absolute before:h-4 before:w-4 before:left-1 before:top-1;
 			@apply before:bg-white before:rounded-full before:shadow;
-			@apply before:transition-transform before:duration-200 before:ease-in-out;
+			@apply before:transition-transform before:duration-300 before:ease-in-out;
 			@apply checked:before:translate-x-4;
 		}
 
@@ -23,5 +23,14 @@
 				@apply bg-on-muted;
 			}
 		}
+
+		.toggle-label-left,
+		.toggle-label-right {
+			@apply text-muted transition-colors duration-300;
+
+			&.is-active {
+				@apply text-on-muted;
+			}
+		}
 	}
 }

package/dist/hooks/use-table.svelte.d.ts

@@ -10,6 +10,7 @@ interface Column {
 export interface TableState {
     data: any[];
     isLoading: boolean;
+    hasInitialized: boolean;
     error: any;
     sortBy?: string;
     sortOrder: 'ASC' | 'DESC';

package/dist/hooks/use-table.svelte.js

@@ -9,6 +9,7 @@ export const useTable = (config) => {
     let sortOrder = $state(config.initialSortOrder ?? 'ASC');
     let search = $state(config.initialSearch ?? '');
     let isLoading = $state(false);
+    let hasInitialized = $state(false);
     let error = $state(null);
     const selectable = config.selectable ?? false;
     const rowKey = config.rowKey ?? 'id';
@@ -82,6 +83,7 @@ export const useTable = (config) => {
         const startIndex = (page - 1) * pageSize;
         const endIndex = startIndex + pageSize;
         data = processedData.slice(startIndex, endIndex);
+        hasInitialized = true;
     };
     const fetchData = async () => {
         if (isManualMode) {
@@ -125,6 +127,7 @@ export const useTable = (config) => {
         catch (err) {
             error = err;
             config.onError?.(err);
+            hasInitialized = true;
         }
         finally {
             isLoading = false;
@@ -307,6 +310,9 @@ export const useTable = (config) => {
         get isLoading() {
             return isLoading;
         },
+        get hasInitialized() {
+            return hasInitialized;
+        },
         get error() {
             return error;
         },

package/dist/icons/index.d.ts

@@ -90,7 +90,7 @@ export declare const SpeakerMute24RegularIcon: {
     body: string;
     viewbox: string;
 };
-export declare const Pause24RegularIcon: {
+export declare const PauseFilledIcon: {
     body: string;
     viewbox: string;
 };
@@ -98,7 +98,7 @@ export declare const PictureInPicture24RegularIcon: {
     body: string;
     viewbox: string;
 };
-export declare const Play24RegularIcon: {
+export declare const PlayFilledIcon: {
     body: string;
     viewbox: string;
 };
@@ -130,3 +130,39 @@ export declare const Warning24RegularIcon: {
     body: string;
     viewbox: string;
 };
+export declare const EyeShowRegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const EyeOffRegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const ArrowLeftRegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const ArrowRightRegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const ArrowDownloadRegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const ArrowUploadRegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const ImageAddRegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const ArrowResetRegularIcon: {
+    body: string;
+    viewbox: string;
+};
+export declare const CropRegularIcon: {
+    body: string;
+    viewbox: string;
+};

package/dist/icons/index.js

@@ -90,16 +90,16 @@ export const SpeakerMute24RegularIcon = {
     body: '<path fill="currentColor" d="M12.92 3.315C13.726 2.6 15 3.171 15 4.25v15.495c0 1.079-1.274 1.651-2.08.934l-4.492-3.993a.75.75 0 0 0-.498-.19H4.25A2.25 2.25 0 0 1 2 14.246V9.748a2.25 2.25 0 0 1 2.25-2.25h3.68a.75.75 0 0 0 .498-.19zm.58 1.491L9.425 8.43a2.25 2.25 0 0 1-1.495.568H4.25a.75.75 0 0 0-.75.75v4.498c0 .414.336.75.75.75h3.68a2.25 2.25 0 0 1 1.495.569l4.075 3.623zm2.72 4.413a.75.75 0 0 1 1.06 0L19 10.94l1.72-1.72a.75.75 0 1 1 1.06 1.06L20.06 12l1.72 1.72a.75.75 0 0 1-1.06 1.06L19 13.06l-1.72 1.72a.75.75 0 1 1-1.06-1.06L17.94 12l-1.72-1.72a.75.75 0 0 1 0-1.06"/>',
     viewbox: '0 0 24 24'
 };
-export const Pause24RegularIcon = {
-    body: '<path fill="currentColor" d="M6.25 3A2.25 2.25 0 0 0 4 5.25v13.5A2.25 2.25 0 0 0 6.25 21h2.5A2.25 2.25 0 0 0 11 18.75V5.25A2.25 2.25 0 0 0 8.75 3zM5.5 5.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1-.75-.75zM15.25 3A2.25 2.25 0 0 0 13 5.25v13.5A2.25 2.25 0 0 0 15.25 21h2.5A2.25 2.25 0 0 0 20 18.75V5.25A2.25 2.25 0 0 0 17.75 3zm-.75 2.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 .75.75v13.5a.75.75 0 0 1-.75.75h-2.5a.75.75 0 0 1-.75-.75z"/>',
+export const PauseFilledIcon = {
+    body: '<path fill="currentColor" d="M5.746 3a1.75 1.75 0 0 0-1.75 1.75v14.5c0 .966.784 1.75 1.75 1.75h3.5a1.75 1.75 0 0 0 1.75-1.75V4.75A1.75 1.75 0 0 0 9.246 3zm9 0a1.75 1.75 0 0 0-1.75 1.75v14.5c0 .966.784 1.75 1.75 1.75h3.5a1.75 1.75 0 0 0 1.75-1.75V4.75A1.75 1.75 0 0 0 18.246 3z"/>',
     viewbox: '0 0 24 24'
 };
 export const PictureInPicture24RegularIcon = {
     body: '<path fill="currentColor" d="M2 6.25A3.25 3.25 0 0 1 5.25 3h13.5A3.25 3.25 0 0 1 22 6.25V12h-1.5V6.25a1.75 1.75 0 0 0-1.75-1.75H5.25A1.75 1.75 0 0 0 3.5 6.25v9.5c0 .966.784 1.75 1.75 1.75H11V19H5.25A3.25 3.25 0 0 1 2 15.75zM14 13a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-5a2 2 0 0 0-2-2z"/>',
     viewbox: '0 0 24 24'
 };
-export const Play24RegularIcon = {
-    body: '<path fill="currentColor" d="M7.608 4.615a.75.75 0 0 0-1.108.659v13.452a.75.75 0 0 0 1.108.659l12.362-6.726a.75.75 0 0 0 0-1.318zM5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.727c1.566.852 1.566 3.1 0 3.952L8.325 20.702C6.826 21.518 5 20.432 5 18.726z"/>',
+export const PlayFilledIcon = {
+    body: '<path fill="currentColor" d="M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.727c1.566.852 1.566 3.1 0 3.952L8.325 20.702C6.826 21.518 5 20.432 5 18.726z"/>',
     viewbox: '0 0 24 24'
 };
 export const Record24RegularIcon = {
@@ -130,3 +130,39 @@ export const Warning24RegularIcon = {
     body: '<path fill="currentColor" d="M13 17a.999.999 0 1 0-1.998 0a.999.999 0 0 0 1.997 0m-.26-7.853a.75.75 0 0 0-1.493.103l.004 4.501l.007.102a.75.75 0 0 0 1.493-.103l-.004-4.502zm1.23-5.488c-.857-1.548-3.082-1.548-3.938 0L2.286 17.66c-.83 1.5.255 3.34 1.97 3.34h15.49c1.714 0 2.799-1.84 1.969-3.34zm-2.626.726a.75.75 0 0 1 1.313 0l7.746 14.002a.75.75 0 0 1-.657 1.113H4.256a.75.75 0 0 1-.657-1.113z"/>',
     viewbox: '0 0 24 24'
 };
+export const EyeShowRegularIcon = {
+    body: '<g fill="none"><path d="M12 9.005a4 4 0 1 1 0 8a4 4 0 0 1 0-8zm0 1.5a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM12 5.5c4.613 0 8.596 3.15 9.701 7.564a.75.75 0 1 1-1.455.365a8.503 8.503 0 0 0-16.493.004a.75.75 0 0 1-1.455-.363A10.003 10.003 0 0 1 12 5.5z" fill="currentColor"/></g>',
+    viewbox: '0 0 24 24'
+};
+export const EyeOffRegularIcon = {
+    body: '<path fill="currentColor" d="M2.22 2.22a.75.75 0 0 0-.073.976l.073.084l4.034 4.035a10 10 0 0 0-3.955 5.75a.75.75 0 0 0 1.455.364a8.5 8.5 0 0 1 3.58-5.034l1.81 1.81A4 4 0 0 0 14.8 15.86l5.919 5.92a.75.75 0 0 0 1.133-.977l-.073-.084l-6.113-6.114l.001-.002l-1.2-1.198l-2.87-2.87h.002l-2.88-2.877l.001-.002l-1.133-1.13L3.28 2.22a.75.75 0 0 0-1.06 0m7.984 9.045l3.535 3.536a2.5 2.5 0 0 1-3.535-3.535M12 5.5c-1 0-1.97.148-2.889.425l1.237 1.236a8.503 8.503 0 0 1 9.899 6.272a.75.75 0 0 0 1.455-.363A10 10 0 0 0 12 5.5m.195 3.51l3.801 3.8a4.003 4.003 0 0 0-3.801-3.8"/>',
+    viewbox: '0 0 24 24'
+};
+export const ArrowLeftRegularIcon = {
+    body: '<path fill="currentColor" d="M10.733 19.79a.75.75 0 0 0 1.034-1.086L5.516 12.75H20.25a.75.75 0 0 0 0-1.5H5.516l6.251-5.955a.75.75 0 0 0-1.034-1.086l-7.42 7.067a1 1 0 0 0-.3.58a.8.8 0 0 0 .001.289a1 1 0 0 0 .3.579z"/>',
+    viewbox: '0 0 24 24'
+};
+export const ArrowRightRegularIcon = {
+    body: '<path fill="currentColor" d="M13.267 4.209a.75.75 0 0 0-1.034 1.086l6.251 5.955H3.75a.75.75 0 0 0 0 1.5h14.734l-6.251 5.954a.75.75 0 0 0 1.034 1.087l7.42-7.067a1 1 0 0 0 .3-.58a.8.8 0 0 0-.001-.29a1 1 0 0 0-.3-.578z"/>',
+    viewbox: '0 0 24 24'
+};
+export const ArrowDownloadRegularIcon = {
+    body: '<path fill="currentColor" d="M18.25 20.5a.75.75 0 1 1 0 1.5l-13 .005a.75.75 0 1 1 0-1.5zM11.648 2.014l.102-.007a.75.75 0 0 1 .743.648l.007.102l-.001 13.685l3.722-3.72a.75.75 0 0 1 .976-.073l.085.073a.75.75 0 0 1 .072.976l-.073.084l-4.997 4.997a.75.75 0 0 1-.976.073l-.085-.073l-5.003-4.996a.75.75 0 0 1 .976-1.134l.084.072l3.719 3.714L11 2.756a.75.75 0 0 1 .648-.743l.102-.007z"/>',
+    viewbox: '0 0 24 24'
+};
+export const ArrowUploadRegularIcon = {
+    body: '<path fill="currentColor" d="M18.25 3.51a.75.75 0 1 0 0-1.5l-13-.004a.75.75 0 1 0 0 1.5zm-6.602 18.488l.102.007a.75.75 0 0 0 .743-.649l.007-.101l-.001-13.685l3.722 3.72a.75.75 0 0 0 .976.073l.085-.073a.75.75 0 0 0 .072-.977l-.073-.084l-4.997-4.996a.75.75 0 0 0-.976-.073l-.085.072L6.22 10.23a.75.75 0 0 0 .976 1.134l.084-.073l3.719-3.713L11 21.255c0 .38.282.693.648.743"/>',
+    viewbox: '0 0 24 24'
+};
+export const ImageAddRegularIcon = {
+    body: '<path fill="currentColor" d="M12 6.5a5.5 5.5 0 1 0-11 0a5.5 5.5 0 0 0 11 0M7 7l.001 2.504a.5.5 0 0 1-1 0V7H3.496a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 1 0V6h2.497a.5.5 0 0 1 0 1zm10.75-2.5h-5.063a6.5 6.5 0 0 0-.709-1.5h5.772A3.25 3.25 0 0 1 21 6.25v11.5A3.25 3.25 0 0 1 17.75 21H6.25A3.25 3.25 0 0 1 3 17.75v-5.772c.463.297.967.536 1.5.709v5.063q.001.313.103.594l5.823-5.701a2.25 2.25 0 0 1 3.02-.116l.128.116l5.822 5.702q.102-.28.104-.595V6.25a1.75 1.75 0 0 0-1.75-1.75m.58 14.901l-5.805-5.686a.75.75 0 0 0-.966-.071l-.084.07l-5.807 5.687q.274.097.582.099h11.5c.203 0 .399-.035.58-.099M15.253 6.5a2.252 2.252 0 1 1 0 4.504a2.252 2.252 0 0 1 0-4.504m0 1.5a.752.752 0 1 0 0 1.504a.752.752 0 0 0 0-1.504"/>',
+    viewbox: '0 0 24 24'
+};
+export const ArrowResetRegularIcon = {
+    body: '<path fill="currentColor" d="M6.78 2.72a.75.75 0 0 1 0 1.06L4.56 6h8.69a7.75 7.75 0 1 1-7.75 7.75a.75.75 0 0 1 1.5 0a6.25 6.25 0 1 0 6.25-6.25H4.56l2.22 2.22a.75.75 0 1 1-1.06 1.06l-3.5-3.5a.75.75 0 0 1 0-1.06l3.5-3.5a.75.75 0 0 1 1.06 0"/>',
+    viewbox: '0 0 24 24'
+};
+export const CropRegularIcon = {
+    body: '<path fill="currentColor" d="M21.25 17a.75.75 0 0 1 .102 1.493l-.102.007H18.5v2.75a.75.75 0 0 1-1.493.102L17 21.25V18.5H8.75a3.25 3.25 0 0 1-3.245-3.066L5.5 15.25L5.499 7H2.75a.75.75 0 0 1-.102-1.493L2.75 5.5h2.749L5.5 2.75a.75.75 0 0 1 1.493-.102L7 2.75L6.999 5.5H7V7h-.001L7 15.25a1.75 1.75 0 0 0 1.606 1.744L8.75 17zM8 5.5h7.25a3.25 3.25 0 0 1 3.245 3.066l.005.184V16H17V8.75a1.75 1.75 0 0 0-1.607-1.744L15.25 7H8z"/>',
+    viewbox: '0 0 24 24'
+};

package/dist/index.css

@@ -4,8 +4,13 @@
 @import './css/utilities.css';
 @import './css/animations.css';
 @import './css/base.css';
+@import './css/decorations.css';
+@import './css/rich-text.css';
+@import './css/transitions.css';
+@import './css/typography.css';
 
 @import './control/css/btn.css';
+@import './control/css/image.css';
 @import './control/css/media.css';
 @import './control/css/video.css';
 @import './control/css/toggle-group.css';
@@ -33,20 +38,26 @@
 @import './display/css/item.css';
 @import './display/css/marquee.css';
 @import './display/css/section.css';
+@import './display/css/skeleton.css';
 @import './display/css/table.css';
+@import './display/css/map.css';
 
 @import './form/css/checkbox.css';
 @import './form/css/combo-box.css';
 @import './form/css/control.css';
 @import './form/css/csv-field.css';
 @import './form/css/date.css';
+@import './form/css/date-range.css';
+@import './form/css/drag-drop.css';
 @import './form/css/dropzone.css';
+@import './form/css/editor.css';
 @import './form/css/field.css';
 @import './form/css/image-cropper.css';
 @import './form/css/password.css';
 @import './form/css/radio-group.css';
 @import './form/css/slider.css';
 @import './form/css/select.css';
+@import './form/css/color-field.css';
 @import './form/css/textarea.css';
 @import './form/css/toggle.css';
 
@@ -60,10 +71,12 @@
 @import './navigation/css/nav-menu.css';
 @import './navigation/css/footer-nav.css';
 @import './navigation/css/footer-group.css';
+@import './navigation/css/pagination.css';
 @import './navigation/css/side-nav.css';
 @import './navigation/css/tabs.css';
 
 @import './overlay/css/modal.css';
+@import './overlay/css/command.css';
 @import './overlay/css/drawer.css';
 @import './overlay/css/dropdown.css';
 @import './overlay/css/hovercard.css';
@@ -133,6 +146,8 @@
 	--color-on-danger: var(--on-danger, oklch(93.6% 0.032 17.717));
 	/* red-100  */
 
+	--radius-avatar: calc(infinity * 1px);
+	--radius-box: 0.75rem;
 	--radius-ui: 0.75rem;
 	--scrollbar-size: 6px;
-}
+}

package/dist/index.d.ts

@@ -6,6 +6,7 @@ import LineChart from './charts/LineChart.svelte';
 import PieChart from './charts/PieChart.svelte';
 import Audio from './control/Audio.svelte';
 import Button from './control/Button.svelte';
+import Image from './control/Image.svelte';
 import IconButton from './control/IconButton.svelte';
 import Record from './control/Record.svelte';
 import ToggleTheme from './control/ToggleTheme.svelte';
@@ -18,7 +19,7 @@ import AvatarGroup from './display/AvatarGroup.svelte';
 import Badge from './display/Badge.svelte';
 import Carousel from './display/Carousel.svelte';
 import Card from './display/Card.svelte';
-import ChatBox from './display/ChatBox.svelte';
+import ChatBox, { type PromptMessage, type PromptState } from './display/ChatBox.svelte';
 import Chip from './display/Chip.svelte';
 import Code from './display/Code.svelte';
 import Collapsible from './display/Collapsible.svelte';
@@ -28,12 +29,18 @@ import Icon, { type IconData } from './display/Icon.svelte';
 import Item from './display/Item.svelte';
 import Marquee from './display/Marquee.svelte';
 import Section from './display/Section.svelte';
+import Skeleton from './display/Skeleton.svelte';
+import Map, { type LatLng, type MapMarker, type RouteInfo } from './display/Map.svelte';
 import Table from './display/Table.svelte';
 import Checkbox from './form/Checkbox.svelte';
+import ColorField from './form/ColorField.svelte';
 import ComboBox from './form/ComboBox.svelte';
 import CsvField from './form/CsvField.svelte';
 import DateField from './form/DateField.svelte';
+import DateRange from './form/DateRange.svelte';
+import DragDrop, { type DragDropItem, type DragDropGroup } from './form/DragDrop.svelte';
 import Dropzone from './form/Dropzone.svelte';
+import Editor from './form/Editor.svelte';
 import ImageCropper from './form/ImageCropper.svelte';
 import TextField from './form/TextField.svelte';
 import PasswordField from './form/PasswordField.svelte';
@@ -53,6 +60,7 @@ import NavMenu from './navigation/NavMenu.svelte';
 import BottomNav from './navigation/BottomNav.svelte';
 import FooterNav from './navigation/FooterNav.svelte';
 import FooterGroup from './navigation/FooterGroup.svelte';
+import Pagination from './navigation/Pagination.svelte';
 import SideNav, { type SideNavItem, type SideNavSubItem } from './navigation/SideNav.svelte';
 import Tabs from './navigation/Tabs.svelte';
 import AlertDialog from './overlay/AlertDialog.svelte';
@@ -76,5 +84,5 @@ import { useAuth } from './hooks/use-auth.svelte.js';
 import { theme } from './stores/theme.svelte.js';
 import { useSearch } from './hooks/use-search.svelte.js';
 import { useChat } from './hooks/use-chat.svelte.js';
-export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleGroup, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
-export type { IconData, SideNavItem, SideNavSubItem };
+export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, ColorField, Collapsible, Command, ComboBox, CsvField, DateField, DateRange, Drawer, Dropzone, Divider, DragDrop, Dropdown, Editor, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, Image, ImageCropper, Item, initLanguage, Modal, Map, Marquee, NavMenu, Pagination, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Skeleton, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleGroup, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
+export type { IconData, SideNavItem, SideNavSubItem, DragDropItem, DragDropGroup, PromptMessage, PromptState, LatLng, MapMarker, RouteInfo };

package/dist/index.js

@@ -6,6 +6,7 @@ import LineChart from './charts/LineChart.svelte';
 import PieChart from './charts/PieChart.svelte';
 import Audio from './control/Audio.svelte';
 import Button from './control/Button.svelte';
+import Image from './control/Image.svelte';
 import IconButton from './control/IconButton.svelte';
 import Record from './control/Record.svelte';
 import ToggleTheme from './control/ToggleTheme.svelte';
@@ -18,7 +19,7 @@ import AvatarGroup from './display/AvatarGroup.svelte';
 import Badge from './display/Badge.svelte';
 import Carousel from './display/Carousel.svelte';
 import Card from './display/Card.svelte';
-import ChatBox from './display/ChatBox.svelte';
+import ChatBox, {} from './display/ChatBox.svelte';
 import Chip from './display/Chip.svelte';
 import Code from './display/Code.svelte';
 import Collapsible from './display/Collapsible.svelte';
@@ -28,12 +29,18 @@ import Icon, {} from './display/Icon.svelte';
 import Item from './display/Item.svelte';
 import Marquee from './display/Marquee.svelte';
 import Section from './display/Section.svelte';
+import Skeleton from './display/Skeleton.svelte';
+import Map, {} from './display/Map.svelte';
 import Table from './display/Table.svelte';
 import Checkbox from './form/Checkbox.svelte';
+import ColorField from './form/ColorField.svelte';
 import ComboBox from './form/ComboBox.svelte';
 import CsvField from './form/CsvField.svelte';
 import DateField from './form/DateField.svelte';
+import DateRange from './form/DateRange.svelte';
+import DragDrop, {} from './form/DragDrop.svelte';
 import Dropzone from './form/Dropzone.svelte';
+import Editor from './form/Editor.svelte';
 import ImageCropper from './form/ImageCropper.svelte';
 import TextField from './form/TextField.svelte';
 import PasswordField from './form/PasswordField.svelte';
@@ -53,6 +60,7 @@ import NavMenu from './navigation/NavMenu.svelte';
 import BottomNav from './navigation/BottomNav.svelte';
 import FooterNav from './navigation/FooterNav.svelte';
 import FooterGroup from './navigation/FooterGroup.svelte';
+import Pagination from './navigation/Pagination.svelte';
 import SideNav, {} from './navigation/SideNav.svelte';
 import Tabs from './navigation/Tabs.svelte';
 import AlertDialog from './overlay/AlertDialog.svelte';
@@ -76,4 +84,4 @@ import { useAuth } from './hooks/use-auth.svelte.js';
 import { theme } from './stores/theme.svelte.js';
 import { useSearch } from './hooks/use-search.svelte.js';
 import { useChat } from './hooks/use-chat.svelte.js';
-export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, Collapsible, Command, ComboBox, CsvField, DateField, Drawer, Dropzone, Divider, Dropdown, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, ImageCropper, Item, initLanguage, Modal, Marquee, NavMenu, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleGroup, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };
+export { AreaChart, ArcChart, BarChart, Candlestick, LineChart, PieChart, Alert, AlertDialog, AppBar, Accordion, Avatar, AvatarGroup, Audio, Badge, Button, BottomNav, Carousel, Card, ChatBox, Checkbox, Chip, Code, ColorField, Collapsible, Command, ComboBox, CsvField, DateField, DateRange, Drawer, Dropzone, Divider, DragDrop, Dropdown, Editor, Empty, Footer, FooterNav, FooterGroup, formatCurrency, formatDate, formatNumber, getWeekdays, i18n, Icon, IconButton, Image, ImageCropper, Item, initLanguage, Modal, Map, Marquee, NavMenu, Pagination, PasswordField, PhoneField, PinField, plural, PopoverStack, Provider, RadioGroup, Record, Scaffold, Section, Skeleton, Select, setLanguage, Sidebar, SideNav, Slider, t, Table, Tabs, TextField, Textarea, theme, Toast, toast, Toggle, ToggleGroup, ToggleTheme, Tooltip, useAuth, useChat, useClipboard, useFetch, useForm, useLocalStorage, useScroll, useSearch, useTable, useWebSocket, Video };