@proteos/ui 0.61.0 → 0.75.0

package/dist/index.js

@@ -1,10 +1,10 @@
 import { cn, Button, Skeleton } from './chunk-NSE4VW3Z.js';
 export { Button, Skeleton, buttonStyles, cn, skeletonStyles } from './chunk-NSE4VW3Z.js';
-import { icons, Contact, Paperclip, BookText, Banknote, UsersRound, User, Link2, Braces, Brackets, ToggleLeft, CircleDot, Calendar, Hash, Type, File, FileImage, FileText, FileSpreadsheet, FileArchive, Loader2, X, Shapes, Search, Phone, AudioLines, Video, Mic, AtSign, MessagesSquare, Camera, Send, Linkedin, MessageCircle, Mail, Pipette, Pencil, ChevronDown, GripVertical, SendHorizontal, CircleX, Download, ChevronRight as ChevronRight$1, AlertCircle, Undo2, ArrowRight, CircleCheck, CircleAlert, Info } from 'lucide-react';
+import { icons, Contact, Paperclip, BookText, Banknote, UsersRound, User, Link2, Braces, Brackets, ToggleLeft, CircleDot, Calendar, Hash, Type, File, FileImage, FileText, FileSpreadsheet, FileArchive, Loader2, X, ChevronLeft, ChevronRight, Shapes, Search, Phone, AudioLines, Video, Mic, AtSign, MessagesSquare, Camera, Send, Linkedin, MessageCircle, Mail, Pipette, Pencil, ChevronDown, GripVertical, SendHorizontal, CircleX, Download, AlertCircle, Undo2, ArrowRight, Check, CircleCheck, CircleAlert, Info } from 'lucide-react';
 import { tv } from 'tailwind-variants';
-import { Tabs as Tabs$1, TabPanel, Tab, TabList, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, DialogTrigger, Popover as Popover$1, Dialog, DropZone, Text, FileTrigger, Heading, Label, Input as Input$1, ListBox, ListBoxItem, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, Button as Button$1, Breadcrumbs as Breadcrumbs$1, Breadcrumb, Link, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, FieldError, TextField, ComboBox, ComboBoxStateContext, Select as Select$1, SelectValue, ModalOverlay, Modal as Modal$1, DatePicker as DatePicker$1, Group, DateInput, DateSegment, Menu as Menu$1, MenuItem as MenuItem$1, Disclosure, DisclosurePanel, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, Separator as Separator$1, Switch as Switch$1, TextArea, TimeField as TimeField$1, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion, UNSTABLE_Toast, UNSTABLE_ToastContent, Calendar as Calendar$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, DatePickerStateContext } from 'react-aria-components';
+import { Tabs as Tabs$1, TabPanel, Tab, TabList, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, DialogTrigger, Popover as Popover$1, Dialog, DropZone, Text, FileTrigger, Heading, Calendar as Calendar$1, Button as Button$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, CalendarStateContext, Label, Input as Input$1, ListBox, ListBoxItem, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, Breadcrumbs as Breadcrumbs$1, Breadcrumb, Link, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, FieldError, TextField, ComboBox, ComboBoxStateContext, Select as Select$1, SelectValue, ModalOverlay, Modal as Modal$1, DatePicker as DatePicker$1, Group, DateInput, DateSegment, Menu as Menu$1, MenuItem as MenuItem$1, Disclosure, DisclosurePanel, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, Separator as Separator$1, Switch as Switch$1, TextArea, TimeField as TimeField$1, ToggleButtonGroup, ToggleButton, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion, UNSTABLE_Toast, UNSTABLE_ToastContent, DatePickerStateContext } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { lazy, createContext, useState, useRef, useMemo, Children, isValidElement, useLayoutEffect, useEffect, useContext, useSyncExternalStore, useCallback, Suspense, useId, Fragment as Fragment$1 } from 'react';
+import { lazy, createContext, useContext, useState, useRef, useMemo, Children, isValidElement, useLayoutEffect, useEffect, useSyncExternalStore, useCallback, Suspense, useId, Fragment as Fragment$1 } from 'react';
 import { formatAmount, parseAmount } from '@proteos/sdk';
 import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { extractClosestEdge, attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
@@ -400,6 +400,108 @@ function AttributeTypeIcon({
     }
   );
 }
