@rkosafo/cai.components 0.0.5 → 0.0.7

package/dist/ui/dropdown/DropdownHeader.svelte

@@ -1,14 +1,14 @@
-<script lang="ts">
-	import { dropdownHeader } from './index.js';
-	import clsx from 'clsx';
-	import { getTheme } from '../../themes/themeUtils.js';
-	import type { DropdownHeaderProps } from '../../index.js';
-
-	let { children, class: className, ...restProps }: DropdownHeaderProps = $props();
-
-	const theme = getTheme('dropdownHeader');
-</script>
-
-<div {...restProps} class={dropdownHeader({ class: clsx(theme, className) })}>
-	{@render children()}
-</div>
+<script lang="ts">
+	import { dropdownHeader } from './index.js';
+	import clsx from 'clsx';
+	import { getTheme } from '../../themes/themeUtils.js';
+	import type { DropdownHeaderProps } from '../../index.js';
+
+	let { children, class: className, ...restProps }: DropdownHeaderProps = $props();
+
+	const theme = getTheme('dropdownHeader');
+</script>
+
+<div {...restProps} class={dropdownHeader({ class: clsx(theme, className) })}>
+	{@render children()}
+</div>

package/dist/ui/dropdown/DropdownItem.svelte

@@ -1,52 +1,52 @@
-<script lang="ts">
-	import { dropdownItem } from './index.js';
-	import clsx from 'clsx';
-	import { getContext } from 'svelte';
-	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
-	import type { DropdownItemProps } from '../../index.js';
-
-	let {
-		aClass,
-		children,
-		activeClass,
-		liClass,
-		classes,
-		class: className,
-		...restProps
-	}: DropdownItemProps = $props();
-
-	warnThemeDeprecation(
-		'DropdownItem',
-		{ aClass, activeClass, liClass },
-		{ aClass: 'class', activeClass: 'active', liClass: 'li' }
-	);
-	const theme = getTheme('dropdownItem');
-	const styling = $derived(classes ?? { active: activeClass, li: liClass });
-
-	const activeUrl: { value: string } = getContext('activeUrl');
-
-	let isActive = $derived(activeUrl?.value ? restProps.href === activeUrl.value : false);
-
-	const { base, active, li } = dropdownItem();
-	let finalClass = $derived([
-		isActive
-			? active({ class: clsx(theme?.active, styling.active) })
-			: base({ class: clsx(theme?.base, className) })
-	]);
-</script>
-
-<li class={li({ class: clsx(styling.li) })}>
-	{#if restProps.href === undefined && restProps.onclick === undefined}
-		<div {...restProps} class={finalClass}>
-			{@render children()}
-		</div>
-	{:else if restProps.href === undefined}
-		<button type="button" {...restProps} class={finalClass}>
-			{@render children()}
-		</button>
-	{:else}
-		<a {...restProps} class={finalClass}>
-			{@render children()}
-		</a>
-	{/if}
-</li>
+<script lang="ts">
+	import { dropdownItem } from './index.js';
+	import clsx from 'clsx';
+	import { getContext } from 'svelte';
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+	import type { DropdownItemProps } from '../../index.js';
+
+	let {
+		aClass,
+		children,
+		activeClass,
+		liClass,
+		classes,
+		class: className,
+		...restProps
+	}: DropdownItemProps = $props();
+
+	warnThemeDeprecation(
+		'DropdownItem',
+		{ aClass, activeClass, liClass },
+		{ aClass: 'class', activeClass: 'active', liClass: 'li' }
+	);
+	const theme = getTheme('dropdownItem');
+	const styling = $derived(classes ?? { active: activeClass, li: liClass });
+
+	const activeUrl: { value: string } = getContext('activeUrl');
+
+	let isActive = $derived(activeUrl?.value ? restProps.href === activeUrl.value : false);
+
+	const { base, active, li } = dropdownItem();
+	let finalClass = $derived([
+		isActive
+			? active({ class: clsx(theme?.active, styling.active) })
+			: base({ class: clsx(theme?.base, className) })
+	]);
+</script>
+
+<li class={li({ class: clsx(styling.li) })}>
+	{#if restProps.href === undefined && restProps.onclick === undefined}
+		<div {...restProps} class={finalClass}>
+			{@render children()}
+		</div>
+	{:else if restProps.href === undefined}
+		<button type="button" {...restProps} class={finalClass}>
+			{@render children()}
+		</button>
+	{:else}
+		<a {...restProps} class={finalClass}>
+			{@render children()}
+		</a>
+	{/if}
+</li>

package/dist/ui/footer/Footer.svelte

@@ -1,15 +1,15 @@
-<script lang="ts">
-	import { getTheme, type FooterProps } from '../../index.js';
-	import clsx from 'clsx';
-	import { footer } from './index.js';
-
-	let { children, footerType = 'default', class: className, ...restProps }: FooterProps = $props();
-
-	const theme = getTheme('footer');
-
-	const footerCls = $derived(footer({ footerType, class: clsx(theme, className) }));
-</script>
-
-<footer {...restProps} class={footerCls}>
-	{@render children()}
-</footer>
+<script lang="ts">
+	import { getTheme, type FooterProps } from '../../index.js';
+	import clsx from 'clsx';
+	import { footer } from './index.js';
+
+	let { children, footerType = 'default', class: className, ...restProps }: FooterProps = $props();
+
+	const theme = getTheme('footer');
+
+	const footerCls = $derived(footer({ footerType, class: clsx(theme, className) }));
+</script>
+
+<footer {...restProps} class={footerCls}>
+	{@render children()}
+</footer>

package/dist/ui/footer/FooterBrand.svelte

@@ -1,37 +1,37 @@
-<script lang="ts">
-	import { getTheme, type FooterBrandProps } from '../../index.js';
-	import clsx, { type ClassValue } from 'clsx';
-	import { footerBrand } from './index.js';
-
-	let {
-		children,
-		aClass,
-		spanClass,
-		imgClass,
-		href,
-		src,
-		alt,
-		name,
-		...restProps
-	}: FooterBrandProps = $props();
-
-	const theme = getTheme('footerBrand');
-
-	const { base, span, img } = $derived(footerBrand());
-</script>
-
-{#if href}
-	<a {...restProps} {href} class={base({ class: clsx(theme?.base, aClass) })}>
-		{#if src}
-			<img {src} class={img({ class: clsx(theme?.img, imgClass) })} {alt} />
-		{/if}
-		{#if name}
-			<span class={span({ class: clsx(theme?.span, spanClass) })}>{name}</span>
-		{/if}
-		{#if children}
-			{@render children()}
-		{/if}
-	</a>
-{:else}
-	<img {src} class={img({ class: clsx(imgClass) })} {alt} />
-{/if}
+<script lang="ts">
+	import { getTheme, type FooterBrandProps } from '../../index.js';
+	import clsx, { type ClassValue } from 'clsx';
+	import { footerBrand } from './index.js';
+
+	let {
+		children,
+		aClass,
+		spanClass,
+		imgClass,
+		href,
+		src,
+		alt,
+		name,
+		...restProps
+	}: FooterBrandProps = $props();
+
+	const theme = getTheme('footerBrand');
+
+	const { base, span, img } = $derived(footerBrand());
+</script>
+
+{#if href}
+	<a {...restProps} {href} class={base({ class: clsx(theme?.base, aClass) })}>
+		{#if src}
+			<img {src} class={img({ class: clsx(theme?.img, imgClass) })} {alt} />
+		{/if}
+		{#if name}
+			<span class={span({ class: clsx(theme?.span, spanClass) })}>{name}</span>
+		{/if}
+		{#if children}
+			{@render children()}
+		{/if}
+	</a>
+{:else}
+	<img {src} class={img({ class: clsx(imgClass) })} {alt} />
+{/if}

package/dist/ui/footer/FooterCopyright.svelte

@@ -1,45 +1,45 @@
-<script lang="ts">
-	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
-	import clsx, { type ClassValue } from 'clsx';
-	import { footerCopyright } from './index.js';
-	import type { FooterCopyrightProps } from '../../index.js';
-
-	let {
-		spanClass,
-		aClass,
-		href,
-		by,
-		copyrightMessage = 'All Rights Reserved.',
-		year,
-		bySpanClass,
-		classes,
-		class: className,
-		...restProps
-	}: FooterCopyrightProps = $props();
-
-	warnThemeDeprecation(
-		'FooterCopyright',
-		{ aClass, spanClass, bySpanClass },
-		{ aClass: 'link', spanClass: 'class', bySpanClass: 'bySpan' }
-	);
-	// link, bySpan
-	const styling = $derived(classes ?? { bySpan: bySpanClass, link: aClass });
-
-	if (!year) year = new Date().getFullYear();
-
-	const { base, link, bySpan } = footerCopyright();
-
-	const theme = getTheme('footerCopyright');
-</script>
-
-<span class={base({ class: clsx(theme?.base, className ?? spanClass) })}>
-	&copy; {year}
-	{#if href}
-		<a {...restProps} {href} class={link({ class: clsx(theme?.link, styling.link) })}>
-			{by}
-		</a>
-	{:else}
-		<span class={bySpan({ class: clsx(theme?.bySpan, styling.bySpan) })}>{by}</span>
-	{/if}
-	{copyrightMessage}
-</span>
+<script lang="ts">
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+	import clsx, { type ClassValue } from 'clsx';
+	import { footerCopyright } from './index.js';
+	import type { FooterCopyrightProps } from '../../index.js';
+
+	let {
+		spanClass,
+		aClass,
+		href,
+		by,
+		copyrightMessage = 'All Rights Reserved.',
+		year,
+		bySpanClass,
+		classes,
+		class: className,
+		...restProps
+	}: FooterCopyrightProps = $props();
+
+	warnThemeDeprecation(
+		'FooterCopyright',
+		{ aClass, spanClass, bySpanClass },
+		{ aClass: 'link', spanClass: 'class', bySpanClass: 'bySpan' }
+	);
+	// link, bySpan
+	const styling = $derived(classes ?? { bySpan: bySpanClass, link: aClass });
+
+	if (!year) year = new Date().getFullYear();
+
+	const { base, link, bySpan } = footerCopyright();
+
+	const theme = getTheme('footerCopyright');
+</script>
+
+<span class={base({ class: clsx(theme?.base, className ?? spanClass) })}>
+	&copy; {year}
+	{#if href}
+		<a {...restProps} {href} class={link({ class: clsx(theme?.link, styling.link) })}>
+			{by}
+		</a>
+	{:else}
+		<span class={bySpan({ class: clsx(theme?.bySpan, styling.bySpan) })}>{by}</span>
+	{/if}
+	{copyrightMessage}
+</span>

package/dist/ui/footer/FooterIcon.svelte

@@ -1,22 +1,22 @@
-<script lang="ts">
-	import { getTheme, type FooterIconProps } from '../../index.js';
-	import clsx from 'clsx';
-	import { footerIcon } from './index.js';
-
-	let { children, href, ariaLabel, class: className, ...restProps }: FooterIconProps = $props();
-
-	const theme = getTheme('footerIcon');
-</script>
-
-{#if href}
-	<a
-		{...restProps}
-		{href}
-		aria-label={ariaLabel}
-		class={footerIcon({ class: clsx(theme, className) })}
-	>
-		{@render children()}
-	</a>
-{:else}
-	{@render children()}
-{/if}
+<script lang="ts">
+	import { getTheme, type FooterIconProps } from '../../index.js';
+	import clsx from 'clsx';
+	import { footerIcon } from './index.js';
+
+	let { children, href, ariaLabel, class: className, ...restProps }: FooterIconProps = $props();
+
+	const theme = getTheme('footerIcon');
+</script>
+
+{#if href}
+	<a
+		{...restProps}
+		{href}
+		aria-label={ariaLabel}
+		class={footerIcon({ class: clsx(theme, className) })}
+	>
+		{@render children()}
+	</a>
+{:else}
+	{@render children()}
+{/if}

package/dist/ui/footer/FooterLink.svelte

@@ -1,33 +1,33 @@
-<script lang="ts" module>
-</script>
-
-<script lang="ts">
-	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
-	import clsx, { type ClassValue } from 'clsx';
-	import { footerLink } from './index.js';
-	import type { FooterLinkProps } from '../../index.js';
-
-	let {
-		children,
-		liClass,
-		aClass,
-		href,
-		classes,
-		class: className,
-		...restProps
-	}: FooterLinkProps = $props();
-
-	warnThemeDeprecation('FooterLink', { liClass, aClass }, { liClass: 'class', aClass: 'link' });
-	// link, bySpan
-	const styling = $derived(classes ?? { link: aClass });
-
-	const theme = getTheme('footerLink');
-
-	const { base, link } = footerLink();
-</script>
-
-<li class={base({ class: clsx(theme?.base, className ?? liClass) })}>
-	<a {...restProps} {href} class={link({ class: clsx(theme?.link, styling.link) })}>
-		{@render children()}
-	</a>
-</li>
+<script lang="ts" module>
+</script>
+
+<script lang="ts">
+	import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
+	import clsx, { type ClassValue } from 'clsx';
+	import { footerLink } from './index.js';
+	import type { FooterLinkProps } from '../../index.js';
+
+	let {
+		children,
+		liClass,
+		aClass,
+		href,
+		classes,
+		class: className,
+		...restProps
+	}: FooterLinkProps = $props();
+
+	warnThemeDeprecation('FooterLink', { liClass, aClass }, { liClass: 'class', aClass: 'link' });
+	// link, bySpan
+	const styling = $derived(classes ?? { link: aClass });
+
+	const theme = getTheme('footerLink');
+
+	const { base, link } = footerLink();
+</script>
+
+<li class={base({ class: clsx(theme?.base, className ?? liClass) })}>
+	<a {...restProps} {href} class={link({ class: clsx(theme?.link, styling.link) })}>
+		{@render children()}
+	</a>
+</li>

package/dist/ui/footer/FooterLinkGroup.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">
-	import { getTheme, type FooterLinkGroupProps } from '../../index.js';
-	import clsx from 'clsx';
-	import { footerLinkGroup } from './index.js';
-
-	let { class: className, children, ...restProps }: FooterLinkGroupProps = $props();
-
-	const theme = getTheme('footerLinkGroup');
-</script>
-
-<ul {...restProps} class={footerLinkGroup({ class: clsx(theme, className) })}>
-	{@render children()}
-</ul>
+<script lang="ts">
+	import { getTheme, type FooterLinkGroupProps } from '../../index.js';
+	import clsx from 'clsx';
+	import { footerLinkGroup } from './index.js';
+
+	let { class: className, children, ...restProps }: FooterLinkGroupProps = $props();
+
+	const theme = getTheme('footerLinkGroup');
+</script>
+
+<ul {...restProps} class={footerLinkGroup({ class: clsx(theme, className) })}>
+	{@render children()}
+</ul>

package/dist/ui/indicator/Indicator.svelte

@@ -1,42 +1,42 @@
-
-
-<script lang="ts">
-	import { indicator } from './index.js';
-	import clsx from 'clsx';
-
-	import { getTheme } from '../../themes/themeUtils.js';
-	import type { IndicatorProps } from '../../index.js';
-
-	let {
-		children,
-		color = 'primary',
-		cornerStyle = 'circular',
-		size = 'md',
-		border = false,
-		placement,
-		offset = true,
-		class: className,
-		...restProps
-	}: IndicatorProps = $props();
-	const theme = getTheme('indicator');
-
-	let hasChildren = !!children;
-	const base = $derived(
-		indicator({
-			color,
-			size,
-			cornerStyle,
-			border,
-			placement,
-			offset,
-			hasChildren,
-			class: clsx(theme, className)
-		})
-	);
-</script>
-
-<div {...restProps} class={base}>
-	{#if children}
-		{@render children()}
-	{/if}
-</div>
+
+
+<script lang="ts">
+	import { indicator } from './index.js';
+	import clsx from 'clsx';
+
+	import { getTheme } from '../../themes/themeUtils.js';
+	import type { IndicatorProps } from '../../index.js';
+
+	let {
+		children,
+		color = 'primary',
+		cornerStyle = 'circular',
+		size = 'md',
+		border = false,
+		placement,
+		offset = true,
+		class: className,
+		...restProps
+	}: IndicatorProps = $props();
+	const theme = getTheme('indicator');
+
+	let hasChildren = !!children;
+	const base = $derived(
+		indicator({
+			color,
+			size,
+			cornerStyle,
+			border,
+			placement,
+			offset,
+			hasChildren,
+			class: clsx(theme, className)
+		})
+	);
+</script>
+
+<div {...restProps} class={base}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>