@rkosafo/cai.components 0.0.1 → 0.0.3

package/dist/forms/input/theme.js

@@ -0,0 +1,100 @@
+import { tv } from 'tailwind-variants';
+export const input = tv({
+    slots: {
+        base: 'relative w-full',
+        input: 'block w-full disabled:cursor-not-allowed disabled:opacity-50 rtl:text-right focus:outline-hidden',
+        left: 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 pointer-events-none start-0 p-2.5',
+        right: 'flex absolute inset-y-0 items-center text-gray-500 dark:text-gray-400 end-0 p-2.5',
+        close: 'absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-black',
+        combo: 'absolute top-full right-0 left-0 z-20 mt-1 max-h-60 overflow-y-auto rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800',
+        comboItem: 'text-gray-900 dark:text-gray-50',
+        div: '',
+        svg: '',
+        wrapper: ''
+    },
+    variants: {
+        size: {
+            sm: { input: 'text-xs px-2 py-1' },
+            md: { input: 'text-sm px-2.5 py-2.5' },
+            lg: { input: 'sm:text-base px-3 py-3' }
+        },
+        color: {
+            default: {
+                input: 'border border-gray-300 dark:border-gray-600 focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500  text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 text-gray-900 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400'
+            },
+            tinted: {
+                input: 'border border-gray-300 dark:border-gray-500 bg-gray-50 text-gray-900 dark:bg-gray-600 dark:text-white dark:placeholder-gray-400'
+            },
+            primary: {
+                input: 'border border-primary-200 dark:border-primary-400 focus:ring-primary-500 focus:border-primary-600 dark:focus:ring-primary-500 dark:focus:border-primary-500 bg-primary-50 text-primary-900 placeholder-primary-700 dark:text-primary-400 dark:placeholder-primary-500 dark:bg-gray-700'
+            },
+            secondary: {
+                input: 'border border-secondary-200 dark:border-secondary-400 focus:ring-secondary-500 focus:border-secondary-600 dark:focus:ring-secondary-500 dark:focus:border-secondary-500 bg-secondary-50 text-secondary-900 placeholder-secondary-700 dark:text-secondary-400 dark:placeholder-secondary-500 dark:bg-gray-700'
+            },
+            green: {
+                input: 'border border-green-200 dark:border-green-400 focus:ring-green-500 focus:border-green-600 dark:focus:ring-green-500 dark:focus:border-green-500 bg-green-50 text-green-900 placeholder-green-700 dark:text-green-400 dark:placeholder-green-500 dark:bg-gray-700'
+            },
+            emerald: {
+                input: 'border border-emerald-200 dark:border-emerald-400 focus:ring-emerald-500 focus:border-emerald-600 dark:focus:ring-emerald-500 dark:focus:border-emerald-500 bg-emerald-50 text-emerald-900 placeholder-emerald-700 dark:text-emerald-400 dark:placeholder-emerald-500 dark:bg-gray-700'
+            },
+            red: {
+                input: 'border border-red-200 dark:border-red-400 focus:ring-red-500 focus:border-red-600 dark:focus:ring-red-500 dark:focus:border-red-500 bg-red-50 text-red-900 placeholder-red-700 dark:text-red-400 dark:placeholder-red-500 dark:bg-gray-700'
+            },
+            blue: {
+                input: 'border border-blue-200 dark:border-blue-400 focus:ring-blue-500 focus:border-blue-600 dark:focus:ring-blue-500 dark:focus:border-blue-500 bg-blue-50 text-blue-900 placeholder-blue-700 dark:text-blue-400 dark:placeholder-blue-500 dark:bg-gray-700'
+            },
+            yellow: {
+                input: 'border border-yellow-200 dark:border-yellow-400 focus:ring-yellow-500 focus:border-yellow-600 dark:focus:ring-yellow-500 dark:focus:border-yellow-500 bg-yellow-50 text-yellow-900 placeholder-yellow-700 dark:text-yellow-400 dark:placeholder-yellow-500 dark:bg-gray-700'
+            },
+            orange: {
+                input: 'border border-orange-200 dark:border-orange-400 focus:ring-orange-500 focus:border-orange-600 dark:focus:ring-orange-500 dark:focus:border-orange-500 bg-orange-50 text-orange-900 placeholder-orange-700 dark:text-orange-400 dark:placeholder-orange-500 dark:bg-gray-700'
+            },
+            gray: {
+                input: 'border border-gray-200 dark:border-gray-400 focus:ring-gray-500 focus:border-gray-600 dark:focus:ring-gray-500 dark:focus:border-gray-500 bg-gray-50 text-gray-900 placeholder-gray-700 dark:text-gray-400 dark:placeholder-gray-500 dark:bg-gray-700'
+            },
+            teal: {
+                input: 'border border-teal-200 dark:border-teal-400 focus:ring-teal-500 focus:border-teal-600 dark:focus:ring-teal-500 dark:focus:border-teal-500 bg-teal-50 text-teal-900 placeholder-teal-700 dark:text-teal-400 dark:placeholder-teal-500 dark:bg-gray-700'
+            },
+            cyan: {
+                input: 'border border-cyan-200 dark:border-cyan-400 focus:ring-cyan-500 focus:border-cyan-600 dark:focus:ring-cyan-500 dark:focus:border-cyan-500 bg-cyan-50 text-cyan-900 placeholder-cyan-700 dark:text-cyan-400 dark:placeholder-cyan-500 dark:bg-gray-700'
+            },
+            sky: {
+                input: 'border border-sky-200 dark:border-sky-400 focus:ring-sky-500 focus:border-sky-600 dark:focus:ring-sky-500 dark:focus:border-sky-500 bg-sky-50 text-sky-900 placeholder-sky-700 dark:text-sky-400 dark:placeholder-sky-500 dark:bg-gray-700'
+            },
+            indigo: {
+                input: 'border border-indigo-200 dark:border-indigo-400 focus:ring-indigo-500 focus:border-indigo-600 dark:focus:ring-indigo-500 dark:focus:border-indigo-500 bg-indigo-50 text-indigo-900 placeholder-indigo-700 dark:text-indigo-400 dark:placeholder-indigo-500 dark:bg-gray-700'
+            },
+            lime: {
+                input: 'border border-lime-200 dark:border-lime-400 focus:ring-lime-500 focus:border-lime-600 dark:focus:ring-lime-500 dark:focus:border-lime-500 bg-lime-50 text-lime-900 placeholder-lime-700 dark:text-lime-400 dark:placeholder-lime-500 dark:bg-gray-700'
+            },
+            amber: {
+                input: 'border border-amber-200 dark:border-amber-400 focus:ring-amber-500 focus:border-amber-600 dark:focus:ring-amber-500 dark:focus:border-amber-500 bg-amber-50 text-amber-900 placeholder-amber-700 dark:text-amber-400 dark:placeholder-amber-500 dark:bg-gray-700'
+            },
+            violet: {
+                input: 'border border-violet-200 dark:border-violet-400 focus:ring-violet-500 focus:border-violet-600 dark:focus:ring-violet-500 dark:focus:border-violet-500 bg-violet-50 text-violet-900 placeholder-violet-700 dark:text-violet-400 dark:placeholder-violet-500 dark:bg-gray-700'
+            },
+            purple: {
+                input: 'border border-purple-200 dark:border-purple-400 focus:ring-purple-500 focus:border-purple-600 dark:focus:ring-purple-500 dark:focus:border-purple-500 bg-purple-50 text-purple-900 placeholder-purple-700 dark:text-purple-400 dark:placeholder-purple-500 dark:bg-gray-700'
+            },
+            fuchsia: {
+                input: 'border border-fuchsia-200 dark:border-fuchsia-400 focus:ring-fuchsia-500 focus:border-fuchsia-600 dark:focus:ring-fuchsia-500 dark:focus:border-fuchsia-500 bg-fuchsia-50 text-fuchsia-900 placeholder-fuchsia-700 dark:text-fuchsia-400 dark:placeholder-fuchsia-500 dark:bg-gray-700'
+            },
+            pink: {
+                input: 'border border-pink-200 dark:border-pink-400 focus:ring-pink-500 focus:border-pink-600 dark:focus:ring-pink-500 dark:focus:border-pink-500 bg-pink-50 text-pink-900 placeholder-pink-700 dark:text-pink-400 dark:placeholder-pink-500 dark:bg-gray-700'
+            },
+            rose: {
+                input: 'border border-rose-200 dark:border-rose-400 focus:ring-rose-500 focus:border-rose-600 dark:focus:ring-rose-500 dark:focus:border-rose-500 bg-rose-50 text-rose-900 placeholder-rose-700 dark:text-rose-400 dark:placeholder-rose-500 dark:bg-gray-700'
+            }
+        },
+        grouped: {
+            false: { input: 'rounded-lg' },
+            true: {
+                input: 'first:rounded-s-lg last:rounded-e-lg not-first:-ms-px'
+            }
+        }
+    },
+    defaultVariants: {
+        size: 'md',
+        color: 'default'
+    }
+});

