@rkosafo/cai.components 0.0.1 → 0.0.5

package/dist/forms/checkbox/Checkbox.svelte.d.ts

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

package/dist/forms/checkbox/CheckboxButton.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	import { Button, getTheme, type CheckboxButtonProps } from '../../index.js';
+	import clsx from 'clsx';
+	import { checkboxButton } from './index.js';
+
+	let {
+		children,
+		class: className,
+		group = $bindable([]),
+		value,
+		checked,
+		inline,
+		pill,
+		outline,
+		size,
+		color,
+		shadow,
+		...restProps
+	}: CheckboxButtonProps = $props();
+
+	const theme = getTheme('checkboxButton');
+
+	// react on external group changes
+	function init(_: HTMLElement, _group: (string | number)[]) {
+		group = _group ?? [];
+
+		if (checked === undefined && value !== undefined) checked = group.includes(value);
+		onChange();
+
+		$effect(() => {
+			if (value !== undefined) {
+				checked = group.includes(value);
+			}
+		});
+	}
+
+	function onChange() {
+		if (!value) return;
+
+		// There's a bug in Svelte and bind:group is not working with wrapped checkbox
+		// This workaround is taken from:
+		// https://svelte.dev/repl/de117399559f4e7e9e14e2fc9ab243cc?version=3.12.1
+		const index = group.indexOf(value);
+
+		if (checked === undefined) checked = index >= 0;
+
+		if (checked) {
+			if (index < 0) {
+				group.push(value);
+				group = group;
+			}
+		} else {
+			if (index >= 0) {
+				group.splice(index, 1);
+				group = group;
+			}
+		}
+	}
+
+	let buttonClass: string = $derived(
+		checkboxButton({ inline, checked, class: clsx(theme, className) })
+	);
+</script>
+
+<Button tag="label" {checked} {pill} {outline} {size} {color} {shadow} class={buttonClass}>
+	<input
+		use:init={group}
+		type="checkbox"
+		bind:checked
+		{value}
+		{...restProps}
+		class="sr-only"
+		onchange={onChange}
+	/>
+	{@render children?.()}
+</Button>
+
+<!--
+@component
+@prop children
+@prop class: className
+@prop group = $bindable([])
+@prop value
+@prop checked
+@prop inline
+@prop pill
+@prop outline
+@prop size
+@prop color
+@prop shadow
+@prop ...restProps
+-->

package/dist/forms/checkbox/CheckboxButton.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type CheckboxButtonProps } from '../../index.js';
+/**
+ * @prop children
+ * @prop class: className
+ * @prop group = $bindable([])
+ * @prop value
+ * @prop checked
+ * @prop inline
+ * @prop pill
+ * @prop outline
+ * @prop size
+ * @prop color
+ * @prop shadow
+ * @prop ...restProps
+ */
+declare const CheckboxButton: import("svelte").Component<CheckboxButtonProps, {}, "group">;
+type CheckboxButton = ReturnType<typeof CheckboxButton>;
+export default CheckboxButton;

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

@@ -0,0 +1,3 @@
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as CheckboxButton } from "./CheckboxButton.svelte";
+export { checkbox, checkboxButton } from "./theme.js";

package/dist/forms/checkbox/index.js

@@ -0,0 +1,3 @@
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as CheckboxButton } from "./CheckboxButton.svelte";
+export { checkbox, checkboxButton } from "./theme.js";

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

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

package/dist/forms/checkbox/theme.js

