@alpic-ai/ui 0.0.0-staging.gcd4957c → 0.0.0-staging.gcd7c19c

package/dist/components/donut-chart.mjs

@@ -0,0 +1,187 @@
+"use client";
+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 { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
+//#region src/components/donut-chart.tsx
+const GEOMETRY = {
+	donut: {
+		inner: "64%",
+		outer: "92%"
+	},
+	ring: {
+		inner: "78%",
+		outer: "92%"
+	}
+};
+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 [active, setActive] = React$1.useState(null);
+	const rowRefs = React$1.useRef([]);
+	const slices = React$1.useMemo(() => {
+		const mapped = data.map((row) => ({
+			name: String(row[index] ?? ""),
+			value: Number(row[dataKey]) || 0
+		}));
+		mapped.sort((lower, upper) => upper.value - lower.value);
+		return mapped.map((slice, rank) => ({
+			...slice,
+			color: paletteColor(paletteColors, rank)
+		}));
+	}, [
+		data,
+		index,
+		dataKey,
+		paletteColors
+	]);
+	const total = slices.reduce((sum, slice) => sum + slice.value, 0);
+	const maxValue = slices.reduce((max, slice) => slice.value > max ? slice.value : max, 0);
+	const geometry = GEOMETRY[variant] ?? GEOMETRY.donut;
+	const formatName = (name) => labelFormatter ? labelFormatter(name) : name;
+	const isEmpty = slices.length === 0 || total <= 0;
+	const activeSlice = active !== null ? slices[active] : void 0;
+	const centerTitle = activeSlice ? formatName(activeSlice.name) : centerLabel;
+	const centerValue = valueFormatter(activeSlice ? activeSlice.value : total);
+	React$1.useEffect(() => {
+		if (active !== null) rowRefs.current[active]?.scrollIntoView({ block: "nearest" });
+	}, [active]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "donut-chart",
+		className: cn("@container flex w-full flex-col gap-3", className),
+		children: loading ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs",
+			style: { height },
+			children: [/* @__PURE__ */ jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-border border-t-foreground" }), "loading…"]
+		}) : isEmpty ? /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs",
+			style: { height },
+			children: "no data in range"
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-5 @md:flex-row",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "relative shrink-0",
+				style: {
+					width: height,
+					height
+				},
+				children: [/* @__PURE__ */ jsx(ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					initialDimension: {
+						width: 0,
+						height
+					},
+					children: /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx("defs", { children: slices.map((slice, slot) => /* @__PURE__ */ jsxs("linearGradient", {
+						id: `donut-${reactId}-${slot}`,
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "0%",
+							stopColor: slice.color,
+							stopOpacity: 1
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "100%",
+							stopColor: slice.color,
+							stopOpacity: .7
+						})]
+					}, slice.name)) }), /* @__PURE__ */ jsx(Pie, {
+						data: slices,
+						dataKey: "value",
+						nameKey: "name",
+						innerRadius: geometry.inner,
+						outerRadius: geometry.outer,
+						paddingAngle,
+						startAngle: 90,
+						endAngle: -270,
+						cornerRadius: 2,
+						stroke: theme.card,
+						strokeWidth: 1.5,
+						isAnimationActive: false,
+						animationDuration: 650,
+						animationEasing: "ease-out",
+						onMouseEnter: (_entry, sliceIndex) => setActive(sliceIndex),
+						onMouseLeave: () => setActive(null),
+						children: slices.map((slice, slot) => /* @__PURE__ */ jsx(Cell, {
+							className: "motion-safe:[transition:fill-opacity_180ms_ease-out]",
+							fill: `url(#donut-${reactId}-${slot})`,
+							fillOpacity: active === null || active === slot ? 1 : .55,
+							stroke: theme.card,
+							strokeWidth: 1.5
+						}, slice.name))
+					})] })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-1 text-center",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "max-w-[52%] truncate font-mono text-[10px] text-quaternary-foreground uppercase tracking-[0.18em]",
+							children: centerTitle
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-mono font-semibold text-[28px] text-foreground leading-none tabular-nums",
+							children: centerValue
+						}),
+						activeSlice && /* @__PURE__ */ jsx("span", {
+							className: "font-mono font-medium text-[11px] tabular-nums",
+							style: { color: activeSlice.color },
+							children: formatShare(activeSlice.value / total)
+						})
+					]
+				})]
+			}), legend && /* @__PURE__ */ jsx("div", {
+				"data-slot": "donut-readout",
+				className: "flex min-w-0 flex-1 flex-col overflow-y-auto pr-1",
+				style: { maxHeight: height },
+				children: slices.map((slice, slot) => /* @__PURE__ */ jsxs("div", {
+					ref: (node) => {
+						rowRefs.current[slot] = node;
+					},
+					onMouseEnter: () => setActive(slot),
+					onMouseLeave: () => setActive(null),
+					className: cn("flex flex-col gap-1.5 border-border/40 border-b px-2 py-2 text-text-xs last:border-b-0 motion-safe:transition-colors", active === slot ? "bg-muted/50" : "bg-transparent"),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "inline-flex min-w-0 items-center gap-2 text-muted-foreground",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "h-2 w-2.5 shrink-0 rounded-[3px]",
+								style: { background: slice.color }
+							}), /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: formatName(slice.name)
+							})]
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "flex shrink-0 items-center gap-2 font-mono tabular-nums",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "min-w-[2.25rem] text-right font-semibold text-foreground",
+								children: valueFormatter(slice.value)
+							}), /* @__PURE__ */ jsx("span", {
+								className: "w-9 text-right text-quaternary-foreground",
+								children: formatShare(slice.value / total)
+							})]
+						})]
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "relative block h-[2px] w-full overflow-hidden rounded-full bg-border/40",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "absolute inset-y-0 left-0 rounded-full motion-safe:transition-[width] motion-safe:duration-500",
+							style: {
+								width: `${maxValue > 0 ? slice.value / maxValue * 100 : 0}%`,
+								background: slice.color,
+								opacity: active === null || active === slot ? 1 : .45
+							}
+						})
+					})]
+				}, slice.name))
+			})]
+		})
+	});
+}
+//#endregion
+export { DonutChart };

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

