@tetherto/mdk-react-devkit 0.0.0-stage → 0.12.1

package/dist/primitives/components/toast/index.d.ts

@@ -0,0 +1,76 @@
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import type { NotificationVariant } from '../../types';
+import { type ComponentPropsWithoutRef, type JSX, type ReactNode } from 'react';
+type ToastRootProps = ComponentPropsWithoutRef<typeof ToastPrimitives.Root>;
+type ToastProviderProps = ComponentPropsWithoutRef<typeof ToastPrimitives.Provider>;
+type ToastViewportProps = ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>;
+type ToastVariant = NotificationVariant;
+type ToastPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'top-center' | 'bottom-center';
+declare const TOAST_POSITIONS: ToastPosition[];
+/**
+ * Single transient notification rendered inside the `<Toaster>` viewport.
+ * Use `variant` to convey intent (`success`, `info`, `warning`,
+ * `error`); pair with `<ToastTitle>` and `<ToastDescription>` for structured
+ * content, or wrap a `<ToastAction>` for a single inline call-to-action. Most
+ * apps will trigger toasts imperatively via the `useToast` hook rather than
+ * mounting `<Toast>` directly.
+ *
+ * @category feedback
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const Toast: import("react").ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & import("react").RefAttributes<HTMLLIElement>, "ref"> & {
+    /** Controlled open state */
+    open?: ToastRootProps['open'];
+    /** Open-state change handler */
+    onOpenChange?: ToastRootProps['onOpenChange'];
+    /** Auto-dismiss after N ms */
+    duration?: ToastRootProps['duration'];
+    /** Title shown at the top of the toast */
+    title: string;
+    /** Body text */
+    description?: string;
+    /**
+     * Determines the icon and accent
+     * @default "info"
+     */
+    variant?: ToastVariant;
+    /** Override the default variant icon */
+    icon?: JSX.Element;
+} & import("react").RefAttributes<HTMLLIElement>>;
+export declare function ToastProvider(props: ToastProviderProps): JSX.Element;
+export declare namespace ToastProvider {
+    var displayName: string;
+}
+type ToastViewportPropsExtended = ToastViewportProps & {
+    position?: ToastPosition;
+};
+export declare function ToastViewport({ className, position, ...props }: ToastViewportPropsExtended): JSX.Element;
+export declare namespace ToastViewport {
+    var displayName: string;
+}
+/**
+ * Toaster - A convenience wrapper that includes Provider and Viewport
+ *
+ * @example
+ * ```tsx
+ * <Toaster position="bottom-right">
+ *   <Toast title="Success" description="Your changes were saved." variant="success" />
+ * </Toaster>
+ * ```
+ */
+type ToasterProps = ToastProviderProps & {
+    /** The `<Toast>` elements to render */
+    children: ReactNode;
+    /**
+     * Where the viewport is anchored
+     * @default "top-left"
+     */
+    position?: ToastPosition;
+};
+export declare function Toaster({ children, position, ...props }: ToasterProps): JSX.Element;
+export declare namespace Toaster {
+    var displayName: string;
+}
+export { TOAST_POSITIONS };
+export type { ToastPosition, ToastVariant };

