@geomak/ui 5.5.0 → 5.5.2

package/dist/index.cjs

@@ -10,12 +10,12 @@ var framerMotion = require('framer-motion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var Accordion = require('@radix-ui/react-accordion');
-var ToggleGroup = require('@radix-ui/react-toggle-group');
 var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
 var Popover = require('@radix-ui/react-popover');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
+var ToggleGroup = require('@radix-ui/react-toggle-group');
 var SliderPrimitive = require('@radix-ui/react-slider');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -44,12 +44,12 @@ var Dialog__namespace = /*#__PURE__*/_interopNamespace(Dialog);
 var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var Accordion__namespace = /*#__PURE__*/_interopNamespace(Accordion);
-var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
 var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
+var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
 var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 
 var Moon = ({ color = "gray" }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", fill: color, viewBox: "0 0 24 24", strokeWidth: 1.5, stroke: color, className: "w-8 h-8", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" }) });
@@ -1178,38 +1178,6 @@ function Tree({
     item.key
   )) });
 }
-function ToggleButton({ items, onChange, activeKey }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    ToggleGroup__namespace.Root,
-    {
-      type: "single",
-      value: activeKey,
-      onValueChange: (val) => {
-        if (val) onChange(val);
-      },
-      className: "flex items-center",
-      children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        ToggleGroup__namespace.Item,
-        {
-          value: item.key,
-          "aria-label": typeof item.label === "string" ? item.label : item.key,
-          className: [
-            // Semantic tokens handle both light and dark modes via
-            // CSS vars — no `dark:` variants needed.
-            index === 0 && "rounded-l-lg border-r border-border",
-            index === items.length - 1 && "rounded-r-lg border-l border-border",
-            "p-2 cursor-pointer transition-colors duration-150 text-foreground-secondary",
-            "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-            "bg-surface hover:bg-surface-raised",
-            "data-[state=on]:bg-accent data-[state=on]:text-accent-fg"
-          ].filter(Boolean).join(" "),
-          children: item.icon ?? item.label
-        },
-        item.key
-      ))
-    }
-  );
-}
 var NotificationContext = React8.createContext({
   open: () => void 0,
   close: () => void 0
@@ -1611,6 +1579,10 @@ var TOGGLE_POSITION_CLASS = {
 function ScalableContainer({
   width = "100%",
   height = "auto",
+  expandedWidth = "100%",
+  expandedHeight = "100%",
+  expanded,
+  onExpandedChange,
   children,
   assignClassOnClick,
   expandIcon,
@@ -1618,27 +1590,32 @@ function ScalableContainer({
   togglePosition = "top-right"
 }) {
   const containerRef = React8.useRef(null);
-  const [isScaled, setScaled] = React8.useState(false);
+  const [internalScaled, setInternalScaled] = React8.useState(false);
+  const isScaled = expanded ?? internalScaled;
   const reduced = framerMotion.useReducedMotion();
   const onToggle = () => {
     const next = !isScaled;
-    setScaled(next);
-    requestAnimationFrame(() => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }));
+    if (expanded === void 0) setInternalScaled(next);
+    onExpandedChange?.(next);
+    if (next) {
+      window.setTimeout(
+        () => containerRef.current?.scrollIntoView({ behavior: "smooth", block: "nearest" }),
+        reduced ? 0 : 340
+      );
+    }
   };
   const wrapperClass = isScaled ? assignClassOnClick : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     framerMotion.motion.div,
     {
       ref: containerRef,
-      layout: true,
       animate: {
-        width: isScaled ? "100%" : width,
-        height: isScaled ? "100%" : height
+        width: isScaled ? expandedWidth : width,
+        height: isScaled ? expandedHeight : height
       },
       transition: reduced ? { duration: 0 } : {
         width: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
-        height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] },
-        layout: { duration: 0.32, ease: [0.16, 1, 0.3, 1] }
+        height: { type: "tween", duration: 0.32, ease: [0.16, 1, 0.3, 1] }
       },
       className: [
         "relative rounded-lg overflow-hidden",
@@ -2174,10 +2151,10 @@ var FIELD_SIZE = {
   md: { control: "h-control-md", text: "text-sm", padX: "px-3", gap: "gap-2" },
   lg: { control: "h-control-lg", text: "text-sm", padX: "px-3.5", gap: "gap-2.5" }
 };
-var FOCUS_WITHIN = "focus-within:outline-none focus-within:border-accent focus-within:ring-[3px] focus-within:ring-focus-ring";
-var FOCUS_VISIBLE = "focus-visible:outline-none focus-visible:border-accent focus-visible:ring-[3px] focus-visible:ring-focus-ring";
-var FOCUS_WITHIN_ERROR = "focus-within:border-status-error focus-within:ring-focus-ring-error";
-var FOCUS_VISIBLE_ERROR = "focus-visible:border-status-error focus-visible:ring-focus-ring-error";
+var FOCUS_WITHIN = "focus-within:outline-none focus-within:border-accent";
+var FOCUS_ELEMENT = "focus:outline-none focus:border-accent data-[state=open]:border-accent";
+var FOCUS_WITHIN_ERROR = "focus-within:border-status-error";
+var FOCUS_ELEMENT_ERROR = "focus:border-status-error data-[state=open]:border-status-error";
 function fieldShell({
   size = "md",
   hasError = false,
@@ -2196,8 +2173,8 @@ function fieldShell({
     // hover (only when interactive + no error)
     disabled ? "bg-surface-raised text-foreground-muted cursor-not-allowed" : hasError ? "" : "hover:border-border-strong",
     // focus
-    focusWithin ? FOCUS_WITHIN : FOCUS_VISIBLE,
-    hasError ? focusWithin ? FOCUS_WITHIN_ERROR : FOCUS_VISIBLE_ERROR : "",
+    focusWithin ? FOCUS_WITHIN : FOCUS_ELEMENT,
+    hasError ? focusWithin ? FOCUS_WITHIN_ERROR : FOCUS_ELEMENT_ERROR : "",
     // placeholder colour for native inputs
     "placeholder:text-foreground-muted"
   ].filter(Boolean).join(" ");
@@ -2232,7 +2209,9 @@ function Field({
             style: { width: horizontal ? labelWidth : void 0, ...labelStyle },
             className: [
               "text-sm font-medium text-foreground select-none",
-              horizontal ? "mt-2 flex-shrink-0" : ""
+              // In horizontal layout the label must not wrap onto
+              // multiple lines (e.g. "Report date", "Select option").
+              horizontal ? "mt-2 flex-shrink-0 whitespace-nowrap" : ""
             ].filter(Boolean).join(" "),
             children: [
               label,
@@ -2278,14 +2257,24 @@ var SearchInput = React8__default.default.forwardRef(function SearchInput2({ val
   ) });
 });
 var SearchInput_default = SearchInput;
-function DropdownPill({ value, hasSiblings = false }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      className: `bg-accent text-accent-fg text-sm text-ellipsis ${hasSiblings ? "w-24" : "w-max"} p-1 px-2 rounded-lg whitespace-nowrap overflow-hidden`,
-      children: value
-    }
-  );
+function Tag({ children, onRemove, removeLabel, disabled }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 rounded-md border border-border bg-surface-raised text-foreground text-xs pl-2 pr-1 py-0.5 max-w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children }),
+    onRemove && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: (e) => {
+          e.stopPropagation();
+          onRemove();
+        },
+        "aria-label": removeLabel ?? "Remove",
+        className: "inline-flex items-center justify-center w-4 h-4 flex-shrink-0 rounded text-foreground-muted hover:text-status-error hover:bg-surface transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-accent disabled:cursor-not-allowed",
+        children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+      }
+    )
+  ] });
 }
 function Dropdown({
   isMultiselect = false,
@@ -2302,7 +2291,6 @@ function Dropdown({
   items = [],
   labelStyle = {},
   placeholder,
-  showSelectedCount = false,
   size = "md"
 }) {
   const [open, setOpen] = React8.useState(false);
@@ -2330,6 +2318,17 @@ function Dropdown({
       setOpen(false);
     }
   };
+  const removeSelected = (key) => {
+    if (isMultiselect) {
+      const next = selectedItems.filter((it) => it !== key);
+      setSelectedItems(next);
+      onChange?.({ target: { value: next, id: htmlFor, name } });
+    } else {
+      setSelectedItems([]);
+      onChange?.({ target: { value: "", id: htmlFor, name } });
+    }
+  };
+  const labelFor = (key) => innerItems.find((it) => it.key === key)?.label ?? String(key);
   const onSearchChange = (e) => {
     const term = e.target.value;
     setSearchTerm(term);
@@ -2340,16 +2339,16 @@ function Dropdown({
     );
   };
   const isSelected = (key) => Array.isArray(value) ? value.includes(key) : value === key;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: `flex ${layout === "vertical" ? "flex-col" : "flex-row items-center gap-2"}`,
+        className: `flex ${layout === "vertical" ? "flex-col gap-1.5" : "flex-row items-start gap-3"}`,
         children: [
           label && /* @__PURE__ */ jsxRuntime.jsx(
             "label",
             {
-              className: "text-sm font-medium ml-1 max-content select-none text-foreground",
+              className: `text-sm font-medium select-none text-foreground ${layout === "horizontal" ? "mt-2 flex-shrink-0 whitespace-nowrap" : ""}`,
               htmlFor,
               style: labelStyle,
               children: label
@@ -2366,7 +2365,7 @@ function Dropdown({
                 "aria-invalid": hasError || void 0,
                 "aria-describedby": hasError ? errorId : void 0,
                 style,
-                className: `flex items-center justify-between cursor-pointer select-none ${fieldShell({ size, hasError, disabled })}`,
+                className: `flex items-center justify-between gap-1 cursor-pointer select-none min-h-[36px] px-3 py-1.5 ${fieldShell({ size, hasError, disabled, sized: false })}`,
                 tabIndex: disabled ? -1 : 0,
                 onKeyDown: (e) => {
                   if (disabled) return;
@@ -2379,18 +2378,25 @@ function Dropdown({
                   /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: `${!style?.width ? "min-w-[200px]" : ""} flex items-center gap-1 overflow-hidden`,
-                      children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                        value.slice(0, 1).map((val) => /* @__PURE__ */ jsxRuntime.jsx(
-                          DropdownPill,
-                          {
-                            hasSiblings: value.length > 1,
-                            value: innerItems.find((it) => it.key === val)?.label
-                          },
-                          String(val)
-                        )),
-                        showSelectedCount && value.length > 1 && /* @__PURE__ */ jsxRuntime.jsx(DropdownPill, { value: `+${value.length - 1} more` })
-                      ] }) : /* @__PURE__ */ jsxRuntime.jsx(DropdownPill, { value: innerItems.find((it) => it.key === value)?.label })
+                      className: `${!style?.width ? "min-w-[200px]" : ""} flex flex-wrap items-center gap-1.5`,
+                      children: !value || Array.isArray(value) && value.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground-muted text-sm", children: placeholder }) : Array.isArray(value) ? value.map((val) => /* @__PURE__ */ jsxRuntime.jsx(
+                        Tag,
+                        {
+                          disabled,
+                          removeLabel: `Remove ${labelFor(val)}`,
+                          onRemove: () => removeSelected(val),
+                          children: labelFor(val)
+                        },
+                        String(val)
+                      )) : /* @__PURE__ */ jsxRuntime.jsx(
+                        Tag,
+                        {
+                          disabled,
+                          removeLabel: `Remove ${labelFor(value)}`,
+                          onRemove: () => removeSelected(value),
+                          children: labelFor(value)
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex-shrink-0 ml-2 text-foreground-muted transition-transform duration-200 ${open ? "rotate-180" : "rotate-0"}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) }) })
@@ -3584,74 +3590,54 @@ function Checkbox({
   name,
   htmlFor,
   errorMessage,
-  disabled = false
+  disabled = false,
+  layout = "horizontal",
+  labelPosition = "right"
 }) {
   const isChecked = checked ?? value ?? false;
+  const labelFirst = labelPosition === "left";
+  const box = /* @__PURE__ */ jsxRuntime.jsx(
+    CheckboxPrimitive__namespace.Root,
+    {
+      id: htmlFor,
+      name,
+      checked: isChecked,
+      disabled,
+      onCheckedChange: (c) => onChange?.({ target: { checked: !!c, id: htmlFor, name } }),
+      className: [
+        "relative flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center",
+        "rounded-sm border transition-colors duration-150",
+        "border-border-strong bg-surface",
+        "data-[state=checked]:bg-accent data-[state=checked]:border-accent",
+        // Focus halo matches the field tokens for a consistent look.
+        "focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
+        "disabled:cursor-not-allowed"
+      ].join(" "),
+      "aria-label": typeof label === "string" ? label : void 0,
+      children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxPrimitive__namespace.Indicator, { className: "flex items-center justify-center data-[state=checked]:animate-check-pop", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "9", viewBox: "0 0 11 9", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 4.5L4 7.5L10 1", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) })
+    }
+  );
+  const labelEl = label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground-secondary select-none leading-snug", children: label });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "label",
       {
         htmlFor,
         className: [
-          "inline-flex items-center gap-2.5",
+          "inline-flex",
+          layout === "vertical" ? "flex-col items-start gap-1.5" : "flex-row items-center gap-2.5",
           disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
         ].join(" "),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            CheckboxPrimitive__namespace.Root,
-            {
-              id: htmlFor,
-              name,
-              checked: isChecked,
-              disabled,
-              onCheckedChange: (c) => onChange?.({ target: { checked: !!c, id: htmlFor, name } }),
-              className: [
-                // Box
-                "relative flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center",
-                "rounded-sm border transition-colors duration-150",
-                // Unchecked
-                "border-border-strong bg-surface",
-                // Checked
-                "data-[state=checked]:bg-accent data-[state=checked]:border-accent",
-                // Focus
-                "focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-1",
-                // Disabled
-                "disabled:cursor-not-allowed"
-              ].join(" "),
-              "aria-label": typeof label === "string" ? label : void 0,
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                CheckboxPrimitive__namespace.Indicator,
-                {
-                  className: "flex items-center justify-center data-[state=checked]:animate-check-pop",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "svg",
-                    {
-                      width: "11",
-                      height: "9",
-                      viewBox: "0 0 11 9",
-                      fill: "none",
-                      "aria-hidden": "true",
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "path",
-                        {
-                          d: "M1 4.5L4 7.5L10 1",
-                          stroke: "white",
-                          strokeWidth: "1.8",
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round"
-                        }
-                      )
-                    }
-                  )
-                }
-              )
-            }
-          ),
-          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-foreground-secondary select-none leading-snug", children: label })
-        ]
+        children: labelFirst ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          labelEl,
+          box
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          box,
+          labelEl
+        ] })
       }
     ),
