react-native-metrify 0.1.0-alpha.1

package/dist/widgets/StackedBarChart/StackedBarChart.d.ts

@@ -0,0 +1,7 @@
+/**
+ * StackedBarChart Widget - Multiple values stacked on same bar
+ */
+import React from 'react';
+import { StackedBarChartWidgetProps } from './types';
+export declare const StackedBarChart: React.NamedExoticComponent<StackedBarChartWidgetProps>;
+//# sourceMappingURL=StackedBarChart.d.ts.map

package/dist/widgets/StackedBarChart/StackedBarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StackedBarChart.d.ts","sourceRoot":"","sources":["../../../src/widgets/StackedBarChart/StackedBarChart.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAwB,MAAM,OAAO,CAAC;AAI7C,OAAO,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAErD,eAAO,MAAM,eAAe,wDAyJ1B,CAAC"}

package/dist/widgets/StackedBarChart/index.d.ts

@@ -0,0 +1,3 @@
+export { StackedBarChart } from './StackedBarChart';
+export type { StackedBarChartWidgetProps, StackedBarChartData, StackedBarDataPoint, StackedBarSegment } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/widgets/StackedBarChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/widgets/StackedBarChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC"}

package/dist/widgets/StackedBarChart/types.d.ts

@@ -0,0 +1,26 @@
+/**
+ * StackedBarChart Widget types
+ */
+import { BaseWidgetProps } from '../../core';
+export interface StackedBarSegment {
+    value: number;
+    color: string;
+    label: string;
+}
+export interface StackedBarDataPoint {
+    label: string;
+    segments: StackedBarSegment[];
+}
+export interface StackedBarChartData {
+    data: StackedBarDataPoint[];
+    title?: string;
+}
+export interface StackedBarChartWidgetProps extends BaseWidgetProps<StackedBarChartData> {
+    barWidth?: number;
+    barSpacing?: number;
+    showValues?: boolean;
+    showLabels?: boolean;
+    showLegend?: boolean;
+    maxBars?: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/widgets/StackedBarChart/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/widgets/StackedBarChart/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,iBAAiB,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,mBAAmB,EAAE,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,0BAA2B,SAAQ,eAAe,CAAC,mBAAmB,CAAC;IACtF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB"}

package/dist/widgets/SunburstChart/SunburstChart.d.ts

@@ -0,0 +1,7 @@
+/**
+ * SunburstChart Widget - Hierarchical data in concentric rings
+ */
+import React from 'react';
+import { SunburstChartWidgetProps } from './types';
+export declare const SunburstChart: React.NamedExoticComponent<SunburstChartWidgetProps>;
+//# sourceMappingURL=SunburstChart.d.ts.map

package/dist/widgets/SunburstChart/SunburstChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SunburstChart.d.ts","sourceRoot":"","sources":["../../../src/widgets/SunburstChart/SunburstChart.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAwB,MAAM,OAAO,CAAC;AAK7C,OAAO,EAAE,wBAAwB,EAAgB,MAAM,SAAS,CAAC;AA4EjE,eAAO,MAAM,aAAa,sDAgFxB,CAAC"}

package/dist/widgets/SunburstChart/index.d.ts

@@ -0,0 +1,3 @@
+export { SunburstChart } from './SunburstChart';
+export type { SunburstChartWidgetProps, SunburstChartData, SunburstNode } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/widgets/SunburstChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/widgets/SunburstChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,YAAY,EAAE,wBAAwB,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/widgets/SunburstChart/types.d.ts

@@ -0,0 +1,20 @@
+/**
+ * SunburstChart Widget types - Circular hierarchical visualization
+ */
+import { BaseWidgetProps } from '../../core';
+export interface SunburstNode {
+    label: string;
+    value: number;
+    color?: string;
+    children?: SunburstNode[];
+}
+export interface SunburstChartData {
+    data: SunburstNode[];
+    title?: string;
+}
+export interface SunburstChartWidgetProps extends BaseWidgetProps<SunburstChartData> {
+    showLabels?: boolean;
+    size?: number;
+    innerRadius?: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/widgets/SunburstChart/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/widgets/SunburstChart/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,wBAAyB,SAAQ,eAAe,CAAC,iBAAiB,CAAC;IAClF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/dist/widgets/Treemap/Treemap.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Treemap Widget - Hierarchical data visualization
+ */
+import React from 'react';
+import { TreemapWidgetProps } from './types';
+export declare const Treemap: React.NamedExoticComponent<TreemapWidgetProps>;
+//# sourceMappingURL=Treemap.d.ts.map

package/dist/widgets/Treemap/Treemap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Treemap.d.ts","sourceRoot":"","sources":["../../../src/widgets/Treemap/Treemap.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAwB,MAAM,OAAO,CAAC;AAK7C,OAAO,EAAE,kBAAkB,EAAe,MAAM,SAAS,CAAC;AAyE1D,eAAO,MAAM,OAAO,gDAmGlB,CAAC"}

package/dist/widgets/Treemap/index.d.ts

@@ -0,0 +1,3 @@
+export { Treemap } from './Treemap';
+export type { TreemapWidgetProps, TreemapData, TreemapNode } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/widgets/Treemap/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/widgets/Treemap/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,YAAY,EAAE,kBAAkB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC"}

package/dist/widgets/Treemap/types.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Treemap Widget types - Hierarchical data as nested rectangles
+ */
+import { BaseWidgetProps } from '../../core';
+export interface TreemapNode {
+    label: string;
+    value: number;
+    color?: string;
+    children?: TreemapNode[];
+}
+export interface TreemapData {
+    data: TreemapNode[];
+    title?: string;
+}
+export interface TreemapWidgetProps extends BaseWidgetProps<TreemapData> {
+    showLabels?: boolean;
+    showValues?: boolean;
+    colorScheme?: 'categorical' | 'sequential';
+    padding?: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/widgets/Treemap/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/widgets/Treemap/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;CAC1B;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,WAAW,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAmB,SAAQ,eAAe,CAAC,WAAW,CAAC;IACtE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,aAAa,GAAG,YAAY,CAAC;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB"}

package/dist/widgets/WaterfallChart/WaterfallChart.d.ts

@@ -0,0 +1,7 @@
+/**
+ * WaterfallChart Widget - Shows incremental positive/negative changes
+ */
+import React from 'react';
+import { WaterfallChartWidgetProps } from './types';
+export declare const WaterfallChart: React.NamedExoticComponent<WaterfallChartWidgetProps>;
+//# sourceMappingURL=WaterfallChart.d.ts.map

package/dist/widgets/WaterfallChart/WaterfallChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WaterfallChart.d.ts","sourceRoot":"","sources":["../../../src/widgets/WaterfallChart/WaterfallChart.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAwB,MAAM,OAAO,CAAC;AAK7C,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEpD,eAAO,MAAM,cAAc,uDAyMzB,CAAC"}

package/dist/widgets/WaterfallChart/index.d.ts

@@ -0,0 +1,3 @@
+export { WaterfallChart } from './WaterfallChart';
+export type { WaterfallChartWidgetProps, WaterfallChartData, WaterfallDataPoint } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/widgets/WaterfallChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/widgets/WaterfallChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC"}

package/dist/widgets/WaterfallChart/types.d.ts

@@ -0,0 +1,24 @@
+/**
+ * WaterfallChart Widget types - Shows incremental changes
+ */
+import { BaseWidgetProps } from '../../core';
+export interface WaterfallDataPoint {
+    label: string;
+    value: number;
+    isTotal?: boolean;
+}
+export interface WaterfallChartData {
+    data: WaterfallDataPoint[];
+    title?: string;
+    startLabel?: string;
+}
+export interface WaterfallChartWidgetProps extends BaseWidgetProps<WaterfallChartData> {
+    showValues?: boolean;
+    showLabels?: boolean;
+    positiveColor?: string;
+    negativeColor?: string;
+    totalColor?: string;
+    barWidth?: number;
+    barSpacing?: number;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/widgets/WaterfallChart/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/widgets/WaterfallChart/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAE7C,MAAM,WAAW,kBAAkB;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,yBAA0B,SAAQ,eAAe,CAAC,kBAAkB,CAAC;IACpF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB"}

package/dist/widgets/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Dashboard Widgets - All widget exports
+ * 24 WIDGET TYPES TOTAL!
+ */
+export * from './KPI';
+export * from './Gauge';
+export * from './Sparkline';
+export * from './Progress';
+export * from './MultiLineSparkline';
+export * from './LineChart';
+export * from './AreaChart';
+export * from './BarChart';
+export * from './HorizontalBarChart';
+export * from './StackedBarChart';
+export * from './GroupedBarChart';
+export * from './Histogram';
+export * from './WaterfallChart';
+export * from './ScatterPlot';
+export * from './BubbleChart';
+export * from './BoxPlot';
+export * from './PieChart';
+export * from './Treemap';
+export * from './SunburstChart';
+export * from './SankeyDiagram';
+export * from './Heatmap';
+export * from './FunnelChart';
+export * from './RadarChart';
+export * from './CandlestickChart';
+//# sourceMappingURL=index.d.ts.map

package/dist/widgets/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/widgets/index.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,cAAc,OAAO,CAAC;AACtB,cAAc,SAAS,CAAC;AACxB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAG3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAG5B,cAAc,YAAY,CAAC;AAC3B,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AAGjC,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAGhC,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC"}

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "react-native-metrify",
+  "version": "0.1.0-alpha.1",
+  "description": "Mobile-first SVG chart library for React Native, Expo, and React Native Web",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "npm run clean && npm run build:cjs && npm run build:esm && npm run build:types",
+    "build:types": "tsc --project tsconfig.build.json --emitDeclarationOnly",
+    "build:esm": "tsc --project tsconfig.esm.json",
+    "build:cjs": "tsc --project tsconfig.cjs.json",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "npm run clean && npm run build",
+    "dev": "tsc --project tsconfig.build.json --watch",
+    "pack:test": "npm pack --dry-run",
+    "example": "cd examples/expo-template && npm start"
+  },
+  "keywords": [
+    "react-native",
+    "charts",
+    "graphs",
+    "dashboard",
+    "widgets",
+    "svg",
+    "data-visualization",
+    "mobile",
+    "expo",
+    "react-native-web",
+    "kpi",
+    "gauge",
+    "sparkline",
+    "line-chart",
+    "bar-chart",
+    "pie-chart",
+    "area-chart"
+  ],
+  "author": "Krishna Kumar",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chvvkrishnakumar/react-native-metrify"
+  },
+  "bugs": {
+    "url": "https://github.com/chvvkrishnakumar/react-native-metrify/issues"
+  },
+  "homepage": "https://github.com/chvvkrishnakumar/react-native-metrify#readme",
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-svg": ">=13.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react-native-gesture-handler": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "~18.2.0",
+    "react": "^18.2.0",
+    "react-native": "^0.73.0",
+    "react-native-svg": "^14.0.0",
+    "react-native-reanimated": "^3.6.0",
+    "typescript": "^5.9.3"
+  },
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}

