@rkosafo/cai.components 0.0.75 → 0.0.79

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

@@ -0,0 +1,129 @@
+import { tv } from 'tailwind-variants';
+export const buttonToggleGroup = tv({
+    base: 'inline-flex border border-gray-300 overflow-hidden',
+    variants: {
+        roundedSize: {
+            sm: 'rounded-sm',
+            md: 'rounded-md',
+            lg: 'rounded-lg',
+            xl: 'rounded-xl',
+            full: 'rounded-full'
+        }
+    }
+});
+export const buttonToggle = tv({
+    slots: {
+        button: 'relative flex items-center transition-all duration-200 focus:outline-none border-r last:border-r-0 dark:bg-white dark:text-gray-800 disabled:cursor-not-allowed disabled:opacity-50',
+        content: 'flex items-center w-full overflow-hidden relative',
+        text: 'transition-all duration-200 ml-0',
+        icon: 'absolute left-0 flex-shrink-0 text-green-600'
+    },
+    variants: {
+        selected: {
+            true: {
+                text: 'ml-5'
+            },
+            false: {}
+        },
+        size: {
+            sm: {
+                button: 'p-1 px-2 text-sm'
+            },
+            md: {
+                button: 'p-2 px-4 text-base'
+            },
+            lg: {
+                button: 'p-3 px-5 text-lg'
+            },
+            xl: {
+                button: 'p-4 px-6 text-xl'
+            }
+        },
+        roundedSize: {
+            sm: {
+                button: 'first:rounded-s-sm last:rounded-e-sm'
+            },
+            md: {
+                button: 'first:rounded-s-md last:rounded-e-md'
+            },
+            lg: {
+                button: 'first:rounded-s-lg last:rounded-e-lg'
+            },
+            xl: {
+                button: 'first:rounded-s-xl last:rounded-e-xl'
+            },
+            full: {
+                button: 'first:rounded-s-full last:rounded-e-full'
+            }
+        },
+        color: {
+            primary: {
+                button: 'data-[selected=true]:bg-primary-200 data-[selected=false]:hover:bg-gray-100'
+            },
+            secondary: {
+                button: 'data-[selected=true]:bg-secondary-200 data-[selected=false]:hover:bg-gray-100'
+            },
+            gray: {
+                button: 'data-[selected=true]:bg-gray-200 data-[selected=false]:hover:bg-gray-100'
+            },
+            red: {
+                button: 'data-[selected=true]:bg-red-200 data-[selected=false]:hover:bg-red-50'
+            },
+            orange: {
+                button: 'data-[selected=true]:bg-orange-200 data-[selected=false]:hover:bg-orange-50'
+            },
+            amber: {
+                button: 'data-[selected=true]:bg-amber-200 data-[selected=false]:hover:bg-amber-50'
+            },
+            yellow: {
+                button: 'data-[selected=true]:bg-yellow-200 data-[selected=false]:hover:bg-yellow-50'
+            },
+            lime: {
+                button: 'data-[selected=true]:bg-lime-200 data-[selected=false]:hover:bg-lime-50'
+            },
+            green: {
+                button: 'data-[selected=true]:bg-green-200 data-[selected=false]:hover:bg-green-50'
+            },
+            emerald: {
+                button: 'data-[selected=true]:bg-emerald-200 data-[selected=false]:hover:bg-emerald-50'
+            },
+            teal: {
+                button: 'data-[selected=true]:bg-teal-200 data-[selected=false]:hover:bg-teal-50'
+            },
+            cyan: {
+                button: 'data-[selected=true]:bg-cyan-200 data-[selected=false]:hover:bg-cyan-50'
+            },
+            sky: {
+                button: 'data-[selected=true]:bg-sky-200 data-[selected=false]:hover:bg-sky-50'
+            },
+            blue: {
+                button: 'data-[selected=true]:bg-blue-200 data-[selected=false]:hover:bg-blue-50'
+            },
+            indigo: {
+                button: 'data-[selected=true]:bg-indigo-200 data-[selected=false]:hover:bg-indigo-50'
+            },
+            violet: {
+                button: 'data-[selected=true]:bg-violet-200 data-[selected=false]:hover:bg-violet-50'
+            },
+            purple: {
+                button: 'data-[selected=true]:bg-purple-200 data-[selected=false]:hover:bg-purple-50'
+            },
+            fuchsia: {
+                button: 'data-[selected=true]:bg-fuchsia-200 data-[selected=false]:hover:bg-fuchsia-50'
+            },
+            pink: {
+                button: 'data-[selected=true]:bg-pink-200 data-[selected=false]:hover:bg-pink-50'
+            },
+            rose: {
+                button: 'data-[selected=true]:bg-rose-200 data-[selected=false]:hover:bg-rose-50'
+            },
+            none: {}
+        }
+    },
+    defaultVariants: {
+        selected: false,
+        color: 'primary',
+        size: 'md',
+        roundedSize: 'md'
+    }
+});

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/themes/themes.d.ts

@@ -17,3 +17,6 @@ export { checkbox, checkboxButton } from '../forms/checkbox/index.js';
 export { accordion, accordionItem } from '../ui/accordion/index.js';
 export { tabs, tabItem } from '../ui/tab/theme.js';
 export { tooltip } from '../ui/tooltip/index.js';
+export { toggle } from '../forms/toggle/index.js';
+export { buttonToggleGroup, buttonToggle } from '../forms/button-toggle/index.js';
+export { speedDial, speedDialButton } from '../ui/speedDial/index.js';

package/dist/themes/themes.js

@@ -17,3 +17,6 @@ export { checkbox, checkboxButton } from '../forms/checkbox/index.js';
 export { accordion, accordionItem } from '../ui/accordion/index.js';
 export { tabs, tabItem } from '../ui/tab/theme.js';
 export { tooltip } from '../ui/tooltip/index.js';
+export { toggle } from '../forms/toggle/index.js';
+export { buttonToggleGroup, buttonToggle } from '../forms/button-toggle/index.js';
+export { speedDial, speedDialButton } from '../ui/speedDial/index.js';