@particle-academy/react-fancy 5.12.0 → 5.14.0

package/dist/chart.d.ts

@@ -0,0 +1,140 @@
+import * as react from 'react';
+
+interface ChartBarData {
+    label: string;
+    value: number;
+    color?: string;
+}
+interface ChartBarProps {
+    data: ChartBarData[];
+    height?: number;
+    showValues?: boolean;
+    className?: string;
+}
+interface ChartDonutData {
+    label: string;
+    value: number;
+    color?: string;
+}
+interface ChartDonutProps {
+    data: ChartDonutData[];
+    size?: number;
+    strokeWidth?: number;
+    showLegend?: boolean;
+    className?: string;
+}
+interface ChartSeries {
+    label: string;
+    data: number[];
+    color?: string;
+}
+interface ChartCommonProps {
+    className?: string;
+    height?: number;
+    xAxis?: boolean | {
+        label?: string;
+        tickCount?: number;
+    };
+    yAxis?: boolean | {
+        label?: string;
+        tickCount?: number;
+    };
+    grid?: boolean | {
+        horizontal?: boolean;
+        vertical?: boolean;
+    };
+    tooltip?: boolean;
+    animate?: boolean;
+    responsive?: boolean;
+}
+interface ChartLineProps extends ChartCommonProps {
+    labels: string[];
+    series: ChartSeries[];
+    curve?: "linear" | "monotone";
+    showDots?: boolean;
+    fill?: boolean;
+    fillOpacity?: number;
+}
+type ChartAreaProps = Omit<ChartLineProps, "fill">;
+interface ChartPieData {
+    label: string;
+    value: number;
+    color?: string;
+}
+interface ChartPieProps {
+    data: ChartPieData[];
+    size?: number;
+    showLabels?: boolean;
+    tooltip?: boolean;
+    className?: string;
+}
+interface ChartSparklineProps {
+    data: number[];
+    width?: number;
+    height?: number;
+    color?: string;
+    className?: string;
+}
+interface ChartHorizontalBarProps {
+    data: ChartBarData[];
+    height?: number;
+    showValues?: boolean;
+    className?: string;
+}
+interface ChartStackedBarProps extends ChartCommonProps {
+    labels: string[];
+    series: ChartSeries[];
+}
+
+declare function ChartBar({ data, height, showValues, className, }: ChartBarProps): react.JSX.Element;
+declare namespace ChartBar {
+    var displayName: string;
+}
+
+declare function ChartDonut({ data, size, strokeWidth, showLegend, className, }: ChartDonutProps): react.JSX.Element;
+declare namespace ChartDonut {
+    var displayName: string;
+}
+
+declare function ChartLine({ labels, series, height, curve, showDots, fill, fillOpacity, xAxis, yAxis, grid, tooltip, animate, responsive, className, }: ChartLineProps): react.JSX.Element;
+declare namespace ChartLine {
+    var displayName: string;
+}
+
+declare function ChartArea(props: ChartAreaProps): react.JSX.Element;
+declare namespace ChartArea {
+    var displayName: string;
+}
+
+declare function ChartPie({ data, size, showLabels, tooltip, className, }: ChartPieProps): react.JSX.Element;
+declare namespace ChartPie {
+    var displayName: string;
+}
+
+declare function ChartSparkline({ data, width, height, color, className, }: ChartSparklineProps): react.JSX.Element;
+declare namespace ChartSparkline {
+    var displayName: string;
+}
+
+declare function ChartHorizontalBar({ data, height, showValues, className, }: ChartHorizontalBarProps): react.JSX.Element;
+declare namespace ChartHorizontalBar {
+    var displayName: string;
+}
+
+declare function ChartStackedBar({ labels, series, height, xAxis, yAxis, grid, tooltip, responsive, className, }: ChartStackedBarProps): react.JSX.Element;
+declare namespace ChartStackedBar {
+    var displayName: string;
+}
+
+declare const Chart: {
+    Bar: typeof ChartBar;
+    Donut: typeof ChartDonut;
+    Line: typeof ChartLine;
+    Area: typeof ChartArea;
+    Pie: typeof ChartPie;
+    Sparkline: typeof ChartSparkline;
+    HorizontalBar: typeof ChartHorizontalBar;
+    StackedBar: typeof ChartStackedBar;
+};
+
+export { Chart, type ChartAreaProps, type ChartBarData, type ChartBarProps, type ChartCommonProps, type ChartDonutData, type ChartDonutProps, type ChartHorizontalBarProps, type ChartLineProps, type ChartPieData, type ChartPieProps, type ChartSeries, type ChartSparklineProps, type ChartStackedBarProps };

