@rkosafo/cai.components 0.0.1 → 0.0.3

package/dist/ui/toolbar/Toolbar.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import { setContext } from 'svelte';
+	import { toolbar } from './index.js';
+	import { getTheme, type ToolbarProps } from '../../index.js';
+
+	let {
+		children,
+		end,
+		color,
+		embedded,
+		class: className,
+		classes,
+		...restProps
+	}: ToolbarProps = $props();
+
+	const theme = getTheme('toolbar');
+
+	const context = $state({ separators: false });
+	setContext('toolbar', context);
+
+	let frameColor = $derived(embedded ? 'default' : color);
+
+	let { base, content } = $derived(
+		toolbar({
+			color: frameColor,
+			embedded,
+			separators: context.separators
+		})
+	);
+
+	// let separatorsClass: string = twMerge($separators && 'sm:divide-x rtl:divide-x-reverse');
+
+	// let divClass: string = twMerge('flex justify-between items-center', !embedded && 'py-2 px-3', className);
+</script>
+
+<div {...restProps} class={base({ class: clsx(theme?.base, className) })}>
+	<div class={content({ class: clsx(theme?.content, classes?.content) })}>
+		{@render children?.()}
+	</div>
+	{#if end}
+		{@render end()}
+	{/if}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1116)
+## Props
+@prop children
+@prop end
+@prop color
+@prop embedded
+@prop class: className
+@prop classes
+@prop ...restProps
+-->

package/dist/ui/toolbar/Toolbar.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type ToolbarProps } from '../../index.js';
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ToolbarProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1116)
+ * ## Props
+ * @prop children
+ * @prop end
+ * @prop color
+ * @prop embedded
+ * @prop class: className
+ * @prop classes
+ * @prop ...restProps
+ */
+declare const Toolbar: import("svelte").Component<ToolbarProps, {}, "">;
+type Toolbar = ReturnType<typeof Toolbar>;
+export default Toolbar;

package/dist/ui/toolbar/ToolbarButton.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import { toolbarButton } from './index.js';
+
+	import clsx from 'clsx';
+	import { getTheme, type ToolbarButtonProps } from '../../index.js';
+
+	const background = getContext('background');
+	let {
+		children,
+		color,
+		name,
+		'aria-label': ariaLabel,
+		size,
+		class: className,
+		...restProps
+	}: ToolbarButtonProps = $props();
+
+	const theme = getTheme('toolbarButton');
+
+	const buttonCls = $derived(
+		toolbarButton({
+			color,
+			size,
+			background: !!background,
+			class: clsx(theme, className)
+		})
+	);
+</script>
+
+{#if restProps.href === undefined}
+	<button type="button" {...restProps} class={buttonCls} aria-label={ariaLabel ?? name}>
+		{#if name}<span class="sr-only">{name}</span>{/if}
+		{@render children?.()}
+	</button>
+{:else}
+	<a {...restProps} class={buttonCls} aria-label={ariaLabel ?? name}>
+		{#if name}<span class="sr-only">{name}</span>{/if}
+		{@render children?.()}
+	</a>
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1122)
+## Props
+@prop children
+@prop color
+@prop name
+@prop "aria-label": ariaLabel
+@prop size
+@prop class: className
+@prop ...restProps
+-->

package/dist/ui/toolbar/ToolbarButton.svelte.d.ts

@@ -0,0 +1,17 @@
+import { type ToolbarButtonProps } from '../../index.js';
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ToolbarButtonProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1122)
+ * ## Props
+ * @prop children
+ * @prop color
+ * @prop name
+ * @prop "aria-label": ariaLabel
+ * @prop size
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const ToolbarButton: import("svelte").Component<ToolbarButtonProps, {}, "">;
+type ToolbarButton = ReturnType<typeof ToolbarButton>;
+export default ToolbarButton;

package/dist/ui/toolbar/ToolbarGroup.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import clsx from 'clsx';
+	import { getContext } from 'svelte';
+	import { toolbarGroup } from './index.js';
+	import { getTheme, type ToolbarGroupProps } from '../../index.js';
+
+	let {
+		children,
+		spacing,
+		padding,
+		position = 'middle',
+		class: className,
+		...restProps
+	}: ToolbarGroupProps = $props();
+
+	const theme = getTheme('toolbarGroup');
+
+	const groupCls = $derived(
+		toolbarGroup({ spacing, padding, position, class: clsx(theme, className) })
+	);
+
+	const context = getContext<Record<string, boolean>>('toolbar');
+
+	if (context) context.separators = true;
+</script>
+
+<div {...restProps} class={groupCls}>
+	{@render children?.()}
+</div>
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1120)
+## Props
+@prop children
+@prop spacing
+@prop padding
+@prop position = "middle"
+@prop class: className
+@prop ...restProps
+-->

