@fastwork/xosmoz-svelte 0.0.21

package/dist/utils/clipboard.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Clipboard utilities for copying text
+ */
+/**
+ * Copy text to clipboard
+ *
+ * @param text - The text to copy to clipboard
+ * @returns Promise that resolves to true if successful, false otherwise
+ *
+ * @example
+ * const success = await copyToClipboard('Hello World')
+ * if (success) {
+ *   console.log('Copied!')
+ * }
+ */
+export declare function copyToClipboard(text: string): Promise<boolean>;
+/**
+ * Create a clipboard handler with state management for tracking copied items
+ *
+ * @param copiedValue - Svelte state for the currently copied value
+ * @param timeout - Optional timeout duration in milliseconds (default: 2000)
+ * @returns Function to copy text and update state
+ *
+ * @example
+ * let copiedVar = $state('')
+ * const handleCopy = createClipboardHandler(() => copiedVar, (val) => copiedVar = val)
+ *
+ * // In your component
+ * await handleCopy('some-text')
+ */
+export declare function createClipboardHandler(getCopiedValue: () => string, setCopiedValue: (value: string) => void, timeout?: number): (text: string) => Promise<boolean>;

package/dist/utils/clipboard.js

@@ -0,0 +1,57 @@
+/**
+ * Clipboard utilities for copying text
+ */
+/**
+ * Copy text to clipboard
+ *
+ * @param text - The text to copy to clipboard
+ * @returns Promise that resolves to true if successful, false otherwise
+ *
+ * @example
+ * const success = await copyToClipboard('Hello World')
+ * if (success) {
+ *   console.log('Copied!')
+ * }
+ */
+export async function copyToClipboard(text) {
+    try {
+        await navigator.clipboard.writeText(text);
+        return true;
+    }
+    catch (error) {
+        console.error('Failed to copy to clipboard:', error);
+        return false;
+    }
+}
+/**
+ * Create a clipboard handler with state management for tracking copied items
+ *
+ * @param copiedValue - Svelte state for the currently copied value
+ * @param timeout - Optional timeout duration in milliseconds (default: 2000)
+ * @returns Function to copy text and update state
+ *
+ * @example
+ * let copiedVar = $state('')
+ * const handleCopy = createClipboardHandler(() => copiedVar, (val) => copiedVar = val)
+ *
+ * // In your component
+ * await handleCopy('some-text')
+ */
+export function createClipboardHandler(getCopiedValue, setCopiedValue, timeout = 2000) {
+    let copyTimeout = null;
+    return async (text) => {
+        const success = await copyToClipboard(text);
+        if (success) {
+            setCopiedValue(text);
+            // Clear existing timeout
+            if (copyTimeout) {
+                clearTimeout(copyTimeout);
+            }
+            // Reset after timeout
+            copyTimeout = setTimeout(() => {
+                setCopiedValue('');
+            }, timeout);
+        }
+        return success;
+    };
+}

package/dist/utils/colorCalculations.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Color calculation utilities
+ */
+/**
+ * Calculate APCA contrast between two colors
+ * Using Color.js APCA implementation: https://colorjs.io/docs/contrast
+ *
+ * @param fgColor - The foreground color (text color)
+ * @param bgColor - The background color
+ * @returns The absolute APCA contrast value rounded to 1 decimal place, or 0 if calculation fails
+ *
+ * @example
+ * const contrast = calculateAPCA('#ffffff', '#000000')
+ * console.log(contrast) // High contrast value
+ */
+export declare function calculateAPCA(fgColor: string, bgColor: string): number;
+/**
+ * Convert a color string to hexadecimal format (sRGB)
+ *
+ * @param color - A color string in any format supported by Color.js (e.g., OKLCH, RGB, HSL)
+ * @returns Hexadecimal color string or '⚠️ Out of gamut' if the color cannot be represented in sRGB
+ *
+ * @example
+ * const hex = toHex('oklch(0.5 0.2 180)')
+ * console.log(hex) // '#00a5a5' or similar
+ *
+ * @example
+ * // For colors outside sRGB gamut
+ * const hex = toHex('oklch(0.8 0.4 180)')
+ * console.log(hex) // '⚠️ Out of gamut'
+ */
+export declare function toHex(color: string): string;

package/dist/utils/colorCalculations.js

@@ -0,0 +1,69 @@
+/**
+ * Color calculation utilities
+ */
+import Color from 'colorjs.io';
+/**
+ * Calculate APCA contrast between two colors
+ * Using Color.js APCA implementation: https://colorjs.io/docs/contrast
+ *
+ * @param fgColor - The foreground color (text color)
+ * @param bgColor - The background color
+ * @returns The absolute APCA contrast value rounded to 1 decimal place, or 0 if calculation fails
+ *
+ * @example
+ * const contrast = calculateAPCA('#ffffff', '#000000')
+ * console.log(contrast) // High contrast value
+ */
+export function calculateAPCA(fgColor, bgColor) {
+    try {
+        // Create Color objects
+        const background = new Color(bgColor);
+        const text = new Color(fgColor);
+        // Calculate APCA contrast
+        // APCA requires: background.contrast(text, "APCA")
+        // Returns negative values for light text on dark bg, positive for dark text on light bg
+        const contrast = background.contrast(text, 'APCA');
+        // Return 0 if the result is NaN or invalid
+        if (isNaN(contrast) || !isFinite(contrast)) {
+            return 0;
+        }
+        // Return absolute value rounded to 1 decimal place
+        return Math.round(Math.abs(contrast) * 10) / 10;
+    }
+    catch (error) {
+        console.error('APCA calculation error:', error);
+        return 0;
+    }
+}
+/**
+ * Convert a color string to hexadecimal format (sRGB)
+ *
+ * @param color - A color string in any format supported by Color.js (e.g., OKLCH, RGB, HSL)
+ * @returns Hexadecimal color string or '⚠️ Out of gamut' if the color cannot be represented in sRGB
+ *
+ * @example
+ * const hex = toHex('oklch(0.5 0.2 180)')
+ * console.log(hex) // '#00a5a5' or similar
+ *
+ * @example
+ * // For colors outside sRGB gamut
+ * const hex = toHex('oklch(0.8 0.4 180)')
+ * console.log(hex) // '⚠️ Out of gamut'
+ */
+export function toHex(color) {
+    try {
+        const colorObj = new Color(color);
+        // Try to convert to hex (sRGB)
+        const hexValue = colorObj.to('srgb').toString({ format: 'hex' });
+        // Check if conversion resulted in a valid hex
+        if (!hexValue || hexValue === 'undefined' || hexValue === 'null') {
+            return '⚠️ Out of gamut';
+        }
+        return hexValue;
+    }
+    catch {
+        // Color is likely out of sRGB gamut - these colors are more vibrant
+        // than what hex (sRGB) can represent
+        return '⚠️ Out of gamut';
+    }
+}

