@scalewing/react 0.2.0 → 0.4.0

package/dist/theme/ThemeProvider.d.ts

@@ -1,9 +1,10 @@
 import { type ReactNode } from 'react';
-import { type ColorScheme, type ColorTokens, type Theme } from '@scalewing/tokens';
+import { type ColorScheme, type PaletteId, type Theme, type ThemeColors } from '@scalewing/tokens';
 export type ThemeProviderProps = {
     colorScheme?: ColorScheme | 'system';
-    colors?: Partial<ColorTokens>;
+    palette?: PaletteId;
+    colors?: ThemeColors;
     children: ReactNode;
 };
-export declare function ThemeProvider({ colorScheme, colors, children, }: ThemeProviderProps): import("react").JSX.Element;
+export declare function ThemeProvider({ colorScheme, palette, colors, children, }: ThemeProviderProps): import("react").JSX.Element;
 export declare function useTheme(): Theme;

package/dist/theme/ThemeProvider.js

@@ -16,9 +16,14 @@ function themeCssVars(theme) {
     for (const key of semanticColorKeys) {
         vars[`--sw-color-${key}`] = theme.colors[key];
     }
+    vars['--sw-glass-blur'] = `${theme.glass.blur}px`;
+    vars['--sw-glass-saturate'] = String(theme.glass.saturate);
+    vars['--sw-glass-fill'] = theme.glass.fill;
+    vars['--sw-glass-border'] = theme.glass.border;
+    vars['--sw-glass-specular'] = theme.glass.specular;
     return vars;
 }
-export function ThemeProvider({ colorScheme = 'system', colors, children, }) {
+export function ThemeProvider({ colorScheme = 'system', palette, colors, children, }) {
     const [systemScheme, setSystemScheme] = useState(schemeFromMedia);
     useEffect(() => {
         if (colorScheme !== 'system' || typeof window.matchMedia !== 'function') {
@@ -33,8 +38,8 @@ export function ThemeProvider({ colorScheme = 'system', colors, children, }) {
         return () => media.removeEventListener('change', onChange);
     }, [colorScheme]);
     const resolvedScheme = colorScheme === 'system' ? systemScheme : colorScheme;
-    const theme = useMemo(() => createTheme({ colorScheme: resolvedScheme, colors }), [colors, resolvedScheme]);
-    return (_jsx(ThemeContext.Provider, { value: theme, children: _jsx("div", { "data-theme": theme.colorScheme, style: themeCssVars(theme), children: children }) }));
+    const theme = useMemo(() => createTheme({ colorScheme: resolvedScheme, palette, colors }), [colors, palette, resolvedScheme]);
+    return (_jsx(ThemeContext.Provider, { value: theme, children: _jsx("div", { "data-palette": palette, "data-theme": theme.colorScheme, style: themeCssVars(theme), children: children }) }));
 }
 export function useTheme() {
     const theme = useContext(ThemeContext);

package/dist/toast-travel.d.ts

@@ -0,0 +1,16 @@
+export type TravelBox = {
+    height: number;
+    left: number;
+    top: number;
+    width: number;
+};
+export type TravelTranslate = {
+    fromX: number;
+    fromY: number;
+    toX: number;
+    toY: number;
+};
+export declare function travelTranslate(origin: TravelBox, destination: TravelBox, toast: TravelBox): TravelTranslate;
+export declare function applyTravelVars(node: HTMLElement, travel: TravelTranslate): void;
+export declare function clearTravelVars(node: HTMLElement): void;
+export declare function cssDurationMs(value: string): number;

package/dist/toast-travel.js

@@ -0,0 +1,42 @@
+function centerOffset(box, toast) {
+    return {
+        x: box.left + box.width / 2 - toast.width / 2,
+        y: box.top + box.height / 2 - toast.height / 2,
+    };
+}
+export function travelTranslate(origin, destination, toast) {
+    const from = centerOffset(origin, toast);
+    const to = centerOffset(destination, toast);
+    return {
+        fromX: from.x,
+        fromY: from.y,
+        toX: to.x,
+        toY: to.y,
+    };
+}
+export function applyTravelVars(node, travel) {
+    node.style.setProperty('--sw-toast-from-x', `${travel.fromX}px`);
+    node.style.setProperty('--sw-toast-from-y', `${travel.fromY}px`);
+    node.style.setProperty('--sw-toast-to-x', `${travel.toX}px`);
+    node.style.setProperty('--sw-toast-to-y', `${travel.toY}px`);
+}
+export function clearTravelVars(node) {
+    node.style.removeProperty('--sw-toast-from-x');
+    node.style.removeProperty('--sw-toast-from-y');
+    node.style.removeProperty('--sw-toast-to-x');
+    node.style.removeProperty('--sw-toast-to-y');
+}
+export function cssDurationMs(value) {
+    const first = value.split(',')[0]?.trim() ?? '';
+    if (!first) {
+        return 0;
+    }
+    const amount = Number.parseFloat(first);
+    if (!Number.isFinite(amount) || amount <= 0) {
+        return 0;
+    }
+    if (first.endsWith('ms')) {
+        return amount;
+    }
+    return amount * 1000;
+}

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@scalewing/react",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.com/dna-consulting/scalewing.git",
+    "url": "git+https://github.com/nestor-garcia-dev/scalewing.git",
     "directory": "packages/react"
   },
-  "homepage": "https://gitlab.com/dna-consulting/scalewing#readme",
+  "homepage": "https://github.com/nestor-garcia-dev/scalewing#readme",
   "bugs": {
-    "url": "https://gitlab.com/dna-consulting/scalewing/-/issues"
+    "url": "https://github.com/nestor-garcia-dev/scalewing/issues"
   },
   "sideEffects": [
     "*.css"
@@ -24,6 +24,10 @@
     "./styles.css": {
       "types": "./styles.css.d.ts",
       "default": "./dist/styles.css"
+    },
+    "./palette/*.css": {
+      "types": "./styles.css.d.ts",
+      "default": "./dist/palette/*.css"
     }
   },
   "files": [
@@ -34,7 +38,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@scalewing/tokens": "0.2.0"
+    "@scalewing/tokens": "0.4.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -52,7 +56,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.json && cp ../tokens/dist/styles.css dist/styles.css",
+    "build": "rm -rf dist && tsc -p tsconfig.json && cp ../tokens/dist/styles.css dist/styles.css && rm -rf dist/palette && mkdir -p dist/palette && cp ../tokens/dist/palette/*.css dist/palette/",
     "test": "vitest run",
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },