@signalflare-ai/ui 0.5.0

package/dist/src/components/breadcrumbs/breadcrumbs.d.ts

@@ -0,0 +1,78 @@
+import { PropsWithChildren } from 'react';
+/** Breadcrumbs size variant definitions. */
+export declare const SF_BREADCRUMBS_VARIANTS: {
+    readonly size: {
+        readonly sm: {
+            readonly classes: "text-sm h-10 gap-0.5";
+            readonly description: "Compact breadcrumbs for dense UIs";
+        };
+        readonly base: {
+            readonly classes: "text-base h-12 gap-1";
+            readonly description: "Default breadcrumbs size";
+        };
+    };
+};
+export declare const SF_BREADCRUMBS_DEFAULT_VARIANTS: {
+    readonly size: "base";
+};
+export type SFBreadcrumbsSize = keyof typeof SF_BREADCRUMBS_VARIANTS.size;
+export interface SFBreadcrumbsVariantsProps {
+    /**
+     * Size of the breadcrumbs.
+     * - `"sm"` — Compact breadcrumbs for dense UIs
+     * - `"base"` — Default breadcrumbs size
+     * @default "base"
+     */
+    size?: SFBreadcrumbsSize;
+}
+export declare function breadcrumbsVariants({ size, }?: SFBreadcrumbsVariantsProps): string;
+export interface BreadcrumbsItemProps {
+    href: string;
+    icon?: React.ReactNode;
+}
+interface BreadcrumbsCurrentProps {
+    loading?: boolean;
+    icon?: React.ReactNode;
+}
+/**
+ * Breadcrumbs component props.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumbs>
+ *   <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
+ *   <Breadcrumbs.Separator />
+ *   <Breadcrumbs.Link href="/docs">Docs</Breadcrumbs.Link>
+ *   <Breadcrumbs.Separator />
+ *   <Breadcrumbs.Current>Current Page</Breadcrumbs.Current>
+ * </Breadcrumbs>
+ * ```
+ */
+export interface BreadcrumbsProps extends PropsWithChildren, SFBreadcrumbsVariantsProps {
+    /** Additional CSS classes merged via `cn()`. */
+    className?: string;
+}
+/**
+ * Navigation breadcrumb trail showing the current page's location in a hierarchy.
+ * Compound component with `Breadcrumbs.Link`, `Breadcrumbs.Current`, `Breadcrumbs.Separator`, and `Breadcrumbs.Clipboard`.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumbs>
+ *   <Breadcrumbs.Link href="/">Home</Breadcrumbs.Link>
+ *   <Breadcrumbs.Separator />
+ *   <Breadcrumbs.Current>Dashboard</Breadcrumbs.Current>
+ * </Breadcrumbs>
+ * ```
+ */
+export declare function Breadcrumb({ children, size, className, }: BreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Breadcrumb {
+    var Link: ({ href, icon, children, }: PropsWithChildren<BreadcrumbsItemProps>) => import("react/jsx-runtime").JSX.Element;
+    var Current: ({ children, icon, loading, }: PropsWithChildren<BreadcrumbsCurrentProps>) => import("react/jsx-runtime").JSX.Element;
+    var Separator: () => import("react/jsx-runtime").JSX.Element;
+    var Clipboard: ({ text }: {
+        text: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+}
+export {};
+//# sourceMappingURL=breadcrumbs.d.ts.map

package/dist/src/components/breadcrumbs/breadcrumbs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/breadcrumbs.tsx"],"names":[],"mappings":"AACA,OAAO,EAAuB,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAOpE,4CAA4C;AAC5C,eAAO,MAAM,uBAAuB;;;;;;;;;;;CAW1B,CAAC;AAEX,eAAO,MAAM,+BAA+B;;CAElC,CAAC;AAEX,MAAM,MAAM,iBAAiB,GAAG,MAAM,OAAO,uBAAuB,CAAC,IAAI,CAAC;AAE1E,MAAM,WAAW,0BAA0B;IACzC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,iBAAiB,CAAC;CAC1B;AAED,wBAAgB,mBAAmB,CAAC,EAClC,IAA2C,GAC5C,GAAE,0BAA+B,UAKjC;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAoBD,UAAU,uBAAuB;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAmFD;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,gBACf,SAAQ,iBAAiB,EAAE,0BAA0B;IACrD,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,IAAa,EACb,SAAS,GACV,EAAE,gBAAgB,2CASlB;yBAbe,UAAU;0CArIvB,iBAAiB,CAAC,oBAAoB,CAAC;gDAuBvC,iBAAiB,CAAC,uBAAuB,CAAC;;8BAqChB;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE"}

package/dist/src/components/breadcrumbs/index.d.ts

@@ -0,0 +1,2 @@
+export { Breadcrumb as Breadcrumbs, breadcrumbsVariants, SF_BREADCRUMBS_VARIANTS, SF_BREADCRUMBS_DEFAULT_VARIANTS, type BreadcrumbsProps, type SFBreadcrumbsSize, type SFBreadcrumbsVariantsProps, } from './breadcrumbs';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/breadcrumbs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,IAAI,WAAW,EACzB,mBAAmB,EACnB,uBAAuB,EACvB,+BAA+B,EAC/B,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,0BAA0B,GAChC,MAAM,eAAe,CAAC"}

package/dist/src/components/button/button.d.ts

@@ -0,0 +1,212 @@
+import { Icon } from '@phosphor-icons/react';
+import { default as React } from 'react';
+/** Button variant definitions mapping shape, size, and variant names to their Tailwind classes. */
+export declare const SF_BUTTON_VARIANTS: {
+    readonly shape: {
+        readonly base: {
+            readonly classes: "";
+            readonly description: "Default rectangular button shape";
+        };
+        readonly square: {
+            readonly classes: "items-center justify-center p-0";
+            readonly description: "Square button for icon-only actions";
+        };
+        readonly circle: {
+            readonly classes: "items-center justify-center p-0 rounded-full";
+            readonly description: "Circular button for icon-only actions";
+        };
+    };
+    readonly size: {
+        readonly xs: {
+            readonly classes: "h-5 gap-1 rounded-sm px-1.5 text-xs";
+            readonly description: "Extra small button for compact UIs";
+        };
+        readonly sm: {
+            readonly classes: "h-6.5 gap-1 rounded-md px-2 text-xs";
+            readonly description: "Small button for secondary actions";
+        };
+        readonly base: {
+            readonly classes: "h-9 gap-1.5 rounded-lg px-3 text-base";
+            readonly description: "Default button size";
+        };
+        readonly lg: {
+            readonly classes: "h-10 gap-2 rounded-lg px-4 text-base";
+            readonly description: "Large button for primary CTAs";
+        };
+    };
+    readonly compactSize: {
+        readonly xs: {
+            readonly classes: "size-3.5";
+        };
+        readonly sm: {
+            readonly classes: "size-6.5";
+        };
+        readonly base: {
+            readonly classes: "size-9";
+        };
+        readonly lg: {
+            readonly classes: "size-10";
+        };
+    };
+    readonly variant: {
+        readonly primary: {
+            readonly classes: "bg-sf-brand !text-white hover:bg-sf-brand-hover focus:bg-sf-brand-hover disabled:bg-sf-brand/50";
+            readonly description: "High-emphasis button for primary actions";
+        };
+        readonly secondary: {
+            readonly classes: "bg-sf-control !text-sf-default ring not-disabled:hover:border-secondary! not-disabled:hover:bg-sf-control disabled:bg-sf-control/50 disabled:!text-sf-default/70 ring-sf-line data-[state=open]:bg-sf-control";
+            readonly description: "Default button style for most actions";
+        };
+        readonly ghost: {
+            readonly classes: "text-sf-default hover:bg-sf-tint shadow-none bg-inherit";
+            readonly description: "Minimal button with no background";
+        };
+        readonly destructive: {
+            readonly classes: "bg-sf-danger !text-white hover:bg-sf-danger/70";
+            readonly description: "Danger button for destructive actions like delete";
+        };
+        readonly "secondary-destructive": {
+            readonly classes: "bg-sf-control !text-sf-danger ring not-disabled:hover:border-secondary! not-disabled:hover:bg-sf-control disabled:bg-sf-control/50 disabled:!text-sf-danger/70 ring-sf-line data-[state=open]:bg-sf-control";
+            readonly description: "Secondary button with destructive text for less prominent dangerous actions";
+        };
+        readonly outline: {
+            readonly classes: "bg-sf-base text-sf-default ring ring-sf-line";
+            readonly description: "Bordered button with transparent background";
+        };
+    };
+};
+export declare const SF_BUTTON_DEFAULT_VARIANTS: {
+    readonly shape: "base";
+    readonly size: "base";
+    readonly variant: "secondary";
+};
+export type SFButtonShape = keyof typeof SF_BUTTON_VARIANTS.shape;
+export type SFButtonSize = keyof typeof SF_BUTTON_VARIANTS.size;
+export type SFButtonVariant = keyof typeof SF_BUTTON_VARIANTS.variant;
+export interface SFButtonVariantsProps {
+    /**
+     * Button shape.
+     * - `"base"` — Default rectangular button
+     * - `"square"` — Square button for icon-only actions
+     * - `"circle"` — Circular button for icon-only actions
+     * @default "base"
+     */
+    shape?: SFButtonShape;
+    /**
+     * Button size.
+     * - `"xs"` — Extra small for compact UIs
+     * - `"sm"` — Small for secondary actions
+     * - `"base"` — Default size
+     * - `"lg"` — Large for primary CTAs
+     * @default "base"
+     */
+    size?: SFButtonSize;
+    /**
+     * Visual style of the button.
+     * - `"primary"` — High-emphasis, brand-colored for primary actions
+     * - `"secondary"` — Default style with border for most actions
+     * - `"ghost"` — Minimal, no background for tertiary actions
+     * - `"destructive"` — Danger button for destructive actions
+     * - `"secondary-destructive"` — Secondary style with destructive text
+     * - `"outline"` — Bordered with transparent background
+     * @default "secondary"
+     */
+    variant?: SFButtonVariant;
+}
+export declare function buttonVariants({ variant, size, shape, }?: SFButtonVariantsProps): string;
+/**
+ * Button component props.
+ *
+ * Uses a discriminated union on `shape` so that icon-only buttons
+ * (`shape="square"` or `shape="circle"`) require an `aria-label`.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary">Save</Button>
+ * <Button variant="secondary" shape="square" icon={PlusIcon} aria-label="Add" />
+ * <Button variant="destructive" loading>Deleting...</Button>
+ * ```
+ */
+type ButtonBaseProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    /** Content rendered inside the button. */
+    children?: React.ReactNode;
+    /** Additional CSS classes merged via `cn()`. */
+    className?: string;
+    /** Icon from `@phosphor-icons/react` or a React element. Rendered before children. */
+    icon?: Icon | React.ReactNode;
+    /** Shows a loading spinner and disables interaction. */
+    loading?: boolean;
+};
+type ButtonWithTextProps = ButtonBaseProps & {
+    shape?: "base";
+    size?: SFButtonSize;
+    variant?: SFButtonVariant;
+};
+type IconOnlyButtonProps = ButtonBaseProps & {
+    shape: "square" | "circle";
+    size?: SFButtonSize;
+    variant?: SFButtonVariant;
+    /** Required for icon-only buttons to provide accessible label for screen readers */
+    "aria-label": string;
+};
+export type ButtonProps = ButtonWithTextProps | IconOnlyButtonProps;
+/**
+ * LinkButton component props — renders an anchor styled as a button.
+ *
+ * @example
+ * ```tsx
+ * <LinkButton href="/docs" variant="ghost" icon={BookIcon}>Docs</LinkButton>
+ * <LinkButton href="https://example.com" external>Visit Site</LinkButton>
+ * ```
+ */
+export type LinkButtonProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & SFButtonVariantsProps & {
+    /** Content rendered inside the link button. */
+    children?: React.ReactNode;
+    /** Additional CSS classes merged via `cn()`. */
+    className?: string;
+    /** Icon from `@phosphor-icons/react` or a React element. Rendered before children. */
+    icon?: Icon | React.ReactNode;
+    /** When `true`, opens in a new tab with `rel="noopener noreferrer"`. */
+    external?: boolean;
+    linksExternal?: boolean;
+};
+/**
+ * Primary action trigger. Supports multiple variants, sizes, shapes, icons, and loading state.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary">Save</Button>
+ * <Button variant="secondary" icon={PlusIcon}>Create Worker</Button>
+ * ```
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Square button with a rotating arrows icon, used to trigger data refresh actions.
+ *
+ * @example
+ * ```tsx
+ * <RefreshButton loading={isRefreshing} onClick={refresh} />
+ * ```
+ */
+export declare const RefreshButton: ({ "aria-label": ariaLabel, loading, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Anchor element styled as a button. Integrates with `LinkProvider` for framework routing.
+ *
+ * @example
+ * ```tsx
+ * <LinkButton href="/settings" variant="ghost">Settings</LinkButton>
+ * ```
+ */
+export declare const LinkButton: React.ForwardRefExoticComponent<React.AnchorHTMLAttributes<HTMLAnchorElement> & SFButtonVariantsProps & {
+    /** Content rendered inside the link button. */
+    children?: React.ReactNode;
+    /** Additional CSS classes merged via `cn()`. */
+    className?: string;
+    /** Icon from `@phosphor-icons/react` or a React element. Rendered before children. */
+    icon?: Icon | React.ReactNode;
+    /** When `true`, opens in a new tab with `rel="noopener noreferrer"`. */
+    external?: boolean;
+    linksExternal?: boolean;
+} & React.RefAttributes<HTMLAnchorElement>>;
+export {};
+//# sourceMappingURL=button.d.ts.map

package/dist/src/components/button/button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/button/button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,IAAI,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,mGAAmG;AACnG,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqErB,CAAC;AAEX,eAAO,MAAM,0BAA0B;;;;CAI7B,CAAC;AAGX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,kBAAkB,CAAC,KAAK,CAAC;AAClE,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,kBAAkB,CAAC,IAAI,CAAC;AAChE,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,kBAAkB,CAAC,OAAO,CAAC;AAEtE,MAAM,WAAW,qBAAqB;IACpC;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B;AAED,wBAAgB,cAAc,CAAC,EAC7B,OAA4C,EAC5C,IAAsC,EACtC,KAAwC,GACzC,GAAE,qBAA0B,UAgB5B;AAUD;;;;;;;;;;;;GAYG;AACH,KAAK,eAAe,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IACrE,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,IAAI,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC;IAC9B,wDAAwD;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,mBAAmB,GAAG,eAAe,GAAG;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC;CAC3B,CAAC;AAEF,KAAK,mBAAmB,GAAG,eAAe,GAAG;IAC3C,KAAK,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC3B,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,oFAAoF;IACpF,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG,mBAAmB,GAAG,mBAAmB,CAAC;AAEpE;;;;;;;;GAQG;AACH,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GACzE,qBAAqB,GAAG;IACtB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sFAAsF;IACtF,IAAI,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC,SAAS,CAAC;IAC9B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB,CAAC;AAEJ;;;;;;;;GAQG;AACH,eAAO,MAAM,MAAM,uFAoClB,CAAC;AAIF;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GAAI,gDAI3B,WAAW,4CAWb,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU;IA7FnB,+CAA+C;eACpC,KAAK,CAAC,SAAS;IAC1B,gDAAgD;gBACpC,MAAM;IAClB,sFAAsF;WAC/E,IAAI,GAAG,KAAK,CAAC,SAAS;IAC7B,wEAAwE;eAC7D,OAAO;oBACF,OAAO;2CA4H1B,CAAC"}

package/dist/src/components/button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button, RefreshButton, LinkButton, buttonVariants, type ButtonProps, type LinkButtonProps, } from './button';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,aAAa,EACb,UAAU,EACV,cAAc,EACd,KAAK,WAAW,EAChB,KAAK,eAAe,GACrB,MAAM,UAAU,CAAC"}

package/dist/src/components/chart/color.d.ts

@@ -0,0 +1,98 @@
+/**
+ * Categorical colors for light mode — used when assigning colors to data series
+ * by index (e.g. the first series gets Blue, the second gets Violet, etc.).
+ */
+declare enum ChartCategoricalLightColors {
+    Blue = "#086FFF",
+    Violet = "#CF7EE9",
+    Cyan = "#73CEE6",
+    Indigo = "#5B5FEF",
+    LightBlue = "#82B6FF",
+    Pink = "#F5609F",
+    Indigo3 = "#C2BDF3",
+    Violet2 = "#8D1EB1",
+    Violet3 = "#EBCAF6",
+    Indigo2 = "#7366E4"
+}
+/**
+ * Categorical colors for dark mode — same hues as the light palette but with
+ * `E6` alpha (90% opacity) appended to soften contrast on dark backgrounds.
+ */
+declare enum ChartCategoricalDarkColors {
+    Blue = "#086FFFE6",
+    Violet = "#CF7EE9E6",
+    Cyan = "#73CEE6E6",
+    Indigo = "#5B5FEFE6",
+    LightBlue = "#82B6FFE6",
+    Pink = "#F5609FE6",
+    Indigo3 = "#C2BDF3E6",
+    Violet2 = "#8D1EB1E6",
+    Violet3 = "#EBCAF6E6",
+    Indigo2 = "#7366E4E6"
+}
+/**
+ * Semantic colors for light mode — used to convey meaning (status, severity)
+ * rather than just distinguishing series. Use via `ChartPalette.semantic()`.
+ */
+declare enum ChartSemanticLightColors {
+    Attention = "#FC574A",
+    Warning = "#F8A054",
+    Neutral = "#82B6FF",
+    NeutralLight = "#B9D6FF",
+    Disabled = "#B6B6B6",
+    DisabledLight = "#D9D9D9"
+}
+/**
+ * Semantic colors for dark mode — same meanings as the light palette but with
+ * `E6` alpha (90% opacity) for dark backgrounds.
+ */
+declare enum ChartSemanticDarkColors {
+    Attention = "#FC574AE6",
+    Warning = "#F8A054E6",
+    Neutral = "#82B6FFE6",
+    NeutralLight = "#B9D6FFE6",
+    Disabled = "#B6B6B6E6",
+    DisabledLight = "#D9D9D9E6"
+}
+/**
+ * Ordered list of categorical colors for light mode, indexed by series position.
+ * Used as the default ECharts color palette when `isDarkMode` is `false`.
+ */
+export declare const CHART_LIGHT_COLORS: ChartCategoricalLightColors[];
+/**
+ * Ordered list of categorical colors for dark mode, indexed by series position.
+ * Used as the default ECharts color palette when `isDarkMode` is `true`.
+ */
+export declare const CHART_DARK_COLORS: ChartCategoricalDarkColors[];
+/**
+ * Returns the hex color for a named semantic value (status, severity, etc.).
+ *
+ * @example
+ * ```ts
+ * ChartPalette.semantic("Attention")           // "#FC574A" (light)
+ * ChartPalette.semantic("Warning", true)       // "#F8A054E6" (dark)
+ * ```
+ */
+declare function semantic(name: "Attention" | "Warning" | "Neutral" | "NeutralLight" | "Disabled" | "DisabledLight", isDarkMode?: boolean): ChartSemanticDarkColors | ChartSemanticLightColors;
+/**
+ * Returns the categorical color for a given series index.
+ * Wraps around via modulo when `index` exceeds the palette length (10 colors).
+ *
+ * @example
+ * ```ts
+ * ChartPalette.color(0)        // Blue (light)
+ * ChartPalette.color(0, true)  // Blue with E6 alpha (dark)
+ * ChartPalette.color(10)       // wraps back to Blue
+ * ```
+ */
+declare function color(index: number, isDarkMode?: boolean): ChartCategoricalLightColors | ChartCategoricalDarkColors;
+/**
+ * Utilities for resolving SignalFlare chart colors by semantic name or series index.
+ * Both functions accept an `isDarkMode` flag and return the appropriate hex color.
+ */
+export declare const ChartPalette: {
+    semantic: typeof semantic;
+    color: typeof color;
+};
+export {};
+//# sourceMappingURL=color.d.ts.map

package/dist/src/components/chart/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../src/components/chart/color.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,aAAK,2BAA2B;IAC9B,IAAI,YAAY;IAChB,MAAM,YAAY;IAClB,IAAI,YAAY;IAChB,MAAM,YAAY;IAClB,SAAS,YAAY;IACrB,IAAI,YAAY;IAChB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,OAAO,YAAY;CACpB;AAED;;;GAGG;AACH,aAAK,0BAA0B;IAC7B,IAAI,cAAc;IAClB,MAAM,cAAc;IACpB,IAAI,cAAc;IAClB,MAAM,cAAc;IACpB,SAAS,cAAc;IACvB,IAAI,cAAc;IAClB,OAAO,cAAc;IACrB,OAAO,cAAc;IACrB,OAAO,cAAc;IACrB,OAAO,cAAc;CACtB;AAED;;;GAGG;AACH,aAAK,wBAAwB;IAC3B,SAAS,YAAY;IACrB,OAAO,YAAY;IACnB,OAAO,YAAY;IACnB,YAAY,YAAY;IACxB,QAAQ,YAAY;IACpB,aAAa,YAAY;CAC1B;AAED;;;GAGG;AACH,aAAK,uBAAuB;IAC1B,SAAS,cAAc;IACvB,OAAO,cAAc;IACrB,OAAO,cAAc;IACrB,YAAY,cAAc;IAC1B,QAAQ,cAAc;IACtB,aAAa,cAAc;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,+BAW9B,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,8BAW7B,CAAC;AAEF;;;;;;;;GAQG;AACH,iBAAS,QAAQ,CACf,IAAI,EACA,WAAW,GACX,SAAS,GACT,SAAS,GACT,cAAc,GACd,UAAU,GACV,eAAe,EACnB,UAAU,UAAQ,sDAKnB;AAED;;;;;;;;;;GAUG;AACH,iBAAS,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,UAAQ,4DAI/C;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY;;;CAAsB,CAAC"}

package/dist/src/components/chart/echart.d.ts

@@ -0,0 +1,135 @@
+import { EChartsOption, SetOptionOpts } from 'echarts';
+import type * as echarts from "echarts/core";
+/** Parameters passed to mouse event handlers on chart elements */
+type EChartsMouseEventParams = {
+    /** The type of component that triggered the event (e.g. "series", "markPoint") */
+    componentType: string;
+    /** Series type (e.g. "line", "bar") — present when componentType is "series" */
+    seriesType?: string;
+    /** Zero-based index of the series in the option.series array */
+    seriesIndex?: number;
+    /** Name of the series */
+    seriesName?: string;
+    /** Name of the data item */
+    name?: string;
+    /** Zero-based index of the data item within its series */
+    dataIndex?: number;
+    /** Raw data item value */
+    data?: any;
+    /** Sub-type of data (e.g. "node", "edge" for graph series) */
+    dataType?: string;
+    /** Numeric or array value of the data item */
+    value?: number | any[];
+    /** Resolved color of the series or data item */
+    color?: string;
+};
+/**
+ * ECharts event handlers that can be attached to a `Chart`.
+ * Pass a subset via the `onEvents` prop; handlers are registered lazily and
+ * cleaned up automatically when removed or when the chart is unmounted.
+ */
+export interface ChartEvents {
+    click: (params: EChartsMouseEventParams) => void;
+    dblclick: (params: EChartsMouseEventParams) => void;
+    mousedown: (params: EChartsMouseEventParams) => void;
+    mousemove: (params: EChartsMouseEventParams) => void;
+    mouseup: (params: EChartsMouseEventParams) => void;
+    mouseover: (params: EChartsMouseEventParams) => void;
+    mouseout: (params: EChartsMouseEventParams) => void;
+    /** Fired when the pointer leaves the chart canvas entirely */
+    globalout: (params: any) => void;
+    contextmenu: (params: any) => void;
+    /** Fired when any legend item's selected state changes */
+    legendselectchanged: (params: {
+        name: string;
+        /** Map of series name → selected state for all legend items */
+        selected: Record<string, boolean>;
+    }) => void;
+    legendselected: (params: any) => void;
+    legendunselected: (params: any) => void;
+    legendscroll: (params: any) => void;
+    datazoom: (params: any) => void;
+    datarangeselected: (params: any) => void;
+    timelinechanged: (params: any) => void;
+    timelineplaychanged: (params: any) => void;
+    restore: (params: any) => void;
+    dataviewchanged: (params: any) => void;
+    magictypechanged: (params: any) => void;
+    pieselectchanged: (params: any) => void;
+    pieselected: (params: any) => void;
+    pieunselected: (params: any) => void;
+    mapselectchanged: (params: any) => void;
+    mapselected: (params: any) => void;
+    mapunselected: (params: any) => void;
+    geoselectchanged: (params: any) => void;
+    geoselected: (params: any) => void;
+    geounselected: (params: any) => void;
+    axisareaselected: (params: any) => void;
+    brush: (params: any) => void;
+    brushselected: (params: any) => void;
+    /** Fired when the user finishes drawing a brush selection */
+    brushend: (params: {
+        areas: Array<{
+            /** Coordinate range covered by the brush — interpretation depends on axis type */
+            coordRange: any;
+            brushType?: string;
+            panelId?: string;
+            range?: any;
+        }>;
+    }) => void;
+}
+/** Props for the low-level `Chart` wrapper around Apache ECharts */
+export interface ChartProps {
+    /**
+     * The ECharts core instance imported by the consumer.
+     * Passed in rather than imported directly so the consumer controls which
+     * ECharts modules are bundled (tree-shaking).
+     */
+    echarts: typeof echarts;
+    /** ECharts option object — passed through to `chart.setOption()` */
+    options: EChartsOption;
+    /**
+     * Additional options passed as the second argument to `chart.setOption()`.
+     * Defaults to `{ notMerge: false, lazyUpdate: true }`.
+     */
+    optionUpdateBehavior?: SetOptionOpts;
+    /** Additional CSS classes applied to the chart container `<div>` */
+    className?: string;
+    /**
+     * When `true`, initialises ECharts with its built-in dark theme.
+     * Changing this value after mount destroys and re-creates the chart instance.
+     */
+    isDarkMode?: boolean;
+    /** Height of the chart container in pixels. Defaults to `350`. */
+    height?: number;
+    /** Subset of ECharts events to listen for. Handlers are bound/unbound reactively. */
+    onEvents?: Partial<ChartEvents>;
+}
+/**
+ * Chart — a low-level wrapper around [Apache ECharts](https://echarts.apache.org).
+ *
+ * Manages the ECharts instance lifecycle (init, option updates, event binding,
+ * resize observation, and disposal). Exposes the raw `echarts.ECharts` instance
+ * via `ref` for imperative access when needed.
+ *
+ * Prefer `TimeseriesChart` for time-series data; use this component when you
+ * need full control over the ECharts option object.
+ *
+ * @example
+ * ```tsx
+ * import * as echarts from "echarts/core";
+ * import { BarChart } from "echarts/charts";
+ * import { GridComponent } from "echarts/components";
+ * import { CanvasRenderer } from "echarts/renderers";
+ *
+ * echarts.use([BarChart, GridComponent, CanvasRenderer]);
+ *
+ * <Chart
+ *   echarts={echarts}
+ *   options={{ xAxis: { data: ["A", "B"] }, yAxis: {}, series: [{ type: "bar", data: [1, 2] }] }}
+ * />
+ * ```
+ */
+export declare const Chart: import('react').ForwardRefExoticComponent<ChartProps & import('react').RefAttributes<echarts.ECharts>>;
+export {};
+//# sourceMappingURL=echart.d.ts.map

package/dist/src/components/chart/echart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"echart.d.ts","sourceRoot":"","sources":["../../../../src/components/chart/echart.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/chart/index.d.ts

@@ -0,0 +1,5 @@
+export { TimeseriesChart, type TimeseriesChartProps, type TimeseriesData, } from './timeseries-chart';
+export { Chart, type ChartEvents, type ChartProps } from './echart';
+export { ChartLegend } from './legend';
+export { ChartPalette } from './color';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/components/chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/chart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,cAAc,GACpB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,UAAU,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}

package/dist/src/components/chart/legend.d.ts

@@ -0,0 +1,42 @@
+/** Shared props for both legend item variants */
+interface LegendItemProps {
+    /** Series name shown as a label */
+    name: string;
+    /** Hex color string for the series indicator dot */
+    color: string;
+    /** Formatted value string to display */
+    value: string;
+    /** Optional unit label shown after the value (e.g. `"ms"`, `"%"`) */
+    unit?: string;
+    /** When `true`, renders the item at 50% opacity to indicate a deselected state */
+    inactive?: boolean;
+}
+/**
+ * Large legend item — stacked layout with a colored dot + series name on top
+ * and a large value with an optional small unit below. Use for prominent
+ * single-metric displays such as dashboard cards.
+ */
+declare function LargeItem({ color, value, name, unit, inactive }: LegendItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Small legend item — inline layout with a colored dot, series name, and value
+ * on a single row. Use for compact legends below or beside a chart.
+ */
+declare function SmallItem({ color, value, name, inactive }: LegendItemProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * ChartLegend — pre-built legend item components for use alongside a chart.
+ *
+ * - `ChartLegend.SmallItem` — compact inline layout; suited for multi-series legends
+ * - `ChartLegend.LargeItem` — stacked layout with a large value; suited for single-metric cards
+ *
+ * @example
+ * ```tsx
+ * <ChartLegend.SmallItem name="Requests" color="#086FFF" value="1,234" />
+ * <ChartLegend.LargeItem name="Latency" color="#CF7EE9" value="42" unit="ms" inactive />
+ * ```
+ */
+export declare const ChartLegend: {
+    SmallItem: typeof SmallItem;
+    LargeItem: typeof LargeItem;
+};
+export {};
+//# sourceMappingURL=legend.d.ts.map

package/dist/src/components/chart/legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../../../src/components/chart/legend.tsx"],"names":[],"mappings":"AAEA,iDAAiD;AACjD,UAAU,eAAe;IACvB,mCAAmC;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,iBAAS,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAkCzE;AAED;;;GAGG;AACH,iBAAS,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAenE;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW;;;CAGvB,CAAC"}