@engrate/components 0.1.3 → 0.1.5

package/dist/components/ui/BarChart/BarChart.d.ts

@@ -0,0 +1,65 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const barChartVariants: (props?: ({
+    size?: "sm" | "default" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** A single data point for the bar chart */
+interface BarChartDataPoint {
+    /** Label for the x-axis (e.g., date, category) */
+    label: string;
+    /** Numeric values for each series */
+    [key: string]: string | number;
+}
+/** Configuration for a bar chart data series */
+interface BarChartSeriesConfig {
+    /** Key in the data object for this series */
+    key: string;
+    /** Display name for the legend */
+    name: string;
+    /** Bar color (defaults to sunflower for first series) */
+    color?: string;
+}
+interface BarChartProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof barChartVariants> {
+    /** Data points to render */
+    data: BarChartDataPoint[];
+    /** Configuration for data series. If not provided, all numeric keys except 'label' will be rendered */
+    series?: BarChartSeriesConfig[];
+    /** Show grid lines */
+    showGrid?: boolean;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Show tooltips on hover */
+    showTooltip?: boolean;
+    /** X-axis label */
+    xAxisLabel?: string;
+    /** Y-axis label */
+    yAxisLabel?: string;
+    /** Bar corner radius */
+    radius?: number;
+    /** Stack bars on top of each other */
+    stacked?: boolean;
+    /** Layout orientation */
+    layout?: 'horizontal' | 'vertical';
+}
+/**
+ * BarChart component for displaying categorical data comparisons.
+ * Built with Recharts and styled according to Engrate design system.
+ *
+ * @example
+ * ```tsx
+ * <BarChart
+ *   data={[
+ *     { label: 'Jan', revenue: 4000, expenses: 2400 },
+ *     { label: 'Feb', revenue: 3000, expenses: 1398 },
+ *     { label: 'Mar', revenue: 2000, expenses: 9800 },
+ *   ]}
+ *   series={[
+ *     { key: 'revenue', name: 'Revenue' },
+ *     { key: 'expenses', name: 'Expenses', color: '#0080FF' },
+ *   ]}
+ *   aria-label="Revenue vs expenses comparison"
+ * />
+ * ```
+ */
+declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
+export { BarChart, barChartVariants, type BarChartProps, type BarChartDataPoint, type BarChartSeriesConfig, };

package/dist/components/ui/BarChart/index.d.ts

@@ -0,0 +1 @@
+export { BarChart, barChartVariants, type BarChartProps, type BarChartDataPoint, type BarChartSeriesConfig, } from './BarChart';

package/dist/components/ui/Card/Card.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 declare const cardVariants: (props?: ({
     variant?: "ghost" | "default" | "elevated" | null | undefined;
     padding?: "sm" | "default" | "lg" | "none" | null | undefined;
-    bg?: "contrast" | "main" | "sunflower" | "lemon-meringue" | "vanilla" | "eggshell" | "warm-purple" | "cool-purple" | "electric-blue" | "deep-blue" | "error" | "card" | "alt" | "transparent" | "sunflower-hover" | null | undefined;
+    bg?: "contrast" | "main" | "sunflower" | "lemon-meringue" | "vanilla" | "eggshell" | "warm-purple" | "cool-purple" | "electric-blue" | "deep-blue" | "error" | "transparent" | "card" | "alt" | "sunflower-hover" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
     /** Render as a child component */

package/dist/components/ui/DatePicker/DatePicker.d.ts

@@ -4,7 +4,7 @@ declare const datePickerTriggerVariants: (props?: ({
     variant?: "default" | "error" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const calendarDayVariants: (props?: ({
-    state?: "default" | "disabled" | "selected" | "today" | "outside" | null | undefined;
+    state?: "default" | "disabled" | "outside" | "selected" | "today" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface DatePickerProps extends VariantProps<typeof datePickerTriggerVariants> {
     /** The currently selected date */

package/dist/components/ui/DateTimePicker/DateTimePicker.d.ts

@@ -4,7 +4,7 @@ declare const dateTimePickerTriggerVariants: (props?: ({
     variant?: "default" | "error" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const calendarDayVariants: (props?: ({
-    state?: "default" | "disabled" | "selected" | "today" | "outside" | null | undefined;
+    state?: "default" | "disabled" | "outside" | "selected" | "today" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 interface DateTimePickerProps extends VariantProps<typeof dateTimePickerTriggerVariants> {
     /** The currently selected date and time */

package/dist/components/ui/Grid/Grid.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 declare const gridVariants: (props?: ({
-    cols?: 1 | 2 | 3 | 4 | 5 | 6 | 12 | null | undefined;
+    cols?: 1 | 2 | 3 | 4 | 5 | 12 | 6 | null | undefined;
     gap?: "sm" | "lg" | "none" | "md" | "xl" | "xs" | "2xl" | null | undefined;
     align?: "end" | "start" | "center" | "stretch" | "baseline" | null | undefined;
     justify?: "end" | "start" | "center" | "stretch" | null | undefined;
@@ -53,9 +53,9 @@ interface GridProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'cols'> {
  */
 declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
 declare const gridItemVariants: (props?: ({
-    colSpan?: 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | 10 | "full" | 7 | 8 | 9 | null | undefined;
+    colSpan?: 1 | 2 | 3 | 4 | 5 | 12 | 10 | 6 | 11 | "full" | 7 | 8 | 9 | null | undefined;
     rowSpan?: 1 | 2 | 3 | 4 | 5 | 6 | "full" | null | undefined;
-    colStart?: 1 | "auto" | 2 | 3 | 4 | 5 | 6 | 11 | 12 | 10 | 7 | 8 | 9 | null | undefined;
+    colStart?: 1 | "auto" | 2 | 3 | 4 | 5 | 12 | 10 | 6 | 11 | 7 | 8 | 9 | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type ColSpanValue = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'full';
 type RowSpanValue = 1 | 2 | 3 | 4 | 5 | 6 | 'full';

package/dist/components/ui/LineChart/LineChart.d.ts

@@ -0,0 +1,65 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const lineChartVariants: (props?: ({
+    size?: "sm" | "default" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** A single data point for the chart */
+interface DataPoint {
+    /** Label for the x-axis (e.g., date, category) */
+    label: string;
+    /** Numeric values for each series */
+    [key: string]: string | number;
+}
+/** Configuration for a data series */
+interface SeriesConfig {
+    /** Key in the data object for this series */
+    key: string;
+    /** Display name for the legend */
+    name: string;
+    /** Line color (defaults to sunflower for first series) */
+    color?: string;
+}
+interface LineChartProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof lineChartVariants> {
+    /** Data points to render */
+    data: DataPoint[];
+    /** Configuration for data series. If not provided, all numeric keys except 'label' will be rendered */
+    series?: SeriesConfig[];
+    /** Show grid lines */
+    showGrid?: boolean;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Show tooltips on hover */
+    showTooltip?: boolean;
+    /** X-axis label */
+    xAxisLabel?: string;
+    /** Y-axis label */
+    yAxisLabel?: string;
+    /** Custom stroke width for lines */
+    strokeWidth?: number;
+    /** Enable curve interpolation */
+    curved?: boolean;
+    /** Show dots on data points */
+    showDots?: boolean;
+}
+/**
+ * LineChart component for displaying data trends over time.
+ * Built with Recharts and styled according to Engrate design system.
+ *
+ * @example
+ * ```tsx
+ * <LineChart
+ *   data={[
+ *     { label: 'Jan', revenue: 4000, expenses: 2400 },
+ *     { label: 'Feb', revenue: 3000, expenses: 1398 },
+ *     { label: 'Mar', revenue: 2000, expenses: 9800 },
+ *   ]}
+ *   series={[
+ *     { key: 'revenue', name: 'Revenue' },
+ *     { key: 'expenses', name: 'Expenses', color: '#0080FF' },
+ *   ]}
+ *   aria-label="Revenue vs expenses over time"
+ * />
+ * ```
+ */
+declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<HTMLDivElement>>;
+export { LineChart, lineChartVariants, type LineChartProps, type DataPoint, type SeriesConfig, };

package/dist/components/ui/LineChart/index.d.ts

@@ -0,0 +1 @@
+export { LineChart, lineChartVariants, type LineChartProps, type DataPoint, type SeriesConfig, } from './LineChart';

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

@@ -0,0 +1,61 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const pieChartVariants: (props?: ({
+    size?: "sm" | "default" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** A single data point for the pie chart */
+interface PieChartDataPoint {
+    /** Label for the segment */
+    name: string;
+    /** Numeric value for the segment */
+    value: number;
+    /** Optional color for the segment */
+    color?: string;
+}
+interface PieChartProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof pieChartVariants> {
+    /** Data points to render */
+    data: PieChartDataPoint[];
+    /** Show legend */
+    showLegend?: boolean;
+    /** Show tooltips on hover */
+    showTooltip?: boolean;
+    /** Inner radius for donut chart (0 = pie, > 0 = donut) */
+    innerRadius?: number;
+    /** Outer radius as percentage of container */
+    outerRadius?: number | string;
+    /** Padding angle between segments */
+    paddingAngle?: number;
+    /** Show percentage labels on segments */
+    showLabels?: boolean;
+    /** Start angle in degrees (0 = 3 o'clock, 90 = 12 o'clock) */
+    startAngle?: number;
+    /** End angle in degrees */
+    endAngle?: number;
+}
+/**
+ * PieChart component for displaying proportional data.
+ * Built with Recharts and styled according to Engrate design system.
+ *
+ * @example
+ * ```tsx
+ * <PieChart
+ *   data={[
+ *     { name: 'Desktop', value: 400 },
+ *     { name: 'Mobile', value: 300 },
+ *     { name: 'Tablet', value: 200 },
+ *   ]}
+ *   aria-label="Traffic by device type"
+ * />
+ * ```
+ *
+ * @example Donut chart
+ * ```tsx
+ * <PieChart
+ *   data={data}
+ *   innerRadius={60}
+ *   aria-label="Revenue distribution"
+ * />
+ * ```
+ */
+declare const PieChart: React.ForwardRefExoticComponent<PieChartProps & React.RefAttributes<HTMLDivElement>>;
+export { PieChart, pieChartVariants, type PieChartProps, type PieChartDataPoint, };

package/dist/components/ui/PieChart/index.d.ts

@@ -0,0 +1 @@
+export { PieChart, pieChartVariants, type PieChartProps, type PieChartDataPoint, } from './PieChart';

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

@@ -1,5 +1,6 @@
 export * from './AlertDialog';
 export * from './Badge';
+export * from './BarChart';
 export * from './Breadcrumbs';
 export * from './Button';
 export * from './Card';
@@ -16,8 +17,10 @@ export * from './Grid';
 export * from './Heading';
 export * from './Input';
 export * from './Label';
+export * from './LineChart';
 export * from './Link';
 export * from './Modal';
+export * from './PieChart';
 export * from './ProgressIndicator';
 export * from './Radio';
 export * from './Select';