@texturehq/edges 1.6.1 → 1.6.3

package/dist/styles.css

@@ -2783,6 +2783,9 @@
   .fill-neutral-black {
     fill: var(--color-neutral-black);
   }
+  .fill-red-500 {
+    fill: var(--color-red-500);
+  }
   .fill-slate-700 {
     fill: var(--color-slate-700);
   }
@@ -2878,6 +2881,9 @@
   .px-6 {
     padding-inline: var(--spacing-6);
   }
+  .px-8 {
+    padding-inline: var(--spacing-8);
+  }
   .px-\[var\(--control-padding-lg\)\] {
     padding-inline: var(--control-padding-lg);
   }
@@ -2926,6 +2932,9 @@
   .py-8 {
     padding-block: var(--spacing-8);
   }
+  .py-10 {
+    padding-block: var(--spacing-10);
+  }
   .py-12 {
     padding-block: var(--spacing-12);
   }

package/dist/utilities.manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.6.1",
-  "generatedAt": "2025-10-12T23:27:24.851Z",
+  "version": "1.6.3",
+  "generatedAt": "2025-10-14T16:50:11.346Z",
   "categories": {
     "hooks": {
       "description": "React hooks for common functionality like debouncing, local storage, and time controls",
@@ -31,24 +31,6 @@
           "category": "hooks",
           "file": "hooks/useBreakpoint.ts"
         },
-        {
-          "name": "handleChartExport",
-          "type": "function",
-          "description": "",
-          "params": [],
-          "returns": null,
-          "example": null,
-          "category": "hooks",
-          "file": "hooks/handleChartExport.tsx"
-        },
-        {
-          "name": "TimeControlsState",
-          "type": "type",
-          "description": "",
-          "example": null,
-          "category": "hooks",
-          "file": "hooks/useTimeControls.ts"
-        },
         {
           "name": "useBreakpoint",
           "type": "function",
@@ -76,6 +58,48 @@
           "category": "hooks",
           "file": "hooks/useBreakpoint.ts"
         },
+        {
+          "name": "useChartExport",
+          "type": "function",
+          "description": "Hook for exporting chart data in various formats (CSV, SVG, PNG). Provides a stable callback for triggering exports with memoized dependencies. ```tsx const svgRef = useRef<SVGSVGElement>(null); const handleExport = useChartExport({ datasets: chartData, metadata: { xLabel: 'Date', yLabel: 'Value', seriesLabels: ['Series 1', 'Series 2'], filename: 'sales-report', timestamp: true }, svgRef }); // In your component <Button onPress={() => handleExport('csv')}>Export CSV</Button> <Button onPress={() => handleExport('png')}>Export PNG</Button> ```",
+          "params": [
+            {
+              "name": "options",
+              "type": "unknown",
+              "description": "Configuration for chart export"
+            },
+            {
+              "name": "options.datasets",
+              "type": "unknown",
+              "description": "Chart data as single array or array of arrays for multi-series"
+            },
+            {
+              "name": "options.metadata",
+              "type": "unknown",
+              "description": "Export metadata including labels and filename options"
+            },
+            {
+              "name": "options.svgRef",
+              "type": "unknown",
+              "description": "Reference to the chart's SVG element"
+            }
+          ],
+          "returns": {
+            "type": "unknown",
+            "description": "Async function to trigger export for a given format"
+          },
+          "example": "const svgRef = useRef<SVGSVGElement>(null);\nconst handleExport = useChartExport({\n  datasets: chartData,\n  metadata: {\n    xLabel: 'Date',\n    yLabel: 'Value',\n    seriesLabels: ['Series 1', 'Series 2'],\n    filename: 'sales-report',\n    timestamp: true\n  },\n  svgRef\n});\n\n// In your component\n<Button onPress={() => handleExport('csv')}>Export CSV</Button>\n<Button onPress={() => handleExport('png')}>Export PNG</Button>",
+          "category": "hooks",
+          "file": "hooks/useChartExport.ts"
+        },
+        {
+          "name": "UseChartExportOptions",
+          "type": "type",
+          "description": "",
+          "example": null,
+          "category": "hooks",
+          "file": "hooks/useChartExport.ts"
+        },
         {
           "name": "useDebounce",
           "type": "function",
@@ -133,16 +157,6 @@
           "example": "const isMobile = useMediaQuery('(max-width: 767px)');\nconst prefersReducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\nconst isLandscape = useMediaQuery('(orientation: landscape)');",
           "category": "hooks",
           "file": "hooks/useMediaQuery.ts"
-        },
-        {
-          "name": "useTimeControls",
-          "type": "function",
-          "description": "",
-          "params": [],
-          "returns": null,
-          "example": null,
-          "category": "hooks",
-          "file": "hooks/useTimeControls.ts"
         }
       ]
     },