package/src/core/animation/index.ts

@@ -0,0 +1,113 @@
+/**
+ * Animation helpers - Simple version without reanimated
+ * For full animation support, use react-native-reanimated separately
+ */
+import { useEffect } from 'react';
+import { AnimationConfig } from '../types';
+
+// Type for shared value (compatible with reanimated)
+export type SharedValue<T = number> = { value: T };
+
+// Simple implementations (no animations, just values)
+export const useSharedValue = <T = number>(initialValue: T): SharedValue<T> => {
+  return { value: initialValue };
+};
+
+export const withTiming = (value: any, config?: any) => value;
+export const withSpring = (value: any, config?: any) => value;
+
+export const Easing = {
+  linear: (t: number) => t,
+  ease: (t: number) => t,
+  quad: (t: number) => t * t,
+  cubic: (t: number) => t * t * t,
+  bezier: (x1: number, y1: number, x2: number, y2: number) => (t: number) => t,
+  in: (easing: (t: number) => number) => easing,
+  out: (easing: (t: number) => number) => (t: number) => 1 - easing(1 - t),
+  inOut: (easing: (t: number) => number) => (t: number) =>
+    t < 0.5 ? easing(t * 2) / 2 : 1 - easing((1 - t) * 2) / 2,
+};
+
+/**
+ * Default timing configuration
+ */
+export const DEFAULT_TIMING_CONFIG = {
+  duration: 300,
+  easing: Easing.out(Easing.cubic),
+};
+
+/**
+ * Default spring configuration
+ */
+export const DEFAULT_SPRING_CONFIG = {
+  damping: 15,
+  stiffness: 150,
+  mass: 1,
+};
+
+/**
+ * Hook that creates an animated value that transitions to a target
+ * @param target - Target value to animate to
+ * @param config - Animation configuration
+ */
+export function useAnimatedValue(
+  target: number,
+  config: AnimationConfig = {}
+): SharedValue<number> {
+  const animatedValue = useSharedValue(target);
+  
+  useEffect(() => {
+    animatedValue.value = withTiming(target, {
+      duration: config.duration ?? DEFAULT_TIMING_CONFIG.duration,
+      easing: DEFAULT_TIMING_CONFIG.easing,
+    });
+  }, [target, config.duration, animatedValue]);
+  
+  return animatedValue;
+}
+
+/**
+ * Hook that creates an animated progress value (0 to normalized)
+ * @param value - Current value
+ * @param max - Maximum value
+ * @param config - Animation configuration
+ */
+export function useAnimatedProgress(
+  value: number,
+  max: number,
+  config: AnimationConfig = {}
+): SharedValue<number> {
+  const normalized = max > 0 ? Math.min(value / max, 1) : 0;
+  return useAnimatedValue(normalized, config);
+}
+
+/**
+ * Hook that creates a spring-animated value
+ * @param target - Target value to animate to
+ */
+export function useSpringValue(target: number): SharedValue<number> {
+  const animatedValue = useSharedValue(target);
+  
+  useEffect(() => {
+    animatedValue.value = withSpring(target, DEFAULT_SPRING_CONFIG);
+  }, [target, animatedValue]);
+  
+  return animatedValue;
+}
+
+/**
+ * Creates timing config for manual animations
+ */
+export function useTimingConfig(config: AnimationConfig = {}) {
+  return {
+    duration: config.duration ?? DEFAULT_TIMING_CONFIG.duration,
+    easing: DEFAULT_TIMING_CONFIG.easing,
+  };
+}
+
+/**
+ * Creates spring config for manual animations
+ */
+export function useSpringConfig() {
+  return DEFAULT_SPRING_CONFIG;
+}

