@alpic-ai/ui 1.144.0 → 1.145.1

package/dist/components/accordion-card.d.mts

@@ -1,5 +1,5 @@
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import * as React$1 from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
 
 //#region src/components/accordion-card.d.ts
 declare function AccordionCard({

package/dist/components/accordion.d.mts

@@ -1,5 +1,5 @@
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import * as React$1 from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
 
 //#region src/components/accordion.d.ts
 declare function Accordion({

package/dist/components/alert.d.mts

@@ -1,5 +1,5 @@
-import { VariantProps } from "class-variance-authority";
 import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
 
 //#region src/components/alert.d.ts
 declare const alertVariants: (props?: ({

package/dist/components/area-chart.mjs

@@ -4,8 +4,9 @@ import { makeXAxisTick, orderByLuminance, resolveSeries } from "../lib/chart.mjs
 import { useChartContext } from "./chart-container.mjs";
 import { ChartLegend } from "./chart-legend.mjs";
 import { ChartTooltipContent } from "./chart-tooltip.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Skeleton } from "./skeleton.mjs";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Area, AreaChart as AreaChart$1, CartesianGrid, LabelList, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 //#region src/components/area-chart.tsx
 const CURVE_TYPE = {
@@ -113,14 +114,11 @@ function AreaChart({ data, index, series, variant = "stacked", curve = "monotone
 	const isEmpty = data.length === 0 || rendered.length === 0;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "area-chart",
-		className: cn("flex w-full flex-col gap-3", className),
+		className: cn("flex w-full flex-col gap-3", "[&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "w-full",
 			style: { height },
-			children: loading ? /* @__PURE__ */ jsxs("div", {
-				className: "flex h-full items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs",
-				children: [/* @__PURE__ */ jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-border border-t-foreground" }), "loading…"]
-			}) : isEmpty ? /* @__PURE__ */ jsx("div", {
+			children: loading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full rounded-lg" }) : isEmpty ? /* @__PURE__ */ jsx("div", {
 				className: "flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs",
 				children: "no data in range"
 			}) : /* @__PURE__ */ jsx(ResponsiveContainer, {
@@ -181,7 +179,7 @@ function AreaChart({ data, index, series, variant = "stacked", curve = "monotone
 							...axis,
 							tick: makeXAxisTick(theme),
 							interval: "preserveStartEnd",
-							minTickGap: 44
+							minTickGap: 56
 						}),
 						/* @__PURE__ */ jsx(YAxis, {
 							...axis,

package/dist/components/attachment-tile.mjs

@@ -1,9 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
 import { TooltipIconButton } from "./tooltip-icon-button.mjs";
+import { useState } from "react";
 import { FileText, XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 //#region src/components/attachment-tile.tsx
 function AttachmentTile({ src, isImage, label, onRemove, onClick, className }) {
 	const [hasError, setHasError] = useState(false);

package/dist/components/avatar.d.mts

@@ -1,5 +1,5 @@
-import { VariantProps } from "class-variance-authority";
 import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 
 //#region src/components/avatar.d.ts

package/dist/components/bar-chart.mjs

@@ -4,8 +4,9 @@ import { makeXAxisTick, orderByLuminance, resolveSeries } from "../lib/chart.mjs
 import { useChartContext } from "./chart-container.mjs";
 import { ChartLegend } from "./chart-legend.mjs";
 import { ChartTooltipContent } from "./chart-tooltip.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Skeleton } from "./skeleton.mjs";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Bar, BarChart as BarChart$1, CartesianGrid, LabelList, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 //#region src/components/bar-chart.tsx
 const BAR_RADIUS = 4;
@@ -96,14 +97,11 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 	const isEmpty = data.length === 0 || rendered.length === 0;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "bar-chart",
-		className: cn("flex w-full flex-col gap-3", className),
+		className: cn("flex w-full flex-col gap-3", "[&_.recharts-surface]:outline-none [&_.recharts-wrapper]:outline-none", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "w-full",
 			style: { height },
-			children: loading ? /* @__PURE__ */ jsxs("div", {
-				className: "flex h-full items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs",
-				children: [/* @__PURE__ */ jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-border border-t-foreground" }), "loading…"]
-			}) : isEmpty ? /* @__PURE__ */ jsx("div", {
+			children: loading ? /* @__PURE__ */ jsx(Skeleton, { className: "h-full w-full rounded-lg" }) : isEmpty ? /* @__PURE__ */ jsx("div", {
 				className: "flex h-full items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs",
 				children: "no data in range"
 			}) : /* @__PURE__ */ jsx(ResponsiveContainer, {
@@ -165,7 +163,7 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 							...axis,
 							tick: makeXAxisTick(theme),
 							interval: "preserveStartEnd",
-							minTickGap: 44
+							minTickGap: 56
 						}),
 						/* @__PURE__ */ jsx(YAxis, {
 							...axis,
@@ -218,11 +216,7 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 							strokeWidth: 0,
 							radius: radiusFor(slot),
 							maxBarSize: MAX_BAR_SIZE,
-							activeBar: {
-								fillOpacity: 1,
-								stroke: theme.card,
-								strokeWidth: 1
-							},
+							activeBar: false,
 							isAnimationActive: false,
 							animationDuration: 650,
 							animationEasing: "ease-out",

package/dist/components/bar-list.mjs

@@ -3,8 +3,8 @@ import { cn } from "../lib/cn.mjs";
 import { rampColor } from "../lib/chart-palette.mjs";
 import { formatShare } from "../lib/chart.mjs";
 import { useChartContext } from "./chart-container.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/bar-list.tsx
 const SEMANTIC_KEY = {
 	error: "destructive",

package/dist/components/button.d.mts

@@ -1,5 +1,5 @@
-import { VariantProps } from "class-variance-authority";
 import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({

package/dist/components/chart-container.mjs

@@ -1,9 +1,9 @@
 "use client";
+import { useChartTheme } from "../hooks/use-chart-theme.mjs";
 import { cn } from "../lib/cn.mjs";
 import { CHART_PALETTES } from "../lib/chart-palette.mjs";
-import { useChartTheme } from "../hooks/use-chart-theme.mjs";
-import { jsx } from "react/jsx-runtime";
 import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/chart-container.tsx
 const ChartContext = React$1.createContext(null);
 function ChartContainer({ palette = "magenta", className, ...props }) {

package/dist/components/chart-tooltip.mjs

@@ -3,12 +3,16 @@ import { cn } from "../lib/cn.mjs";
 import { useChartContext } from "./chart-container.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/chart-tooltip.tsx
+const MAX_TOOLTIP_ROWS = 8;
 function ChartTooltipContent({ active, payload, label, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, hideLabel, showTotal, totalLabel = "Total", className }) {
 	const { theme } = useChartContext();
 	if (!active || !payload?.length) return null;
 	const toNumber = (value) => typeof value === "number" ? value : Number(value ?? 0);
 	const total = payload.reduce((sum, item) => sum + toNumber(item.value), 0);
-	const rows = [...payload].sort((lower, upper) => toNumber(upper.value) - toNumber(lower.value));
+	const sorted = [...payload].sort((lower, upper) => toNumber(upper.value) - toNumber(lower.value));
+	const rows = sorted.slice(0, MAX_TOOLTIP_ROWS);
+	const overflow = sorted.slice(MAX_TOOLTIP_ROWS);
+	const overflowTotal = overflow.reduce((sum, item) => sum + toNumber(item.value), 0);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("min-w-[130px] rounded-lg border px-3 py-2.5 shadow-lg", "border-border bg-popover text-popover-foreground", className),
 		children: [!hideLabel && label !== void 0 && /* @__PURE__ */ jsx("p", {
@@ -16,37 +20,58 @@ function ChartTooltipContent({ active, payload, label, valueFormatter = (value)
 			children: labelFormatter ? labelFormatter(label) : label
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-1",
-			children: [rows.map((item, index) => {
-				const swatch = [
-					item.color,
-					item.stroke,
-					item.fill
-				].find((candidate) => typeof candidate === "string" && candidate.length > 0 && !candidate.startsWith("url(")) ?? theme.mutedForeground;
-				const numeric = toNumber(item.value);
-				return /* @__PURE__ */ jsxs("div", {
+			children: [
+				rows.map((item, index) => {
+					const swatch = [
+						item.color,
+						item.stroke,
+						item.fill
+					].find((candidate) => typeof candidate === "string" && candidate.length > 0 && !candidate.startsWith("url(")) ?? theme.mutedForeground;
+					const numeric = toNumber(item.value);
+					return /* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-4 text-text-xs",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "inline-flex items-center gap-2 text-muted-foreground",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "size-2 shrink-0 rounded-[2px]",
+								style: { background: swatch }
+							}), item.name]
+						}), /* @__PURE__ */ jsx("span", {
+							className: "font-mono font-semibold tabular-nums text-foreground",
+							children: valueFormatter(numeric)
+						})]
+					}, `${item.dataKey ?? index}`);
+				}),
+				overflow.length > 0 && /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between gap-4 text-text-xs",
 					children: [/* @__PURE__ */ jsxs("span", {
-						className: "inline-flex items-center gap-2 text-muted-foreground",
-						children: [/* @__PURE__ */ jsx("span", {
-							"aria-hidden": true,
-							className: "size-2 shrink-0 rounded-[2px]",
-							style: { background: swatch }
-						}), item.name]
+						className: "inline-flex items-center gap-2 text-quaternary-foreground",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "size-2 shrink-0"
+							}),
+							"+",
+							overflow.length,
+							" more"
+						]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-mono font-semibold tabular-nums text-quaternary-foreground",
+						children: valueFormatter(overflowTotal)
+					})]
+				}),
+				showTotal && /* @__PURE__ */ jsxs("div", {
+					className: "mt-1 flex items-center justify-between gap-4 border-border border-t pt-1.5 text-text-xs",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "font-mono text-quaternary-foreground uppercase tracking-wider text-[10px]",
+						children: totalLabel
 					}), /* @__PURE__ */ jsx("span", {
 						className: "font-mono font-semibold tabular-nums text-foreground",
-						children: valueFormatter(numeric)
+						children: valueFormatter(total)
 					})]
-				}, `${item.dataKey ?? index}`);
-			}), showTotal && /* @__PURE__ */ jsxs("div", {
-				className: "mt-1 flex items-center justify-between gap-4 border-border border-t pt-1.5 text-text-xs",
-				children: [/* @__PURE__ */ jsx("span", {
-					className: "font-mono text-quaternary-foreground uppercase tracking-wider text-[10px]",
-					children: totalLabel
-				}), /* @__PURE__ */ jsx("span", {
-					className: "font-mono font-semibold tabular-nums text-foreground",
-					children: valueFormatter(total)
-				})]
-			})]
+				})
+			]
 		})]
 	});
 }

package/dist/components/combobox.d.mts

@@ -1,7 +1,7 @@
 import { PopoverContent } from "./popover.mjs";
 import { selectTriggerVariants } from "./select-trigger-variants.mjs";
-import { VariantProps } from "class-variance-authority";
 import { ReactNode } from "react";
+import { VariantProps } from "class-variance-authority";
 import { Command } from "cmdk";
 
 //#region src/components/combobox.d.ts

package/dist/components/combobox.mjs

@@ -3,9 +3,9 @@ import { cn } from "../lib/cn.mjs";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.mjs";
 import { selectTriggerVariants } from "./select-trigger-variants.mjs";
 import { TagDismissible } from "./tag.mjs";
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
 import { CheckIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useMemo, useState } from "react";
 import { Command } from "cmdk";
 //#region src/components/combobox.tsx
 const ComboboxContext = createContext(null);

package/dist/components/copyable.mjs

@@ -1,7 +1,7 @@
 "use client";
+import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.mjs";
 import { cn } from "../lib/cn.mjs";
 import { Button } from "./button.mjs";
-import { useCopyToClipboard } from "../hooks/use-copy-to-clipboard.mjs";
 import { Check, Copy } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/copyable.tsx

package/dist/components/dialog.d.mts

@@ -1,6 +1,6 @@
 import { ButtonProps } from "./button.mjs";
-import { VariantProps } from "class-variance-authority";
 import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 
 //#region src/components/dialog.d.ts

package/dist/components/donut-chart.mjs

@@ -3,8 +3,8 @@ import { cn } from "../lib/cn.mjs";
 import { paletteColor } from "../lib/chart-palette.mjs";
 import { formatShare } from "../lib/chart.mjs";
 import { useChartContext } from "./chart-container.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
 //#region src/components/donut-chart.tsx
 const GEOMETRY = {

package/dist/components/dropdown-menu.d.mts

@@ -1,5 +1,5 @@
-import { VariantProps } from "class-variance-authority";
 import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 
 //#region src/components/dropdown-menu.d.ts

package/dist/components/form.mjs

@@ -7,9 +7,9 @@ import { Input } from "./input.mjs";
 import { RadioGroup, RadioGroupItem } from "./radio-group.mjs";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.mjs";
 import { Textarea } from "./textarea.mjs";
+import * as React$1 from "react";
 import { Info } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React$1 from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
 //#region src/components/form.tsx

package/dist/components/heatmap-chart.d.mts

@@ -22,6 +22,9 @@ interface HeatmapChartProps {
     label: string;
     format?: (value: number) => string;
   }>;
+  tooltipTitleKey?: string;
+  colorScale?: "linear" | "rank";
+  showLegend?: boolean;
   ariaLabel?: string;
   className?: string;
 }
@@ -41,6 +44,9 @@ declare function HeatmapChart({
   xTickFormatter,
   yTickFormatter,
   tooltipMetrics,
+  tooltipTitleKey,
+  colorScale,
+  showLegend,
   ariaLabel,
   className
 }: HeatmapChartProps): React$1.JSX.Element;