package/dist/primitives/components/toast/index.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { cn } from '../../utils';
+import { forwardRef } from 'react';
+// TODO Update this to use the correct icons
+const TOAST_ICON_MAP = {
+    success: '✅',
+    error: '❌',
+    warning: '⚠️',
+    info: 'ℹ️',
+};
+const TOAST_POSITIONS = [
+    'top-left',
+    'top-center',
+    'top-right',
+    'bottom-left',
+    'bottom-center',
+    'bottom-right',
+];
+/**
+ * Single transient notification rendered inside the `<Toaster>` viewport.
+ * Use `variant` to convey intent (`success`, `info`, `warning`,
+ * `error`); pair with `<ToastTitle>` and `<ToastDescription>` for structured
+ * content, or wrap a `<ToastAction>` for a single inline call-to-action. Most
+ * apps will trigger toasts imperatively via the `useToast` hook rather than
+ * mounting `<Toast>` directly.
+ *
+ * @category feedback
+ * @domain generic
+ * @tier agent-ready
+ */
+export const Toast = forwardRef(({ title, description, variant = 'info', icon, className, ...props }, ref) => {
+    const iconContent = icon ?? TOAST_ICON_MAP[variant];
+    return (_jsxs(ToastPrimitives.Root, { ref: ref, className: cn('mdk_toast', className), ...props, children: [_jsxs("div", { className: "mdk_toast__header", children: [_jsx("div", { className: "mdk_toast__variant", children: iconContent }), _jsxs("div", { className: "mdk_toast__header-content", children: [_jsx(ToastPrimitives.Title, { className: "mdk_toast__title", children: title }), _jsx(ToastPrimitives.Close, { className: "mdk_toast__close", children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", children: _jsx("path", { d: "M4.8 4.79999L11.2 11.2M4.8 11.2L11.2 4.79999", stroke: "white", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })] }), description && (_jsx("div", { className: "mdk_toast__body", children: _jsx(ToastPrimitives.Description, { className: "mdk_toast__description", children: description }) }))] }));
+});
+Toast.displayName = 'Toast';
+/**
+ * Headless provider that hosts the toast state machine — wrap your app with this plus a `<Toaster>` viewport.
+ *
+ * @category feedback
+ * @domain generic
+ * @tier internal
+ */
+export const ToastProvider = (props) => (_jsx(ToastPrimitives.Provider, { ...props }));
+ToastProvider.displayName = 'ToastProvider';
+/**
+ * ToastViewport - Container for rendering toasts
+ *
+ * @example
+ * ```tsx
+ * <ToastProvider>
+ *   <Toast title="Hello" />
+ *   <ToastViewport position="bottom-right" />
+ * </ToastProvider>
+ * ```
+ * @category feedback
+ * @domain generic
+ * @tier internal
+ */
+export const ToastViewport = ({ className, position = 'top-left', ...props }) => (_jsx(ToastPrimitives.Viewport, { className: cn('mdk_toast__viewport', `mdk_toast__viewport--${position}`, className), ...props }));
+ToastViewport.displayName = 'ToastViewport';
+/**
+ * Top-level provider + viewport that hosts every toast triggered via
+ * `useToast`. Mount once near the root of your app (typically inside
+ * `<MdkProvider>`). Without a `<Toaster>` in the tree, `useToast` calls are
+ * no-ops. Position and visual stacking are controlled by CSS tokens; no props
+ * are required for the default top-left placement.
+ *
+ * @category feedback
+ * @domain generic
+ * @tier agent-ready
+ */
+export const Toaster = ({ children, position = 'top-left', ...props }) => (_jsxs(ToastPrimitives.Provider, { ...props, children: [children, _jsx(ToastPrimitives.Viewport, { className: cn('mdk_toast__viewport', `mdk_toast__viewport--${position}`) })] }));
+Toaster.displayName = 'Toaster';
+export { TOAST_POSITIONS };

package/dist/primitives/components/toast/toast.example.d.ts

@@ -0,0 +1 @@
+export declare const ToastExample: () => import("react").JSX.Element;

package/dist/primitives/components/toast/toast.example.js

@@ -0,0 +1,10 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for Toast / Toaster.
+ */
+import { useState } from 'react';
+import { Button, Toast, Toaster } from '@tetherto/mdk-react-devkit';
+export const ToastExample = () => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", onClick: () => setOpen(true), children: "Show toast" }), _jsx(Toaster, { position: "bottom-right", children: _jsx(Toast, { open: open, onOpenChange: setOpen, title: "Saved", description: "Your changes were saved successfully.", variant: "success", duration: 3000 }) })] }));
+};

package/dist/primitives/components/tooltip/index.d.ts

@@ -0,0 +1,127 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import type { Position } from '../../types';
+import { type FC, type ReactNode } from 'react';
+/**
+ * Tooltip Provider - Wraps your app or tooltip group
+ * @example
+ * ```tsx
+ * <TooltipProvider delayDuration={200}>
+ *   <Tooltip>...</Tooltip>
+ * </TooltipProvider>
+ * ```
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+declare const TooltipProvider: FC<TooltipPrimitive.TooltipProviderProps>;
+/**
+ * Tooltip Root - Container for a single tooltip
+ * @example
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger>Hover me</TooltipTrigger>
+ *   <TooltipContent>Helpful information</TooltipContent>
+ * </Tooltip>
+ * ```
+ * @category overlays
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const Tooltip: FC<TooltipPrimitive.TooltipProps>;
+/**
+ * Tooltip Trigger - Element that triggers the tooltip
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+declare const TooltipTrigger: import("react").ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+/**
+ * Tooltip Portal - Portals the tooltip content to document.body
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+declare const TooltipPortal: FC<TooltipPrimitive.TooltipPortalProps>;
+/**
+ * Tooltip Arrow - Small arrow pointing to the trigger
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+declare const TooltipArrow: import("react").ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipArrowProps & import("react").RefAttributes<SVGSVGElement>, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+/**
+ * Tooltip Content - The content shown in the tooltip
+ * @example
+ * ```tsx
+ * <TooltipContent side="top" sideOffset={8}>
+ *   Helpful information
+ *   <TooltipArrow />
+ * </TooltipContent>
+ * ```
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+declare const TooltipContent: import("react").ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    /**
+     * Whether to show the arrow
+     * @default true
+     */
+    showArrow?: boolean;
+} & import("react").RefAttributes<HTMLDivElement>>;
+/**
+ * SimpleTooltip - Convenient wrapper for basic tooltip usage
+ * @example
+ * ```tsx
+ * <SimpleTooltip content="Helpful text" side="top">
+ *   <button>Hover me</button>
+ * </SimpleTooltip>
+ * ```
+ */
+type SimpleTooltipProps = {
+    /**
+     * Tooltip content (string or JSX)
+     */
+    content: ReactNode;
+    /**
+     * Position of the tooltip relative to trigger
+     * @default "top"
+     */
+    side?: Position;
+    /**
+     * Distance from the trigger in pixels
+     * @default 8
+     */
+    sideOffset?: number;
+    /**
+     * Delay before showing tooltip (ms)
+     * @default 200
+     */
+    delayDuration?: number;
+    /**
+     * Whether to show the arrow
+     * @default true
+     */
+    showArrow?: boolean;
+    /**
+     * Additional class for content
+     */
+    className?: string;
+    /**
+     * Element that triggers the tooltip
+     */
+    children: ReactNode;
+};
+/**
+ * One-line convenience wrapper around the full `<Tooltip>` primitive set.
+ * Pass `content` (the hover text) and any single React element as `children`
+ * — `<SimpleTooltip>` handles the provider, trigger, portal and content for
+ * you. Prefer this over composing `<Tooltip>` + `<TooltipTrigger>` +
+ * `<TooltipContent>` unless you need custom positioning or async content.
+ *
+ * @category overlays
+ * @domain generic
+ * @tier agent-ready
+ */
+declare const SimpleTooltip: FC<SimpleTooltipProps>;
+export { SimpleTooltip, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, };

package/dist/primitives/components/tooltip/index.js

@@ -0,0 +1,86 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '../../utils';
+import { forwardRef, } from 'react';
+/**
+ * Tooltip Provider - Wraps your app or tooltip group
+ * @example
+ * ```tsx
+ * <TooltipProvider delayDuration={200}>
+ *   <Tooltip>...</Tooltip>
+ * </TooltipProvider>
+ * ```
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+const TooltipProvider = TooltipPrimitive.Provider;
+/**
+ * Tooltip Root - Container for a single tooltip
+ * @example
+ * ```tsx
+ * <Tooltip>
+ *   <TooltipTrigger>Hover me</TooltipTrigger>
+ *   <TooltipContent>Helpful information</TooltipContent>
+ * </Tooltip>
+ * ```
+ * @category overlays
+ * @domain generic
+ * @tier agent-ready
+ */
+const Tooltip = TooltipPrimitive.Root;
+/**
+ * Tooltip Trigger - Element that triggers the tooltip
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+const TooltipTrigger = TooltipPrimitive.Trigger;
+/**
+ * Tooltip Portal - Portals the tooltip content to document.body
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+const TooltipPortal = TooltipPrimitive.Portal;
+/**
+ * Tooltip Arrow - Small arrow pointing to the trigger
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+const TooltipArrow = forwardRef(({ className, ...props }, ref) => (_jsx(TooltipPrimitive.Arrow, { ref: ref, asChild: true, width: 14, height: 7, ...props, className: cn('mdk-tooltip__arrow', className), children: _jsx("span", {}) })));
+TooltipArrow.displayName = 'TooltipArrow';
+/**
+ * Tooltip Content - The content shown in the tooltip
+ * @example
+ * ```tsx
+ * <TooltipContent side="top" sideOffset={8}>
+ *   Helpful information
+ *   <TooltipArrow />
+ * </TooltipContent>
+ * ```
+ * @category overlays
+ * @domain generic
+ * @tier internal
+ */
+const TooltipContent = forwardRef(({ className, align = 'center', sideOffset = 8, showArrow = true, children, ...props }, ref) => (_jsx(TooltipPortal, { children: _jsxs(TooltipPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn('mdk-tooltip__content', className), ...props, children: [_jsx("div", { className: "mdk-tooltip__content-main", children: children }), showArrow && _jsx(TooltipArrow, {})] }) })));
+TooltipContent.displayName = 'TooltipContent';
+/**
+ * One-line convenience wrapper around the full `<Tooltip>` primitive set.
+ * Pass `content` (the hover text) and any single React element as `children`
+ * — `<SimpleTooltip>` handles the provider, trigger, portal and content for
+ * you. Prefer this over composing `<Tooltip>` + `<TooltipTrigger>` +
+ * `<TooltipContent>` unless you need custom positioning or async content.
+ *
+ * @category overlays
+ * @domain generic
+ * @tier agent-ready
+ */
+const SimpleTooltip = ({ content, side = 'top', sideOffset = 8, delayDuration = 200, showArrow = true, className, children, }) => {
+    if (!content)
+        return _jsx(_Fragment, { children: children });
+    return (_jsx(TooltipProvider, { delayDuration: delayDuration, children: _jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: children }), _jsx(TooltipContent, { side: side, sideOffset: sideOffset, showArrow: showArrow, className: className, children: content })] }) }));
+};
+SimpleTooltip.displayName = 'SimpleTooltip';
+export { SimpleTooltip, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, };

package/dist/primitives/components/tooltip/tooltip.example.d.ts

@@ -0,0 +1 @@
+export declare const TooltipExample: () => import("react").JSX.Element;

package/dist/primitives/components/tooltip/tooltip.example.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for Tooltip / SimpleTooltip.
+ */
+import { Button, SimpleTooltip } from '@tetherto/mdk-react-devkit';
+export const TooltipExample = () => {
+    return (_jsxs("div", { style: { display: 'flex', gap: 16 }, children: [_jsx(SimpleTooltip, { content: "Refresh data", side: "bottom", children: _jsx(Button, { children: "Refresh" }) }), _jsx(SimpleTooltip, { content: "Saves to the current workspace", side: "right", children: _jsx(Button, { variant: "primary", children: "Save" }) })] }));
+};

package/dist/primitives/components/typography/index.d.ts

@@ -0,0 +1,81 @@
+import { type HTMLAttributes } from 'react';
+import type { TextAlign, TypographyColor } from '../../types';
+export type TypographyProps = {
+    /**
+     * Determines the rendered HTML element and base style
+     * @default 'body'
+     */
+    variant?: 'heading1' | 'heading2' | 'heading3' | 'body' | 'secondary' | 'caption';
+    /**
+     * Text size; defaults to the variant's size when unset.
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+    /**
+     * Font weight; defaults to the variant's weight when unset.
+     */
+    weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+    /**
+     * Text alignment
+     */
+    align?: TextAlign;
+    /**
+     * Token-based text color
+     * @default "default"
+     */
+    color?: TypographyColor;
+    /**
+     * Truncate text with ellipsis
+     * @default false
+     */
+    truncate?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+} & HTMLAttributes<HTMLElement>;
+/**
+ * Typography component for consistent text styling
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="heading1">Page Title</Typography>
+ * <Typography variant="body">Body text content</Typography>
+ * <Typography size="sm" color="muted">Helper text</Typography>
+ * ```
+ * @category display
+ * @domain generic
+ * @tier agent-ready
+ */
+export declare const Typography: import("react").ForwardRefExoticComponent<{
+    /**
+     * Determines the rendered HTML element and base style
+     * @default 'body'
+     */
+    variant?: 'heading1' | 'heading2' | 'heading3' | 'body' | 'secondary' | 'caption';
+    /**
+     * Text size; defaults to the variant's size when unset.
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+    /**
+     * Font weight; defaults to the variant's weight when unset.
+     */
+    weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold';
+    /**
+     * Text alignment
+     */
+    align?: TextAlign;
+    /**
+     * Token-based text color
+     * @default "default"
+     */
+    color?: TypographyColor;
+    /**
+     * Truncate text with ellipsis
+     * @default false
+     */
+    truncate?: boolean;
+    /**
+     * Custom className
+     */
+    className?: string;
+} & HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;

package/dist/primitives/components/typography/index.js

@@ -0,0 +1,34 @@
+import { createElement, forwardRef } from 'react';
+import { cn } from '../../utils';
+/**
+ * Typography component for consistent text styling
+ *
+ * @example
+ * ```tsx
+ * <Typography variant="heading1">Page Title</Typography>
+ * <Typography variant="body">Body text content</Typography>
+ * <Typography size="sm" color="muted">Helper text</Typography>
+ * ```
+ * @category display
+ * @domain generic
+ * @tier agent-ready
+ */
+export const Typography = forwardRef(({ variant = 'body', size, weight, align, color = 'default', truncate = false, className, children, ...props }, ref) => {
+    // Default element based on variant
+    const defaultElement = {
+        heading1: 'h1',
+        heading2: 'h2',
+        heading3: 'h3',
+        body: 'p',
+        secondary: 'p',
+        caption: 'span',
+    };
+    const Component = defaultElement[variant];
+    const elementProps = {
+        ref,
+        className: cn('mdk-typography', `mdk-typography--${variant}`, size && `mdk-typography--size-${size}`, weight && `mdk-typography--weight-${weight}`, align && `mdk-typography--align-${align}`, `mdk-typography--color-${color}`, truncate && 'mdk-typography--truncate', className),
+        ...props,
+    };
+    return createElement(Component, elementProps, children);
+});
+Typography.displayName = 'Typography';

package/dist/primitives/components/typography/typography.example.d.ts

@@ -0,0 +1 @@
+export declare const TypographyExample: () => import("react").JSX.Element;

package/dist/primitives/components/typography/typography.example.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Runnable example for Typography.
+ */
+import { Typography } from '@tetherto/mdk-react-devkit';
+export const TypographyExample = () => {
+    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12 }, children: [_jsx(Typography, { variant: "heading1", children: "Operations dashboard" }), _jsx(Typography, { variant: "heading2", children: "Sites" }), _jsx(Typography, { variant: "heading3", children: "Site #1" }), _jsx(Typography, { variant: "body", children: "A high-level summary of your sites, devices, and active alerts." }), _jsx(Typography, { variant: "secondary", children: "Last refreshed 12 seconds ago." }), _jsx(Typography, { variant: "caption", color: "muted", children: "Updated 12s ago" })] }));
+};

