deskforge 1.0.0

package/packages/theme/src/theme.ts

@@ -0,0 +1,145 @@
+// theme.ts
+// The active theme manager.
+// Controls which theme is currently active.
+// Provides tokens to all components.
+// Supports dark, light, system, and custom themes.
+
+import type { DesignTokens } from './tokens'
+import { defaultDarkTokens, defaultLightTokens } from './tokens'
+
+// The three built-in theme modes
+type ThemeMode = 'dark' | 'light' | 'system'
+
+// A complete named theme
+interface DFTheme {
+  name:   string        // theme identifier
+  mode:   ThemeMode     // dark or light base
+  tokens: DesignTokens  // all design tokens
+}
+
+// The theme manager state
+interface ThemeManager {
+  active:   DFTheme                    // currently active theme
+  custom:   Map<string, DFTheme>       // registered custom themes
+  mode:     ThemeMode                  // current mode setting
+  listeners:Set<() => void>            // change listeners
+}
+
+// Creates the global theme manager
+function createThemeManager(): ThemeManager {
+  return {
+    active:    {
+      name:   'dark',
+      mode:   'dark',
+      tokens: defaultDarkTokens
+    },
+    custom:    new Map(),
+    mode:      'dark',
+    listeners: new Set(),
+  }
+}
+
+// Global theme manager instance
+const themeManager = createThemeManager()
+
+// Registers a listener that fires when theme changes
+function onThemeChange(listener: () => void): () => void {
+  themeManager.listeners.add(listener)
+  // Returns unsubscribe function
+  return () => themeManager.listeners.delete(listener)
+}
+
+// Notifies all listeners that theme changed
+function notifyListeners(): void {
+  themeManager.listeners.forEach(listener => listener())
+}
+
+// Sets the active theme mode
+// 'system' follows the OS dark/light preference
+function setTheme(mode: ThemeMode | string): void {
+  // Check if it is a custom theme name
+  const customTheme = themeManager.custom.get(mode)
+
+  if (customTheme) {
+    themeManager.active = customTheme
+    themeManager.mode   = customTheme.mode
+    notifyListeners()
+    return
+  }
+
+  // Handle built-in modes
+  if (mode === 'dark') {
+    themeManager.active = {
+      name:   'dark',
+      mode:   'dark',
+      tokens: defaultDarkTokens
+    }
+  } else if (mode === 'light') {
+    themeManager.active = {
+      name:   'light',
+      mode:   'light',
+      tokens: defaultLightTokens
+    }
+  } else if (mode === 'system') {
+    // Use dark as default for system
+    // Real system detection happens in the native layer
+    themeManager.active = {
+      name:   'system',
+      mode:   'system',
+      tokens: defaultDarkTokens
+    }
+  }
+
+  themeManager.mode = mode as ThemeMode
+  notifyListeners()
+}
+
+// Registers a custom theme
+// Developer can create their own complete theme
+function createTheme(theme: DFTheme): void {
+  themeManager.custom.set(theme.name, theme)
+}
+
+// Returns the currently active tokens
+function getTokens(): DesignTokens {
+  return themeManager.active.tokens
+}
+
+// Returns the current theme mode
+function getMode(): ThemeMode {
+  return themeManager.mode
+}
+
+// Resolves a token name to its actual value
+// e.g. resolveToken('primary') → '#0077ff'
+function resolveToken(
+  path:   string,
+  tokens?: DesignTokens
+): unknown {
+  const t = tokens ?? getTokens()
+
+  // Split path by dot for nested access
+  // e.g. 'typography.sizes.lg' → ['typography','sizes','lg']
+  const parts = path.split('.')
+  let current: unknown = t
+
+  for (const part of parts) {
+    if (current === null || typeof current !== 'object') {
+      return path // return original if path not found
+    }
+    current = (current as Record<string, unknown>)[part]
+  }
+
+  return current ?? path
+}
+
+export type { DFTheme, ThemeMode }
+export {
+  themeManager,
+  setTheme,
+  createTheme,
+  getTokens,
+  getMode,
+  resolveToken,
+  onThemeChange,
+}

package/packages/theme/src/tokens.ts

@@ -0,0 +1,303 @@
+// tokens.ts
+// Design tokens are named values for colors, spacing,
+// typography, shadows, and motion.
+// Using tokens instead of hardcoded values means
+// changing the theme updates the entire app instantly.
+
+// ─── COLOR TOKENS ────────────────────────────────────────
+
+// Semantic color names used throughout the framework
+interface ColorTokens {
+  // Brand colors
+  primary:     string  // main brand color
+  secondary:   string  // secondary brand color
+  accent:      string  // highlight color
+
+  // Semantic colors
+  success:     string  // green — positive actions
+  warning:     string  // orange — caution
+  danger:      string  // red — destructive actions
+  info:        string  // blue — informational
+
+  // Surface colors
+  background:  string  // app background
+  surface:     string  // card and panel background
+  surfaceAlt:  string  // alternate surface
+  border:      string  // dividers and borders
+  overlay:     string  // modal backdrop
+
+  // Text colors
+  text:        string  // primary text
+  textMuted:   string  // secondary text
+  textDisabled:string  // disabled text
+
+  // Always the same regardless of theme
+  white:       string
+  black:       string
+  transparent: string
+}
+
+// ─── TYPOGRAPHY TOKENS ───────────────────────────────────
+
+// Font family definitions
+interface FontTokens {
+  heading: string  // used for headings
+  body:    string  // used for body text
+  mono:    string  // used for code
+}
+
+// Font size scale in pixels
+interface FontSizeTokens {
+  xs:   number  // 10px
+  sm:   number  // 12px
+  md:   number  // 14px
+  lg:   number  // 16px
+  xl:   number  // 20px
+  '2xl':number  // 24px
+  '3xl':number  // 32px
+  '4xl':number  // 48px
+}
+
+// Font weight scale
+interface FontWeightTokens {
+  light:    number  // 300
+  regular:  number  // 400
+  medium:   number  // 500
+  semibold: number  // 600
+  bold:     number  // 700
+  black:    number  // 900
+}
+
+// Line height scale
+interface LineHeightTokens {
+  tight:  number  // 1.2
+  normal: number  // 1.5
+  loose:  number  // 1.8
+}
+
+// All typography tokens together
+interface TypographyTokens {
+  fonts:       FontTokens
+  sizes:       FontSizeTokens
+  weights:     FontWeightTokens
+  lineHeights: LineHeightTokens
+}
+
+// ─── SPACING TOKENS ──────────────────────────────────────
+
+// Spacing scale in pixels
+// Used for padding, margin, gap
+interface SpacingTokens {
+  xs:   number  // 4px
+  sm:   number  // 8px
+  md:   number  // 16px
+  lg:   number  // 24px
+  xl:   number  // 32px
+  '2xl':number  // 48px
+  '3xl':number  // 64px
+}
+
+// ─── RADIUS TOKENS ───────────────────────────────────────
+
+// Border radius scale in pixels
+interface RadiusTokens {
+  none: number  // 0
+  sm:   number  // 4px
+  md:   number  // 8px
+  lg:   number  // 12px
+  xl:   number  // 16px
+  full: number  // 9999px — perfect circle
+}
+
+// ─── SHADOW TOKENS ───────────────────────────────────────
+
+// Shadow definitions
+// These are passed to Skia's drawShadow call
+interface ShadowTokens {
+  none: string
+  sm:   string  // subtle shadow
+  md:   string  // medium shadow
+  lg:   string  // large shadow
+  xl:   string  // dramatic shadow
+}
+
+// ─── MOTION TOKENS ───────────────────────────────────────
+
+// Animation duration scale in milliseconds
+interface DurationTokens {
+  instant: number  // 80ms
+  fast:    number  // 150ms
+  normal:  number  // 250ms
+  slow:    number  // 400ms
+}
+
+// Named easing curves
+interface EasingTokens {
+  standard: string  // default easing
+  enter:    string  // elements entering screen
+  exit:     string  // elements leaving screen
+  spring:   string  // spring-like easing
+}
+
+// All motion tokens together
+interface MotionTokens {
+  duration:            DurationTokens
+  easing:              EasingTokens
+  respectReduceMotion: boolean  // honour OS accessibility setting
+}
+
+// ─── BREAKPOINT TOKENS ───────────────────────────────────
+
+// Screen size breakpoints in pixels
+interface BreakpointTokens {
+  sm:   number  // 480px — small phone
+  md:   number  // 768px — tablet
+  lg:   number  // 1024px — small desktop
+  xl:   number  // 1280px — desktop
+  '2xl':number  // 1536px — large desktop
+}
+
+// ─── FULL TOKEN SET ──────────────────────────────────────
+
+// Complete set of all design tokens for a theme
+interface DesignTokens {
+  colors:      ColorTokens
+  typography:  TypographyTokens
+  spacing:     SpacingTokens
+  radius:      RadiusTokens
+  shadows:     ShadowTokens
+  motion:      MotionTokens
+  breakpoints: BreakpointTokens
+}
+
+// ─── DEFAULT TOKENS ──────────────────────────────────────
+
+// Default dark theme tokens
+// Used when no custom theme is provided
+const defaultDarkTokens: DesignTokens = {
+  colors: {
+    primary:      '#0077ff',
+    secondary:    '#00c6ff',
+    accent:       '#ff6b00',
+    success:      '#00dd88',
+    warning:      '#ffaa00',
+    danger:       '#ff4444',
+    info:         '#00aaff',
+    background:   '#0a0a1a',
+    surface:      '#111128',
+    surfaceAlt:   '#1a1a35',
+    border:       '#2a2a45',
+    overlay:      'rgba(0,0,0,0.5)',
+    text:         '#ffffff',
+    textMuted:    '#8888aa',
+    textDisabled: '#555577',
+    white:        '#ffffff',
+    black:        '#000000',
+    transparent:  'transparent',
+  },
+  typography: {
+    fonts: {
+      heading: 'Sora',
+      body:    'DM Sans',
+      mono:    'JetBrains Mono',
+    },
+    sizes: {
+      xs:    10,
+      sm:    12,
+      md:    14,
+      lg:    16,
+      xl:    20,
+      '2xl': 24,
+      '3xl': 32,
+      '4xl': 48,
+    },
+    weights: {
+      light:    300,
+      regular:  400,
+      medium:   500,
+      semibold: 600,
+      bold:     700,
+      black:    900,
+    },
+    lineHeights: {
+      tight:  1.2,
+      normal: 1.5,
+      loose:  1.8,
+    },
+  },
+  spacing: {
+    xs:    4,
+    sm:    8,
+    md:    16,
+    lg:    24,
+    xl:    32,
+    '2xl': 48,
+    '3xl': 64,
+  },
+  radius: {
+    none: 0,
+    sm:   4,
+    md:   8,
+    lg:   12,
+    xl:   16,
+    full: 9999,
+  },
+  shadows: {
+    none: 'none',
+    sm:   '0 1px 3px rgba(0,0,0,0.2)',
+    md:   '0 4px 12px rgba(0,0,0,0.3)',
+    lg:   '0 8px 24px rgba(0,0,0,0.4)',
+    xl:   '0 16px 48px rgba(0,0,0,0.5)',
+  },
+  motion: {
+    duration: {
+      instant: 80,
+      fast:    150,
+      normal:  250,
+      slow:    400,
+    },
+    easing: {
+      standard: 'cubic-bezier(0.4, 0.0, 0.2, 1)',
+      enter:    'cubic-bezier(0.0, 0.0, 0.2, 1)',
+      exit:     'cubic-bezier(0.4, 0.0, 1.0, 1)',
+      spring:   'cubic-bezier(0.34, 1.56, 0.64, 1)',
+    },
+    respectReduceMotion: true,
+  },
+  breakpoints: {
+    sm:    480,
+    md:    768,
+    lg:    1024,
+    xl:    1280,
+    '2xl': 1536,
+  },
+}
+
+// Default light theme tokens
+const defaultLightTokens: DesignTokens = {
+  ...defaultDarkTokens,
+  colors: {
+    ...defaultDarkTokens.colors,
+    background:   '#f8f9fc',
+    surface:      '#ffffff',
+    surfaceAlt:   '#f0f2f8',
+    border:       '#e2e8f0',
+    overlay:      'rgba(0,0,0,0.3)',
+    text:         '#0d0d1a',
+    textMuted:    '#6b7280',
+    textDisabled: '#9ca3af',
+  },
+}
+
+export type {
+  DesignTokens,
+  ColorTokens,
+  TypographyTokens,
+  SpacingTokens,
+  RadiusTokens,
+  ShadowTokens,
+  MotionTokens,
+  BreakpointTokens,
+}
+
+export { defaultDarkTokens, defaultLightTokens }

