@rkosafo/cai.components 0.0.1 → 0.0.3

package/dist/themes/themeUtils.d.ts

@@ -0,0 +1,24 @@
+import type { ClassValue } from 'clsx';
+import type { ThemeConfig } from './index.js';
+export declare function getTheme<K extends keyof ThemeConfig>(componentKey: K): ThemeConfig[K];
+type Slots<T extends {
+    slots: Record<string, unknown>;
+}> = Omit<T['slots'], 'base'>;
+export type Classes<T extends {
+    slots: Record<string, unknown>;
+}> = {
+    classes?: Partial<{
+        [K in keyof Slots<T>]: ClassValue;
+    }>;
+};
+/**
+ * Warns about deprecated theme-related props and suggests modern alternatives.
+ *
+ * Shows the component name, deprecated props, migration hints, and usage location (in dev mode).
+ *
+ * @param component - Name of the component using deprecated props.
+ * @param names - Record of deprecated prop names and their values.
+ * @param replacements - Optional map of deprecated keys to their replacements (e.g., "divClass" → "div").
+ */
+export declare function warnThemeDeprecation(component: string, names: Record<string, unknown>, replacements?: Record<string, unknown>): void;
+export {};

package/dist/themes/themeUtils.js

@@ -0,0 +1,74 @@
+import { getContext } from 'svelte';
+// import { dev } from "$app/environment";
+// for svelte users not using sveltekit substitute the above line with the following line
+const dev = import.meta.env.MODE === 'development';
+export function getTheme(componentKey) {
+    const theme = getContext('theme');
+    return theme?.[componentKey];
+}
+/**
+ * Warns about deprecated theme-related props and suggests modern alternatives.
+ *
+ * Shows the component name, deprecated props, migration hints, and usage location (in dev mode).
+ *
+ * @param component - Name of the component using deprecated props.
+ * @param names - Record of deprecated prop names and their values.
+ * @param replacements - Optional map of deprecated keys to their replacements (e.g., "divClass" → "div").
+ */
+export function warnThemeDeprecation(component, names, replacements) {
+    if (!dev)
+        return;
+    const nonEmptyNames = Object.keys(names).filter((name) => names[name]);
+    if (nonEmptyNames.length === 0)
+        return;
+    let migrationHint = '';
+    const usesClass = nonEmptyNames.some((name) => replacements?.[name] === 'class');
+    const propText = usesClass ? `"classes" or "class"` : `"classes"`;
+    if (replacements) {
+        const classProps = [];
+        const classesObjectEntries = [];
+        for (const name of nonEmptyNames) {
+            const newKey = replacements[name];
+            const value = names[name];
+            if (!newKey || !value)
+                continue;
+            if (newKey === 'class') {
+                classProps.push(`class="${value}"`);
+            }
+            else {
+                classesObjectEntries.push(`${newKey}: "${value}"`);
+            }
+        }
+        const hintLines = [];
+        if (classProps.length > 0)
+            hintLines.push(...classProps);
+        if (classesObjectEntries.length > 0) {
+            hintLines.push(`classes={{ ${classesObjectEntries.join(', ')} }}`);
+        }
+        if (hintLines.length > 0) {
+            migrationHint = `\nMigration example: ${hintLines.join(' ')}`;
+        }
+    }
+    // Stack trace parsing to find external caller
+    const stack = new Error().stack;
+    const externalCaller = getExternalCaller(stack);
+    console.warn(`⚠️ The following "${component}" props are deprecated: ${nonEmptyNames.map((n) => `"${n}"`).join(', ')}.\n` +
+        `💡 Please use the ${propText} prop instead.${migrationHint}\n` +
+        (externalCaller ? `🔍 Used at: ${externalCaller}` : ''));
+}
+// Extracts the first file in the stack trace that is NOT the current component file
+function getExternalCaller(stack) {
+    if (!stack)
+        return null;
+    const lines = stack.split('\n').slice(2); // skip "Error" and self-call
+    const currentFileMatch = lines[0]?.match(/(?:\()?(.*?\.svelte):\d+:\d+\)?$/);
+    const currentFile = currentFileMatch?.[1];
+    for (const line of lines) {
+        const match = line.match(/(?:\()?(.*?\.svelte):\d+:\d+\)?$/);
+        const file = match?.[1];
+        if (file && file !== currentFile) {
+            return line.trim().replace(/^at /, ''); // Clean format
+        }
+    }
+    return null;
+}

package/dist/themes/themes.d.ts

@@ -0,0 +1,18 @@
+export { avatar } from '../ui/avatar/index.js';
+export { indicator } from '../ui/indicator/index.js';
+export { button, gradientButton } from '../ui/buttons/index.js';
+export { dropdown, dropdownDivider, dropdownGroup, dropdownHeader, dropdownItem } from '../ui/dropdown/index.js';
+export { footer, footerBrand, footerCopyright, footerIcon, footerLinkGroup, footerLink } from '../ui/footer/index.js';
+export { heading } from '../typography/heading/index.js';
+export { alert } from '../ui/alert/index.js';
+export { modal } from '../ui/modal/index.js';
+export { input } from '../forms/input/index.js';
+export { label } from '../forms/label/index.js';
+export { toolbar, toolbarGroup, toolbarButton } from '../ui/toolbar/index.js';
+export { datepicker } from '../forms/datepicker/index.js';
+export { drawer } from '../ui/drawer/index.js';
+export { textarea } from '../forms/textarea/index.js';
+export { radio, radioButton } from '../forms/radio/index.js';
+export { checkbox, checkboxButton } from '../forms/checkbox/index.js';
+export { accordion, accordionItem } from '../ui/accordion/index.js';
+export { tabs, tabItem } from '../ui/tab/theme.js';

package/dist/themes/themes.js

@@ -0,0 +1,18 @@
+export { avatar } from '../ui/avatar/index.js';
+export { indicator } from '../ui/indicator/index.js';
+export { button, gradientButton } from '../ui/buttons/index.js';
+export { dropdown, dropdownDivider, dropdownGroup, dropdownHeader, dropdownItem } from '../ui/dropdown/index.js';
+export { footer, footerBrand, footerCopyright, footerIcon, footerLinkGroup, footerLink } from '../ui/footer/index.js';
+export { heading } from '../typography/heading/index.js';
+export { alert } from '../ui/alert/index.js';
+export { modal } from '../ui/modal/index.js';
+export { input } from '../forms/input/index.js';
+export { label } from '../forms/label/index.js';
+export { toolbar, toolbarGroup, toolbarButton } from '../ui/toolbar/index.js';
+export { datepicker } from '../forms/datepicker/index.js';
+export { drawer } from '../ui/drawer/index.js';
+export { textarea } from '../forms/textarea/index.js';
+export { radio, radioButton } from '../forms/radio/index.js';
+export { checkbox, checkboxButton } from '../forms/checkbox/index.js';
+export { accordion, accordionItem } from '../ui/accordion/index.js';
+export { tabs, tabItem } from '../ui/tab/theme.js';