@alpic-ai/ui 1.170.0 → 1.171.0

package/dist/components/form.d.mts

@@ -5,7 +5,7 @@ import * as React$1 from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
 //#region src/components/form.d.ts
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React$1.JSX.Element;
 declare const useFormField: () => {
   invalid: boolean;
@@ -23,8 +23,9 @@ declare function FormItem({ className, ...props }: React$1.ComponentProps<"div">
 interface FormLabelProps extends React$1.ComponentProps<typeof Label> {
   required?: boolean;
   tooltip?: string;
+  marker?: React$1.ReactNode;
 }
-declare function FormLabel({ className, required, tooltip, children, ...props }: FormLabelProps): React$1.JSX.Element;
+declare function FormLabel({ className, required, tooltip, marker, children, ...props }: FormLabelProps): React$1.JSX.Element;
 declare function FormControl({ ...props }: React$1.ComponentProps<typeof Slot>): React$1.JSX.Element;
 declare function FormDescription({ className, ...props }: React$1.ComponentProps<"p">): React$1.JSX.Element;
 declare function FormMessage({ className, ...props }: React$1.ComponentProps<"p">): React$1.JSX.Element | null;
@@ -42,11 +43,12 @@ interface FormFieldBaseProps<TFieldValues extends FieldValues, TName extends Fie
   label?: string;
   description?: string;
   tooltip?: string;
+  marker?: React$1.ReactNode;
 }
 interface InputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName>, Omit<InputProps, "name" | "label"> {}
-declare function InputField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, ...inputProps }: InputFieldProps<TFieldValues, TName>): React$1.JSX.Element;
+declare function InputField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, marker, ...inputProps }: InputFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 interface TextareaFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName>, Omit<TextareaProps, "name" | "label"> {}
-declare function TextareaField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, ...textareaProps }: TextareaFieldProps<TFieldValues, TName>): React$1.JSX.Element;
+declare function TextareaField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, marker, ...textareaProps }: TextareaFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 interface SelectFieldOption {
   value: string;
   label: string;
@@ -56,16 +58,16 @@ interface SelectFieldProps<TFieldValues extends FieldValues, TName extends Field
   options: SelectFieldOption[];
   placeholder?: string;
 }
-declare function SelectField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, options, placeholder }: SelectFieldProps<TFieldValues, TName>): React$1.JSX.Element;
+declare function SelectField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, marker, options, placeholder }: SelectFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 interface RadioFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName> {
   options: SelectFieldOption[];
 }
-declare function RadioField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, options }: RadioFieldProps<TFieldValues, TName>): React$1.JSX.Element;
+declare function RadioField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, marker, options }: RadioFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 interface ChecklistFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends FormFieldBaseProps<TFieldValues, TName> {
   options: SelectFieldOption[];
 }
-declare function ChecklistField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, options }: ChecklistFieldProps<TFieldValues, TName>): React$1.JSX.Element;
+declare function ChecklistField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, required, label, description, tooltip, marker, options }: ChecklistFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 interface CheckboxFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> extends Omit<FormFieldBaseProps<TFieldValues, TName>, "required"> {}
-declare function CheckboxField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, label, description, tooltip }: CheckboxFieldProps<TFieldValues, TName>): React$1.JSX.Element;
+declare function CheckboxField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, label, description, tooltip, marker }: CheckboxFieldProps<TFieldValues, TName>): React$1.JSX.Element;
 //#endregion
 export { CheckboxField, ChecklistField, Form, FormControl, FormDescription, FormField, FormFields, FormHeader, FormItem, FormLabel, FormMessage, InputField, RadioField, SelectField, type SelectFieldOption, TextareaField, useFormField };

package/dist/components/form.mjs

@@ -52,7 +52,7 @@ function FormItem({ className, ...props }) {
 		})
 	});
 }
-function FormLabel({ className, required, tooltip, children, ...props }) {
+function FormLabel({ className, required, tooltip, marker, children, ...props }) {
 	const { error, formItemId } = useFormField();
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-0.5",
@@ -73,7 +73,11 @@ function FormLabel({ className, required, tooltip, children, ...props }) {
 			tooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 				asChild: true,
 				children: /* @__PURE__ */ jsx(Info, { className: "size-4 text-quaternary-foreground" })
-			}), /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })] })
+			}), /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })] }),
+			marker && /* @__PURE__ */ jsx("span", {
+				className: "ml-1 flex items-center",
+				children: marker
+			})
 		]
 	});
 }
@@ -127,7 +131,7 @@ function FormFields({ className, ...props }) {
 		...props
 	});
 }
-function InputField({ control, name, rules, required, label, description, tooltip, ...inputProps }) {
+function InputField({ control, name, rules, required, label, description, tooltip, marker, ...inputProps }) {
 	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name,
@@ -136,6 +140,7 @@ function InputField({ control, name, rules, required, label, description, toolti
 			label && /* @__PURE__ */ jsx(FormLabel, {
 				required,
 				tooltip,
+				marker,
 				children: label
 			}),
 			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
@@ -147,7 +152,7 @@ function InputField({ control, name, rules, required, label, description, toolti
 		] })
 	});
 }
