@rkosafo/cai.components 0.0.1 → 0.0.3

package/dist/forms/radio/theme.d.ts

@@ -0,0 +1,290 @@
+import type { Classes } from "../../themes/themeUtils.js";
+import { type VariantProps } from "tailwind-variants";
+export type RadioVariants = VariantProps<typeof radio> & Classes<typeof radio>;
+export declare const radio: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            input: string;
+        };
+        secondary: {
+            input: string;
+        };
+        gray: {
+            input: string;
+        };
+        red: {
+            input: string;
+        };
+        orange: {
+            input: string;
+        };
+        amber: {
+            input: string;
+        };
+        yellow: {
+            input: string;
+        };
+        lime: {
+            input: string;
+        };
+        green: {
+            input: string;
+        };
+        emerald: {
+            input: string;
+        };
+        teal: {
+            input: string;
+        };
+        cyan: {
+            input: string;
+        };
+        sky: {
+            input: string;
+        };
+        blue: {
+            input: string;
+        };
+        indigo: {
+            input: string;
+        };
+        violet: {
+            input: string;
+        };
+        purple: {
+            input: string;
+        };
+        fuchsia: {
+            input: string;
+        };
+        pink: {
+            input: string;
+        };
+        rose: {
+            input: string;
+        };
+    };
+    tinted: {
+        true: {
+            input: string;
+        };
+        false: {
+            input: string;
+        };
+    };
+    custom: {
+        true: {
+            input: string;
+        };
+        false: {
+            input: string;
+        };
+    };
+    inline: {
+        true: {
+            label: string;
+        };
+        false: {
+            label: string;
+        };
+    };
+}, {
+    input: string;
+    label: string;
+}, undefined, {
+    color: {
+        primary: {
+            input: string;
+        };
+        secondary: {
+            input: string;
+        };
+        gray: {
+            input: string;
+        };
+        red: {
+            input: string;
+        };
+        orange: {
+            input: string;
+        };
+        amber: {
+            input: string;
+        };
+        yellow: {
+            input: string;
+        };
+        lime: {
+            input: string;
+        };
+        green: {
+            input: string;
+        };
+        emerald: {
+            input: string;
+        };
+        teal: {
+            input: string;
+        };
+        cyan: {
+            input: string;
+        };
+        sky: {
+            input: string;
+        };
+        blue: {
+            input: string;
+        };
+        indigo: {
+            input: string;
+        };
+        violet: {
+            input: string;
+        };
+        purple: {
+            input: string;
+        };
+        fuchsia: {
+            input: string;
+        };
+        pink: {
+            input: string;
+        };
+        rose: {
+            input: string;
+        };
+    };
+    tinted: {
+        true: {
+            input: string;
+        };
+        false: {
+            input: string;
+        };
+    };
+    custom: {
+        true: {
+            input: string;
+        };
+        false: {
+            input: string;
+        };
+    };
+    inline: {
+        true: {
+            label: string;
+        };
+        false: {
+            label: string;
+        };
+    };
+}, {
+    input: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: {
+            input: string;
+        };
+        secondary: {
+            input: string;
+        };
+        gray: {
+            input: string;
+        };
+        red: {
+            input: string;
+        };
+        orange: {
+            input: string;
+        };
+        amber: {
+            input: string;
+        };
+        yellow: {
+            input: string;
+        };
+        lime: {
+            input: string;
+        };
+        green: {
+            input: string;
+        };
+        emerald: {
+            input: string;
+        };
+        teal: {
+            input: string;
+        };
+        cyan: {
+            input: string;
+        };
+        sky: {
+            input: string;
+        };
+        blue: {
+            input: string;
+        };
+        indigo: {
+            input: string;
+        };
+        violet: {
+            input: string;
+        };
+        purple: {
+            input: string;
+        };
+        fuchsia: {
+            input: string;
+        };
+        pink: {
+            input: string;
+        };
+        rose: {
+            input: string;
+        };
+    };
+    tinted: {
+        true: {
+            input: string;
+        };
+        false: {
+            input: string;
+        };
+    };
+    custom: {
+        true: {
+            input: string;
+        };
+        false: {
+            input: string;
+        };
+    };
+    inline: {
+        true: {
+            label: string;
+        };
+        false: {
+            label: string;
+        };
+    };
+}, {
+    input: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const radioButton: import("tailwind-variants").TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+}, undefined, "", {
+    inline: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    inline: {
+        true: string;
+        false: string;
+    };
+}, undefined, "", unknown, unknown, undefined>>;