package/dist/chart.js

@@ -0,0 +1,4 @@
+export { Chart } from './chunk-PVWPZYTR.js';
+import './chunk-DSUHZO6T.js';
+//# sourceMappingURL=chart.js.map
+//# sourceMappingURL=chart.js.map

package/dist/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chart.js"}

package/dist/chat-drawer.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+var chunkT6IXZZBQ_cjs = require('./chunk-T6IXZZBQ.cjs');
+require('./chunk-AIA5UNQ5.cjs');
+require('./chunk-JXIBUIEY.cjs');
+require('./chunk-3Z6ALUWP.cjs');
+
+
+
+Object.defineProperty(exports, "ChatDrawer", {
+  enumerable: true,
+  get: function () { return chunkT6IXZZBQ_cjs.ChatDrawer; }
+});
+//# sourceMappingURL=chat-drawer.cjs.map
+//# sourceMappingURL=chat-drawer.cjs.map

package/dist/chat-drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chat-drawer.cjs"}

package/dist/chat-drawer.d.cts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * ChatDrawer — tabbed, collapsible panel that sits *above* a `PromptInput`
+ * (via the input's `aboveInput` slot) so the drawer and composer share one
+ * rounded shell. Each tab gets a numbered chip and a content panel; only
+ * one panel renders at a time.
+ *
+ *   <PromptInput
+ *     aboveInput={
+ *       <ChatDrawer
+ *         tabs={[
+ *           { id: "files",   label: "Files" },
+ *           { id: "tools",   label: "Chat Tools" },
+ *           { id: "prompts", label: "Chat Prompts" },
+ *           { id: "deal",    label: "IBM Analytics Platform" },
+ *         ]}
+ *         activeTabId={tab}
+ *         onTabChange={setTab}
+ *         open={open}
+ *         onToggle={setOpen}
+ *       >
+ *         {tab === "tools" && <ToolsGrid />}
+ *         {tab === "deal"  && <DealCard />}
+ *       </ChatDrawer>
+ *     }
+ *     budgetTokens={200_000}
+ *     onSubmit={(text) => send(text)}
+ *   />
+ *
+ * The drawer is purely presentational and slot-driven — you decide what
+ * each tab shows. Tab order in the numbered chips is the order you pass.
+ */
+type ChatDrawerTab = {
+    /** Stable id — used as the React key and as `activeTabId`. */
+    id: string;
+    /** Human label rendered on the chip. */
+    label: string;
+    /**
+     * Optional override for the numbered prefix (defaults to position +1).
+     * Set to `null` to hide the number entirely (e.g. for a context-specific
+     * tab like the deal one in the screenshots).
+     */
+    number?: number | null;
+};
+interface ChatDrawerProps {
+    tabs: ChatDrawerTab[];
+    activeTabId: string;
+    onTabChange: (id: string) => void;
+    /** Body open/closed. Default true. */
+    open?: boolean;
+    /** Called when the chevron is clicked. */
+    onToggle?: (open: boolean) => void;
+    /** Body content for the active tab. */
+    children?: ReactNode;
+    /** Min height of the body when open, in px. Default 140. */
+    minBodyHeight?: number;
+    className?: string;
+}
+declare function ChatDrawer({ tabs, activeTabId, onTabChange, open, onToggle, children, minBodyHeight, className, }: ChatDrawerProps): react.JSX.Element;
+
+export { ChatDrawer, type ChatDrawerProps, type ChatDrawerTab };

package/dist/chat-drawer.d.ts

@@ -0,0 +1,63 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+/**
+ * ChatDrawer — tabbed, collapsible panel that sits *above* a `PromptInput`
+ * (via the input's `aboveInput` slot) so the drawer and composer share one
+ * rounded shell. Each tab gets a numbered chip and a content panel; only
+ * one panel renders at a time.
+ *
+ *   <PromptInput
+ *     aboveInput={
+ *       <ChatDrawer
+ *         tabs={[
+ *           { id: "files",   label: "Files" },
+ *           { id: "tools",   label: "Chat Tools" },
+ *           { id: "prompts", label: "Chat Prompts" },
+ *           { id: "deal",    label: "IBM Analytics Platform" },
+ *         ]}
+ *         activeTabId={tab}
+ *         onTabChange={setTab}
+ *         open={open}
+ *         onToggle={setOpen}
+ *       >
+ *         {tab === "tools" && <ToolsGrid />}
+ *         {tab === "deal"  && <DealCard />}
+ *       </ChatDrawer>
+ *     }
+ *     budgetTokens={200_000}
+ *     onSubmit={(text) => send(text)}
+ *   />
+ *
+ * The drawer is purely presentational and slot-driven — you decide what
+ * each tab shows. Tab order in the numbered chips is the order you pass.
+ */
+type ChatDrawerTab = {
+    /** Stable id — used as the React key and as `activeTabId`. */
+    id: string;
+    /** Human label rendered on the chip. */
+    label: string;
+    /**
+     * Optional override for the numbered prefix (defaults to position +1).
+     * Set to `null` to hide the number entirely (e.g. for a context-specific
+     * tab like the deal one in the screenshots).
+     */
+    number?: number | null;
+};
+interface ChatDrawerProps {
+    tabs: ChatDrawerTab[];
+    activeTabId: string;
+    onTabChange: (id: string) => void;
+    /** Body open/closed. Default true. */
+    open?: boolean;
+    /** Called when the chevron is clicked. */
+    onToggle?: (open: boolean) => void;
+    /** Body content for the active tab. */
+    children?: ReactNode;
+    /** Min height of the body when open, in px. Default 140. */
+    minBodyHeight?: number;
+    className?: string;
+}
+declare function ChatDrawer({ tabs, activeTabId, onTabChange, open, onToggle, children, minBodyHeight, className, }: ChatDrawerProps): react.JSX.Element;
+
+export { ChatDrawer, type ChatDrawerProps, type ChatDrawerTab };

package/dist/chat-drawer.js

@@ -0,0 +1,6 @@
+export { ChatDrawer } from './chunk-BEGDL2CD.js';
+import './chunk-TJ66S5K6.js';
+import './chunk-M7EEQPE7.js';
+import './chunk-DSUHZO6T.js';
+//# sourceMappingURL=chat-drawer.js.map
+//# sourceMappingURL=chat-drawer.js.map

package/dist/chat-drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chat-drawer.js"}

package/dist/checkbox-group.cjs

@@ -0,0 +1,19 @@
+'use strict';
+
+var chunk3SQ34IQC_cjs = require('./chunk-3SQ34IQC.cjs');
+require('./chunk-6BW5BQMN.cjs');
+require('./chunk-PPLR2DNC.cjs');
+require('./chunk-YLGTDBB2.cjs');
+require('./chunk-KJ22KE56.cjs');
+require('./chunk-L3V3BYVS.cjs');
+require('./chunk-OUOEQZHY.cjs');
+require('./chunk-3Z6ALUWP.cjs');
+
+
+
+Object.defineProperty(exports, "CheckboxGroup", {
+  enumerable: true,
+  get: function () { return chunk3SQ34IQC_cjs.CheckboxGroup; }
+});
+//# sourceMappingURL=checkbox-group.cjs.map
+//# sourceMappingURL=checkbox-group.cjs.map

package/dist/checkbox-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"checkbox-group.cjs"}

