@alpic-ai/ui 1.154.0 → 1.155.0

package/dist/components/area-chart.mjs

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

package/dist/components/bar-chart.mjs

@@ -3,11 +3,12 @@ import { cn } from "../lib/cn.mjs";
 import { makeXAxisTick, orderByLuminance, resolveSeries } from "../lib/chart.mjs";
 import { useChartContext } from "./chart-container.mjs";
 import { ChartLegend } from "./chart-legend.mjs";
+import { computeNumericMax, makeChartAxis, makeLegendItems, renderMarkers, renderReferenceLine } from "./chart-primitives.mjs";
 import { ChartTooltipContent } from "./chart-tooltip.mjs";
 import { Skeleton } from "./skeleton.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
-import { Bar, BarChart as BarChart$1, CartesianGrid, Cell, LabelList, ReferenceArea, ReferenceDot, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
+import { Bar, BarChart as BarChart$1, CartesianGrid, Cell, LabelList, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 //#region src/components/bar-chart.tsx
 const BAR_RADIUS = 4;
 const MAX_BAR_SIZE = 48;
@@ -19,21 +20,7 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 	const rendered = stacked ? orderByLuminance(resolved) : resolved;
 	const lead = resolved[0];
 	const withTotal = stacked && rendered.length > 1;
-	const numericMax = React$1.useMemo(() => {
-		let max = 0;
-		for (const row of data) {
-			let rowTotal = 0;
-			for (const entry of series) {
-				const value = Number(row[entry.key]);
-				if (Number.isFinite(value)) {
-					rowTotal += value;
-					if (!stacked && value > max) max = value;
-				}
-			}
-			if (stacked && rowTotal > max) max = rowTotal;
-		}
-		return max;
-	}, [
+	const numericMax = React$1.useMemo(() => computeNumericMax(data, series, stacked), [
 		data,
 		series,
 		stacked
@@ -58,24 +45,8 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 		bottom: 2,
 		left: 0
 	};
-	const axis = {
-		stroke: theme.border,
-		tick: {
-			fill: theme.axisForeground,
-			fontSize: 10,
-			fontFamily: theme.fontMono
-		},
-		tickLine: false,
-		axisLine: {
-			stroke: theme.border,
-			strokeOpacity: .6
-		}
-	};
-	const legendItems = resolved.map((entry) => ({
-		name: entry.name,
-		color: entry.color,
-		dashed: entry.dashed
-	}));
+	const axis = makeChartAxis(theme);
+	const legendItems = makeLegendItems(resolved);
 	const radiusFor = (slot) => {
 		if (!stacked || slot === rendered.length - 1) return [
 			BAR_RADIUS,
@@ -201,25 +172,10 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 								showTotal: withTotal
 							})
 						}),
-						referenceLine?.band && /* @__PURE__ */ jsx(ReferenceArea, {
-							y1: referenceLine.y,
-							y2: numericMax,
-							fill: theme.warning,
-							fillOpacity: .06,
-							ifOverflow: "extendDomain"
-						}),
-						referenceLine && /* @__PURE__ */ jsx(ReferenceLine, {
-							y: referenceLine.y,
-							stroke: theme.warning,
-							strokeDasharray: "4 4",
-							strokeOpacity: .6,
-							label: referenceLine.label ? {
-								value: referenceLine.label,
-								fill: theme.warning,
-								fontSize: 9,
-								fontFamily: theme.fontMono,
-								position: "insideBottomRight"
-							} : void 0
+						renderReferenceLine({
+							referenceLine,
+							numericMax,
+							theme
 						}),
 						rendered.map((entry, slot) => /* @__PURE__ */ jsxs(Bar, {
 							dataKey: entry.key,
@@ -259,21 +215,7 @@ function BarChart({ data, index, series, variant = "stacked", legend = false, le
 								content: renderValueLabel(entry.color)
 							})]
 						}, entry.key)),
-						markers?.map((marker) => /* @__PURE__ */ jsx(ReferenceDot, {
-							x: marker.x,
-							y: marker.y,
-							r: 3.5,
-							fill: marker.color ?? theme.foreground,
-							stroke: theme.card,
-							strokeWidth: 2,
-							label: marker.label ? {
-								value: marker.label,
-								fill: marker.color ?? theme.foreground,
-								fontSize: 9,
-								fontFamily: theme.fontMono,
-								position: "top"
-							} : void 0
-						}, `${marker.x}-${marker.y}`))
+						renderMarkers(markers, theme)
 					]
 				})
 			})

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