package/dist/primitives/constants/charts.d.ts

@@ -0,0 +1,27 @@
+/** Default color palette for chart datasets (line, bar, area) */
+export declare const defaultChartColors: readonly ['hsl(25 95% 53%)', 'hsl(142 76% 64%)', 'hsl(217 91% 60%)', 'hsl(45 93% 47%)', 'hsl(0 84% 60%)'];
+export declare const CHART_LEGEND_OPACITY: {
+    readonly VISIBLE: 1;
+    readonly HIDDEN: 0.2;
+    readonly FILL_HIDDEN: 0.1;
+};
+export declare const CHART_PERFORMANCE: {
+    readonly LARGE_DATASET_THRESHOLD: 100;
+    readonly DECIMATION_THRESHOLD: 200;
+    readonly ANIMATION_DURATION: 300;
+    readonly NO_ANIMATION_THRESHOLD: 500;
+    readonly SKIP_PARSING: true;
+    readonly NORMALIZE_DATA: false;
+};
+export declare const getChartAnimationConfig: (dataPointCount: number) => false | {
+    duration: number;
+};
+export declare const getDataDecimationConfig: (dataPointCount: number) => {
+    enabled: boolean;
+    algorithm?: string;
+};
+export declare const LABEL_TO_IGNORE: readonly ['label', 'unit', 'stackGroup', 'legendColor', 'labels', 'backgroundColor', 'borderColor', 'borderWidth', 'fill', 'period', 'groupByRegion', 'tension', 'pointRadius', 'pointHoverRadius', 'borderDash', 'order', 'stack', 'hidden', 'yAxisID', 'xAxisID', 'type'];
+export type ChartLegendOpacityKey = keyof typeof CHART_LEGEND_OPACITY;
+export type ChartLegendOpacityValue = (typeof CHART_LEGEND_OPACITY)[ChartLegendOpacityKey];
+export type ChartPerformanceKey = keyof typeof CHART_PERFORMANCE;
+export type LabelToIgnoreValue = (typeof LABEL_TO_IGNORE)[number];

