@mieweb/ui 0.7.1-dev.10 → 0.7.1-dev.11

package/dist/index.cjs

@@ -22,7 +22,7 @@ var chunkVTKXM7IE_cjs = require('./chunk-VTKXM7IE.cjs');
 var chunkNGPEXCC7_cjs = require('./chunk-NGPEXCC7.cjs');
 var chunkYGA35Z2P_cjs = require('./chunk-YGA35Z2P.cjs');
 var chunkXXVUHLQN_cjs = require('./chunk-XXVUHLQN.cjs');
-var chunkHEV52I7A_cjs = require('./chunk-HEV52I7A.cjs');
+var chunkV3S7QNFF_cjs = require('./chunk-V3S7QNFF.cjs');
 var chunkYXHX2DAK_cjs = require('./chunk-YXHX2DAK.cjs');
 var chunkXCVBCY7L_cjs = require('./chunk-XCVBCY7L.cjs');
 var chunkFKLUSYFP_cjs = require('./chunk-FKLUSYFP.cjs');
@@ -90,7 +90,7 @@ var chunkC7RVKV25_cjs = require('./chunk-C7RVKV25.cjs');
 var chunkCW75IKA6_cjs = require('./chunk-CW75IKA6.cjs');
 var chunkS5RVSXDV_cjs = require('./chunk-S5RVSXDV.cjs');
 var chunkSCV7C55E_cjs = require('./chunk-SCV7C55E.cjs');
-var chunkJSSBZOE7_cjs = require('./chunk-JSSBZOE7.cjs');
+var chunk6ED4RUGM_cjs = require('./chunk-6ED4RUGM.cjs');
 var React10 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var classVarianceAuthority = require('class-variance-authority');