-    errorMessage && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-status-error pl-[26px]", children: errorMessage })
+    errorMessage && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-status-error mt-0.5", children: errorMessage })
   ] });
 }
 var DOT_SIZE = {
@@ -3757,12 +3743,12 @@ function Switch({
       id,
       checked,
       onCheckedChange: (c) => onChange?.({ target: { checked: c } }),
-      className: "relative inline-flex h-6 w-14 items-center rounded-full bg-foreground-secondary data-[state=checked]:bg-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
+      className: "relative inline-flex h-6 w-11 flex-shrink-0 items-center rounded-full bg-foreground-secondary data-[state=checked]:bg-accent transition-colors focus:outline-none focus-visible:ring-[3px] focus-visible:ring-focus-ring",
       children: /* @__PURE__ */ jsxRuntime.jsx(
         SwitchPrimitive__namespace.Thumb,
         {
-          className: "pointer-events-none inline-flex h-8 w-8 items-center justify-center rounded-full bg-background text-foreground shadow transition-transform duration-200 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[-4px]",
-          children: checkedIcon && uncheckedIcon ? checked ? checkedIcon : uncheckedIcon : null
+          className: "pointer-events-none flex h-5 w-5 items-center justify-center rounded-full bg-background text-foreground shadow transition-transform duration-200 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-[2px]",
+          children: checkedIcon && uncheckedIcon ? checked ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center w-3 h-3", children: checkedIcon }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center w-3 h-3", children: uncheckedIcon }) : null
         }
       )
     }
