@reopt-ai/opt-ui 1.8.0 → 1.10.0

package/dist/{pagination-DWbvACuN.js → text-truncate-j6X3z7Pv.js}

@@ -3,9 +3,9 @@ import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { AlertDialogPanel, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxPopover, ComboboxRoot, Composite, CompositeItem, CompositeProvider, CompositeRow, DialogDescription, DialogDisclosure, DialogDismiss, DialogHeading, DialogPanel, DialogRoot, DisclosureContent, DisclosureRoot, DisclosureTrigger, FormCheckbox, FormControl, FormDescription, FormError, FormField, FormGroup, FormGroupLabel, FormInput, FormLabel, FormProvider, FormPush, FormRadio, FormRadioGroup, FormRemove, FormReset, FormRoot, FormSubmit, FormSwitch, MenuButtonArrow, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuRoot, MenuSeparator, MenuTrigger, MenubarContainer, MenubarRoot, PopoverClose, PopoverContent, PopoverRoot, PopoverTrigger, SelectItem, SelectLabel, SelectPopover, SelectRoot, SelectTrigger, Tab, TabList, TabPanel, TabsRoot, ToolbarButton, ToolbarContainer, ToolbarRoot, ToolbarSeparator, Tooltip, TooltipAnchor, TooltipProvider, useFieldValue, useFormContext, useFormStore } from "@reopt-ai/opt-ui-primitives";
-import { Bell, CalendarDays, ChartColumn, Check, ChevronLeft, ChevronRight, CircleAlert, CircleCheck, CreditCard, Download, Eye, FileText, Flag, Folder, Globe, Heart, Info, Link2, LogIn, Mail, MessageCircle, MousePointerClick, Search, Settings, Share2, ShoppingCart, Star, TrendingUp, TriangleAlert, Upload, User, UserPlus, XCircle, Zap } from "lucide-react";
+import { AtSign, Bell, Binary, Braces, Brackets, Calendar, CalendarClock, CalendarDays, ChartColumn, Check, ChevronLeft, ChevronRight, CircleAlert, CircleCheck, CircleDollarSign, CircleHelp, CreditCard, Download, Eye, FileText, Fingerprint, Flag, Folder, Globe, Hash, Heart, Info, Layers, Link2, List, LogIn, Mail, MapPin, MessageCircle, MousePointerClick, Network, Percent, Search, Settings, Share2, ShoppingCart, Sigma, Star, Timer, ToggleLeft, TrendingUp, TriangleAlert, Type, Upload, User, UserPlus, XCircle, Zap } from "lucide-react";
 //#region src/lib/cn.ts
 /** Handles cn. */
 function cn(...inputs) {
@@ -324,7 +324,7 @@ const variantStyles$2 = {
 	ghost: "text-text-secondary hover:bg-bg-subtle active:bg-bg-muted focus-visible:ring-offset-1",
 	danger: "bg-danger text-danger-fg hover:bg-danger active:bg-danger focus-visible:ring-offset-2"
 };
-const sizeStyles$3 = {
+const sizeStyles$4 = {
 	sm: "h-[var(--opt-control-sm)] px-[var(--opt-control-padding-sm)] text-xs gap-[var(--opt-space-1-5)]",
 	md: "h-[var(--opt-control-md)] px-[var(--opt-control-padding-md)] text-sm gap-[var(--opt-space-2)]",
 	lg: "h-[var(--opt-control-lg)] px-[var(--opt-control-padding-lg)] text-base gap-[var(--opt-space-2)]"
@@ -335,7 +335,7 @@ function Button(_ref) {
 	const isDisabled = disabled || loading;
 	return /* @__PURE__ */ jsxs("button", _objectSpread2(_objectSpread2({
 		type: "button",
-		className: cn("inline-flex cursor-pointer items-center justify-center rounded-lg font-medium transition-colors", OPT_FOCUS_VISIBLE, variantStyles$2[variant], sizeStyles$3[size], isDisabled && "pointer-events-none cursor-not-allowed opacity-50", className),
+		className: cn("inline-flex cursor-pointer items-center justify-center rounded-lg font-medium transition-colors", OPT_FOCUS_VISIBLE, variantStyles$2[variant], sizeStyles$4[size], isDisabled && "pointer-events-none cursor-not-allowed opacity-50", className),
 		disabled: isDisabled
 	}, props), {}, {
 		"aria-busy": loading ? true : ariaBusy,
@@ -444,7 +444,7 @@ const progressStroke = {
 	error: "stroke-danger",
 	info: "stroke-info"
 };
-const sizeStyles$2 = {
+const sizeStyles$3 = {
 	sm: "px-1.5 py-0.5 text-[10px]",
 	md: "px-2 py-0.5 text-[11px]"
 };
@@ -456,7 +456,7 @@ function Badge(_ref) {
 	const radius = (progressSize - 3) / 2;
 	const circumference = 2 * Math.PI * radius;
 	const offset = circumference - clampedProgress / 100 * circumference;
-	return /* @__PURE__ */ jsxs("span", _objectSpread2(_objectSpread2({ className: cn(OPT_BADGE, variantStyles$1[variant], sizeStyles$2[size], className) }, props), {}, {
+	return /* @__PURE__ */ jsxs("span", _objectSpread2(_objectSpread2({ className: cn(OPT_BADGE, variantStyles$1[variant], sizeStyles$3[size], className) }, props), {}, {
 		"data-opt-id": "9GBGZ",
 		"data-opt-slug": "badge.Badge",
 		children: [
@@ -503,7 +503,7 @@ const _excluded$13 = [
 	"aria-hidden",
 	"aria-label"
 ];
-const sizeStyles$1 = {
+const sizeStyles$2 = {
 	sm: "h-4 w-4",
 	md: "h-6 w-6",
 	lg: "h-8 w-8"
@@ -513,7 +513,7 @@ function Spinner(_ref) {
 	let { size = "md", className, role, "aria-hidden": ariaHidden, "aria-label": ariaLabel } = _ref, props = _objectWithoutProperties(_ref, _excluded$13);
 	const isDecorative = ariaHidden === true || ariaHidden === "true";
 	return /* @__PURE__ */ jsxs("svg", _objectSpread2(_objectSpread2({
-		className: cn("animate-spin text-current", sizeStyles$1[size], className),
+		className: cn("animate-spin text-current", sizeStyles$2[size], className),
 		viewBox: "0 0 24 24",
 		fill: "none",
 		role: isDecorative ? void 0 : role !== null && role !== void 0 ? role : "status",
@@ -3532,7 +3532,7 @@ function setForwardedRef(ref, value) {
 	if (typeof ref === "function") ref(value);
 	else if (ref) ref.current = value;
 }
-const sizeStyles = {
+const sizeStyles$1 = {
 	sm: {
 		box: "h-4 w-4",
 		icon: "h-3 w-3",
@@ -3598,7 +3598,7 @@ const Checkbox = forwardRef((_ref, ref) => {
 	const checkboxId = (_useInputId = useInputId(id, label, "checkbox")) !== null && _useInputId !== void 0 ? _useInputId : `checkbox-${fallbackId}`;
 	const hintText = hint !== null && hint !== void 0 ? hint : description;
 	const hasError = Boolean(error);
-	const styles = sizeStyles[size];
+	const styles = sizeStyles$1[size];
 	const isIndeterminate = Boolean(indeterminate);
 	const inputRef = useCallback((node) => {
 		if (node) node.indeterminate = isIndeterminate;
@@ -3845,6 +3845,386 @@ function Pagination(_ref) {
 	}));
 }
 //#endregion
-export { TooltipAnchor$1 as $, koBreadcrumbLabels as $t, FormSwitch$1 as A, OPT_SURFACE_POPOVER as An, SelectPopover$1 as At, getIconRegistryEntry as B, _objectSpread2 as Bn, Composite as Bt, FormRoot$1 as C, OPT_FOCUS as Cn, DialogFooter as Ct, FormSlider as D, OPT_INPUT_ERROR as Dn, DialogRoot$1 as Dt, FormSelectPopover as E, OPT_INPUT as En, DialogPanel$1 as Et, useFormStore as F, OPT_TEXT_LABEL as Fn, TabPanel$1 as Ft, PopoverTrigger$1 as G, StarRating as Gt, PopoverClose$1 as H, Kbd as Hn, CompositeProvider as Ht, DEFAULT_PRESETS as I, OPT_TEXT_PRIMARY as In, TabsRoot$1 as It, ToolbarButton$1 as J, Alert as Jt, Slider as K, Input as Kt, DateRangePicker as L, OPT_TEXT_SECONDARY as Ln, DisclosureContent$1 as Lt, FormTextarea as M, OPT_TD as Mn, SelectTrigger$1 as Mt, useFieldValue as N, OPT_TD_MUTED as Nn, Tab$1 as Nt, FormStarRating as O, OPT_ITEM_BASE as On, SelectItem$1 as Ot, useFormContext as P, OPT_TEXTAREA_SIZE as Pn, TabList$1 as Pt, Tooltip$1 as Q, Button as Qt, TagInput as R, OPT_TEXT_TERTIARY as Rn, DisclosureRoot$1 as Rt, FormReset$1 as S, OPT_DOT_YELLOW as Sn, DialogDismiss$1 as St, FormSelectItem as T, OPT_HOVER_ITEM as Tn, DialogHeading$1 as Tt, PopoverContent$1 as U, cn as Un, CompositeRow as Ut, ColorPicker as V, _objectWithoutProperties as Vn, CompositeItem as Vt, PopoverRoot$1 as W, CompositeZone as Wt, ToolbarRoot$1 as X, Badge as Xt, ToolbarContainer$1 as Y, Spinner as Yt, ToolbarSeparator$1 as Z, EmptyState as Zt, FormProvider$1 as _, OPT_DISCLOSURE_TRIGGER as _n, ComboboxRoot$1 as _t, FormColorPicker as a, RequiredMark as an, MenuPopover$1 as at, FormRadioGroup$1 as b, OPT_DOT_GREEN as bn, DialogDescription$1 as bt, FormDescription$1 as c, OPT_ANIMATE_DRAWER as cn, MenuTrigger$1 as ct, FormGroup$1 as d, OPT_BADGE_GREEN as dn, ComboboxEmpty as dt, koComboboxLabels as en, TooltipProvider$1 as et, FormGroupLabel$1 as f, OPT_BADGE_NEUTRAL as fn, ComboboxGroup$1 as ft, FormNumberInput as g, OPT_DISCLOSURE_CONTENT as gn, ComboboxPopover$1 as gt, FormLabel$1 as h, OPT_BORDER as hn, ComboboxItem$1 as ht, FormCheckbox$1 as i, FieldMessages as in, MenuItemRadio$1 as it, FormTagInput as j, OPT_TABLE_ROW_ACTIVE as jn, SelectRoot$1 as jt, FormSubmit$1 as k, OPT_SURFACE as kn, SelectLabel$1 as kt, FormError$1 as l, OPT_ANIMATE_ENTER_EXIT as ln, MenubarContainer$1 as lt, FormInput$1 as m, OPT_BADGE_YELLOW as mn, ComboboxInput$1 as mt, Checkbox as n, StatCard as nn, MenuItem$1 as nt, FormControl$1 as o, getDescribedBy as on, MenuRoot$1 as ot, FormIconPicker as p, OPT_BADGE_RED as pn, ComboboxGroupLabel$1 as pt, NumberInput as q, useInputId as qt, CheckboxGroup as r, useControlledState as rn, MenuItemCheckbox$1 as rt, FormDateRangePicker as s, OPT_ACTIVE_ITEM as sn, MenuSeparator$1 as st, Pagination as t, koStarRatingLabels as tn, MenuButtonArrow$1 as tt, FormField$1 as u, OPT_BADGE_BLUE as un, MenubarRoot$1 as ut, FormPush$1 as v, OPT_DIVIDER as vn, AlertDialogPanel$1 as vt, FormSelect as w, OPT_FOCUS_VISIBLE as wn, DialogHeader as wt, FormRemove$1 as x, OPT_DOT_RED as xn, DialogDisclosure$1 as xt, FormRadio$1 as y, OPT_DOT_GRAY as yn, DialogBody as yt, IconPicker as z, OPT_TH as zn, DisclosureTrigger$1 as zt };
+//#region src/core/field-token.tsx
+/**
+* The glyph and palette slot each field type reads as. Exported so a product
+* can render the same legend the tokens imply.
+*/
+const FIELD_TYPE_TOKENS = {
+	string: {
+		icon: Type,
+		tone: 1,
+		name: "String"
+	},
+	number: {
+		icon: Hash,
+		tone: 2,
+		name: "Number"
+	},
+	boolean: {
+		icon: ToggleLeft,
+		tone: 3,
+		name: "Boolean"
+	},
+	date: {
+		icon: Calendar,
+		tone: 4,
+		name: "Date"
+	},
+	datetime: {
+		icon: CalendarClock,
+		tone: 4,
+		name: "Date and time"
+	},
+	duration: {
+		icon: Timer,
+		tone: 5,
+		name: "Duration"
+	},
+	percent: {
+		icon: Percent,
+		tone: 6,
+		name: "Percent"
+	},
+	currency: {
+		icon: CircleDollarSign,
+		tone: 7,
+		name: "Currency"
+	},
+	enum: {
+		icon: List,
+		tone: 8,
+		name: "Enum"
+	},
+	array: {
+		icon: Brackets,
+		tone: 9,
+		name: "Array"
+	},
+	object: {
+		icon: Braces,
+		tone: 10,
+		name: "Object"
+	},
+	json: {
+		icon: Braces,
+		tone: 10,
+		name: "JSON"
+	},
+	ip: {
+		icon: Network,
+		tone: 11,
+		name: "IP address"
+	},
+	geo: {
+		icon: MapPin,
+		tone: 12,
+		name: "Geo point"
+	},
+	url: {
+		icon: Link2,
+		tone: 13,
+		name: "URL"
+	},
+	email: {
+		icon: AtSign,
+		tone: 14,
+		name: "Email"
+	},
+	id: {
+		icon: Fingerprint,
+		tone: 15,
+		name: "Identifier"
+	},
+	binary: {
+		icon: Binary,
+		tone: 16,
+		name: "Binary"
+	},
+	aggregate: {
+		icon: Sigma,
+		tone: 2,
+		name: "Aggregate"
+	},
+	nested: {
+		icon: Layers,
+		tone: 9,
+		name: "Nested"
+	},
+	unknown: {
+		icon: CircleHelp,
+		tone: 0,
+		name: "Unknown"
+	}
+};
+/**
+* Names a backend type as one of ours. Accepts the spellings Postgres,
+* ClickHouse, DuckDB, and JSON Schema actually emit, so a caller can hand
+* over a column type verbatim instead of maintaining its own table.
+*/
+function resolveFieldType(raw) {
+	if (!raw) return "unknown";
+	const t = raw.trim().toLowerCase();
+	if (t in FIELD_TYPE_TOKENS) return t;
+	if (t.endsWith("[]")) return "array";
+	if (/^(array|list|set|multi)/.test(t)) return "array";
+	if (/^(bytea|blob|binary|fixedstring)/.test(t)) return "binary";
+	if (/^bool/.test(t)) return "boolean";
+	if (/^(timestamp|datetime)/.test(t)) return "datetime";
+	if (/^date/.test(t)) return "date";
+	if (/^interval/.test(t)) return "duration";
+	if (/^(uuid|guid)/.test(t)) return "id";
+	if (/^(inet|cidr|ipv?[46])/.test(t)) return "ip";
+	if (/^(point|geo|geography|geometry|latlon)/.test(t)) return "geo";
+	if (/^(jsonb?|map|struct|record|tuple)/.test(t)) return "json";
+	if (/^(enum|lowcardinality|category|categorical)/.test(t)) return "enum";
+	if (/^(u?int|float|double|decimal|numeric|real|bigint|smallint|tinyint|serial|money)/.test(t)) return "number";
+	if (/^(text|n?varchar|n?char|keyword|str|string)/.test(t)) return "string";
+	return "unknown";
+}
+const sizeStyles = {
+	xs: "size-4 rounded-[3px] [&>svg]:size-2.5",
+	sm: "size-5 rounded [&>svg]:size-3",
+	md: "size-6 rounded-md [&>svg]:size-3.5",
+	lg: "size-8 rounded-lg [&>svg]:size-4"
+};
+const shapeStyles = {
+	square: "",
+	circle: "rounded-full"
+};
+/**
+* FieldToken — the type of a field, as a glyph.
+*
+* A field list, a column header, and a property table all have to answer
+* "what kind of thing is this?" before anything else, and they have to answer
+* it in the width of an icon. This is that answer: one glyph per type, one
+* palette slot per glyph, stable across every surface that shows fields, so a
+* reader learns the vocabulary once.
+*
+* @example
+* ```tsx
+* <FieldToken type={resolveFieldType(column.dataType)} title={column.name} />
+* ```
+*/
+function FieldToken({ type, size = "sm", fill = "subtle", shape = "square", title, decorative = false, className }) {
+	var _FIELD_TYPE_TOKENS$ty;
+	const appearance = (_FIELD_TYPE_TOKENS$ty = FIELD_TYPE_TOKENS[type]) !== null && _FIELD_TYPE_TOKENS$ty !== void 0 ? _FIELD_TYPE_TOKENS$ty : FIELD_TYPE_TOKENS.unknown;
+	const Icon = appearance.icon;
+	const label = title !== null && title !== void 0 ? title : appearance.name;
+	const hue = appearance.tone === 0 ? "var(--color-text-tertiary)" : `var(--opt-chart-${appearance.tone})`;
+	const style = fill === "solid" ? {
+		backgroundColor: hue,
+		color: "var(--color-surface)"
+	} : fill === "subtle" ? {
+		backgroundColor: `color-mix(in oklab, ${hue} 14%, transparent)`,
+		color: hue
+	} : { color: hue };
+	return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex shrink-0 items-center justify-center", sizeStyles[size], shapeStyles[shape], className),
+		style,
+		role: decorative ? void 0 : "img",
+		"aria-label": decorative ? void 0 : label,
+		"aria-hidden": decorative ? true : void 0,
+		"data-opt-id": "V3AJ4",
+		"data-opt-slug": "field-token.FieldToken",
+		"data-field-type": type,
+		children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" })
+	});
+}
+//#endregion
+//#region src/core/highlight.tsx
+function escapeForRegExp(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+/**
+* Splits `text` on every occurrence of every term. Terms are matched longest
+* first so a search for both "check" and "checkout" marks "checkout" whole
+* rather than leaving a stray "out".
+*/
+function segment(text, terms, caseSensitive, firstOnly) {
+	const usable = terms.filter((term) => term.length > 0).sort((a, b) => b.length - a.length);
+	if (usable.length === 0) return [{
+		text,
+		hit: false
+	}];
+	const pattern = new RegExp(`(${usable.map(escapeForRegExp).join("|")})`, caseSensitive ? "g" : "gi");
+	const out = [];
+	let cursor = 0;
+	let matched = false;
+	for (const match of text.matchAll(pattern)) {
+		var _match$index;
+		if (firstOnly && matched) break;
+		const at = (_match$index = match.index) !== null && _match$index !== void 0 ? _match$index : 0;
+		if (at > cursor) out.push({
+			text: text.slice(cursor, at),
+			hit: false
+		});
+		out.push({
+			text: match[0],
+			hit: true
+		});
+		cursor = at + match[0].length;
+		matched = true;
+	}
+	if (cursor < text.length) out.push({
+		text: text.slice(cursor),
+		hit: false
+	});
+	return out;
+}
+/**
+* Highlight — marks the part of a string the reader searched for.
+*
+* Uses a real `<mark>`, so the match is carried by semantics rather than by
+* colour alone and survives a high-contrast theme. Terms are matched longest
+* first, so overlapping terms produce whole marks instead of fragments.
+*
+* @example
+* ```tsx
+* <Highlight text={row.message} search={query} />
+* ```
+*/
+function Highlight({ text, search, caseSensitive = false, firstOnly = false, className, markClassName }) {
+	const segments = segment(text, Array.isArray(search) ? search : [search], caseSensitive, firstOnly);
+	return /* @__PURE__ */ jsx("span", {
+		className,
+		"data-opt-id": "448TR",
+		"data-opt-slug": "highlight.Highlight",
+		children: segments.map((part, index) => part.hit ? /* @__PURE__ */ jsx("mark", {
+			className: cn("bg-warning-subtle text-text-primary rounded-[2px] px-0.5 font-medium", markClassName),
+			children: part.text
+		}, index) : /* @__PURE__ */ jsx("span", { children: part.text }, index))
+	});
+}
+//#endregion
+//#region src/core/text-truncate.tsx
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+/** Measures text in the element's own resolved font, not an assumed one. */
+function createMeasurer(element) {
+	const context = document.createElement("canvas").getContext("2d");
+	if (!context) return null;
+	const computed = window.getComputedStyle(element);
+	context.font = [
+		computed.fontStyle,
+		computed.fontVariant,
+		computed.fontWeight,
+		`${computed.fontSize}/${computed.lineHeight}`,
+		computed.fontFamily
+	].join(" ");
+	const spacing = Number.parseFloat(computed.letterSpacing) || 0;
+	return (value) => context.measureText(value).width + spacing * value.length;
+}
+/** Largest `n` in `[0, max]` for which `fits(n)` holds. */
+function largestFitting(max, fits) {
+	let low = 0;
+	let high = max;
+	while (low < high) {
+		const mid = Math.ceil((low + high) / 2);
+		if (fits(mid)) low = mid;
+		else high = mid - 1;
+	}
+	return low;
+}
+function truncateToWidth(text, side, ellipsis, available, measure) {
+	if (measure(text) <= available) return text;
+	const chars = Array.from(text);
+	if (side === "end") {
+		const keep = largestFitting(chars.length, (n) => measure(chars.slice(0, n).join("") + ellipsis) <= available);
+		return chars.slice(0, keep).join("") + ellipsis;
+	}
+	if (side === "start") {
+		const keep = largestFitting(chars.length, (n) => measure(ellipsis + chars.slice(chars.length - n).join("")) <= available);
+		return ellipsis + chars.slice(chars.length - keep).join("");
+	}
+	if (side === "startEnd") {
+		const keep = largestFitting(Math.floor(chars.length / 2), (n) => {
+			const head = chars.slice(0, n).join("");
+			const tail = chars.slice(chars.length - n).join("");
+			return measure(head + ellipsis + tail) <= available;
+		});
+		if (keep === 0) return ellipsis;
+		return chars.slice(0, keep).join("") + ellipsis + chars.slice(chars.length - keep).join("");
+	}
+	const span = largestFitting(chars.length, (n) => {
+		const start = Math.floor((chars.length - n) / 2);
+		return measure(ellipsis + chars.slice(start, start + n).join("") + ellipsis) <= available;
+	});
+	if (span === 0) return ellipsis;
+	const start = Math.floor((chars.length - span) / 2);
+	return ellipsis + chars.slice(start, start + span).join("") + ellipsis;
+}
+/**
+* TextTruncate — drops characters from the part of a string that identifies it
+* least.
+*
+* CSS can only cut the end. That is the wrong end for the strings analytics
+* shows most: two URLs that differ in their query string, two ids that share a
+* prefix, a stack frame whose filename is at the tail. This measures the real
+* text in the real font against the real available width and cuts where the
+* caller says.
+*
+* The full string stays in the accessibility tree and in `title`, so
+* truncation never costs the reader information — only space.
+*
+* @example
+* ```tsx
+* <TextTruncate text={event.url} truncation="startEnd" />
+* ```
+*/
+function TextTruncate({ text, truncation = "startEnd", ellipsis = "…", width, children, className }) {
+	const ref = useRef(null);
+	const [available, setAvailable] = useState(width !== null && width !== void 0 ? width : null);
+	useIsomorphicLayoutEffect(() => {
+		if (width !== void 0) {
+			setAvailable(width);
+			return;
+		}
+		const element = ref.current;
+		if (!element || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver((entries) => {
+			const entry = entries[0];
+			if (entry) setAvailable(entry.contentRect.width);
+		});
+		observer.observe(element);
+		setAvailable(element.getBoundingClientRect().width);
+		return () => observer.disconnect();
+	}, [width]);
+	const [rendered, setRendered] = useState(text);
+	useIsomorphicLayoutEffect(() => {
+		const element = ref.current;
+		if (!element || available === null || available <= 0) {
+			setRendered(text);
+			return;
+		}
+		const measure = createMeasurer(element);
+		if (!measure) {
+			setRendered(text);
+			return;
+		}
+		setRendered(truncateToWidth(text, truncation, ellipsis, available, measure));
+	}, [
+		text,
+		truncation,
+		ellipsis,
+		available
+	]);
+	const truncated = rendered !== text;
+	return /* @__PURE__ */ jsxs("span", {
+		ref,
+		className: cn("block w-full overflow-hidden whitespace-nowrap", className),
+		title: truncated ? text : void 0,
+		"data-opt-id": "Y6BGX",
+		"data-opt-slug": "text-truncate.TextTruncate",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": truncated ? "true" : void 0,
+			children: children ? children(rendered) : rendered
+		}), truncated && /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: text
+		})]
+	});
+}
+//#endregion
+export { ToolbarButton$1 as $, Alert as $t, FormSelectItem as A, OPT_HOVER_ITEM as An, DialogHeading$1 as At, useFormStore as B, OPT_TEXT_LABEL as Bn, TabPanel$1 as Bt, FormPush$1 as C, OPT_DIVIDER as Cn, AlertDialogPanel$1 as Ct, FormReset$1 as D, OPT_DOT_YELLOW as Dn, DialogDismiss$1 as Dt, FormRemove$1 as E, OPT_DOT_RED as En, DialogDisclosure$1 as Et, FormSwitch$1 as F, OPT_SURFACE_POPOVER as Fn, SelectPopover$1 as Ft, getIconRegistryEntry as G, _objectSpread2 as Gn, Composite as Gt, DateRangePicker as H, OPT_TEXT_SECONDARY as Hn, DisclosureContent$1 as Ht, FormTagInput as I, OPT_TABLE_ROW_ACTIVE as In, SelectRoot$1 as It, PopoverContent$1 as J, cn as Jn, CompositeRow as Jt, ColorPicker as K, _objectWithoutProperties as Kn, CompositeItem as Kt, FormTextarea as L, OPT_TD as Ln, SelectTrigger$1 as Lt, FormSlider as M, OPT_INPUT_ERROR as Mn, DialogRoot$1 as Mt, FormStarRating as N, OPT_ITEM_BASE as Nn, SelectItem$1 as Nt, FormRoot$1 as O, OPT_FOCUS as On, DialogFooter as Ot, FormSubmit$1 as P, OPT_SURFACE as Pn, SelectLabel$1 as Pt, NumberInput as Q, useInputId as Qt, useFieldValue as R, OPT_TD_MUTED as Rn, Tab$1 as Rt, FormProvider$1 as S, OPT_DISCLOSURE_TRIGGER as Sn, ComboboxRoot$1 as St, FormRadioGroup$1 as T, OPT_DOT_GREEN as Tn, DialogDescription$1 as Tt, TagInput as U, OPT_TEXT_TERTIARY as Un, DisclosureRoot$1 as Ut, DEFAULT_PRESETS as V, OPT_TEXT_PRIMARY as Vn, TabsRoot$1 as Vt, IconPicker as W, OPT_TH as Wn, DisclosureTrigger$1 as Wt, PopoverTrigger$1 as X, StarRating as Xt, PopoverRoot$1 as Y, CompositeZone as Yt, Slider as Z, Input as Zt, FormGroupLabel$1 as _, OPT_BADGE_NEUTRAL as _n, ComboboxGroup$1 as _t, resolveFieldType as a, koComboboxLabels as an, TooltipProvider$1 as at, FormLabel$1 as b, OPT_BORDER as bn, ComboboxItem$1 as bt, CheckboxGroup as c, useControlledState as cn, MenuItemCheckbox$1 as ct, FormControl$1 as d, getDescribedBy as dn, MenuRoot$1 as dt, Spinner as en, ToolbarContainer$1 as et, FormDateRangePicker as f, OPT_ACTIVE_ITEM as fn, MenuSeparator$1 as ft, FormGroup$1 as g, OPT_BADGE_GREEN as gn, ComboboxEmpty as gt, FormField$1 as h, OPT_BADGE_BLUE as hn, MenubarRoot$1 as ht, FieldToken as i, koBreadcrumbLabels as in, TooltipAnchor$1 as it, FormSelectPopover as j, OPT_INPUT as jn, DialogPanel$1 as jt, FormSelect as k, OPT_FOCUS_VISIBLE as kn, DialogHeader as kt, FormCheckbox$1 as l, FieldMessages as ln, MenuItemRadio$1 as lt, FormError$1 as m, OPT_ANIMATE_ENTER_EXIT as mn, MenubarContainer$1 as mt, Highlight as n, EmptyState as nn, ToolbarSeparator$1 as nt, Pagination as o, koStarRatingLabels as on, MenuButtonArrow$1 as ot, FormDescription$1 as p, OPT_ANIMATE_DRAWER as pn, MenuTrigger$1 as pt, PopoverClose$1 as q, Kbd as qn, CompositeProvider as qt, FIELD_TYPE_TOKENS as r, Button as rn, Tooltip$1 as rt, Checkbox as s, StatCard as sn, MenuItem$1 as st, TextTruncate as t, Badge as tn, ToolbarRoot$1 as tt, FormColorPicker as u, RequiredMark as un, MenuPopover$1 as ut, FormIconPicker as v, OPT_BADGE_RED as vn, ComboboxGroupLabel$1 as vt, FormRadio$1 as w, OPT_DOT_GRAY as wn, DialogBody as wt, FormNumberInput as x, OPT_DISCLOSURE_CONTENT as xn, ComboboxPopover$1 as xt, FormInput$1 as y, OPT_BADGE_YELLOW as yn, ComboboxInput$1 as yt, useFormContext as z, OPT_TEXTAREA_SIZE as zn, TabList$1 as zt };
 
-//# sourceMappingURL=pagination-DWbvACuN.js.map
+//# sourceMappingURL=text-truncate-j6X3z7Pv.js.map