package/dist/ui/toolbar/ToolbarGroup.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type ToolbarGroupProps } from '../../index.js';
+/**
+ * [Go to docs](https://flowbite-svelte.com/)
+ * ## Type
+ * [ToolbarGroupProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1120)
+ * ## Props
+ * @prop children
+ * @prop spacing
+ * @prop padding
+ * @prop position = "middle"
+ * @prop class: className
+ * @prop ...restProps
+ */
+declare const ToolbarGroup: import("svelte").Component<ToolbarGroupProps, {}, "">;
+type ToolbarGroup = ReturnType<typeof ToolbarGroup>;
+export default ToolbarGroup;

package/dist/ui/toolbar/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Toolbar } from "./Toolbar.svelte";
+export { default as ToolbarButton } from "./ToolbarButton.svelte";
+export { default as ToolbarGroup } from "./ToolbarGroup.svelte";
+export { toolbar, toolbarGroup, toolbarButton } from "./theme.js";

package/dist/ui/toolbar/index.js

@@ -0,0 +1,4 @@
+export { default as Toolbar } from "./Toolbar.svelte";
+export { default as ToolbarButton } from "./ToolbarButton.svelte";
+export { default as ToolbarGroup } from "./ToolbarGroup.svelte";
+export { toolbar, toolbarGroup, toolbarButton } from "./theme.js";

package/dist/ui/toolbar/theme.d.ts