package/dist/utils/themeDetection.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Theme detection utilities for Storybook and other environments
+ */
+import type { ThemeConfig } from '@fastwork/xosmoz-theme';
+/**
+ * Detects if the current theme is dark by checking CSS variables
+ * @returns true if dark theme is active, false otherwise
+ */
+export declare function detectDarkTheme(): boolean;
+/**
+ * Gets the active theme configuration based on current CSS variables
+ * @returns The active theme configuration (lightTheme or darkTheme)
+ */
+export declare function getActiveTheme(): ThemeConfig;
+/**
+ * Watches for theme changes and calls a callback when the theme changes
+ * @param callback Function to call when theme changes
+ * @returns Cleanup function to stop watching
+ */
+export declare function watchThemeChanges(callback: () => void): () => void;

package/dist/utils/themeDetection.js

@@ -0,0 +1,48 @@
+/**
+ * Theme detection utilities for Storybook and other environments
+ */
+import { lightTheme, darkTheme } from '@fastwork/xosmoz-theme';
+/**
+ * Detects if the current theme is dark by checking CSS variables
+ * @returns true if dark theme is active, false otherwise
+ */
+export function detectDarkTheme() {
+    if (typeof window !== 'undefined' && typeof document !== 'undefined') {
+        const bgColor = getComputedStyle(document.documentElement)
+            .getPropertyValue('--xz-color-bg-100')
+            .trim();
+        // Parse OKLCH lightness value to determine theme
+        const lightnessMatch = bgColor.match(/oklch\(([\d.]+)/);
+        if (lightnessMatch) {
+            const lightness = parseFloat(lightnessMatch[1]);
+            // If lightness is less than 0.5, it's dark theme
+            return lightness < 0.5;
+        }
+    }
+    return false;
+}
+/**
+ * Gets the active theme configuration based on current CSS variables
+ * @returns The active theme configuration (lightTheme or darkTheme)
+ */
+export function getActiveTheme() {
+    return detectDarkTheme() ? darkTheme : lightTheme;
+}
+/**
+ * Watches for theme changes and calls a callback when the theme changes
+ * @param callback Function to call when theme changes
+ * @returns Cleanup function to stop watching
+ */
+export function watchThemeChanges(callback) {
+    if (typeof window === 'undefined' || typeof document === 'undefined') {
+        return () => { };
+    }
+    const observer = new MutationObserver(() => {
+        callback();
+    });
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['class', 'data-theme', 'style'],
+    });
+    return () => observer.disconnect();
+}

package/package.json

@@ -0,0 +1,89 @@
+{
+	"name": "@fastwork/xosmoz-svelte",
+	"version": "0.0.21",
+	"description": "Svelte 5 components for Xosmoz design system",
+	"type": "module",
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./styles.css": "./dist/styles.css",
+		"./Button.svelte": {
+			"types": "./dist/components/Button.svelte.d.ts",
+			"svelte": "./dist/components/Button.svelte",
+			"default": "./dist/components/Button.svelte"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.stories.*",
+		"!dist/**/ButtonShowcase.*",
+		"!dist/**/ButtonAllVariants.*"
+	],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"build:package": "svelte-kit sync && svelte-package -o dist",
+		"package": "yarn build:package",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepublishOnly": "yarn build:package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"format": "prettier --write .",
+		"lint": "prettier --check . && eslint .",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"peerDependencies": {
+		"@fastwork/xosmoz-css": "*",
+		"@fastwork/xosmoz-theme": "*",
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^1.4.0",
+		"@eslint/js": "^9.38.0",
+		"@fastwork/xosmoz-css": "workspace:*",
+		"@fastwork/xosmoz-theme": "workspace:*",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.47.1",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@types/node": "^22",
+		"colorjs.io": "^0.5.2",
+		"eslint": "^9.38.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.12.4",
+		"globals": "^16.4.0",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"svelte": "^5.41.0",
+		"svelte-check": "^4.3.3",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.46.1",
+		"vite": "^6.3.0"
+	},
+	"keywords": [
+		"svelte",
+		"svelte5",
+		"components",
+		"ui",
+		"design-system",
+		"xosmoz",
+		"fastwork"
+	],
+	"author": "",
+	"license": "MIT",
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/fastwork-co/fw-xosmoz.git",
+		"directory": "packages/xosmoz-svelte"
+	}
+}