@rkosafo/cai.components 0.0.75 → 0.0.78

package/dist/forms/toggle/Toggle.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import Label from '../label/Label.svelte';
+	import { untrack } from 'svelte';
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+	import { toggle } from './index.js';
+
+	let {
+		children,
+		size = 'default',
+		value,
+		checked = $bindable(),
+		disabled,
+		color = 'primary',
+		class: className,
+		classes,
+		inputClass,
+		spanClass,
+		offLabel,
+		...restProps
+	}: ToggleProps = $props();
+
+	warnThemeDeprecation(
+		'Toggle',
+		untrack(() => ({ inputClass, spanClass })),
+		{ inputClass: 'input', spanClass: 'span' }
+	);
+
+	const styling = $derived(classes ?? { input: inputClass, span: spanClass });
+
+	const theme = $derived(getTheme('toggle'));
+
+	const { input, label, span } = $derived(
+		toggle({ color, checked, size, disabled, off_state_label: !!offLabel })
+	);
+</script>
+
+<Label class={label({ class: clsx(theme?.label, className) })}>
+	{#if offLabel}
+		{@render offLabel()}
+	{/if}
+	<input
+		type="checkbox"
+		bind:checked
+		{value}
+		{...restProps}
+		{disabled}
+		class={input({ class: clsx(theme?.input, styling.input) })}
+	/>
+	<span class={span({ class: clsx(theme?.span, styling.span) })}></span>
+	{#if children}
+		{@render children()}
+	{/if}
+</Label>
+
+<!--
+## Props
+@prop children
+@prop size = "default"
+@prop value
+@prop checked = $bindable()
+@prop disabled
+@prop color = "primary"
+@prop class: className
+@prop classes
+@prop inputClass
+@prop spanClass
+@prop offLabel
+@prop ...restProps
+-->

package/dist/forms/toggle/Toggle.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Toggle: import("svelte").Component<ToggleProps, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

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

@@ -0,0 +1,2 @@
+export { default as Toggle } from './Toggle.svelte';
+export { toggle } from './theme.js';

package/dist/forms/toggle/index.js

@@ -0,0 +1,2 @@
+export { default as Toggle } from './Toggle.svelte';
+export { toggle } from './theme.js';

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

@@ -0,0 +1,280 @@
+import type { Classes } from '../../themes/themeUtils.js';
+import { type VariantProps } from 'tailwind-variants';
+export type ToggleVariants = VariantProps<typeof toggle> & Classes<typeof toggle>;
+export declare const toggle: import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            label: string;
+        };
+    };
+    checked: {
+        true: string;
+        false: string;
+    };
+    off_state_label: {
+        true: {
+            span: string;
+        };
+    };
+    color: {
+        primary: {
+            span: string;
+        };
+        secondary: {
+            span: string;
+        };
+        gray: {
+            span: string;
+        };
+        red: {
+            span: string;
+        };
+        orange: {
+            span: string;
+        };
+        amber: {
+            span: string;
+        };
+        yellow: {
+            span: string;
+        };
+        lime: {
+            span: string;
+        };
+        green: {
+            span: string;
+        };
+        emerald: {
+            span: string;
+        };
+        teal: {
+            span: string;
+        };
+        cyan: {
+            span: string;
+        };
+        sky: {
+            span: string;
+        };
+        blue: {
+            span: string;
+        };
+        indigo: {
+            span: string;
+        };
+        violet: {
+            span: string;
+        };
+        purple: {
+            span: string;
+        };
+        fuchsia: {
+            span: string;
+        };
+        pink: {
+            span: string;
+        };
+        rose: {
+            span: string;
+        };
+    };
+    size: {
+        small: {
+            span: string;
+        };
+        default: {
+            span: string;
+        };
+        large: {
+            span: string;
+        };
+    };
+}, {
+    span: string;
+    label: string;
+    input: string;
+}, undefined, {
+    disabled: {
+        true: {
+            label: string;
+        };
+    };
+    checked: {
+        true: string;
+        false: string;
+    };
+    off_state_label: {
+        true: {
+            span: string;
+        };
+    };
+    color: {
+        primary: {
+            span: string;
+        };
+        secondary: {
+            span: string;
+        };
+        gray: {
+            span: string;
+        };
+        red: {
+            span: string;
+        };
+        orange: {
+            span: string;
+        };
+        amber: {
+            span: string;
+        };
+        yellow: {
+            span: string;
+        };
+        lime: {
+            span: string;
+        };
+        green: {
+            span: string;
+        };
+        emerald: {
+            span: string;
+        };
+        teal: {
+            span: string;
+        };
+        cyan: {
+            span: string;
+        };
+        sky: {
+            span: string;
+        };
+        blue: {
+            span: string;
+        };
+        indigo: {
+            span: string;
+        };
+        violet: {
+            span: string;
+        };
+        purple: {
+            span: string;
+        };
+        fuchsia: {
+            span: string;
+        };
+        pink: {
+            span: string;
+        };
+        rose: {
+            span: string;
+        };
+    };
+    size: {
+        small: {
+            span: string;
+        };
+        default: {
+            span: string;
+        };
+        large: {
+            span: string;
+        };
+    };
+}, {
+    span: string;
+    label: string;
+    input: string;
+}, import("tailwind-variants").TVReturnType<{
+    disabled: {
+        true: {
+            label: string;
+        };
+    };
+    checked: {
+        true: string;
+        false: string;
+    };
+    off_state_label: {
+        true: {
+            span: string;
+        };
+    };
+    color: {
+        primary: {
+            span: string;
+        };
+        secondary: {
+            span: string;
+        };
+        gray: {
+            span: string;
+        };
+        red: {
+            span: string;
+        };
+        orange: {
+            span: string;
+        };
+        amber: {
+            span: string;
+        };
+        yellow: {
+            span: string;
+        };
+        lime: {
+            span: string;
+        };
+        green: {
+            span: string;
+        };
+        emerald: {
+            span: string;
+        };
+        teal: {
+            span: string;
+        };
+        cyan: {
+            span: string;
+        };
+        sky: {
+            span: string;
+        };
+        blue: {
+            span: string;
+        };
+        indigo: {
+            span: string;
+        };
+        violet: {
+            span: string;
+        };
+        purple: {
+            span: string;
+        };
+        fuchsia: {
+            span: string;
+        };
+        pink: {
+            span: string;
+        };
+        rose: {
+            span: string;
+        };
+    };
+    size: {
+        small: {
+            span: string;
+        };
+        default: {
+            span: string;
+        };
+        large: {
+            span: string;
+        };
+    };
+}, {
+    span: string;
+    label: string;
+    input: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/forms/toggle/theme.js

@@ -0,0 +1,97 @@
+import { tv } from 'tailwind-variants';
+export const toggle = tv({
+    slots: {
+        span: "me-3 shrink-0 bg-gray-200 rounded-full peer-focus:ring-4 peer-checked:after:translate-x-full peer-checked:rtl:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:bg-white after:border-gray-300 after:border after:rounded-full after:transition-all dark:bg-gray-600 dark:border-gray-500 relative ",
+        label: 'flex items-center',
+        input: 'w-4 h-4 bg-gray-100 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 rounded-sm dark:bg-gray-700 dark:border-gray-600 sr-only peer'
+    },
+    variants: {
+        disabled: {
+            true: { label: 'cursor-not-allowed opacity-50' }
+        },
+        checked: {
+            true: '',
+            false: ''
+        },
+        off_state_label: {
+            true: { span: 'ms-3' }
+        },
+        color: {
+            // primary, secondary, gray, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose
+            primary: {
+                span: 'peer-focus:ring-primary-300 dark:peer-focus:ring-primary-800 peer-checked:bg-primary-600'
+            },
+            secondary: {
+                span: 'peer-focus:ring-secondary-300 dark:peer-focus:ring-secondary-800 peer-checked:bg-secondary-600'
+            },
+            gray: {
+                span: 'peer-focus:ring-gray-300 dark:peer-focus:ring-gray-800 peer-checked:bg-gray-500'
+            },
+            red: {
+                span: 'peer-focus:ring-red-300 dark:peer-focus:ring-red-800 peer-checked:bg-red-600'
+            },
+            orange: {
+                span: 'peer-focus:ring-orange-300 dark:peer-focus:ring-orange-800 peer-checked:bg-orange-500'
+            },
+            amber: {
+                span: 'peer-focus:ring-amber-300 dark:peer-focus:ring-amber-800 peer-checked:bg-amber-600'
+            },
+            yellow: {
+                span: 'peer-focus:ring-yellow-300 dark:peer-focus:ring-yellow-800 peer-checked:bg-yellow-400'
+            },
+            lime: {
+                span: 'peer-focus:ring-lime-300 dark:peer-focus:ring-lime-800 peer-checked:bg-lime-500'
+            },
+            green: {
+                span: 'peer-focus:ring-green-300 dark:peer-focus:ring-green-800 peer-checked:bg-green-600'
+            },
+            emerald: {
+                span: 'peer-focus:ring-emerald-300 dark:peer-focus:ring-emerald-800 peer-checked:bg-emerald-600'
+            },
+            teal: {
+                span: 'peer-focus:ring-teal-300 dark:peer-focus:ring-teal-800 peer-checked:bg-teal-600'
+            },
+            cyan: {
+                span: 'peer-focus:ring-cyan-300 dark:peer-focus:ring-cyan-800 peer-checked:bg-cyan-600'
+            },
+            sky: {
+                span: 'peer-focus:ring-sky-300 dark:peer-focus:ring-sky-800 peer-checked:bg-sky-600'
+            },
+            blue: {
+                span: 'peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 peer-checked:bg-blue-600'
+            },
+            indigo: {
+                span: 'peer-focus:ring-indigo-300 dark:peer-focus:ring-indigo-800 peer-checked:bg-indigo-600'
+            },
+            violet: {
+                span: 'peer-focus:ring-violet-300 dark:peer-focus:ring-violet-800 peer-checked:bg-violet-600'
+            },
+            purple: {
+                span: 'peer-focus:ring-purple-300 dark:peer-focus:ring-purple-800 peer-checked:bg-purple-600'
+            },
+            fuchsia: {
+                span: 'peer-focus:ring-fuchsia-300 dark:peer-focus:ring-fuchsia-800 peer-checked:bg-fuchsia-600'
+            },
+            pink: {
+                span: 'peer-focus:ring-pink-300 dark:peer-focus:ring-pink-800 peer-checked:bg-pink-600'
+            },
+            rose: {
+                span: 'peer-focus:ring-rose-300 dark:peer-focus:ring-rose-800 peer-checked:bg-rose-600'
+            }
+        },
+        size: {
+            small: {
+                span: 'w-9 h-5 after:top-[2px] after:start-[2px] after:h-4 after:w-4'
+            },
+            default: {
+                span: 'w-11 h-6 after:top-0.5 after:start-[2px] after:h-5 after:w-5'
+            },
+            large: {
+                span: 'w-14 h-7 after:top-0.5 after:start-[4px]  after:h-6 after:w-6'
+            }
+        }
+    },
+    defaultVariants: {
+        color: 'primary'
+    }
+});

package/dist/index.d.ts

@@ -30,6 +30,7 @@ export * from './ui/toast/index.js';
 export * from './ui/tooltip/index.js';
 export * from './layout/Chat/index.js';
 export * from './layout/mailing/index.js';
+export * from './ui/speedDial/index.js';
 export * from './forms/input/index.js';
 export * from './forms/label/index.js';
 export * from './forms/datepicker/index.js';
@@ -38,6 +39,8 @@ export * from './forms/select/index.js';
 export * from './forms/radio/index.js';
 export * from './forms/checkbox/index.js';
 export * from './forms/FormFileUpload/index.js';
+export * from './forms/button-toggle/index.js';
+export * from './forms/toggle/index.js';
 export * from './forms/form/index.js';
 export * from './forms/FormInput/index.js';
 export * from './forms/FormDatepicker/index.js';

package/dist/index.js

@@ -31,6 +31,7 @@ export * from './ui/toast/index.js';
 export * from './ui/tooltip/index.js';
 export * from './layout/Chat/index.js';
 export * from './layout/mailing/index.js';
+export * from './ui/speedDial/index.js';
 export * from './forms/input/index.js';
 export * from './forms/label/index.js';
 export * from './forms/datepicker/index.js';
@@ -39,6 +40,8 @@ export * from './forms/select/index.js';
 export * from './forms/radio/index.js';
 export * from './forms/checkbox/index.js';
 export * from './forms/FormFileUpload/index.js';
+export * from './forms/button-toggle/index.js';
+export * from './forms/toggle/index.js';
 export * from './forms/form/index.js';
 export * from './forms/FormInput/index.js';
 export * from './forms/FormDatepicker/index.js';

package/dist/layout/Chat/CategorySelector.svelte

@@ -1,52 +1,52 @@
-<script lang="ts">
-	import { findTicketCategoryParents, IconifyIcon } from '../../index.js';
-	import { slide } from 'svelte/transition';
-	import type { CategorySelectorProps, ICaseCategory } from './types.js';
-
-	let { items = [], options = [], onClick }: CategorySelectorProps = $props();
-
-	let openSubmenu = $state(-1);
-
-	function toggleSubmenu(index: any) {
-		openSubmenu = openSubmenu === index ? -1 : index;
-	}
-	function handleItemClick(option: ICaseCategory) {
-		if (!option.items) {
-			const data = findTicketCategoryParents(option, options);
-			onClick?.({ selected: option, list: data });
-		}
-	}
-</script>
-
-<ul transition:slide class="divide-y">
-	{#each items as item, index (item.name)}
-		<li class="w-full text-sm">
-			<button
-				type="button"
-				class="w-full px-2 py-1 text-left hover:bg-gray-100"
-				onclick={() => {
-					if (item.items) {
-						toggleSubmenu(index);
-					} else {
-						handleItemClick(item);
-					}
-				}}
-			>
-				<div class="flex items-center justify-between">
-					{item.name}
-					{#if item.items}
-						<IconifyIcon
-							icon={openSubmenu === index ? 'ri:arrow-up-s-fill' : 'ri:arrow-down-s-fill'}
-							class="text-lg text-gray-500"
-						/>
-					{/if}
-				</div>
-			</button>
-			{#if item.items && openSubmenu === index}
-				<div class="pl-4">
-					<svelte:self items={item.items} onclick {options} />
-				</div>
-			{/if}
-		</li>
-	{/each}
-</ul>
+<script lang="ts">
+	import { findTicketCategoryParents, IconifyIcon } from '../../index.js';
+	import { slide } from 'svelte/transition';
+	import type { CategorySelectorProps, ICaseCategory } from './types.js';
+
+	let { items = [], options = [], onClick }: CategorySelectorProps = $props();
+
+	let openSubmenu = $state(-1);
+
+	function toggleSubmenu(index: any) {
+		openSubmenu = openSubmenu === index ? -1 : index;
+	}
+	function handleItemClick(option: ICaseCategory) {
+		if (!option.items) {
+			const data = findTicketCategoryParents(option, options);
+			onClick?.({ selected: option, list: data });
+		}
+	}
+</script>
+
+<ul transition:slide class="divide-y">
+	{#each items as item, index (item.name)}
+		<li class="w-full text-sm">
+			<button
+				type="button"
+				class="w-full px-2 py-1 text-left hover:bg-gray-100"
+				onclick={() => {
+					if (item.items) {
+						toggleSubmenu(index);
+					} else {
+						handleItemClick(item);
+					}
+				}}
+			>
+				<div class="flex items-center justify-between">
+					{item.name}
+					{#if item.items}
+						<IconifyIcon
+							icon={openSubmenu === index ? 'ri:arrow-up-s-fill' : 'ri:arrow-down-s-fill'}
+							class="text-lg text-gray-500"
+						/>
+					{/if}
+				</div>
+			</button>
+			{#if item.items && openSubmenu === index}
+				<div class="pl-4">
+					<svelte:self items={item.items} onclick {options} />
+				</div>
+			{/if}
+		</li>
+	{/each}
+</ul>