package/dist/primitives/constants/charts.js

@@ -0,0 +1,70 @@
+/** Default color palette for chart datasets (line, bar, area) */
+export const defaultChartColors = [
+    'hsl(25 95% 53%)', // primary orange
+    'hsl(142 76% 64%)', // success green
+    'hsl(217 91% 60%)', // blue
+    'hsl(45 93% 47%)', // warning yellow
+    'hsl(0 84% 60%)', // error red
+];
+export const CHART_LEGEND_OPACITY = {
+    VISIBLE: 1,
+    HIDDEN: 0.2,
+    FILL_HIDDEN: 0.1,
+};
+// Performance Configuration
+export const CHART_PERFORMANCE = {
+    LARGE_DATASET_THRESHOLD: 100,
+    DECIMATION_THRESHOLD: 200,
+    ANIMATION_DURATION: 300,
+    NO_ANIMATION_THRESHOLD: 500,
+    SKIP_PARSING: true,
+    NORMALIZE_DATA: false,
+};
+export const getChartAnimationConfig = (dataPointCount) => {
+    if (dataPointCount > CHART_PERFORMANCE.NO_ANIMATION_THRESHOLD) {
+        return false;
+    }
+    if (dataPointCount > CHART_PERFORMANCE.LARGE_DATASET_THRESHOLD) {
+        return {
+            duration: 0,
+        };
+    }
+    return {
+        duration: CHART_PERFORMANCE.ANIMATION_DURATION,
+    };
+};
+export const getDataDecimationConfig = (dataPointCount) => {
+    if (dataPointCount > CHART_PERFORMANCE.DECIMATION_THRESHOLD) {
+        return {
+            enabled: true,
+            algorithm: 'lttb',
+        };
+    }
+    return {
+        enabled: false,
+    };
+};
+export const LABEL_TO_IGNORE = [
+    'label',
+    'unit',
+    'stackGroup',
+    'legendColor',
+    'labels',
+    'backgroundColor',
+    'borderColor',
+    'borderWidth',
+    'fill',
+    'period',
+    'groupByRegion',
+    // Additional Chart.js styling properties
+    'tension',
+    'pointRadius',
+    'pointHoverRadius',
+    'borderDash',
+    'order',
+    'stack',
+    'hidden',
+    'yAxisID',
+    'xAxisID',
+    'type',
+];