@classic-homes/charts-svelte 0.1.1

package/dist/lib/components/extended/TreemapChart.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TreemapChartProps } from '@classic-homes/charts-core';
+interface Props extends Omit<TreemapChartProps, 'class'> {
+    class?: string;
+}
+declare const TreemapChart: import("svelte").Component<Props, {}, "">;
+type TreemapChart = ReturnType<typeof TreemapChart>;
+export default TreemapChart;

package/dist/lib/components/extended/index.d.ts

@@ -0,0 +1,7 @@
+export { default as RadarChart } from './RadarChart.svelte';
+export { default as FunnelChart } from './FunnelChart.svelte';
+export { default as GaugeChart } from './GaugeChart.svelte';
+export { default as HeatmapChart } from './HeatmapChart.svelte';
+export { default as TreemapChart } from './TreemapChart.svelte';
+export { default as CandlestickChart } from './CandlestickChart.svelte';
+export { default as SankeyChart } from './SankeyChart.svelte';

package/dist/lib/components/extended/index.js

@@ -0,0 +1,7 @@
+export { default as RadarChart } from './RadarChart.svelte';
+export { default as FunnelChart } from './FunnelChart.svelte';
+export { default as GaugeChart } from './GaugeChart.svelte';
+export { default as HeatmapChart } from './HeatmapChart.svelte';
+export { default as TreemapChart } from './TreemapChart.svelte';
+export { default as CandlestickChart } from './CandlestickChart.svelte';
+export { default as SankeyChart } from './SankeyChart.svelte';

package/dist/lib/components/index.d.ts

@@ -0,0 +1,3 @@
+export { ChartContainer, ChartSkeleton, ChartError, ChartEmpty } from './base/index.js';
+export { LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart, } from './core/index.js';
+export { RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart, } from './extended/index.js';

package/dist/lib/components/index.js

@@ -0,0 +1,6 @@
+// Base components
+export { ChartContainer, ChartSkeleton, ChartError, ChartEmpty } from './base/index.js';
+// Core charts
+export { LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart, } from './core/index.js';
+// Extended charts
+export { RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart, } from './extended/index.js';

package/dist/lib/composables/index.d.ts

@@ -0,0 +1,2 @@
+export { useChartTheme, registerClassicThemes } from './useChartTheme.svelte.js';
+export { useReducedMotion } from './useReducedMotion.svelte.js';

package/dist/lib/composables/index.js

@@ -0,0 +1,2 @@
+export { useChartTheme, registerClassicThemes } from './useChartTheme.svelte.js';
+export { useReducedMotion } from './useReducedMotion.svelte.js';

package/dist/lib/composables/useChartTheme.svelte.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Register Classic Theme ECharts themes
+ */
+export declare function registerClassicThemes(): void;
+/**
+ * Create a reactive chart theme based on system/document dark mode
+ * @param getPreference - A getter function that returns the current theme preference
+ */
+export declare function useChartTheme(getPreference: () => 'light' | 'dark' | 'auto'): {
+    readonly theme: string;
+};

package/dist/lib/composables/useChartTheme.svelte.js

@@ -0,0 +1,66 @@
+import * as echarts from 'echarts/core';
+import { lightTheme, darkTheme, THEME_LIGHT, THEME_DARK } from '@classic-homes/charts-core';
+let themesRegistered = false;
+/**
+ * Register Classic Theme ECharts themes
+ */
+export function registerClassicThemes() {
+    if (themesRegistered)
+        return;
+    echarts.registerTheme(THEME_LIGHT, lightTheme);
+    echarts.registerTheme(THEME_DARK, darkTheme);
+    themesRegistered = true;
+}
+/**
+ * Create a reactive chart theme based on system/document dark mode
+ * @param getPreference - A getter function that returns the current theme preference
+ */
+export function useChartTheme(getPreference) {
+    let currentTheme = $state(THEME_LIGHT);
+    function updateTheme() {
+        const preference = getPreference();
+        if (preference !== 'auto') {
+            currentTheme = preference === 'dark' ? THEME_DARK : THEME_LIGHT;
+            return;
+        }
+        // Check for dark class on html element
+        if (typeof document !== 'undefined') {
+            const isDark = document.documentElement.classList.contains('dark');
+            currentTheme = isDark ? THEME_DARK : THEME_LIGHT;
+        }
+    }
+    $effect(() => {
+        // Register themes on first use
+        registerClassicThemes();
+        // Initial theme check
+        updateTheme();
+        const preference = getPreference();
+        if (preference !== 'auto' || typeof document === 'undefined')
+            return;
+        // Watch for dark mode class changes
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+                    updateTheme();
+                }
+            });
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+        // Also listen for media query changes
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        const handleMediaChange = () => updateTheme();
+        mediaQuery.addEventListener('change', handleMediaChange);
+        return () => {
+            observer.disconnect();
+            mediaQuery.removeEventListener('change', handleMediaChange);
+        };
+    });
+    return {
+        get theme() {
+            return currentTheme;
+        },
+    };
+}