package/dist/forms/label/Label.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { getTheme, type LabelProps } from '../../index.js';
+	import { label } from './index.js';
+	import clsx from 'clsx';
+
+	let {
+		children,
+		color = 'gray',
+		show = true,
+		class: className,
+		...restProps
+	}: LabelProps = $props();
+
+	const theme = getTheme('label');
+
+	let base = $derived(label({ color, class: clsx(theme, className) }));
+</script>
+
+{#if show}
+	<label {...restProps} class={base}>
+		{@render children()}
+	</label>
+{:else}
+	{@render children()}
+{/if}
+
+<!--
+@component
+[Go to docs](https://flowbite-svelte.com/)
+## Type
+[LabelProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L784)
+## Props
+@prop children
+@prop color = "gray"
+@prop show = true
+@prop class: className
+@prop ...restProps
+-->

package/dist/forms/label/Label.svelte.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default as Label } from "./Label.svelte";
+export { label } from "./theme.js";

package/dist/forms/label/index.js

@@ -0,0 +1,2 @@
+export { default as Label } from "./Label.svelte";
+export { label } from "./theme.js";

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

@@ -0,0 +1,75 @@
+import { type VariantProps } from "tailwind-variants";
+export type LabelVariants = VariantProps<typeof label>;
+export declare const label: import("tailwind-variants").TVReturnType<{
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, "text-sm rtl:text-right font-medium block", {
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        disabled: string;
+        primary: string;
+        secondary: string;
+        green: string;
+        emerald: string;
+        red: string;
+        blue: string;
+        yellow: string;
+        orange: string;
+        gray: string;
+        teal: string;
+        cyan: string;
+        sky: string;
+        indigo: string;
+        lime: string;
+        amber: string;
+        violet: string;
+        purple: string;
+        fuchsia: string;
+        pink: string;
+        rose: string;
+    };
+}, undefined, "text-sm rtl:text-right font-medium block", unknown, unknown, undefined>>;

package/dist/forms/label/theme.js

@@ -0,0 +1,29 @@
+import { tv } from "tailwind-variants";
+export const label = tv({
+    base: "text-sm rtl:text-right font-medium block",
+    variants: {
+        color: {
+            disabled: "text-gray-500 dark:text-gray-500",
+            primary: "text-primary-700 dark:text-primary-500",
+            secondary: "text-secondary-700 dark:text-secondary-500",
+            green: "text-green-700 dark:text-green-500",
+            emerald: "text-emerald-700 dark:text-emerald-500",
+            red: "text-red-700 dark:text-red-500",
+            blue: "text-blue-700 dark:text-blue-500",
+            yellow: "text-yellow-700 dark:text-yellow-500",
+            orange: "text-orange-700 dark:text-orange-500",
+            gray: "text-gray-700 dark:text-gray-200",
+            teal: "text-teal-700 dark:text-teal-500",
+            cyan: "text-cyan-700 dark:text-cyan-500",
+            sky: "text-sky-700 dark:text-sky-500",
+            indigo: "text-indigo-700 dark:text-indigo-500",
+            lime: "text-lime-700 dark:text-lime-500",
+            amber: "text-amber-700 dark:text-amber-500",
+            violet: "text-violet-700 dark:text-violet-500",
+            purple: "text-purple-700 dark:text-purple-500",
+            fuchsia: "text-fuchsia-700 dark:text-fuchsia-500",
+            pink: "text-pink-700 dark:text-pink-500",
+            rose: "text-rose-700 dark:text-rose-500"
+        }
+    }
+});

package/dist/forms/radio/Radio.svelte

@@ -0,0 +1,48 @@
+<script lang="ts" generics="T">
+	import { getContext } from 'svelte';
+	import clsx from 'clsx';
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+	import { radio } from './index.js';
+	import { Label, type RadioProps } from '../../index.js';
+
+	// remove inputClass in next major version
+	let {
+		children,
+		'aria-describedby': ariaDescribedby,
+		inline = false,
+		labelClass,
+		color = 'primary',
+		custom = false,
+		group = $bindable<T>(),
+		value = $bindable<T>(),
+		class: className,
+		inputClass,
+		classes,
+		...restProps
+	}: RadioProps<T> = $props();
+
+	warnThemeDeprecation(
+		'Radio',
+		{ inputClass, labelClass },
+		{ inputClass: 'class', labelClass: 'label' }
+	);
+	const styling = $derived(classes ?? { label: labelClass });
+
+	const theme = getTheme('radio');
+
+	const { input, label } = $derived(
+		radio({ color, tinted: !!getContext('background'), custom, inline })
+	);
+</script>
+
+<Label class={label({ class: clsx(theme?.label, styling.label) })}>
+	<input
+		type="radio"
+		bind:group
+		{value}
+		aria-describedby={ariaDescribedby}
+		{...restProps}
+		class={input({ class: clsx(theme?.input, className ?? inputClass) })}
+	/>
+	{@render children?.()}
+</Label>

package/dist/forms/radio/Radio.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type RadioProps } from '../../index.js';
+declare function $$render<T>(): {
+    props: RadioProps<T>;
+    exports: {};
+    bindings: "group" | "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "group" | "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Radio: $$IsomorphicComponent;
+type Radio<T> = InstanceType<typeof Radio<T>>;
+export default Radio;

package/dist/forms/radio/RadioButton.svelte

@@ -0,0 +1,22 @@
+<script lang="ts" generics="T">
+  import clsx from "clsx";
+	import { radioButton } from "./index.js";
+	import { Button, getTheme, type RadioButtonProps } from "../../index.js";
+
+  let { children, group = $bindable<T>(), value = $bindable<T>(), inline, pill, outline, size, color, shadow, checkedClass, class: className, ...restProps }: RadioButtonProps<T> = $props();
+
+  const theme = getTheme("radioButton");
+
+  let inputEl: HTMLInputElement;
+  let isChecked = $derived(value == group);
+  let base = $derived(radioButton({ inline, class: clsx(isChecked && checkedClass, theme, className) }));
+
+  function clickHandler() {
+    inputEl?.click(); // manually trigger the click on the hidden input
+  }
+</script>
+
+<Button tag="label" onclick={clickHandler} {pill} {outline} {size} {color} {shadow} class={base}>
+  <input bind:this={inputEl} type="radio" class="sr-only" {value} bind:group {...restProps} />
+  {@render children?.()}
+</Button>

package/dist/forms/radio/RadioButton.svelte.d.ts

@@ -0,0 +1,25 @@
+import { type RadioButtonProps } from "../../index.js";
+declare function $$render<T>(): {
+    props: RadioButtonProps<T>;
+    exports: {};
+    bindings: "group" | "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "group" | "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const RadioButton: $$IsomorphicComponent;
+type RadioButton<T> = InstanceType<typeof RadioButton<T>>;
+export default RadioButton;

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

@@ -0,0 +1,3 @@
+export { default as Radio } from "./Radio.svelte";
+export { default as RadioButton } from "./RadioButton.svelte";
+export { radio, radioButton } from "./theme.js";

package/dist/forms/radio/index.js

@@ -0,0 +1,3 @@
+export { default as Radio } from "./Radio.svelte";
+export { default as RadioButton } from "./RadioButton.svelte";
+export { radio, radioButton } from "./theme.js";