@joewinke/jatui 0.42.0 → 0.44.0

package/dist/components/form-cards/CheckGlyph.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+	/**
+	 * CheckGlyph — the drawn checkbox box shared by `Checkbox animated` and
+	 * `CheckboxCard`, so the two can never drift apart visually.
+	 *
+	 * Purely presentational (`aria-hidden`): the host keeps a real, visually
+	 * hidden `<input type="checkbox">` next to it for semantics, keys and AT.
+	 *
+	 * The tick draws on (stroke-dashoffset over `pathLength=1`) on the
+	 * `--motion-fast` duration with the `--motion-glide` curve, so it scales
+	 * with `data-motion` and collapses to an instant swap under reduced motion.
+	 * `animate=false` (the default before the first user change) renders the
+	 * tick already drawn — a pre-checked box never "draws itself" on load.
+	 *
+	 * Idea after BoardUI's checkbox glyph (MIT © 2026 Mertcan Dundar Esmergul);
+	 * written fresh for Svelte, tokens and DaisyUI.
+	 */
+	interface Props {
+		checked?: boolean;
+		indeterminate?: boolean;
+		disabled?: boolean;
+		/** Run the draw-on animation when the tick appears. */
+		animate?: boolean;
+		size?: 'xs' | 'sm' | 'md' | 'lg';
+		variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+		class?: string;
+	}
+
+	let {
+		checked = false,
+		indeterminate = false,
+		disabled = false,
+		animate = true,
+		size = 'md',
+		variant = 'primary',
+		class: className = ''
+	}: Props = $props();
+
+	const marked = $derived(checked || indeterminate);
+	const sizeClass = $derived(
+		{ xs: 'jatui-glyph-xs', sm: 'jatui-glyph-sm', md: 'jatui-glyph-md', lg: 'jatui-glyph-lg' }[size]
+	);
+	const toneClass = $derived(
+		{
+			default: 'bg-base-content text-base-100 border-base-content',
+			primary: 'bg-primary text-primary-content border-primary',
+			secondary: 'bg-secondary text-secondary-content border-secondary',
+			accent: 'bg-accent text-accent-content border-accent',
+			success: 'bg-success text-success-content border-success',
+			warning: 'bg-warning text-warning-content border-warning',
+			error: 'bg-error text-error-content border-error',
+			info: 'bg-info text-info-content border-info'
+		}[variant]
+	);
+</script>
+
+<span
+	aria-hidden="true"
+	class="jatui-check-glyph {sizeClass} {marked
+		? toneClass
+		: 'bg-base-100 border-base-content/30 text-transparent'} {className}"
+	class:jatui-glyph-disabled={disabled}
+	data-state={indeterminate ? 'indeterminate' : checked ? 'checked' : 'unchecked'}
+>
+	<svg viewBox="0 0 16 16" fill="none">
+		{#if indeterminate}
+			<path d="M4.5 8h7" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+		{:else if checked}
+			<path
+				class:jatui-check-draw={animate}
+				d="M4 8.2l2.6 2.6L12 5.4"
+				stroke="currentColor"
+				stroke-width="2"
+				stroke-linecap="round"
+				stroke-linejoin="round"
+				pathLength="1"
+			/>
+		{/if}
+	</svg>
+</span>
+
+<style>
+	.jatui-check-glyph {
+		display: inline-flex;
+		flex-shrink: 0;
+		align-items: center;
+		justify-content: center;
+		border-width: var(--jatui-border-w, 1px);
+		border-style: solid;
+		border-radius: var(--jatui-radius-field, 0.25rem);
+		transition:
+			background-color var(--motion-fast, 150ms) var(--motion-glide, ease-out),
+			border-color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.jatui-check-glyph svg {
+		width: 100%;
+		height: 100%;
+	}
+	.jatui-glyph-xs {
+		width: 1rem;
+		height: 1rem;
+	}
+	.jatui-glyph-sm {
+		width: 1.125rem;
+		height: 1.125rem;
+	}
+	.jatui-glyph-md {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+	.jatui-glyph-lg {
+		width: 1.5rem;
+		height: 1.5rem;
+	}
+	.jatui-glyph-disabled {
+		opacity: 0.5;
+	}
+
+	.jatui-check-draw {
+		stroke-dasharray: 1;
+		stroke-dashoffset: 1;
+		animation: jatui-check-draw var(--motion-fast, 150ms) var(--motion-glide, ease-out) forwards;
+	}
+	@keyframes jatui-check-draw {
+		to {
+			stroke-dashoffset: 0;
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-check-glyph {
+			transition: none;
+		}
+		.jatui-check-draw {
+			animation: none;
+			stroke-dashoffset: 0;
+		}
+	}
+</style>

package/dist/components/form-cards/CheckGlyph.svelte.d.ts

@@ -0,0 +1,29 @@
+/**
+ * CheckGlyph — the drawn checkbox box shared by `Checkbox animated` and
+ * `CheckboxCard`, so the two can never drift apart visually.
+ *
+ * Purely presentational (`aria-hidden`): the host keeps a real, visually
+ * hidden `<input type="checkbox">` next to it for semantics, keys and AT.
+ *
+ * The tick draws on (stroke-dashoffset over `pathLength=1`) on the
+ * `--motion-fast` duration with the `--motion-glide` curve, so it scales
+ * with `data-motion` and collapses to an instant swap under reduced motion.
+ * `animate=false` (the default before the first user change) renders the
+ * tick already drawn — a pre-checked box never "draws itself" on load.
+ *
+ * Idea after BoardUI's checkbox glyph (MIT © 2026 Mertcan Dundar Esmergul);
+ * written fresh for Svelte, tokens and DaisyUI.
+ */
+interface Props {
+    checked?: boolean;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    /** Run the draw-on animation when the tick appears. */
+    animate?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+    class?: string;
+}
+declare const CheckGlyph: import("svelte").Component<Props, {}, "">;
+type CheckGlyph = ReturnType<typeof CheckGlyph>;
+export default CheckGlyph;

package/dist/components/form-cards/CheckboxCard.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+	/**
+	 * CheckboxCard — a whole-card checkbox: title + description (+ icon) on a
+	 * ChoiceCard, with the shared animated `CheckGlyph`. The native checkbox
+	 * stays in the DOM (visually hidden) so forms, Space, and AT work as usual;
+	 * the description is wired as its `aria-describedby`.
+	 *
+	 * Card variant after BoardUI's checkbox-card (MIT © 2026 Mertcan Dundar
+	 * Esmergul); written fresh for Svelte, tokens and DaisyUI.
+	 */
+	import type { Snippet } from 'svelte';
+	import ChoiceCard from './ChoiceCard.svelte';
+	import CheckGlyph from './CheckGlyph.svelte';
+
+	interface Props {
+		checked?: boolean;
+		title: string;
+		description?: string;
+		icon?: Snippet;
+		children?: Snippet;
+		indeterminate?: boolean;
+		disabled?: boolean;
+		required?: boolean;
+		name?: string;
+		value?: string;
+		id?: string;
+		size?: 'sm' | 'md';
+		variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+		controlPosition?: 'start' | 'end';
+		/** Draw the tick on when checked. Default true. */
+		animated?: boolean;
+		onchange?: (checked: boolean) => void;
+		class?: string;
+	}
+
+	let {
+		checked = $bindable(false),
+		title,
+		description,
+		icon,
+		children,
+		indeterminate = false,
+		disabled = false,
+		required = false,
+		name,
+		value,
+		id,
+		size = 'md',
+		variant = 'primary',
+		controlPosition = 'start',
+		animated = true,
+		onchange,
+		class: className = ''
+	}: Props = $props();
+
+	const uid = Math.random().toString(36).slice(2, 9);
+	const inputId = $derived(id ?? `checkbox-card-${uid}`);
+	const descId = $derived(description ? `${inputId}-desc` : undefined);
+
+	let inputEl: HTMLInputElement | undefined = $state();
+	let interacted = $state(false);
+
+	$effect(() => {
+		if (inputEl) inputEl.indeterminate = indeterminate;
+	});
+
+	function handleChange(e: Event) {
+		checked = (e.target as HTMLInputElement).checked;
+		interacted = true;
+		onchange?.(checked);
+	}
+</script>
+
+<ChoiceCard
+	{title}
+	{description}
+	{icon}
+	{children}
+	{size}
+	{disabled}
+	{controlPosition}
+	for={inputId}
+	descriptionId={descId}
+	class={className}
+>
+	{#snippet control()}
+		<input
+			bind:this={inputEl}
+			type="checkbox"
+			class="jatui-card-native"
+			id={inputId}
+			{name}
+			{value}
+			{checked}
+			{disabled}
+			{required}
+			aria-describedby={descId}
+			onchange={handleChange}
+		/>
+		<CheckGlyph
+			{checked}
+			{indeterminate}
+			{disabled}
+			{variant}
+			size={size === 'sm' ? 'sm' : 'md'}
+			animate={animated && interacted}
+		/>
+	{/snippet}
+</ChoiceCard>
+
+<style>
+	.jatui-card-native {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		margin: 0;
+		opacity: 0;
+		pointer-events: none;
+	}
+</style>

package/dist/components/form-cards/CheckboxCard.svelte.d.ts

@@ -0,0 +1,33 @@
+/**
+     * CheckboxCard — a whole-card checkbox: title + description (+ icon) on a
+     * ChoiceCard, with the shared animated `CheckGlyph`. The native checkbox
+     * stays in the DOM (visually hidden) so forms, Space, and AT work as usual;
+     * the description is wired as its `aria-describedby`.
+     *
+     * Card variant after BoardUI's checkbox-card (MIT © 2026 Mertcan Dundar
+     * Esmergul); written fresh for Svelte, tokens and DaisyUI.
+     */
+import type { Snippet } from 'svelte';
+interface Props {
+    checked?: boolean;
+    title: string;
+    description?: string;
+    icon?: Snippet;
+    children?: Snippet;
+    indeterminate?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    name?: string;
+    value?: string;
+    id?: string;
+    size?: 'sm' | 'md';
+    variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+    controlPosition?: 'start' | 'end';
+    /** Draw the tick on when checked. Default true. */
+    animated?: boolean;
+    onchange?: (checked: boolean) => void;
+    class?: string;
+}
+declare const CheckboxCard: import("svelte").Component<Props, {}, "checked">;
+type CheckboxCard = ReturnType<typeof CheckboxCard>;
+export default CheckboxCard;

package/dist/components/form-cards/ChoiceCard.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+	/**
+	 * ChoiceCard — the shared shell behind CheckboxCard, SwitchCard and
+	 * RadioGroup `variant="card"`: a `<label>` card holding a real native
+	 * control (passed in as the `control` snippet), a title, an optional
+	 * description and an optional leading icon. Clicking anywhere on the card
+	 * toggles the control because the whole card is its label.
+	 *
+	 * State styling is driven by CSS on the native control (`:has(:checked)`,
+	 * `:has(:focus-visible)`, `:has(:disabled)`), so it can't disagree with the
+	 * control itself. Flat at rest: a 1px border and a tint, no shadow.
+	 *
+	 * Use it directly for a custom card control; the three wrappers cover the
+	 * common cases.
+	 */
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		title: string;
+		description?: string;
+		/** The native control (checkbox / radio / switch input). Required. */
+		control: Snippet;
+		/** Optional leading icon / media. */
+		icon?: Snippet;
+		/** Extra content under the description (badges, a price, …). */
+		children?: Snippet;
+		/** Where the control sits. Default `end` (settings-row style). */
+		controlPosition?: 'start' | 'end';
+		size?: 'sm' | 'md';
+		disabled?: boolean;
+		/** id of the native control, so the card label points at it. */
+		for?: string;
+		/** id given to the description, for the control's aria-describedby. */
+		descriptionId?: string;
+		/** id given to the title text. */
+		titleId?: string;
+		/** Tint + primary border when the control is checked. Default true;
+		 *  SwitchCard turns it off (on/off is a setting, not a pick). */
+		selectedTint?: boolean;
+		class?: string;
+	}
+
+	let {
+		title,
+		description,
+		control,
+		icon,
+		children,
+		controlPosition = 'end',
+		size = 'md',
+		disabled = false,
+		for: htmlFor,
+		descriptionId,
+		titleId,
+		selectedTint = true,
+		class: className = ''
+	}: Props = $props();
+</script>
+
+<label
+	for={htmlFor}
+	class="jatui-choice-card jatui-choice-{size} bg-base-100 {className}"
+	class:jatui-choice-disabled={disabled}
+	class:jatui-choice-tint={selectedTint}
+	class:jatui-choice-control-start={controlPosition === 'start'}
+>
+	{#if controlPosition === 'start'}
+		<span class="jatui-choice-control">{@render control()}</span>
+	{/if}
+	{#if icon}
+		<span class="jatui-choice-icon text-base-content/70">{@render icon()}</span>
+	{/if}
+	<span class="jatui-choice-body">
+		<span id={titleId} class="jatui-choice-title text-base-content">{title}</span>
+		{#if description}
+			<span id={descriptionId} class="jatui-choice-desc text-base-content/60">{description}</span>
+		{/if}
+		{#if children}{@render children()}{/if}
+	</span>
+	{#if controlPosition === 'end'}
+		<span class="jatui-choice-control">{@render control()}</span>
+	{/if}
+</label>
+
+<style>
+	.jatui-choice-card {
+		position: relative;
+		display: flex;
+		align-items: flex-start;
+		gap: var(--jatui-space-lg, 12px);
+		border: var(--jatui-border-w, 1px) solid color-mix(in oklch, var(--color-base-content) 15%, transparent);
+		border-radius: var(--jatui-radius-box, 0.5rem);
+		cursor: pointer;
+		transition:
+			border-color var(--motion-fast, 150ms) var(--motion-glide, ease-out),
+			background-color var(--motion-fast, 150ms) var(--motion-glide, ease-out);
+	}
+	.jatui-choice-md {
+		padding: var(--jatui-space-xl, 16px);
+	}
+	.jatui-choice-sm {
+		padding: var(--jatui-space-lg, 12px);
+		gap: var(--jatui-space-base, 8px);
+	}
+	.jatui-choice-card:hover {
+		border-color: color-mix(in oklch, var(--color-base-content) 30%, transparent);
+	}
+	.jatui-choice-tint:has(:global(input:checked)) {
+		border-color: var(--color-primary);
+		background-color: color-mix(in oklch, var(--color-primary) 6%, var(--color-base-100));
+	}
+	.jatui-choice-card:has(:global(input:focus-visible)) {
+		outline: 2px solid color-mix(in oklch, var(--color-primary) 65%, transparent);
+		outline-offset: 2px;
+	}
+	.jatui-choice-disabled,
+	.jatui-choice-card:has(:global(input:disabled)) {
+		cursor: not-allowed;
+		opacity: 0.55;
+	}
+	.jatui-choice-disabled:hover {
+		border-color: color-mix(in oklch, var(--color-base-content) 15%, transparent);
+	}
+	.jatui-choice-control,
+	.jatui-choice-icon {
+		display: inline-flex;
+		flex-shrink: 0;
+		align-items: center;
+		/* Line the control up with the first line of the title. */
+		min-height: 1.25rem;
+	}
+	.jatui-choice-body {
+		display: flex;
+		flex: 1 1 auto;
+		flex-direction: column;
+		gap: var(--jatui-space-xs, 2px);
+		min-width: 0;
+	}
+	.jatui-choice-title {
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		font-weight: 500;
+	}
+	.jatui-choice-sm .jatui-choice-title {
+		font-size: 0.8125rem;
+	}
+	.jatui-choice-desc {
+		font-size: 0.8125rem;
+		line-height: 1.125rem;
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-choice-card {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/form-cards/ChoiceCard.svelte.d.ts

@@ -0,0 +1,42 @@
+/**
+     * ChoiceCard — the shared shell behind CheckboxCard, SwitchCard and
+     * RadioGroup `variant="card"`: a `<label>` card holding a real native
+     * control (passed in as the `control` snippet), a title, an optional
+     * description and an optional leading icon. Clicking anywhere on the card
+     * toggles the control because the whole card is its label.
+     *
+     * State styling is driven by CSS on the native control (`:has(:checked)`,
+     * `:has(:focus-visible)`, `:has(:disabled)`), so it can't disagree with the
+     * control itself. Flat at rest: a 1px border and a tint, no shadow.
+     *
+     * Use it directly for a custom card control; the three wrappers cover the
+     * common cases.
+     */
+import type { Snippet } from 'svelte';
+interface Props {
+    title: string;
+    description?: string;
+    /** The native control (checkbox / radio / switch input). Required. */
+    control: Snippet;
+    /** Optional leading icon / media. */
+    icon?: Snippet;
+    /** Extra content under the description (badges, a price, …). */
+    children?: Snippet;
+    /** Where the control sits. Default `end` (settings-row style). */
+    controlPosition?: 'start' | 'end';
+    size?: 'sm' | 'md';
+    disabled?: boolean;
+    /** id of the native control, so the card label points at it. */
+    for?: string;
+    /** id given to the description, for the control's aria-describedby. */
+    descriptionId?: string;
+    /** id given to the title text. */
+    titleId?: string;
+    /** Tint + primary border when the control is checked. Default true;
+     *  SwitchCard turns it off (on/off is a setting, not a pick). */
+    selectedTint?: boolean;
+    class?: string;
+}
+declare const ChoiceCard: import("svelte").Component<Props, {}, "">;
+type ChoiceCard = ReturnType<typeof ChoiceCard>;
+export default ChoiceCard;

package/dist/components/form-cards/SwitchCard.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	/**
+	 * SwitchCard — a settings row where the whole card toggles: title +
+	 * description (+ icon) with a switch at the end. The switch is a native
+	 * checkbox with `role="switch"` (DaisyUI `toggle` skin, same motion-token
+	 * spring as `Switch`), and the description is its `aria-describedby`.
+	 *
+	 * Card variant after BoardUI's switch-card (MIT © 2026 Mertcan Dundar
+	 * Esmergul); the gradient/inset skin is deliberately not ported.
+	 */
+	import type { Snippet } from 'svelte';
+	import ChoiceCard from './ChoiceCard.svelte';
+
+	interface Props {
+		checked?: boolean;
+		title: string;
+		description?: string;
+		icon?: Snippet;
+		children?: Snippet;
+		disabled?: boolean;
+		name?: string;
+		id?: string;
+		size?: 'sm' | 'md';
+		variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+		controlPosition?: 'start' | 'end';
+		onchange?: (checked: boolean) => void;
+		class?: string;
+	}
+
+	let {
+		checked = $bindable(false),
+		title,
+		description,
+		icon,
+		children,
+		disabled = false,
+		name,
+		id,
+		size = 'md',
+		variant = 'primary',
+		controlPosition = 'end',
+		onchange,
+		class: className = ''
+	}: Props = $props();
+
+	const uid = Math.random().toString(36).slice(2, 9);
+	const inputId = $derived(id ?? `switch-card-${uid}`);
+	const descId = $derived(description ? `${inputId}-desc` : undefined);
+
+	const toggleClass = $derived(
+		[
+			'toggle',
+			'jatui-switch-card-toggle',
+			size === 'sm' ? 'toggle-sm' : '',
+			{
+				default: '',
+				primary: 'toggle-primary',
+				secondary: 'toggle-secondary',
+				accent: 'toggle-accent',
+				success: 'toggle-success',
+				warning: 'toggle-warning',
+				error: 'toggle-error',
+				info: 'toggle-info'
+			}[variant]
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
+
+	function handleChange(e: Event) {
+		checked = (e.target as HTMLInputElement).checked;
+		onchange?.(checked);
+	}
+</script>
+
+<ChoiceCard
+	{title}
+	{description}
+	{icon}
+	{children}
+	{size}
+	{disabled}
+	{controlPosition}
+	for={inputId}
+	descriptionId={descId}
+	selectedTint={false}
+	class={className}
+>
+	{#snippet control()}
+		<input
+			type="checkbox"
+			role="switch"
+			class={toggleClass}
+			id={inputId}
+			{name}
+			{checked}
+			{disabled}
+			aria-checked={checked}
+			aria-describedby={descId}
+			onchange={handleChange}
+		/>
+	{/snippet}
+</ChoiceCard>
+
+<style>
+	.jatui-switch-card-toggle {
+		transition: background-color var(--motion-fast) var(--motion-spring);
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.jatui-switch-card-toggle {
+			transition: none;
+		}
+	}
+</style>

package/dist/components/form-cards/SwitchCard.svelte.d.ts

@@ -0,0 +1,28 @@
+/**
+     * SwitchCard — a settings row where the whole card toggles: title +
+     * description (+ icon) with a switch at the end. The switch is a native
+     * checkbox with `role="switch"` (DaisyUI `toggle` skin, same motion-token
+     * spring as `Switch`), and the description is its `aria-describedby`.
+     *
+     * Card variant after BoardUI's switch-card (MIT © 2026 Mertcan Dundar
+     * Esmergul); the gradient/inset skin is deliberately not ported.
+     */
+import type { Snippet } from 'svelte';
+interface Props {
+    checked?: boolean;
+    title: string;
+    description?: string;
+    icon?: Snippet;
+    children?: Snippet;
+    disabled?: boolean;
+    name?: string;
+    id?: string;
+    size?: 'sm' | 'md';
+    variant?: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+    controlPosition?: 'start' | 'end';
+    onchange?: (checked: boolean) => void;
+    class?: string;
+}
+declare const SwitchCard: import("svelte").Component<Props, {}, "checked">;
+type SwitchCard = ReturnType<typeof SwitchCard>;
+export default SwitchCard;