+var availabilityCalendarStyles = tv({
+  slots: {
+    root: "flex flex-col",
+    header: "flex items-center justify-between mb-3.5",
+    heading: "font-sans text-[15px] text-ink tracking-[-0.01em]",
+    headingYear: "ml-1 text-ink-3",
+    nav: "flex gap-1",
+    navButton: [
+      "size-7 rounded-md inline-flex items-center justify-center cursor-pointer outline-none",
+      "text-ink-3 hovered:text-ink hovered:bg-surface-3 pressed:bg-surface-4",
+      "data-[focus-visible]:shadow-[var(--shadow-focus)]",
+      "data-[disabled]:opacity-40 data-[disabled]:cursor-default data-[disabled]:hover:bg-transparent"
+    ],
+    grid: "w-full border-separate border-spacing-1 table-fixed -m-1",
+    weekday: "font-mono text-[11px] font-medium uppercase tracking-[0.08em] text-ink-3 pb-2 text-center",
+    cell: [
+      "relative aspect-square flex items-center justify-center cursor-pointer outline-none",
+      "font-sans text-[14px] font-medium rounded-sm border border-transparent",
+      "transition-[background-color,color,border-color] duration-150",
+      // Available (the default when neither unavailable nor disabled).
+      "bg-surface-2 text-ink",
+      "data-[hovered]:bg-surface-3 data-[hovered]:border-rule-strong",
+      "data-[focus-visible]:shadow-[var(--shadow-focus)]",
+      // Selected: the one ink fill on the page.
+      "data-[selected]:bg-ink data-[selected]:text-surface data-[selected]:border-ink",
+      "data-[selected]:data-[hovered]:bg-ink data-[selected]:data-[hovered]:border-ink",
+      // Unavailable / past: quiet text, no fill, no hover.
+      "data-[unavailable]:bg-transparent data-[unavailable]:text-ink-4 data-[unavailable]:font-normal data-[unavailable]:cursor-default",
+      "data-[unavailable]:data-[hovered]:bg-transparent data-[unavailable]:data-[hovered]:border-transparent",
+      "data-[disabled]:bg-transparent data-[disabled]:text-ink-4 data-[disabled]:font-normal data-[disabled]:cursor-default",
+      "data-[disabled]:data-[hovered]:bg-transparent data-[disabled]:data-[hovered]:border-transparent",
+      // Days of the neighbouring months are blank in a month-aligned grid.
+      "data-[outside-month]:invisible"
+    ],
+    dot: "absolute bottom-1.5 left-1/2 -translate-x-1/2 size-1 rounded-full bg-current",
+    cellSkeleton: "absolute inset-0 rounded-sm"
+  },
+  variants: {
+    isLoading: {
+      true: { cell: "bg-transparent cursor-default" },
+      false: {}
+    }
+  },
+  defaultVariants: { isLoading: false }
+});
+function AvailabilityCalendar({
+  value,
+  onChange,
+  isLoading = false,
+  className,
+  isDateUnavailable,
+  weekdayStyle = "short",
+  ...props
+}) {
+  const styles4 = availabilityCalendarStyles({ isLoading });
+  const unavailable = isLoading ? () => true : isDateUnavailable;
+  return /* @__PURE__ */ jsxs(
+    Calendar$1,
+    {
+      ...props,
+      value,
+      onChange: (next) => onChange(next),
+      ...unavailable ? { isDateUnavailable: unavailable } : {},
+      visibleDuration: { months: 1 },
+      className: cn(styles4.root(), className),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: styles4.header(), children: [
+          /* @__PURE__ */ jsx(Heading, { className: styles4.heading(), children: /* @__PURE__ */ jsx(MonthHeading, { yearClassName: styles4.headingYear() }) }),
+          /* @__PURE__ */ jsxs("div", { className: styles4.nav(), children: [
+            /* @__PURE__ */ jsx(Button$1, { slot: "previous", "aria-label": "Previous month", className: styles4.navButton(), children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" }) }),
+            /* @__PURE__ */ jsx(Button$1, { slot: "next", "aria-label": "Next month", className: styles4.navButton(), children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("div", { "aria-busy": isLoading, children: /* @__PURE__ */ jsxs(CalendarGrid, { weekdayStyle, className: styles4.grid(), children: [
+          /* @__PURE__ */ jsx(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx(CalendarHeaderCell, { className: styles4.weekday(), children: day }) }),
+          /* @__PURE__ */ jsx(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx(CalendarCell, { date, className: styles4.cell(), children: ({ formattedDate, isToday, isOutsideMonth }) => isLoading && !isOutsideMonth ? /* @__PURE__ */ jsx(Skeleton, { className: styles4.cellSkeleton() }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            formattedDate,
+            isToday && /* @__PURE__ */ jsx("span", { className: styles4.dot(), "aria-hidden": "true" })
+          ] }) }) })
+        ] }) })
+      ]
+    }
+  );
+}
+function MonthHeading({ yearClassName }) {
+  const state = useContext(CalendarStateContext);
+  if (!state) return null;
+  const start = state.visibleRange.start;
+  const date = start.toDate(state.timeZone);
+  const month = new Intl.DateTimeFormat(void 0, {
+    month: "long",
+    timeZone: state.timeZone
+  }).format(date);
+  const year = new Intl.DateTimeFormat(void 0, {
+    year: "numeric",
+    timeZone: state.timeZone
+  }).format(date);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "font-medium", children: month }),
+    /* @__PURE__ */ jsx("span", { className: yearClassName, children: year })
+  ] });
+}
 var avatarStyles = tv({
   base: [
     "inline-grid place-items-center shrink-0 select-none overflow-hidden",
@@ -954,7 +1056,10 @@ function Tooltip({ className, offset = 6, ...props }) {
       ...props,
       offset,
       className: (renderProps) => cn(
-        "z-50 max-w-xs",
+        // Above the floating chat / softphone windows (1100 / 1200) and their
+        // full-screen workspace, like Select and Toast — a page inside the
+        // window keeps its tooltips.
+        "z-[1300] max-w-xs",
         "rounded-md border border-rule bg-surface shadow-[var(--shadow-raised)]",
         "px-2.5 py-1.5",
         "font-mono text-[11.5px] text-ink-2",
@@ -2518,9 +2623,13 @@ function ConversationBriefPreview({
   contentClassName,
   renderContent,
   onEdit,
-  editor
+  editor,
+  aside,
+  isMetaHidden = false,
+  isSubjectHidden = false
 }) {
   const [pickedContactId, setPickedContactId] = useState("");
+  const [isPickingTarget, setIsPickingTarget] = useState(false);
   const contact = contacts.find((entry) => entry.id === pickedContactId) ?? contacts[0] ?? null;
   const numbers = useMemo(() => contactPhoneNumbers(contact), [contact]);
   const [pickedNumber, setPickedNumber] = useState("");
@@ -2533,22 +2642,25 @@ function ConversationBriefPreview({
     onSelectionChangeRef.current?.(contact, phoneNumber);
   }, [contact, phoneNumber]);
   return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+    isSubjectHidden ? null : /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
       /* @__PURE__ */ jsx("p", { className: "truncate text-[14px] font-semibold text-ink", children: brief.subject || names || "Prepared conversation" }),
-      /* @__PURE__ */ jsx("p", { className: "font-mono text-[10.5px] text-ink-4", children: [
+      isMetaHidden ? null : /* @__PURE__ */ jsx("p", { className: "font-mono text-[10.5px] text-ink-4", children: [
         brief.subject ? names : "",
         brief.channel ? `Channel ${brief.channel}` : "Any channel",
         brief.type_key ? `Type ${brief.type_key}` : "",
         brief.status === "prepared" ? "Prepared" : brief.status === "used" ? "Call held" : "Discarded"
       ].filter(Boolean).join(" \xB7 ") })
     ] }),
-    editor ?? /* @__PURE__ */ jsxs("div", { className: "group/brief-content relative", children: [
+    editor ?? // A flex column of its own so a host that gives the box `flex-1`
+    // (the call window) gets a scrolling box that fills the remaining
+    // height; in an unconstrained host (a modal) it just wraps.
+    /* @__PURE__ */ jsxs("div", { className: "group/brief-content relative flex min-h-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsx(
         "div",
         {
           className: cn(
             "rounded-md border border-rule-2 bg-surface-2/60 px-3 py-2.5",
-            "text-[13px] leading-relaxed text-ink-2 overflow-y-auto [scrollbar-width:thin]",
+            "min-h-0 text-[13px] leading-relaxed text-ink-2 overflow-y-auto [scrollbar-width:thin]",
             renderContent ? null : "whitespace-pre-wrap",
             contentClassName
           ),
@@ -2572,28 +2684,121 @@ function ConversationBriefPreview({
       ) : null
     ] }),
     onCall ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border-t border-rule-2 pt-3", children: [
-      contacts.length > 1 ? /* @__PURE__ */ jsx(
-        Select,
-        {
-          "aria-label": "Who to call",
-          selectedKey: contact?.id ?? "",
-          onSelectionChange: (key) => {
-            setPickedContactId(String(key));
-            setPickedNumber("");
-          },
-          options: contacts.map((entry) => ({ id: entry.id, label: entry.name || entry.id }))
-        }
-      ) : null,
-      numbers.length > 1 ? /* @__PURE__ */ jsx(
-        Select,
+      /* @__PURE__ */ jsxs(
+        "div",
         {
-          "aria-label": "Number to call",
-          selectedKey: phoneNumber,
-          onSelectionChange: (key) => setPickedNumber(String(key)),
-          options: numbers.map((number) => ({ id: number, label: number }))
+          className: cn(
+            "grid gap-3",
+            aside ? "grid-cols-[minmax(0,1fr)_minmax(0,1fr)]" : "grid-cols-1"
+          ),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [
+              isPickingTarget && (contacts.length > 1 || numbers.length > 1) ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4", children: "Calling" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-1.5", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+                    contacts.length > 1 ? /* @__PURE__ */ jsx(
+                      Select,
+                      {
+                        "aria-label": "Who to call",
+                        size: "sm",
+                        autoFocus: true,
+                        selectedKey: contact?.id ?? "",
+                        onSelectionChange: (key) => {
+                          setPickedContactId(String(key));
+                          setPickedNumber("");
+                          const picked = contacts.find((entry) => entry.id === String(key));
+                          if (contactPhoneNumbers(picked).length <= 1) setIsPickingTarget(false);
+                        },
+                        options: contacts.map((entry) => ({
+                          id: entry.id,
+                          label: entry.name || entry.id
+                        }))
+                      }
+                    ) : null,
+                    numbers.length > 1 ? /* @__PURE__ */ jsx(
+                      Select,
+                      {
+                        "aria-label": "Number to dial",
+                        size: "sm",
+                        ...contacts.length > 1 ? {} : { autoFocus: true },
+                        selectedKey: phoneNumber,
+                        onSelectionChange: (key) => {
+                          if (key !== null) setPickedNumber(String(key));
+                          setIsPickingTarget(false);
+                        },
+                        options: numbers.map((number) => ({ id: number, label: number }))
+                      }
+                    ) : null
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      "aria-label": "Keep the current number",
+                      onPress: () => setIsPickingTarget(false),
+                      children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
+                    }
+                  )
+                ] })
+              ] }) : /* @__PURE__ */ jsxs("div", { className: "group/dial flex min-w-0 flex-col gap-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4", children: "Calling" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex min-h-9 min-w-0 items-center gap-2", children: [
+                  (() => {
+                    const hasChoice = contacts.length > 1 || numbers.length > 1;
+                    const valueText = phoneNumber ? contacts.length > 1 ? `${contact?.name || contact?.id} \xB7 ${phoneNumber}` : phoneNumber : contact ? `${contacts.length > 1 ? `${contact.name || contact.id} \xB7 ` : ""}no phone number on file` : "No contact to call.";
+                    const valueClassName = cn(
+                      "min-w-0 truncate text-[12px] tabular-nums",
+                      phoneNumber ? "text-ink-2" : "text-warning"
+                    );
+                    const icon = /* @__PURE__ */ jsx(
+                      Phone,
+                      {
+                        className: cn(
+                          "size-3 shrink-0",
+                          phoneNumber ? "text-ink-4" : "text-warning"
+                        ),
+                        "aria-hidden": true
+                      }
+                    );
+                    return hasChoice ? /* @__PURE__ */ jsxs(
+                      Button$1,
+                      {
+                        className: cn(
+                          "flex min-w-0 cursor-pointer items-center gap-2 rounded-sm text-left outline-none",
+                          "hover:text-ink focus-visible:shadow-[var(--shadow-focus)]"
+                        ),
+                        onPress: () => setIsPickingTarget(true),
+                        children: [
+                          icon,
+                          /* @__PURE__ */ jsx("span", { className: valueClassName, title: phoneNumber, children: valueText })
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                      icon,
+                      /* @__PURE__ */ jsx("span", { className: valueClassName, title: phoneNumber, children: valueText })
+                    ] });
+                  })(),
+                  contacts.length > 1 || numbers.length > 1 ? /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      "aria-label": "Change the number to dial",
+                      className: "opacity-0 transition-opacity group-hover/dial:opacity-100 focus-visible:opacity-100",
+                      onPress: () => setIsPickingTarget(true),
+                      children: /* @__PURE__ */ jsx(Pencil, { "aria-hidden": true })
+                    }
+                  ) : null
+                ] })
+              ] }),
+              controls
+            ] }),
+            aside ? /* @__PURE__ */ jsx("div", { className: "min-h-0 min-w-0", children: aside }) : null
+          ]
         }
