@alpic-ai/ui 1.170.0 → 1.172.0

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

@@ -1,7 +1,7 @@
 import { ChartPaletteName } from "../lib/chart-palette.mjs";
 import * as React$1 from "react";
 //#region src/components/heatmap-chart.d.ts
-interface HeatmapChartProps {
+export interface HeatmapChartProps {
   data: ReadonlyArray<Record<string, string | number | null | undefined>>;
   xKey: string;
   yKey: string;
@@ -29,4 +29,4 @@ interface HeatmapChartProps {
 }
 declare function HeatmapChart({ data, xKey, yKey, dataKey, variant, palette, xLabels, yLabels, showAllXLabels, highlightPeak, loading, valueFormatter, xTickFormatter, yTickFormatter, tooltipMetrics, tooltipTitleKey, colorScale, showLegend, ariaLabel, className }: HeatmapChartProps): React$1.JSX.Element;
 //#endregion
-export { HeatmapChart, HeatmapChartProps };
+export { HeatmapChart };

package/dist/components/input.d.mts

@@ -9,7 +9,9 @@ interface InputProps extends Omit<React$1.ComponentProps<"input">, "size"> {
   leadingText?: string;
   leadingIcon?: React$1.ReactNode;
   size?: "sm" | "md";
+  sensitive?: boolean;
+  show?: boolean;
 }
-declare function Input({ className, id, label, required, hint, error, tooltip, leadingText, leadingIcon, size, ...props }: InputProps): React$1.JSX.Element;
+declare function Input({ className, id, label, required, hint, error, tooltip, leadingText, leadingIcon, size, sensitive, show, ...props }: InputProps): React$1.JSX.Element;
 //#endregion
 export { Input, type InputProps };

package/dist/components/input.mjs

@@ -22,7 +22,7 @@ const inputSizeStyles = {
 		leadingIcon: "pl-2.5 [&_svg]:size-5"
 	}
 };
-function Input({ className, id, label, required, hint, error, tooltip, leadingText, leadingIcon, size = "md", ...props }) {
+function Input({ className, id, label, required, hint, error, tooltip, leadingText, leadingIcon, size = "md", sensitive = false, show = false, ...props }) {
 	const generatedId = React$1.useId();
 	const fieldId = id ?? generatedId;
 	const hasAddons = leadingText || leadingIcon;
@@ -39,11 +39,13 @@ function Input({ className, id, label, required, hint, error, tooltip, leadingTe
 			"disabled:bg-disabled disabled:text-disabled-foreground",
 			"aria-invalid:border-border-error",
 			error && "border-border-error"
-		], hasAddons && "flex-1 min-h-0", className),
+		], hasAddons && "flex-1 min-h-0", sensitive && !show && "[-webkit-text-security:disc]", className),
 		required,
 		"aria-invalid": error ? true : void 0,
 		"aria-describedby": fieldId && (hint || error) ? `${fieldId}-description` : void 0,
-		...props
+		...props,
+		autoComplete: sensitive ? "off" : props.autoComplete,
+		spellCheck: sensitive ? false : props.spellCheck
 	});
 	const wrappedInput = hasAddons ? /* @__PURE__ */ jsxs("div", {
 		className: cn("flex items-center w-full overflow-hidden", sizes.wrapper, "bg-background border border-border rounded-md", "transition-colors", "has-[input:focus-visible]:border-ring has-[input:focus-visible]:border-2", "has-[input:disabled]:bg-disabled has-[input:disabled]:text-disabled-foreground has-[input:disabled]:cursor-not-allowed", error && "border-border-error"),

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

@@ -8,7 +8,7 @@ declare const CURVE_TYPE: {
   readonly linear: "linear";
   readonly step: "stepAfter";
 };
-interface LineChartProps {
+export interface LineChartProps {
   data: ReadonlyArray<Record<string, string | number | null | undefined>>;
   index: string;
   series: ChartSeries[];
@@ -36,4 +36,4 @@ interface LineChartProps {
 }
 declare function LineChart({ data, index, series, curve, legend, legendAlign, valueFlags, dots, height, yAxisWidth, palette, referenceLine, markers, lastValueLabel, loading, hiddenSeries, onLegendItemClick, valueFormatter, labelFormatter, className }: LineChartProps): React$1.JSX.Element;
 //#endregion
-export { LineChart, LineChartProps };
+export { LineChart };

package/dist/components/select-trigger-variants.d.mts

@@ -1,7 +1,6 @@
 //#region src/components/select-trigger-variants.d.ts
 /** Shared by Select and Combobox so their trigger buttons stay visually in sync. */
-declare const selectTriggerVariants: (props?: ({
+export declare const selectTriggerVariants: (props?: ({
   size?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-//#endregion
-export { selectTriggerVariants };
+//#endregion

package/dist/components/shimmer-text.d.mts

@@ -1,8 +1,7 @@
 import React from "react";
 //#region src/components/shimmer-text.d.ts
-declare function ShimmerText({ children, className }: {
+export declare function ShimmerText({ children, className }: {
   children: string | number;
   className?: string;
 }): React.JSX.Element;
-//#endregion
-export { ShimmerText };
+//#endregion

package/dist/components/skeleton.d.mts

@@ -1,7 +1,7 @@
 import { VariantProps } from "class-variance-authority";
 //#region src/components/skeleton.d.ts
 declare const skeletonVariants: (props?: ({
-  shape?: "circle" | "rectangle" | null | undefined;
+  shape?: "rectangle" | "circle" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SkeletonProps extends React.ComponentProps<"div">, VariantProps<typeof skeletonVariants> {}
 declare function Skeleton({ className, shape, ...props }: SkeletonProps): import("react").JSX.Element;

package/dist/components/spinner.d.mts

@@ -1,8 +1,8 @@
 import { VariantProps } from "class-variance-authority";
 //#region src/components/spinner.d.ts
 declare const spinnerVariants: (props?: ({
-  variant?: "secondary" | "primary" | null | undefined;
-  size?: "sm" | "lg" | "md" | "xl" | null | undefined;
+  variant?: "primary" | "secondary" | null | undefined;
+  size?: "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface SpinnerProps extends Omit<React.ComponentProps<"svg">, "children">, VariantProps<typeof spinnerVariants> {}
 declare function Spinner({ className, variant, size, ...props }: SpinnerProps): import("react").JSX.Element;

package/dist/components/stat.d.mts

@@ -3,14 +3,14 @@ import * as React$1 from "react";
 declare const statDeltaVariants: (props?: ({
   sentiment?: "positive" | "negative" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-interface StatDelta {
+export interface StatDelta {
   value: number;
   direction: "up" | "down";
   invert?: boolean;
   label?: React$1.ReactNode;
   indicator?: "arrow" | "sign";
 }
-interface StatProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onClick"> {
+export interface StatProps extends Omit<React$1.HTMLAttributes<HTMLElement>, "onClick"> {
   value: React$1.ReactNode;
   unit?: string;
   delta?: StatDelta | null;
@@ -26,4 +26,4 @@ declare function StatSparkline({ sparkline, semantic, className }: Pick<StatProp
   className?: string;
 }): React$1.JSX.Element | null;
 //#endregion
-export { Stat, StatDelta, StatProps, StatSparkline, statDeltaVariants };
+export { Stat, StatSparkline, statDeltaVariants };

package/dist/components/typography.d.mts

@@ -1,20 +1,19 @@
 import { ReactNode } from "react";
 //#region src/components/typography.d.ts
-declare function H1({ children, className }: {
+export declare function H1({ children, className }: {
   children: ReactNode;
   className?: string;
 }): import("react").JSX.Element;
-declare function H2({ children, className }: {
+export declare function H2({ children, className }: {
   children: ReactNode;
   className?: string;
 }): import("react").JSX.Element;
-declare function H3({ children, className }: {
+export declare function H3({ children, className }: {
   children: ReactNode;
   className?: string;
 }): import("react").JSX.Element;
-declare function H4({ children, className }: {
+export declare function H4({ children, className }: {
   children: ReactNode;
   className?: string;
 }): import("react").JSX.Element;
-//#endregion
-export { H1, H2, H3, H4 };
+//#endregion

package/dist/components/visually-hidden-input.d.mts

@@ -0,0 +1,12 @@
+import * as React$1 from "react";
+//#region src/components/visually-hidden-input.d.ts
+type InputValue = string[] | string;
+interface VisuallyHiddenInputProps<T = InputValue> extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "value" | "checked" | "onReset"> {
+  value?: T;
+  checked?: boolean;
+  control: HTMLElement | null;
+  bubbles?: boolean;
+}
+declare function VisuallyHiddenInput<T = InputValue>(props: VisuallyHiddenInputProps<T>): React$1.JSX.Element;
+//#endregion
+export { VisuallyHiddenInput };

package/dist/components/visually-hidden-input.mjs

@@ -0,0 +1,109 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as React$1 from "react";
+//#region src/components/visually-hidden-input.tsx
+function VisuallyHiddenInput(props) {
+	const { control, value, checked, bubbles = true, type = "hidden", style, ...inputProps } = props;
+	const isCheckInput = React$1.useMemo(() => type === "checkbox" || type === "radio" || type === "switch", [type]);
+	const inputRef = React$1.useRef(null);
+	const prevValueRef = React$1.useRef({
+		value: isCheckInput ? checked : value,
+		previous: isCheckInput ? checked : value
+	});
+	const prevValue = React$1.useMemo(() => {
+		const currentValue = isCheckInput ? checked : value;
+		if (prevValueRef.current.value !== currentValue) {
+			prevValueRef.current.previous = prevValueRef.current.value;
+			prevValueRef.current.value = currentValue;
+		}
+		return prevValueRef.current.previous;
+	}, [
+		isCheckInput,
+		value,
+		checked
+	]);
+	const [controlSize, setControlSize] = React$1.useState({});
+	React$1.useLayoutEffect(() => {
+		if (!control) {
+			setControlSize({});
+			return;
+		}
+		setControlSize({
+			width: control.offsetWidth,
+			height: control.offsetHeight
+		});
+		if (typeof window === "undefined") return;
+		const resizeObserver = new ResizeObserver((entries) => {
+			if (!Array.isArray(entries) || !entries.length) return;
+			const entry = entries[0];
+			if (!entry) return;
+			let width;
+			let height;
+			if ("borderBoxSize" in entry) {
+				const borderSizeEntry = entry.borderBoxSize;
+				const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry;
+				width = borderSize.inlineSize;
+				height = borderSize.blockSize;
+			} else {
+				width = control.offsetWidth;
+				height = control.offsetHeight;
+			}
+			setControlSize({
+				width,
+				height
+			});
+		});
+		resizeObserver.observe(control, { box: "border-box" });
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [control]);
+	React$1.useEffect(() => {
+		const input = inputRef.current;
+		if (!input) return;
+		const inputProto = window.HTMLInputElement.prototype;
+		const propertyKey = isCheckInput ? "checked" : "value";
+		const eventType = isCheckInput ? "click" : "input";
+		const currentValue = isCheckInput ? checked : value;
+		const serializedCurrentValue = isCheckInput ? checked : typeof value === "object" && value !== null ? JSON.stringify(value) : value;
+		const setter = Object.getOwnPropertyDescriptor(inputProto, propertyKey)?.set;
+		if (prevValue !== currentValue && setter) {
+			const event = new Event(eventType, { bubbles });
+			setter.call(input, serializedCurrentValue);
+			input.dispatchEvent(event);
+		}
+	}, [
+		prevValue,
+		value,
+		checked,
+		bubbles,
+		isCheckInput
+	]);
+	const composedStyle = React$1.useMemo(() => {
+		return {
+			...style,
+			...controlSize.width !== void 0 && controlSize.height !== void 0 ? controlSize : {},
+			border: 0,
+			clip: "rect(0 0 0 0)",
+			clipPath: "inset(50%)",
+			height: "1px",
+			margin: "-1px",
+			overflow: "hidden",
+			padding: 0,
+			position: "absolute",
+			whiteSpace: "nowrap",
+			width: "1px"
+		};
+	}, [style, controlSize]);
+	return /* @__PURE__ */ jsx("input", {
+		type,
+		...inputProps,
+		ref: inputRef,
+		"aria-hidden": isCheckInput,
+		tabIndex: -1,
+		defaultChecked: isCheckInput ? checked : void 0,
+		style: composedStyle
+	});
+}
+//#endregion
+export { VisuallyHiddenInput };

package/dist/hooks/use-as-ref.d.mts

@@ -0,0 +1,5 @@
+import * as React$1 from "react";
+//#region src/hooks/use-as-ref.d.ts
+declare function useAsRef<T>(props: T): React$1.RefObject<T>;
+//#endregion
+export { useAsRef };

package/dist/hooks/use-as-ref.mjs

@@ -0,0 +1,12 @@
+import { useIsomorphicLayoutEffect } from "./use-isomorphic-layout-effect.mjs";
+import * as React$1 from "react";
+//#region src/hooks/use-as-ref.ts
+function useAsRef(props) {
+	const ref = React$1.useRef(props);
+	useIsomorphicLayoutEffect(() => {
+		ref.current = props;
+	});
+	return ref;
+}
+//#endregion
+export { useAsRef };

package/dist/hooks/use-chart-theme.d.mts

@@ -1,5 +1,5 @@
 //#region src/hooks/use-chart-theme.d.ts
-interface ChartTheme {
+export interface ChartTheme {
   foreground: string;
   mutedForeground: string;
   axisForeground: string;
@@ -13,6 +13,5 @@ interface ChartTheme {
   fontMono: string;
   isDark: boolean;
 }
-declare function useChartTheme(): ChartTheme;
-//#endregion
-export { ChartTheme, useChartTheme };
+export declare function useChartTheme(): ChartTheme;
+//#endregion

package/dist/hooks/use-copy-to-clipboard.d.mts

@@ -1,9 +1,8 @@
 //#region src/hooks/use-copy-to-clipboard.d.ts
-declare function useCopyToClipboard({ resetDelay }?: {
+export declare function useCopyToClipboard({ resetDelay }?: {
   resetDelay?: number;
 }): {
   copy: (text: string) => void;
   isCopied: boolean;
 };
-//#endregion
-export { useCopyToClipboard };
+//#endregion

package/dist/hooks/use-isomorphic-layout-effect.d.mts

@@ -0,0 +1,5 @@
+import * as React$1 from "react";
+//#region src/hooks/use-isomorphic-layout-effect.d.ts
+declare const useIsomorphicLayoutEffect: typeof React$1.useLayoutEffect;
+//#endregion
+export { useIsomorphicLayoutEffect };

package/dist/hooks/use-isomorphic-layout-effect.mjs

@@ -0,0 +1,5 @@
+import * as React$1 from "react";
+//#region src/hooks/use-isomorphic-layout-effect.ts
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React$1.useLayoutEffect : React$1.useEffect;
+//#endregion
+export { useIsomorphicLayoutEffect };

package/dist/hooks/use-lazy-ref.d.mts

@@ -0,0 +1,6 @@
+//#region src/hooks/use-lazy-ref.d.ts
+declare function useLazyRef<T>(fn: () => T): {
+  current: T;
+};
+//#endregion
+export { useLazyRef };

package/dist/hooks/use-lazy-ref.mjs

@@ -0,0 +1,9 @@
+import * as React$1 from "react";
+//#region src/hooks/use-lazy-ref.ts
+function useLazyRef(fn) {
+	const ref = React$1.useRef(null);
+	if (ref.current === null) ref.current = { current: fn() };
+	return ref.current;
+}
+//#endregion
+export { useLazyRef };

package/dist/hooks/use-mobile.d.mts

@@ -1,4 +1,3 @@
 //#region src/hooks/use-mobile.d.ts
-declare function useIsMobile(): boolean;
-//#endregion
-export { useIsMobile };
+export declare function useIsMobile(): boolean;
+//#endregion

package/dist/lib/chart-palette.d.mts

@@ -1,19 +1,18 @@
 //#region src/lib/chart-palette.d.ts
-declare const MAGENTA_PALETTE: readonly ["#da1b6a", "#ec82b0", "#9a67d7", "#668fdf", "#47bde0", "#75ddd8", "#cd8c4d", "#3eb0a1"];
-declare const CYAN_PALETTE: readonly ["#2eb2c5", "#50d0c0", "#4f90e0", "#8d74e0", "#bc73e0", "#ec82b0", "#da1b6a", "#c08dd3"];
-type ChartPaletteName = "magenta" | "cyan";
-declare const CHART_PALETTES: Record<ChartPaletteName, readonly string[]>;
-declare const heatRampMagenta: (empty: string) => string[];
-declare const heatRampMint: (empty: string) => string[];
-declare const HEAT_EMPTY: {
+export declare const MAGENTA_PALETTE: readonly ["#da1b6a", "#ec82b0", "#9a67d7", "#668fdf", "#47bde0", "#75ddd8", "#cd8c4d", "#3eb0a1"];
+export declare const CYAN_PALETTE: readonly ["#2eb2c5", "#50d0c0", "#4f90e0", "#8d74e0", "#bc73e0", "#ec82b0", "#da1b6a", "#c08dd3"];
+export type ChartPaletteName = "magenta" | "cyan";
+export declare const CHART_PALETTES: Record<ChartPaletteName, readonly string[]>;
+export declare const heatRampMagenta: (empty: string) => string[];
+export declare const heatRampMint: (empty: string) => string[];
+export declare const HEAT_EMPTY: {
   readonly light: "#eef3f3";
   readonly dark: "#102222";
 };
-declare const heatRamp: (palette: ChartPaletteName, empty: string, isDark?: boolean) => string[];
-declare const luminance: (hex: string) => number;
-declare const paletteColor: (palette: readonly string[], index: number) => string;
-declare const rampColor: (palette: ChartPaletteName, fraction: number) => string;
+export declare const heatRamp: (palette: ChartPaletteName, empty: string, isDark?: boolean) => string[];
+export declare const luminance: (hex: string) => number;
+export declare const paletteColor: (palette: readonly string[], index: number) => string;
+export declare const rampColor: (palette: ChartPaletteName, fraction: number) => string;
 /** Interpolates continuously across the ramp so a 0..1 value reads as a smooth gradient rather than five discrete bands. */
-declare const heatColor: (stops: readonly string[], fraction: number) => string;
-//#endregion
-export { CHART_PALETTES, CYAN_PALETTE, ChartPaletteName, HEAT_EMPTY, MAGENTA_PALETTE, heatColor, heatRamp, heatRampMagenta, heatRampMint, luminance, paletteColor, rampColor };
+export declare const heatColor: (stops: readonly string[], fraction: number) => string;
+//#endregion

package/dist/lib/chart.d.mts

@@ -1,16 +1,15 @@
 import "react";
 //#region src/lib/chart.d.ts
 /** One plotted series; the same shape drives area, line and bar charts. */
-interface ChartSeries {
+export interface ChartSeries {
   key: string;
   name?: string;
   color?: string;
   semantic?: "error" | "warning" | "success";
   dashed?: boolean;
 }
-interface ResolvedSeries extends ChartSeries {
+export interface ResolvedSeries extends ChartSeries {
   name: string;
   color: string;
 }
-//#endregion
-export { ChartSeries, ResolvedSeries };
+//#endregion

package/dist/lib/cn.d.mts

@@ -1,5 +1,4 @@
 import { ClassValue } from "clsx";
 //#region src/lib/cn.d.ts
-declare function cn(...inputs: ClassValue[]): string;
-//#endregion
-export { cn };
+export declare function cn(...inputs: ClassValue[]): string;
+//#endregion

package/dist/lib/compose-refs.mjs

@@ -0,0 +1,23 @@
+import * as React$1 from "react";
+//#region src/lib/compose-refs.ts
+function setRef(ref, value) {
+	if (typeof ref === "function") return ref(value);
+	if (ref !== null && ref !== void 0) ref.current = value;
+}
+function composeRefs(...refs) {
+	return (node) => {
+		const cleanups = refs.map((ref) => setRef(ref, node));
+		if (!cleanups.some((cleanup) => typeof cleanup === "function")) return;
+		return () => {
+			cleanups.forEach((cleanup, index) => {
+				if (typeof cleanup === "function") cleanup();
+				else setRef(refs[index], null);
+			});
+		};
+	};
+}
+function useComposedRefs(...refs) {
+	return React$1.useCallback(composeRefs(...refs), refs);
+}
+//#endregion
+export { composeRefs, useComposedRefs };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpic-ai/ui",
-  "version": "1.170.0",
+  "version": "1.172.0",
   "description": "Alpic design system — shared UI components",
   "type": "module",
   "exports": {
@@ -12,13 +12,9 @@
       "types": "./dist/hooks/*.d.mts",
       "default": "./dist/hooks/*.mjs"
     },
-    "./lib/cn": {
-      "types": "./dist/lib/cn.d.mts",
-      "default": "./dist/lib/cn.mjs"
-    },
-    "./lib/chart-palette": {
-      "types": "./dist/lib/chart-palette.d.mts",
-      "default": "./dist/lib/chart-palette.mjs"
+    "./lib/*": {
+      "types": "./dist/lib/*.d.mts",
+      "default": "./dist/lib/*.mjs"
     },
     "./theme": "./src/styles/tokens.css"
   },
@@ -63,13 +59,13 @@
     "@ladle/react": "^5.1.1",
     "@tailwindcss/postcss": "^4.3.3",
     "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.4",
-    "lucide-react": "^1.30.0",
-    "react-hook-form": "^7.85.0",
+    "@types/react-dom": "19.2.7",
+    "lucide-react": "^1.41.0",
+    "react-hook-form": "^7.87.0",
     "shx": "^0.4.0",
-    "sonner": "^2.0.7",
+    "sonner": "^2.0.8",
     "tailwindcss": "^4.3.3",
-    "tsdown": "^0.22.14",
+    "tsdown": "^0.23.0",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"
   },

package/src/components/bar-chart.tsx

@@ -166,7 +166,7 @@ function BarChart({
         className,
       )}
     >
-      <div className="w-full" style={{ height }}>
+      <div className={cn("w-full", bare && !loading && !isEmpty && "border-border border-b")} style={{ height }}>
         {loading ? (
           <Skeleton className="h-full w-full rounded-lg" />
         ) : isEmpty ? (