@@ -1,72 +1,28 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
-import * as React from "react";
+import * as React$1 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
-
 //#region src/components/dropdown-menu.d.ts
-declare function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuPortal({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuContent({
-  className,
-  sideOffset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): _$react_jsx_runtime0.JSX.Element;
+declare function DropdownMenu({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Root>): React$1.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Portal>): React$1.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): React$1.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Content>): React$1.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Group>): React$1.JSX.Element;
 declare const dropdownMenuItemVariants: (props?: ({
   variant?: "default" | "destructive" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
-declare function DropdownMenuItem({
-  className,
-  inset,
-  variant,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & VariantProps<typeof dropdownMenuItemVariants> & {
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Item> & VariantProps<typeof dropdownMenuItemVariants> & {
   inset?: boolean;
-}): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+}): React$1.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
   inset?: boolean;
-}): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuHeader({
-  className,
-  children,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+}): React$1.JSX.Element;
+declare function DropdownMenuHeader({ className, children, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Separator>): React$1.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React$1.ComponentProps<"span">): React$1.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.Sub>): React$1.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
   inset?: boolean;
-}): _$react_jsx_runtime0.JSX.Element;
-declare function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): _$react_jsx_runtime0.JSX.Element;
+}): React$1.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React$1.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): React$1.JSX.Element;
 //#endregion
 export { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, dropdownMenuItemVariants };

package/dist/components/field.d.mts