-      ) : /* @__PURE__ */ jsx("p", { className: "font-mono text-[12px] text-ink-3", children: phoneNumber || (contact ? "This contact has no phone number on file." : "No contact to call.") }),
-      controls,
+      ),
       callDisabledReason ? /* @__PURE__ */ jsx("p", { className: "text-[12px] text-warning", children: callDisabledReason }) : null,
       isCallButtonHidden ? null : /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(
         Button,
@@ -3902,6 +4107,11 @@ function DataTable({
                 {
                   ref: listRef,
                   role: "presentation",
+                  "aria-busy": query.isPlaceholderData ? true : void 0,
+                  className: cn(
+                    "transition-opacity duration-150 motion-reduce:transition-none",
+                    query.isPlaceholderData && "opacity-50"
+                  ),
                   style: { height: totalSize, position: "relative", width: "100%" },
                   children: virtualItems.map((vRow) => {
                     const item = listItems[vRow.index];
@@ -4088,7 +4298,7 @@ function CalendarGlyph() {
     /* @__PURE__ */ jsx("path", { d: "M5.5 2V5M10.5 2V5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })
   ] });
 }
-function ChevronLeft() {
+function ChevronLeft2() {
   return /* @__PURE__ */ jsx("svg", { "aria-hidden": true, viewBox: "0 0 12 12", className: "size-3", fill: "none", children: /* @__PURE__ */ jsx(
     "path",
     {
@@ -4100,7 +4310,7 @@ function ChevronLeft() {
     }
   ) });
 }
-function ChevronRight() {
+function ChevronRight2() {
   return /* @__PURE__ */ jsx("svg", { "aria-hidden": true, viewBox: "0 0 12 12", className: "size-3", fill: "none", children: /* @__PURE__ */ jsx(
     "path",
     {
@@ -4125,7 +4335,7 @@ function CalendarSurface() {
             "text-ink-3 hover:text-ink hover:bg-surface-2 cursor-pointer outline-none",
             "focus-visible:shadow-[var(--shadow-focus)]"
           ),
-          children: /* @__PURE__ */ jsx(ChevronLeft, {})
+          children: /* @__PURE__ */ jsx(ChevronLeft2, {})
         }
       ),
       /* @__PURE__ */ jsx(Heading, { className: "font-sans font-medium text-[14px] text-ink tracking-[-0.01em]" }),
@@ -4139,7 +4349,7 @@ function CalendarSurface() {
             "text-ink-3 hover:text-ink hover:bg-surface-2 cursor-pointer outline-none",
             "focus-visible:shadow-[var(--shadow-focus)]"
           ),
-          children: /* @__PURE__ */ jsx(ChevronRight, {})
+          children: /* @__PURE__ */ jsx(ChevronRight2, {})
         }
       )
     ] }),
@@ -5952,7 +6162,7 @@ function MenuItem({ icon, hasSubmenu, children, className, ...props }) {
       children: [
         icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: icon }) : null,
         /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children }),
-        hasSubmenu ? /* @__PURE__ */ jsx(ChevronRight$1, { className: "ml-2 size-3 shrink-0 text-ink-4" }) : null
+        hasSubmenu ? /* @__PURE__ */ jsx(ChevronRight, { className: "ml-2 size-3 shrink-0 text-ink-4" }) : null
       ]
     }
   );
@@ -8537,6 +8747,81 @@ function Separator({
     }
   );
 }
