@trinityui/design-system 1.0.2 → 1.0.4

package/dist/components/Charts/PieChart.d.ts

@@ -0,0 +1,52 @@
+/**
+ * @fileoverview PieChart component.
+ * @module components/Charts/PieChart
+ * PieChart & DonutChart Components
+ * Trinity-styled pie and donut charts
+ * @example
+ * ```tsx
+ *  import { PieChart } from '@trinityui/design-system';
+ *
+ *  <PieChart />
+ *  ```
+ */
+import React from 'react';
+import { PieChartProps } from './types';
+/**
+ * PieChart - Trinity-styled pie chart
+ *
+ * @example
+ * ```tsx
+ * <PieChart
+ *   data={[
+ *     { name: 'Desktop', value: 400 },
+ *     { name: 'Mobile', value: 300 },
+ *     { name: 'Tablet', value: 200 },
+ *   ]}
+ *   title="Traffic by Device"
+ * />
+ * ```
+ */
+export declare const PieChart: React.FC<PieChartProps>;
+/**
+ * DonutChart - Convenience wrapper for PieChart with inner radius
+ *
+ * @example
+ * ```tsx
+ * <DonutChart
+ *   data={[
+ *     { name: 'Completed', value: 75 },
+ *     { name: 'Remaining', value: 25 },
+ *   ]}
+ *   centerContent={
+ *     <Box>
+ *       <Typography variant="h4">75%</Typography>
+ *       <Typography variant="caption">Complete</Typography>
+ *     </Box>
+ *   }
+ * />
+ * ```
+ */
+export declare const DonutChart: React.FC<PieChartProps>;
+export default PieChart;
+//# sourceMappingURL=PieChart.d.ts.map

package/dist/components/Charts/PieChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../src/components/Charts/PieChart.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAmB9D,OAAO,EAAE,aAAa,EAAmF,MAAM,SAAS,CAAC;AAuHzH;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CA2L5C,CAAC;AAEF;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAE9C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/Charts/RadialChart.d.ts

@@ -0,0 +1,51 @@
+/**
+ * @fileoverview RadialChart component.
+ * @module components/Charts/RadialChart
+ * RadialChart & GaugeChart Components
+ * Trinity-styled radial bar and gauge charts
+ * @example
+ * ```tsx
+ *  import { RadialChart } from '@trinityui/design-system';
+ *
+ *  <RadialChart />
+ *  ```
+ */
+import React from 'react';
+import { RadialBarChartProps, GaugeChartProps } from './types';
+/**
+ * RadialBarChart - Trinity-styled radial/circular bar chart
+ *
+ * @example
+ * ```tsx
+ * <RadialBarChart
+ *   data={[
+ *     { name: 'Task A', value: 80 },
+ *     { name: 'Task B', value: 60 },
+ *     { name: 'Task C', value: 40 },
+ *   ]}
+ *   title="Progress Overview"
+ * />
+ * ```
+ */
+export declare const RadialBarChart: React.FC<RadialBarChartProps>;
+/**
+ * GaugeChart - Single-value gauge/meter chart
+ *
+ * @example
+ * ```tsx
+ * <GaugeChart
+ *   value={75}
+ *   max={100}
+ *   title="CPU Usage"
+ *   unit="%"
+ *   thresholds={[
+ *     { value: 50, color: '#24A148' },
+ *     { value: 80, color: '#F59E0B' },
+ *     { value: 100, color: '#DA1E28' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const GaugeChart: React.FC<GaugeChartProps>;
+export default RadialBarChart;
+//# sourceMappingURL=RadialChart.d.ts.map

package/dist/components/Charts/RadialChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadialChart.d.ts","sourceRoot":"","sources":["../../../src/components/Charts/RadialChart.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAevC,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAG/D;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA+IxD,CAAC;AAEF;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkKhD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/Charts/ScatterChart.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @fileoverview ScatterChart component.
+ * @module components/Charts/ScatterChart
+ * ScatterChart Component
+ * Trinity-styled scatter and bubble charts
+ * @example
+ * ```tsx
+ *  import { ScatterChart } from '@trinityui/design-system';
+ *
+ *  <ScatterChart />
+ *  ```
+ */
+import React from 'react';
+import { ScatterChartProps } from './types';
+/**
+ * ScatterChart - Trinity-styled scatter and bubble chart
+ *
+ * @example
+ * ```tsx
+ * // Simple scatter plot
+ * <ScatterChart
+ *   data={[
+ *     { x: 100, y: 200, name: 'A' },
+ *     { x: 120, y: 100, name: 'B' },
+ *   ]}
+ *   xAxis={{ label: 'X Value' }}
+ *   yAxis={{ label: 'Y Value' }}
+ *   title="Scatter Plot"
+ * />
+ *
+ * // Bubble chart with size (z axis)
+ * <ScatterChart
+ *   data={[
+ *     { x: 100, y: 200, z: 50, name: 'A' },
+ *     { x: 120, y: 100, z: 80, name: 'B' },
+ *   ]}
+ *   zAxis={{ range: [50, 400] }}
+ * />
+ *
+ * // Multiple series
+ * <ScatterChart
+ *   data={[
+ *     { name: 'Group A', data: [...], color: '#7841C9' },
+ *     { name: 'Group B', data: [...], color: '#FF6150' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const ScatterChart: React.FC<ScatterChartProps>;
+/**
+ * BubbleChart - Convenience wrapper for ScatterChart with z-axis
+ */
+export declare const BubbleChart: React.FC<ScatterChartProps>;
+export default ScatterChart;
+//# sourceMappingURL=ScatterChart.d.ts.map

