ui-svelte 0.1.0

package/dist/form/css/dropzone.css

@@ -0,0 +1,133 @@
+@layer components {
+	.dropzone {
+		@apply relative w-full flex flex-col;
+	}
+
+	.dropzone-input {
+		@apply flex justify-center items-center border-2 border-dashed h-48 w-full;
+		@apply border-muted p-6 transition-all rounded-ui cursor-pointer;
+	}
+
+	.dropzone-input.is-active {
+		@apply border-primary bg-primary/5;
+	}
+
+	.dropzone-input.is-disabled {
+		@apply opacity-50 cursor-not-allowed;
+	}
+
+	.dropzone-input.is-error {
+		@apply border-danger;
+	}
+
+	.dropzone-input.is-primary {
+		@apply bg-on-primary border-primary;
+	}
+
+	.dropzone-input.is-solid.is-primary {
+		@apply bg-primary border-primary;
+	}
+
+	.dropzone-input.is-secondary {
+		@apply bg-on-secondary border-secondary;
+	}
+
+	.dropzone-input.is-solid.is-secondary {
+		@apply bg-secondary border-secondary;
+	}
+
+	.dropzone-input.is-muted {
+		@apply bg-muted border-muted;
+	}
+
+	.dropzone-input.is-solid.is-muted {
+		@apply bg-on-muted border-on-muted;
+	}
+
+	.dropzone-input.is-outlined {
+		@apply border-muted;
+	}
+
+	.dropzone-input.is-outlined.is-active {
+		@apply border-primary;
+	}
+
+	.dropzone-input.is-line {
+		@apply border-0 border-b-2 border-muted rounded-none;
+	}
+
+	.dropzone-input.is-line.is-active {
+		@apply border-primary;
+	}
+
+	.dropzone-input.is-sm {
+		@apply h-32 text-sm;
+	}
+
+	.dropzone-input.is-md {
+		@apply h-48 text-base;
+	}
+
+	.dropzone-input.is-lg {
+		@apply h-64 text-lg;
+	}
+
+	.dropzone-content {
+		@apply flex flex-col items-center gap-2;
+	}
+
+	.dropzone-icon {
+		@apply h-8 w-8 opacity-50;
+	}
+
+	.dropzone-placeholder {
+		@apply text-sm text-center opacity-70;
+	}
+
+	.dropzone-files {
+		@apply mt-4 flex flex-col gap-2;
+	}
+
+	.dropzone-file {
+		@apply flex items-center justify-between gap-3 p-3 rounded-ui;
+		@apply border border-muted bg-muted/30;
+	}
+
+	.dropzone-file-preview {
+		@apply relative size-10 overflow-hidden rounded shrink-0;
+	}
+
+	.dropzone-file-image {
+		@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+		@apply w-full h-full object-cover;
+	}
+
+	.dropzone-file-icon {
+		@apply size-full flex items-center justify-center bg-muted;
+	}
+
+	.dropzone-file-icon svg {
+		@apply h-5 w-5 opacity-50;
+	}
+
+	.dropzone-file-info {
+		@apply flex flex-col min-w-0 flex-1;
+	}
+
+	.dropzone-file-name {
+		@apply text-sm font-medium truncate;
+	}
+
+	.dropzone-file-size {
+		@apply text-xs opacity-70;
+	}
+
+	.dropzone-file-remove {
+		@apply shrink-0 p-1.5 rounded transition-colors;
+		@apply hover:bg-muted/50;
+	}
+
+	.dropzone-file-remove svg {
+		@apply h-4 w-4;
+	}
+}

package/dist/form/css/field.css

@@ -0,0 +1,17 @@
+@layer components {
+	.field {
+		@apply flex flex-col gap-2 w-full;
+	}
+
+	.field-label {
+		@apply text-sm font-semibold;
+	}
+
+	.field-help {
+		@apply text-xs leading-none -mt-1;
+	}
+
+	.field-help.is-danger {
+		@apply text-danger;
+	}
+}

package/dist/form/css/image-cropper.css

