@alpic-ai/ui 1.142.3 → 1.144.0

package/dist/components/area-chart.mjs

@@ -1,6 +1,5 @@
 "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";
@@ -17,7 +16,6 @@ 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;
@@ -238,7 +236,7 @@ function AreaChart({ data, index, series, variant = "stacked", curve = "monotone
 							fill: fillFor(entry, slot),
 							dot: false,
 							activeDot: activeDotFor(entry),
-							isAnimationActive: animated,
+							isAnimationActive: false,
 							animationDuration: 650,
 							animationEasing: "ease-out",
 							children: lastValueLabel && /* @__PURE__ */ jsx(LabelList, {

package/dist/components/bar-chart.mjs

@@ -1,6 +1,5 @@
 "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";
@@ -14,7 +13,6 @@ const MAX_BAR_SIZE = 48;
 function BarChart({ data, index, series, variant = "stacked", legend = false, legendAlign = "left", valueLabels = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, 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;
@@ -225,7 +223,7 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 								stroke: theme.card,
 								strokeWidth: 1
 							},
-							isAnimationActive: animated,
+							isAnimationActive: false,
 							animationDuration: 650,
 							animationEasing: "ease-out",
 							children: valueLabels && (!stacked || rendered.length === 1) && /* @__PURE__ */ jsx(LabelList, {

package/dist/components/bar-list.mjs

@@ -1,6 +1,5 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
 import { rampColor } from "../lib/chart-palette.mjs";
 import { formatShare } from "../lib/chart.mjs";
 import { useChartContext } from "./chart-container.mjs";
@@ -19,12 +18,7 @@ const IN_FILL_SHADOW = "0 1px 2px rgb(0 0 0 / 0.28)";
 function BarList({ data, index, dataKey = "value", maxItems, palette, semantic, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
 	const { paletteName, theme } = useChartContext(palette);
 	const accent = semantic ? theme[SEMANTIC_KEY[semantic]] : null;
-	const reducedMotion = useReducedMotion();
-	const [mounted, setMounted] = React$1.useState(false);
 	const [active, setActive] = React$1.useState(null);
-	React$1.useEffect(() => {
-		setMounted(true);
-	}, []);
 	const total = React$1.useMemo(() => data.reduce((sum, row) => sum + (Number(row[dataKey]) || 0), 0), [data, dataKey]);
 	const rows = React$1.useMemo(() => {
 		const mapped = data.map((row) => ({
@@ -67,7 +61,7 @@ function BarList({ data, index, dataKey = "value", maxItems, palette, semantic,
 		className: cn("flex w-full flex-col", className),
 		children: rows.map((row, slot) => {
 			const fraction = maxValue > 0 ? row.value / maxValue : 0;
-			const fillWidth = !reducedMotion && !mounted ? "0%" : `${fraction * 100}%`;
+			const fillWidth = `${fraction * 100}%`;
 			const dimmed = active !== null && active !== slot;
 			const isActive = active === slot;
 			return /* @__PURE__ */ jsxs("div", {
@@ -85,8 +79,7 @@ function BarList({ data, index, dataKey = "value", maxItems, palette, semantic,
 							width: fillWidth,
 							background: `linear-gradient(90deg, ${row.color}, color-mix(in oklab, ${row.color} 82%, transparent))`,
 							boxShadow: `inset 0 0 0 1px ${row.color}`,
-							opacity: dimmed ? .45 : 1,
-							transition: reducedMotion ? void 0 : "width 700ms ease-out"
+							opacity: dimmed ? .45 : 1
 						},
 						children: /* @__PURE__ */ jsx("span", {
 							className: "pointer-events-none absolute top-1/2 -translate-y-1/2 truncate type-text-xs font-medium text-white",

package/dist/components/chart-tooltip.mjs

@@ -6,7 +6,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 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 total = payload.reduce((sum, item) => sum + (typeof item.value === "number" ? item.value : Number(item.value ?? 0)), 0);
+	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));
 	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", {
@@ -14,13 +16,13 @@ function ChartTooltipContent({ active, payload, label, valueFormatter = (value)
 			children: labelFormatter ? labelFormatter(label) : label
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex flex-col gap-1",
-			children: [payload.map((item, index) => {
+			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 = typeof item.value === "number" ? item.value : Number(item.value ?? 0);
+				const numeric = toNumber(item.value);
 				return /* @__PURE__ */ jsxs("div", {
 					className: "flex items-center justify-between gap-4 text-text-xs",
 					children: [/* @__PURE__ */ jsxs("span", {

package/dist/components/donut-chart.mjs

@@ -1,6 +1,5 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
 import { paletteColor } from "../lib/chart-palette.mjs";
 import { formatShare } from "../lib/chart.mjs";
 import { useChartContext } from "./chart-container.mjs";
@@ -21,7 +20,6 @@ const GEOMETRY = {
 function DonutChart({ data, index, dataKey = "value", variant = "donut", legend = false, paddingAngle = 1, height = 220, palette, centerLabel = "total", 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 [active, setActive] = React$1.useState(null);
 	const rowRefs = React$1.useRef([]);
 	const slices = React$1.useMemo(() => {
@@ -104,7 +102,7 @@ function DonutChart({ data, index, dataKey = "value", variant = "donut", legend
 						cornerRadius: 2,
 						stroke: theme.card,
 						strokeWidth: 1.5,
-						isAnimationActive: animated,
+						isAnimationActive: false,
 						animationDuration: 650,
 						animationEasing: "ease-out",
 						onMouseEnter: (_entry, sliceIndex) => setActive(sliceIndex),

package/dist/components/form.mjs

@@ -41,10 +41,12 @@ const useFormField = () => {
 const FormItemContext = React$1.createContext({});
 function FormItem({ className, ...props }) {
 	const id = React$1.useId();
+	const { name } = React$1.useContext(FormFieldContext);
 	return /* @__PURE__ */ jsx(FormItemContext.Provider, {
 		value: { id },
 		children: /* @__PURE__ */ jsx("div", {
 			"data-slot": "form-item",
+			"data-field-name": name,
 			className: cn("grid gap-2", className),
 			...props
 		})

package/dist/components/line-chart.mjs

@@ -1,6 +1,5 @@
 "use client";
 import { cn } from "../lib/cn.mjs";
-import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
 import { makeXAxisTick, resolveSeries } from "../lib/chart.mjs";
 import { useChartContext } from "./chart-container.mjs";
 import { ChartLegend } from "./chart-legend.mjs";
@@ -16,7 +15,6 @@ const CURVE_TYPE = {
 };
 function LineChart({ data, index, series, curve = "monotone", legend = false, legendAlign = "left", valueFlags = false, dots = false, height = 200, yAxisWidth = 48, palette, referenceLine, markers, lastValueLabel = false, loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
 	const { palette: paletteColors, theme } = useChartContext(palette);
-	const animated = !useReducedMotion();
 	const resolved = resolveSeries(series, paletteColors, theme);
 	const numericMax = React$1.useMemo(() => {
 		let max = 0;
@@ -181,7 +179,7 @@ function LineChart({ data, index, series, curve = "monotone", legend = false, le
 								strokeWidth: 0
 							} : false,
 							activeDot: activeDotFor(entry),
-							isAnimationActive: animated,
+							isAnimationActive: false,
 							animationDuration: 650,
 							animationEasing: "ease-out",
 							children: lastValueLabel && /* @__PURE__ */ jsx(LabelList, {

package/dist/lib/chart-palette.mjs

@@ -1,23 +1,23 @@
 const CHART_PALETTES = {
 	magenta: [
-		"#e90060",
-		"#ff7eb6",
-		"#9b5de5",
-		"#5b8def",
-		"#36c5f0",
-		"#6eece7",
-		"#d98a3d",
-		"#2bb6a3"
+		"#da1b6a",
+		"#ec82b0",
+		"#9a67d7",
+		"#668fdf",
+		"#47bde0",
+		"#75ddd8",
+		"#cd8c4d",
+		"#3eb0a1"
 	],
 	cyan: [
-		"#17b8cf",
-		"#41ddc9",
-		"#3f8ff0",
-		"#8b6cf0",
-		"#c46bf0",
-		"#ff7eb6",
-		"#e90060",
-		"#c98be0"
+		"#2eb2c5",
+		"#50d0c0",
+		"#4f90e0",
+		"#8d74e0",
+		"#bc73e0",
+		"#ec82b0",
+		"#da1b6a",
+		"#c08dd3"
 	]
 };
 const heatRampMagenta = (empty) => [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "1.142.3",
+  "version": "1.144.0",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {

package/src/components/area-chart.tsx

@@ -15,7 +15,6 @@ import {
   YAxis,
 } from "recharts";
 
-import { useReducedMotion } from "../hooks/use-reduced-motion";
 import { type ChartSeries, makeXAxisTick, orderByLuminance, resolveSeries } from "../lib/chart";
 import type { ChartPaletteName } from "../lib/chart-palette";
 import { cn } from "../lib/cn";
@@ -77,8 +76,6 @@ function AreaChart({
 }: AreaChartProps) {
   const { palette: paletteColors, theme } = useChartContext(palette);
   const reactId = React.useId().replace(/:/g, "");
-  const reducedMotion = useReducedMotion();
-  const animated = !reducedMotion;
 
   const resolved = resolveSeries(series, paletteColors, theme);
   const stacked = variant === "stacked" || variant === "expand";
@@ -304,7 +301,7 @@ function AreaChart({
                   fill={fillFor(entry, slot)}
                   dot={false}
                   activeDot={activeDotFor(entry)}
-                  isAnimationActive={animated}
+                  isAnimationActive={false}
                   animationDuration={650}
                   animationEasing="ease-out"
                 >

package/src/components/bar-chart.tsx

@@ -15,7 +15,6 @@ import {
   YAxis,
 } from "recharts";
 
-import { useReducedMotion } from "../hooks/use-reduced-motion";
 import { type ChartSeries, makeXAxisTick, orderByLuminance, resolveSeries } from "../lib/chart";
 import type { ChartPaletteName } from "../lib/chart-palette";
 import { cn } from "../lib/cn";
@@ -68,8 +67,6 @@ function BarChart({
 }: BarChartProps) {
   const { palette: paletteColors, theme } = useChartContext(palette);
   const reactId = React.useId().replace(/:/g, "");
-  const reducedMotion = useReducedMotion();
-  const animated = !reducedMotion;
 
   const resolved = resolveSeries(series, paletteColors, theme);
   const stacked = variant === "stacked" || variant === "expand";
@@ -272,7 +269,7 @@ function BarChart({
                   radius={radiusFor(slot)}
                   maxBarSize={MAX_BAR_SIZE}
                   activeBar={{ fillOpacity: 1, stroke: theme.card, strokeWidth: 1 }}
-                  isAnimationActive={animated}
+                  isAnimationActive={false}
                   animationDuration={650}
                   animationEasing="ease-out"
                 >

package/src/components/bar-list.tsx

@@ -2,7 +2,6 @@
 
 import * as React from "react";
 
-import { useReducedMotion } from "../hooks/use-reduced-motion";
 import { formatShare } from "../lib/chart";
 import type { ChartPaletteName } from "../lib/chart-palette";
 import { rampColor } from "../lib/chart-palette";
@@ -47,14 +46,8 @@ function BarList({
 }: BarListProps) {
   const { paletteName, theme } = useChartContext(palette);
   const accent = semantic ? theme[SEMANTIC_KEY[semantic]] : null;
-  const reducedMotion = useReducedMotion();
-  const [mounted, setMounted] = React.useState(false);
   const [active, setActive] = React.useState<number | null>(null);
 
-  React.useEffect(() => {
-    setMounted(true);
-  }, []);
-
   const total = React.useMemo(() => data.reduce((sum, row) => sum + (Number(row[dataKey]) || 0), 0), [data, dataKey]);
 
   const rows = React.useMemo(() => {
@@ -113,7 +106,7 @@ function BarList({
     <div data-slot="bar-list" className={cn("flex w-full flex-col", className)}>
       {rows.map((row, slot) => {
         const fraction = maxValue > 0 ? row.value / maxValue : 0;
-        const fillWidth = !reducedMotion && !mounted ? "0%" : `${fraction * 100}%`;
+        const fillWidth = `${fraction * 100}%`;
         const dimmed = active !== null && active !== slot;
         const isActive = active === slot;
         return (
@@ -135,7 +128,6 @@ function BarList({
                   background: `linear-gradient(90deg, ${row.color}, color-mix(in oklab, ${row.color} 82%, transparent))`,
                   boxShadow: `inset 0 0 0 1px ${row.color}`,
                   opacity: dimmed ? 0.45 : 1,
-                  transition: reducedMotion ? undefined : "width 700ms ease-out",
                 }}
               >
                 <span

package/src/components/chart-tooltip.tsx

@@ -41,10 +41,10 @@ function ChartTooltipContent({
     return null;
   }
 
-  const total = payload.reduce(
-    (sum, item) => sum + (typeof item.value === "number" ? item.value : Number(item.value ?? 0)),
-    0,
-  );
+  const toNumber = (value: ChartTooltipItem["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));
 
   return (
     <div
@@ -60,13 +60,13 @@ function ChartTooltipContent({
         </p>
       )}
       <div className="flex flex-col gap-1">
-        {payload.map((item, index) => {
+        {rows.map((item, index) => {
           const swatch =
             [item.color, item.stroke, item.fill].find(
               (candidate): candidate is string =>
                 typeof candidate === "string" && candidate.length > 0 && !candidate.startsWith("url("),
             ) ?? theme.mutedForeground;
-          const numeric = typeof item.value === "number" ? item.value : Number(item.value ?? 0);
+          const numeric = toNumber(item.value);
           return (
             <div key={`${item.dataKey ?? index}`} className="flex items-center justify-between gap-4 text-text-xs">
               <span className="inline-flex items-center gap-2 text-muted-foreground">

package/src/components/donut-chart.tsx

@@ -3,7 +3,6 @@
 import * as React from "react";
 import { Cell, Pie, PieChart as RechartsPieChart, ResponsiveContainer } from "recharts";
 
-import { useReducedMotion } from "../hooks/use-reduced-motion";
 import { formatShare } from "../lib/chart";
 import type { ChartPaletteName } from "../lib/chart-palette";
 import { paletteColor } from "../lib/chart-palette";
@@ -48,8 +47,6 @@ function DonutChart({
 }: DonutChartProps) {
   const { palette: paletteColors, theme } = useChartContext(palette);
   const reactId = React.useId().replace(/:/g, "");
-  const reducedMotion = useReducedMotion();
-  const animated = !reducedMotion;
   const [active, setActive] = React.useState<number | null>(null);
   const rowRefs = React.useRef<Array<HTMLDivElement | null>>([]);
 
@@ -121,7 +118,7 @@ function DonutChart({
                   cornerRadius={2}
                   stroke={theme.card}
                   strokeWidth={1.5}
-                  isAnimationActive={animated}
+                  isAnimationActive={false}
                   animationDuration={650}
                   animationEasing="ease-out"
                   onMouseEnter={(_entry, sliceIndex) => setActive(sliceIndex)}

package/src/components/form.tsx

@@ -78,10 +78,12 @@ const FormItemContext = React.createContext<FormItemContextValue>({} as FormItem
 
 function FormItem({ className, ...props }: React.ComponentProps<"div">) {
   const id = React.useId();
+  const { name } = React.useContext(FormFieldContext);
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div data-slot="form-item" className={cn("grid gap-2", className)} {...props} />
+      {/* Expose the field name as generic metadata so hosts can react to focus without per-field wiring. */}
+      <div data-slot="form-item" data-field-name={name} className={cn("grid gap-2", className)} {...props} />
     </FormItemContext.Provider>
   );
 }

package/src/components/line-chart.tsx

@@ -15,7 +15,6 @@ import {
   YAxis,
 } from "recharts";
 
-import { useReducedMotion } from "../hooks/use-reduced-motion";
 import { type ChartSeries, makeXAxisTick, resolveSeries } from "../lib/chart";
 import type { ChartPaletteName } from "../lib/chart-palette";
 import { cn } from "../lib/cn";
@@ -68,8 +67,6 @@ function LineChart({
   className,
 }: LineChartProps) {
   const { palette: paletteColors, theme } = useChartContext(palette);
-  const reducedMotion = useReducedMotion();
-  const animated = !reducedMotion;
 
   const resolved = resolveSeries(series, paletteColors, theme);
 
@@ -234,7 +231,7 @@ function LineChart({
                   strokeDasharray={entry.dashed ? "5 3" : undefined}
                   dot={dots ? { r: 2.5, fill: entry.color, strokeWidth: 0 } : false}
                   activeDot={activeDotFor(entry)}
-                  isAnimationActive={animated}
+                  isAnimationActive={false}
                   animationDuration={650}
                   animationEasing="ease-out"
                 >

package/src/lib/chart-palette.ts

@@ -15,25 +15,25 @@
  */
 
 export const MAGENTA_PALETTE = [
-  "#e90060",
-  "#ff7eb6",
-  "#9b5de5",
-  "#5b8def",
-  "#36c5f0",
-  "#6eece7",
-  "#d98a3d",
-  "#2bb6a3",
+  "#da1b6a",
+  "#ec82b0",
+  "#9a67d7",
+  "#668fdf",
+  "#47bde0",
+  "#75ddd8",
+  "#cd8c4d",
+  "#3eb0a1",
 ] as const;
 
 export const CYAN_PALETTE = [
-  "#17b8cf",
-  "#41ddc9",
-  "#3f8ff0",
-  "#8b6cf0",
-  "#c46bf0",
-  "#ff7eb6",
-  "#e90060",
-  "#c98be0",
+  "#2eb2c5",
+  "#50d0c0",
+  "#4f90e0",
+  "#8d74e0",
+  "#bc73e0",
+  "#ec82b0",
+  "#da1b6a",
+  "#c08dd3",
 ] as const;
 
 export type ChartPaletteName = "magenta" | "cyan";

package/dist/hooks/use-reduced-motion.d.mts

@@ -1,4 +0,0 @@
-//#region src/hooks/use-reduced-motion.d.ts
-declare function useReducedMotion(): boolean;
-//#endregion
-export { useReducedMotion };

package/dist/hooks/use-reduced-motion.mjs

@@ -1,16 +0,0 @@
-"use client";
-import * as React$1 from "react";
-//#region src/hooks/use-reduced-motion.ts
-function useReducedMotion() {
-	const [reduced, setReduced] = React$1.useState(false);
-	React$1.useEffect(() => {
-		const query = window.matchMedia("(prefers-reduced-motion: reduce)");
-		const update = () => setReduced(query.matches);
-		update();
-		query.addEventListener("change", update);
-		return () => query.removeEventListener("change", update);
-	}, []);
-	return reduced;
-}
-//#endregion
-export { useReducedMotion };

package/src/hooks/use-reduced-motion.ts

@@ -1,17 +0,0 @@
-"use client";
-
-import * as React from "react";
-
-export function useReducedMotion() {
-  const [reduced, setReduced] = React.useState(false);
-
-  React.useEffect(() => {
-    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
-    const update = () => setReduced(query.matches);
-    update();
-    query.addEventListener("change", update);
-    return () => query.removeEventListener("change", update);
-  }, []);
-
-  return reduced;
-}