@alpic-ai/ui 0.0.0-staging.gfdded29 → 0.0.0-staging.gfee65d9

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

@@ -1,40 +1,15 @@
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import * as React$1 from "react";
-
 //#region src/components/accordion-card.d.ts
-declare function AccordionCard({
-  defaultOpen,
-  open,
-  onOpenChange,
-  disabled,
-  className,
-  children,
-  ...props
-}: {
+declare function AccordionCard({ defaultOpen, open, onOpenChange, disabled, className, children, ...props }: {
   defaultOpen?: boolean;
   open?: boolean;
   onOpenChange?: (nextOpen: boolean) => void;
   disabled?: boolean;
 } & Omit<React$1.ComponentProps<typeof AccordionPrimitive.Root>, "type" | "collapsible" | "defaultValue" | "value" | "onValueChange" | "disabled">): React$1.JSX.Element;
-declare function AccordionCardHeader({
-  className,
-  children,
-  ...props
-}: React$1.ComponentProps<typeof AccordionPrimitive.Trigger>): React$1.JSX.Element;
-declare function AccordionCardTitle({
-  className,
-  children,
-  ...props
-}: React$1.HTMLAttributes<HTMLHeadingElement>): React$1.JSX.Element;
-/**
- * `className` is forwarded to the inner padding wrapper, not the Radix Content root.
- * The root always applies overflow-hidden and the accordion animations.
- * To override overflow or animation behavior, wrap this component in an additional element.
- */
-declare function AccordionCardContent({
-  className,
-  children,
-  ...props
-}: React$1.ComponentProps<typeof AccordionPrimitive.Content>): React$1.JSX.Element;
+declare function AccordionCardHeader({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Trigger>): React$1.JSX.Element;
+declare function AccordionCardTitle({ className, children, ...props }: React$1.HTMLAttributes<HTMLHeadingElement>): React$1.JSX.Element;
+/** `className` styles the inner padding wrapper, not the Radix Content root, which keeps overflow-hidden and the accordion animations. */
+declare function AccordionCardContent({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Content>): React$1.JSX.Element;
 //#endregion
 export { AccordionCard, AccordionCardContent, AccordionCardHeader, AccordionCardTitle };

package/dist/components/accordion-card.mjs

@@ -41,11 +41,7 @@ function AccordionCardTitle({ className, children, ...props }) {
 		children
 	});
 }
-/**
-* `className` is forwarded to the inner padding wrapper, not the Radix Content root.
-* The root always applies overflow-hidden and the accordion animations.
-* To override overflow or animation behavior, wrap this component in an additional element.
-*/
+/** `className` styles the inner padding wrapper, not the Radix Content root, which keeps overflow-hidden and the accordion animations. */
 function AccordionCardContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
 		"data-slot": "accordion-card-content",

package/dist/components/accordion.d.mts

@@ -1,28 +1,10 @@
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import * as React$1 from "react";
-
 //#region src/components/accordion.d.ts
-declare function Accordion({
-  ...props
-}: React$1.ComponentProps<typeof AccordionPrimitive.Root>): React$1.JSX.Element;
-declare function AccordionItem({
-  className,
-  ...props
-}: React$1.ComponentProps<typeof AccordionPrimitive.Item>): React$1.JSX.Element;
-declare function AccordionTrigger({
-  className,
-  children,
-  ...props
-}: React$1.ComponentProps<typeof AccordionPrimitive.Trigger>): React$1.JSX.Element;
-/**
- * `className` is forwarded to the inner padding wrapper, not the Radix Content root.
- * The root always applies overflow-hidden and the accordion animations.
- * To override overflow or animation behavior, wrap this component in an additional element.
- */
-declare function AccordionContent({
-  className,
-  children,
-  ...props
-}: React$1.ComponentProps<typeof AccordionPrimitive.Content>): React$1.JSX.Element;
+declare function Accordion({ ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Root>): React$1.JSX.Element;
+declare function AccordionItem({ className, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Item>): React$1.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Trigger>): React$1.JSX.Element;
+/** `className` styles the inner padding wrapper, not the Radix Content root, which keeps overflow-hidden and the accordion animations. */
+declare function AccordionContent({ className, children, ...props }: React$1.ComponentProps<typeof AccordionPrimitive.Content>): React$1.JSX.Element;
 //#endregion
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/accordion.mjs

@@ -28,11 +28,7 @@ function AccordionTrigger({ className, children, ...props }) {
 		})
 	});
 }