@@ -0,0 +1,155 @@
+@layer components {
+	.image-cropper {
+		@apply flex flex-col gap-4 w-full;
+	}
+
+	.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;
+	}
+
+	.image-cropper-image {
+		@apply block max-w-full max-h-full;
+		@apply select-none pointer-events-none;
+		-webkit-user-drag: none;
+	}
+
+	.image-cropper-overlay {
+		@apply absolute inset-0 pointer-events-none;
+	}
+
+	.overlay-top,
+	.overlay-bottom,
+	.overlay-left,
+	.overlay-right {
+		@apply absolute bg-black/50 pointer-events-none;
+	}
+
+	.overlay-top {
+		@apply left-0 right-0 top-0;
+	}
+
+	.overlay-bottom {
+		@apply left-0 right-0 bottom-0;
+	}
+
+	.overlay-middle {
+		@apply absolute left-0 right-0;
+		@apply flex;
+	}
+
+	.overlay-left {
+		@apply h-full;
+	}
+
+	.overlay-right {
+		@apply absolute h-full;
+	}
+
+	.crop-area {
+		@apply absolute pointer-events-auto;
+		@apply border-2 border-primary;
+		@apply cursor-move;
+		@apply transition-shadow duration-200;
+		box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.5);
+	}
+
+	.crop-area:hover {
+		@apply border-primary/80;
+	}
+
+	.crop-grid {
+		@apply absolute inset-0 pointer-events-none;
+		@apply opacity-0 transition-opacity duration-200;
+	}
+
+	.crop-area:hover .crop-grid,
+	.crop-area:active .crop-grid {
+		@apply opacity-100;
+	}
+
+	.grid-line {
+		@apply absolute bg-primary/30;
+	}
+
+	.grid-line-v {
+		@apply top-0 bottom-0 w-px;
+	}
+
+	.grid-line-h {
+		@apply left-0 right-0 h-px;
+	}
+
+	.resize-handle {
+		@apply absolute bg-primary border-2 border-background;
+		@apply transition-all duration-200;
+		@apply opacity-0;
+		@apply z-10;
+	}
+
+	.crop-area:hover .resize-handle {
+		@apply opacity-100;
+	}
+
+	.resize-handle.handle-nw {
+		@apply -top-1 -left-1 w-3 h-3 cursor-nw-resize rounded-tl-sm;
+	}
+
+	.resize-handle.handle-n {
+		@apply -top-1 left-1/2 -translate-x-1/2 w-8 h-2 cursor-n-resize rounded-t-sm;
+	}
+
+	.resize-handle.handle-ne {
+		@apply -top-1 -right-1 w-3 h-3 cursor-ne-resize rounded-tr-sm;
+	}
+
+	.resize-handle.handle-e {
+		@apply top-1/2 -translate-y-1/2 -right-1 w-2 h-8 cursor-e-resize rounded-r-sm;
+	}
+
+	.resize-handle.handle-se {
+		@apply -bottom-1 -right-1 w-3 h-3 cursor-se-resize rounded-br-sm;
+	}
+
+	.resize-handle.handle-s {
+		@apply -bottom-1 left-1/2 -translate-x-1/2 w-8 h-2 cursor-s-resize rounded-b-sm;
+	}
+
+	.resize-handle.handle-sw {
+		@apply -bottom-1 -left-1 w-3 h-3 cursor-sw-resize rounded-bl-sm;
+	}
+
+	.resize-handle.handle-w {
+		@apply top-1/2 -translate-y-1/2 -left-1 w-2 h-8 cursor-w-resize rounded-l-sm;
+	}
+
+	.resize-handle:hover {
+		@apply scale-125 bg-primary/90;
+	}
+
+	.image-cropper-controls {
+		@apply flex items-center justify-end gap-2;
+	}
+
+	.image-cropper-canvas {
+		@apply hidden;
+	}
+
+	/* Responsive */
+	@media (max-width: 640px) {
+		.image-cropper-container {
+			min-height: 300px;
+		}
+
+		.image-cropper-controls {
+			@apply flex-col w-full;
+		}
+
+		.image-cropper-controls .btn {
+			@apply w-full;
+		}
+	}
+}

package/dist/form/css/password.css