@@ -0,0 +1,14 @@
+import * as React$1 from "react";
+//#region src/components/field.d.ts
+interface FieldProps {
+  fieldId: string;
+  label?: string;
+  required?: boolean;
+  hint?: string;
+  error?: string;
+  tooltip?: string;
+  children: React$1.ReactNode;
+}
+declare function Field({ fieldId, label, required, hint, error, tooltip, children }: FieldProps): React$1.JSX.Element;
+//#endregion
+export { Field, type FieldProps };

package/dist/components/field.mjs

@@ -0,0 +1,41 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.mjs";
+import { Label } from "./label.mjs";
+import { Info } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/field.tsx
+function Field({ fieldId, label, required, hint, error, tooltip, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col gap-1.5",
+		children: [
+			label && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-0.5",
+				children: [
+					/* @__PURE__ */ jsx(Label, {
+						htmlFor: fieldId,
+						className: "type-text-sm font-medium text-muted-foreground",
+						children: label
+					}),
+					required && /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "type-text-sm font-medium text-required",
+						children: "*"
+					}),
+					tooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(Info, { className: "size-4 text-muted-foreground" })
+					}), /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })] })
+				]
+			}),
+			children,
+			(hint || error) && /* @__PURE__ */ jsx("p", {
+				id: fieldId ? `${fieldId}-description` : void 0,
+				className: cn("type-text-sm", error ? "text-destructive" : "text-subtle-foreground"),
+				children: error ?? hint
+			})
+		]
+	});
+}
+//#endregion
+export { Field };

package/dist/components/form.d.mts

@@ -1,69 +1,39 @@
 import { InputProps } from "./input.mjs";
 import { Label } from "./label.mjs";
 import { TextareaProps } from "./textarea.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import * as React from "react";
+import * as React$1 from "react";
 import { Slot } from "@radix-ui/react-slot";
-import * as _$react_hook_form0 from "react-hook-form";
 import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
-
 //#region src/components/form.d.ts
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: _$react_hook_form0.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({
-  ...props
-}: ControllerProps<TFieldValues, TName>) => _$react_jsx_runtime0.JSX.Element;
+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 FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React$1.JSX.Element;
 declare const useFormField: () => {
   invalid: boolean;
   isDirty: boolean;
   isTouched: boolean;
   isValidating: boolean;
-  error?: _$react_hook_form0.FieldError;
+  error?: import("react-hook-form").FieldError;
   id: string;
   name: string;
   formItemId: string;
   formDescriptionId: string;
   formMessageId: string;
 };