@@ -3783,8 +3769,13 @@ function AutoComplete({
   emptyText = "No results found",
   loadingText = "Searching\u2026",
   size = "md",
-  icon
+  icon,
+  errorMessage,
+  required,
+  htmlFor
 }) {
+  const errorId = React8.useId();
+  const hasError = errorMessage != null;
   const [term, setTerm] = React8.useState("");
   const [open, setOpen] = React8.useState(false);
   const [asyncItems, setAsyncItems] = React8.useState([]);
@@ -3831,78 +3822,82 @@ function AutoComplete({
     onItemClick?.(item.value);
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Field,
     {
-      className: `flex ${layout === "vertical" ? "flex-col gap-1.5" : "flex-row items-start gap-3"}`,
-      style,
-      children: [
-        label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: `text-sm font-medium text-foreground select-none ${layout === "horizontal" ? "mt-2 flex-shrink-0" : ""}`, children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center ${fieldShell({ size, disabled, focusWithin: true })}`, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                disabled,
-                value: term,
-                onChange: (e) => {
-                  setTerm(e.target.value);
-                  setOpen(true);
-                },
-                onFocus: () => setOpen(true),
-                type: "text",
-                name,
-                className: "min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed placeholder:text-foreground-muted",
-                style: inputStyle,
-                placeholder: placeholder ?? "",
-                autoComplete: "off",
-                "aria-haspopup": "listbox",
-                "aria-expanded": open,
-                "aria-autocomplete": "list",
-                "aria-busy": loading || void 0
-              }
-            ),
-            loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 w-4 h-4 flex-shrink-0 flex items-center justify-center text-accent", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { inline: true, size: "xs", spinnerColor: "currentColor" }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 flex-shrink-0 text-foreground-muted", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) }) })
-          ] }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-            Popover__namespace.Content,
+      label,
+      htmlFor,
+      errorId,
+      errorMessage,
+      layout,
+      required,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Popover__namespace.Root, { open: open && !disabled, onOpenChange: (o) => !disabled && setOpen(o), children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center ${fieldShell({ size, hasError, disabled, focusWithin: true })}`, style, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
             {
-              align: "start",
-              sideOffset: 4,
-              onOpenAutoFocus: (e) => e.preventDefault(),
-              className: "w-64 bg-surface border border-border rounded-lg mt-1 shadow-md z-50 overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
-              children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full w-full flex items-center justify-center gap-2 py-4 text-sm text-foreground-secondary", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { inline: true, size: "xs" }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingText })
-              ] }) : foundItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-foreground-secondary", children: emptyText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", children: foundItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
-                "div",
-                {
-                  role: "option",
-                  tabIndex: 0,
-                  className: "text-sm flex items-center gap-2 p-2 transition-colors duration-150 hover:bg-surface-raised cursor-pointer text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
-                  onClick: () => handleSelect(item),
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      handleSelect(item);
-                    }
-                  },
-                  children: [
-                    item.icon,
-                    /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-                      item.label,
-                      " (",
-                      item.value,
-                      ")"
-                    ] })
-                  ]
-                },
-                item.key
-              )) })
+              id: htmlFor,
+              disabled,
+              value: term,
+              onChange: (e) => {
+                setTerm(e.target.value);
+                setOpen(true);
+              },
+              onFocus: () => setOpen(true),
+              type: "text",
+              name,
+              className: "min-w-0 flex-1 bg-transparent outline-none disabled:cursor-not-allowed placeholder:text-foreground-muted",
+              style: inputStyle,
+              placeholder: placeholder ?? "",
+              autoComplete: "off",
+              "aria-haspopup": "listbox",
+              "aria-expanded": open,
+              "aria-autocomplete": "list",
+              "aria-busy": loading || void 0,
+              "aria-invalid": hasError || void 0,
+              "aria-describedby": hasError ? errorId : void 0
             }
