@rkosafo/cai.components 0.0.78 → 0.0.80

package/dist/forms/checkbox/Checkbox.svelte

@@ -1,82 +1,82 @@
-<script lang="ts">
-	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
-	import clsx from 'clsx';
-	import { checkbox } from './index.js';
-	import { Label, type CheckboxItem, type CheckboxProps } from '../../index.js';
-
-	let {
-		children,
-		color = 'primary',
-		custom,
-		inline,
-		tinted,
-		rounded,
-		group = $bindable([]),
-		choices = [],
-		checked = $bindable(false),
-		indeterminate,
-		classes,
-		class: className,
-		divClass,
-		disabled = false,
-		value,
-		labelProps = {},
-		...restProps
-	}: CheckboxProps = $props();
-
-	warnThemeDeprecation('Checkbox', { divClass }, { divClass: 'div' });
-	const styling = $derived(classes ?? { div: divClass });
-
-	const theme = getTheme('checkbox');
-
-	const disabledValue = $derived(disabled === null ? undefined : disabled);
-	const { base, div: divStyle } = $derived(
-		checkbox({ color, tinted, custom, rounded, inline, disabled: disabledValue })
-	);
-
-	// Separate label rendering logic
-	function renderLabel(choice?: CheckboxItem) {
-		if (!choice) return '';
-
-		if (children) {
-			return children(choice);
-		}
-		return choice.label || '';
-	}
-</script>
-
-{#if choices.length > 0}
-	{#each choices as choice, i}
-		<div class={divStyle({ class: clsx(theme?.div, styling.div) })}>
-			<Label show={true} {...labelProps}>
-				<input
-					type="checkbox"
-					value={choice.value}
-					checked={choice.checked ?? false}
-					{disabled}
-					bind:group
-					{...restProps}
-					class={base({ class: clsx(theme?.base, className) })}
-				/>
-				{renderLabel(choice)}
-			</Label>
-		</div>
-	{/each}
-{:else}
-	<div class={divStyle({ class: clsx(theme?.div, styling.div) })}>
-		<Label show={true} {...labelProps}>
-			<input
-				type="checkbox"
-				{value}
-				bind:checked
-				{indeterminate}
-				{disabled}
-				{...restProps}
-				class={base({ class: clsx(theme?.base, className) })}
-			/>
-			{#if children}
-				{@render children({ value, checked, disabled })}
-			{/if}
-		</Label>
-	</div>
-{/if}
+<script lang="ts">
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+	import clsx from 'clsx';
+	import { checkbox } from './index.js';
+	import { Label, type CheckboxItem, type CheckboxProps } from '../../index.js';
+
+	let {
+		children,
+		color = 'primary',
+		custom,
+		inline,
+		tinted,
+		rounded,
+		group = $bindable([]),
+		choices = [],
+		checked = $bindable(false),
+		indeterminate,
+		classes,
+		class: className,
+		divClass,
+		disabled = false,
+		value,
+		labelProps = {},
+		...restProps
+	}: CheckboxProps = $props();
+
+	warnThemeDeprecation('Checkbox', { divClass }, { divClass: 'div' });
+	const styling = $derived(classes ?? { div: divClass });
+
+	const theme = getTheme('checkbox');
+
+	const disabledValue = $derived(disabled === null ? undefined : disabled);
+	const { base, div: divStyle } = $derived(
+		checkbox({ color, tinted, custom, rounded, inline, disabled: disabledValue })
+	);
+
+	// Separate label rendering logic
+	function renderLabel(choice?: CheckboxItem) {
+		if (!choice) return '';
+
+		if (children) {
+			return children(choice);
+		}
+		return choice.label || '';
+	}
+</script>
+
+{#if choices.length > 0}
+	{#each choices as choice, i}
+		<div class={divStyle({ class: clsx(theme?.div, styling.div) })}>
+			<Label show={true} {...labelProps}>
+				<input
+					type="checkbox"
+					value={choice.value}
+					checked={choice.checked ?? false}
+					{disabled}
+					bind:group
+					{...restProps}
+					class={base({ class: clsx(theme?.base, className) })}
+				/>
+				{renderLabel(choice)}
+			</Label>
+		</div>
+	{/each}
+{:else}
+	<div class={divStyle({ class: clsx(theme?.div, styling.div) })}>
+		<Label show={true} {...labelProps}>
+			<input
+				type="checkbox"
+				{value}
+				bind:checked
+				{indeterminate}
+				{disabled}
+				{...restProps}
+				class={base({ class: clsx(theme?.base, className) })}
+			/>
+			{#if children}
+				{@render children({ value, checked, disabled })}
+			{/if}
+		</Label>
+	</div>
+{/if}

package/dist/forms/checkbox/CheckboxButton.svelte

@@ -1,92 +1,92 @@
-<script lang="ts">
-	import { Button, getTheme, type CheckboxButtonProps } from '../../index.js';
-	import clsx from 'clsx';
-	import { checkboxButton } from './index.js';
-
-	let {
-		children,
-		class: className,
-		group = $bindable([]),
-		value,
-		checked,
-		inline,
-		pill,
-		outline,
-		size,
-		color,
-		shadow,
-		...restProps
-	}: CheckboxButtonProps = $props();
-
-	const theme = getTheme('checkboxButton');
-
-	// react on external group changes
-	function init(_: HTMLElement, _group: (string | number)[]) {
-		group = _group ?? [];
-
-		if (checked === undefined && value !== undefined) checked = group.includes(value);
-		onChange();
-
-		$effect(() => {
-			if (value !== undefined) {
-				checked = group.includes(value);
-			}
-		});
-	}
-
-	function onChange() {
-		if (!value) return;
-
-		// There's a bug in Svelte and bind:group is not working with wrapped checkbox
-		// This workaround is taken from:
-		// https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1
-		const index = group.indexOf(value);
-
-		if (checked === undefined) checked = index >= 0;
-
-		if (checked) {
-			if (index < 0) {
-				group.push(value);
-				group = group;
-			}
-		} else {
-			if (index >= 0) {
-				group.splice(index, 1);
-				group = group;
-			}
-		}
-	}
-
-	let buttonClass: string = $derived(
-		checkboxButton({ inline, checked, class: clsx(theme, className) })
-	);
-</script>
-
-<Button tag="label" {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
-	<input
-		use:init={group}
-		type="checkbox"
-		bind:checked
-		{value}
-		{...restProps}
-		class="sr-only"
-		onchange={onChange}
-	/>
-	{@render children?.()}
-</Button>
-
-<!--
-@component
-@prop children
-@prop class: className
-@prop group = $bindable([])
-@prop value
-@prop checked
-@prop inline
-@prop pill
-@prop outline
-@prop size
-@prop color
-@prop shadow
-@prop ...restProps
--->
+<script lang="ts">
+	import { Button, getTheme, type CheckboxButtonProps } from '../../index.js';
+	import clsx from 'clsx';
+	import { checkboxButton } from './index.js';
+
+	let {
+		children,
+		class: className,
+		group = $bindable([]),
+		value,
+		checked,
+		inline,
+		pill,
+		outline,
+		size,
+		color,
+		shadow,
+		...restProps
+	}: CheckboxButtonProps = $props();
+
+	const theme = getTheme('checkboxButton');
+
+	// react on external group changes
+	function init(_: HTMLElement, _group: (string | number)[]) {
+		group = _group ?? [];
+
+		if (checked === undefined && value !== undefined) checked = group.includes(value);
+		onChange();
+
+		$effect(() => {
+			if (value !== undefined) {
+				checked = group.includes(value);
+			}
+		});
+	}
+
+	function onChange() {
+		if (!value) return;
+
+		// There's a bug in Svelte and bind:group is not working with wrapped checkbox
+		// This workaround is taken from:
+		// https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1
+		const index = group.indexOf(value);
+
+		if (checked === undefined) checked = index >= 0;
+
+		if (checked) {
+			if (index < 0) {
+				group.push(value);
+				group = group;
+			}
+		} else {
+			if (index >= 0) {
+				group.splice(index, 1);
+				group = group;
+			}
+		}
+	}
+
+	let buttonClass: string = $derived(
+		checkboxButton({ inline, checked, class: clsx(theme, className) })
+	);
+</script>
+
+<Button tag="label" {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+	<input
+		use:init={group}
+		type="checkbox"
+		bind:checked
+		{value}
+		{...restProps}
+		class="sr-only"
+		onchange={onChange}
+	/>
+	{@render children?.()}
+</Button>
+
+<!--
+@component
+@prop children
+@prop class: className
+@prop group = $bindable([])
+@prop value
+@prop checked
+@prop inline
+@prop pill
+@prop outline
+@prop size
+@prop color
+@prop shadow
+@prop ...restProps
+-->