package/dist/lib/composables/useReducedMotion.svelte.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Composable to detect user's reduced motion preference
+ */
+export declare function useReducedMotion(): {
+    readonly value: boolean;
+};

package/dist/lib/composables/useReducedMotion.svelte.js

@@ -0,0 +1,26 @@
+/**
+ * Composable to detect user's reduced motion preference
+ */
+export function useReducedMotion() {
+    let reducedMotion = $state(false);
+    $effect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
+        // Set initial value
+        reducedMotion = mediaQuery.matches;
+        // Listen for changes
+        const handleChange = (event) => {
+            reducedMotion = event.matches;
+        };
+        mediaQuery.addEventListener('change', handleChange);
+        return () => {
+            mediaQuery.removeEventListener('change', handleChange);
+        };
+    });
+    return {
+        get value() {
+            return reducedMotion;
+        },
+    };
+}

package/dist/lib/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @classic-homes/charts-svelte
+ *
+ * Svelte ECharts components for the Classic Theme design system
+ */
+export { ChartContainer, ChartSkeleton, ChartError, ChartEmpty, LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart, RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart, } from './components/index.js';
+export { useChartTheme, registerClassicThemes, useReducedMotion } from './composables/index.js';
+export { cn } from './utils.js';
+export type { BaseChartProps, LineChartProps, BarChartProps, PieChartProps, DonutChartProps, AreaChartProps, ScatterChartProps, RadarChartProps, FunnelChartProps, GaugeChartProps, HeatmapChartProps, TreemapChartProps, CandlestickChartProps, SankeyChartProps, LineChartData, LineSeriesData, BarChartData, BarSeriesData, PieSliceData, AreaChartData, AreaSeriesData, ScatterChartData, ScatterSeriesData, RadarChartData, RadarSeriesData, RadarIndicator, FunnelSliceData, HeatmapData, TreemapNode, TreemapLevel, CandlestickData, CandlestickItem, SankeyData, SankeyNode, SankeyLink, DataPointEventParams, SliceEventParams, HeatmapEventParams, TreemapEventParams, CandlestickEventParams, SankeyEventParams, } from '@classic-homes/charts-core';

package/dist/lib/index.js

@@ -0,0 +1,17 @@
+/**
+ * @classic-homes/charts-svelte
+ *
+ * Svelte ECharts components for the Classic Theme design system
+ */
+// Components
+export { 
+// Base
+ChartContainer, ChartSkeleton, ChartError, ChartEmpty, 
+// Core charts
+LineChart, BarChart, PieChart, AreaChart, ScatterChart, DonutChart, 
+// Extended charts
+RadarChart, FunnelChart, GaugeChart, HeatmapChart, TreemapChart, CandlestickChart, SankeyChart, } from './components/index.js';
+// Composables
+export { useChartTheme, registerClassicThemes, useReducedMotion } from './composables/index.js';
+// Utils
+export { cn } from './utils.js';

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@classic-homes/charts-svelte",
+  "version": "0.1.1",
+  "description": "Svelte ECharts components for Classic Theme",
+  "type": "module",
+  "svelte": "./dist/lib/index.js",
+  "types": "./dist/lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/lib/index.d.ts",
+      "svelte": "./dist/lib/index.js",
+      "default": "./dist/lib/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "svelte-package -i src",
+    "dev": "svelte-package -i src --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "dependencies": {
+    "@classic-homes/charts-core": "*",
+    "@classic-homes/theme-tokens": "*",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0"
+  },
+  "peerDependencies": {
+    "echarts": "^5.5.0",
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@sveltejs/package": "^2.3.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "echarts": "^5.5.0",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.0.0",
+    "typescript": "^5.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}