package/dist/checkbox-group.d.cts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { a as InputBaseProps, b as InputOption } from './inputs.types-CkWdvN-t.cjs';
+import './types-8Sv0rCjw.cjs';
+
+interface CheckboxGroupProps<V = string> extends Omit<InputBaseProps, "id"> {
+    list: InputOption<V>[];
+    value?: V[];
+    defaultValue?: V[];
+    onValueChange?: (values: V[]) => void;
+    orientation?: "horizontal" | "vertical";
+}
+
+declare function CheckboxGroup<V = string>({ size, dirty, error, label, description, required, disabled, className, name, list, value: controlledValue, defaultValue, onValueChange, orientation, mode, ...rest }: CheckboxGroupProps<V>): react.JSX.Element;
+declare namespace CheckboxGroup {
+    var displayName: string;
+}
+
+export { CheckboxGroup, type CheckboxGroupProps };

package/dist/checkbox-group.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { a as InputBaseProps, b as InputOption } from './inputs.types-DERzxpe1.js';
+import './types-8Sv0rCjw.js';
+
+interface CheckboxGroupProps<V = string> extends Omit<InputBaseProps, "id"> {
+    list: InputOption<V>[];
+    value?: V[];
+    defaultValue?: V[];
+    onValueChange?: (values: V[]) => void;
+    orientation?: "horizontal" | "vertical";
+}
+
+declare function CheckboxGroup<V = string>({ size, dirty, error, label, description, required, disabled, className, name, list, value: controlledValue, defaultValue, onValueChange, orientation, mode, ...rest }: CheckboxGroupProps<V>): react.JSX.Element;
+declare namespace CheckboxGroup {
+    var displayName: string;
+}
+
+export { CheckboxGroup, type CheckboxGroupProps };