+var stepperStyles = tv({
+  slots: {
+    root: "flex min-w-0 flex-wrap items-center gap-y-2 m-0 list-none p-0",
+    item: "flex items-center",
+    trigger: [
+      "inline-flex items-center gap-[7px] rounded-sm border-0 bg-transparent p-0",
+      "cursor-pointer select-none outline-none",
+      "transition-colors duration-150",
+      "data-[focus-visible]:shadow-[var(--shadow-focus)]",
+      "data-[disabled]:cursor-default"
+    ],
+    marker: [
+      "grid size-[18px] shrink-0 place-items-center rounded-pill border-[1.5px]",
+      "font-mono text-[10px] font-medium leading-none",
+      "transition-[background-color,border-color,color] duration-150",
+      "[&_svg]:size-[11px]"
+    ],
+    label: "whitespace-nowrap text-[13px]",
+    connector: "mx-2.5 h-px w-6 shrink-0 bg-rule"
+  },
+  variants: {
+    orientation: {
+      horizontal: {},
+      vertical: {
+        root: "flex-col flex-nowrap items-stretch gap-y-0",
+        item: "flex-col items-start",
+        // Centered under the 18px marker (9px in, minus half the line).
+        connector: "mx-0 my-1 ml-[8.5px] h-4 w-px"
+      }
+    },
+    state: {
+      completed: {
+        marker: "border-accent bg-accent text-surface",
+        label: "text-ink-2 group-data-[hovered]:text-ink"
+      },
+      current: {
+        marker: "border-accent bg-accent text-surface",
+        label: "font-medium text-accent"
+      },
+      upcoming: {
+        marker: "border-rule-strong bg-transparent text-ink-3",
+        label: "text-ink-3 group-data-[hovered]:text-ink"
+      }
+    },
+    isSelected: {
+      true: { label: "underline decoration-accent/40 underline-offset-4" },
+      false: {}
+    }
+  },
+  defaultVariants: { orientation: "horizontal", state: "upcoming", isSelected: false }
+});
+function Stepper({ orientation, className, ...props }) {
+  const { root } = stepperStyles({ orientation });
+  return /* @__PURE__ */ jsx("ol", { ...props, className: cn(root(), className) });
+}
+function StepperStep({
+  state,
+  orientation,
+  index,
+  icon,
+  isSelected = false,
+  isLast = false,
+  children,
+  className,
+  ...props
+}) {
+  const styles4 = stepperStyles({ orientation, state, isSelected });
+  return /* @__PURE__ */ jsxs("li", { "aria-current": state === "current" ? "step" : void 0, className: styles4.item(), children: [
+    /* @__PURE__ */ jsxs(Button$1, { ...props, className: cn("group", styles4.trigger(), className), children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles4.marker(), children: state === "completed" ? /* @__PURE__ */ jsx(Check, { strokeWidth: 2.5 }) : icon ?? index + 1 }),
+      /* @__PURE__ */ jsx("span", { className: styles4.label(), children })
+    ] }),
+    !isLast && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles4.connector() })
+  ] });
+}
 function SuccessAnimation({ className }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -8820,6 +9105,100 @@ function TimeField({
     }
   );
 }
