@rkosafo/cai.components 0.0.1 → 0.0.3

package/dist/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/typography/heading/Heading.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" module>
+	// heading
+	export interface HeadingProps extends HTMLAttributes<HTMLElement> {
+		children: Snippet;
+		tag?: HeadingVariants['tag'];
+	}
+
+	// // hr
+	// export interface HrProps extends HrVariants, HTMLAttributes<HTMLElement> {
+	//   children?: Snippet;
+	//   divClass?: string;
+	//   iconDivClass?: string;
+	//   textSpanClass?: string;
+	//   innerDivClass?: string;
+	// }
+</script>
+
+<script lang="ts">
+	import { getTheme } from '../../index.js';
+	import clsx from 'clsx';
+	import { heading } from './index.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import type { HeadingVariants } from './theme.js';
+
+	let { children, tag = 'h1', class: className, ...restProps }: HeadingProps = $props();
+
+	const theme = getTheme('heading');
+
+	let headingCls = $derived(heading({ tag, class: clsx(theme, className) }));
+</script>
+
+<svelte:element this={tag} {...restProps} class={headingCls}>
+	{@render children()}
+</svelte:element>

package/dist/typography/heading/Heading.svelte.d.ts

@@ -0,0 +1,10 @@
+export interface HeadingProps extends HTMLAttributes<HTMLElement> {
+    children: Snippet;
+    tag?: HeadingVariants['tag'];
+}
+import type { HTMLAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+import type { HeadingVariants } from './theme.js';
+declare const Heading: import("svelte").Component<HeadingProps, {}, "">;
+type Heading = ReturnType<typeof Heading>;
+export default Heading;

package/dist/typography/heading/index.d.ts

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

package/dist/typography/heading/index.js

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

package/dist/typography/heading/theme.d.ts

@@ -0,0 +1,30 @@
+import { type VariantProps } from "tailwind-variants";
+export type HeadingVariants = VariantProps<typeof heading>;
+export declare const heading: import("tailwind-variants").TVReturnType<{
+    tag: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}, undefined, "font-bold text-gray-900 dark:text-white", {
+    tag: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    tag: {
+        h1: string;
+        h2: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h6: string;
+    };
+}, undefined, "font-bold text-gray-900 dark:text-white", unknown, unknown, undefined>>;

package/dist/typography/heading/theme.js

@@ -0,0 +1,17 @@
+import { tv } from "tailwind-variants";
+export const heading = tv({
+    base: "font-bold text-gray-900 dark:text-white",
+    variants: {
+        tag: {
+            h1: "text-5xl font-extrabold",
+            h2: "text-4xl",
+            h3: "text-3xl",
+            h4: "text-2xl",
+            h5: "text-xl",
+            h6: "text-lg"
+        }
+    },
+    defaultVariants: {
+        tag: "h1"
+    }
+});

package/dist/ui/accordion/Accordion.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+	import { accordion, getTheme, type AccordionCtxType, type AccordionProps } from '../../index.js';
+	import { createSingleSelectionContext } from '../../utils/singleSelection.svelte.js';
+	import clsx from 'clsx';
+	import { setContext } from 'svelte';
+
+	let {
+		children,
+		flush,
+		activeClass,
+		inactiveClass,
+		multiple = false,
+		class: className,
+		transitionType,
+		...restProps
+	}: AccordionProps = $props();
+
+	const theme = getTheme('accordion');
+
+	const ctx: AccordionCtxType = $state({
+		flush,
+		activeClass,
+		inactiveClass,
+		transitionType
+	});
+
+	setContext<AccordionCtxType>('ctx', ctx);
+
+	createSingleSelectionContext(multiple);
+
+	const base = $derived(accordion({ flush, class: clsx(theme, className) }));
+</script>
+
+<div {...restProps} class={base}>
+	{@render children()}
+</div>
+
+<!--
+
+## Props
+@prop children
+@prop flush
+@prop activeClass
+@prop inactiveClass
+@prop multiple = false
+@prop class: className
+@prop transitionType
+@prop ...restProps
+-->

package/dist/ui/accordion/Accordion.svelte.d.ts

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

package/dist/ui/accordion/AccordionItem.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+	import {
+		accordionItem,
+		type AccordionCtxType,
+		type AccordionItemProps,
+		type ParamsType
+	} from '../../index.js';
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+	import { useSingleSelection } from '../../utils/singleSelection.svelte.js';
+	import clsx from 'clsx';
+	import { getContext } from 'svelte';
+	import { slide } from 'svelte/transition';
+
+	let {
+		children,
+		header,
+		arrowup,
+		arrowdown,
+		open = $bindable(false),
+		activeClass,
+		inactiveClass,
+		transitionType = slide,
+		transitionParams,
+		class: className,
+		classes,
+		headerClass,
+		contentClass
+	}: AccordionItemProps = $props();
+
+	warnThemeDeprecation(
+		'AccordionItem',
+		{
+			headerClass,
+			contentClass,
+			activeClass,
+			inactiveClass
+		},
+		{
+			headerClass: 'button',
+			contentClass: 'content',
+			activeClass: 'active',
+			inactiveClass: 'inactive'
+		}
+	);
+
+	let styling: typeof classes = $derived(
+		classes ?? {
+			button: headerClass,
+			content: contentClass,
+			active: activeClass,
+			inactive: inactiveClass
+		}
+	);
+
+	const ctx: AccordionCtxType = getContext('ctx') ?? {};
+
+	const ctxTransitionType = ctx.transitionType ?? transitionType;
+	// Check if transitionType is explicitly set to undefined in props
+	const useTransition =
+		transitionType === 'none' ? false : ctxTransitionType === 'none' ? false : true;
+
+	// Theme context
+	const theme = getTheme('accordionItem');
+
+	// single selection
+	const self = Symbol('accordion-item');
+
+	const updateSingleSelection = useSingleSelection<symbol>((value) => (open = value === self));
+
+	$effect(() => {
+		updateSingleSelection(open, self);
+	});
+
+	const handleToggle = () => {
+		open = !open;
+	};
+
+	const { base, button, content, active, inactive } = $derived(
+		accordionItem({ flush: ctx.flush, open })
+	);
+
+	let buttonClass = $derived(
+		clsx(
+			open && !ctx.flush && (styling.active || ctx.activeClass || active()),
+			!open && !ctx.flush && (styling.inactive || ctx.inactiveClass || inactive())
+		)
+	);
+</script>
+
+<h2 class={base({ class: clsx(theme?.base, className) })}>
+	<button
+		type="button"
+		onclick={handleToggle}
+		class={button({ class: clsx(buttonClass, theme?.button, styling.button) })}
+		aria-expanded={open}
+	>
+		{#if header}
+			{@render header()}
+			{#if open}
+				{#if !arrowup}
+					<svg
+						class="h-3 w-3 text-gray-800 dark:text-white"
+						aria-hidden="true"
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						viewBox="0 0 10 6"
+					>
+						<path
+							stroke="currentColor"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							stroke-width="2"
+							d="M9 5 5 1 1 5"
+						/>
+					</svg>
+				{:else}
+					{@render arrowup()}
+				{/if}
+			{:else if !arrowdown}
+				<svg
+					class="h-3 w-3 text-gray-800 dark:text-white"
+					aria-hidden="true"
+					xmlns="http://www.w3.org/2000/svg"
+					fill="none"
+					viewBox="0 0 10 6"
+				>
+					<path
+						stroke="currentColor"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="m1 1 4 4 4-4"
+					/>
+				</svg>
+			{:else}
+				{@render arrowdown()}
+			{/if}
+		{/if}
+	</button>
+</h2>
+
+{#if useTransition}
+	{#if open && transitionType !== 'none'}
+		<div transition:transitionType={transitionParams as ParamsType}>
+			<div class={content({ class: clsx(theme?.content, styling.content) })}>
+				{@render children()}
+			</div>
+		</div>
+	{/if}
+{:else}
+	<div class={open ? 'block' : 'hidden'}>
+		<div class={content({ class: clsx(theme?.content, styling.content) })}>
+			{@render children()}
+		</div>
+	</div>
+{/if}
+
+<!--
+## Props
+@prop children
+@prop header
+@prop arrowup
+@prop arrowdown
+@prop open = $bindable(false)
+@prop activeClass
+@prop inactiveClass
+@prop transitionType = slide
+@prop transitionParams
+@prop class: className
+@prop classes
+@prop headerClass
+@prop contentClass
+-->

package/dist/ui/accordion/AccordionItem.svelte.d.ts

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

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

@@ -0,0 +1,3 @@
+export { default as Accordion } from "./Accordion.svelte";
+export { default as AccordionItem } from "./AccordionItem.svelte";
+export { accordion, accordionItem } from "./theme.js";

package/dist/ui/accordion/index.js

@@ -0,0 +1,3 @@
+export { default as Accordion } from "./Accordion.svelte";
+export { default as AccordionItem } from "./AccordionItem.svelte";
+export { accordion, accordionItem } from "./theme.js";

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

@@ -0,0 +1,96 @@
+import type { Classes } from '../../themes/themeUtils.js';
+import { type VariantProps } from 'tailwind-variants';
+export type AccordionVariants = VariantProps<typeof accordion>;
+export type AccordionItemVariants = VariantProps<typeof accordionItem> & Classes<typeof accordionItem>;
+export declare const accordion: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    flush: {
+        true: string;
+        false: string;
+    };
+}, undefined, "w-full", {
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    flush: {
+        true: string;
+        false: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: string;
+        secondary: string;
+    };
+    flush: {
+        true: string;
+        false: string;
+    };
+}, undefined, "w-full", unknown, unknown, undefined>>;
+export declare const accordionItem: import("tailwind-variants").TVReturnType<{
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    button: string;
+    content: string;
+    active: string;
+    inactive: string;
+}, undefined, {
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    button: string;
+    content: string;
+    active: string;
+    inactive: string;
+}, import("tailwind-variants").TVReturnType<{
+    flush: {
+        true: {
+            button: string;
+            content: string;
+        };
+        false: {
+            button: string;
+            content: string;
+        };
+    };
+    open: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string;
+    button: string;
+    content: string;
+    active: string;
+    inactive: string;
+}, undefined, unknown, unknown, undefined>>;

package/dist/ui/accordion/theme.js

@@ -0,0 +1,59 @@
+import { tv } from 'tailwind-variants';
+export const accordion = tv({
+    base: 'w-full',
+    variants: {
+        color: {
+            primary: 'text-primary-500 dark:text-primary-400',
+            secondary: 'text-secondary-500 dark:text-secondary-400'
+        },
+        flush: {
+            true: '',
+            false: 'border border-gray-200 dark:border-gray-700 rounded-t-xl'
+        }
+    }
+});
+export const accordionItem = tv({
+    slots: {
+        base: 'group',
+        button: 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700 border-b',
+        content: 'border-b border-gray-200 dark:border-gray-700',
+        active: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800',
+        inactive: 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
+    },
+    variants: {
+        flush: {
+            true: {
+                button: 'py-5',
+                content: 'py-5'
+            },
+            false: {
+                button: 'p-5 border-s border-e group-first:border-t',
+                content: 'p-5 border-s border-e'
+            }
+        },
+        open: {
+            true: {},
+            false: {}
+        }
+    },
+    compoundVariants: [
+        {
+            flush: true,
+            open: true,
+            class: {
+                button: 'text-gray-900 dark:text-white'
+            }
+        },
+        {
+            flush: true,
+            open: false,
+            class: {
+                button: 'text-gray-500 dark:text-gray-400'
+            }
+        }
+    ],
+    defaultVariants: {
+        flush: false,
+        open: false
+    }
+});

package/dist/ui/alert/Alert.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import clsx from 'clsx';
+	import { getTheme } from '../../index.js';
+	import type { AlertVariants } from './theme.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { Component, Snippet } from 'svelte';
+	import type { AlertProps, ParamsType, TransitionFunc } from '../../types/index.js';
+	import { createDismissableContext } from '../../utils/dismissable.js';
+	import { CloseButton } from '../../utils/closeButton/index.js';
+	import { alert } from './theme.js';
+
+	let {
+		children,
+		icon,
+		alertStatus = $bindable(true),
+		closeIcon: CloseIcon,
+		color = 'primary',
+		rounded = true,
+		border,
+		class: className,
+		dismissable,
+		transition = fade,
+		params,
+		...restProps
+	}: AlertProps = $props();
+
+	// Theme context
+	const theme = getTheme('alert');
+
+	let divCls = $derived(
+		alert({
+			color,
+			rounded,
+			border,
+			icon: !!icon,
+			dismissable,
+			class: clsx(theme, className)
+		})
+	);
+
+	let ref: HTMLDivElement | undefined = $state(undefined);
+
+	function close(event: MouseEvent) {
+		if (ref?.dispatchEvent(new Event('close', { bubbles: true, cancelable: true }))) {
+			alertStatus = false;
+		}
+	}
+
+	createDismissableContext(close);
+</script>
+
+{#if alertStatus}
+	<div
+		role="alert"
+		bind:this={ref}
+		{...restProps}
+		transition:transition={params as ParamsType}
+		class={divCls}
+	>
+		{#if icon}
+			{@render icon()}
+		{/if}
+
+		{#if icon || dismissable}
+			<div>
+				{@render children()}
+			</div>
+		{:else}
+			{@render children()}
+		{/if}
+
+		{#if dismissable}
+			{#if CloseIcon}
+				<CloseButton class="-my-1.5 ms-auto -me-1.5" {color} ariaLabel="Remove alert">
+					<CloseIcon />
+				</CloseButton>
+			{:else}
+				<CloseButton class="-my-1.5 ms-auto -me-1.5" {color} ariaLabel="Remove alert" />
+			{/if}
+		{/if}
+	</div>
+{/if}

package/dist/ui/alert/Alert.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { Component } from 'svelte';
+import type { AlertProps } from '../../types/index.js';
+declare const Alert: Component<AlertProps, {}, "alertStatus">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

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

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

package/dist/ui/alert/index.js

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