package/dist/forms/radio/theme.js

@@ -0,0 +1,95 @@
+import { tv } from "tailwind-variants";
+export const radio = tv({
+    slots: {
+        input: "flex items-center w-4 h-4 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 mr-2",
+        label: "flex items-center"
+    },
+    variants: {
+        color: {
+            // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            primary: {
+                input: "text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"
+            },
+            secondary: {
+                input: "text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600"
+            },
+            gray: {
+                input: "text-gray-600 focus:ring-gray-500 dark:focus:ring-gray-600"
+            },
+            red: { input: "text-red-600 focus:ring-red-500 dark:focus:ring-red-600" },
+            orange: {
+                input: "text-orange-500 focus:ring-orange-500 dark:focus:ring-orange-600"
+            },
+            amber: {
+                input: "text-amber-600 focus:ring-amber-500 dark:focus:ring-amber-600"
+            },
+            yellow: {
+                input: "text-yellow-400 focus:ring-yellow-500 dark:focus:ring-yellow-600"
+            },
+            lime: {
+                input: "text-lime-600 focus:ring-lime-500 dark:focus:ring-lime-600"
+            },
+            green: {
+                input: "text-green-600 focus:ring-green-500 dark:focus:ring-green-600"
+            },
+            emerald: {
+                input: "text-emerald-600 focus:ring-emerald-500 dark:focus:ring-emerald-600"
+            },
+            teal: {
+                input: "text-teal-600 focus:ring-teal-500 dark:focus:ring-teal-600"
+            },
+            cyan: {
+                input: "text-cyan-600 focus:ring-cyan-500 dark:focus:ring-cyan-600"
+            },
+            sky: { input: "text-sky-600 focus:ring-sky-500 dark:focus:ring-sky-600" },
+            blue: {
+                input: "text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"
+            },
+            indigo: {
+                input: "text-indigo-600 focus:ring-indigo-500 dark:focus:ring-indigo-600"
+            },
+            violet: {
+                input: "text-violet-600 focus:ring-violet-500 dark:focus:ring-violet-600"
+            },
+            purple: {
+                input: "text-purple-600 focus:ring-purple-500 dark:focus:ring-purple-600"
+            },
+            fuchsia: {
+                input: "text-fuchsia-600 focus:ring-fuchsia-500 dark:focus:ring-fuchsia-600"
+            },
+            pink: {
+                input: "text-pink-600 focus:ring-pink-500 dark:focus:ring-pink-600"
+            },
+            rose: {
+                input: "text-rose-600 focus:ring-rose-500 dark:focus:ring-rose-600"
+            }
+        },
+        tinted: {
+            true: { input: "dark:bg-gray-600 dark:border-gray-500" },
+            false: { input: "dark:bg-gray-700 dark:border-gray-600" }
+        },
+        custom: {
+            true: { input: "sr-only peer" },
+            false: { input: "relative" }
+        },
+        inline: {
+            true: { label: "inline-flex" },
+            false: { label: "flex" }
+        }
+    },
+    defaultVariants: {
+        color: "primary"
+    }
+});
+export const radioButton = tv({
+    base: "",
+    variants: {
+        inline: {
+            true: "inline-flex",
+            false: "flex"
+        }
+    },
+    defaultVariants: {
+        inline: true
+    }
+});

package/dist/forms/select/Select.svelte

@@ -0,0 +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> -->

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

@@ -0,0 +1,4 @@
+import type { SelectProps } from '../../types/index.js';
+declare const Select: import("svelte").Component<SelectProps, {}, "">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/forms/select/index.d.ts

@@ -0,0 +1 @@
+export { default as Select } from './Select.svelte';

package/dist/forms/select/index.js

@@ -0,0 +1 @@
+export { default as Select } from './Select.svelte';

package/dist/forms/textarea/Textarea.svelte

@@ -0,0 +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
+-->

package/dist/forms/textarea/Textarea.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type TextareaProps } from '../../index.js';
+declare const Textarea: import("svelte").Component<TextareaProps, {}, "value" | "elementRef">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/forms/textarea/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Textarea } from "./Textarea.svelte";
+export { textarea } from "./theme.js";

package/dist/forms/textarea/index.js

@@ -0,0 +1,2 @@
+export { default as Textarea } from "./Textarea.svelte";
+export { textarea } from "./theme.js";