yaxa-svelte 1.0.0

package/dist/components/forms/FormField.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    label?: string;
+    description?: string;
+    error?: string;
+    hint?: string;
+    required?: boolean;
+    name?: string;
+    class?: string;
+    children?: Snippet;
+}
+declare const FormField: import("svelte").Component<Props, {}, "">;
+type FormField = ReturnType<typeof FormField>;
+export default FormField;

package/dist/components/forms/Input.svelte

@@ -0,0 +1,138 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	export const inputVariants = tv({
+		base: 'w-full rounded-lg border bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-neutral-50 dark:disabled:bg-neutral-950',
+		variants: {
+			size: {
+				xs: 'text-xs py-1 px-2',
+				sm: 'text-sm py-1.5 px-3',
+				md: 'text-base py-2 px-3.5',
+				lg: 'text-base py-2.5 px-4',
+				xl: 'text-lg py-3 px-4.5'
+			},
+			status: {
+				default:
+					'border-neutral-300 dark:border-neutral-700 focus:border-primary-500 focus:ring-primary-500/20',
+				error:
+					'border-rose-500 text-rose-900 dark:text-rose-100 focus:border-rose-500 focus:ring-rose-500/20',
+				success: 'border-emerald-500 focus:border-emerald-500 focus:ring-emerald-500/20'
+			}
+		},
+		defaultVariants: {
+			size: 'md',
+			status: 'default'
+		}
+	});
+
+	export type InputProps = Omit<HTMLInputAttributes, 'size'> &
+		VariantProps<typeof inputVariants> & {
+			value?: string | number;
+			icon?: string;
+			trailingIcon?: string;
+			loading?: boolean;
+			clearable?: boolean;
+			prefix?: string;
+			suffix?: string;
+			class?: string;
+			leading?: Snippet;
+			trailing?: Snippet;
+		};
+</script>
+
+<script lang="ts">
+	import Icon from '../elements/Icon.svelte';
+	import Spinner from '../elements/Spinner.svelte';
+
+	let {
+		value = $bindable(''),
+		type = 'text',
+		size = 'md',
+		status = 'default',
+		icon,
+		trailingIcon,
+		loading = false,
+		clearable = false,
+		prefix,
+		suffix,
+		disabled = false,
+		class: className = '',
+		leading,
+		trailing,
+		...restProps
+	}: InputProps = $props();
+
+	let paddingLeftClass = $derived.by(() => {
+		if (icon || leading) {
+			return size === 'xs' || size === 'sm' ? 'pl-8' : 'pl-10';
+		}
+		if (prefix) return 'pl-12';
+		return '';
+	});
+
+	let paddingRightClass = $derived.by(() => {
+		if (trailingIcon || trailing || loading || (clearable && value)) {
+			return size === 'xs' || size === 'sm' ? 'pr-8' : 'pr-10';
+		}
+		if (suffix) return 'pr-12';
+		return '';
+	});
+</script>
+
+<div class="relative flex w-full items-center">
+	{#if leading}
+		<div class="pointer-events-none absolute left-3 flex items-center text-neutral-400">
+			{@render leading()}
+		</div>
+	{:else if icon}
+		<div class="pointer-events-none absolute left-3 flex items-center text-neutral-400">
+			<Icon name={icon} size={size === 'xs' ? 'xs' : 'sm'} />
+		</div>
+	{:else if prefix}
+		<span class="pointer-events-none absolute left-3 text-sm font-medium text-neutral-500">
+			{prefix}
+		</span>
+	{/if}
+
+	<input
+		{type}
+		bind:value
+		{disabled}
+		class="{inputVariants({
+			size,
+			status,
+			class: className
+		})} {paddingLeftClass} {paddingRightClass}"
+		{...restProps}
+	/>
+
+	{#if loading}
+		<div class="absolute right-3 flex items-center text-neutral-400">
+			<Spinner size={size === 'xs' || size === 'sm' ? 'xs' : 'sm'} />
+		</div>
+	{:else if clearable && value && !disabled}
+		<button
+			type="button"
+			onclick={() => (value = '')}
+			class="absolute right-3 flex items-center text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200"
+			tabindex={-1}
+			aria-label="Clear input"
+		>
+			<Icon name="cross" size="xs" />
+		</button>
+	{:else if trailing}
+		<div class="pointer-events-none absolute right-3 flex items-center text-neutral-400">
+			{@render trailing()}
+		</div>
+	{:else if trailingIcon}
+		<div class="pointer-events-none absolute right-3 flex items-center text-neutral-400">
+			<Icon name={trailingIcon} size={size === 'xs' ? 'xs' : 'sm'} />
+		</div>
+	{:else if suffix}
+		<span class="pointer-events-none absolute right-3 text-sm font-medium text-neutral-500">
+			{suffix}
+		</span>
+	{/if}
+</div>

package/dist/components/forms/Input.svelte.d.ts

@@ -0,0 +1,58 @@
+import { type VariantProps } from '../../utils/cn';
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+export declare const inputVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: "text-xs py-1 px-2";
+        sm: "text-sm py-1.5 px-3";
+        md: "text-base py-2 px-3.5";
+        lg: "text-base py-2.5 px-4";
+        xl: "text-lg py-3 px-4.5";
+    };
+    status: {
+        default: "border-neutral-300 dark:border-neutral-700 focus:border-primary-500 focus:ring-primary-500/20";
+        error: "border-rose-500 text-rose-900 dark:text-rose-100 focus:border-rose-500 focus:ring-rose-500/20";
+        success: "border-emerald-500 focus:border-emerald-500 focus:ring-emerald-500/20";
+    };
+}, undefined, "w-full rounded-lg border bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100 placeholder:text-neutral-400 dark:placeholder:text-neutral-500 focus:outline-none focus:ring-2 transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-neutral-50 dark:disabled:bg-neutral-950", {
+    size: {
+        xs: "text-xs py-1 px-2";
+        sm: "text-sm py-1.5 px-3";
+        md: "text-base py-2 px-3.5";
+        lg: "text-base py-2.5 px-4";
+        xl: "text-lg py-3 px-4.5";
+    };
+    status: {
+        default: "border-neutral-300 dark:border-neutral-700 focus:border-primary-500 focus:ring-primary-500/20";
+        error: "border-rose-500 text-rose-900 dark:text-rose-100 focus:border-rose-500 focus:ring-rose-500/20";
+        success: "border-emerald-500 focus:border-emerald-500 focus:ring-emerald-500/20";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        xs: "text-xs py-1 px-2";
+        sm: "text-sm py-1.5 px-3";
+        md: "text-base py-2 px-3.5";
+        lg: "text-base py-2.5 px-4";
+        xl: "text-lg py-3 px-4.5";
+    };
+    status: {
+        default: "border-neutral-300 dark:border-neutral-700 focus:border-primary-500 focus:ring-primary-500/20";
+        error: "border-rose-500 text-rose-900 dark:text-rose-100 focus:border-rose-500 focus:ring-rose-500/20";
+        success: "border-emerald-500 focus:border-emerald-500 focus:ring-emerald-500/20";
+    };
+}, undefined>>;
+export type InputProps = Omit<HTMLInputAttributes, 'size'> & VariantProps<typeof inputVariants> & {
+    value?: string | number;
+    icon?: string;
+    trailingIcon?: string;
+    loading?: boolean;
+    clearable?: boolean;
+    prefix?: string;
+    suffix?: string;
+    class?: string;
+    leading?: Snippet;
+    trailing?: Snippet;
+};
+declare const Input: import("svelte").Component<InputProps, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/forms/RadioGroup.svelte