package/dist/components/Charts/ScatterChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterChart.d.ts","sourceRoot":"","sources":["../../../src/components/Charts/ScatterChart.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAsB,MAAM,OAAO,CAAC;AA0B3C,OAAO,EAAE,iBAAiB,EAA6C,MAAM,SAAS,CAAC;AAmHvF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAmMpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAOnD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/Charts/Sparkline.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @fileoverview Sparkline component.
+ * @module components/Charts/Sparkline
+ * Sparkline Component
+ * Small, inline charts for dashboards and tables
+ * @example
+ * ```tsx
+ *  import { Sparkline } from '@trinityui/design-system';
+ *
+ *  <Sparkline />
+ *  ```
+ */
+import React from 'react';
+import { SparklineProps } from './types';
+/**
+ * Sparkline - Compact inline chart
+ *
+ * @example
+ * ```tsx
+ * // Simple line sparkline
+ * <Sparkline
+ *   data={[10, 20, 15, 30, 25, 40]}
+ *   width={100}
+ *   height={32}
+ * />
+ *
+ * // Bar sparkline with min/max highlighting
+ * <Sparkline
+ *   type="bar"
+ *   data={[10, 20, 15, 30, 25, 40]}
+ *   showMinMax
+ * />
+ *
+ * // Area sparkline with reference line
+ * <Sparkline
+ *   type="area"
+ *   data={[10, 20, 15, 30, 25, 40]}
+ *   referenceLine="average"
+ * />
+ * ```
+ */
+export declare const Sparkline: React.FC<SparklineProps>;
+export default Sparkline;
+//# sourceMappingURL=Sparkline.d.ts.map

package/dist/components/Charts/Sparkline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sparkline.d.ts","sourceRoot":"","sources":["../../../src/components/Charts/Sparkline.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAIH,OAAO,KAAkB,MAAM,OAAO,CAAC;AAkBvC,OAAO,EAAE,cAAc,EAAkB,MAAM,SAAS,CAAC;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAoP9C,CAAC;AAEF,eAAe,SAAS,CAAC"}

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