package/src/core/animation/index.web.ts

@@ -0,0 +1,112 @@
+/**
+ * Animation helpers for widgets (Web version - no reanimated)
+ * Uses basic React state for web compatibility
+ */
+import { useEffect } from 'react';
+import { AnimationConfig } from '../types';
+
+// Type for shared value (web compatible)
+export type SharedValue<T> = { value: T };
+
+// Web-compatible stubs for reanimated functions
+export const useSharedValue = <T,>(initialValue: T): SharedValue<T> => {
+  return { value: initialValue };
+};
+
+export const withTiming = (value: number, config?: any) => {
+  return value;
+};
+
+export const withSpring = (value: number, config?: any) => {
+  return value;
+};
+
+export const withDelay = (delay: number, animation: any) => {
+  return animation;
+};
+
+export const withSequence = (...animations: any[]) => {
+  return animations[animations.length - 1];
+};
+
+export const withRepeat = (animation: any, numberOfReps?: number, reverse?: boolean) => {
+  return animation;
+};
+
+export const Easing = {
+  linear: (t: number) => t,
+  ease: (t: number) => t,
+  quad: (t: number) => t * t,
+  cubic: (t: number) => t * t * t,
+  bezier: (x1: number, y1: number, x2: number, y2: number) => (t: number) => t,
+  in: (easing: (t: number) => number) => easing,
+  out: (easing: (t: number) => number) => (t: number) => 1 - easing(1 - t),
+  inOut: (easing: (t: number) => number) => (t: number) =>
+    t < 0.5 ? easing(t * 2) / 2 : 1 - easing((1 - t) * 2) / 2,
+};
+
+/**
+ * Default timing configuration
+ */
+export const DEFAULT_TIMING_CONFIG = {
+  duration: 300,
+  easing: Easing.linear,
+};
+
+/**
+ * Default spring configuration
+ */
+export const DEFAULT_SPRING_CONFIG = {
+  damping: 15,
+  stiffness: 150,
+  mass: 1,
+};
+
+/**
+ * Hook to animate value changes (web version)
+ */
+export function useAnimatedValue(
+  target: number,
+  config: AnimationConfig = {}
+): SharedValue<number> {
+  // On web, just return the value directly
+  // Full animation support requires additional setup
+  return useSharedValue(target);
+}
+
+/**
+ * Hook that creates an animated progress value (0 to normalized)
+ */
+export function useAnimatedProgress(
+  value: number,
+  max: number,
+  config: AnimationConfig = {}
+): SharedValue<number> {
+  const normalized = max > 0 ? Math.min(value / max, 1) : 0;
+  return useAnimatedValue(normalized, config);
+}
+
+/**
+ * Hook that creates a spring-animated value
+ */
+export function useSpringValue(target: number): SharedValue<number> {
+  return useSharedValue(target);
+}
+
+/**
+ * Creates timing config for manual animations
+ */
+export function useTimingConfig(config: AnimationConfig = {}) {
+  return {
+    duration: config.duration ?? DEFAULT_TIMING_CONFIG.duration,
+    easing: DEFAULT_TIMING_CONFIG.easing,
+  };
+}
+
+/**
+ * Creates spring config for manual animations
+ */
+export function useSpringConfig() {
+  return DEFAULT_SPRING_CONFIG;
+}
+