@@ -2118,12 +2132,12 @@
     }
   },
   "summary": {
-    "totalUtilities": 208,
+    "totalUtilities": 207,
     "totalCategories": 5,
     "categories": [
       {
         "name": "hooks",
-        "count": 11
+        "count": 10
       },
       {
         "name": "formatting",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@texturehq/edges",
-  "version": "1.6.1",
+  "version": "1.6.3",
   "author": "Nicholas Brown <nick@texturehq.com>",
   "description": "A shared component library for Texture",
   "type": "module",

package/dist/{server-C20rH2CQ.d.cts → server-DDYwupsj.d.cts}

@@ -8,6 +8,63 @@ import { ViewState, MapRef } from 'react-map-gl';
 import * as d3_scale from 'd3-scale';
 import { ScaleTime, ScaleLinear } from 'd3-scale';
 
+type YFormatType = "number" | "percent" | "kWh" | "kW" | "amperes" | "temperature" | "percentageChange" | "decimal" | "currency" | "scientific" | "integer" | "logarithmic" | "timeDuration" | "compact" | "si" | "bytes" | "rate" | "ordinal" | "date" | "largeCurrency" | "coordinates" | "ranked";
+interface TooltipData {
+    xValue: Date;
+    series: TooltipSeries[];
+    x: number;
+    y: number;
+    position: "left" | "right";
+}
+interface TooltipSeries {
+    label: string;
+    value: number;
+    color: string;
+    type?: "area" | "line" | "bar";
+}
+interface ChartContextType {
+    xScale: ScaleTime<number, number>;
+    yScale: ScaleLinear<number, number>;
+    width: number;
+    height: number;
+    yFormatType: YFormatType;
+    animationSettings: {
+        duration: number;
+        ease: string;
+    };
+    tooltip: {
+        data: TooltipData | null;
+        show: (data: TooltipData) => void;
+        hide: () => void;
+    };
+}
+declare const ChartContext: React$1.Context<ChartContextType | null>;
+
+declare const useChartContext: () => ChartContextType;
+
+interface BaseDataPoint {
+    xValue: Date;
+    yValue: number;
+    category?: string;
+}
+interface ChartMargin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+declare const defaultMargin: ChartMargin;
+interface YFormatSettings {
+    format: (value: number) => string;
+    min?: number;
+    max?: number;
+    tickInterval?: number;
+    tickFormat?: (value: number) => string;
+}
+declare function getYFormatSettings(formatType: YFormatType, currencySymbol?: string): YFormatSettings;
+declare const createXScale: (data: BaseDataPoint[], width: number) => d3_scale.ScaleTime<number, number, never>;
+declare const createYScale: (data: BaseDataPoint[], height: number, formatType: YFormatType) => d3_scale.ScaleLinear<number, number, never>;
+
 type PhosphorIconName = keyof typeof PhosphorIcons;
 type IconName = PhosphorIconName;
 declare const sizePresets: {
@@ -432,63 +489,6 @@ interface CodeEditorProps {
  */
 declare function CodeEditor({ value, readOnly, onChange, language, theme, height, width, className, lineHeight, minLines, maxLines, showLineNumbers, showGutter, fontSize, wrapEnabled, }: CodeEditorProps): react_jsx_runtime.JSX.Element;
 
-type YFormatType = "number" | "percent" | "kWh" | "kW" | "amperes" | "temperature" | "percentageChange" | "decimal" | "currency" | "scientific" | "integer" | "logarithmic" | "timeDuration" | "compact" | "si" | "bytes" | "rate" | "ordinal" | "date" | "largeCurrency" | "coordinates" | "ranked";
-interface TooltipData {
-    xValue: Date;
-    series: TooltipSeries[];
-    x: number;
-    y: number;
-    position: "left" | "right";
-}
-interface TooltipSeries {
-    label: string;
-    value: number;
-    color: string;
-    type?: "area" | "line" | "bar";
-}
-interface ChartContextType {
-    xScale: ScaleTime<number, number>;
-    yScale: ScaleLinear<number, number>;
-    width: number;
-    height: number;
-    yFormatType: YFormatType;
-    animationSettings: {
-        duration: number;
-        ease: string;
-    };
-    tooltip: {
-        data: TooltipData | null;
-        show: (data: TooltipData) => void;
-        hide: () => void;
-    };
-}
-declare const ChartContext: React$1.Context<ChartContextType | null>;
-
-declare const useChartContext: () => ChartContextType;
-
-interface BaseDataPoint {
-    xValue: Date;
-    yValue: number;
-    category?: string;
-}
-interface ChartMargin {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-}
-declare const defaultMargin: ChartMargin;
-interface YFormatSettings {
-    format: (value: number) => string;
-    min?: number;
-    max?: number;
-    tickInterval?: number;
-    tickFormat?: (value: number) => string;
-}
-declare function getYFormatSettings(formatType: YFormatType, currencySymbol?: string): YFormatSettings;
-declare const createXScale: (data: BaseDataPoint[], width: number) => d3_scale.ScaleTime<number, number, never>;
-declare const createYScale: (data: BaseDataPoint[], height: number, formatType: YFormatType) => d3_scale.ScaleLinear<number, number, never>;
-
 /**
  * DateField
  *

package/dist/{server-C20rH2CQ.d.ts → server-DDYwupsj.d.ts}

@@ -8,6 +8,63 @@ import { ViewState, MapRef } from 'react-map-gl';
 import * as d3_scale from 'd3-scale';
 import { ScaleTime, ScaleLinear } from 'd3-scale';
 
+type YFormatType = "number" | "percent" | "kWh" | "kW" | "amperes" | "temperature" | "percentageChange" | "decimal" | "currency" | "scientific" | "integer" | "logarithmic" | "timeDuration" | "compact" | "si" | "bytes" | "rate" | "ordinal" | "date" | "largeCurrency" | "coordinates" | "ranked";
+interface TooltipData {
+    xValue: Date;
+    series: TooltipSeries[];
+    x: number;
+    y: number;
+    position: "left" | "right";
+}
+interface TooltipSeries {
+    label: string;
+    value: number;
+    color: string;
+    type?: "area" | "line" | "bar";
+}
+interface ChartContextType {
+    xScale: ScaleTime<number, number>;
+    yScale: ScaleLinear<number, number>;
+    width: number;
+    height: number;
+    yFormatType: YFormatType;
+    animationSettings: {
+        duration: number;
+        ease: string;
+    };
+    tooltip: {
+        data: TooltipData | null;
+        show: (data: TooltipData) => void;
+        hide: () => void;
+    };
+}
+declare const ChartContext: React$1.Context<ChartContextType | null>;
+
+declare const useChartContext: () => ChartContextType;
+
+interface BaseDataPoint {
+    xValue: Date;
+    yValue: number;
+    category?: string;
+}
+interface ChartMargin {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+declare const defaultMargin: ChartMargin;
+interface YFormatSettings {
+    format: (value: number) => string;
+    min?: number;
+    max?: number;
+    tickInterval?: number;
+    tickFormat?: (value: number) => string;
+}
+declare function getYFormatSettings(formatType: YFormatType, currencySymbol?: string): YFormatSettings;
+declare const createXScale: (data: BaseDataPoint[], width: number) => d3_scale.ScaleTime<number, number, never>;
+declare const createYScale: (data: BaseDataPoint[], height: number, formatType: YFormatType) => d3_scale.ScaleLinear<number, number, never>;
+
 type PhosphorIconName = keyof typeof PhosphorIcons;
 type IconName = PhosphorIconName;
 declare const sizePresets: {
@@ -432,63 +489,6 @@ interface CodeEditorProps {
  */
 declare function CodeEditor({ value, readOnly, onChange, language, theme, height, width, className, lineHeight, minLines, maxLines, showLineNumbers, showGutter, fontSize, wrapEnabled, }: CodeEditorProps): react_jsx_runtime.JSX.Element;
 
-type YFormatType = "number" | "percent" | "kWh" | "kW" | "amperes" | "temperature" | "percentageChange" | "decimal" | "currency" | "scientific" | "integer" | "logarithmic" | "timeDuration" | "compact" | "si" | "bytes" | "rate" | "ordinal" | "date" | "largeCurrency" | "coordinates" | "ranked";
-interface TooltipData {
-    xValue: Date;
-    series: TooltipSeries[];
-    x: number;
-    y: number;
-    position: "left" | "right";
-}
-interface TooltipSeries {
-    label: string;
-    value: number;
-    color: string;
-    type?: "area" | "line" | "bar";
-}
-interface ChartContextType {
-    xScale: ScaleTime<number, number>;
-    yScale: ScaleLinear<number, number>;
-    width: number;
-    height: number;
-    yFormatType: YFormatType;
-    animationSettings: {
-        duration: number;
-        ease: string;
-    };
-    tooltip: {
-        data: TooltipData | null;
-        show: (data: TooltipData) => void;
-        hide: () => void;
-    };
-}
-declare const ChartContext: React$1.Context<ChartContextType | null>;
-
-declare const useChartContext: () => ChartContextType;
-
-interface BaseDataPoint {
-    xValue: Date;
-    yValue: number;
-    category?: string;
-}
-interface ChartMargin {
-    top: number;
-    right: number;
-    bottom: number;
-    left: number;
-}
-declare const defaultMargin: ChartMargin;
-interface YFormatSettings {
-    format: (value: number) => string;
-    min?: number;
-    max?: number;
-    tickInterval?: number;
-    tickFormat?: (value: number) => string;
-}
-declare function getYFormatSettings(formatType: YFormatType, currencySymbol?: string): YFormatSettings;
-declare const createXScale: (data: BaseDataPoint[], width: number) => d3_scale.ScaleTime<number, number, never>;
-declare const createYScale: (data: BaseDataPoint[], height: number, formatType: YFormatType) => d3_scale.ScaleLinear<number, number, never>;
-
 /**
  * DateField
  *