+var timeSlotListStyles = tv({
+  slots: {
+    group: "flex flex-col gap-2",
+    row: "flex gap-2 min-w-0",
+    item: [
+      "flex-1 min-h-9 px-3 inline-flex items-center justify-center cursor-pointer outline-none",
+      "font-sans text-[13.5px] font-medium text-ink rounded-md",
+      "bg-surface border border-rule-strong",
+      "transition-[background-color,color,border-color,box-shadow] duration-150",
+      "hovered:bg-surface-2 hovered:border-ink-3",
+      "pressed:bg-surface-3",
+      "selected:border-ink selected:bg-surface selected:shadow-[inset_0_0_0_1px_var(--color-ink)]",
+      "selected:hovered:bg-surface",
+      "data-[focus-visible]:shadow-[var(--shadow-focus)]",
+      "selected:data-[focus-visible]:shadow-[var(--shadow-focus),inset_0_0_0_1px_var(--color-ink)]",
+      // Taken while you looked: dashed and quiet.
+      "data-[disabled]:border-dashed data-[disabled]:border-rule data-[disabled]:text-ink-4",
+      "data-[disabled]:cursor-default data-[disabled]:bg-transparent"
+    ],
+    confirm: "flex-1 min-h-9",
+    empty: [
+      "rounded-md border border-rule-2 bg-surface-2 px-4 py-5 text-center",
+      "font-sans text-[13px] text-ink-3"
+    ]
+  },
+  variants: {
+    columns: {
+      1: { group: "grid grid-cols-1" },
+      2: { group: "grid grid-cols-2" }
+    }
+  },
+  defaultVariants: { columns: 1 }
+});
+function TimeSlotList({
+  items,
+  selectedId,
+  onSelect,
+  confirmLabel,
+  onConfirm,
+  emptyMessage = "Nothing available.",
+  columns,
+  autoFocus = false,
+  isDisabled = false,
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  const styles4 = timeSlotListStyles({ columns });
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx("div", { role: "status", className: cn(styles4.empty(), className), children: emptyMessage });
+  }
+  const focusTarget = selectedId ?? items.find((item) => !item.isDisabled)?.id ?? null;
+  return /* @__PURE__ */ jsx(
+    ToggleButtonGroup,
+    {
+      ...props,
+      orientation,
+      selectionMode: "single",
+      disallowEmptySelection: true,
+      isDisabled,
+      selectedKeys: selectedId === null ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([selectedId]),
+      onSelectionChange: (keys) => {
+        const [next] = Array.from(keys);
+        if (next !== void 0) onSelect(next);
+      },
+      className: cn(styles4.group(), className),
+      children: items.map((item) => {
+        const isSelected = item.id === selectedId;
+        return /* @__PURE__ */ jsxs("div", { className: styles4.row(), children: [
+          /* @__PURE__ */ jsx(
+            ToggleButton,
+            {
+              id: item.id,
+              ...item.isDisabled ? { isDisabled: true } : {},
+              ...autoFocus && item.id === focusTarget ? { autoFocus: true } : {},
+              className: styles4.item(),
+              children: item.label
+            }
+          ),
+          isSelected && confirmLabel && /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "cta",
+              className: styles4.confirm(),
+              isDisabled,
+              onPress: () => onConfirm?.(item.id),
+              children: confirmLabel
+            }
+          )
+        ] }, String(item.id));
+      })
+    }
+  );
+}
 function createToastQueue(options = {}) {
   return new UNSTABLE_ToastQueue({ maxVisibleToasts: options.maxVisibleToasts ?? 3 });
 }