package/src/core/hooks/index.ts

@@ -0,0 +1,66 @@
+/**
+ * Reusable hooks for widgets
+ */
+import { useMemo } from 'react';
+import { Theme } from '../types';
+import { useTheme } from '../theme';
+
+/**
+ * Hook to get widget dimensions with defaults
+ */
+export function useWidgetDimensions(
+  width?: number,
+  height?: number,
+  defaultWidth: number = 300,
+  defaultHeight: number = 200
+) {
+  return useMemo(
+    () => ({
+      width: width ?? defaultWidth,
+      height: height ?? defaultHeight,
+    }),
+    [width, height, defaultWidth, defaultHeight]
+  );
+}
+
+/**
+ * Hook to merge theme overrides
+ */
+export function useWidgetTheme(themeOverride?: Theme): Theme {
+  const contextTheme = useTheme();
+  return themeOverride ?? contextTheme;
+}
+
+/**
+ * Hook for widget padding calculations
+ */
+export function useWidgetPadding(theme: Theme) {
+  return useMemo(
+    () => ({
+      top: theme.spacing.md,
+      right: theme.spacing.md,
+      bottom: theme.spacing.md,
+      left: theme.spacing.md,
+      horizontal: theme.spacing.md * 2,
+      vertical: theme.spacing.md * 2,
+    }),
+    [theme.spacing.md]
+  );
+}
+
+/**
+ * Hook to calculate inner dimensions after padding
+ */
+export function useInnerDimensions(
+  width: number,
+  height: number,
+  padding: { horizontal: number; vertical: number }
+) {
+  return useMemo(
+    () => ({
+      width: Math.max(0, width - padding.horizontal),
+      height: Math.max(0, height - padding.vertical),
+    }),
+    [width, height, padding.horizontal, padding.vertical]
+  );
+}

package/src/core/index.ts

@@ -0,0 +1,26 @@
+/**
+ * Core package - Foundation for all widgets
+ * NO SVG dependencies allowed here
+ */
+
+// Math utilities
+export * from './math';
+
+// Layout utilities
+export * from './layout';
+
+// Theme system
+export * from './theme';
+
+// Animation helpers
+export * from './animation';
+
+// Hooks
+export * from './hooks';
+
+// Types
+export * from './types';
+
+// Utils
+export * from './utils/time';
+export * from './utils/responsive';