@@ -1388,7 +1388,7 @@ function AIEmptyState({
     {
       "data-slot": "ai-empty-state-icon",
       className: "bg-primary-800 dark:bg-primary-800 flex h-16 w-16 items-center justify-center rounded-full text-white",
-      children: /* @__PURE__ */ jsxRuntime.jsx(chunkHEV52I7A_cjs.SparklesIcon, { size: "lg", className: "h-8 w-8" })
+      children: /* @__PURE__ */ jsxRuntime.jsx(chunkV3S7QNFF_cjs.SparklesIcon, { size: "lg", className: "h-8 w-8" })
     }
   );
   const suggestionsAction = suggestions && suggestions.length > 0 && onSuggestionSelect ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-6", children: [
@@ -1499,7 +1499,7 @@ function AIChat({
                   {
                     "data-slot": "ai-chat-header-icon",
                     className: "bg-primary-800 dark:bg-primary-800 flex h-8 w-8 items-center justify-center rounded-full text-white",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(chunkHEV52I7A_cjs.SparklesIcon, { size: "sm" })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(chunkV3S7QNFF_cjs.SparklesIcon, { size: "sm" })
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
@@ -1529,7 +1529,7 @@ function AIChat({
                     className: "rounded-lg p-2 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-neutral-300",
                     title: "Clear chat",
                     "aria-label": "Clear chat",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(chunkHEV52I7A_cjs.RefreshIcon, {})
+                    children: /* @__PURE__ */ jsxRuntime.jsx(chunkV3S7QNFF_cjs.RefreshIcon, {})
                   }
                 ),
                 onClose && /* @__PURE__ */ jsxRuntime.jsx(
@@ -1540,7 +1540,7 @@ function AIChat({
                     className: "rounded-lg p-2 text-neutral-500 hover:bg-neutral-100 hover:text-neutral-700 dark:hover:bg-neutral-800 dark:hover:text-neutral-300",
                     title: "Close chat",
                     "aria-label": "Close chat",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(chunkHEV52I7A_cjs.CloseIcon, {})
+                    children: /* @__PURE__ */ jsxRuntime.jsx(chunkV3S7QNFF_cjs.CloseIcon, {})
                   }
                 )
               ] })
@@ -1560,7 +1560,7 @@ function AIChat({
               }
             ) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
               messages.map((message) => /* @__PURE__ */ jsxRuntime.jsx(
-                chunkHEV52I7A_cjs.AIMessageDisplay,
+                chunkV3S7QNFF_cjs.AIMessageDisplay,
                 {
                   message,
                   userName,
@@ -4194,7 +4194,7 @@ function AIChatTrigger({
             children: badge > 9 ? "9+" : badge
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(chunkHEV52I7A_cjs.SparklesIcon, { size: "lg" })
+        /* @__PURE__ */ jsxRuntime.jsx(chunkV3S7QNFF_cjs.SparklesIcon, { size: "lg" })
       ]
     }
   );
@@ -5768,7 +5768,7 @@ function ReconciliationProposalRow({
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("dt", { className: "text-muted-foreground flex items-center gap-1 text-[11px] tracking-wide uppercase", children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
-                      chunkHEV52I7A_cjs.SparklesIcon,
+                      chunkV3S7QNFF_cjs.SparklesIcon,
                       {
                         size: "sm",
                         className: "text-primary-700 dark:text-primary-400"
@@ -5824,7 +5824,7 @@ function SourcePill({ source }) {
         "text-muted-foreground"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary-700 dark:text-primary-400 flex items-center", children: source.icon ?? /* @__PURE__ */ jsxRuntime.jsx(chunkHEV52I7A_cjs.SparklesIcon, { size: "sm" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary-700 dark:text-primary-400 flex items-center", children: source.icon ?? /* @__PURE__ */ jsxRuntime.jsx(chunkV3S7QNFF_cjs.SparklesIcon, { size: "sm" }) }),
         source.thumbnailUrl && /* @__PURE__ */ jsxRuntime.jsx(
           "img",
           {
@@ -35658,6 +35658,156 @@ function ScheduleCalendar({
     }
   );
 }
+function PillSelect({
+  options,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  label,
+  disabled = false,
+  className
+}) {
+  const [internalValue, setInternalValue] = React10__namespace.useState(
+    defaultValue ?? options[0]?.value ?? ""
+  );
+  const [expanded, setExpanded] = React10__namespace.useState(false);
+  const triggerRef = React10__namespace.useRef(null);
+  const menuRef = React10__namespace.useRef(null);
+  const selectedOptionRef = React10__namespace.useRef(null);
+  const firstEnabledOptionRef = React10__namespace.useRef(null);
+  const listboxId = React10__namespace.useId();
+  const [menuStyle, setMenuStyle] = React10__namespace.useState({});
+  const value = controlledValue !== void 0 ? controlledValue : internalValue;
+  const selectedOption = options.find((o) => o.value === value);
+  const close = React10__namespace.useCallback((restoreFocus = false) => {
+    setExpanded(false);
+    if (restoreFocus) {
+      requestAnimationFrame(
+        () => triggerRef.current?.focus({ preventScroll: true })
+      );
+    }
+  }, []);
+  const updateMenuPosition = React10__namespace.useCallback(() => {
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    const viewportPadding = 8;
+    const menuWidth = Math.max(rect.width, 160);
+    const maxWidth = Math.max(window.innerWidth - viewportPadding * 2, 0);
+    const left = Math.min(
+      Math.max(rect.left, viewportPadding),
+      window.innerWidth - menuWidth - viewportPadding
+    );
+    setMenuStyle({
+      position: "fixed",
+      top: rect.bottom + 4,
+      left,
+      minWidth: rect.width,
+      width: menuWidth,
+      maxWidth,
+      zIndex: 9999
+    });
+  }, []);
+  React10__namespace.useEffect(() => {
+    if (!expanded) return;
+    updateMenuPosition();
+    window.addEventListener("scroll", updateMenuPosition, true);
+    window.addEventListener("resize", updateMenuPosition);
+    return () => {
+      window.removeEventListener("scroll", updateMenuPosition, true);
+      window.removeEventListener("resize", updateMenuPosition);
+    };
+  }, [expanded, updateMenuPosition]);
+  React10__namespace.useEffect(() => {
+    if (!expanded) return;
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (triggerRef.current?.contains(target) || menuRef.current?.contains(target)) {
+        return;
+      }
+      close();
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [close, expanded]);
+  React10__namespace.useEffect(() => {
+    if (!expanded) return;
+    requestAnimationFrame(() => {
+      (selectedOptionRef.current ?? firstEnabledOptionRef.current)?.focus({
+        preventScroll: true
+      });
+    });
+  }, [expanded, value]);
+  chunkFHY3K6PL_cjs.useEscapeKey(() => close(true), expanded);
+  function handleSelect(option) {
+    if (disabled || option.disabled) return;
+    if (controlledValue === void 0) setInternalValue(option.value);
+    onValueChange?.(option.value);
+    close(true);
+  }
+  const hasOptions = options.length > 0;
+  const valuePart = selectedOption?.label ?? value;
+  const collapsedLabel = label && valuePart ? `${label}: ${valuePart}` : label || valuePart || "No options";
+  let firstEnabledOptionRefAssigned = false;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkS5RVSXDV_cjs.cn("inline-flex", className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        disabled: disabled || !hasOptions,
+        onClick: () => setExpanded((open) => !open),
+        "aria-haspopup": "listbox",
+        "aria-expanded": expanded,
+        "aria-controls": expanded ? listboxId : void 0,
+        className: chunkS5RVSXDV_cjs.cn(
+          "border-border bg-muted text-foreground inline-flex items-center rounded-full border px-3 py-0.5 text-sm transition-colors",
+          "hover:bg-muted/80 focus-visible:ring-ring focus:outline-none focus-visible:ring-2",
+          (disabled || !hasOptions) && "cursor-not-allowed opacity-50"
+        ),
+        children: collapsedLabel
+      }
+    ),
+    expanded && ReactDOM.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          ref: menuRef,
+          id: listboxId,
+          role: "listbox",
+          "aria-label": label ? `${label} options` : "Options",
+          style: menuStyle,
+          className: "border-border bg-card animate-in fade-in zoom-in-95 flex flex-col rounded-lg border p-1 shadow-lg duration-100",
+          children: options.map((option) => {
+            const selected = option.value === value;
+            const optionDisabled = disabled || option.disabled;
+            const isFirstEnabled = !optionDisabled && !firstEnabledOptionRefAssigned;
+            if (isFirstEnabled) firstEnabledOptionRefAssigned = true;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                ref: selected && !optionDisabled ? selectedOptionRef : isFirstEnabled ? firstEnabledOptionRef : void 0,
+                type: "button",
+                role: "option",
+                disabled: optionDisabled,
+                onClick: () => handleSelect(option),
+                "aria-selected": selected,
+                className: chunkS5RVSXDV_cjs.cn(
+                  "focus-visible:ring-ring flex w-full items-center rounded-md px-3 py-1.5 text-start text-sm transition-colors focus:outline-none focus-visible:ring-2",
+                  selected ? "bg-muted text-foreground font-semibold" : "text-muted-foreground hover:bg-muted hover:text-foreground font-normal",
+                  optionDisabled && "cursor-not-allowed opacity-40"
+                ),
+                children: option.label
+              },
+              option.value
+            );
+          })
+        }
+      ),
+      document.body
+    )
+  ] });
+}
 var accordionVariants = classVarianceAuthority.cva(
   "service-accordion divide-y divide-neutral-200 dark:divide-neutral-700",
   {
@@ -42850,63 +43000,67 @@ Object.defineProperty(exports, "spinnerVariants", {
 });
 Object.defineProperty(exports, "AILogoIcon", {
   enumerable: true,
-  get: function () { return chunkHEV52I7A_cjs.AILogoIcon; }
+  get: function () { return chunkV3S7QNFF_cjs.AILogoIcon; }
 });
 Object.defineProperty(exports, "AIMessageDisplay", {
   enumerable: true,
-  get: function () { return chunkHEV52I7A_cjs.AIMessageDisplay; }
+  get: function () { return chunkV3S7QNFF_cjs.AIMessageDisplay; }
 });
 Object.defineProperty(exports, "AITypingIndicator", {
   enumerable: true,
-  get: function () { return chunkHEV52I7A_cjs.AITypingIndicator; }
+  get: function () { return chunkV3S7QNFF_cjs.AITypingIndicator; }
 });
 Object.defineProperty(exports, "ChatBubble", {
   enumerable: true,
-  get: function () { return chunkHEV52I7A_cjs.ChatBubble; }
+  get: function () { return chunkV3S7QNFF_cjs.ChatBubble; }
 });
 Object.defineProperty(exports, "ChevronIcon", {
   enumerable: true,
-  get: function () { return chunkHEV52I7A_cjs.ChevronIcon; }
+  get: function () { return chunkV3S7QNFF_cjs.ChevronIcon; }
 });
 Object.defineProperty(exports, "CloseIcon", {
   enumerable: true,
-  get: function () { return chunkHEV52I7A_cjs.CloseIcon; }
+  get: function () { return chunkV3S7QNFF_cjs.CloseIcon; }
+});
+Object.defineProperty(exports, "CollapsiblePill", {
+  enumerable: true,
+  get: function () { return chunkV3S7QNFF_cjs.CollapsiblePill; }
 });
 Object.defineProperty(exports, "MCPToolCallDisplay", {
   enumerable: true,
-  get: function () { return chunkHEV52I7A_cjs.MCPToolCallDisplay; }
+  get: function () { return chunkV3S7QNFF_cjs.MCPToolCallDisplay; }
 });
 Object.defineProperty(exports, "MessageAvatar", {
   enumerable: true,
-  get: function () { return chunkHEV52I7A_cjs.MessageAvatar; }
+  get: function () { return chunkV3S7QNFF_cjs.MessageAvatar; }
 });
 Object.defineProperty(exports, "RefreshIcon", {
   enumerable: true,
-  get: function () { return chunkHEV52I7A_cjs.RefreshIcon; }
+  get: function () { return chunkV3S7QNFF_cjs.RefreshIcon; }
 });
 Object.defineProperty(exports, "ResourceLink", {
   enumerable: true,
-  get: function () { return chunkHEV52I7A_cjs.ResourceLink; }
+  get: function () { return chunkV3S7QNFF_cjs.ResourceLink; }
 });
 Object.defineProperty(exports, "SendIcon", {
   enumerable: true,
-  get: function () { return chunkHEV52I7A_cjs.SendIcon; }
+  get: function () { return chunkV3S7QNFF_cjs.SendIcon; }
 });
 Object.defineProperty(exports, "SparklesIcon", {
   enumerable: true,
-  get: function () { return chunkHEV52I7A_cjs.SparklesIcon; }
+  get: function () { return chunkV3S7QNFF_cjs.SparklesIcon; }
 });
 Object.defineProperty(exports, "SpinnerIcon", {
   enumerable: true,
-  get: function () { return chunkHEV52I7A_cjs.SpinnerIcon; }
+  get: function () { return chunkV3S7QNFF_cjs.SpinnerIcon; }
 });
 Object.defineProperty(exports, "ToolStatusIcon", {
   enumerable: true,
-  get: function () { return chunkHEV52I7A_cjs.ToolStatusIcon; }
+  get: function () { return chunkV3S7QNFF_cjs.ToolStatusIcon; }
 });
 Object.defineProperty(exports, "getToolIcon", {
   enumerable: true,
-  get: function () { return chunkHEV52I7A_cjs.getToolIcon; }
+  get: function () { return chunkV3S7QNFF_cjs.getToolIcon; }
 });
 Object.defineProperty(exports, "AttachmentPreview", {
   enumerable: true,
@@ -43910,11 +44064,11 @@ Object.defineProperty(exports, "isStorybookDocsMode", {
 });
 Object.defineProperty(exports, "miewebUIPreset", {
   enumerable: true,
-  get: function () { return chunkJSSBZOE7_cjs.miewebUIPreset; }
+  get: function () { return chunk6ED4RUGM_cjs.miewebUIPreset; }
 });
 Object.defineProperty(exports, "miewebUISafelist", {
   enumerable: true,
-  get: function () { return chunkJSSBZOE7_cjs.miewebUISafelist; }
+  get: function () { return chunk6ED4RUGM_cjs.miewebUISafelist; }
 });
 exports.AIChat = AIChat;
 exports.AIChatModal = AIChatModal;
@@ -44069,6 +44223,7 @@ exports.PaymentMethodCard = PaymentMethodCard;
 exports.PaymentMethodList = PaymentMethodList;
 exports.PendingClaimsTable = PendingClaimsTable;
 exports.PermissionsEditor = PermissionsEditor;
+exports.PillSelect = PillSelect;
 exports.PresentingProblems = PresentingProblems;
 exports.ProblemList = ProblemList;
 exports.ProcedureOrderEditor = ProcedureOrderEditor;