package/dist/checkbox-group.js

@@ -0,0 +1,10 @@
+export { CheckboxGroup } from './chunk-IE4CM2SN.js';
+import './chunk-K7JGOQJG.js';
+import './chunk-3DJGPNUI.js';
+import './chunk-GFYSELJF.js';
+import './chunk-OL53XYHF.js';
+import './chunk-NRXK42LO.js';
+import './chunk-6FQGMVF2.js';
+import './chunk-DSUHZO6T.js';
+//# sourceMappingURL=checkbox-group.js.map
+//# sourceMappingURL=checkbox-group.js.map

package/dist/checkbox-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"checkbox-group.js"}

package/dist/checkbox.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+var chunkKICZTIZL_cjs = require('./chunk-KICZTIZL.cjs');
+require('./chunk-YLGTDBB2.cjs');
+require('./chunk-KJ22KE56.cjs');
+require('./chunk-L3V3BYVS.cjs');
+require('./chunk-OUOEQZHY.cjs');
+require('./chunk-3Z6ALUWP.cjs');
+
+
+
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () { return chunkKICZTIZL_cjs.Checkbox; }
+});
+//# sourceMappingURL=checkbox.cjs.map
+//# sourceMappingURL=checkbox.cjs.map

package/dist/checkbox.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"checkbox.cjs"}

package/dist/checkbox.d.cts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import { a as InputBaseProps } from './inputs.types-CkWdvN-t.cjs';
+import './types-8Sv0rCjw.cjs';
+
+interface CheckboxProps extends Omit<InputBaseProps, "label">, Omit<HTMLAttributes<HTMLDivElement>, "color" | "defaultChecked" | "onChange" | "id"> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    indeterminate?: boolean;
+    label?: string;
+}
+
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Checkbox, type CheckboxProps };

package/dist/checkbox.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import { a as InputBaseProps } from './inputs.types-DERzxpe1.js';
+import './types-8Sv0rCjw.js';
+
+interface CheckboxProps extends Omit<InputBaseProps, "label">, Omit<HTMLAttributes<HTMLDivElement>, "color" | "defaultChecked" | "onChange" | "id"> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    indeterminate?: boolean;
+    label?: string;
+}
+
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Checkbox, type CheckboxProps };

package/dist/checkbox.js

@@ -0,0 +1,8 @@
+export { Checkbox } from './chunk-CS4GQXYY.js';
+import './chunk-GFYSELJF.js';
+import './chunk-OL53XYHF.js';
+import './chunk-NRXK42LO.js';
+import './chunk-6FQGMVF2.js';
+import './chunk-DSUHZO6T.js';
+//# sourceMappingURL=checkbox.js.map
+//# sourceMappingURL=checkbox.js.map

package/dist/checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"checkbox.js"}

package/dist/chunk-2CNSZCVE.cjs

