@rkosafo/cai.components 0.0.75 → 0.0.79

package/dist/forms/button-toggle/ButtonToggle.svelte

@@ -0,0 +1,119 @@
+<!-- <script lang="ts">
+	import CheckIcon from './CheckIcon.svelte';
+	import { buttonToggle } from './theme.js';
+	import type { VariantProps } from 'tailwind-variants';
+	import clsx from 'clsx';
+	import type { ButtonToggleProps } from '../../index.js';
+	import { getButtonToggleContext } from '../../context';
+	import { untrack } from 'svelte';
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+
+	let {
+		value,
+		selected = false,
+		children,
+		iconSlot,
+		color,
+		class: className,
+		iconClass,
+		txtClass,
+		contentClass,
+		classes,
+		...restProps
+	}: ButtonToggleProps = $props();
+
+	warnThemeDeprecation(
+		'ButtonToggle',
+		untrack(() => ({ iconClass, txtClass, contentClass })),
+		{ iconClass: 'icon', txtClass: 'text', contentClass: 'content' }
+	);
+
+	// button(className), content, text, icon
+	const styling = $derived(classes ?? { icon: iconClass, text: txtClass, content: contentClass });
+
+	const theme = $derived(getTheme('buttonToggle'));
+
+	// Get context - it will be undefined if used outside ButtonToggleGroup
+	const ctx = getButtonToggleContext();
+
+	// Extract context values with fallbacks
+	const { toggleSelected, isSelected, multiSelect, size, roundedSize, ctxIconClass, ctxBtnClass } =
+		{
+			toggleSelected: ctx?.toggleSelected ?? (() => {}),
+			isSelected: ctx?.isSelected ?? (() => false),
+			multiSelect: ctx?.multiSelect ?? false,
+			size: ctx?.size,
+			roundedSize: ctx?.roundedSize,
+			ctxIconClass: ctx?.ctxIconClass,
+			ctxBtnClass: ctx?.ctxBtnClass
+		};
+
+	// Use context color if available, otherwise use prop color, otherwise default to "primary"
+	const actualColor = $derived(
+		(ctx?.color ?? color ?? 'primary') as VariantProps<typeof buttonToggle>['color']
+	);
+	const actualIconClass = ctxIconClass;
+
+	// Filter size to only valid buttonToggle sizes (no 'xs')
+	const actualSize = (size === 'xs' ? 'sm' : size) as VariantProps<typeof buttonToggle>['size'];
+	// roundedSize is already validated by type system
+	const actualRoundedSize = roundedSize as VariantProps<typeof buttonToggle>['roundedSize'];
+
+	function handleClick() {
+		toggleSelected(value);
+	}
+
+	const { button, content, text, icon } = $derived(
+		buttonToggle({ selected, color: actualColor, size: actualSize })
+	);
+
+	$effect(() => {
+		selected = isSelected(value);
+	});
+</script>
+
+<button
+	type="button"
+	class={button({
+		selected,
+		color: actualColor,
+		size: actualSize,
+		roundedSize: actualRoundedSize,
+		class: clsx(theme?.button, ctxBtnClass, className)
+	})}
+	data-selected={selected}
+	onclick={handleClick}
+	role={multiSelect ? 'checkbox' : 'radio'}
+	aria-checked={selected}
+	{...restProps}
+>
+	<div class={content({ class: clsx(theme?.content, styling.content) })}>
+		{#if selected}
+			{#if iconSlot}
+				{@render iconSlot()}
+			{:else}
+				<CheckIcon class={icon({ class: clsx(theme?.icon ?? actualIconClass, styling.icon) })} />
+			{/if}
+		{/if}
+		<span class={text({ selected, class: clsx(theme?.text, styling.text) })}>
+			{@render children()}
+		</span>
+	</div>
+</button>
+
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L441)
+## Props
+@prop value
+@prop selected = false
+@prop children
+@prop iconSlot
+@prop color
+@prop class: className
+@prop iconClass
+@prop txtClass
+@prop contentClass
+@prop classes
+@prop ...restProps -->

package/dist/forms/button-toggle/ButtonToggle.svelte.d.ts

@@ -0,0 +1,139 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * <script lang="ts">
+ * import CheckIcon from './CheckIcon.svelte';
+ * import { buttonToggle } from './theme.js';
+ * import type { VariantProps } from 'tailwind-variants';
+ * import clsx from 'clsx';
+ * import type { ButtonToggleProps } from '../../index.js';
+ * import { getButtonToggleContext } from '../../context';
+ * import { untrack } from 'svelte';
+ * import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+ *
+ * let {
+ * 	value,
+ * 	selected = false,
+ * 	children,
+ * 	iconSlot,
+ * 	color,
+ * 	class: className,
+ * 	iconClass,
+ * 	txtClass,
+ * 	contentClass,
+ * 	classes,
+ * 	...restProps
+ * }: ButtonToggleProps = $props();
+ *
+ * warnThemeDeprecation(
+ * 	'ButtonToggle',
+ * 	untrack(() => ({ iconClass, txtClass, contentClass })),
+ * 	{ iconClass: 'icon', txtClass: 'text', contentClass: 'content' }
+ * );
+ *
+ * // button(className), content, text, icon
+ * const styling = $derived(classes ?? { icon: iconClass, text: txtClass, content: contentClass });
+ *
+ * const theme = $derived(getTheme('buttonToggle'));
+ *
+ * // Get context - it will be undefined if used outside ButtonToggleGroup
+ * const ctx = getButtonToggleContext();
+ *
+ * // Extract context values with fallbacks
+ * const { toggleSelected, isSelected, multiSelect, size, roundedSize, ctxIconClass, ctxBtnClass } =
+ * 	{
+ * 		toggleSelected: ctx?.toggleSelected ?? (() => {}),
+ * 		isSelected: ctx?.isSelected ?? (() => false),
+ * 		multiSelect: ctx?.multiSelect ?? false,
+ * 		size: ctx?.size,
+ * 		roundedSize: ctx?.roundedSize,
+ * 		ctxIconClass: ctx?.ctxIconClass,
+ * 		ctxBtnClass: ctx?.ctxBtnClass
+ * 	};
+ *
+ * // Use context color if available, otherwise use prop color, otherwise default to "primary"
+ * const actualColor = $derived(
+ * 	(ctx?.color ?? color ?? 'primary') as VariantProps<typeof buttonToggle>['color']
+ * );
+ * const actualIconClass = ctxIconClass;
+ *
+ * // Filter size to only valid buttonToggle sizes (no 'xs')
+ * const actualSize = (size === 'xs' ? 'sm' : size) as VariantProps<typeof buttonToggle>['size'];
+ * // roundedSize is already validated by type system
+ * const actualRoundedSize = roundedSize as VariantProps<typeof buttonToggle>['roundedSize'];
+ *
+ * function handleClick() {
+ * 	toggleSelected(value);
+ * }
+ *
+ * const { button, content, text, icon } = $derived(
+ * 	buttonToggle({ selected, color: actualColor, size: actualSize })
+ * );
+ *
+ * $effect(() => {
+ * 	selected = isSelected(value);
+ * });
+ * </script>
+ *
+ * <button
+ * type="button"
+ * class={button({
+ * 	selected,
+ * 	color: actualColor,
+ * 	size: actualSize,
+ * 	roundedSize: actualRoundedSize,
+ * 	class: clsx(theme?.button, ctxBtnClass, className)
+ * })}
+ * data-selected={selected}
+ * onclick={handleClick}
+ * role={multiSelect ? 'checkbox' : 'radio'}
+ * aria-checked={selected}
+ * {...restProps}
+ * >
+ * <div class={content({ class: clsx(theme?.content, styling.content) })}>
+ * 	{#if selected}
+ * 		{#if iconSlot}
+ * 			{@render iconSlot()}
+ * 		{:else}
+ * 			<CheckIcon class={icon({ class: clsx(theme?.icon ?? actualIconClass, styling.icon) })} />
+ * 		{/if}
+ * 	{/if}
+ * 	<span class={text({ selected, class: clsx(theme?.text, styling.text) })}>
+ * 		{@render children()}
+ * 	</span>
+ * </div>
+ * </button>
+ *
+ *
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ButtonToggleProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L441)
+ * ## Props
+ * @prop value
+ * @prop selected = false
+ * @prop children
+ * @prop iconSlot
+ * @prop color
+ * @prop class: className
+ * @prop iconClass
+ * @prop txtClass
+ * @prop contentClass
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const ButtonToggle: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ButtonToggle = InstanceType<typeof ButtonToggle>;
+export default ButtonToggle;

package/dist/forms/button-toggle/ButtonToggleGroup.svelte.d.ts

@@ -0,0 +1,26 @@
+export default ButtonToggleGroup;
+type ButtonToggleGroup = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const ButtonToggleGroup: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}

package/dist/forms/button-toggle/CheckIcon.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import type { CheckIconProps } from '../../types/index.js';
+	import clsx from 'clsx';
+	let { class: className, ...restProps }: CheckIconProps = $props();
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="16"
+	height="16"
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke="currentColor"
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class={clsx(className)}
+	{...restProps}
+>
+	<polyline points="20 6 9 17 4 12"></polyline>
+</svg>
+
+<!--
+
+## Props
+@prop class: className
+@prop ...restProps
+-->

package/dist/forms/button-toggle/CheckIcon.svelte.d.ts

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

package/dist/forms/button-toggle/index.d.ts

@@ -0,0 +1,4 @@
+export { default as ButtonToggleGroup } from './ButtonToggleGroup.svelte';
+export { default as ButtonToggle } from './ButtonToggle.svelte';
+export { default as CheckIcon } from './CheckIcon.svelte';
+export { buttonToggleGroup, buttonToggle } from './theme.js';

package/dist/forms/button-toggle/index.js

@@ -0,0 +1,4 @@
+export { default as ButtonToggleGroup } from './ButtonToggleGroup.svelte';
+export { default as ButtonToggle } from './ButtonToggle.svelte';
+export { default as CheckIcon } from './CheckIcon.svelte';
+export { buttonToggleGroup, buttonToggle } from './theme.js';

package/dist/forms/button-toggle/theme.d.ts

@@ -0,0 +1,347 @@
+import type { Classes } from '../../themes/themeUtils.js';
+import { type VariantProps } from 'tailwind-variants';
+export declare const buttonToggleGroup: import("tailwind-variants").TVReturnType<{
+    roundedSize: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+}, undefined, "inline-flex border border-gray-300 overflow-hidden", {
+    roundedSize: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    roundedSize: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+}, undefined, "inline-flex border border-gray-300 overflow-hidden", unknown, unknown, undefined>>;
+export type ButtonToggleVariants = VariantProps<typeof buttonToggle> & Classes<typeof buttonToggle>;
+export declare const buttonToggle: import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            text: string;
+        };
+        false: {};
+    };
+    size: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+    };
+    roundedSize: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+        full: {
+            button: string;
+        };
+    };
+    color: {
+        primary: {
+            button: string;
+        };
+        secondary: {
+            button: string;
+        };
+        gray: {
+            button: string;
+        };
+        red: {
+            button: string;
+        };
+        orange: {
+            button: string;
+        };
+        amber: {
+            button: string;
+        };
+        yellow: {
+            button: string;
+        };
+        lime: {
+            button: string;
+        };
+        green: {
+            button: string;
+        };
+        emerald: {
+            button: string;
+        };
+        teal: {
+            button: string;
+        };
+        cyan: {
+            button: string;
+        };
+        sky: {
+            button: string;
+        };
+        blue: {
+            button: string;
+        };
+        indigo: {
+            button: string;
+        };
+        violet: {
+            button: string;
+        };
+        purple: {
+            button: string;
+        };
+        fuchsia: {
+            button: string;
+        };
+        pink: {
+            button: string;
+        };
+        rose: {
+            button: string;
+        };
+        none: {};
+    };
+}, {
+    button: string;
+    content: string;
+    text: string;
+    icon: string;
+}, undefined, {
+    selected: {
+        true: {
+            text: string;
+        };
+        false: {};
+    };
+    size: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+    };
+    roundedSize: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+        full: {
+            button: string;
+        };
+    };
+    color: {
+        primary: {
+            button: string;
+        };
+        secondary: {
+            button: string;
+        };
+        gray: {
+            button: string;
+        };
+        red: {
+            button: string;
+        };
+        orange: {
+            button: string;
+        };
+        amber: {
+            button: string;
+        };
+        yellow: {
+            button: string;
+        };
+        lime: {
+            button: string;
+        };
+        green: {
+            button: string;
+        };
+        emerald: {
+            button: string;
+        };
+        teal: {
+            button: string;
+        };
+        cyan: {
+            button: string;
+        };
+        sky: {
+            button: string;
+        };
+        blue: {
+            button: string;
+        };
+        indigo: {
+            button: string;
+        };
+        violet: {
+            button: string;
+        };
+        purple: {
+            button: string;
+        };
+        fuchsia: {
+            button: string;
+        };
+        pink: {
+            button: string;
+        };
+        rose: {
+            button: string;
+        };
+        none: {};
+    };
+}, {
+    button: string;
+    content: string;
+    text: string;
+    icon: string;
+}, import("tailwind-variants").TVReturnType<{
+    selected: {
+        true: {
+            text: string;
+        };
+        false: {};
+    };
+    size: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+    };
+    roundedSize: {
+        sm: {
+            button: string;
+        };
+        md: {
+            button: string;
+        };
+        lg: {
+            button: string;
+        };
+        xl: {
+            button: string;
+        };
+        full: {
+            button: string;
+        };
+    };
+    color: {
+        primary: {
+            button: string;
+        };
+        secondary: {
+            button: string;
+        };
+        gray: {
+            button: string;
+        };
+        red: {
+            button: string;
+        };
+        orange: {
+            button: string;
+        };
+        amber: {
+            button: string;
+        };
+        yellow: {
+            button: string;
+        };
+        lime: {
+            button: string;
+        };
+        green: {
+            button: string;
+        };
+        emerald: {
+            button: string;
+        };
+        teal: {
+            button: string;
+        };
+        cyan: {
+            button: string;
+        };
+        sky: {
+            button: string;
+        };
+        blue: {
+            button: string;
+        };
+        indigo: {
+            button: string;
+        };
+        violet: {
+            button: string;
+        };
+        purple: {
+            button: string;
+        };
+        fuchsia: {
+            button: string;
+        };
+        pink: {
+            button: string;
+        };
+        rose: {
+            button: string;
+        };
+        none: {};
+    };
+}, {
+    button: string;
+    content: string;
+    text: string;
+    icon: string;
+}, undefined, unknown, unknown, undefined>>;