@@ -8889,6 +9268,6 @@ function ToastRegion({ queue, className }) {
   );
 }
 
-export { ATTRIBUTE_TYPES, ATTRIBUTE_TYPE_ICONS, AttachmentChip, AttributePicker, AttributeType, AttributeTypeIcon, Avatar, AvatarGroup, Badge, BadgeAction, BadgeGroup, BadgeMultiSelect, BooleanCell, Breadcrumbs, COLUMN_DRAG_KIND, CONVERSATION_BRIEF_OUTCOME_LABEL, Card, CardBody, CardContent, CardEyebrow, CardFeatureTitle, CardFooter, CardHeader, CardTitle, ChannelIcon, Checkbox, CheckboxGroup, ChipValue, ColorInput, Combobox, Command, CommandHint, ConversationBriefCard, ConversationBriefPreview, ConversationBriefReview, CurrencyInput, DRAFT_OUTCOME_LABEL, DataTable, DataTableEmpty, DataTableError, DataTableSkeleton, DateCell, DatePicker, DateTimeCell, DateTimePicker, DraftMessageCard, DraftMessageComposer, DraftMessageReview, EmptyState, ErrorAnimation, FIELD_LABEL_SEPARATOR, FieldCaret, FileField, FileViewer, FileViewerFallbackCard, FilterRow, FilterValueInput, IconPicker, ImageAttachment, ImageLightbox, Input, Kbd, LinkCell, MAX_COMPOSER_ATTACHMENT_BYTES, Menu, MenuItem, MenuPopover, MenuTrigger, MessageComposer, Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, MultiSelect, NavGroup, NavItem, NavSection, OPERATORS, OperatorPicker, Orb, PROTECTED_COMBOS, Popover, PopoverContent, PopoverPanelBody, PopoverPanelFooter, PopoverPanelHeader, PressableCard, ProgressBar, ProgressRing, Radio, RadioGroup, RecipientSelect, RecordFilterBuilderPanel, RecordFilterButton, RecordFilterChips, RecordFilterEditor, RecordUpdate, RecordUpdateErrors, RecordUpdateFooter, RecordUpdateRow, RecordUpdateRows, RecordUpdateSummary, RenderChipItemProvider, RenderValueInputProvider, SELECTION_COLUMN_ID, SegmentedControl, Select, Separator, SubmenuTrigger, SuccessAnimation, Switch, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableHeaderSpacer, TableRow, TableScroller, Tabs, TagInput, TextShimmer, Textarea, TimeField, ToastRegion, Tooltip, TooltipTrigger, TruncateCell, __resetDraftMessageActions, __resetDraftMessageOutcomes, addLeaf as addFilterLeaf, addPendingLeaf, addSubgroup, arityOf, attachmentChipStyles, avatarGroupStyles, avatarStyles, badgeGroupOverflowStyles, badgeGroupStyles, badgeStyles, cardStyles2 as cardStyles, channelIcon, contactPhoneNumbers, conversationBriefCardStyles, conversationBriefOutcomeFor, countLeaves, createConversationBriefClient, createDraftMessageClient, createToastQueue, defaultValueFor, draftMessageCardStyles, draftMessageComposerStyles, draftOutcomeFor, emptyStateStyles, fieldControlStyles, fieldErrorStyles, fieldHintStyles, fieldLabelStyles, fileViewerFallbackCardStyles, fileViewerStyles, fitBadgeCount, formatFileSize, formatValue, getPlatform, iconForContentType, imageAttachmentStyles, imageLightboxStyles, isColumnDragData, isDialableConversationBrief, isDraftReviewOutcome, isEditableTarget, isPreviewableImageName, joinFieldLabel, makeActionsColumn, messageComposerStyles, namesOf, navItemStyles, normalizeHexColor, operatorById, operatorsForType, parseCombo, progressBarStyles, progressRingStyles, publishDraftMessageOutcome, rebaseRowOnFieldChange, rebaseRowOnOperatorChange, recordUpdateRowStyles, recordUpdateStyles, registerDraftMessageActions, removeLeaf, removeSubgroup, replaceLeaf, resolveLucideIcon, resolveLucideIconName, segmentedControlStyles, setJoiner, subscribeDraftMessageOutcome, summaryFor, tableCellStyles, tableHeaderCellStyles, tabsStyles, terminalKindFor, textShimmerStyles, toastStyles, updateLeaf, updateSubgroup, useActiveCommands, useAttributeTypeIcon, useCommand, useDiscoveryActive, useDraftMessageActions, useDraftMessageOutcome, useEscapeKey, useInfiniteScrollSentinel, useRenderChipItem, useRenderValueInput, useShowDetails, viewerKindForContentType, wrapLeafInGroup };
+export { ATTRIBUTE_TYPES, ATTRIBUTE_TYPE_ICONS, AttachmentChip, AttributePicker, AttributeType, AttributeTypeIcon, AvailabilityCalendar, Avatar, AvatarGroup, Badge, BadgeAction, BadgeGroup, BadgeMultiSelect, BooleanCell, Breadcrumbs, COLUMN_DRAG_KIND, CONVERSATION_BRIEF_OUTCOME_LABEL, Card, CardBody, CardContent, CardEyebrow, CardFeatureTitle, CardFooter, CardHeader, CardTitle, ChannelIcon, Checkbox, CheckboxGroup, ChipValue, ColorInput, Combobox, Command, CommandHint, ConversationBriefCard, ConversationBriefPreview, ConversationBriefReview, CurrencyInput, DRAFT_OUTCOME_LABEL, DataTable, DataTableEmpty, DataTableError, DataTableSkeleton, DateCell, DatePicker, DateTimeCell, DateTimePicker, DraftMessageCard, DraftMessageComposer, DraftMessageReview, EmptyState, ErrorAnimation, FIELD_LABEL_SEPARATOR, FieldCaret, FileField, FileViewer, FileViewerFallbackCard, FilterRow, FilterValueInput, IconPicker, ImageAttachment, ImageLightbox, Input, Kbd, LinkCell, MAX_COMPOSER_ATTACHMENT_BYTES, Menu, MenuItem, MenuPopover, MenuTrigger, MessageComposer, Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, MultiSelect, NavGroup, NavItem, NavSection, OPERATORS, OperatorPicker, Orb, PROTECTED_COMBOS, Popover, PopoverContent, PopoverPanelBody, PopoverPanelFooter, PopoverPanelHeader, PressableCard, ProgressBar, ProgressRing, Radio, RadioGroup, RecipientSelect, RecordFilterBuilderPanel, RecordFilterButton, RecordFilterChips, RecordFilterEditor, RecordUpdate, RecordUpdateErrors, RecordUpdateFooter, RecordUpdateRow, RecordUpdateRows, RecordUpdateSummary, RenderChipItemProvider, RenderValueInputProvider, SELECTION_COLUMN_ID, SegmentedControl, Select, Separator, Stepper, StepperStep, SubmenuTrigger, SuccessAnimation, Switch, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableHeaderSpacer, TableRow, TableScroller, Tabs, TagInput, TextShimmer, Textarea, TimeField, TimeSlotList, ToastRegion, Tooltip, TooltipTrigger, TruncateCell, __resetDraftMessageActions, __resetDraftMessageOutcomes, addLeaf as addFilterLeaf, addPendingLeaf, addSubgroup, arityOf, attachmentChipStyles, availabilityCalendarStyles, avatarGroupStyles, avatarStyles, badgeGroupOverflowStyles, badgeGroupStyles, badgeStyles, cardStyles2 as cardStyles, channelIcon, contactPhoneNumbers, conversationBriefCardStyles, conversationBriefOutcomeFor, countLeaves, createConversationBriefClient, createDraftMessageClient, createToastQueue, defaultValueFor, draftMessageCardStyles, draftMessageComposerStyles, draftOutcomeFor, emptyStateStyles, fieldControlStyles, fieldErrorStyles, fieldHintStyles, fieldLabelStyles, fileViewerFallbackCardStyles, fileViewerStyles, fitBadgeCount, formatFileSize, formatValue, getPlatform, iconForContentType, imageAttachmentStyles, imageLightboxStyles, isColumnDragData, isDialableConversationBrief, isDraftReviewOutcome, isEditableTarget, isPreviewableImageName, joinFieldLabel, makeActionsColumn, messageComposerStyles, namesOf, navItemStyles, normalizeHexColor, operatorById, operatorsForType, parseCombo, progressBarStyles, progressRingStyles, publishDraftMessageOutcome, rebaseRowOnFieldChange, rebaseRowOnOperatorChange, recordUpdateRowStyles, recordUpdateStyles, registerDraftMessageActions, removeLeaf, removeSubgroup, replaceLeaf, resolveLucideIcon, resolveLucideIconName, segmentedControlStyles, setJoiner, stepperStyles, subscribeDraftMessageOutcome, summaryFor, tableCellStyles, tableHeaderCellStyles, tabsStyles, terminalKindFor, textShimmerStyles, timeSlotListStyles, toastStyles, updateLeaf, updateSubgroup, useActiveCommands, useAttributeTypeIcon, useCommand, useDiscoveryActive, useDraftMessageActions, useDraftMessageOutcome, useEscapeKey, useInfiniteScrollSentinel, useRenderChipItem, useRenderValueInput, useShowDetails, viewerKindForContentType, wrapLeafInGroup };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map