@@ -0,0 +1,35 @@
+@layer components {
+	.field-strength {
+		@apply flex items-center gap-2 mt-1;
+	}
+	.field-strength-bar {
+		@apply flex-1 h-1.5 bg-muted rounded-full overflow-hidden;
+	}
+	.field-strength-fill {
+		@apply h-full transition-all duration-300 ease-in-out;
+	}
+	.field-strength-label {
+		@apply text-xs font-medium min-w-fit;
+	}
+	.field-strength-bars {
+		display: flex;
+		gap: 6px;
+		width: 100%;
+	}
+	.field-strength-bar-item {
+		@apply bg-muted;
+		flex: 1;
+		height: 6px;
+		border-radius: 2px;
+		transition: background-color 0.2s ease;
+	}
+	.field-strength-bar-item.active.weak {
+		background-color: var(--color-error);
+	}
+	.field-strength-bar-item.active.medium {
+		background-color: var(--color-warning);
+	}
+	.field-strength-bar-item.active.strong {
+		background-color: var(--color-success);
+	}
+}

package/dist/form/css/radio-group.css

@@ -0,0 +1,57 @@
+@layer components {
+	.radio-group {
+		@apply flex flex-wrap gap-4 justify-start;
+
+		.radio-item {
+			@apply flex justify-start items-center gap-3;
+
+			.radio {
+				@apply relative appearance-none border-2 border-muted rounded-full cursor-pointer;
+				@apply focus:outline-none;
+				@apply transition-colors duration-200;
+
+				&.is-primary {
+					@apply checked:border-primary;
+					&:checked {
+						@apply after:bg-primary;
+					}
+				}
+				&.is-secondary {
+					@apply checked:border-secondary;
+					&:checked {
+						@apply after:bg-secondary;
+					}
+				}
+				&.is-muted {
+					@apply checked:border-on-muted;
+					&:checked {
+						@apply after:bg-on-muted;
+					}
+				}
+
+				&.is-sm {
+					@apply w-4 h-4;
+					&:checked {
+						@apply after:w-2 after:h-2;
+					}
+				}
+				&.is-md {
+					@apply w-5 h-5;
+					&:checked {
+						@apply after:w-3 after:h-3;
+					}
+				}
+				&.is-lg {
+					@apply w-6 h-6;
+					&:checked {
+						@apply after:w-3.5 after:h-3.5;
+					}
+				}
+			}
+			.radio:checked {
+				@apply after:content-[''] after:absolute after:rounded-full;
+				@apply after:top-1/2 after:left-1/2 after:-translate-x-1/2 after:-translate-y-1/2;
+			}
+		}
+	}
+}

package/dist/form/css/select.css

@@ -0,0 +1,18 @@
+@layer components {
+	.select-popover {
+		@apply max-h-56 flex flex-col gap-2 p-2 my-1 overflow-hidden;
+		@apply bg-background text-on-background rounded-ui;
+		@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;
+		}
+	}
+
+	.select-options {
+		@apply flex flex-1 w-full min-w-0 flex-col gap-1 overflow-y-auto scrollbar-hide;
+	}
+}

package/dist/form/css/slider.css

@@ -0,0 +1,80 @@
+@layer components {
+	.slider-wrapper {
+		@apply flex flex-col gap-0.5 w-full;
+	}
+	.slider-info {
+		@apply flex justify-between items-center text-sm font-medium leading-none;
+	}
+	.slider {
+		@apply appearance-none w-full bg-muted rounded-full outline-none;
+		background: linear-gradient(
+			to right,
+			var(--slider-color) 0%,
+			var(--slider-color) var(--slider-progress),
+			theme('colors.muted') var(--slider-progress),
+			theme('colors.muted') 100%
+		);
+
+		&::-webkit-slider-thumb {
+			@apply appearance-none rounded-full cursor-pointer border border-white;
+		}
+		&::-moz-range-thumb {
+			@apply appearance-none rounded-full cursor-pointer border border-white;
+		}
+		&.is-primary {
+			--slider-color: var(--color-primary);
+			&::-webkit-slider-thumb {
+				@apply bg-primary;
+			}
+			&::-moz-range-thumb {
+				@apply bg-primary;
+			}
+		}
+
+		&.is-secondary {
+			--slider-color: var(--color-secondary);
+			&::-webkit-slider-thumb {
+				@apply bg-secondary;
+			}
+			&::-moz-range-thumb {
+				@apply bg-secondary;
+			}
+		}
+		&.is-muted {
+			--slider-color: var(--color-on-muted);
+			&::-webkit-slider-thumb {
+				@apply bg-on-muted;
+			}
+			&::-moz-range-thumb {
+				@apply bg-on-muted;
+			}
+		}
+		&.is-sm {
+			@apply h-1 my-1;
+			&::-webkit-slider-thumb {
+				@apply w-4 h-4;
+			}
+			&::-moz-range-thumb {
+				@apply w-4 h-4;
+			}
+		}
+		&.is-md {
+			@apply h-2 my-2;
+			&::-webkit-slider-thumb {
+				@apply w-6 h-6;
+			}
+			&::-moz-range-thumb {
+				@apply w-6 h-6;
+			}
+		}
+		&.is-lg {
+			@apply h-4 my-2;
+			&::-webkit-slider-thumb {
+				@apply w-8 h-8;
+			}
+			&::-moz-range-thumb {
+				@apply w-8 h-8;
+			}
+		}
+	}
+}