package/packages/theme/src/variant.ts

@@ -0,0 +1,68 @@
+// variant.ts
+// Variants let you define multiple style versions
+// of the same component.
+// e.g. Button has variants: filled, outline, ghost
+// e.g. Card has variants: default, success, danger
+// Define variants once — use by name everywhere.
+
+import type { DFStyle } from './style'
+import { mergeStyles }  from './style'
+
+// Configuration for a variant system
+interface VariantConfig<V extends Record<string, Record<string, DFStyle>>> {
+  // Base style applied to all variants
+  base: DFStyle
+
+  // Named variant groups
+  // e.g. { size: { sm: Style, md: Style, lg: Style } }
+  variants: V
+
+  // Default variant selection for each group
+  defaultVariants: {
+    [K in keyof V]?: keyof V[K]
+  }
+}
+
+// The object returned by Variant()
+interface DFVariant<V extends Record<string, Record<string, DFStyle>>> {
+  // Call with selected variants to get final style
+  (selected?: { [K in keyof V]?: keyof V[K] }): DFStyle
+}
+
+// Creates a variant system for a component
+// Returns a function — call it with variant selections
+// to get the merged final style
+function Variant<
+  V extends Record<string, Record<string, DFStyle>>
+>(
+  config: VariantConfig<V>
+): DFVariant<V> {
+  // Returns merged style for given variant selections
+  return function(
+    selected?: { [K in keyof V]?: keyof V[K] }
+  ): DFStyle {
+    let result: DFStyle = { ...config.base }
+
+    // Merge in each selected variant
+    const selections = { ...config.defaultVariants, ...selected }
+
+    Object.keys(selections).forEach(groupKey => {
+      const variantKey = selections[groupKey as keyof V]
+
+      if (!variantKey) return
+
+      const group = config.variants[groupKey]
+      if (!group) return
+
+      const variantStyle = group[variantKey as string]
+      if (!variantStyle) return
+
+      result = mergeStyles(result, variantStyle)
+    })
+
+    return result
+  }
+}
+
+export type { VariantConfig, DFVariant }
+export { Variant }