-          ) })
-        ] }) })
-      ]
+          ),
+          loading ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 w-4 h-4 flex-shrink-0 flex items-center justify-center text-accent", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { inline: true, size: "xs", spinnerColor: "currentColor" }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-2 flex-shrink-0 text-foreground-muted", children: icon ?? /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) }) })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          Popover__namespace.Content,
+          {
+            align: "start",
+            sideOffset: 4,
+            onOpenAutoFocus: (e) => e.preventDefault(),
+            className: "w-64 bg-surface border border-border rounded-lg mt-1 shadow-md z-50 overflow-y-auto max-h-36 animate-in fade-in-0 zoom-in-95",
+            children: loading ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full w-full flex items-center justify-center gap-2 py-4 text-sm text-foreground-secondary", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, { inline: true, size: "xs" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: loadingText })
+            ] }) : foundItems.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full w-full flex flex-col items-center justify-center py-4 text-sm text-foreground-secondary", children: emptyText }) : /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", children: foundItems.map((item) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                role: "option",
+                tabIndex: 0,
+                className: "text-sm flex items-center gap-2 p-2 transition-colors duration-150 hover:bg-surface-raised cursor-pointer text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+                onClick: () => handleSelect(item),
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    handleSelect(item);
+                  }
+                },
+                children: [
+                  item.icon,
+                  /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                    item.label,
+                    " (",
+                    item.value,
+                    ")"
+                  ] })
+                ]
+              },
+              item.key
+            )) })
+          }
+        ) })
+      ] })
     }
   );
 }