-/**
-* `className` is forwarded to the inner padding wrapper, not the Radix Content root.
-* The root always applies overflow-hidden and the accordion animations.
-* To override overflow or animation behavior, wrap this component in an additional element.
-*/
+/** `className` styles the inner padding wrapper, not the Radix Content root, which keeps overflow-hidden and the accordion animations. */
 function AccordionContent({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(AccordionPrimitive.Content, {
 		"data-slot": "accordion-content",

package/dist/components/alert.d.mts

@@ -1,38 +1,19 @@
 import { VariantProps } from "class-variance-authority";
 import * as React$1 from "react";
-
 //#region src/components/alert.d.ts
 declare const alertVariants: (props?: ({
   variant?: "default" | "destructive" | "warning" | "success" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface AlertProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {}
-declare function Alert({
-  className,
-  variant,
-  ...props
-}: AlertProps): React$1.JSX.Element;
-declare function AlertTitle({
-  className,
-  ...props
-}: React$1.HTMLAttributes<HTMLParagraphElement>): React$1.JSX.Element;
-declare function AlertDescription({
-  className,
-  ...props
-}: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
+declare function Alert({ className, variant, ...props }: AlertProps): React$1.JSX.Element;
+declare function AlertTitle({ className, ...props }: React$1.HTMLAttributes<HTMLParagraphElement>): React$1.JSX.Element;
+declare function AlertDescription({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
 interface ConvenienceAlertProps {
   title?: string;
   description?: React$1.ReactNode;
   className?: string;
 }
-declare function ErrorAlert({
-  title,
-  description,
-  className
-}: ConvenienceAlertProps): React$1.JSX.Element;
-declare function WarningAlert({
-  title,
-  description,
-  className
-}: ConvenienceAlertProps): React$1.JSX.Element;
+declare function ErrorAlert({ title, description, className }: ConvenienceAlertProps): React$1.JSX.Element;
+declare function WarningAlert({ title, description, className }: ConvenienceAlertProps): React$1.JSX.Element;
 //#endregion
 export { Alert, AlertDescription, AlertTitle, ErrorAlert, WarningAlert };

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

@@ -1,7 +1,6 @@
 import { ChartSeries } from "../lib/chart.mjs";
 import { ChartPaletteName } from "../lib/chart-palette.mjs";
 import * as React$1 from "react";
-
 //#region src/components/area-chart.d.ts
 declare const CURVE_TYPE: {
   readonly monotone: "monotone";
@@ -39,26 +38,6 @@ interface AreaChartProps {
   labelFormatter?: (label: string | number) => string;
   className?: string;
 }
-declare function AreaChart({
-  data,
-  index,
-  series,
-  variant,
-  curve,
-  legend,
-  legendAlign,
-  valueFlags,
-  height,
-  yAxisWidth,
-  palette,
-  referenceLine,
-  markers,
-  lastValueLabel,
-  texture,
-  loading,
-  valueFormatter,
-  labelFormatter,
-  className
-}: AreaChartProps): React$1.JSX.Element;
+declare function AreaChart({ data, index, series, variant, curve, legend, legendAlign, valueFlags, height, yAxisWidth, palette, referenceLine, markers, lastValueLabel, texture, loading, valueFormatter, labelFormatter, className }: AreaChartProps): React$1.JSX.Element;
 //#endregion
 export { AreaChart, AreaChartProps, ChartMarker };

package/dist/components/area-chart.mjs

@@ -1,13 +1,14 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
 import { makeXAxisTick, orderByLuminance, resolveSeries } from "../lib/chart.mjs";
 import { useChartContext } from "./chart-container.mjs";
 import { ChartLegend } from "./chart-legend.mjs";
+import { computeNumericMax, makeActiveDot, makeChartAxis, makeLastValueLabel, makeLegendItems, renderMarkers, renderReferenceLine } from "./chart-primitives.mjs";
 import { ChartTooltipContent } from "./chart-tooltip.mjs";
+import { Skeleton } from "./skeleton.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
-import { Area, AreaChart as AreaChart$1, CartesianGrid, LabelList, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { Area, AreaChart as AreaChart$1, CartesianGrid, LabelList, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 //#region src/components/area-chart.tsx
 const CURVE_TYPE = {
 	monotone: "monotone",
@@ -17,28 +18,13 @@ const CURVE_TYPE = {
 function AreaChart({ data, index, series, variant = "stacked", curve = "monotone", legend = false, legendAlign = "left", valueFlags = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, lastValueLabel = false, texture = false, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
 	const { palette: paletteColors, theme } = useChartContext(palette);
 	const reactId = React$1.useId().replace(/:/g, "");
-	const animated = !useReducedMotion();
 	const resolved = resolveSeries(series, paletteColors, theme);
 	const stacked = variant === "stacked" || variant === "expand";
 	const rendered = stacked ? orderByLuminance(resolved) : resolved;
 	const filled = !(variant === "grouped" && rendered.length > 1);
 	const lead = resolved[0];
 	const withTotal = stacked && rendered.length > 1;
-	const numericMax = React$1.useMemo(() => {
-		let max = 0;
-		for (const row of data) {
-			let rowTotal = 0;
-			for (const entry of series) {
-				const value = Number(row[entry.key]);
-				if (Number.isFinite(value)) {
-					rowTotal += value;
-					if (!stacked && value > max) max = value;
-				}
-			}
-			if (stacked && rowTotal > max) max = rowTotal;
-		}
-		return max;
-	}, [
+	const numericMax = React$1.useMemo(() => computeNumericMax(data, series, stacked), [
 		data,
 		series,
 		stacked
@@ -50,79 +36,21 @@ function AreaChart({ data, index, series, variant = "stacked", curve = "monotone
 		bottom: 2,
 		left: 0
 	};
-	const axis = {
-		stroke: theme.border,
-		tick: {
-			fill: theme.axisForeground,
-			fontSize: 10,
-			fontFamily: theme.fontMono
-		},
-		tickLine: false,
-		axisLine: {
-			stroke: theme.border,
-			strokeOpacity: .6
-		}
-	};
-	const legendItems = resolved.map((entry) => ({
-		name: entry.name,
-		color: entry.color,
-		dashed: entry.dashed
-	}));
-	const activeDotFor = (entry) => valueFlags ? (dotProps) => {
-		if (dotProps.cx == null || dotProps.cy == null) return /* @__PURE__ */ jsx("g", {});
-		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
-			cx: dotProps.cx,
-			cy: dotProps.cy,
-			r: 3.5,
-			fill: entry.color,
-			stroke: theme.card,
-			strokeWidth: 2
-		}), /* @__PURE__ */ jsx("text", {
-			x: dotProps.cx,
-			y: dotProps.cy - 8,
-			textAnchor: "middle",
-			fill: entry.color,
-			fontFamily: theme.fontMono,
-			fontSize: 10,
-			style: { fontVariantNumeric: "tabular-nums" },
-			children: valueFormatter(Number(dotProps.value ?? 0))
-		})] });
-	} : {
-		r: 3.5,
-		fill: entry.color,
-		stroke: theme.card,
-		strokeWidth: 2
-	};
+	const axis = makeChartAxis(theme);
+	const legendItems = makeLegendItems(resolved);
 	const fillFor = (entry, slot) => {
 		if (!filled) return "none";
 		if (texture && lead && entry.key === lead.key) return `url(#hatch-${reactId})`;
 		return `url(#area-${reactId}-${slot})`;
 	};
-	const renderLastLabel = (color) => (props) => {
-		if (props.index !== data.length - 1 || props.x == null || props.y == null) return null;
-		return /* @__PURE__ */ jsx("text", {
-			x: Number(props.x) + 6,
-			y: Number(props.y),
-			dy: 3,
-			fill: color,
-			fontFamily: theme.fontMono,
-			fontSize: 10,
-			textAnchor: "start",
-			style: { fontVariantNumeric: "tabular-nums" },
-			children: valueFormatter(Number(props.value ?? 0))
-		});
-	};
 	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, {
@@ -183,7 +111,7 @@ function AreaChart({ data, index, series, variant = "stacked", curve = "monotone
 							...axis,
 							tick: makeXAxisTick(theme),
 							interval: "preserveStartEnd",
-							minTickGap: 44
+							minTickGap: 56
 						}),
 						/* @__PURE__ */ jsx(YAxis, {
 							...axis,
@@ -207,25 +135,10 @@ function AreaChart({ data, index, series, variant = "stacked", curve = "monotone
 								showTotal: withTotal
 							})
 						}),
-						referenceLine?.band && /* @__PURE__ */ jsx(ReferenceArea, {
-							y1: referenceLine.y,
-							y2: numericMax,
-							fill: theme.warning,
-							fillOpacity: .06,
-							ifOverflow: "extendDomain"
-						}),
-						referenceLine && /* @__PURE__ */ jsx(ReferenceLine, {
-							y: referenceLine.y,
-							stroke: theme.warning,
-							strokeDasharray: "4 4",
-							strokeOpacity: .6,
-							label: referenceLine.label ? {
-								value: referenceLine.label,
-								fill: theme.warning,
-								fontSize: 9,
-								fontFamily: theme.fontMono,
-								position: "insideBottomRight"
-							} : void 0
+						renderReferenceLine({
+							referenceLine,
+							numericMax,
+							theme
 						}),
 						rendered.map((entry, slot) => /* @__PURE__ */ jsx(Area, {
 							type: curveType,
@@ -237,30 +150,24 @@ function AreaChart({ data, index, series, variant = "stacked", curve = "monotone
 							strokeDasharray: entry.dashed ? "5 3" : void 0,
 							fill: fillFor(entry, slot),
 							dot: false,
-							activeDot: activeDotFor(entry),
-							isAnimationActive: animated,
+							activeDot: makeActiveDot(entry, {
+								valueFlags,
+								theme,
+								valueFormatter
+							}),
+							isAnimationActive: false,
 							animationDuration: 650,
 							animationEasing: "ease-out",
 							children: lastValueLabel && /* @__PURE__ */ jsx(LabelList, {
 								dataKey: entry.key,
-								content: renderLastLabel(entry.color)
+								content: makeLastValueLabel(entry.color, {
+									dataLength: data.length,
+									theme,
+									valueFormatter
+								})
 							})
 						}, entry.key)),
-						markers?.map((marker) => /* @__PURE__ */ jsx(ReferenceDot, {
-							x: marker.x,
-							y: marker.y,
-							r: 3.5,
-							fill: marker.color ?? theme.foreground,
-							stroke: theme.card,
-							strokeWidth: 2,
-							label: marker.label ? {
-								value: marker.label,
-								fill: marker.color ?? theme.foreground,
-								fontSize: 9,
-								fontFamily: theme.fontMono,
-								position: "top"
-							} : void 0
-						}, `${marker.x}-${marker.y}`))
+						renderMarkers(markers, theme)
 					]
 				})
 			})

package/dist/components/attachment-tile.d.mts

@@ -1,24 +1,12 @@
 //#region src/components/attachment-tile.d.ts
 interface AttachmentTileProps {
-  /** Source URL for the attachment thumbnail */
   src?: string;
-  /** Whether the attachment is an image */
   isImage?: boolean;
-  /** Accessible label describing the attachment */
   label?: string;
-  /** Called when the remove button is clicked */
   onRemove?: () => void;
-  /** Called when the tile is clicked (e.g. to open a preview) */
   onClick?: () => void;
   className?: string;
 }
-declare function AttachmentTile({
-  src,
-  isImage,
-  label,
-  onRemove,
-  onClick,
-  className
-}: AttachmentTileProps): import("react").JSX.Element;
+declare function AttachmentTile({ src, isImage, label, onRemove, onClick, className }: AttachmentTileProps): import("react").JSX.Element;
 //#endregion
 export { AttachmentTile, type AttachmentTileProps };

package/dist/components/avatar.d.mts

@@ -1,7 +1,6 @@
 import { VariantProps } from "class-variance-authority";
 import * as React$1 from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-
 //#region src/components/avatar.d.ts
 declare const avatarVariants: (props?: ({
   size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
@@ -11,21 +10,9 @@ type AvatarStatus = "online";
 interface AvatarProps extends React$1.ComponentProps<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
   status?: AvatarStatus;
 }
-declare function Avatar({
-  size,
-  status,
-  className,
-  children,
-  ...props
-}: AvatarProps): React$1.JSX.Element;
-declare function AvatarImage({
-  className,
-  ...props
-}: React$1.ComponentProps<typeof AvatarPrimitive.Image>): React$1.JSX.Element;
-declare function AvatarFallback({
-  className,
-  ...props
-}: React$1.ComponentProps<typeof AvatarPrimitive.Fallback>): React$1.JSX.Element;
+declare function Avatar({ size, status, className, children, ...props }: AvatarProps): React$1.JSX.Element;
+declare function AvatarImage({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Image>): React$1.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<typeof AvatarPrimitive.Fallback>): React$1.JSX.Element;
 interface AvatarLabelGroupProps extends React$1.ComponentProps<"div"> {
   size?: "sm" | "md";
   src?: string;
@@ -35,16 +22,6 @@ interface AvatarLabelGroupProps extends React$1.ComponentProps<"div"> {
   label?: string;
   status?: AvatarStatus;
 }
-declare function AvatarLabelGroup({
-  size,
-  src,
-  alt,
-  fallback,
-  name,
-  label,
-  status,
-  className,
-  ...props
-}: AvatarLabelGroupProps): React$1.JSX.Element;
+declare function AvatarLabelGroup({ size, src, alt, fallback, name, label, status, className, ...props }: AvatarLabelGroupProps): React$1.JSX.Element;
 //#endregion
 export { Avatar, AvatarFallback, AvatarImage, AvatarLabelGroup, type AvatarSize, type AvatarStatus };

package/dist/components/badge.d.mts

@@ -1,18 +1,11 @@
 import { VariantProps } from "class-variance-authority";
-
 //#region src/components/badge.d.ts
 declare const badgeVariants: (props?: ({
   variant?: "warning" | "success" | "secondary" | "primary" | "error" | null | undefined;
   size?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface BadgeProps extends React.ComponentProps<"span">, VariantProps<typeof badgeVariants> {}
-declare function Badge({
-  className,
-  variant,
-  size,
-  children,
-  ...props
-}: BadgeProps): import("react").JSX.Element;
+declare function Badge({ className, variant, size, children, ...props }: BadgeProps): import("react").JSX.Element;
 type BadgeVariant = NonNullable<VariantProps<typeof badgeVariants>["variant"]>;
 //#endregion
 export { Badge, type BadgeVariant, badgeVariants };

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

@@ -2,7 +2,6 @@ import { ChartSeries } from "../lib/chart.mjs";
 import { ChartPaletteName } from "../lib/chart-palette.mjs";
 import { ChartMarker } from "./area-chart.mjs";
 import * as React$1 from "react";
-
 //#region src/components/bar-chart.d.ts
 interface BarChartProps {
   data: ReadonlyArray<Record<string, string | number | null | undefined>>;
@@ -14,6 +13,8 @@ interface BarChartProps {
   valueLabels?: boolean;
   height?: number;
   yAxisWidth?: number;
+  bare?: boolean;
+  barCategoryGap?: number | string;
   palette?: ChartPaletteName;
   referenceLine?: {
     y: number;
@@ -22,29 +23,12 @@ interface BarChartProps {
   };
   markers?: ChartMarker[];
   texture?: boolean;
+  partialLastBar?: boolean;
   loading?: boolean;
   valueFormatter?: (value: number) => string;
   labelFormatter?: (label: string | number) => string;
   className?: string;
 }
-declare function BarChart({
-  data,
-  index,
-  series,
-  variant,
-  legend,
-  legendAlign,
-  valueLabels,
-  height,
-  yAxisWidth,
-  palette,
-  referenceLine,
-  markers,
-  texture,
-  loading,
-  valueFormatter,
-  labelFormatter,
-  className
-}: BarChartProps): React$1.JSX.Element;
+declare function BarChart({ data, index, series, variant, legend, legendAlign, valueLabels, height, yAxisWidth, bare, barCategoryGap, palette, referenceLine, markers, texture, partialLastBar, loading, valueFormatter, labelFormatter, className }: BarChartProps): React$1.JSX.Element;
 //#endregion
 export { BarChart, BarChartProps };