package/packages/theme/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "CommonJS",
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "strict": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

package/packages/ui/dist/charts/BarChart.d.ts

@@ -0,0 +1,23 @@
+import type { DFNode } from '@deskforge/core/';
+import type { ChartSeries } from './LineChart';
+interface BarChartProps {
+    data?: number[];
+    series?: ChartSeries[];
+    labels?: string[];
+    color?: string;
+    horizontal?: boolean;
+    radius?: number;
+    groupGap?: number;
+    barGap?: number;
+    showGrid?: boolean;
+    showValues?: boolean;
+    showLegend?: boolean;
+    height?: number;
+    width?: number | string;
+    animate?: boolean;
+    onBarTap?: (index: number, value: number) => void;
+}
+declare function BarChart(props: BarChartProps): DFNode;
+export type { BarChartProps };
+export { BarChart };
+//# sourceMappingURL=BarChart.d.ts.map

package/packages/ui/dist/charts/BarChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../src/charts/BarChart.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAG9C,UAAU,aAAa;IAErB,IAAI,CAAC,EAAS,MAAM,EAAE,CAAA;IAGtB,MAAM,CAAC,EAAO,WAAW,EAAE,CAAA;IAG3B,MAAM,CAAC,EAAO,MAAM,EAAE,CAAA;IAGtB,KAAK,CAAC,EAAQ,MAAM,CAAA;IAGpB,UAAU,CAAC,EAAG,OAAO,CAAA;IAGrB,MAAM,CAAC,EAAO,MAAM,CAAA;IAGpB,QAAQ,CAAC,EAAK,MAAM,CAAA;IAGpB,MAAM,CAAC,EAAO,MAAM,CAAA;IAGpB,QAAQ,CAAC,EAAK,OAAO,CAAA;IAGrB,UAAU,CAAC,EAAG,OAAO,CAAA;IAGrB,UAAU,CAAC,EAAG,OAAO,CAAA;IAGrB,MAAM,CAAC,EAAO,MAAM,CAAA;IAGpB,KAAK,CAAC,EAAQ,MAAM,GAAG,MAAM,CAAA;IAG7B,OAAO,CAAC,EAAM,OAAO,CAAA;IAGrB,QAAQ,CAAC,EAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACrD;AAID,iBAAS,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,MAAM,CAsB9C;AAED,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/packages/ui/dist/charts/BarChart.js

