ui-svelte 0.1.0

package/dist/form/TextField.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+type Props = {
+    el?: HTMLInputElement;
+    value?: string | number;
+    defaultValue?: string;
+    placeholder?: string;
+    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+    class?: string;
+    controlClass?: string;
+    prefix?: Snippet;
+    suffix?: Snippet;
+    onchange?: (value: unknown) => void;
+    oninput?: (value: unknown) => void;
+    variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';
+    size?: 'sm' | 'md' | 'lg';
+    name?: string;
+    label?: string;
+    islabelActive?: boolean;
+    helpText?: string;
+    errorText?: string;
+    autocomplete?: HTMLInputAttributes['autocomplete'];
+    min?: HTMLInputAttributes['min'];
+    max?: HTMLInputAttributes['max'];
+    maxlength?: HTMLInputAttributes['maxlength'];
+    isFloatLabel?: boolean;
+    isSolid?: boolean;
+};
+declare const TextField: import("svelte").Component<Props, {}, "value" | "el">;
+type TextField = ReturnType<typeof TextField>;
+export default TextField;

package/dist/form/Textarea.svelte

@@ -0,0 +1,137 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+	import type { HTMLTextareaAttributes } from 'svelte/elements';
+
+	type Props = {
+		el?: HTMLTextAreaElement;
+		value?: string;
+		defaultValue?: string;
+		placeholder?: string;
+		class?: string;
+		controlClass?: string;
+		onchange?: (value: string) => void;
+		oninput?: (value: string) => void;
+		variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';
+		size?: 'sm' | 'md' | 'lg';
+		name?: string;
+		label?: string;
+		islabelActive?: boolean;
+		helpText?: string;
+		errorText?: string;
+		maxlength?: HTMLTextareaAttributes['maxlength'];
+		rows?: number;
+		cols?: number;
+		isFloatLabel?: boolean;
+		isSolid?: boolean;
+		isResize?: boolean;
+	};
+
+	let {
+		el = $bindable(),
+		value = $bindable(''),
+		defaultValue,
+		placeholder,
+		class: className,
+		controlClass,
+		onchange,
+		oninput,
+		variant = 'outlined',
+		size = 'md',
+		name,
+		label,
+		isFloatLabel,
+		islabelActive,
+		helpText,
+		errorText,
+		maxlength,
+		rows = 4,
+		cols,
+		isSolid,
+		isResize = false
+	}: Props = $props();
+
+	const uid = $props.id();
+
+	let isActive = $state(false);
+	let isFocused = $state(false);
+
+	const variantClasses = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted',
+		outlined: 'is-outlined',
+		line: 'is-line'
+	};
+
+	const sizeClasses = {
+		sm: 'is-sm',
+		md: 'is-md',
+		lg: 'is-lg'
+	};
+
+	$effect.pre(() => {
+		if (defaultValue) {
+			value = defaultValue;
+		}
+	});
+</script>
+
+<div class={cn('field', className)}>
+	{#if !isFloatLabel && label}
+		<span class="field-label">{label}</span>
+	{/if}
+	<label
+		class={cn(
+			'textarea-control',
+			variantClasses[variant],
+			sizeClasses[size],
+			isSolid && 'is-solid',
+			isFloatLabel && 'is-float',
+			(isActive || isFocused) && 'is-active',
+			controlClass
+		)}
+		for={`${uid}-{name}`}
+		class:is-error={errorText}
+		onmouseenter={() => (isActive = true)}
+		onmouseleave={() => (isActive = false)}
+	>
+		{#if isFloatLabel && label}
+			<span
+				class={cn(
+					'textarea-control-label',
+					(isActive || isFocused || islabelActive || value !== '') && 'is-active'
+				)}
+			>
+				{label}
+			</span>
+		{/if}
+
+		<textarea
+			bind:this={el}
+			bind:value
+			id={`${uid}-{name}`}
+			class={cn(
+				'textarea-control-input',
+				isResize && 'is-resizable',
+				isFloatLabel && !isActive && !isFocused && value == '' && 'invisible',
+				controlClass
+			)}
+			{placeholder}
+			{name}
+			{rows}
+			{cols}
+			{maxlength}
+			{...defaultValue !== undefined && { defaultValue }}
+			onchange={(e) => onchange?.((e.target as HTMLTextAreaElement).value)}
+			oninput={(e) => oninput?.((e.target as HTMLTextAreaElement).value)}
+			onfocusin={() => (isFocused = true)}
+			onfocusout={() => (isFocused = false)}
+		></textarea>
+	</label>
+
+	{#if errorText || helpText}
+		<div class={cn('field-help', errorText && 'is-danger')}>
+			{errorText || helpText}
+		</div>
+	{/if}
+</div>

package/dist/form/Textarea.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+type Props = {
+    el?: HTMLTextAreaElement;
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    class?: string;
+    controlClass?: string;
+    onchange?: (value: string) => void;
+    oninput?: (value: string) => void;
+    variant?: 'primary' | 'secondary' | 'muted' | 'outlined' | 'line';
+    size?: 'sm' | 'md' | 'lg';
+    name?: string;
+    label?: string;
+    islabelActive?: boolean;
+    helpText?: string;
+    errorText?: string;
+    maxlength?: HTMLTextareaAttributes['maxlength'];
+    rows?: number;
+    cols?: number;
+    isFloatLabel?: boolean;
+    isSolid?: boolean;
+    isResize?: boolean;
+};
+declare const Textarea: import("svelte").Component<Props, {}, "value" | "el">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/form/Toggle.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { cn } from '../utils/class-names.js';
+
+	type Props = {
+		checked?: boolean;
+		defaultChecked?: boolean;
+		onchange?: (checked: boolean) => void;
+		disabled?: boolean;
+		class?: string;
+		label?: string;
+		name?: string;
+		color?: 'primary' | 'secondary' | 'muted';
+	};
+	let {
+		checked = $bindable(),
+		defaultChecked,
+		onchange,
+		disabled = false,
+		class: className,
+		label,
+		name,
+		color = 'primary'
+	}: Props = $props();
+
+	const colors = {
+		primary: 'is-primary',
+		secondary: 'is-secondary',
+		muted: 'is-muted'
+	};
+</script>
+
+<label class={cn('toggle', className)}>
+	<input
+		type="checkbox"
+		class={cn('toggle-input', colors[color])}
+		{name}
+		bind:checked
+		{defaultChecked}
+		{disabled}
+		onchange={() => onchange && onchange(checked!)}
+	/>
+	{#if label}
+		<span class="label">{label}</span>
+	{/if}
+</label>

package/dist/form/Toggle.svelte.d.ts

@@ -0,0 +1,13 @@
+type Props = {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onchange?: (checked: boolean) => void;
+    disabled?: boolean;
+    class?: string;
+    label?: string;
+    name?: string;
+    color?: 'primary' | 'secondary' | 'muted';
+};
+declare const Toggle: import("svelte").Component<Props, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/form/css/checkbox.css

@@ -0,0 +1,46 @@
+@layer components {
+	.checkbox {
+		@apply flex justify-start items-center w-fit gap-2 cursor-pointer;
+
+		.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;
+
+			&::after {
+				content: '';
+				position: absolute;
+				top: 50%;
+				left: 50%;
+				transform: translate(-50%, -50%) scale(0);
+				width: 90%;
+				height: 90%;
+				background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23fff' d='M21.546 5.111a1.5 1.5 0 0 1 0 2.121L10.303 18.475a1.6 1.6 0 0 1-2.263 0L2.454 12.89a1.5 1.5 0 1 1 2.121-2.121l4.596 4.596L19.424 5.111a1.5 1.5 0 0 1 2.122 0'/%3E%3C/g%3E%3C/svg%3E");
+				background-size: contain;
+				background-position: center;
+				background-repeat: no-repeat;
+				opacity: 0;
+				transition:
+					transform 0.2s ease-out,
+					opacity 0.15s ease-out;
+			}
+		}
+
+		.checkbox-input:checked {
+			&.is-primary {
+				@apply bg-primary border-primary;
+			}
+			&.is-secondary {
+				@apply bg-secondary border-secondary;
+			}
+			&.is-muted {
+				@apply bg-on-muted border-on-muted;
+			}
+
+			&::after {
+				transform: translate(-50%, -50%) scale(1);
+				opacity: 1;
+			}
+		}
+	}
+}

package/dist/form/css/combo-box.css

@@ -0,0 +1,69 @@
+@layer components {
+	.combo-box-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;
+		}
+	}
+
+	.combo-box-search {
+		@apply relative flex items-center w-full gap-2 px-0 h-10;
+		@apply border-b-2 border-muted transition-all duration-300 ease-in-out;
+
+		&:focus-within {
+			@apply border-primary;
+		}
+
+		&.is-primary:focus-within {
+			@apply border-primary;
+		}
+
+		&.is-secondary:focus-within {
+			@apply border-secondary;
+		}
+
+		&.is-muted:focus-within {
+			@apply border-on-muted;
+		}
+	}
+
+	.combo-box-search-icon {
+		@apply h-5 w-auto text-muted;
+	}
+
+	.combo-box-search-input {
+		@apply flex-1 border-none outline-none bg-transparent text-on-background;
+		@apply placeholder:text-muted;
+	}
+
+	.combo-box-options {
+		@apply flex flex-1 w-full min-w-0 flex-col gap-1 overflow-y-auto scrollbar-hide;
+	}
+
+	.combo-box-empty {
+		@apply flex items-center justify-center p-4 text-sm text-muted;
+	}
+
+	.combo-box-loading {
+		@apply flex items-center justify-center gap-2 p-4 text-sm text-muted;
+	}
+
+	.combo-box-loading-spinner {
+		@apply size-4 animate-spin;
+	}
+
+	.combo-box-loading-more {
+		@apply flex items-center justify-center gap-2 py-2 text-xs text-muted;
+		@apply border-t border-muted/20 mt-1;
+	}
+
+	.combo-box-clear {
+		@apply size-4 cursor-pointer opacity-60 hover:opacity-100 transition-opacity;
+	}
+}

package/dist/form/css/control.css

@@ -0,0 +1,177 @@
+@layer components {
+	.control {
+		@apply relative flex items-center justify-between w-full gap-2 px-3 outline-0 ring-0;
+		@apply transition-all duration-300 ease-in-out;
+	}
+
+	.control-label {
+		@apply absolute left-3 top-1/2 -translate-y-1/2;
+		@apply transition-all duration-300;
+	}
+
+	.control-label.is-active {
+		@apply text-xs left-3 top-px! translate-y-px!;
+	}
+
+	.control.is-sm {
+		@apply h-8 text-sm;
+	}
+
+	.control.is-sm .control-icon {
+		@apply h-5 w-auto;
+	}
+
+	.control.is-float.is-sm {
+		@apply h-10 pt-3;
+	}
+
+	.control.is-md {
+		@apply h-10 text-base;
+	}
+
+	.control.is-md .control-icon {
+		@apply h-6 w-auto;
+	}
+
+	.control.is-float.is-md {
+		@apply h-12 pt-3.5;
+	}
+
+	.control.is-lg {
+		@apply h-12 text-xl;
+
+		.control-label.is-active {
+			@apply text-sm;
+		}
+	}
+
+	.control.is-lg .control-icon {
+		@apply h-8 w-auto;
+	}
+
+	.control.is-float.is-lg {
+		@apply h-14 pt-3.5;
+	}
+
+	.control.is-primary {
+		@apply bg-on-primary text-primary rounded-ui;
+	}
+
+	.control.is-solid.is-primary {
+		@apply bg-primary text-on-primary;
+	}
+
+	.control.is-primary.is-active {
+		@apply bg-on-primary/90;
+	}
+
+	.control.is-solid.is-primary.is-active {
+		@apply bg-primary/90;
+	}
+
+	.control.is-secondary {
+		@apply bg-on-secondary text-secondary rounded-ui;
+	}
+
+	.control.is-solid.is-secondary {
+		@apply bg-secondary text-on-secondary;
+	}
+
+	.control.is-secondary.is-active {
+		@apply bg-on-secondary/90;
+	}
+
+	.control.is-solid.is-secondary.is-active {
+		@apply bg-secondary/90;
+	}
+
+	.control.is-muted {
+		@apply bg-muted text-on-muted rounded-ui;
+	}
+
+	.control.is-solid.is-muted {
+		@apply bg-on-muted text-muted;
+	}
+
+	.control.is-muted.is-active {
+		@apply bg-muted/90;
+	}
+
+	.control.is-solid.is-muted.is-active {
+		@apply bg-on-muted/90;
+	}
+
+	.control.is-outlined {
+		@apply inset-ring-2 inset-ring-muted rounded-ui;
+	}
+
+	.control.is-outlined.is-active {
+		@apply inset-ring-2 inset-ring-primary;
+	}
+
+	.control.is-line {
+		@apply box-border border-b-2  border-muted text-on-muted px-0;
+
+		.control-label {
+			@apply left-0!;
+		}
+	}
+
+	.control.is-line.is-active {
+		@apply border-primary;
+	}
+
+	.control-btn {
+		@apply absolute right-2 top-1/2 -translate-y-1/2;
+	}
+
+	.control:has(> .control-btn) {
+		@apply pr-8;
+	}
+
+	.control-arrow {
+		@apply size-4 transition-transform;
+		@apply transition-all duration-300 ease-in-out;
+	}
+
+	.control-arrow.is-active {
+		@apply rotate-90;
+	}
+
+	.control-selected {
+		@apply flex-1 text-left truncate;
+	}
+
+	.control-input {
+		@apply appearance-none flex-1 border-none outline-none;
+		@apply placeholder:transition-opacity placeholder:duration-200;
+
+		&::-webkit-outer-spin-button,
+		&::-webkit-inner-spin-button {
+			-webkit-appearance: none;
+			margin: 0;
+		}
+
+		&[type='number'] {
+			appearance: textfield;
+			-moz-appearance: textfield;
+		}
+
+		&:-webkit-autofill,
+		&:-webkit-autofill:hover,
+		&:-webkit-autofill:focus,
+		&:-webkit-autofill:active {
+			-webkit-box-shadow: 0 0 0 30px transparent inset !important;
+			-webkit-text-fill-color: inherit !important;
+			background-color: transparent !important;
+			background-image: none !important;
+			color: inherit !important;
+			transition: background-color 5000000s ease-in-out 0s !important;
+		}
+
+		&:-moz-autofill {
+			background-color: transparent !important;
+			color: inherit !important;
+		}
+	}
+}

package/dist/form/css/date.css

@@ -0,0 +1,56 @@
+@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 invisible opacity-0 transition-opacity duration-300 ease-in-out;
+		position: fixed;
+		z-index: 9999;
+
+		&.is-open {
+			@apply visible opacity-100;
+		}
+	}
+	.date-option {
+		@apply outline-hidden hover:bg-muted hover:text-on-muted;
+		@apply flex w-full items-center gap-2 overflow-hidden rounded-ui p-2 text-left h-8;
+		@apply transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50;
+		&.active {
+			@apply bg-muted text-on-muted;
+		}
+		&[data-focused='1'] {
+			@apply bg-muted text-on-muted;
+		}
+	}
+
+	.date-picker-header {
+		@apply flex items-center justify-between;
+		.date-arrow {
+			@apply size-6 rounded-ui p-2 hover:bg-muted hover:text-on-muted;
+		}
+	}
+
+	.date-picker-weekdays {
+		@apply grid grid-cols-7 gap-1 my-2 bg-muted text-on-muted rounded-ui;
+
+		.weekday {
+			@apply flex items-center justify-center w-8 h-8 text-xs;
+		}
+	}
+
+	.date-picker-days {
+		@apply grid grid-cols-7 gap-1 h-52;
+	}
+
+	.date-picker-day-button {
+		@apply outline-hidden hover:bg-muted hover:text-on-muted rounded-ui;
+		@apply flex items-center justify-center w-8 h-8 text-sm transition-colors;
+
+		&.selected {
+			@apply bg-primary text-on-primary rounded-ui;
+		}
+
+		&.today {
+			@apply font-semibold;
+		}
+	}
+}