@upbound/monarch-blocks 0.1.0

package/dist/chart.js

@@ -0,0 +1,332 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/chart.tsx
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [
+        {
+          text: [
+            "display-hero",
+            "display-kpi-sm",
+            "display-kpi",
+            "display-kpi-lg",
+            "display-feature",
+            "h1",
+            "h2",
+            "h3",
+            "h4",
+            "body-lg",
+            "body",
+            "body-sm",
+            "caption",
+            "eyebrow"
+          ]
+        }
+      ]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/chart.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var THEMES = { light: "", dark: ".dark" };
+var INITIAL_DIMENSION = { width: 320, height: 200 };
+var ChartContext = React.createContext(null);
+function useChart() {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+function ChartContainer(_a) {
+  var _b = _a, {
+    id,
+    className,
+    children,
+    config,
+    initialDimension = INITIAL_DIMENSION
+  } = _b, props = __objRest(_b, [
+    "id",
+    "className",
+    "children",
+    "config",
+    "initialDimension"
+  ]);
+  const uniqueId = React.useId();
+  const chartId = `chart-${id != null ? id : uniqueId.replace(/:/g, "")}`;
+  return /* @__PURE__ */ jsx(ChartContext.Provider, { value: { config }, children: /* @__PURE__ */ jsxs(
+    "div",
+    __spreadProps(__spreadValues({
+      "data-slot": "chart",
+      "data-chart": chartId,
+      className: cn(
+        "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsx(ChartStyle, { id: chartId, config }),
+        /* @__PURE__ */ jsx(RechartsPrimitive.ResponsiveContainer, { initialDimension, children })
+      ]
+    })
+  ) });
+}
+var ChartStyle = ({ id, config }) => {
+  const colorConfig = Object.entries(config).filter(([, config2]) => {
+    var _a;
+    return (_a = config2.theme) != null ? _a : config2.color;
+  });
+  if (!colorConfig.length) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "style",
+    {
+      dangerouslySetInnerHTML: {
+        __html: Object.entries(THEMES).map(
+          ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+            var _a, _b;
+            const color = (_b = (_a = itemConfig.theme) == null ? void 0 : _a[theme]) != null ? _b : itemConfig.color;
+            return color ? `  --color-${key}: ${color};` : null;
+          }).join("\n")}
+}
+`
+        ).join("\n")
+      }
+    }
+  );
+};
+var ChartTooltip = RechartsPrimitive.Tooltip;
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey
+}) {
+  const { config } = useChart();
+  const tooltipLabel = React.useMemo(() => {
+    var _a, _b, _c, _d;
+    if (hideLabel || !(payload == null ? void 0 : payload.length)) {
+      return null;
+    }
+    const [item] = payload;
+    const key = `${(_b = (_a = labelKey != null ? labelKey : item == null ? void 0 : item.dataKey) != null ? _a : item == null ? void 0 : item.name) != null ? _b : "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value = !labelKey && typeof label === "string" ? (_d = (_c = config[label]) == null ? void 0 : _c.label) != null ? _d : label : itemConfig == null ? void 0 : itemConfig.label;
+    if (labelFormatter) {
+      return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: labelFormatter(value, payload) });
+    }
+    if (!value) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { className: cn("font-medium", labelClassName), children: value });
+  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+  if (!active || !(payload == null ? void 0 : payload.length)) {
+    return null;
+  }
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "border-border/50 bg-background text-body-sm grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 shadow-xl",
+        className
+      ),
+      children: [
+        !nestLabel ? tooltipLabel : null,
+        /* @__PURE__ */ jsx("div", { className: "grid gap-1.5", children: payload.filter((item) => item.type !== "none").map((item, index) => {
+          var _a, _b, _c, _d, _e;
+          const key = `${(_b = (_a = nameKey != null ? nameKey : item.name) != null ? _a : item.dataKey) != null ? _b : "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = (_d = color != null ? color : (_c = item.payload) == null ? void 0 : _c.fill) != null ? _d : item.color;
+          return /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center"
+              ),
+              children: formatter && (item == null ? void 0 : item.value) !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                (itemConfig == null ? void 0 : itemConfig.icon) ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: cn("border-border shrink-0 rounded-full bg-(--color-bg)", {
+                      "h-2 w-2": indicator === "dot",
+                      "w-1": indicator === "line",
+                      "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                      "my-0.5": nestLabel && indicator === "dashed"
+                    }),
+                    style: {
+                      "--color-bg": indicatorColor,
+                      "--color-border": indicatorColor
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "grid gap-1.5", children: [
+                        nestLabel ? tooltipLabel : null,
+                        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: (_e = itemConfig == null ? void 0 : itemConfig.label) != null ? _e : item.name })
+                      ] }),
+                      item.value != null && /* @__PURE__ */ jsx("span", { className: "text-foreground font-mono font-medium tabular-nums", children: typeof item.value === "number" ? item.value.toLocaleString() : String(item.value) })
+                    ]
+                  }
+                )
+              ] })
+            },
+            index
+          );
+        }) })
+      ]
+    }
+  );
+}
+var ChartLegend = RechartsPrimitive.Legend;
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey
+}) {
+  const { config } = useChart();
+  if (!(payload == null ? void 0 : payload.length)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className), children: payload.filter((item) => item.type !== "none").map((item, index) => {
+    var _a;
+    const key = `${(_a = nameKey != null ? nameKey : item.dataKey) != null ? _a : "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"),
+        children: [
+          (itemConfig == null ? void 0 : itemConfig.icon) && !hideIcon ? /* @__PURE__ */ jsx(itemConfig.icon, {}) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-2 w-2 shrink-0 rounded-full",
+              style: {
+                backgroundColor: item.color
+              }
+            }
+          ),
+          itemConfig == null ? void 0 : itemConfig.label
+        ]
+      },
+      index
+    );
+  }) });
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+  if (typeof payload !== "object" || payload === null) {
+    return void 0;
+  }
+  const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+  let configLabelKey = key;
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+  return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+function ChartHeader(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ "data-slot": "chart-header", className: cn("flex items-center justify-between pb-4", className) }, props));
+}
+function ChartTitle(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ "data-slot": "chart-title", className: cn("text-h3", className) }, props));
+}
+function ChartDescription(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ "data-slot": "chart-description", className: cn("text-body text-muted-foreground", className) }, props));
+}
+function ChartAction(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx("div", __spreadValues({ "data-slot": "chart-action", className: cn(className) }, props));
+}
+function ChartFooter(_a) {
+  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    __spreadValues({
+      "data-slot": "chart-footer",
+      className: cn("text-body-sm text-muted-foreground flex items-center gap-2 pt-4", className)
+    }, props)
+  );
+}
+export {
+  ChartAction,
+  ChartContainer,
+  ChartDescription,
+  ChartFooter,
+  ChartHeader,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+  ChartTitle,
+  ChartTooltip,
+  ChartTooltipContent
+};
+//# sourceMappingURL=chart.js.map