package/dist/form/css/textarea.css

@@ -0,0 +1,130 @@
+@layer components {
+	.textarea-control {
+		@apply relative flex w-full gap-2 px-3 outline-0 ring-0;
+		@apply transition-all duration-300 ease-in-out;
+	}
+
+	.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!;
+	}
+
+	.textarea-control.is-sm {
+		@apply text-sm py-2;
+	}
+
+	.textarea-control.is-md {
+		@apply text-base py-2.5;
+	}
+
+	.textarea-control.is-lg {
+		@apply text-xl py-3;
+
+		.textarea-control-label.is-active {
+			@apply text-sm;
+		}
+	}
+
+	.textarea-control.is-float.is-sm {
+		@apply pt-5 pb-2;
+	}
+
+	.textarea-control.is-float.is-md {
+		@apply pt-6 pb-2.5;
+	}
+
+	.textarea-control.is-float.is-lg {
+		@apply pt-7 pb-3;
+	}
+
+	.textarea-control.is-primary {
+		@apply bg-on-primary text-primary rounded-ui;
+	}
+
+	.textarea-control.is-solid.is-primary {
+		@apply bg-primary text-on-primary;
+	}
+
+	.textarea-control.is-primary.is-active {
+		@apply bg-on-primary/90;
+	}
+
+	.textarea-control.is-solid.is-primary.is-active {
+		@apply bg-primary/90;
+	}
+
+	.textarea-control.is-secondary {
+		@apply bg-on-secondary text-secondary rounded-ui;
+	}
+
+	.textarea-control.is-solid.is-secondary {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.textarea-control.is-secondary.is-active {
+		@apply bg-on-secondary/90;
+	}
+
+	.textarea-control.is-solid.is-secondary.is-active {
+		@apply bg-secondary/90;
+	}
+
+	.textarea-control.is-muted {
+		@apply bg-muted text-on-muted rounded-ui;
+	}
+
+	.textarea-control.is-solid.is-muted {
+		@apply bg-on-muted text-muted;
+	}
+
+	.textarea-control.is-muted.is-active {
+		@apply bg-muted/90;
+	}
+
+	.textarea-control.is-solid.is-muted.is-active {
+		@apply bg-on-muted/90;
+	}
+
+	.textarea-control.is-outlined {
+		@apply inset-ring-2 inset-ring-muted rounded-ui;
+	}
+
+	.textarea-control.is-outlined.is-active {
+		@apply inset-ring-2 inset-ring-primary;
+	}
+
+	.textarea-control.is-line {
+		@apply box-border border-b-2 border-muted text-on-muted px-0;
+
+		.textarea-control-label {
+			@apply left-0!;
+		}
+	}
+
+	.textarea-control.is-line.is-active {
+		@apply border-primary;
+	}
+
+	.textarea-control-input {
+		@apply appearance-none flex-1 w-full border-none outline-none;
+		@apply placeholder:transition-opacity placeholder:duration-200;
+		@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;
+	}
+}

package/dist/form/css/toggle.css

@@ -0,0 +1,27 @@
+@layer components {
+	.toggle {
+		@apply flex justify-start items-center w-fit gap-2 cursor-pointer;
+
+		.toggle-input {
+			@apply relative appearance-none w-10 h-6 rounded-full;
+			@apply bg-muted transition-colors duration-200 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 checked:before:translate-x-4;
+		}
+
+		.toggle-input:checked {
+			&.is-primary {
+				@apply bg-primary;
+			}
+			&.is-secondary {
+				@apply bg-secondary;
+			}
+			&.is-muted {
+				@apply bg-on-muted;
+			}
+		}
+	}
+}