@@ -4982,27 +4977,13 @@ function TagsInput({
           className: `flex flex-wrap items-center gap-1.5 min-h-[36px] ${fieldShell({ size, hasError, disabled, focusWithin: true, sized: false })} px-2 py-1.5`,
           onClick: () => inputRef.current?.focus(),
           children: [
-            tags.map((tag, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
-              "span",
+            tags.map((tag, idx) => /* @__PURE__ */ jsxRuntime.jsx(
+              Tag,
               {
-                className: "inline-flex items-center gap-1 rounded-md bg-surface-raised text-foreground text-xs pl-2 pr-1 py-0.5 border border-border",
-                children: [
-                  tag,
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      disabled,
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        removeTag(idx);
-                      },
-                      "aria-label": `Remove ${tag}`,
-                      className: "inline-flex items-center justify-center w-4 h-4 rounded text-foreground-muted hover:text-status-error hover:bg-surface transition-colors focus:outline-none focus-visible:ring-1 focus-visible:ring-accent",
-                      children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "10", height: "10", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5L5 15M5 5l10 10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
-                    }
-                  )
-                ]
+                disabled,
+                removeLabel: `Remove ${tag}`,
+                onRemove: () => removeTag(idx),
+                children: tag
               },
               `${tag}-${idx}`
             )),
@@ -5236,9 +5217,9 @@ function Rating({
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "span",
                   {
-                    className: "absolute inset-0 overflow-hidden",
+                    className: "absolute inset-y-0 left-0 overflow-hidden",
                     style: { width: `${fillFraction * 100}%` },
-                    children: icon(true)
+                    children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `block absolute inset-y-0 left-0 ${ICON_SIZE[size]} max-w-none`, children: icon(true) })
                   }
                 )
               ]
@@ -5745,7 +5726,6 @@ exports.TextInput = TextInput;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitch = ThemeSwitch;
 exports.TimePicker = TimePicker;
-exports.ToggleButton = ToggleButton;
 exports.Tooltip = Tooltip;
 exports.TooltipProvider = TooltipProvider;
 exports.TopBar = TopBar;