@@ -0,0 +1,74 @@
+<script module lang="ts">
+	export interface RadioOption {
+		value: string;
+		label: string;
+		description?: string;
+		disabled?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	interface Props {
+		value?: string;
+		options?: RadioOption[];
+		name?: string;
+		orientation?: 'horizontal' | 'vertical';
+		card?: boolean;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		options = [],
+		name = 'radio-group',
+		orientation = 'vertical',
+		card = false,
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<div
+	class="flex {orientation === 'horizontal' ? 'flex-row gap-4' : 'flex-col gap-2'} {className}"
+	role="radiogroup"
+>
+	{#each options as opt}
+		{@const isSelected = value === opt.value}
+		<label
+			class="relative flex items-start gap-3 select-none {opt.disabled
+				? 'cursor-not-allowed opacity-50'
+				: 'cursor-pointer'} {card
+				? `rounded-xl border p-4 transition-all ${
+						isSelected
+							? 'border-primary-500 bg-primary-50/30 dark:border-primary-500 dark:bg-primary-950/20'
+							: 'border-neutral-200 bg-white hover:border-neutral-300 dark:border-neutral-800 dark:bg-neutral-900 dark:hover:border-neutral-700'
+					}`
+				: ''}"
+		>
+			<input
+				type="radio"
+				{name}
+				value={opt.value}
+				disabled={opt.disabled}
+				checked={isSelected}
+				onchange={() => (value = opt.value)}
+				class="sr-only"
+			/>
+			<div
+				class="mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border transition-all {isSelected
+					? 'border-primary-600 bg-primary-600 text-white'
+					: 'border-neutral-300 bg-white dark:border-neutral-700 dark:bg-neutral-900'}"
+			>
+				{#if isSelected}
+					<div class="h-1.5 w-1.5 rounded-full bg-white"></div>
+				{/if}
+			</div>
+
+			<div class="text-sm leading-5">
+				<span class="font-medium text-neutral-800 dark:text-neutral-200">{opt.label}</span>
+				{#if opt.description}
+					<p class="text-sm text-neutral-500 dark:text-neutral-400">{opt.description}</p>
+				{/if}
+			</div>
+		</label>
+	{/each}
+</div>

package/dist/components/forms/RadioGroup.svelte.d.ts

@@ -0,0 +1,17 @@
+export interface RadioOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+}
+interface Props {
+    value?: string;
+    options?: RadioOption[];
+    name?: string;
+    orientation?: 'horizontal' | 'vertical';
+    card?: boolean;
+    class?: string;
+}
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/components/forms/Select.svelte

@@ -0,0 +1,91 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+
+	export interface SelectOption {
+		value: string;
+		label: string;
+		icon?: string;
+		disabled?: boolean;
+	}
+
+	export const selectVariants = tv({
+		base: 'w-full rounded-lg border bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50 appearance-none',
+		variants: {
+			size: {
+				sm: 'text-sm py-1.5 pl-3 pr-8',
+				md: 'text-base py-2 pl-3.5 pr-10',
+				lg: 'text-base py-2.5 pl-4 pr-10'
+			},
+			status: {
+				default:
+					'border-neutral-300 dark:border-neutral-700 focus:border-primary-500 focus:ring-primary-500/20',
+				error:
+					'border-rose-500 text-rose-900 dark:text-rose-100 focus:border-rose-500 focus:ring-rose-500/20'
+			}
+		},
+		defaultVariants: {
+			size: 'md',
+			status: 'default'
+		}
+	});
+
+	export type SelectProps = VariantProps<typeof selectVariants> & {
+		value?: string;
+		options?: SelectOption[];
+		placeholder?: string;
+		icon?: string;
+		disabled?: boolean;
+		name?: string;
+		class?: string;
+	};
+</script>
+
+<script lang="ts">
+	import Icon from '../elements/Icon.svelte';
+
+	let {
+		value = $bindable(''),
+		options = [],
+		placeholder = 'Select an option...',
+		icon,
+		disabled = false,
+		name,
+		size = 'md',
+		status = 'default',
+		class: className = ''
+	}: SelectProps = $props();
+</script>
+
+<div class="relative w-full">
+	{#if icon}
+		<div class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-neutral-400">
+			<Icon name={icon} size={size === 'sm' ? 'xs' : 'sm'} />
+		</div>
+	{/if}
+
+	<select
+		bind:value
+		{disabled}
+		{name}
+		class="{selectVariants({ size, status, class: className })} {icon
+			? size === 'sm'
+				? 'pl-8'
+				: 'pl-10'
+			: ''}"
+	>
+		{#if placeholder}
+			<option value="" disabled selected={!value}>
+				{placeholder}
+			</option>
+		{/if}
+		{#each options as opt}
+			<option value={opt.value} disabled={opt.disabled}>
+				{opt.label}
+			</option>
+		{/each}
+	</select>
+
+	<div class="pointer-events-none absolute top-1/2 right-3 -translate-y-1/2 text-neutral-400">
+		<Icon name="chevron-down" size="xs" />
+	</div>
+</div>

package/dist/components/forms/Select.svelte.d.ts

@@ -0,0 +1,50 @@
+import { type VariantProps } from '../../utils/cn';
+export interface SelectOption {
+    value: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+}
+export declare const selectVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "text-sm py-1.5 pl-3 pr-8";
+        md: "text-base py-2 pl-3.5 pr-10";
+        lg: "text-base py-2.5 pl-4 pr-10";
+    };
+    status: {
+        default: "border-neutral-300 dark:border-neutral-700 focus:border-primary-500 focus:ring-primary-500/20";
+        error: "border-rose-500 text-rose-900 dark:text-rose-100 focus:border-rose-500 focus:ring-rose-500/20";
+    };
+}, undefined, "w-full rounded-lg border bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 transition-all duration-150 disabled:cursor-not-allowed disabled:opacity-50 appearance-none", {
+    size: {
+        sm: "text-sm py-1.5 pl-3 pr-8";
+        md: "text-base py-2 pl-3.5 pr-10";
+        lg: "text-base py-2.5 pl-4 pr-10";
+    };
+    status: {
+        default: "border-neutral-300 dark:border-neutral-700 focus:border-primary-500 focus:ring-primary-500/20";
+        error: "border-rose-500 text-rose-900 dark:text-rose-100 focus:border-rose-500 focus:ring-rose-500/20";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "text-sm py-1.5 pl-3 pr-8";
+        md: "text-base py-2 pl-3.5 pr-10";
+        lg: "text-base py-2.5 pl-4 pr-10";
+    };
+    status: {
+        default: "border-neutral-300 dark:border-neutral-700 focus:border-primary-500 focus:ring-primary-500/20";
+        error: "border-rose-500 text-rose-900 dark:text-rose-100 focus:border-rose-500 focus:ring-rose-500/20";
+    };
+}, undefined>>;
+export type SelectProps = VariantProps<typeof selectVariants> & {
+    value?: string;
+    options?: SelectOption[];
+    placeholder?: string;
+    icon?: string;
+    disabled?: boolean;
+    name?: string;
+    class?: string;
+};
+declare const Select: import("svelte").Component<SelectProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/forms/Slider.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	interface Props {
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		disabled?: boolean;
+		name?: string;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(50),
+		min = 0,
+		max = 100,
+		step = 1,
+		disabled = false,
+		name,
+		class: className = ''
+	}: Props = $props();
+
+	let percentage = $derived(((value - min) / (max - min)) * 100);
+</script>
+
+<div class="relative flex w-full touch-none items-center select-none {className}">
+	<input
+		type="range"
+		bind:value
+		{min}
+		{max}
+		{step}
+		{disabled}
+		{name}
+		class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-neutral-200 accent-primary-600 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-800"
+		style="background: linear-gradient(to right, rgb(37 99 235) {percentage}%, rgb(228 228 231) {percentage}%);"
+	/>
+</div>

package/dist/components/forms/Slider.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    name?: string;
+    class?: string;
+}
+declare const Slider: import("svelte").Component<Props, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/forms/Switch.svelte

@@ -0,0 +1,81 @@
+<script module lang="ts">
+	import { tv, type VariantProps } from '../../utils/cn';
+	import type { Snippet } from 'svelte';
+
+	export const switchVariants = tv({
+		base: 'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 data-[state=unchecked]:bg-neutral-300 dark:data-[state=unchecked]:bg-neutral-700',
+		variants: {
+			size: {
+				sm: 'h-5 w-9',
+				md: 'h-6 w-11',
+				lg: 'h-7 w-14'
+			}
+		},
+		defaultVariants: {
+			size: 'md'
+		}
+	});
+
+	export const thumbVariants = tv({
+		base: 'pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0',
+		variants: {
+			size: {
+				sm: 'h-4 w-4 data-[state=checked]:translate-x-4',
+				md: 'h-5 w-5 data-[state=checked]:translate-x-5',
+				lg: 'h-6 w-6 data-[state=checked]:translate-x-7'
+			}
+		},
+		defaultVariants: {
+			size: 'md'
+		}
+	});
+
+	export type SwitchProps = VariantProps<typeof switchVariants> & {
+		checked?: boolean;
+		label?: string;
+		description?: string;
+		disabled?: boolean;
+		name?: string;
+		class?: string;
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	import { Switch } from 'bits-ui';
+
+	let {
+		checked = $bindable(false),
+		size = 'md',
+		label,
+		description,
+		disabled = false,
+		name,
+		class: className = '',
+		children
+	}: SwitchProps = $props();
+</script>
+
+<label
+	class="inline-flex items-start gap-3 select-none {disabled
+		? 'cursor-not-allowed opacity-60'
+		: 'cursor-pointer'} {className}"
+>
+	<Switch.Root bind:checked {disabled} {name} class={switchVariants({ size })}>
+		<Switch.Thumb class={thumbVariants({ size })} />
+	</Switch.Root>
+
+	{#if label || description || children}
+		<div class="text-sm leading-5">
+			{#if label}
+				<span class="font-medium text-neutral-800 dark:text-neutral-200">{label}</span>
+			{/if}
+			{#if children}
+				{@render children()}
+			{/if}
+			{#if description}
+				<p class="text-sm text-neutral-500 dark:text-neutral-400">{description}</p>
+			{/if}
+		</div>
+	{/if}
+</label>

package/dist/components/forms/Switch.svelte.d.ts

@@ -0,0 +1,53 @@
+import { type VariantProps } from '../../utils/cn';
+import type { Snippet } from 'svelte';
+export declare const switchVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "h-5 w-9";
+        md: "h-6 w-11";
+        lg: "h-7 w-14";
+    };
+}, undefined, "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary-600 data-[state=unchecked]:bg-neutral-300 dark:data-[state=unchecked]:bg-neutral-700", {
+    size: {
+        sm: "h-5 w-9";
+        md: "h-6 w-11";
+        lg: "h-7 w-14";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "h-5 w-9";
+        md: "h-6 w-11";
+        lg: "h-7 w-14";
+    };
+}, undefined>>;
+export declare const thumbVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: "h-4 w-4 data-[state=checked]:translate-x-4";
+        md: "h-5 w-5 data-[state=checked]:translate-x-5";
+        lg: "h-6 w-6 data-[state=checked]:translate-x-7";
+    };
+}, undefined, "pointer-events-none block rounded-full bg-white shadow-lg ring-0 transition-transform duration-200 data-[state=unchecked]:translate-x-0", {
+    size: {
+        sm: "h-4 w-4 data-[state=checked]:translate-x-4";
+        md: "h-5 w-5 data-[state=checked]:translate-x-5";
+        lg: "h-6 w-6 data-[state=checked]:translate-x-7";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    size: {
+        sm: "h-4 w-4 data-[state=checked]:translate-x-4";
+        md: "h-5 w-5 data-[state=checked]:translate-x-5";
+        lg: "h-6 w-6 data-[state=checked]:translate-x-7";
+    };
+}, undefined>>;
+export type SwitchProps = VariantProps<typeof switchVariants> & {
+    checked?: boolean;
+    label?: string;
+    description?: string;
+    disabled?: boolean;
+    name?: string;
+    class?: string;
+    children?: Snippet;
+};
+import { Switch } from 'bits-ui';
+declare const Switch: import("svelte").Component<SwitchProps, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;