@northslopetech/altitude-ui 2.0.14 → 2.0.17

package/dist/index.d.mts

@@ -1,12 +1,16 @@
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
-import { JSX } from 'react';
+import { JSX, ReactNode } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Table as Table$1 } from '@tanstack/react-table';
 
+/**
+ * Button variant styles.
+ */
 declare const buttonVariants: (props?: ({
     variant?: "default" | "outline" | "destructive" | "destructive-subtle" | "ghost" | "link" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | null | undefined;
@@ -16,22 +20,47 @@ interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, Var
     icon?: React.ReactNode;
     iconPosition?: "left" | "right";
 }
+/**
+ * Button component with multiple variants and sizes.
+ * @param {boolean} [props.asChild] - Render as child element (using Radix Slot)
+ * @param {React.ReactNode} [props.icon] - Icon element to display
+ * @param {"left" | "right"} [props.iconPosition] - Position of icon relative to text
+ * @param {string} [props.variant] - Visual style variant
+ * @param {string} [props.size] - Button size
+ */
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * Typography variant styles using design system tokens.
+ */
 declare const typographyVariants: (props?: ({
     variant?: "display-xl" | "display-lg" | "display-md" | "display-sm" | "display-xs" | "heading-xl" | "heading-lg" | "heading-md" | "heading-sm" | "heading-xs" | "body-xl" | "body-lg" | "body-md" | "body-sm" | "body-xs" | "label-xl" | "label-xl-bold" | "label-lg" | "label-lg-bold" | "label-md" | "label-md-bold" | "label-sm" | "label-sm-bold" | "label-xs" | "label-xs-bold" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
     as?: React.ElementType;
 }
+/**
+ * Typography component for rendering text with design system styles.
+ * @param {React.ElementType} [props.as] - Custom HTML element to render
+ * @param {string} [props.variant] - Typography variant from design tokens
+ */
 declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
 
+/**
+ * Select trigger variant styles.
+ */
 declare const selectTriggerVariants: (props?: ({
     width?: "default" | "compact" | "fill" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Select content variant styles.
+ */
 declare const selectContentVariants: (props?: ({
     position?: "popper" | "item-aligned" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Select root component.
+ */
 declare const Select: React.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
@@ -40,6 +69,12 @@ interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof Selec
     children?: React.ReactNode;
     width?: "default" | "fill" | "compact";
 }
+/**
+ * Select trigger button component.
+ * @param {string} [props.width] - Width variant (default, fill, or compact)
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {React.ReactNode} [props.children] - Trigger content
+ */
 declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -50,6 +85,10 @@ declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.
 declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * @fileoverview FormField component for Altitude UI.
+ */
+
 interface FormFieldProps {
     label?: string;
     helperText?: string;
@@ -60,8 +99,21 @@ interface FormFieldProps {
     id?: string;
     compact?: boolean;
 }
+/**
+ * FormField wrapper component for consistent form input styling.
+ * @param {string} [props.label] - Field label text
+ * @param {string} [props.helperText] - Helper or error message text
+ * @param {boolean} [props.error] - Whether field has an error
+ * @param {boolean} [props.required] - Whether field is required
+ * @param {React.ReactNode} props.children - Form input element
+ * @param {boolean} [props.compact] - Use compact layout with floating label
+ */
 declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * @fileoverview DatePicker component for Altitude UI.
+ */
+
 interface DatePickerProps {
     value?: Date;
     onValueChange?: (date: Date | undefined) => void;
@@ -72,8 +124,21 @@ interface DatePickerProps {
     minDate?: Date;
     maxDate?: Date;
 }
+/**
+ * DatePicker component with input field and calendar popover.
+ * @param {Date} [props.value] - Controlled date value
+ * @param {function} [props.onValueChange] - Callback when date changes
+ * @param {Date | string | number} [props.defaultValue] - Default date value
+ * @param {boolean} [props.disabled] - Whether picker is disabled
+ * @param {string} [props.placeholder] - Input placeholder text
+ * @param {Date} [props.minDate] - Minimum selectable date
+ * @param {Date} [props.maxDate] - Maximum selectable date
+ */
 declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
 
+/**
+ * Upload variant styles for different states.
+ */
 declare const uploadVariants: (props?: ({
     state?: "default" | "error" | "dragOver" | "uploading" | "success" | null | undefined;
     disabled?: boolean | null | undefined;
@@ -88,14 +153,38 @@ interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onErro
     selectedFiles?: File[];
     maxFileSize?: number;
 }
+/**
+ * Upload component with drag-and-drop functionality.
+ * @param {function} [props.onFileSelect] - Callback when files are selected
+ * @param {string[]} [props.acceptedFileTypes] - Accepted MIME types
+ * @param {boolean} [props.disabled] - Whether upload is disabled
+ * @param {string} [props.state] - Current upload state
+ * @param {number} [props.progress] - Upload progress percentage (0-100)
+ * @param {string} [props.errorMessage] - Error message to display
+ * @param {File[]} [props.selectedFiles] - Currently selected files
+ * @param {number} [props.maxFileSize] - Maximum file size in bytes
+ */
 declare const Upload: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Checkbox variant styles.
+ */
 declare const checkboxVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
 interface CheckboxProps extends React.ComponentProps<typeof CheckboxPrimitive.Root> {
     className?: string;
 }
+/**
+ * Checkbox component with Altitude design system styling.
+ * @param {boolean} [props.checked] - Controlled checked state
+ * @param {function} [props.onCheckedChange] - Callback when checked state changes
+ * @param {boolean} [props.disabled] - Whether checkbox is disabled
+ * @param {string} [props.className] - Additional CSS classes
+ */
 declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 
+/**
+ * Input variant styles.
+ */
 declare const inputVariants: (props?: ({
     variant?: "textarea" | "input" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -105,13 +194,25 @@ interface BaseInputProps extends VariantProps<typeof inputVariants> {
     onClear?: () => void;
     showClear?: boolean;
 }
+/**
+ * Props for standard text input variant.
+ */
 interface InputFieldProps extends BaseInputProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, "style"> {
     variant?: "input";
 }
+/**
+ * Props for textarea variant.
+ */
 interface TextareaFieldProps extends BaseInputProps, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "style"> {
     variant: "textarea";
 }
+/**
+ * Union type of input and textarea props.
+ */
 type InputProps = InputFieldProps | TextareaFieldProps;
+/**
+ * Input component function overloads.
+ */
 interface InputComponent {
     (props: InputFieldProps & {
         ref?: React.Ref<HTMLInputElement>;
@@ -122,13 +223,23 @@ interface InputComponent {
 }
 declare const TypedInput: InputComponent;
 
+/**
+ * Badge variant styles.
+ */
 declare const badgeVariants: (props?: ({
     variant?: "error" | "warning" | "success" | "primary" | "secondary" | "accent" | "neutral" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
 }
+/**
+ * Badge component for status and informational labels.
+ * @param {string} [props.variant] - Badge color variant
+ */
 declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
 
+/**
+ * Tabs trigger variant styles.
+ */
 declare const tabsVariants: (props?: ({
     variant?: "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -137,6 +248,12 @@ interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
     onValueChange: (value: string) => void;
     variant?: "default";
 }
+/**
+ * Tabs root component.
+ * @param {string} props.value - Currently active tab value
+ * @param {function} props.onValueChange - Callback when active tab changes
+ * @param {string} [props.variant] - Visual variant
+ */
 declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
 interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
@@ -151,10 +268,17 @@ interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
 
+/**
+ * DropdownMenu root component.
+ */
 declare const DropdownMenu: React.FC<DropdownMenuPrimitive.DropdownMenuProps>;
 interface DropdownMenuTriggerProps extends React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger> {
     icon?: React.ReactNode;
 }
+/**
+ * DropdownMenuTrigger component.
+ * @param {React.ReactNode} [props.icon] - Custom icon element
+ */
 declare const DropdownMenuTrigger: React.ForwardRefExoticComponent<DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
 declare const DropdownMenuPortal: React.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
@@ -179,15 +303,37 @@ declare const DropdownMenuShortcut: {
     displayName: string;
 };
 
+/**
+ * @fileoverview Icon components for Altitude UI.
+ */
+
+/**
+ * Icon color variant type.
+ */
 type IconVariant = "dark" | "light" | "gray" | "error" | "warning";
 interface IconProps extends React.SVGProps<SVGSVGElement> {
     className?: string;
     variant?: IconVariant;
 }
+/**
+ * X (close) icon component.
+ */
 declare const X: React.FC<IconProps>;
+/**
+ * Lock icon component.
+ */
 declare const Lock: React.FC<IconProps>;
+/**
+ * Check icon component (circle with checkmark).
+ */
 declare const Check: React.FC<IconProps>;
+/**
+ * ChevronDown icon component (downward pointing chevron).
+ */
 declare const ChevronDown: React.FC<IconProps>;
+/**
+ * ChevronUp icon component (upward pointing chevron).
+ */
 declare const ChevronUp: React.FC<IconProps>;
 declare const Calendar: React.FC<IconProps>;
 declare const ChevronLeft: React.FC<IconProps>;
@@ -236,7 +382,7 @@ declare const QuestionCircle: React.FC<IconProps>;
 declare const Share: React.FC<IconProps>;
 declare const Star: React.FC<IconProps>;
 declare const Statement: React.FC<IconProps>;
-declare const Table: React.FC<IconProps>;
+declare const TableIcon: React.FC<IconProps>;
 declare const Trash: React.FC<IconProps>;
 declare const User: React.FC<IconProps>;
 declare const UserMulti: React.FC<IconProps>;
@@ -244,4 +390,513 @@ declare const Warning: React.FC<IconProps>;
 declare const Wrench: React.FC<IconProps>;
 declare const Logout: React.FC<IconProps>;
 
-export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Badge, type BadgeProps, Bell, Bookmark, Button, type ButtonProps, Calendar, CaretDown, CaretLeft, CaretRight, CaretUp, Chat, Check, CheckIcon, Checkbox, type CheckboxProps, CheckmarkCircle, CheckmarkSquare, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Close, CloseSmall, Cog, Credentials, DatePicker, type DatePickerProps, Doc, Dollar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownMenuTriggerProps, Edit, Envelope, Exclamation, EyeClosed, EyeOpen, Filter, FilterDescending, FormField, type FormFieldProps, GraphBar, GraphDonut, GraphLine, GraphPie, HamburgerMenu, Home, type IconProps, type IconVariant, Information, TypedInput as Input, type InputFieldProps, type InputProps, Location, Lock, Logout, MagnifyingGlass, Minus, MoreMenu, Phone, Plus, QuestionCircle, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Share, Star, Statement, Table, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, type TextareaFieldProps, Trash, Typography, type TypographyProps, Upload, type UploadProps, User, UserMulti, Warning, Wrench, X, badgeVariants, buttonVariants, checkboxVariants, inputVariants, selectTriggerVariants, tabsVariants, typographyVariants, uploadVariants };
+/**
+ * @fileoverview Chart utilities for Altitude UI chart components.
+ * Provides color palettes, constants, and helper functions for data visualization.
+ *
+ * All colors reference CSS variables from altitude-tokens for consistent theming.
+ *
+ */
+/**
+ * Chart color scheme mapping keys to color values.
+ * Used for creating consistent color schemes across different chart types.
+ */
+interface ChartColorScheme {
+    [key: string]: string;
+}
+/**
+ * Legend item structure for chart legends.
+ *
+ * @interface LegendItem
+ * @property {string} key - Unique identifier for the legend item
+ * @property {string} color - Color value (hex or CSS variable)
+ * @property {string} [label] - Optional display label (defaults to key if not provided)
+ */
+interface LegendItem {
+    key: string;
+    color: string;
+    label?: string;
+}
+/**
+ * Chart color constants using CSS variables from altitude-tokens.
+ * Provides semantic color names and palette arrays for different chart types.
+ *
+ * @constant CHART_COLORS
+ */
+declare const CHART_COLORS: {
+    readonly SUCCESS: "var(--color-success)";
+    readonly ERROR: "var(--color-error)";
+    readonly WARNING: "var(--color-warning)";
+    readonly SECONDARY: "var(--color-secondary)";
+    readonly PRIMARY: "var(--color-primary)";
+    readonly CATEGORICAL: readonly ["var(--color-chart-color-palette-categorical-1)", "var(--color-chart-color-palette-categorical-2)", "var(--color-chart-color-palette-categorical-3)", "var(--color-chart-color-palette-categorical-4)", "var(--color-chart-color-palette-categorical-5)"];
+    readonly PERFORMANCE: readonly ["var(--color-chart-color-palette-performance-1)", "var(--color-chart-color-palette-performance-2)", "var(--color-chart-color-palette-performance-3)", "var(--color-chart-color-palette-performance-4)", "var(--color-chart-color-palette-performance-5)"];
+    readonly HEATMAP: readonly ["var(--color-chart-color-palette-heatmap-1)", "var(--color-chart-color-palette-heatmap-2)", "var(--color-chart-color-palette-heatmap-3)", "var(--color-chart-color-palette-heatmap-4)", "var(--color-chart-color-palette-heatmap-5)"];
+};
+/**
+ * Pre-defined color schemes for common chart scenarios.
+ * Provides consistent color mappings for frequently used chart types.
+ *
+ * @constant COLOR_SCHEMES
+ */
+declare const COLOR_SCHEMES: {
+    readonly passFail: {
+        readonly PASS: "var(--color-success)";
+        readonly FAIL: "var(--color-error)";
+    };
+    readonly targetVsAchieved: {
+        readonly TARGET: "var(--color-secondary)";
+        readonly ACHIEVED: "var(--color-success)";
+    };
+    readonly performance: {
+        readonly HIGH: "var(--color-chart-color-palette-performance-1)";
+        readonly MEDIUM_HIGH: "var(--color-chart-color-palette-performance-2)";
+        readonly MEDIUM: "var(--color-chart-color-palette-performance-3)";
+        readonly MEDIUM_LOW: "var(--color-chart-color-palette-performance-4)";
+        readonly LOW: "var(--color-chart-color-palette-performance-5)";
+    };
+};
+/**
+ * Chart dimensions and layout constants for consistent sizing.
+ * Defines standard heights, margins, and axis dimensions.
+ *
+ * @constant CHART_CONSTANTS
+ */
+declare const CHART_CONSTANTS: {
+    readonly STANDARD_HEIGHT: 400;
+    readonly LARGE_HEIGHT: 500;
+    readonly SMALL_HEIGHT: 300;
+    readonly MARGIN: {
+        readonly top: 20;
+        readonly right: 30;
+        readonly left: 20;
+        readonly bottom: 5;
+    };
+    readonly AXIS_HEIGHT_STANDARD: 30;
+    readonly AXIS_HEIGHT_ROTATED: 60;
+    readonly AXIS_WIDTH_STANDARD: 60;
+    readonly AXIS_WIDTH_YAXIS: 80;
+    readonly PIE_CHART_CENTER_X: 300;
+    readonly PIE_CHART_CENTER_Y: 200;
+};
+/**
+ * Gets a color from the categorical palette by index.
+ * Wraps around if index exceeds palette length.
+ *
+ * @param index - Index of the color to retrieve
+ * @returns CSS color value (CSS variable reference)
+ *
+ * @example
+ * ```typescript
+ * const color1 = getSeriesColor(0); // First categorical color
+ * const color2 = getSeriesColor(1); // Second categorical color
+ * const color6 = getSeriesColor(5); // Wraps to first color
+ * ```
+ */
+declare const getSeriesColor: (index: number) => string;
+/**
+ * Gets a color from the performance palette by index.
+ * Performance colors go from high (green) to low (red).
+ *
+ * @param index - Index of the color to retrieve (0 = high performance, 4 = low performance)
+ * @returns CSS color value (CSS variable reference)
+ *
+ * @example
+ * ```typescript
+ * const highColor = getPerformanceColor(0); // Green
+ * const midColor = getPerformanceColor(2);  // Yellow
+ * const lowColor = getPerformanceColor(4);  // Red
+ * ```
+ */
+declare const getPerformanceColor: (index: number) => string;
+/**
+ * Gets a color from the heatmap palette by index.
+ * Heatmap colors go from light to dark for intensity visualization.
+ *
+ * @param index - Index of the color to retrieve (0 = lightest, 4 = darkest)
+ * @returns CSS color value (CSS variable reference)
+ *
+ * @example
+ * ```typescript
+ * const lightColor = getHeatmapColor(0);  // Lightest
+ * const darkColor = getHeatmapColor(4);   // Darkest
+ * ```
+ */
+declare const getHeatmapColor: (index: number) => string;
+/**
+ * Creates an array of legend items from a color scheme object.
+ *
+ * @param colorScheme - Object mapping keys to color values
+ * @returns Array of legend items with key, color, and label
+ *
+ * @example
+ * ```typescript
+ * const scheme = { PASS: '#00ff00', FAIL: '#ff0000' };
+ * const items = createLegendItems(scheme);
+ * // Returns: [
+ * //   { key: 'PASS', color: '#00ff00', label: 'PASS' },
+ * //   { key: 'FAIL', color: '#ff0000', label: 'FAIL' }
+ * // ]
+ * ```
+ */
+declare const createLegendItems: (colorScheme: ChartColorScheme) => LegendItem[];
+/**
+ * Calculates appropriate Y-axis width based on the maximum value length in the data.
+ * Ensures labels don't get cut off for large numbers or long text.
+ *
+ * @param data - Array of data objects
+ * @param yAxisKey - Key name for the Y-axis value in data objects
+ * @returns Calculated width in pixels
+ *
+ * @example
+ * ```typescript
+ * const data = [{ value: 1000000 }, { value: 2000000 }];
+ * const width = calculateYAxisWidth(data, 'value'); // Returns ~80px
+ * ```
+ */
+declare const calculateYAxisWidth: (data: unknown[], yAxisKey: string) => number;
+/**
+ * Formats a decimal value as a percentage string.
+ *
+ * @param value - Decimal value (e.g., 0.456 for 45.6%)
+ * @param decimals - Number of decimal places (default: 1)
+ * @returns Formatted percentage string
+ *
+ * @example
+ * ```typescript
+ * formatPercentage(0.456);     // "45.6%"
+ * formatPercentage(0.456, 2);  // "45.60%"
+ * formatPercentage(0.5, 0);    // "50%"
+ * ```
+ */
+declare const formatPercentage: (value: number, decimals?: number) => string;
+/**
+ * Formats large numbers with K (thousands) or M (millions) suffixes.
+ *
+ * @param value - Number to format
+ * @returns Formatted string with suffix
+ *
+ * @example
+ * ```typescript
+ * formatLargeNumber(500);        // "500"
+ * formatLargeNumber(1500);       // "1.5K"
+ * formatLargeNumber(1500000);    // "1.5M"
+ * formatLargeNumber(2345678);    // "2.3M"
+ * ```
+ */
+declare const formatLargeNumber: (value: number) => string;
+
+interface ChartLegendProps {
+    items: LegendItem[];
+    x?: number;
+    y?: number;
+    className?: string;
+}
+/**
+ * ChartLegend component for displaying chart series in a legend.
+ * @param {LegendItem[]} props.items - Array of legend items with key, color, and label
+ * @param {number} [props.x] - X position
+ * @param {number} [props.y] - Y position
+ * @param {string} [props.className] - Additional CSS classes
+ */
+declare function ChartLegend({ items, x, y, className, }: ChartLegendProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Label props from Recharts.
+ * @internal
+ */
+interface LabelProps {
+    viewBox?: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+}
+/**
+ * Tick props from Recharts.
+ * @internal
+ */
+interface TickProps {
+    x: number;
+    y: number;
+    payload: {
+        value: string | number;
+    };
+}
+/**
+ * Creates a custom X-axis label component.
+ *
+ * @param text - Label text to display
+ * @param yOffset - Vertical offset from axis (default: 40)
+ * @returns React component for X-axis label
+ */
+declare const createCustomXAxisLabel: (text: string, yOffset?: number) => {
+    ({ viewBox }: LabelProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+/**
+ * Creates a custom Y-axis label component.
+ *
+ * @param text - Label text to display
+ * @param leftMargin - Left margin offset
+ * @returns React component for Y-axis label
+ */
+declare const createCustomYAxisLabel: (text: string, leftMargin?: number) => {
+    ({ viewBox }: LabelProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+/**
+ * Creates a custom Y-axis label component for right-side axis.
+ *
+ * @param text - Label text to display
+ * @returns React component for right Y-axis label
+ */
+declare const createCustomYAxisRightLabel: (text: string) => {
+    ({ viewBox }: LabelProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+/**
+ * Custom X-axis tick component
+ */
+declare const customXAxisTick: (props: TickProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Custom X-axis tick component with rotated text
+ */
+declare const customXAxisTickRotated: (props: TickProps) => react_jsx_runtime.JSX.Element;
+/**
+ * Custom Y-axis tick component
+ */
+declare const customYAxisTick: (props: TickProps) => react_jsx_runtime.JSX.Element;
+
+interface TooltipContainerProps {
+    children: ReactNode;
+    className?: string;
+}
+/**
+ * TooltipContainer component for wrapping tooltip content.
+ * @param {ReactNode} props.children - Tooltip content
+ * @param {string} [props.className] - Additional CSS classes
+ */
+declare function TooltipContainer({ children, className, }: TooltipContainerProps): react_jsx_runtime.JSX.Element;
+/**
+ * TooltipItem component props.
+ *
+ * @interface TooltipItemProps
+ * @property {string} color - Color indicator for the data series
+ * @property {string} label - Label text
+ * @property {string | number} value - Value to display
+ * @property {string} [className] - Additional CSS classes
+ */
+interface TooltipItemProps {
+    color: string;
+    label: string;
+    value: string | number;
+    className?: string;
+}
+/**
+ * TooltipItem component for displaying a single data point in a tooltip.
+ * Shows color indicator, label, and value.
+ */
+declare function TooltipItem({ color, label, value, className, }: TooltipItemProps): react_jsx_runtime.JSX.Element;
+/**
+ * GenericTooltip component props.
+ *
+ * @interface GenericTooltipProps
+ * @property {string} [title] - Tooltip title
+ * @property {Array} items - Array of tooltip items with color, label, and value
+ * @property {string} [className] - Additional CSS classes
+ */
+interface GenericTooltipProps {
+    title?: string;
+    items: Array<{
+        color: string;
+        label: string;
+        value: string | number;
+    }>;
+    className?: string;
+}
+/**
+ * GenericTooltip component for displaying multiple data points.
+ * Used as the default tooltip for all chart components.
+ */
+declare function GenericTooltip({ title, items, className, }: GenericTooltipProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * BarChart data item structure.
+ * Can contain any string or number properties.
+ */
+interface BarChartData {
+    [key: string]: string | number;
+}
+/**
+ * BarChart component props.
+ *
+ * @interface BarChartProps
+ * @property {BarChartData[]} data - Array of data items
+ * @property {string} xAxisKey - Key for X-axis values from data
+ * @property {string} yAxisKey - Key for Y-axis values from data
+ * @property {string} title - Chart title
+ * @property {string} [xAxisLabel] - X-axis label
+ * @property {string} [yAxisLabel] - Y-axis label
+ * @property {string} [barColor] - Bar color (default: primary color)
+ * @property {function} [onDataPointClick] - Click handler for bars
+ * @property {string} [className] - Additional CSS classes
+ * @property {boolean} [rotateXAxisLabels] - Whether to rotate X-axis labels
+ * @property {boolean} [showLegend] - Whether to show legend
+ * @property {LegendItem[]} [legendItems] - Custom legend items
+ * @property {"vertical" | "horizontal"} [layout] - Chart layout orientation
+ * @property {"category" | "number"} [xAxisType] - X-axis type
+ * @property {"category" | "number"} [yAxisType] - Y-axis type
+ * @property {string} [barDataKey] - Custom bar data key
+ */
+interface BarChartProps {
+    data: BarChartData[];
+    xAxisKey: string;
+    yAxisKey: string;
+    title: string;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    barColor?: string;
+    onDataPointClick?: (data: BarChartData) => void;
+    className?: string;
+    rotateXAxisLabels?: boolean;
+    showLegend?: boolean;
+    legendItems?: LegendItem[];
+    layout?: "vertical" | "horizontal";
+    xAxisType?: "category" | "number";
+    yAxisType?: "category" | "number";
+    barDataKey?: string;
+}
+/**
+ * BarChart component for visualizing data as vertical or horizontal bars.
+ * @param {BarChartData[]} props.data - Array of data items
+ * @param {string} props.xAxisKey - Key for X-axis values from data
+ * @param {string} props.yAxisKey - Key for Y-axis values from data
+ * @param {string} props.title - Chart title
+ * @param {string} [props.xAxisLabel] - X-axis label
+ * @param {string} [props.yAxisLabel] - Y-axis label
+ * @param {string} [props.barColor] - Bar color
+ * @param {function} [props.onDataPointClick] - Click handler for bars
+ * @param {boolean} [props.showLegend] - Whether to show legend
+ * @param {string} [props.layout] - Chart layout (vertical or horizontal)
+ */
+declare const BarChart: React.ForwardRefExoticComponent<BarChartProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * LineChart data item structure.
+ * Can contain any string or number properties.
+ */
+interface LineChartData {
+    [key: string]: string | number;
+}
+/**
+ * Line series configuration.
+ *
+ * @interface LineSeries
+ * @property {string} dataKey - Key for series values from data
+ * @property {string} [color] - Line color (auto-assigned if not provided)
+ * @property {number} [strokeWidth] - Line thickness
+ * @property {boolean} [dot] - Whether to show dots at data points
+ * @property {boolean} [activeDot] - Whether to show active dot on hover
+ */
+interface LineSeries {
+    dataKey: string;
+    color?: string;
+    strokeWidth?: number;
+    dot?: boolean;
+    activeDot?: boolean;
+}
+interface LineChartProps {
+    data: LineChartData[];
+    xAxisKey: string;
+    series: LineSeries[];
+    title: string;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    onDataPointClick?: (data: LineChartData) => void;
+    className?: string;
+    showLegend?: boolean;
+    legendItems?: LegendItem[];
+}
+/**
+ * LineChart component for visualizing time series and trends.
+ * @param {LineChartData[]} props.data - Array of data items
+ * @param {string} props.xAxisKey - Key for X-axis values from data
+ * @param {LineSeries[]} props.series - Array of line series configurations
+ * @param {string} props.title - Chart title
+ * @param {string} [props.xAxisLabel] - X-axis label
+ * @param {string} [props.yAxisLabel] - Y-axis label
+ * @param {function} [props.onDataPointClick] - Click handler for data points
+ * @param {boolean} [props.showLegend] - Whether to show legend
+ */
+declare const LineChart: React.ForwardRefExoticComponent<LineChartProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * PieChart data item structure.
+ *
+ * @interface PieChartData
+ * @property {string} name - Segment name/label
+ * @property {number} value - Segment value
+ * @property {string} [color] - Custom segment color (auto-assigned if not provided)
+ */
+interface PieChartData {
+    name: string;
+    value: number;
+    color?: string;
+    [key: string]: string | number | undefined;
+}
+/**
+ * Pie label rendering props from Recharts.
+ * @internal
+ */
+interface PieLabelProps {
+    cx: number;
+    cy: number;
+    midAngle: number;
+    innerRadius: number;
+    outerRadius: number;
+    percent: number;
+    name: string;
+    value: number;
+}
+interface PieChartProps {
+    data: PieChartData[];
+    title: string;
+    onDataPointClick?: (data: PieChartData) => void;
+    className?: string;
+    showLegend?: boolean;
+    legendItems?: LegendItem[];
+    innerRadius?: string | number;
+    outerRadius?: string | number;
+    showLabels?: boolean;
+}
+/**
+ * PieChart component for visualizing proportional data.
+ * @param {PieChartData[]} props.data - Array of data segments
+ * @param {string} props.title - Chart title
+ * @param {function} [props.onDataPointClick] - Click handler for segments
+ * @param {boolean} [props.showLegend] - Whether to show legend
+ * @param {string | number} [props.innerRadius] - Inner radius (use >0 for donut chart)
+ * @param {string | number} [props.outerRadius] - Outer radius
+ * @param {boolean} [props.showLabels] - Whether to show percentage labels
+ */
+declare const PieChart: React.ForwardRefExoticComponent<PieChartProps & React.RefAttributes<HTMLDivElement>>;
+
+interface TableProps<T> {
+    table: Table$1<T>;
+    className?: string;
+    showPagination?: boolean;
+    paginationClassName?: string;
+}
+/**
+ * Table component for displaying tabular data.
+ * @template T - Type of data in table rows
+ * @param {TanStackTable<T>} props.table - TanStack Table instance
+ * @param {string} [props.className] - Additional CSS classes
+ * @param {boolean} [props.showPagination] - Whether to show pagination controls
+ * @param {string} [props.paginationClassName] - Additional CSS classes for pagination
+ */
+declare function Table<T>({ table, className, showPagination, paginationClassName, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+
+export { ArrowDown, ArrowLeft, ArrowRight, ArrowUp, Badge, type BadgeProps, BarChart, type BarChartData, type BarChartProps, Bell, Bookmark, Button, type ButtonProps, CHART_COLORS, CHART_CONSTANTS, COLOR_SCHEMES, Calendar, CaretDown, CaretLeft, CaretRight, CaretUp, type ChartColorScheme, ChartLegend, type ChartLegendProps, Chat, Check, CheckIcon, Checkbox, type CheckboxProps, CheckmarkCircle, CheckmarkSquare, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Close, CloseSmall, Cog, Credentials, DatePicker, type DatePickerProps, Doc, Dollar, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type DropdownMenuTriggerProps, Edit, Envelope, Exclamation, EyeClosed, EyeOpen, Filter, FilterDescending, FormField, type FormFieldProps, GenericTooltip, type GenericTooltipProps, GraphBar, GraphDonut, GraphLine, GraphPie, HamburgerMenu, Home, type IconProps, type IconVariant, Information, TypedInput as Input, type InputFieldProps, type InputProps, type LabelProps, type LegendItem, LineChart, type LineChartData, type LineChartProps, type LineSeries, Location, Lock, Logout, MagnifyingGlass, Minus, MoreMenu, Phone, PieChart, type PieChartData, type PieChartProps, type PieLabelProps, Plus, QuestionCircle, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Share, Star, Statement, Table, TableIcon, type TableProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, type TextareaFieldProps, type TickProps, TooltipContainer, type TooltipContainerProps, TooltipItem, type TooltipItemProps, Trash, Typography, type TypographyProps, Upload, type UploadProps, User, UserMulti, Warning, Wrench, X, badgeVariants, buttonVariants, calculateYAxisWidth, checkboxVariants, createCustomXAxisLabel, createCustomYAxisLabel, createCustomYAxisRightLabel, createLegendItems, customXAxisTick, customXAxisTickRotated, customYAxisTick, formatLargeNumber, formatPercentage, getHeatmapColor, getPerformanceColor, getSeriesColor, inputVariants, selectTriggerVariants, tabsVariants, typographyVariants, uploadVariants };