@@ -0,0 +1,119 @@
+'use strict';
+
+var chunkPBXYU4EV_cjs = require('./chunk-PBXYU4EV.cjs');
+var chunkXZYKPGSK_cjs = require('./chunk-XZYKPGSK.cjs');
+var jsxRuntime = require('react/jsx-runtime');
+
+var CONFIDENCE_TIERS = [
+  { min: 0.85, color: "#10b981", label: "high" },
+  { min: 0.6, color: "#f59e0b", label: "medium" },
+  { min: 0, color: "#ef4444", label: "low" }
+];
+function tier(c) {
+  return CONFIDENCE_TIERS.find((t) => c >= t.min) ?? CONFIDENCE_TIERS[2];
+}
+function ReasonTag({
+  value,
+  reason,
+  confidence = 1,
+  sources = [],
+  by,
+  theme = "dot",
+  pinned = false,
+  onFollowUp,
+  className
+}) {
+  const t = tier(confidence);
+  const trigger = theme === "chip" ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: `inline-flex cursor-help items-center gap-1 rounded-full px-2 py-0.5 text-[12px] font-medium ${className ?? ""}`,
+      style: { backgroundColor: t.color + "22", color: t.color },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "h-1.5 w-1.5 rounded-full",
+            style: { backgroundColor: t.color }
+          }
+        ),
+        value,
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] opacity-70", children: "?" })
+      ]
+    }
+  ) : theme === "underline" ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: `cursor-help underline decoration-dotted underline-offset-2 ${className ?? ""}`,
+      style: { textDecorationColor: t.color },
+      children: [
+        value,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "ml-0.5 font-mono text-[10px]",
+            style: { color: t.color },
+            children: "?"
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `inline-flex cursor-help items-baseline gap-1 ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: value }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: "inline-block h-1.5 w-1.5 rounded-full align-middle",
+        style: { backgroundColor: t.color },
+        title: "reason available"
+      }
+    )
+  ] });
+  if (pinned) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex flex-col items-start gap-0.5 align-top", children: [
+      trigger,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "block max-w-[280px] rounded border-l-2 pl-2 text-[11px] leading-snug text-zinc-600 dark:text-zinc-300",
+          style: { borderColor: t.color },
+          children: reason
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(chunkPBXYU4EV_cjs.Popover, { hover: true, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkPBXYU4EV_cjs.Popover.Trigger, { children: trigger }),
+    /* @__PURE__ */ jsxRuntime.jsx(chunkPBXYU4EV_cjs.Popover.Content, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-72 space-y-2 text-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            className: "text-[10px] font-semibold uppercase tracking-wider",
+            style: { color: t.color },
+            children: [
+              t.label,
+              " confidence \xB7 ",
+              (confidence * 100).toFixed(0),
+              "%"
+            ]
+          }
+        ),
+        by && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto font-mono text-[10px] text-zinc-400", children: [
+          "@",
+          by
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] leading-snug text-zinc-700 dark:text-zinc-200", children: reason }),
+      sources.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[10px] uppercase tracking-wider text-zinc-400", children: "sources" }),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "mt-0.5 space-y-0.5 text-[12px]", children: sources.map((s, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: s.href ? /* @__PURE__ */ jsxRuntime.jsx("a", { className: "text-violet-600 hover:underline", href: s.href, children: s.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-600 dark:text-zinc-300", children: s.label }) }, i)) })
+      ] }),
+      onFollowUp && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end pt-1", children: /* @__PURE__ */ jsxRuntime.jsx(chunkXZYKPGSK_cjs.Button, { size: "sm", variant: "ghost", onClick: onFollowUp, children: "ask follow-up" }) })
+    ] }) })
+  ] });
+}
+
+exports.ReasonTag = ReasonTag;
+//# sourceMappingURL=chunk-2CNSZCVE.cjs.map
+//# sourceMappingURL=chunk-2CNSZCVE.cjs.map

package/dist/chunk-2CNSZCVE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ReasonTag/ReasonTag.tsx"],"names":["jsxs","jsx","Popover","Button"],"mappings":";;;;;;AAuDA,IAAM,gBAAA,GAAyE;AAAA,EAC7E,EAAE,GAAA,EAAK,IAAA,EAAM,KAAA,EAAO,SAAA,EAAW,OAAO,MAAA,EAAO;AAAA,EAC7C,EAAE,GAAA,EAAK,GAAA,EAAK,KAAA,EAAO,SAAA,EAAW,OAAO,QAAA,EAAS;AAAA,EAC9C,EAAE,GAAA,EAAK,CAAA,EAAG,KAAA,EAAO,SAAA,EAAW,OAAO,KAAA;AACrC,CAAA;AAEA,SAAS,KAAK,CAAA,EAAW;AACvB,EAAA,OAAO,gBAAA,CAAiB,KAAK,CAAC,CAAA,KAAM,KAAK,CAAA,CAAE,GAAG,CAAA,IAAK,gBAAA,CAAiB,CAAC,CAAA;AACvE;AAEO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA,GAAa,CAAA;AAAA,EACb,UAAU,EAAC;AAAA,EACX,EAAA;AAAA,EACA,KAAA,GAAQ,KAAA;AAAA,EACR,MAAA,GAAS,KAAA;AAAA,EACT,UAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,CAAA,GAAI,KAAK,UAAU,CAAA;AAEzB,EAAA,MAAM,OAAA,GACJ,UAAU,MAAA,mBACRA,eAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,CAAA,4FAAA,EAA+F,SAAA,IAAa,EAAE,CAAA,CAAA;AAAA,MACzH,KAAA,EAAO,EAAE,eAAA,EAAiB,CAAA,CAAE,QAAQ,IAAA,EAAM,KAAA,EAAO,EAAE,KAAA,EAAM;AAAA,MAEzD,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,0BAAA;AAAA,YACV,KAAA,EAAO,EAAE,eAAA,EAAiB,CAAA,CAAE,KAAA;AAAM;AAAA,SACpC;AAAA,QACC,KAAA;AAAA,wBACDA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wBAAA,EAAyB,QAAA,EAAA,GAAA,EAAC;AAAA;AAAA;AAAA,GAC5C,GACE,UAAU,WAAA,mBACZD,eAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,CAAA,2DAAA,EAA8D,SAAA,IAAa,EAAE,CAAA,CAAA;AAAA,MACxF,KAAA,EAAO,EAAE,mBAAA,EAAqB,CAAA,CAAE,KAAA,EAAM;AAAA,MAErC,QAAA,EAAA;AAAA,QAAA,KAAA;AAAA,wBACDC,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,8BAAA;AAAA,YACV,KAAA,EAAO,EAAE,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM;AAAA,YACzB,QAAA,EAAA;AAAA;AAAA;AAED;AAAA;AAAA,sBAGFD,eAAA,CAAC,MAAA,EAAA,EAAK,WAAW,CAAA,6CAAA,EAAgD,SAAA,IAAa,EAAE,CAAA,CAAA,EAC9E,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAA,EAAe,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,oBACrCA,cAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,oDAAA;AAAA,QACV,KAAA,EAAO,EAAE,eAAA,EAAiB,CAAA,CAAE,KAAA,EAAM;AAAA,QAClC,KAAA,EAAM;AAAA;AAAA;AACR,GAAA,EACF,CAAA;AAGJ,EAAA,IAAI,MAAA,EAAQ;AACV,IAAA,uBACED,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oDAAA,EACb,QAAA,EAAA;AAAA,MAAA,OAAA;AAAA,sBACDC,cAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,uGAAA;AAAA,UACV,KAAA,EAAO,EAAE,WAAA,EAAa,CAAA,CAAE,KAAA,EAAM;AAAA,UAE7B,QAAA,EAAA;AAAA;AAAA;AACH,KAAA,EACF,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACED,eAAA,CAACE,yBAAA,EAAA,EAAQ,KAAA,EAAK,IAAA,EACZ,QAAA,EAAA;AAAA,oBAAAD,cAAA,CAACC,yBAAA,CAAQ,OAAA,EAAR,EAAiB,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,mCACzBA,yBAAA,CAAQ,OAAA,EAAR,EACC,QAAA,kBAAAF,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,wBAAA,EACb,QAAA,EAAA;AAAA,sBAAAA,eAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2BAAA,EACb,QAAA,EAAA;AAAA,wBAAAA,eAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,oDAAA;AAAA,YACV,KAAA,EAAO,EAAE,KAAA,EAAO,CAAA,CAAE,KAAA,EAAM;AAAA,YAEvB,QAAA,EAAA;AAAA,cAAA,CAAA,CAAE,KAAA;AAAA,cAAM,mBAAA;AAAA,cAAA,CAAgB,UAAA,GAAa,GAAA,EAAK,OAAA,CAAQ,CAAC,CAAA;AAAA,cAAE;AAAA;AAAA;AAAA,SACxD;AAAA,QACC,EAAA,oBACCA,eAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,6CAAA,EAA8C,QAAA,EAAA;AAAA,UAAA,GAAA;AAAA,UAC1D;AAAA,SAAA,EACJ;AAAA,OAAA,EAEJ,CAAA;AAAA,sBACAC,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,2DAAA,EACV,QAAA,EAAA,MAAA,EACH,CAAA;AAAA,MACC,OAAA,CAAQ,MAAA,GAAS,CAAA,oBAChBD,eAAA,CAAC,KAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oDAAA,EAAqD,QAAA,EAAA,SAAA,EAEpE,CAAA;AAAA,wBACAA,cAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAU,gCAAA,EACX,kBAAQ,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,qBACfA,cAAA,CAAC,IAAA,EAAA,EACE,QAAA,EAAA,CAAA,CAAE,IAAA,kCACA,GAAA,EAAA,EAAE,SAAA,EAAU,iCAAA,EAAkC,IAAA,EAAM,CAAA,CAAE,IAAA,EACpD,QAAA,EAAA,CAAA,CAAE,KAAA,EACL,oBAEAA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kCAAA,EACb,QAAA,EAAA,CAAA,CAAE,KAAA,EACL,CAAA,EAAA,EARK,CAUT,CACD,CAAA,EACH;AAAA,OAAA,EACF,CAAA;AAAA,MAED,UAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBACb,QAAA,kBAAAA,cAAA,CAACE,wBAAA,EAAA,EAAO,IAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,OAAA,EAAQ,OAAA,EAAS,UAAA,EAAY,2BAEvD,CAAA,EACF;AAAA,KAAA,EAEJ,CAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ","file":"chunk-2CNSZCVE.cjs","sourcesContent":["import { Popover } from \"../Popover\";\nimport { Button } from \"../Button\";\n\n/**\n * ReasonTag — wraps any value with a small affordance that reveals the\n * agent's reasoning, sources, and confidence on hover or click.\n *\n *   <ReasonTag\n *     value=\"$1.4M\"\n *     reason=\"Projected Q3 ARR after stacking renewals.\"\n *     confidence={0.91}\n *     sources={[{ label: \"Q2 actuals · CRM export\" }]}\n *     by=\"Forecaster\"\n *   />\n *\n * Three visual styles:\n *   • \"dot\"       — value with a tiny coloured dot (default, subtle)\n *   • \"underline\" — dotted underline + trailing \"?\"\n *   • \"chip\"      — full coloured pill (loud)\n *\n * Confidence drives the colour via three tiers (high / medium / low),\n * so a quick visual scan tells the human which suggestions deserve a\n * second look without opening any tooltips.\n *\n * `pinned` swaps the popover for an inline annotation slot — useful\n * when explainability should always be visible, not buried in a hover.\n */\nexport type ReasonTagSource = { label: string; href?: string };\n\nexport type ReasonTagTheme = \"dot\" | \"underline\" | \"chip\";\n\nexport interface ReasonTagProps {\n  /** The value the tag wraps — usually a number, label, or short phrase. */\n  value: React.ReactNode;\n  /** Free-text rationale shown in the popover / inline annotation. */\n  reason: string;\n  /** 0..1 confidence. Drives the tier colour. Defaults to 1. */\n  confidence?: number;\n  /** Optional list of sources (label + optional href). */\n  sources?: ReasonTagSource[];\n  /** Optional author / agent name shown in the popover header. */\n  by?: string;\n  /** Visual treatment for the trigger. */\n  theme?: ReasonTagTheme;\n  /**\n   * When true, the popover is replaced with an always-visible inline\n   * annotation below the value.\n   */\n  pinned?: boolean;\n  /** Called when the user hits the \"ask follow-up\" action. */\n  onFollowUp?: () => void;\n  /** Optional className applied to the trigger element. */\n  className?: string;\n}\n\nconst CONFIDENCE_TIERS: Array<{ min: number; color: string; label: string }> = [\n  { min: 0.85, color: \"#10b981\", label: \"high\" },\n  { min: 0.6, color: \"#f59e0b\", label: \"medium\" },\n  { min: 0, color: \"#ef4444\", label: \"low\" },\n];\n\nfunction tier(c: number) {\n  return CONFIDENCE_TIERS.find((t) => c >= t.min) ?? CONFIDENCE_TIERS[2];\n}\n\nexport function ReasonTag({\n  value,\n  reason,\n  confidence = 1,\n  sources = [],\n  by,\n  theme = \"dot\",\n  pinned = false,\n  onFollowUp,\n  className,\n}: ReasonTagProps) {\n  const t = tier(confidence);\n\n  const trigger =\n    theme === \"chip\" ? (\n      <span\n        className={`inline-flex cursor-help items-center gap-1 rounded-full px-2 py-0.5 text-[12px] font-medium ${className ?? \"\"}`}\n        style={{ backgroundColor: t.color + \"22\", color: t.color }}\n      >\n        <span\n          className=\"h-1.5 w-1.5 rounded-full\"\n          style={{ backgroundColor: t.color }}\n        />\n        {value}\n        <span className=\"text-[10px] opacity-70\">?</span>\n      </span>\n    ) : theme === \"underline\" ? (\n      <span\n        className={`cursor-help underline decoration-dotted underline-offset-2 ${className ?? \"\"}`}\n        style={{ textDecorationColor: t.color }}\n      >\n        {value}\n        <span\n          className=\"ml-0.5 font-mono text-[10px]\"\n          style={{ color: t.color }}\n        >\n          ?\n        </span>\n      </span>\n    ) : (\n      <span className={`inline-flex cursor-help items-baseline gap-1 ${className ?? \"\"}`}>\n        <span className=\"font-medium\">{value}</span>\n        <span\n          className=\"inline-block h-1.5 w-1.5 rounded-full align-middle\"\n          style={{ backgroundColor: t.color }}\n          title=\"reason available\"\n        />\n      </span>\n    );\n\n  if (pinned) {\n    return (\n      <span className=\"inline-flex flex-col items-start gap-0.5 align-top\">\n        {trigger}\n        <span\n          className=\"block max-w-[280px] rounded border-l-2 pl-2 text-[11px] leading-snug text-zinc-600 dark:text-zinc-300\"\n          style={{ borderColor: t.color }}\n        >\n          {reason}\n        </span>\n      </span>\n    );\n  }\n\n  return (\n    <Popover hover>\n      <Popover.Trigger>{trigger}</Popover.Trigger>\n      <Popover.Content>\n        <div className=\"w-72 space-y-2 text-sm\">\n          <div className=\"flex items-baseline gap-2\">\n            <span\n              className=\"text-[10px] font-semibold uppercase tracking-wider\"\n              style={{ color: t.color }}\n            >\n              {t.label} confidence · {(confidence * 100).toFixed(0)}%\n            </span>\n            {by && (\n              <span className=\"ml-auto font-mono text-[10px] text-zinc-400\">\n                @{by}\n              </span>\n            )}\n          </div>\n          <p className=\"text-[13px] leading-snug text-zinc-700 dark:text-zinc-200\">\n            {reason}\n          </p>\n          {sources.length > 0 && (\n            <div>\n              <div className=\"text-[10px] uppercase tracking-wider text-zinc-400\">\n                sources\n              </div>\n              <ul className=\"mt-0.5 space-y-0.5 text-[12px]\">\n                {sources.map((s, i) => (\n                  <li key={i}>\n                    {s.href ? (\n                      <a className=\"text-violet-600 hover:underline\" href={s.href}>\n                        {s.label}\n                      </a>\n                    ) : (\n                      <span className=\"text-zinc-600 dark:text-zinc-300\">\n                        {s.label}\n                      </span>\n                    )}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          )}\n          {onFollowUp && (\n            <div className=\"flex justify-end pt-1\">\n              <Button size=\"sm\" variant=\"ghost\" onClick={onFollowUp}>\n                ask follow-up\n              </Button>\n            </div>\n          )}\n        </div>\n      </Popover.Content>\n    </Popover>\n  );\n}\n"]}