@@ -0,0 +1,48 @@
+/**
+ * Trinity Design System - Charts Component Library
+ *
+ * A comprehensive charting library built on Recharts with Trinity branding,
+ * accessibility support, and consistent styling.
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   LineChart,
+ *   BarChart,
+ *   PieChart,
+ *   chartColorsPrimary
+ * } from '@trinityui/design-system/components/Charts';
+ *
+ * // Basic line chart
+ * <LineChart
+ *   data={salesData}
+ *   series={[{ dataKey: 'revenue', name: 'Revenue' }]}
+ *   xAxis={{ dataKey: 'month' }}
+ *   title="Monthly Revenue"
+ * />
+ *
+ * // Bar chart with stacking
+ * <BarChart
+ *   data={data}
+ *   series={[
+ *     { dataKey: 'desktop', name: 'Desktop' },
+ *     { dataKey: 'mobile', name: 'Mobile' },
+ *   ]}
+ *   variant="stacked"
+ * />
+ * ```
+ */
+export { ChartWrapper } from './ChartWrapper';
+export { CustomTooltip, SimpleTooltip } from './CustomTooltip';
+export { CustomLegend, InteractiveLegend, PieLegend } from './CustomLegend';
+export { LineChart } from './LineChart';
+export { BarChart } from './BarChart';
+export { AreaChart } from './AreaChart';
+export { PieChart, DonutChart } from './PieChart';
+export { ScatterChart, BubbleChart } from './ScatterChart';
+export { RadialBarChart, GaugeChart } from './RadialChart';
+export { ComposedChart } from './ComposedChart';
+export { Sparkline } from './Sparkline';
+export { chartColorsPrimary, chartColorsCategorical, chartColorsSequential, chartColorsDiverging, chartColorsStatus, chartColorsStatusMap, chartTypography, chartSpacing, chartSizing, chartGridStyles, chartAxisStyles, chartTooltipStyles, chartLegendStyles, chartAnimation, chartTheme, getChartColor, getChartColors, } from './tokens';
+export type { DataPoint, NamedDataPoint, TimeSeriesDataPoint, MultiSeriesDataPoint, PieDataPoint, ScatterDataPoint, SeriesConfig, AxisConfig, LegendConfig, LegendPosition, LegendAlign, TooltipConfig, ReferenceLineConfig, ReferenceAreaConfig, BaseChartProps, LineChartProps, BarChartProps, BarChartLayout, BarChartVariant, AreaChartProps, PieChartProps, ScatterChartProps, ComposedChartProps, ComposedSeriesConfig, ComposedChartReferenceLineConfig, RadialBarChartProps, GaugeChartProps, SparklineProps, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Charts/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Charts/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AAGH,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG5E,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAEL,kBAAkB,EAClB,sBAAsB,EACtB,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,oBAAoB,EAGpB,eAAe,EAGf,YAAY,EACZ,WAAW,EAGX,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EAGjB,cAAc,EAGd,UAAU,EAGV,aAAa,EACb,cAAc,GACf,MAAM,UAAU,CAAC;AAGlB,YAAY,EAEV,SAAS,EACT,cAAc,EACd,mBAAmB,EACnB,oBAAoB,EACpB,YAAY,EACZ,gBAAgB,EAGhB,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,cAAc,EACd,WAAW,EACX,aAAa,EACb,mBAAmB,EACnB,mBAAmB,EAGnB,cAAc,EACd,cAAc,EACd,aAAa,EACb,cAAc,EACd,eAAe,EACf,cAAc,EACd,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,oBAAoB,EACpB,gCAAgC,EAChC,mBAAmB,EACnB,eAAe,EACf,cAAc,GACf,MAAM,SAAS,CAAC"}

package/dist/components/Charts/tokens.d.ts

@@ -0,0 +1,200 @@
+/**
+ * Chart Design Tokens
+ * Consistent styling for all Trinity chart components
+ */
+/**
+ * Primary chart color palette - Trinity brand colors
+ * Use for single-series or highlighted data
+ */
+export declare const chartColorsPrimary: string[];
+/**
+ * Categorical palette - for distinct categories
+ * Optimized for contrast and accessibility
+ */
+export declare const chartColorsCategorical: string[];
+export declare const chartColorsSequential: string[];
+/**
+ * Diverging palette - for data with a midpoint
+ * Coral to Purple through neutral
+ */
+export declare const chartColorsDiverging: string[];
+/**
+ * Status colors for charts (as object for semantic access)
+ */
+export declare const chartColorsStatusMap: {
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    neutral: string;
+};
+/**
+ * Status colors for charts (as array for iteration)
+ * Order: success, warning, error, info
+ */
+export declare const chartColorsStatus: string[];
+export declare const chartTypography: {
+    fontFamily: string;
+    title: {
+        fontSize: number;
+        fontWeight: number;
+        fill: string;
+    };
+    subtitle: {
+        fontSize: number;
+        fontWeight: number;
+        fill: string;
+    };
+    axisLabel: {
+        fontSize: number;
+        fontWeight: number;
+        fill: string;
+    };
+    axisTick: {
+        fontSize: number;
+        fontWeight: number;
+        fill: string;
+    };
+    legend: {
+        fontSize: number;
+        fontWeight: number;
+        fill: string;
+    };
+    tooltip: {
+        fontSize: number;
+        fontWeight: number;
+        fill: string;
+    };
+    tooltipLabel: {
+        fontSize: number;
+        fontWeight: number;
+        fill: string;
+    };
+    dataLabel: {
+        fontSize: number;
+        fontWeight: number;
+        fill: string;
+    };
+};
+export declare const chartSpacing: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+};
+export declare const chartSizing: {
+    minHeight: number;
+    defaultHeight: number;
+    maxHeight: number;
+    strokeWidth: {
+        thin: number;
+        default: number;
+        thick: number;
+    };
+    dotSize: {
+        small: number;
+        default: number;
+        large: number;
+    };
+    barRadius: number;
+    barMaxWidth: number;
+    innerRadiusRatio: number;
+    outerPadding: number;
+};
+export declare const chartGridStyles: {
+    stroke: string;
+    strokeDasharray: string;
+    strokeWidth: number;
+    light: {
+        stroke: string;
+        strokeOpacity: number;
+    };
+    dark: {
+        stroke: string;
+        strokeOpacity: number;
+    };
+};
+export declare const chartAxisStyles: {
+    stroke: string;
+    strokeWidth: number;
+    tickSize: number;
+    tickPadding: number;
+    tickFontSize: number;
+    labelFontSize: number;
+    light: {
+        lineColor: string;
+        lineOpacity: number;
+        tickColor: string;
+    };
+    dark: {
+        lineColor: string;
+        lineOpacity: number;
+        tickColor: string;
+    };
+};
+export declare const chartTooltipStyles: {
+    backgroundColor: string;
+    borderColor: string;
+    borderRadius: number;
+    boxShadow: string;
+    padding: string;
+};
+export declare const chartLegendStyles: {
+    iconSize: number;
+    iconType: "circle";
+    itemGap: number;
+    verticalAlign: "bottom";
+    align: "center";
+    wrapperStyle: {
+        paddingTop: number;
+    };
+};
+export declare const chartAnimation: {
+    duration: number;
+    easing: string;
+};
+export declare const chartAccessibility: {
+    minContrastRatio: number;
+    focusRing: {
+        color: string;
+        width: number;
+        offset: number;
+    };
+};
+export declare const chartTheme: {
+    light: {
+        background: string;
+        text: string;
+        textSecondary: string;
+        grid: string;
+        axis: string;
+        tooltip: {
+            background: string;
+            border: string;
+            text: string;
+        };
+    };
+    dark: {
+        background: string;
+        text: string;
+        textSecondary: string;
+        grid: string;
+        axis: string;
+        tooltip: {
+            background: string;
+            border: string;
+            text: string;
+        };
+    };
+};
+/**
+ * Get a color from the primary palette by index (wraps around)
+ */
+export declare const getChartColor: (index: number) => string;
+/**
+ * Get multiple colors for a given number of series
+ */
+export declare const getChartColors: (count: number) => string[];
+//# sourceMappingURL=tokens.d.ts.map

package/dist/components/Charts/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Charts/tokens.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAWH;;;GAGG;AACH,eAAO,MAAM,kBAAkB,UAW9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,sBAAsB,UAWlC,CAAC;AAOF,eAAO,MAAM,qBAAqB,UAWjC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,oBAAoB,UAQhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;;CAMhC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,UAK7B,CAAC;AAMF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0C3B,CAAC;AAMF,eAAO,MAAM,YAAY;;;;;;;CAOxB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;CA2BvB,CAAC;AAMF,eAAO,MAAM,eAAe;;;;;;;;;;;;CAc3B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;CAmB3B,CAAC;AAMF,eAAO,MAAM,kBAAkB;;;;;;CAM9B,CAAC;AAMF,eAAO,MAAM,iBAAiB;;;;;;;;;CAS7B,CAAC;AAMF,eAAO,MAAM,cAAc;;;CAG1B,CAAC;AAMF,eAAO,MAAM,kBAAkB;;;;;;;CAS9B,CAAC;AAMF,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;CAyBtB,CAAC;AAMF;;GAEG;AACH,eAAO,MAAM,aAAa,GAAI,OAAO,MAAM,KAAG,MAE7C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MAAM,EAEpD,CAAC"}