@@ -0,0 +1,320 @@
+import type { Classes } from "../../themes/themeUtils.js";
+import { type VariantProps } from "tailwind-variants";
+export type ToolbarVariants = VariantProps<typeof toolbar> & Classes<typeof toolbar>;
+export type ToolbarGroupVariants = VariantProps<typeof toolbarGroup>;
+export declare const toolbar: import("tailwind-variants").TVReturnType<{
+    embedded: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    color: {
+        default: {
+            base: string;
+            content: string;
+        };
+        primary: {
+            base: string;
+            content: string;
+        };
+        secondary: {
+            base: string;
+            content: string;
+        };
+        gray: {
+            base: string;
+            content: string;
+        };
+        red: {
+            base: string;
+            content: string;
+        };
+        yellow: {
+            base: string;
+            content: string;
+        };
+        green: {
+            base: string;
+            content: string;
+        };
+        indigo: {
+            base: string;
+            content: string;
+        };
+        purple: {
+            base: string;
+            content: string;
+        };
+        pink: {
+            base: string;
+            content: string;
+        };
+        blue: {
+            base: string;
+            content: string;
+        };
+        dark: {
+            base: string;
+            content: string;
+        };
+    };
+    separators: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+}, undefined, {
+    embedded: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    color: {
+        default: {
+            base: string;
+            content: string;
+        };
+        primary: {
+            base: string;
+            content: string;
+        };
+        secondary: {
+            base: string;
+            content: string;
+        };
+        gray: {
+            base: string;
+            content: string;
+        };
+        red: {
+            base: string;
+            content: string;
+        };
+        yellow: {
+            base: string;
+            content: string;
+        };
+        green: {
+            base: string;
+            content: string;
+        };
+        indigo: {
+            base: string;
+            content: string;
+        };
+        purple: {
+            base: string;
+            content: string;
+        };
+        pink: {
+            base: string;
+            content: string;
+        };
+        blue: {
+            base: string;
+            content: string;
+        };
+        dark: {
+            base: string;
+            content: string;
+        };
+    };
+    separators: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+}, import("tailwind-variants").TVReturnType<{
+    embedded: {
+        true: {};
+        false: {
+            base: string;
+        };
+    };
+    color: {
+        default: {
+            base: string;
+            content: string;
+        };
+        primary: {
+            base: string;
+            content: string;
+        };
+        secondary: {
+            base: string;
+            content: string;
+        };
+        gray: {
+            base: string;
+            content: string;
+        };
+        red: {
+            base: string;
+            content: string;
+        };
+        yellow: {
+            base: string;
+            content: string;
+        };
+        green: {
+            base: string;
+            content: string;
+        };
+        indigo: {
+            base: string;
+            content: string;
+        };
+        purple: {
+            base: string;
+            content: string;
+        };
+        pink: {
+            base: string;
+            content: string;
+        };
+        blue: {
+            base: string;
+            content: string;
+        };
+        dark: {
+            base: string;
+            content: string;
+        };
+    };
+    separators: {
+        true: {
+            content: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const toolbarGroup: import("tailwind-variants").TVReturnType<{
+    spacing: {
+        default: string;
+        tight: string;
+        loose: string;
+    };
+    padding: {
+        default: string;
+        none: string;
+    };
+    position: {
+        middle: string;
+        first: string;
+        last: string;
+    };
+}, undefined, "flex items-center", {
+    spacing: {
+        default: string;
+        tight: string;
+        loose: string;
+    };
+    padding: {
+        default: string;
+        none: string;
+    };
+    position: {
+        middle: string;
+        first: string;
+        last: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    spacing: {
+        default: string;
+        tight: string;
+        loose: string;
+    };
+    padding: {
+        default: string;
+        none: string;
+    };
+    position: {
+        middle: string;
+        first: string;
+        last: string;
+    };
+}, undefined, "flex items-center", unknown, unknown, undefined>>;
+export type ToolbarButtonVariants = VariantProps<typeof toolbarButton>;
+export declare const toolbarButton: import("tailwind-variants").TVReturnType<{
+    color: {
+        dark: string;
+        gray: string;
+        red: string;
+        yellow: string;
+        green: string;
+        indigo: string;
+        purple: string;
+        pink: string;
+        blue: string;
+        primary: string;
+        default: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    background: {
+        true: string;
+        false: string;
+    };
+}, undefined, "focus:outline-hidden whitespace-normal", {
+    color: {
+        dark: string;
+        gray: string;
+        red: string;
+        yellow: string;
+        green: string;
+        indigo: string;
+        purple: string;
+        pink: string;
+        blue: string;
+        primary: string;
+        default: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    background: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        dark: string;
+        gray: string;
+        red: string;
+        yellow: string;
+        green: string;
+        indigo: string;
+        purple: string;
+        pink: string;
+        blue: string;
+        primary: string;
+        default: string;
+    };
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    background: {
+        true: string;
+        false: string;
+    };
+}, undefined, "focus:outline-hidden whitespace-normal", unknown, unknown, undefined>>;

package/dist/ui/toolbar/theme.js

@@ -0,0 +1,155 @@
+import { tv } from "tailwind-variants";
+export const toolbar = tv({
+    slots: {
+        base: "flex justify-between items-center",
+        content: "flex flex-wrap items-center"
+    },
+    variants: {
+        embedded: {
+            true: {},
+            false: {
+                base: "py-2 px-3 rounded-lg dark:border"
+            }
+        },
+        color: {
+            default: {
+                base: "bg-gray-50 dark:bg-gray-800 dark:border-gray-600",
+                content: "divide-gray-300 dark:divide-gray-800"
+            },
+            primary: {
+                base: "bg-primary-50 dark:bg-gray-800 dark:border-primary-800",
+                content: "divide-primary-300 dark:divide-primary-800"
+            },
+            secondary: {
+                base: "bg-secondary-50 dark:bg-gray-800 dark:border-secondary-800",
+                content: "divide-secondary-300 dark:divide-primary-800"
+            },
+            gray: {
+                base: "bg-gray-50 dark:bg-gray-800 dark:border-gray-800",
+                content: "divide-gray-300 dark:divide-gray-800"
+            },
+            red: {
+                base: "bg-red-50 dark:bg-gray-800 dark:border-red-800",
+                content: "divide-red-300 dark:divide-red-800"
+            },
+            yellow: {
+                base: "bg-yellow-50 dark:bg-gray-800 dark:border-yellow-800",
+                content: "divide-yellow-300 dark:divide-yellow-800"
+            },
+            green: {
+                base: "bg-green-50 dark:bg-gray-800 dark:border-green-800",
+                content: "divide-green-300 dark:divide-green-800"
+            },
+            indigo: {
+                base: "bg-indigo-50 dark:bg-gray-800 dark:border-indigo-800",
+                content: "divide-indigo-300 dark:divide-indigo-800"
+            },
+            purple: {
+                base: "bg-purple-50 dark:bg-gray-800 dark:border-purple-800",
+                content: "divide-purple-300 dark:divide-purple-800"
+            },
+            pink: {
+                base: "bg-pink-50 dark:bg-gray-800 dark:border-pink-800",
+                content: "divide-pink-300 dark:divide-pink-800"
+            },
+            blue: {
+                base: "bg-blue-50 dark:bg-gray-800 dark:border-blue-800",
+                content: "divide-blue-300 dark:divide-blue-800"
+            },
+            dark: {
+                base: "bg-gray-50 dark:bg-gray-800 dark:border-gray-800",
+                content: "divide-gray-300 dark:divide-gray-800"
+            }
+        },
+        separators: {
+            true: {
+                content: "sm:divide-x rtl:divide-x-reverse"
+            }
+        }
+    },
+    compoundVariants: [
+        {
+            embedded: true,
+            color: "default",
+            class: {
+                base: "bg-transparent"
+            }
+        }
+    ],
+    defaultVariants: {
+        color: "default"
+    }
+});
+export const toolbarGroup = tv({
+    base: "flex items-center",
+    variants: {
+        spacing: {
+            default: "space-x-1 rtl:space-x-reverse",
+            tight: "space-x-0.5 rtl:space-x-reverse",
+            loose: "space-x-2 rtl:space-x-reverse"
+        },
+        padding: {
+            default: "sm:not(:last):pe-4 sm:not(:first):ps-4",
+            none: ""
+        },
+        position: {
+            middle: "",
+            first: "sm:ps-0",
+            last: "sm:pe-0"
+        }
+    },
+    compoundVariants: [
+        {
+            position: ["first", "last"],
+            class: "sm:px-0"
+        }
+    ],
+    defaultVariants: {
+        spacing: "default",
+        padding: "default"
+    }
+});
+export const toolbarButton = tv({
+    base: "focus:outline-hidden whitespace-normal",
+    variants: {
+        color: {
+            dark: "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600",
+            gray: "text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 dark:hover:text-gray-300",
+            red: "text-red-500 focus:ring-red-400 hover:bg-red-200 dark:hover:bg-red-800 dark:hover:text-red-300",
+            yellow: "text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-300",
+            green: "text-green-500 focus:ring-green-400 hover:bg-green-200 dark:hover:bg-green-800 dark:hover:text-green-300",
+            indigo: "text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-300",
+            purple: "text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:hover:bg-purple-800 dark:hover:text-purple-300",
+            pink: "text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:hover:bg-pink-800 dark:hover:text-pink-300",
+            blue: "text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:hover:bg-blue-800 dark:hover:text-blue-300",
+            primary: "text-primary-500 focus:ring-primary-400 hover:bg-primary-200 dark:hover:bg-primary-800 dark:hover:text-primary-300",
+            default: "focus:ring-gray-400 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-50"
+        },
+        size: {
+            xs: "m-0.5 rounded-xs focus:ring-1 p-0.5",
+            sm: "m-0.5 rounded-sm focus:ring-1 p-0.5",
+            md: "m-0.5 rounded-lg focus:ring-2 p-1.5",
+            lg: "m-0.5 rounded-lg focus:ring-2 p-2.5"
+        },
+        background: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            color: "default",
+            background: true,
+            class: "dark:hover:bg-gray-600"
+        },
+        {
+            color: "default",
+            background: false,
+            class: "dark:hover:bg-gray-700"
+        }
+    ],
+    defaultVariants: {
+        color: "default",
+        size: "md"
+    }
+});