-function TextareaField({ control, name, rules, required, label, description, tooltip, ...textareaProps }) {
+function TextareaField({ control, name, rules, required, label, description, tooltip, marker, ...textareaProps }) {
 	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name,
@@ -156,6 +161,7 @@ function TextareaField({ control, name, rules, required, label, description, too
 			label && /* @__PURE__ */ jsx(FormLabel, {
 				required,
 				tooltip,
+				marker,
 				children: label
 			}),
 			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
@@ -167,7 +173,7 @@ function TextareaField({ control, name, rules, required, label, description, too
 		] })
 	});
 }
-function SelectField({ control, name, rules, required, label, description, tooltip, options, placeholder }) {
+function SelectField({ control, name, rules, required, label, description, tooltip, marker, options, placeholder }) {
 	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name,
@@ -176,6 +182,7 @@ function SelectField({ control, name, rules, required, label, description, toolt
 			label && /* @__PURE__ */ jsx(FormLabel, {
 				required,
 				tooltip,
+				marker,
 				children: label
 			}),
 			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
@@ -192,7 +199,7 @@ function SelectField({ control, name, rules, required, label, description, toolt
 		] })
 	});
 }
-function RadioField({ control, name, rules, required, label, description, tooltip, options }) {
+function RadioField({ control, name, rules, required, label, description, tooltip, marker, options }) {
 	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name,
@@ -201,6 +208,7 @@ function RadioField({ control, name, rules, required, label, description, toolti
 			label && /* @__PURE__ */ jsx(FormLabel, {
 				required,
 				tooltip,
+				marker,
 				children: label
 			}),
 			description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
@@ -228,7 +236,7 @@ function RadioField({ control, name, rules, required, label, description, toolti
 		] })
 	});
 }
-function ChecklistField({ control, name, rules, required, label, description, tooltip, options }) {
+function ChecklistField({ control, name, rules, required, label, description, tooltip, marker, options }) {
 	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name,
@@ -243,6 +251,7 @@ function ChecklistField({ control, name, rules, required, label, description, to
 				label && /* @__PURE__ */ jsx(FormLabel, {
 					required,
 					tooltip,
+					marker,
 					children: label
 				}),
 				description && /* @__PURE__ */ jsx(FormDescription, { children: description }),
@@ -272,7 +281,7 @@ function ChecklistField({ control, name, rules, required, label, description, to
 		}
 	});
 }
-function CheckboxField({ control, name, rules, label, description, tooltip }) {
+function CheckboxField({ control, name, rules, label, description, tooltip, marker }) {
 	return /* @__PURE__ */ jsx(FormField, {
 		control,
 		name,
@@ -288,6 +297,7 @@ function CheckboxField({ control, name, rules, label, description, tooltip }) {
 						onBlur: field.onBlur
 					}) }), label && /* @__PURE__ */ jsx(FormLabel, {
 						tooltip,
+						marker,
 						className: "font-normal max-md:-ml-2 max-md:min-h-11 max-md:flex-1 max-md:items-start max-md:pl-2",
 						children: label
 					})]

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/sidebar.d.mts

@@ -46,7 +46,7 @@ declare function SidebarMenu({ className, ...props }: React$1.ComponentProps<"ul
 declare function SidebarMenuItem({ className, ...props }: React$1.ComponentProps<"li">): React$1.JSX.Element;
 declare const sidebarMenuButtonVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "default" | "sm" | "lg" | null | undefined;
+  size?: "sm" | "lg" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React$1.ComponentProps<"button"> & {
   asChild?: boolean;

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

package/dist/components/status-dot.d.mts

@@ -1,7 +1,7 @@
 import { VariantProps } from "class-variance-authority";
 //#region src/components/status-dot.d.ts
 declare const statusDotVariants: (props?: ({
-  variant?: "destructive" | "warning" | "success" | "muted" | null | undefined;
+  variant?: "destructive" | "success" | "warning" | "muted" | null | undefined;
   pulse?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface StatusDotProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof statusDotVariants> {}

package/dist/components/tabs.d.mts

@@ -3,7 +3,7 @@ import * as React$1 from "react";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 //#region src/components/tabs.d.ts
 declare const tabsTriggerVariants: (props?: ({
-  variant?: "default" | "pill" | "line" | null | undefined;
+  variant?: "default" | "line" | "pill" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Tabs({ className, orientation, ...props }: React$1.ComponentProps<typeof TabsPrimitive.Root>): React$1.JSX.Element;
 declare const tabsListVariants: (props?: ({

package/dist/components/toggle-group.d.mts

@@ -4,7 +4,7 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 //#region src/components/toggle-group.d.ts
 declare const toggleGroupItemVariants: (props?: ({
   variant?: "default" | "outline" | null | undefined;
-  size?: "default" | "sm" | null | undefined;
+  size?: "sm" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ToggleGroupContextValue = VariantProps<typeof toggleGroupItemVariants>;
 declare function ToggleGroup({ className, variant, size, children, ...props }: React$1.ComponentProps<typeof ToggleGroupPrimitive.Root> & ToggleGroupContextValue): React$1.JSX.Element;

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-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.useEffect;
+//#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/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.171.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,11 +59,11 @@
     "@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.5",
+    "lucide-react": "^1.37.0",
+    "react-hook-form": "^7.86.0",
     "shx": "^0.4.0",
-    "sonner": "^2.0.7",
+    "sonner": "^2.0.8",
     "tailwindcss": "^4.3.3",
     "tsdown": "^0.22.14",
     "tw-animate-css": "^1.4.0",

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 ? (