package/dist/chart.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chart.tsx","../src/lib/utils.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport * as RechartsPrimitive from 'recharts';\nimport type { TooltipValueType } from 'recharts';\n\nimport { cn } from '@/lib/utils';\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: '', dark: '.dark' } as const;\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const;\ntype TooltipNameType = number | string;\n\nexport type ChartConfig = Record<\n  string,\n  {\n    label?: React.ReactNode;\n    icon?: React.ComponentType;\n  } & ({ color?: string; theme?: never } | { color?: never; theme: Record<keyof typeof THEMES, string> })\n>;\n\ntype ChartContextProps = {\n  config: ChartConfig;\n};\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null);\n\nfunction useChart() {\n  const context = React.useContext(ChartContext);\n\n  if (!context) {\n    throw new Error('useChart must be used within a <ChartContainer />');\n  }\n\n  return context;\n}\n\nfunction ChartContainer({\n  id,\n  className,\n  children,\n  config,\n  initialDimension = INITIAL_DIMENSION,\n  ...props\n}: React.ComponentProps<'div'> & {\n  config: ChartConfig;\n  children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>['children'];\n  initialDimension?: {\n    width: number;\n    height: number;\n  };\n}) {\n  const uniqueId = React.useId();\n  const chartId = `chart-${id ?? uniqueId.replace(/:/g, '')}`;\n\n  return (\n    <ChartContext.Provider value={{ config }}>\n      <div\n        data-slot=\"chart\"\n        data-chart={chartId}\n        className={cn(\n          \"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden\",\n          className,\n        )}\n        {...props}\n      >\n        <ChartStyle id={chartId} config={config} />\n        <RechartsPrimitive.ResponsiveContainer initialDimension={initialDimension}>\n          {children}\n        </RechartsPrimitive.ResponsiveContainer>\n      </div>\n    </ChartContext.Provider>\n  );\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n  const colorConfig = Object.entries(config).filter(([, config]) => config.theme ?? config.color);\n\n  if (!colorConfig.length) {\n    return null;\n  }\n\n  return (\n    <style\n      dangerouslySetInnerHTML={{\n        __html: Object.entries(THEMES)\n          .map(\n            ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n  .map(([key, itemConfig]) => {\n    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ?? itemConfig.color;\n    return color ? `  --color-${key}: ${color};` : null;\n  })\n  .join('\\n')}\n}\n`,\n          )\n          .join('\\n'),\n      }}\n    />\n  );\n};\n\nconst ChartTooltip = RechartsPrimitive.Tooltip;\n\nfunction ChartTooltipContent({\n  active,\n  payload,\n  className,\n  indicator = 'dot',\n  hideLabel = false,\n  hideIndicator = false,\n  label,\n  labelFormatter,\n  labelClassName,\n  formatter,\n  color,\n  nameKey,\n  labelKey,\n}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n  React.ComponentProps<'div'> & {\n    hideLabel?: boolean;\n    hideIndicator?: boolean;\n    indicator?: 'line' | 'dot' | 'dashed';\n    nameKey?: string;\n    labelKey?: string;\n  } & Omit<RechartsPrimitive.DefaultTooltipContentProps<TooltipValueType, TooltipNameType>, 'accessibilityLayer'>) {\n  const { config } = useChart();\n\n  const tooltipLabel = React.useMemo(() => {\n    if (hideLabel || !payload?.length) {\n      return null;\n    }\n\n    const [item] = payload;\n    const key = `${labelKey ?? item?.dataKey ?? item?.name ?? 'value'}`;\n    const itemConfig = getPayloadConfigFromPayload(config, item, key);\n    const value = !labelKey && typeof label === 'string' ? (config[label]?.label ?? label) : itemConfig?.label;\n\n    if (labelFormatter) {\n      return <div className={cn('font-medium', labelClassName)}>{labelFormatter(value, payload)}</div>;\n    }\n\n    if (!value) {\n      return null;\n    }\n\n    return <div className={cn('font-medium', labelClassName)}>{value}</div>;\n  }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);\n\n  if (!active || !payload?.length) {\n    return null;\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== 'dot';\n\n  return (\n    <div\n      className={cn(\n        'border-border/50 bg-background text-body-sm grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 shadow-xl',\n        className,\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload\n          .filter(item => item.type !== 'none')\n          .map((item, index) => {\n            const key = `${nameKey ?? item.name ?? item.dataKey ?? 'value'}`;\n            const itemConfig = getPayloadConfigFromPayload(config, item, key);\n            const indicatorColor = color ?? item.payload?.fill ?? item.color;\n\n            return (\n              <div\n                key={index}\n                className={cn(\n                  '[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5',\n                  indicator === 'dot' && 'items-center',\n                )}\n              >\n                {formatter && item?.value !== undefined && item.name ? (\n                  formatter(item.value, item.name, item, index, item.payload)\n                ) : (\n                  <>\n                    {itemConfig?.icon ? (\n                      <itemConfig.icon />\n                    ) : (\n                      !hideIndicator && (\n                        <div\n                          className={cn('border-border shrink-0 rounded-full bg-(--color-bg)', {\n                            'h-2 w-2': indicator === 'dot',\n                            'w-1': indicator === 'line',\n                            'w-0 border-[1.5px] border-dashed bg-transparent': indicator === 'dashed',\n                            'my-0.5': nestLabel && indicator === 'dashed',\n                          })}\n                          style={\n                            {\n                              '--color-bg': indicatorColor,\n                              '--color-border': indicatorColor,\n                            } as React.CSSProperties\n                          }\n                        />\n                      )\n                    )}\n                    <div\n                      className={cn(\n                        'flex flex-1 justify-between leading-none',\n                        nestLabel ? 'items-end' : 'items-center',\n                      )}\n                    >\n                      <div className=\"grid gap-1.5\">\n                        {nestLabel ? tooltipLabel : null}\n                        <span className=\"text-muted-foreground\">{itemConfig?.label ?? item.name}</span>\n                      </div>\n                      {item.value != null && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {typeof item.value === 'number' ? item.value.toLocaleString() : String(item.value)}\n                        </span>\n                      )}\n                    </div>\n                  </>\n                )}\n              </div>\n            );\n          })}\n      </div>\n    </div>\n  );\n}\n\nconst ChartLegend = RechartsPrimitive.Legend;\n\nfunction ChartLegendContent({\n  className,\n  hideIcon = false,\n  payload,\n  verticalAlign = 'bottom',\n  nameKey,\n}: React.ComponentProps<'div'> & {\n  hideIcon?: boolean;\n  nameKey?: string;\n} & RechartsPrimitive.DefaultLegendContentProps) {\n  const { config } = useChart();\n\n  if (!payload?.length) {\n    return null;\n  }\n\n  return (\n    <div className={cn('flex items-center justify-center gap-4', verticalAlign === 'top' ? 'pb-3' : 'pt-3', className)}>\n      {payload\n        .filter(item => item.type !== 'none')\n        .map((item, index) => {\n          const key = `${nameKey ?? item.dataKey ?? 'value'}`;\n          const itemConfig = getPayloadConfigFromPayload(config, item, key);\n\n          return (\n            <div\n              key={index}\n              className={cn('[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3')}\n            >\n              {itemConfig?.icon && !hideIcon ? (\n                <itemConfig.icon />\n              ) : (\n                <div\n                  className=\"h-2 w-2 shrink-0 rounded-full\"\n                  style={{\n                    backgroundColor: item.color,\n                  }}\n                />\n              )}\n              {itemConfig?.label}\n            </div>\n          );\n        })}\n    </div>\n  );\n}\n\nfunction getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {\n  if (typeof payload !== 'object' || payload === null) {\n    return undefined;\n  }\n\n  const payloadPayload =\n    'payload' in payload && typeof payload.payload === 'object' && payload.payload !== null\n      ? payload.payload\n      : undefined;\n\n  let configLabelKey: string = key;\n\n  if (key in payload && typeof payload[key as keyof typeof payload] === 'string') {\n    configLabelKey = payload[key as keyof typeof payload] as string;\n  } else if (\n    payloadPayload &&\n    key in payloadPayload &&\n    typeof payloadPayload[key as keyof typeof payloadPayload] === 'string'\n  ) {\n    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string;\n  }\n\n  return configLabelKey in config ? config[configLabelKey] : config[key];\n}\n\nfunction ChartHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div data-slot=\"chart-header\" className={cn('flex items-center justify-between pb-4', className)} {...props} />\n  );\n}\n\nfunction ChartTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"chart-title\" className={cn('text-h3', className)} {...props} />;\n}\n\nfunction ChartDescription({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"chart-description\" className={cn('text-body text-muted-foreground', className)} {...props} />;\n}\n\nfunction ChartAction({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"chart-action\" className={cn(className)} {...props} />;\n}\n\nfunction ChartFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"chart-footer\"\n      className={cn('text-body-sm text-muted-foreground flex items-center gap-2 pt-4', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  ChartAction,\n  ChartContainer,\n  ChartDescription,\n  ChartFooter,\n  ChartHeader,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n  ChartTitle,\n  ChartTooltip,\n  ChartTooltipContent,\n};\n","import { clsx, type ClassValue } from 'clsx';\nimport { extendTailwindMerge } from 'tailwind-merge';\n\nconst twMerge = extendTailwindMerge({\n  extend: {\n    classGroups: {\n      'font-size': [\n        {\n          text: [\n            'display-hero',\n            'display-kpi-sm',\n            'display-kpi',\n            'display-kpi-lg',\n            'display-feature',\n            'h1',\n            'h2',\n            'h3',\n            'h4',\n            'body-lg',\n            'body',\n            'body-sm',\n            'caption',\n            'eyebrow',\n          ],\n        },\n      ],\n    },\n  },\n});\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"],"mappings":"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","names":["config"]}