@@ -0,0 +1,34 @@
+"use strict";
+// BarChart.ts
+// Vertical bar chart rendered by Skia.
+// Supports grouped bars for comparison.
+// Bars animate up on load automatically.
+// Tap a bar to get its value and index.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BarChart = BarChart;
+const core_1 = require("@deskforge/core/");
+// Creates a bar chart node
+// props — chart configuration
+function BarChart(props) {
+    const series = props.series ?? [{
+            label: 'Data',
+            data: props.data ?? [],
+            color: props.color ?? 'primary',
+        }];
+    return (0, core_1.createNode)('BarChart', {
+        series,
+        labels: props.labels ?? [],
+        horizontal: props.horizontal ?? false,
+        radius: props.radius ?? 4,
+        groupGap: props.groupGap ?? 8,
+        barGap: props.barGap ?? 2,
+        showGrid: props.showGrid ?? true,
+        showValues: props.showValues ?? false,
+        showLegend: props.showLegend ?? series.length > 1,
+        height: props.height ?? 240,
+        width: props.width ?? '100%',
+        animate: props.animate ?? true,
+        onBarTap: props.onBarTap,
+    }, []);
+}
+//# sourceMappingURL=BarChart.js.map

package/packages/ui/dist/charts/BarChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../src/charts/BarChart.ts"],"names":[],"mappings":";AAAA,cAAc;AACd,uCAAuC;AACvC,wCAAwC;AACxC,yCAAyC;AACzC,wCAAwC;;AAiF/B,4BAAQ;AA/EjB,2CAA6C;AAoD7C,2BAA2B;AAC3B,8BAA8B;AAC9B,SAAS,QAAQ,CAAC,KAAoB;IACpC,MAAM,MAAM,GAAkB,KAAK,CAAC,MAAM,IAAI,CAAC;YAC7C,KAAK,EAAE,MAAM;YACb,IAAI,EAAG,KAAK,CAAC,IAAI,IAAK,EAAE;YACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,SAAS;SAChC,CAAC,CAAA;IAEF,OAAO,IAAA,iBAAU,EAAC,UAAU,EAAE;QAC5B,MAAM;QACN,MAAM,EAAM,KAAK,CAAC,MAAM,IAAQ,EAAE;QAClC,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,KAAK;QACrC,MAAM,EAAM,KAAK,CAAC,MAAM,IAAQ,CAAC;QACjC,QAAQ,EAAI,KAAK,CAAC,QAAQ,IAAM,CAAC;QACjC,MAAM,EAAM,KAAK,CAAC,MAAM,IAAQ,CAAC;QACjC,QAAQ,EAAI,KAAK,CAAC,QAAQ,IAAM,IAAI;QACpC,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,KAAK;QACrC,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC;QACjD,MAAM,EAAM,KAAK,CAAC,MAAM,IAAQ,GAAG;QACnC,KAAK,EAAO,KAAK,CAAC,KAAK,IAAS,MAAM;QACtC,OAAO,EAAK,KAAK,CAAC,OAAO,IAAO,IAAI;QACpC,QAAQ,EAAI,KAAK,CAAC,QAAQ;KACA,EAAE,EAAE,CAAC,CAAA;AACnC,CAAC"}

package/packages/ui/dist/charts/LineChart.d.ts

@@ -0,0 +1,27 @@
+import type { DFNode } from '@deskforge/core/';
+interface ChartSeries {
+    label: string;
+    data: number[];
+    color?: string;
+    filled?: boolean;
+}
+interface LineChartProps {
+    data?: number[];
+    series?: ChartSeries[];
+    labels?: string[];
+    title?: string;
+    color?: string;
+    smooth?: boolean;
+    showPoints?: boolean;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    showLabels?: boolean;
+    height?: number;
+    width?: number | string;
+    animate?: boolean;
+    onPointTap?: (index: number, value: number) => void;
+}
+declare function LineChart(props: LineChartProps): DFNode;
+export type { ChartSeries, LineChartProps };
+export { LineChart };
+//# sourceMappingURL=LineChart.d.ts.map

package/packages/ui/dist/charts/LineChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.d.ts","sourceRoot":"","sources":["../../src/charts/LineChart.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AAG9C,UAAU,WAAW;IAEnB,KAAK,EAAI,MAAM,CAAA;IAGf,IAAI,EAAK,MAAM,EAAE,CAAA;IAGjB,KAAK,CAAC,EAAG,MAAM,CAAA;IAGf,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAGD,UAAU,cAAc;IAEtB,IAAI,CAAC,EAAS,MAAM,EAAE,CAAA;IAGtB,MAAM,CAAC,EAAO,WAAW,EAAE,CAAA;IAG3B,MAAM,CAAC,EAAO,MAAM,EAAE,CAAA;IAGtB,KAAK,CAAC,EAAQ,MAAM,CAAA;IAGpB,KAAK,CAAC,EAAQ,MAAM,CAAA;IAGpB,MAAM,CAAC,EAAO,OAAO,CAAA;IAGrB,UAAU,CAAC,EAAG,OAAO,CAAA;IAGrB,QAAQ,CAAC,EAAK,OAAO,CAAA;IAGrB,UAAU,CAAC,EAAG,OAAO,CAAA;IAGrB,UAAU,CAAC,EAAG,OAAO,CAAA;IAGrB,MAAM,CAAC,EAAO,MAAM,CAAA;IAGpB,KAAK,CAAC,EAAQ,MAAM,GAAG,MAAM,CAAA;IAG7B,OAAO,CAAC,EAAM,OAAO,CAAA;IAGrB,UAAU,CAAC,EAAG,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACrD;AAKD,iBAAS,SAAS,CAAC,KAAK,EAAE,cAAc,GAAG,MAAM,CAsBhD;AAED,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA;AAC3C,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/packages/ui/dist/charts/LineChart.js

