@rkosafo/cai.components 0.0.5 → 0.0.7

package/dist/forms/label/Label.svelte

@@ -1,38 +1,38 @@
-<script lang="ts">
-	import { getTheme, type LabelProps } from '../../index.js';
-	import { label } from './index.js';
-	import clsx from 'clsx';
-
-	let {
-		children,
-		color = 'gray',
-		show = true,
-		class: className,
-		...restProps
-	}: LabelProps = $props();
-
-	const theme = getTheme('label');
-
-	let base = $derived(label({ color, class: clsx(theme, className) }));
-</script>
-
-{#if show}
-	<label {...restProps} class={base}>
-		{@render children()}
-	</label>
-{:else}
-	{@render children()}
-{/if}
-
-<!--
-@component
-[Go to docs](https://flowbite-svelte.com/)
-## Type
-[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L784)
-## Props
-@prop children
-@prop color = "gray"
-@prop show = true
-@prop class: className
-@prop ...restProps
--->
+<script lang="ts">
+	import { getTheme, type LabelProps } from '../../index.js';
+	import { label } from './index.js';
+	import clsx from 'clsx';
+
+	let {
+		children,
+		color = 'gray',
+		show = true,
+		class: className,
+		...restProps
+	}: LabelProps = $props();
+
+	const theme = getTheme('label');
+
+	let base = $derived(label({ color, class: clsx(theme, className) }));
+</script>
+
+{#if show}
+	<label {...restProps} class={base}>
+		{@render children()}
+	</label>
+{:else}
+	{@render children()}
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L784)
+## Props
+@prop children
+@prop color = "gray"
+@prop show = true
+@prop class: className
+@prop ...restProps
+-->

package/dist/forms/radio/Radio.svelte

@@ -1,48 +1,48 @@
-<script lang="ts" generics="T">
-	import { getContext } from 'svelte';
-	import clsx from 'clsx';
-	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
-	import { radio } from './index.js';
-	import { Label, type RadioProps } from '../../index.js';
-
-	// remove inputClass in next major version
-	let {
-		children,
-		'aria-describedby': ariaDescribedby,
-		inline = false,
-		labelClass,
-		color = 'primary',
-		custom = false,
-		group = $bindable<T>(),
-		value = $bindable<T>(),
-		class: className,
-		inputClass,
-		classes,
-		...restProps
-	}: RadioProps<T> = $props();
-
-	warnThemeDeprecation(
-		'Radio',
-		{ inputClass, labelClass },
-		{ inputClass: 'class', labelClass: 'label' }
-	);
-	const styling = $derived(classes ?? { label: labelClass });
-
-	const theme = getTheme('radio');
-
-	const { input, label } = $derived(
-		radio({ color, tinted: !!getContext('background'), custom, inline })
-	);
-</script>
-
-<Label class={label({ class: clsx(theme?.label, styling.label) })}>
-	<input
-		type="radio"
-		bind:group
-		{value}
-		aria-describedby={ariaDescribedby}
-		{...restProps}
-		class={input({ class: clsx(theme?.input, className ?? inputClass) })}
-	/>
-	{@render children?.()}
-</Label>
+<script lang="ts" generics="T">
+	import { getContext } from 'svelte';
+	import clsx from 'clsx';
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+	import { radio } from './index.js';
+	import { Label, type RadioProps } from '../../index.js';
+
+	// remove inputClass in next major version
+	let {
+		children,
+		'aria-describedby': ariaDescribedby,
+		inline = false,
+		labelClass,
+		color = 'primary',
+		custom = false,
+		group = $bindable<T>(),
+		value = $bindable<T>(),
+		class: className,
+		inputClass,
+		classes,
+		...restProps
+	}: RadioProps<T> = $props();
+
+	warnThemeDeprecation(
+		'Radio',
+		{ inputClass, labelClass },
+		{ inputClass: 'class', labelClass: 'label' }
+	);
+	const styling = $derived(classes ?? { label: labelClass });
+
+	const theme = getTheme('radio');
+
+	const { input, label } = $derived(
+		radio({ color, tinted: !!getContext('background'), custom, inline })
+	);
+</script>
+
+<Label class={label({ class: clsx(theme?.label, styling.label) })}>
+	<input
+		type="radio"
+		bind:group
+		{value}
+		aria-describedby={ariaDescribedby}
+		{...restProps}
+		class={input({ class: clsx(theme?.input, className ?? inputClass) })}
+	/>
+	{@render children?.()}
+</Label>

package/dist/forms/radio/RadioButton.svelte

@@ -1,22 +1,22 @@
-<script lang="ts" generics="T">
-  import clsx from "clsx";
-	import { radioButton } from "./index.js";
-	import { Button, getTheme, type RadioButtonProps } from "../../index.js";
-
-  let { children, group = $bindable<T>(), value = $bindable<T>(), inline, pill, outline, size, color, shadow, checkedClass, class: className, ...restProps }: RadioButtonProps<T> = $props();
-
-  const theme = getTheme("radioButton");
-
-  let inputEl: HTMLInputElement;
-  let isChecked = $derived(value == group);
-  let base = $derived(radioButton({ inline, class: clsx(isChecked && checkedClass, theme, className) }));
-
-  function clickHandler() {
-    inputEl?.click(); // manually trigger the click on the hidden input
-  }
-</script>
-
-<Button tag="label" onclick={clickHandler} {pill} {outline} {size} {color} {shadow} class={base}>
-  <input bind:this={inputEl} type="radio" class="sr-only" {value} bind:group {...restProps} />
-  {@render children?.()}
-</Button>
+<script lang="ts" generics="T">
+  import clsx from "clsx";
+	import { radioButton } from "./index.js";
+	import { Button, getTheme, type RadioButtonProps } from "../../index.js";
+
+  let { children, group = $bindable<T>(), value = $bindable<T>(), inline, pill, outline, size, color, shadow, checkedClass, class: className, ...restProps }: RadioButtonProps<T> = $props();
+
+  const theme = getTheme("radioButton");
+
+  let inputEl: HTMLInputElement;
+  let isChecked = $derived(value == group);
+  let base = $derived(radioButton({ inline, class: clsx(isChecked && checkedClass, theme, className) }));
+
+  function clickHandler() {
+    inputEl?.click(); // manually trigger the click on the hidden input
+  }
+</script>
+
+<Button tag="label" onclick={clickHandler} {pill} {outline} {size} {color} {shadow} class={base}>
+  <input bind:this={inputEl} type="radio" class="sr-only" {value} bind:group {...restProps} />
+  {@render children?.()}
+</Button>

package/dist/forms/select/Select.svelte

@@ -1,50 +1,50 @@
-<script lang="ts">
-	import type { SelectProps } from '../../types/index.js';
-	import Svelecte from 'svelecte';
-
-	let {
-		options = [],
-		placeholder = '',
-		valueAsObject = false,
-		creatable = false,
-		multiple = false,
-		searchable = true,
-		labelAsValue = false,
-		disabled = false,
-		clearable = true,
-		onChange,
-		hasError,
-		minHeight,
-		hasSuccess,
-		...restProps
-	}: SelectProps = $props();
-</script>
-
-<div
-	style="--sv-min-height: {minHeight}px; --sv-border: 1px solid {hasError
-		? 'red'
-		: hasSuccess
-			? 'green'
-			: '#ccc'};"
->
-	<Svelecte
-		{options}
-		{placeholder}
-		{valueAsObject}
-		{creatable}
-		{multiple}
-		{clearable}
-		{onChange}
-		{disabled}
-		{searchable}
-		{...restProps}
-	/>
-</div>
-
-<!-- <style>
-	div :global(.sv-input) {
-		min-height: var(--sv-min-height);
-		border: var(--sv-border, 1px solid #ccc);
-		border-radius: 5px;
-	}
-</style> -->
+<script lang="ts">
+	import type { SelectProps } from '../../types/index.js';
+	import Svelecte from 'svelecte';
+
+	let {
+		options = [],
+		placeholder = '',
+		valueAsObject = false,
+		creatable = false,
+		multiple = false,
+		searchable = true,
+		labelAsValue = false,
+		disabled = false,
+		clearable = true,
+		onChange,
+		hasError,
+		minHeight,
+		hasSuccess,
+		...restProps
+	}: SelectProps = $props();
+</script>
+
+<div
+	style="--sv-min-height: {minHeight}px; --sv-border: 1px solid {hasError
+		? 'red'
+		: hasSuccess
+			? 'green'
+			: '#ccc'};"
+>
+	<Svelecte
+		{options}
+		{placeholder}
+		{valueAsObject}
+		{creatable}
+		{multiple}
+		{clearable}
+		{onChange}
+		{disabled}
+		{searchable}
+		{...restProps}
+	/>
+</div>
+
+<!-- <style>
+	div :global(.sv-input) {
+		min-height: var(--sv-min-height);
+		border: var(--sv-border, 1px solid #ccc);
+		border-radius: 5px;
+	}
+</style> -->

package/dist/forms/textarea/Textarea.svelte

@@ -1,165 +1,165 @@
-<script lang="ts">
-	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
-	import clsx from 'clsx';
-	import { textarea } from './index.js';
-	import { CloseButton, type TextareaProps } from '../../index.js';
-	import { createDismissableContext } from '../../utils/dismissable.js';
-
-	let {
-		header,
-		footer,
-		addon,
-		value = $bindable(),
-		elementRef = $bindable(),
-		divClass,
-		innerClass,
-		headerClass,
-		footerClass,
-		addonClass,
-		disabled,
-		class: className,
-		classes,
-		clearable,
-		clearableSvgClass,
-		clearableColor = 'none',
-		clearableClass,
-		clearableOnClick,
-		textareaClass,
-		...restProps
-	}: TextareaProps = $props();
-
-	warnThemeDeprecation(
-		'Textarea',
-		{
-			divClass,
-			innerClass,
-			headerClass,
-			footerClass,
-			addonClass,
-			textareaClass,
-			clearableClass,
-			clearableSvgClass
-		},
-		{
-			divClass: 'div',
-			innerClass: 'inner',
-			headerClass: 'header',
-			footerClass: 'footer',
-			addonClass: 'addon',
-			textareaClass: 'class',
-			clearableClass: 'close',
-			clearableSvgClass: 'svg'
-		}
-	);
-	const styling = $derived(
-		classes ?? {
-			div: divClass,
-			inner: innerClass,
-			header: headerClass,
-			footer: footerClass,
-			addon: addonClass,
-			textarea: textareaClass,
-			close: clearableClass,
-			svg: clearableSvgClass
-		}
-	);
-
-	const theme = getTheme('textarea');
-
-	let hasHeader = $derived(!!header);
-	let hasFooter = $derived(!!footer);
-	let hasAddon = $derived(!!addon);
-	let wrapped: boolean = $derived(hasHeader || hasFooter || hasAddon);
-
-	const {
-		div,
-		base,
-		wrapper,
-		inner,
-		header: headerCls,
-		footer: footerCls,
-		addon: addonCls,
-		close
-	} = $derived(textarea({ wrapped, hasHeader, hasFooter }));
-
-	const clearAll = () => {
-		if (elementRef) {
-			elementRef.value = '';
-			value = undefined;
-		}
-		if (clearableOnClick) clearableOnClick();
-	};
-
-	createDismissableContext(clearAll);
-</script>
-
-<div class={div({ class: clsx(theme?.div, styling.div) })}>
-	{#if !wrapped}
-		<textarea
-			bind:value
-			bind:this={elementRef}
-			{disabled}
-			{...restProps}
-			class={wrapper({ class: clsx(className, classes?.wrapper) })}
-		></textarea>
-	{:else}
-		<div class={wrapper({ class: clsx(theme?.wrapper, classes?.wrapper) })}>
-			{#if header}
-				<div class={headerCls({ class: clsx(theme?.header, styling.header) })}>
-					{@render header()}
-				</div>
-			{/if}
-			<div class={inner({ class: clsx(theme?.inner, styling.inner) })}>
-				{#if addon}
-					<div class={addonCls({ class: clsx(theme?.addon, styling.addon) })}>
-						{@render addon()}
-					</div>
-				{/if}
-				<textarea
-					bind:value
-					bind:this={elementRef}
-					{disabled}
-					{...restProps}
-					class={base({ class: clsx(theme?.base, className) })}
-				></textarea>
-			</div>
-			{#if footer}
-				<div class={footerCls({ class: clsx(theme?.footer, styling.footer) })}>
-					{@render footer()}
-				</div>
-			{/if}
-		</div>
-	{/if}
-	{#if value !== undefined && value !== '' && clearable}
-		<CloseButton
-			class={close({ class: clsx(theme?.close, styling.close) })}
-			color={clearableColor}
-			aria-label="Clear search value"
-			svgClass={clsx(styling.svg)}
-		/>
-	{/if}
-</div>
-
-<!--
-## Props
-@prop header
-@prop footer
-@prop addon
-@prop value = $bindable()
-@prop elementRef = $bindable()
-@prop divClass
-@prop innerClass
-@prop headerClass
-@prop footerClass
-@prop addonClass
-@prop disabled
-@prop class: className
-@prop classes
-@prop clearable
-@prop clearableSvgClass
-@prop clearableColor = "none"
-@prop clearableClass
-@prop clearableOnClick
-@prop textareaClass
-@prop ...restProps
--->
+<script lang="ts">
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+	import clsx from 'clsx';
+	import { textarea } from './index.js';
+	import { CloseButton, type TextareaProps } from '../../index.js';
+	import { createDismissableContext } from '../../utils/dismissable.js';
+
+	let {
+		header,
+		footer,
+		addon,
+		value = $bindable(),
+		elementRef = $bindable(),
+		divClass,
+		innerClass,
+		headerClass,
+		footerClass,
+		addonClass,
+		disabled,
+		class: className,
+		classes,
+		clearable,
+		clearableSvgClass,
+		clearableColor = 'none',
+		clearableClass,
+		clearableOnClick,
+		textareaClass,
+		...restProps
+	}: TextareaProps = $props();
+
+	warnThemeDeprecation(
+		'Textarea',
+		{
+			divClass,
+			innerClass,
+			headerClass,
+			footerClass,
+			addonClass,
+			textareaClass,
+			clearableClass,
+			clearableSvgClass
+		},
+		{
+			divClass: 'div',
+			innerClass: 'inner',
+			headerClass: 'header',
+			footerClass: 'footer',
+			addonClass: 'addon',
+			textareaClass: 'class',
+			clearableClass: 'close',
+			clearableSvgClass: 'svg'
+		}
+	);
+	const styling = $derived(
+		classes ?? {
+			div: divClass,
+			inner: innerClass,
+			header: headerClass,
+			footer: footerClass,
+			addon: addonClass,
+			textarea: textareaClass,
+			close: clearableClass,
+			svg: clearableSvgClass
+		}
+	);
+
+	const theme = getTheme('textarea');
+
+	let hasHeader = $derived(!!header);
+	let hasFooter = $derived(!!footer);
+	let hasAddon = $derived(!!addon);
+	let wrapped: boolean = $derived(hasHeader || hasFooter || hasAddon);
+
+	const {
+		div,
+		base,
+		wrapper,
+		inner,
+		header: headerCls,
+		footer: footerCls,
+		addon: addonCls,
+		close
+	} = $derived(textarea({ wrapped, hasHeader, hasFooter }));
+
+	const clearAll = () => {
+		if (elementRef) {
+			elementRef.value = '';
+			value = undefined;
+		}
+		if (clearableOnClick) clearableOnClick();
+	};
+
+	createDismissableContext(clearAll);
+</script>
+
+<div class={div({ class: clsx(theme?.div, styling.div) })}>
+	{#if !wrapped}
+		<textarea
+			bind:value
+			bind:this={elementRef}
+			{disabled}
+			{...restProps}
+			class={wrapper({ class: clsx(className, classes?.wrapper) })}
+		></textarea>
+	{:else}
+		<div class={wrapper({ class: clsx(theme?.wrapper, classes?.wrapper) })}>
+			{#if header}
+				<div class={headerCls({ class: clsx(theme?.header, styling.header) })}>
+					{@render header()}
+				</div>
+			{/if}
+			<div class={inner({ class: clsx(theme?.inner, styling.inner) })}>
+				{#if addon}
+					<div class={addonCls({ class: clsx(theme?.addon, styling.addon) })}>
+						{@render addon()}
+					</div>
+				{/if}
+				<textarea
+					bind:value
+					bind:this={elementRef}
+					{disabled}
+					{...restProps}
+					class={base({ class: clsx(theme?.base, className) })}
+				></textarea>
+			</div>
+			{#if footer}
+				<div class={footerCls({ class: clsx(theme?.footer, styling.footer) })}>
+					{@render footer()}
+				</div>
+			{/if}
+		</div>
+	{/if}
+	{#if value !== undefined && value !== '' && clearable}
+		<CloseButton
+			class={close({ class: clsx(theme?.close, styling.close) })}
+			color={clearableColor}
+			aria-label="Clear search value"
+			svgClass={clsx(styling.svg)}
+		/>
+	{/if}
+</div>
+
+<!--
+## Props
+@prop header
+@prop footer
+@prop addon
+@prop value = $bindable()
+@prop elementRef = $bindable()
+@prop divClass
+@prop innerClass
+@prop headerClass
+@prop footerClass
+@prop addonClass
+@prop disabled
+@prop class: className
+@prop classes
+@prop clearable
+@prop clearableSvgClass
+@prop clearableColor = "none"
+@prop clearableClass
+@prop clearableOnClick
+@prop textareaClass
+@prop ...restProps
+-->