@@ -0,0 +1,69 @@
+import { ChartTheme } from "../hooks/use-chart-theme.mjs";
+import { ChartSeries, ResolvedSeries } from "../lib/chart.mjs";
+import { ChartMarker } from "./area-chart.mjs";
+//#region src/components/chart-primitives.d.ts
+type ReferenceLineConfig = {
+  y: number;
+  label?: string;
+  band?: boolean;
+};
+type ChartData = ReadonlyArray<Record<string, string | number | null | undefined>>;
+declare function makeChartAxis(theme: ChartTheme): {
+  stroke: string;
+  tick: {
+    fill: string;
+    fontSize: number;
+    fontFamily: string;
+  };
+  tickLine: false;
+  axisLine: {
+    stroke: string;
+    strokeOpacity: number;
+  };
+};
+declare function makeLegendItems(resolved: ResolvedSeries[]): {
+  name: string;
+  color: string;
+  dashed: boolean | undefined;
+}[];
+/**
+ * Stacked series must reach the stack height (sum per x-point), not the tallest
+ * single series, or reference bands and explicit Y domains clip a tall stack short.
+ */
+declare function computeNumericMax(data: ChartData, series: ChartSeries[], stacked: boolean): number;
+declare function makeActiveDot(entry: ResolvedSeries, { valueFlags, theme, valueFormatter }: {
+  valueFlags: boolean;
+  theme: ChartTheme;
+  valueFormatter: (value: number) => string;
+}): ((dotProps: {
+  cx?: number;
+  cy?: number;
+  value?: number | string;
+}) => import("react").JSX.Element) | {
+  r: number;
+  fill: string;
+  stroke: string;
+  strokeWidth: number;
+};
+declare function makeLastValueLabel(color: string, { dataLength, theme, valueFormatter }: {
+  dataLength: number;
+  theme: ChartTheme;
+  valueFormatter: (value: number) => string;
+}): (props: {
+  x?: string | number;
+  y?: string | number;
+  value?: string | number | boolean | Array<string | number | boolean> | null;
+  index?: number;
+}) => import("react").JSX.Element | null;
+/**
+ * Returns recharts elements (not a wrapper component) so recharts still detects
+ * them as direct children when spread into a chart via `{renderReferenceLine(...)}`.
+ */
+declare function renderReferenceLine({ referenceLine, numericMax, theme }: {
+  referenceLine: ReferenceLineConfig | undefined;
+  numericMax: number;
+  theme: ChartTheme;
+}): (import("react").JSX.Element | null)[] | null;
+declare function renderMarkers(markers: ChartMarker[] | undefined, theme: ChartTheme): import("react").JSX.Element[] | undefined;
+//#endregion
+export { ReferenceLineConfig, computeNumericMax, makeActiveDot, makeChartAxis, makeLastValueLabel, makeLegendItems, renderMarkers, renderReferenceLine };

package/dist/components/chart-primitives.mjs