package/dist/chat-interface.d.ts

@@ -0,0 +1,143 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface ChatMessage {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    toolCalls?: ChatToolCall[];
+    timestamp?: string;
+    /**
+     * When set on a user message, the thread renders a Marker directly below
+     * that turn showing the page that was in scope when the message was sent
+     * (per Monarch's "Use page as context" toggle — see Q8/Q9 of the chat
+     * reconciliation memory). Per-turn, not sticky across turns.
+     */
+    pageContext?: string;
+}
+interface ChatToolCall {
+    name: string;
+    description?: string;
+    apiUsed?: string;
+    isNew?: boolean;
+}
+interface ChatSession {
+    id: string;
+    title: string;
+    surface?: string;
+    messageCount?: number;
+    updatedAt?: string;
+}
+interface ChatSessionListProps {
+    sessions: ChatSession[];
+    activeSessionId?: string;
+    onSelectSession: (id: string) => void;
+    className?: string;
+}
+declare function ChatSessionList({ sessions, activeSessionId, onSelectSession, className }: ChatSessionListProps): react_jsx_runtime.JSX.Element;
+declare function ChatMessageBubble({ message, userName: _userName, assistantName, }: {
+    message: ChatMessage;
+    /**
+     * Kept for API stability. Monarch's canonical chat surface renders user
+     * turns without an avatar (single-user product, no multi-user chat) — the
+     * prop no longer feeds any visible affordance but consumers passing it are
+     * still valid.
+     */
+    userName?: string;
+    /**
+     * Label rendered in the assistant identity header. Defaults to the fixed
+     * "Upbound AI" per the widget's canonical convention; overridable for
+     * multi-agent scenarios (e.g. named provider agents in a group chat).
+     */
+    assistantName?: string;
+}): react_jsx_runtime.JSX.Element;
+interface ChatRoutine {
+    id: string;
+    name: string;
+    description?: string;
+}
+interface ChatInputProps {
+    onSend?: (message: string) => void;
+    placeholder?: string;
+    /**
+     * User-defined workflows surfaced in the input's left-side dropdown.
+     * When provided (even as an empty array), the Workflows trigger renders.
+     * When undefined, the dropdown is hidden. Prop name stays `routines` for
+     * backward compatibility; the visible label is "Workflows" per the current
+     * design vocabulary (see Q6 of the chat reconciliation memory).
+     */
+    routines?: ChatRoutine[];
+    onSelectRoutine?: (id: string) => void;
+    /** Handler for the "Manage workflows" link at the bottom of the dropdown. */
+    onManageRoutines?: () => void;
+    /**
+     * Whether the "Use page as context" toggle is currently active. When
+     * true, the toggle button renders with a subtle brand-tinted background,
+     * and the consumer's onSend should attach the current page reference to
+     * the outgoing message via `ChatMessage.pageContext`. See Q8/Q9 of the
+     * memory for the pattern.
+     */
+    usePageAsContext?: boolean;
+    /**
+     * Handler for the "Use page as context" toggle. Parent owns the state;
+     * this callback should flip `usePageAsContext` on the parent.
+     */
+    onUsePageAsContext?: () => void;
+    /** Handler for the attachment affordance. Optional placeholder. */
+    onAttach?: () => void;
+    className?: string;
+}
+declare function ChatInput({ onSend, placeholder, routines, onSelectRoutine, onManageRoutines, usePageAsContext, onUsePageAsContext, onAttach, className, }: ChatInputProps): react_jsx_runtime.JSX.Element;
+interface ChatThreadProps {
+    messages: ChatMessage[];
+    onSend?: (message: string) => void;
+    title?: string;
+    subtitle?: string;
+    placeholder?: string;
+    suggestions?: string[];
+    /**
+     * Name of the AI assistant — used in the empty-state greeting:
+     * "👋 Hi, I'm {assistantName}". Falls back to a neutral phrasing when
+     * omitted so the greeting still reads correctly.
+     */
+    assistantName?: string;
+    /**
+     * Name of the current user — used to derive 2-letter initials for the
+     * user message avatar. Mirrors the sidebar's `NavUser` pattern so the
+     * user reads as the same person across surfaces. Falls back to the
+     * generic user icon when omitted.
+     */
+    userName?: string;
+    routines?: ChatRoutine[];
+    onSelectRoutine?: (id: string) => void;
+    onManageRoutines?: () => void;
+    /** Whether "Use page as context" is currently active. See ChatInputProps. */
+    usePageAsContext?: boolean;
+    onUsePageAsContext?: () => void;
+    onAttach?: () => void;
+    callout?: React.ReactNode;
+    headerActions?: React.ReactNode;
+    className?: string;
+    /**
+     * When `true`, renders a "Thinking…" indicator below the last message
+     * (typically a user message awaiting an assistant response). Hides
+     * automatically when the assistant message lands and `isThinking`
+     * flips back to `false`.
+     */
+    isThinking?: boolean;
+}
+declare function ChatThread({ messages, onSend, title, subtitle, placeholder, suggestions, assistantName, userName, routines, onSelectRoutine, onManageRoutines, usePageAsContext, onUsePageAsContext, onAttach, callout, headerActions, className, isThinking, }: ChatThreadProps): react_jsx_runtime.JSX.Element;
+interface ChatNavRailProps {
+    onNewSession?: () => void;
+    onOpenRoutines?: () => void;
+    onOpenConnectors?: () => void;
+    onOpenCustomize?: () => void;
+}
+interface ChatInterfaceProps extends ChatThreadProps, ChatNavRailProps {
+    sessions: ChatSession[];
+    activeSessionId?: string;
+    onSelectSession?: (id: string) => void;
+}
+declare function ChatInterface({ sessions, activeSessionId, onSelectSession, onNewSession, onOpenRoutines, onOpenConnectors, onOpenCustomize, className, ...threadProps }: ChatInterfaceProps): react_jsx_runtime.JSX.Element;
+
+export { ChatInput, type ChatInputProps, ChatInterface, type ChatInterfaceProps, type ChatMessage, ChatMessageBubble, type ChatRoutine, type ChatSession, ChatSessionList, type ChatSessionListProps, ChatThread, type ChatThreadProps, type ChatToolCall };