@rkosafo/cai.components 0.0.3 → 0.0.6

package/dist/utils/closeButton/CloseButton.svelte

@@ -1,88 +1,88 @@
-<script lang="ts" module>
-	export type CloseButtonProps = CloseButtonVariants &
-		AnchorButtonAttributes & {
-			onclick?: (ev: MouseEvent) => void;
-			name?: string;
-			ariaLabel?: string;
-			class?: string;
-			svgClass?: string;
-		};
-</script>
-
-<script lang="ts">
-	import clsx from 'clsx';
-	import { closeButton } from './index.js';
-	import { useDismiss } from '../dismissable.js';
-	import type { AnchorButtonAttributes } from '../../types/index.js';
-	import type { CloseButtonVariants } from './theme.js';
-
-	let {
-		children,
-		color = 'gray',
-		onclick: onclickorg,
-		name = 'Close',
-		ariaLabel,
-		size = 'md',
-		class: className,
-		svgClass,
-		...restProps
-	}: CloseButtonProps = $props();
-
-	const { base, svg } = $derived(closeButton({ color, size }));
-
-	const context = useDismiss();
-
-	function onclick(event: MouseEvent) {
-		onclickorg?.(event);
-		if (event.defaultPrevented) return;
-		context?.dismiss?.(event);
-	}
-</script>
-
-{#if restProps.href === undefined}
-	<button
-		type="button"
-		{...restProps}
-		class={base({ class: clsx(className) })}
-		{onclick}
-		aria-label={ariaLabel ?? name}
-	>
-		{#if name}<span class="sr-only">{name}</span>{/if}
-		{#if children}
-			{@render children()}
-		{:else}
-			<svg
-				class={svg({ class: svgClass })}
-				fill="currentColor"
-				viewBox="0 0 20 20"
-				xmlns="http://www.w3.org/2000/svg"
-			>
-				<path
-					fill-rule="evenodd"
-					d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		{/if}
-	</button>
-{:else}
-	<a
-		{...restProps}
-		{onclick}
-		class={base({ class: clsx(className) })}
-		aria-label={ariaLabel ?? name}
-	>
-		{#if name}<span class="sr-only">{name}</span>{/if}
-		{#if children}
-			{@render children()}
-		{:else}
-			<svg class={svg()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-				<path
-					fill-rule="evenodd"
-					d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		{/if}
-	</a>
-{/if}
+<script lang="ts" module>
+	export type CloseButtonProps = CloseButtonVariants &
+		AnchorButtonAttributes & {
+			onclick?: (ev: MouseEvent) => void;
+			name?: string;
+			ariaLabel?: string;
+			class?: string;
+			svgClass?: string;
+		};
+</script>
+
+<script lang="ts">
+	import clsx from 'clsx';
+	import { closeButton } from './index.js';
+	import { useDismiss } from '../dismissable.js';
+	import type { AnchorButtonAttributes } from '../../types/index.js';
+	import type { CloseButtonVariants } from './theme.js';
+
+	let {
+		children,
+		color = 'gray',
+		onclick: onclickorg,
+		name = 'Close',
+		ariaLabel,
+		size = 'md',
+		class: className,
+		svgClass,
+		...restProps
+	}: CloseButtonProps = $props();
+
+	const { base, svg } = $derived(closeButton({ color, size }));
+
+	const context = useDismiss();
+
+	function onclick(event: MouseEvent) {
+		onclickorg?.(event);
+		if (event.defaultPrevented) return;
+		context?.dismiss?.(event);
+	}
+</script>
+
+{#if restProps.href === undefined}
+	<button
+		type="button"
+		{...restProps}
+		class={base({ class: clsx(className) })}
+		{onclick}
+		aria-label={ariaLabel ?? name}
+	>
+		{#if name}<span class="sr-only">{name}</span>{/if}
+		{#if children}
+			{@render children()}
+		{:else}
+			<svg
+				class={svg({ class: svgClass })}
+				fill="currentColor"
+				viewBox="0 0 20 20"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		{/if}
+	</button>
+{:else}
+	<a
+		{...restProps}
+		{onclick}
+		class={base({ class: clsx(className) })}
+		aria-label={ariaLabel ?? name}
+	>
+		{#if name}<span class="sr-only">{name}</span>{/if}
+		{#if children}
+			{@render children()}
+		{:else}
+			<svg class={svg()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+				<path
+					fill-rule="evenodd"
+					d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+		{/if}
+	</a>
+{/if}

package/dist/utils/singleSelection.svelte.js

@@ -1,49 +1,49 @@
-import { getContext, setContext } from "svelte";
-
-/**
- * @template T
- * @typedef {Object} SingleSelectionContext
- * @property {T=} value
- */
-
-/** @type {symbol} */
-const SINGLE_SELECTION_KEY = Symbol("singleton");
-
-/**
- * @template T
- * @param {boolean} [nonReactive=false] - use a non-reactive placeholder to allow multiple selection and keep context shallow
- * @returns {SingleSelectionContext<T>}
- */
-export function createSingleSelectionContext(nonReactive = false) {
-  const context = $state({ value: undefined });
-  return setContext(SINGLE_SELECTION_KEY, nonReactive ? {} : context);
-}
-
-/**
- * @template T
- * @param {SingleSelectionContext<T>} context
- * @param {boolean} open
- * @param {T=} value
- * @returns {SingleSelectionContext<T>}
- */
-function setSelected(context, open, value) {
-  if (Object.hasOwn(context, 'value')) {
-    if (open) context.value = value;
-    else if (context.value === value) context.value = undefined;
-  }
-  return context;
-}
-
-/**
- * @template T
- * @param {(value: T) => void} callback
- * @returns {(open: boolean, v?: T) => SingleSelectionContext<T>}
- */
-export function useSingleSelection(callback) {
-  const context = getContext(SINGLE_SELECTION_KEY) ?? createSingleSelectionContext(false);
-
-  $effect(() => {
-    if (context.value !== undefined) callback(context.value);
-  });
-  return (open, v) => setSelected(context, open, v);
+import { getContext, setContext } from "svelte";
+
+/**
+ * @template T
+ * @typedef {Object} SingleSelectionContext
+ * @property {T=} value
+ */
+
+/** @type {symbol} */
+const SINGLE_SELECTION_KEY = Symbol("singleton");
+
+/**
+ * @template T
+ * @param {boolean} [nonReactive=false] - use a non-reactive placeholder to allow multiple selection and keep context shallow
+ * @returns {SingleSelectionContext<T>}
+ */
+export function createSingleSelectionContext(nonReactive = false) {
+  const context = $state({ value: undefined });
+  return setContext(SINGLE_SELECTION_KEY, nonReactive ? {} : context);
+}
+
+/**
+ * @template T
+ * @param {SingleSelectionContext<T>} context
+ * @param {boolean} open
+ * @param {T=} value
+ * @returns {SingleSelectionContext<T>}
+ */
+function setSelected(context, open, value) {
+  if (Object.hasOwn(context, 'value')) {
+    if (open) context.value = value;
+    else if (context.value === value) context.value = undefined;
+  }
+  return context;
+}
+
+/**
+ * @template T
+ * @param {(value: T) => void} callback
+ * @returns {(open: boolean, v?: T) => SingleSelectionContext<T>}
+ */
+export function useSingleSelection(callback) {
+  const context = getContext(SINGLE_SELECTION_KEY) ?? createSingleSelectionContext(false);
+
+  $effect(() => {
+    if (context.value !== undefined) callback(context.value);
+  });
+  return (open, v) => setSelected(context, open, v);
 }

package/dist/youtube/index.svelte

@@ -1,13 +1,13 @@
-<script lang="ts">
-  let { url, videoId } = $props()
-</script>
-
-
-<div>
-  <div class="bg-red-100 p-4 m-4">
-    {url}
-
-  </div>
-  <br/>
-  {videoId}
+<script lang="ts">
+  let { url, videoId } = $props()
+</script>
+
+
+<div>
+  <div class="bg-red-100 p-4 m-4">
+    {url}
+
+  </div>
+  <br/>
+  {videoId}
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rkosafo/cai.components",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -29,16 +29,19 @@
     "@tailwindcss/forms": "^0.5.9",
     "@tailwindcss/typography": "^0.5.15",
     "@tailwindcss/vite": "^4.0.0",
+    "@vitest/ui": "^3.2.4",
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
     "publint": "^0.3.2",
+    "semantic-release": "^24.2.9",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
     "svelte-headless-table": "^0.18.3",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.0.0",
-    "vite": "^7.0.4"
+    "vite": "^7.0.4",
+    "vitest": "^3.2.4"
   },
   "keywords": [
     "cai"
@@ -74,6 +77,7 @@
     "lint": "prettier --check .",
     "use:npmReadme": "mv README.md github.README.md && mv npm.README.md README.md",
     "use:githubReadme": "mv README.md npm.README.md && mv github.README.md README.md",
-    "npm:publish": "pnpm publish --access public"
+    "npm:publish": "pnpm publish --access public",
+    "test": "vitest run"
   }
 }