@joewinke/jatui 0.1.31 → 0.2.0

package/dist/components/basic/ButtonGroup.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	interface Props {
+		orientation?: 'horizontal' | 'vertical';
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { orientation = 'horizontal', class: className = '', children }: Props = $props();
+
+	const orientationClass = $derived(orientation === 'vertical' ? 'join-vertical' : 'join');
+</script>
+
+<div class="{orientationClass} {className}">
+	{#if children}{@render children()}{/if}
+</div>

package/dist/components/basic/ButtonGroup.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const ButtonGroup: import("svelte").Component<Props, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;

package/dist/components/basic/Checkbox.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	interface Props {
+		checked?: boolean;
+		label?: string;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+		disabled?: boolean;
+		indeterminate?: boolean;
+		name?: string;
+		id?: string;
+		onchange?: (checked: boolean) => void;
+		class?: string;
+	}
+
+	let {
+		checked = $bindable(false),
+		label,
+		size = 'md',
+		variant = 'primary',
+		disabled = false,
+		indeterminate = false,
+		name,
+		id,
+		onchange,
+		class: className = ''
+	}: Props = $props();
+
+	const sizeClass = $derived({ xs: 'checkbox-xs', sm: 'checkbox-sm', md: '', lg: 'checkbox-lg' }[size]);
+	const variantClass = $derived(
+		{
+			default: '',
+			primary: 'checkbox-primary',
+			secondary: 'checkbox-secondary',
+			accent: 'checkbox-accent',
+			success: 'checkbox-success',
+			warning: 'checkbox-warning',
+			error: 'checkbox-error',
+			info: 'checkbox-info'
+		}[variant]
+	);
+	const inputClass = $derived(
+		['checkbox', sizeClass, variantClass, className].filter(Boolean).join(' ')
+	);
+
+	const inputId = $derived(id || (label ? `checkbox-${Math.random().toString(36).slice(2)}` : undefined));
+
+	let inputEl: HTMLInputElement | undefined = $state();
+
+	$effect(() => {
+		if (inputEl) inputEl.indeterminate = indeterminate;
+	});
+
+	function handleChange(e: Event) {
+		checked = (e.target as HTMLInputElement).checked;
+		onchange?.(checked);
+	}
+</script>
+
+{#if label}
+	<label class="flex cursor-pointer items-center gap-2" for={inputId}>
+		<input
+			bind:this={inputEl}
+			type="checkbox"
+			{name}
+			id={inputId}
+			class={inputClass}
+			checked={checked}
+			{disabled}
+			onchange={handleChange}
+		/>
+		<span class="label-text">{label}</span>
+	</label>
+{:else}
+	<input
+		bind:this={inputEl}
+		type="checkbox"
+		{name}
+		{id}
+		class={inputClass}
+		checked={checked}
+		{disabled}
+		onchange={handleChange}
+		aria-label={label}
+	/>
+{/if}

package/dist/components/basic/Checkbox.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Props {
+    checked?: boolean;
+    label?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+    disabled?: boolean;
+    indeterminate?: boolean;
+    name?: string;
+    id?: string;
+    onchange?: (checked: boolean) => void;
+    class?: string;
+}
+declare const Checkbox: import("svelte").Component<Props, {}, "checked">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/basic/Empty.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	interface Props {
+		copy?: string;
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { copy = 'Nothing here yet.', class: className = '', children }: Props = $props();
+</script>
+
+<div class="text-base-content/45 flex flex-col items-center justify-center gap-2 py-8 text-sm {className}">
+	{#if children}
+		{@render children()}
+	{:else}
+		<span>{copy}</span>
+	{/if}
+</div>

package/dist/components/basic/Empty.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    copy?: string;
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Empty: import("svelte").Component<Props, {}, "">;
+type Empty = ReturnType<typeof Empty>;
+export default Empty;

package/dist/components/basic/Kbd.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	interface Props {
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		class?: string;
+		children?: import('svelte').Snippet;
+	}
+
+	let { size = 'md', class: className = '', children }: Props = $props();
+
+	const sizeClass = $derived({ xs: 'kbd-xs', sm: 'kbd-sm', md: '', lg: 'kbd-lg' }[size]);
+	const kbdClass = $derived(['kbd', sizeClass, className].filter(Boolean).join(' '));
+</script>
+
+<kbd class={kbdClass}>
+	{#if children}{@render children()}{/if}
+</kbd>

package/dist/components/basic/Kbd.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    class?: string;
+    children?: import('svelte').Snippet;
+}
+declare const Kbd: import("svelte").Component<Props, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/components/basic/Pagination.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+	interface Props {
+		page?: number;
+		count: number;
+		pageSize?: number;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		showEdges?: boolean;
+		onchange?: (page: number) => void;
+		class?: string;
+	}
+
+	let {
+		page = $bindable(1),
+		count,
+		pageSize = 10,
+		size = 'md',
+		showEdges = true,
+		onchange,
+		class: className = ''
+	}: Props = $props();
+
+	const totalPages = $derived(Math.max(1, Math.ceil(count / pageSize)));
+	const canPrev = $derived(page > 1);
+	const canNext = $derived(page < totalPages);
+
+	const btnSizeClass = $derived({ xs: 'btn-xs', sm: 'btn-sm', md: 'btn-sm', lg: 'btn-md' }[size]);
+
+	// Show at most 5 page buttons, centered on current page
+	const pageNumbers = $derived(() => {
+		const delta = 2;
+		const range: number[] = [];
+		for (
+			let i = Math.max(1, page - delta);
+			i <= Math.min(totalPages, page + delta);
+			i++
+		) {
+			range.push(i);
+		}
+		return range;
+	});
+
+	function go(p: number) {
+		if (p < 1 || p > totalPages) return;
+		page = p;
+		onchange?.(page);
+	}
+
+	function handleKeydown(e: KeyboardEvent, p: number) {
+		if (e.key === 'Enter' || e.key === ' ') {
+			e.preventDefault();
+			go(p);
+		}
+	}
+</script>
+
+<div class="join {className}" role="navigation" aria-label="Pagination">
+	{#if showEdges}
+		<button
+			type="button"
+			class="btn join-item {btnSizeClass}"
+			disabled={!canPrev}
+			onclick={() => go(1)}
+			aria-label="First page"
+		>«</button>
+	{/if}
+
+	<button
+		type="button"
+		class="btn join-item {btnSizeClass}"
+		disabled={!canPrev}
+		onclick={() => go(page - 1)}
+		aria-label="Previous page"
+	>‹</button>
+
+	{#each pageNumbers() as p}
+		<button
+			type="button"
+			class="btn join-item {btnSizeClass}"
+			class:btn-active={p === page}
+			onclick={() => go(p)}
+			onkeydown={(e) => handleKeydown(e, p)}
+			aria-label="Page {p}"
+			aria-current={p === page ? 'page' : undefined}
+		>{p}</button>
+	{/each}
+
+	<button
+		type="button"
+		class="btn join-item {btnSizeClass}"
+		disabled={!canNext}
+		onclick={() => go(page + 1)}
+		aria-label="Next page"
+	>›</button>
+
+	{#if showEdges}
+		<button
+			type="button"
+			class="btn join-item {btnSizeClass}"
+			disabled={!canNext}
+			onclick={() => go(totalPages)}
+			aria-label="Last page"
+		>»</button>
+	{/if}
+</div>

package/dist/components/basic/Pagination.svelte.d.ts

@@ -0,0 +1,12 @@
+interface Props {
+    page?: number;
+    count: number;
+    pageSize?: number;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    showEdges?: boolean;
+    onchange?: (page: number) => void;
+    class?: string;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "page">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;

package/dist/components/basic/RadioGroup.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	export interface RadioOption {
+		value: string;
+		label: string;
+		disabled?: boolean;
+	}
+
+	interface Props {
+		value?: string;
+		options: RadioOption[];
+		name: string;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+		orientation?: 'horizontal' | 'vertical';
+		onchange?: (value: string) => void;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(''),
+		options,
+		name,
+		size = 'md',
+		variant = 'primary',
+		orientation = 'vertical',
+		onchange,
+		class: className = ''
+	}: Props = $props();
+
+	const sizeClass = $derived({ xs: 'radio-xs', sm: 'radio-sm', md: '', lg: 'radio-lg' }[size]);
+	const variantClass = $derived(
+		{
+			default: '',
+			primary: 'radio-primary',
+			secondary: 'radio-secondary',
+			accent: 'radio-accent',
+			success: 'radio-success',
+			warning: 'radio-warning',
+			error: 'radio-error',
+			info: 'radio-info'
+		}[variant]
+	);
+	const radioClass = $derived(['radio', sizeClass, variantClass].filter(Boolean).join(' '));
+	const groupClass = $derived(
+		['flex', orientation === 'horizontal' ? 'flex-row flex-wrap gap-4' : 'flex-col gap-2', className].join(' ')
+	);
+
+	function handleChange(e: Event, optValue: string) {
+		value = optValue;
+		onchange?.(value);
+	}
+</script>
+
+<div class={groupClass} role="radiogroup">
+	{#each options as opt}
+		{@const inputId = `${name}-${opt.value}`}
+		<label class="flex cursor-pointer items-center gap-2" for={inputId}>
+			<input
+				type="radio"
+				id={inputId}
+				{name}
+				value={opt.value}
+				class={radioClass}
+				checked={value === opt.value}
+				disabled={opt.disabled}
+				onchange={(e) => handleChange(e, opt.value)}
+			/>
+			<span class="label-text">{opt.label}</span>
+		</label>
+	{/each}
+</div>

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

@@ -0,0 +1,18 @@
+export interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface Props {
+    value?: string;
+    options: RadioOption[];
+    name: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+    orientation?: 'horizontal' | 'vertical';
+    onchange?: (value: string) => void;
+    class?: string;
+}
+declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+type RadioGroup = ReturnType<typeof RadioGroup>;
+export default RadioGroup;

package/dist/components/basic/Separator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	interface Props {
+		orientation?: 'horizontal' | 'vertical';
+		label?: string;
+		class?: string;
+	}
+
+	let { orientation = 'horizontal', label, class: className = '' }: Props = $props();
+</script>
+
+{#if orientation === 'vertical'}
+	<div class="divider divider-horizontal {className}" role="separator" aria-orientation="vertical">
+		{#if label}{label}{/if}
+	</div>
+{:else if label}
+	<div class="divider {className}" role="separator" aria-orientation="horizontal">{label}</div>
+{:else}
+	<hr class="border-base-content/10 my-0 {className}" role="separator" aria-orientation="horizontal" />
+{/if}

package/dist/components/basic/Separator.svelte.d.ts

@@ -0,0 +1,8 @@
+interface Props {
+    orientation?: 'horizontal' | 'vertical';
+    label?: string;
+    class?: string;
+}
+declare const Separator: import("svelte").Component<Props, {}, "">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/components/basic/Slider.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	interface Props {
+		value?: number;
+		min?: number;
+		max?: number;
+		step?: number;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+		showValue?: boolean;
+		disabled?: boolean;
+		name?: string;
+		id?: string;
+		onchange?: (value: number) => void;
+		class?: string;
+	}
+
+	let {
+		value = $bindable(50),
+		min = 0,
+		max = 100,
+		step = 1,
+		size = 'md',
+		variant = 'primary',
+		showValue = false,
+		disabled = false,
+		name,
+		id,
+		onchange,
+		class: className = ''
+	}: Props = $props();
+
+	const sizeClass = $derived({ xs: 'range-xs', sm: 'range-sm', md: '', lg: 'range-lg' }[size]);
+	const variantClass = $derived(
+		{
+			default: '',
+			primary: 'range-primary',
+			secondary: 'range-secondary',
+			accent: 'range-accent',
+			success: 'range-success',
+			warning: 'range-warning',
+			error: 'range-error',
+			info: 'range-info'
+		}[variant]
+	);
+	const rangeClass = $derived(['range', sizeClass, variantClass, className].filter(Boolean).join(' '));
+
+	function handleInput(e: Event) {
+		value = Number((e.target as HTMLInputElement).value);
+		onchange?.(value);
+	}
+</script>
+
+<div class="flex w-full flex-col gap-1">
+	<input
+		type="range"
+		{name}
+		{id}
+		class={rangeClass}
+		{min}
+		{max}
+		{step}
+		value={value}
+		{disabled}
+		oninput={handleInput}
+		aria-valuenow={value}
+		aria-valuemin={min}
+		aria-valuemax={max}
+	/>
+	{#if showValue}
+		<div class="text-base-content/60 w-full text-right text-xs tabular-nums">{value}</div>
+	{/if}
+</div>

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

@@ -0,0 +1,17 @@
+interface Props {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+    showValue?: boolean;
+    disabled?: boolean;
+    name?: string;
+    id?: string;
+    onchange?: (value: number) => void;
+    class?: string;
+}
+declare const Slider: import("svelte").Component<Props, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/components/basic/Switch.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+	interface Props {
+		checked?: boolean;
+		label?: string;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+		disabled?: boolean;
+		name?: string;
+		id?: string;
+		onchange?: (checked: boolean) => void;
+		class?: string;
+	}
+
+	let {
+		checked = $bindable(false),
+		label,
+		size = 'md',
+		variant = 'primary',
+		disabled = false,
+		name,
+		id,
+		onchange,
+		class: className = ''
+	}: Props = $props();
+
+	const sizeClass = $derived({ xs: 'toggle-xs', sm: 'toggle-sm', md: '', lg: 'toggle-lg' }[size]);
+	const variantClass = $derived(
+		{
+			default: '',
+			primary: 'toggle-primary',
+			secondary: 'toggle-secondary',
+			accent: 'toggle-accent',
+			success: 'toggle-success',
+			warning: 'toggle-warning',
+			error: 'toggle-error',
+			info: 'toggle-info'
+		}[variant]
+	);
+	const inputClass = $derived(
+		['toggle', 'jatui-switch', sizeClass, variantClass, className].filter(Boolean).join(' ')
+	);
+
+	const inputId = $derived(id || (label ? `switch-${Math.random().toString(36).slice(2)}` : undefined));
+
+	function handleChange(e: Event) {
+		checked = (e.target as HTMLInputElement).checked;
+		onchange?.(checked);
+	}
+</script>
+
+{#if label}
+	<label class="flex cursor-pointer items-center gap-2" for={inputId}>
+		<input
+			type="checkbox"
+			{name}
+			id={inputId}
+			class={inputClass}
+			checked={checked}
+			{disabled}
+			onchange={handleChange}
+		/>
+		<span class="label-text">{label}</span>
+	</label>
+{:else}
+	<input
+		type="checkbox"
+		{name}
+		{id}
+		class={inputClass}
+		checked={checked}
+		{disabled}
+		onchange={handleChange}
+		aria-label={label}
+	/>
+{/if}
+
+<style>
+	/* Spring settle on toggle confirmation — sanctioned per motion contract */
+	.jatui-switch {
+		transition: background-color var(--motion-fast) var(--motion-spring);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-switch {
+			transition: none;
+		}
+	}
+</style>

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

@@ -0,0 +1,14 @@
+interface Props {
+    checked?: boolean;
+    label?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+    disabled?: boolean;
+    name?: string;
+    id?: string;
+    onchange?: (checked: boolean) => void;
+    class?: string;
+}
+declare const Switch: import("svelte").Component<Props, {}, "checked">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/basic/Toggle.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	/**
+	 * Toggle — alias for Switch with identical props.
+	 * DaisyUI uses `toggle` class; this re-exports that surface.
+	 */
+	import Switch from './Switch.svelte';
+
+	interface Props {
+		checked?: boolean;
+		label?: string;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+		disabled?: boolean;
+		name?: string;
+		id?: string;
+		onchange?: (checked: boolean) => void;
+		class?: string;
+	}
+
+	let {
+		checked = $bindable(false),
+		label,
+		size = 'md',
+		variant = 'primary',
+		disabled = false,
+		name,
+		id,
+		onchange,
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<Switch
+	bind:checked
+	{label}
+	{size}
+	{variant}
+	{disabled}
+	{name}
+	{id}
+	{onchange}
+	class={className}
+/>

package/dist/components/basic/Toggle.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    checked?: boolean;
+    label?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+    disabled?: boolean;
+    name?: string;
+    id?: string;
+    onchange?: (checked: boolean) => void;
+    class?: string;
+}
+declare const Toggle: import("svelte").Component<Props, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;