-declare function FormItem({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
-interface FormLabelProps extends React.ComponentProps<typeof Label> {
+declare function FormItem({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+interface FormLabelProps extends React$1.ComponentProps<typeof Label> {
   required?: boolean;
   tooltip?: string;
 }
-declare function FormLabel({
-  className,
-  required,
-  tooltip,
-  children,
-  ...props
-}: FormLabelProps): _$react_jsx_runtime0.JSX.Element;
-declare function FormControl({
-  ...props
-}: React.ComponentProps<typeof Slot>): _$react_jsx_runtime0.JSX.Element;
-declare function FormDescription({
-  className,
-  ...props
-}: React.ComponentProps<"p">): _$react_jsx_runtime0.JSX.Element;
-declare function FormMessage({
-  className,
-  ...props
-}: React.ComponentProps<"p">): _$react_jsx_runtime0.JSX.Element | null;
-interface FormHeaderProps extends React.ComponentProps<"div"> {
+declare function FormLabel({ className, required, tooltip, 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;
+interface FormHeaderProps extends React$1.ComponentProps<"div"> {
   title: string;
   description?: string;
 }
-declare function FormHeader({
-  title,
-  description,
-  className,
-  ...props
-}: FormHeaderProps): _$react_jsx_runtime0.JSX.Element;
-declare function FormFields({
-  className,
-  ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+declare function FormHeader({ title, description, className, ...props }: FormHeaderProps): React$1.JSX.Element;
+declare function FormFields({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
 interface FormFieldBaseProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> {
   control: ControllerProps<TFieldValues, TName>["control"];
   name: TName;
@@ -74,27 +44,9 @@ interface FormFieldBaseProps<TFieldValues extends FieldValues, TName extends Fie
   tooltip?: string;
 }
 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_jsx_runtime0.JSX.Element;
+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;
 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_jsx_runtime0.JSX.Element;
+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;
 interface SelectFieldOption {
   value: string;
   label: string;
@@ -104,51 +56,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_jsx_runtime0.JSX.Element;
+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;
 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_jsx_runtime0.JSX.Element;
+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;
 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_jsx_runtime0.JSX.Element;
+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;
 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_jsx_runtime0.JSX.Element;
+declare function CheckboxField<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>>({ control, name, rules, label, description, tooltip }: 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

@@ -9,12 +9,12 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from ".
 import { Textarea } from "./textarea.mjs";
 import { Info } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import * as React from "react";
+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
 const Form = FormProvider;
-const FormFieldContext = React.createContext({});
+const FormFieldContext = React$1.createContext({});
 const FormField = ({ ...props }) => {
 	return /* @__PURE__ */ jsx(FormFieldContext.Provider, {
 		value: { name: props.name },
@@ -22,8 +22,8 @@ const FormField = ({ ...props }) => {
 	});
 };
 const useFormField = () => {
-	const fieldContext = React.useContext(FormFieldContext);
-	const itemContext = React.useContext(FormItemContext);
+	const fieldContext = React$1.useContext(FormFieldContext);
+	const itemContext = React$1.useContext(FormItemContext);
 	if (!fieldContext.name) throw new Error("useFormField should be used within <FormField>");
 	const { getFieldState } = useFormContext();
 	const formState = useFormState({ name: fieldContext.name });
@@ -38,13 +38,15 @@ const useFormField = () => {
 		...fieldState
 	};
 };
-const FormItemContext = React.createContext({});
+const FormItemContext = React$1.createContext({});
 function FormItem({ className, ...props }) {
-	const id = React.useId();
+	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
 		})
@@ -65,7 +67,7 @@ function FormLabel({ className, required, tooltip, children, ...props }) {
 			}),
 			required && /* @__PURE__ */ jsx("span", {
 				"aria-hidden": true,
-				className: "type-text-sm font-medium text-required",
+				className: "type-text-sm font-medium text-required leading-none",
 				children: "*"
 			}),
 			tooltip && /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {

package/dist/components/github-button.d.mts

@@ -1,13 +1,7 @@
 import { Button } from "./button.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ComponentProps } from "react";
-
 //#region src/components/github-button.d.ts
 type GitHubButtonProps = Omit<ComponentProps<typeof Button>, "variant" | "icon">;
-declare function GitHubButton({
-  className,
-  children,
-  ...props
-}: GitHubButtonProps): _$react_jsx_runtime0.JSX.Element;
+declare function GitHubButton({ className, children, ...props }: GitHubButtonProps): import("react").JSX.Element;
 //#endregion
 export { GitHubButton, type GitHubButtonProps };

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

@@ -0,0 +1,32 @@
+import { ChartPaletteName } from "../lib/chart-palette.mjs";
+import * as React$1 from "react";
+//#region src/components/heatmap-chart.d.ts
+interface HeatmapChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  xKey: string;
+  yKey: string;
+  dataKey?: string;
+  variant?: "square" | "dot";
+  palette?: ChartPaletteName;
+  xLabels?: readonly string[];
+  yLabels?: readonly string[];
+  showAllXLabels?: boolean;
+  highlightPeak?: boolean;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  xTickFormatter?: (label: string) => string;
+  yTickFormatter?: (label: string) => string;
+  tooltipMetrics?: ReadonlyArray<{
+    key: string;
+    label: string;
+    format?: (value: number) => string;
+  }>;
+  tooltipTitleKey?: string;
+  colorScale?: "linear" | "rank";
+  showLegend?: boolean;
+  ariaLabel?: string;
+  className?: string;
+}
+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 };