@@ -0,0 +1,35 @@
+"use strict";
+// LineChart.ts
+// Line chart component rendered by Skia.
+// No external charting library needed.
+// Smooth curves with optional area fill.
+// Animated on data change automatically.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LineChart = LineChart;
+const core_1 = require("@deskforge/core/");
+// Creates a line chart node
+// Rendered entirely by Skia — no canvas element exposed
+// props — chart configuration
+function LineChart(props) {
+    // Normalise to series format
+    const series = props.series ?? [{
+            label: props.title ?? 'Data',
+            data: props.data ?? [],
+            color: props.color ?? 'primary',
+            filled: false,
+        }];
+    return (0, core_1.createNode)('LineChart', {
+        series,
+        labels: props.labels ?? [],
+        smooth: props.smooth ?? true,
+        showPoints: props.showPoints ?? true,
+        showGrid: props.showGrid ?? true,
+        showLegend: props.showLegend ?? series.length > 1,
+        showLabels: props.showLabels ?? true,
+        height: props.height ?? 240,
+        width: props.width ?? '100%',
+        animate: props.animate ?? true,
+        onPointTap: props.onPointTap,
+    }, []);
+}
+//# sourceMappingURL=LineChart.js.map

package/packages/ui/dist/charts/LineChart.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.js","sourceRoot":"","sources":["../../src/charts/LineChart.ts"],"names":[],"mappings":";AAAA,eAAe;AACf,yCAAyC;AACzC,uCAAuC;AACvC,yCAAyC;AACzC,yCAAyC;;AA6FhC,8BAAS;AA3FlB,2CAA6C;AA+D7C,4BAA4B;AAC5B,wDAAwD;AACxD,8BAA8B;AAC9B,SAAS,SAAS,CAAC,KAAqB;IACtC,6BAA6B;IAC7B,MAAM,MAAM,GAAkB,KAAK,CAAC,MAAM,IAAI,CAAC;YAC7C,KAAK,EAAI,KAAK,CAAC,KAAK,IAAI,MAAM;YAC9B,IAAI,EAAK,KAAK,CAAC,IAAI,IAAK,EAAE;YAC1B,KAAK,EAAI,KAAK,CAAC,KAAK,IAAI,SAAS;YACjC,MAAM,EAAG,KAAK;SACf,CAAC,CAAA;IAEF,OAAO,IAAA,iBAAU,EAAC,WAAW,EAAE;QAC7B,MAAM;QACN,MAAM,EAAM,KAAK,CAAC,MAAM,IAAQ,EAAE;QAClC,MAAM,EAAM,KAAK,CAAC,MAAM,IAAQ,IAAI;QACpC,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,IAAI;QACpC,QAAQ,EAAI,KAAK,CAAC,QAAQ,IAAM,IAAI;QACpC,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC;QACjD,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,IAAI;QACpC,MAAM,EAAM,KAAK,CAAC,MAAM,IAAQ,GAAG;QACnC,KAAK,EAAO,KAAK,CAAC,KAAK,IAAS,MAAM;QACtC,OAAO,EAAK,KAAK,CAAC,OAAO,IAAO,IAAI;QACpC,UAAU,EAAE,KAAK,CAAC,UAAU;KACF,EAAE,EAAE,CAAC,CAAA;AACnC,CAAC"}

package/packages/ui/dist/charts/index.d.ts

@@ -0,0 +1,3 @@
+export * from './LineChart';
+export * from './BarChart';
+//# sourceMappingURL=index.d.ts.map

package/packages/ui/dist/charts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/charts/index.ts"],"names":[],"mappings":"AAGA,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA"}