@@ -0,0 +1,134 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ReferenceArea, ReferenceDot, ReferenceLine } from "recharts";
+//#region src/components/chart-primitives.tsx
+function makeChartAxis(theme) {
+	return {
+		stroke: theme.border,
+		tick: {
+			fill: theme.axisForeground,
+			fontSize: 10,
+			fontFamily: theme.fontMono
+		},
+		tickLine: false,
+		axisLine: {
+			stroke: theme.border,
+			strokeOpacity: .6
+		}
+	};
+}
+function makeLegendItems(resolved) {
+	return resolved.map((entry) => ({
+		name: entry.name,
+		color: entry.color,
+		dashed: entry.dashed
+	}));
+}
+/**
+* Stacked series must reach the stack height (sum per x-point), not the tallest
+* single series, or reference bands and explicit Y domains clip a tall stack short.
+*/
+function computeNumericMax(data, series, stacked) {
+	let max = 0;
+	for (const row of data) {
+		let rowTotal = 0;
+		for (const entry of series) {
+			const value = Number(row[entry.key]);
+			if (Number.isFinite(value)) {
+				rowTotal += value;
+				if (!stacked && value > max) max = value;
+			}
+		}
+		if (stacked && rowTotal > max) max = rowTotal;
+	}
+	return max;
+}
+function makeActiveDot(entry, { valueFlags, theme, valueFormatter }) {
+	if (!valueFlags) return {
+		r: 3.5,
+		fill: entry.color,
+		stroke: theme.card,
+		strokeWidth: 2
+	};
+	return (dotProps) => {
+		if (dotProps.cx == null || dotProps.cy == null) return /* @__PURE__ */ jsx("g", {});
+		return /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("circle", {
+			cx: dotProps.cx,
+			cy: dotProps.cy,
+			r: 3.5,
+			fill: entry.color,
+			stroke: theme.card,
+			strokeWidth: 2
+		}), /* @__PURE__ */ jsx("text", {
+			x: dotProps.cx,
+			y: dotProps.cy - 8,
+			textAnchor: "middle",
+			fill: entry.color,
+			fontFamily: theme.fontMono,
+			fontSize: 10,
+			style: { fontVariantNumeric: "tabular-nums" },
+			children: valueFormatter(Number(dotProps.value ?? 0))
+		})] });
+	};
+}
+function makeLastValueLabel(color, { dataLength, theme, valueFormatter }) {
+	return (props) => {
+		if (props.index !== dataLength - 1 || props.x == null || props.y == null) return null;
+		return /* @__PURE__ */ jsx("text", {
+			x: Number(props.x) + 6,
+			y: Number(props.y),
+			dy: 3,
+			fill: color,
+			fontFamily: theme.fontMono,
+			fontSize: 10,
+			textAnchor: "start",
+			style: { fontVariantNumeric: "tabular-nums" },
+			children: valueFormatter(Number(props.value ?? 0))
+		});
+	};
+}
+/**
+* Returns recharts elements (not a wrapper component) so recharts still detects
+* them as direct children when spread into a chart via `{renderReferenceLine(...)}`.
+*/
+function renderReferenceLine({ referenceLine, numericMax, theme }) {
+	if (!referenceLine) return null;
+	return [referenceLine.band ? /* @__PURE__ */ jsx(ReferenceArea, {
+		y1: referenceLine.y,
+		y2: numericMax,
+		fill: theme.warning,
+		fillOpacity: .06,
+		ifOverflow: "extendDomain"
+	}, "reference-band") : null, /* @__PURE__ */ jsx(ReferenceLine, {
+		y: referenceLine.y,
+		stroke: theme.warning,
+		strokeDasharray: "4 4",
+		strokeOpacity: .6,
+		label: referenceLine.label ? {
+			value: referenceLine.label,
+			fill: theme.warning,
+			fontSize: 9,
+			fontFamily: theme.fontMono,
+			position: "insideBottomRight"
+		} : void 0
+	}, "reference-line")];
+}
+function renderMarkers(markers, theme) {
+	return markers?.map((marker) => /* @__PURE__ */ jsx(ReferenceDot, {
+		x: marker.x,
+		y: marker.y,
+		r: 3.5,
+		fill: marker.color ?? theme.foreground,
+		stroke: theme.card,
+		strokeWidth: 2,
+		label: marker.label ? {
+			value: marker.label,
+			fill: marker.color ?? theme.foreground,
+			fontSize: 9,
+			fontFamily: theme.fontMono,
+			position: "top"
+		} : void 0
+	}, `${marker.x}-${marker.y}`));
+}
+//#endregion
+export { computeNumericMax, makeActiveDot, makeChartAxis, makeLastValueLabel, makeLegendItems, renderMarkers, renderReferenceLine };

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/input.mjs

@@ -1,8 +1,6 @@
 "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 { Field } from "./field.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React$1 from "react";
 //#region src/components/input.tsx
@@ -47,52 +45,30 @@ function Input({ className, id, label, required, hint, error, tooltip, leadingTe
 		"aria-describedby": fieldId && (hint || error) ? `${fieldId}-description` : void 0,
 		...props
 	});
-	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"),
-		children: [
-			leadingIcon && /* @__PURE__ */ jsx("span", {
-				className: cn("flex items-center text-subtle-foreground [&_svg]:shrink-0", sizes.leadingIcon),
-				children: leadingIcon
-			}),
-			leadingText && /* @__PURE__ */ jsx("span", {
-				className: cn("flex items-center text-subtle-foreground whitespace-nowrap border-r border-border self-stretch", sizes.leadingText),
-				children: leadingText
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: cn("flex flex-1 items-center min-w-0", sizes.inner),
-				children: inputElement
-			})
-		]
-	}) : inputElement;
-	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 })] })
-				]
-			}),
-			wrappedInput,
-			(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
-			})
-		]
+	return /* @__PURE__ */ jsx(Field, {
+		fieldId,
+		label,
+		required,
+		hint,
+		error,
+		tooltip,
+		children: 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"),
+			children: [
+				leadingIcon && /* @__PURE__ */ jsx("span", {
+					className: cn("flex items-center text-subtle-foreground [&_svg]:shrink-0", sizes.leadingIcon),
+					children: leadingIcon
+				}),
+				leadingText && /* @__PURE__ */ jsx("span", {
+					className: cn("flex items-center text-subtle-foreground whitespace-nowrap border-r border-border self-stretch", sizes.leadingText),
+					children: leadingText
+				}),
+				/* @__PURE__ */ jsx("div", {
+					className: cn("flex flex-1 items-center min-w-0", sizes.inner),
+					children: inputElement
+				})
+			]
+		}) : inputElement
 	});
 }
 //#endregion