@@ -0,0 +1,113 @@
+import { tv } from "tailwind-variants";
+export const checkbox = tv({
+    slots: {
+        base: "w-4 h-4 border-gray-300 dark:ring-offset-gray-800 focus:ring-2 me-2 rounded-sm",
+        div: "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: {
+                base: "text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600"
+            },
+            secondary: {
+                base: "text-secondary-600 focus:ring-secondary-500 dark:focus:ring-secondary-600"
+            },
+            gray: {
+                base: "text-gray-600 focus:ring-gray-600 dark:ring-offset-gray-800 dark:focus:ring-gray-600"
+            },
+            red: {
+                base: "text-red-600 focus:ring-red-600 dark:ring-offset-red-600 dark:focus:ring-red-600"
+            },
+            orange: {
+                base: "text-orange-600 focus:ring-orange-600 dark:ring-offset-orange-600 dark:focus:ring-orange-600"
+            },
+            amber: {
+                base: "text-amber-600 focus:ring-amber-600 dark:ring-offset-amber-600 dark:focus:ring-amber-600"
+            },
+            yellow: {
+                base: "text-yellow-400 focus:ring-yellow-400 dark:ring-offset-yellow-400 dark:focus:ring-yellow-400"
+            },
+            lime: {
+                base: "text-lime-700 focus:ring-lime-700 dark:ring-offset-lime-700 dark:focus:ring-lime-700"
+            },
+            green: {
+                base: "text-green-600 focus:ring-green-600 dark:ring-offset-green-600 dark:focus:ring-green-600"
+            },
+            emerald: {
+                base: "text-emerald-600 focus:ring-emerald-600 dark:ring-offset-emerald-600 dark:focus:ring-emerald-600"
+            },
+            teal: {
+                base: "text-teal-600 focus:ring-teal-600 dark:ring-offset-teal-600 dark:focus:ring-teal-600"
+            },
+            cyan: {
+                base: "text-cyan-600 focus:ring-cyan-600 dark:ring-offset-cyan-600 dark:focus:ring-cyan-600"
+            },
+            sky: {
+                base: "text-sky-600 focus:ring-sky-600 dark:ring-offset-sky-600 dark:focus:ring-sky-600"
+            },
+            blue: {
+                base: "text-blue-700 focus:ring-blue-600 dark:ring-offset-blue-700 dark:focus:ring-blue-700"
+            },
+            indigo: {
+                base: "text-indigo-700 focus:ring-indigo-700 dark:ring-offset-indigo-700 dark:focus:ring-indigo-700"
+            },
+            violet: {
+                base: "text-violet-600 focus:ring-violet-600 dark:ring-offset-violet-600 dark:focus:ring-violet-600"
+            },
+            purple: {
+                base: "text-purple-600 focus:ring-purple-600 dark:ring-offset-purple-600 dark:focus:ring-purple-600"
+            },
+            fuchsia: {
+                base: "text-fuchsia-600 focus:ring-fuchsia-600 dark:ring-offset-fuchsia-600 dark:focus:ring-fuchsia-600"
+            },
+            pink: {
+                base: "text-pink-600 focus:ring-pink-600 dark:ring-offset-pink-600 dark:focus:ring-pink-600"
+            },
+            rose: {
+                base: "text-rose-600 focus:ring-rose-600 dark:ring-offset-rose-600 dark:focus:ring-rose-600"
+            }
+        },
+        tinted: {
+            true: { base: "dark:bg-gray-600 dark:border-gray-500" },
+            false: { base: "dark:bg-gray-700 dark:border-gray-600" }
+        },
+        custom: {
+            true: { base: "sr-only peer" }
+        },
+        rounded: {
+            true: { base: "rounded-sm" }
+        },
+        inline: {
+            true: {
+                div: "inline-flex",
+                false: "flex items-center"
+            }
+        },
+        disabled: {
+            true: {
+                base: "cursor-not-allowed opacity-50 bg-gray-200 border-gray-300",
+                div: "cursor-not-allowed opacity-70"
+            }
+        }
+    },
+    defaultVariants: {
+        color: "primary",
+        disabled: false
+    }
+});
+export const checkboxButton = tv({
+    base: "",
+    variants: {
+        inline: {
+            true: "inline-flex",
+            false: "flex"
+        },
+        checked: {
+            true: "outline-4 outline-green-500"
+        }
+    },
+    defaultVariants: {
+        inline: true
+    }
+});