package/dist/form/js/countries.d.ts

@@ -0,0 +1,13 @@
+export interface Country {
+    id: string;
+    label: string;
+    name: string;
+    iso2: CountryCode;
+    dialCode: string;
+    priority: string | number | string[];
+    areaCodes: string | number | string[] | null;
+}
+type CountryCode = 'AC' | 'AD' | 'AE' | 'AF' | 'AG' | 'AI' | 'AL' | 'AM' | 'AO' | 'AR' | 'AS' | 'AT' | 'AU' | 'AW' | 'AX' | 'AZ' | 'BA' | 'BB' | 'BD' | 'BE' | 'BF' | 'BG' | 'BH' | 'BI' | 'BJ' | 'BL' | 'BM' | 'BN' | 'BO' | 'BQ' | 'BR' | 'BS' | 'BT' | 'BW' | 'BY' | 'BZ' | 'CA' | 'CC' | 'CD' | 'CF' | 'CG' | 'CH' | 'CI' | 'CK' | 'CL' | 'CM' | 'CN' | 'CO' | 'CR' | 'CU' | 'CV' | 'CW' | 'CX' | 'CY' | 'CZ' | 'DE' | 'DJ' | 'DK' | 'DM' | 'DO' | 'DZ' | 'EC' | 'EE' | 'EG' | 'EH' | 'ER' | 'ES' | 'ET' | 'FI' | 'FJ' | 'FK' | 'FM' | 'FO' | 'FR' | 'GA' | 'GB' | 'GD' | 'GE' | 'GF' | 'GG' | 'GH' | 'GI' | 'GL' | 'GM' | 'GN' | 'GP' | 'GQ' | 'GR' | 'GT' | 'GU' | 'GW' | 'GY' | 'HK' | 'HN' | 'HR' | 'HT' | 'HU' | 'ID' | 'IE' | 'IL' | 'IM' | 'IN' | 'IO' | 'IQ' | 'IR' | 'IS' | 'IT' | 'JE' | 'JM' | 'JO' | 'JP' | 'KE' | 'KG' | 'KH' | 'KI' | 'KM' | 'KN' | 'KP' | 'KR' | 'KW' | 'KY' | 'KZ' | 'LA' | 'LB' | 'LC' | 'LI' | 'LK' | 'LR' | 'LS' | 'LT' | 'LU' | 'LV' | 'LY' | 'MA' | 'MC' | 'MD' | 'ME' | 'MF' | 'MG' | 'MH' | 'MK' | 'ML' | 'MM' | 'MN' | 'MO' | 'MP' | 'MQ' | 'MR' | 'MS' | 'MT' | 'MU' | 'MV' | 'MW' | 'MX' | 'MY' | 'MZ' | 'NA' | 'NC' | 'NE' | 'NF' | 'NG' | 'NI' | 'NL' | 'NO' | 'NP' | 'NR' | 'NU' | 'NZ' | 'OM' | 'PA' | 'PE' | 'PF' | 'PG' | 'PH' | 'PK' | 'PL' | 'PM' | 'PR' | 'PS' | 'PT' | 'PW' | 'PY' | 'QA' | 'RE' | 'RO' | 'RS' | 'RU' | 'RW' | 'SA' | 'SB' | 'SC' | 'SD' | 'SE' | 'SG' | 'SH' | 'SI' | 'SJ' | 'SK' | 'SL' | 'SM' | 'SN' | 'SO' | 'SR' | 'SS' | 'ST' | 'SV' | 'SX' | 'SY' | 'SZ' | 'TA' | 'TC' | 'TD' | 'TG' | 'TH' | 'TJ' | 'TK' | 'TL' | 'TM' | 'TN' | 'TO' | 'TR' | 'TT' | 'TV' | 'TW' | 'TZ' | 'UA' | 'UG' | 'US' | 'UY' | 'UZ' | 'VA' | 'VC' | 'VE' | 'VG' | 'VI' | 'VN' | 'VU' | 'WF' | 'WS' | 'XK' | 'YE' | 'YT' | 'ZA' | 'ZM' | 'ZW';
+export declare const allCountries: (string | number | string[])[][];
+export declare const normalizedCountries: Country[];
+export {};