@proteos/ui 0.60.0 → 0.75.0

package/dist/index.cjs

@@ -401,6 +401,108 @@ function AttributeTypeIcon({
     }
   );
 }
+var availabilityCalendarStyles = tailwindVariants.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__ */ jsxRuntime.jsxs(
+    reactAriaComponents.Calendar,
+    {
+      ...props,
+      value,
+      onChange: (next) => onChange(next),
+      ...unavailable ? { isDateUnavailable: unavailable } : {},
+      visibleDuration: { months: 1 },
+      className: chunkNWGG5WFL_cjs.cn(styles4.root(), className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("header", { className: styles4.header(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, { className: styles4.heading(), children: /* @__PURE__ */ jsxRuntime.jsx(MonthHeading, { yearClassName: styles4.headingYear() }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles4.nav(), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Button, { slot: "previous", "aria-label": "Previous month", className: styles4.navButton(), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "size-4", "aria-hidden": "true" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Button, { slot: "next", "aria-label": "Next month", className: styles4.navButton(), children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRight, { className: "size-4", "aria-hidden": "true" }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-busy": isLoading, children: /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.CalendarGrid, { weekdayStyle, className: styles4.grid(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.CalendarHeaderCell, { className: styles4.weekday(), children: day }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.CalendarGridBody, { children: (date) => /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.CalendarCell, { date, className: styles4.cell(), children: ({ formattedDate, isToday, isOutsideMonth }) => isLoading && !isOutsideMonth ? /* @__PURE__ */ jsxRuntime.jsx(chunkNWGG5WFL_cjs.Skeleton, { className: styles4.cellSkeleton() }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            formattedDate,
+            isToday && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles4.dot(), "aria-hidden": "true" })
+          ] }) }) })
+        ] }) })
+      ]
+    }
+  );
+}
+function MonthHeading({ yearClassName }) {
+  const state = react.useContext(reactAriaComponents.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: month }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: yearClassName, children: year })
+  ] });
+}
 var avatarStyles = tailwindVariants.tv({
   base: [
     "inline-grid place-items-center shrink-0 select-none overflow-hidden",
@@ -955,7 +1057,10 @@ function Tooltip({ className, offset = 6, ...props }) {
       ...props,
       offset,
       className: (renderProps) => chunkNWGG5WFL_cjs.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",
@@ -2519,9 +2624,13 @@ function ConversationBriefPreview({
   contentClassName,
   renderContent,
   onEdit,
-  editor
+  editor,
+  aside,
+  isMetaHidden = false,
+  isSubjectHidden = false
 }) {
   const [pickedContactId, setPickedContactId] = react.useState("");
+  const [isPickingTarget, setIsPickingTarget] = react.useState(false);
   const contact = contacts.find((entry) => entry.id === pickedContactId) ?? contacts[0] ?? null;
   const numbers = react.useMemo(() => contactPhoneNumbers(contact), [contact]);
   const [pickedNumber, setPickedNumber] = react.useState("");
@@ -2534,22 +2643,25 @@ function ConversationBriefPreview({
     onSelectionChangeRef.current?.(contact, phoneNumber);
   }, [contact, phoneNumber]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: chunkNWGG5WFL_cjs.cn("flex flex-col gap-3", className), children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+    isSubjectHidden ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx("p", { className: "truncate text-[14px] font-semibold text-ink", children: brief.subject || names || "Prepared conversation" }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-[10.5px] text-ink-4", children: [
+      isMetaHidden ? null : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "group/brief-content relative flex min-h-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: chunkNWGG5WFL_cjs.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
           ),
@@ -2573,28 +2685,121 @@ function ConversationBriefPreview({
       ) : null
     ] }),
     onCall ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 border-t border-rule-2 pt-3", children: [
-      contacts.length > 1 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-        Select,
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
         {
-          "aria-label": "Number to call",
-          selectedKey: phoneNumber,
-          onSelectionChange: (key) => setPickedNumber(String(key)),
-          options: numbers.map((number) => ({ id: number, label: number }))
+          className: chunkNWGG5WFL_cjs.cn(
+            "grid gap-3",
+            aside ? "grid-cols-[minmax(0,1fr)_minmax(0,1fr)]" : "grid-cols-1"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [
+              isPickingTarget && (contacts.length > 1 || numbers.length > 1) ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4", children: "Calling" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-start gap-1.5", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
+                    contacts.length > 1 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                    chunkNWGG5WFL_cjs.Button,
+                    {
+                      variant: "ghost",
+                      size: "icon-sm",
+                      "aria-label": "Keep the current number",
+                      onPress: () => setIsPickingTarget(false),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": true })
+                    }
+                  )
+                ] })
+              ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "group/dial flex min-w-0 flex-col gap-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4", children: "Calling" }),
+                /* @__PURE__ */ jsxRuntime.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 = chunkNWGG5WFL_cjs.cn(
+                      "min-w-0 truncate text-[12px] tabular-nums",
+                      phoneNumber ? "text-ink-2" : "text-warning"
+                    );
+                    const icon = /* @__PURE__ */ jsxRuntime.jsx(
+                      lucideReact.Phone,
+                      {
+                        className: chunkNWGG5WFL_cjs.cn(
+                          "size-3 shrink-0",
+                          phoneNumber ? "text-ink-4" : "text-warning"
+                        ),
+                        "aria-hidden": true
+                      }
+                    );
+                    return hasChoice ? /* @__PURE__ */ jsxRuntime.jsxs(
+                      reactAriaComponents.Button,
+                      {
+                        className: chunkNWGG5WFL_cjs.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__ */ jsxRuntime.jsx("span", { className: valueClassName, title: phoneNumber, children: valueText })
+                        ]
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      icon,
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: valueClassName, title: phoneNumber, children: valueText })
+                    ] });
+                  })(),
+                  contacts.length > 1 || numbers.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx(
+                    chunkNWGG5WFL_cjs.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__ */ jsxRuntime.jsx(lucideReact.Pencil, { "aria-hidden": true })
+                    }
+                  ) : null
+                ] })
+              ] }),
+              controls
+            ] }),
+            aside ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 min-w-0", children: aside }) : null
+          ]
         }
-      ) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("p", { className: "text-[12px] text-warning", children: callDisabledReason }) : null,
       isCallButtonHidden ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
         chunkNWGG5WFL_cjs.Button,
@@ -3903,6 +4108,11 @@ function DataTable({
                 {
                   ref: listRef,
                   role: "presentation",
+                  "aria-busy": query.isPlaceholderData ? true : void 0,
+                  className: chunkNWGG5WFL_cjs.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];
@@ -4089,7 +4299,7 @@ function CalendarGlyph() {
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.5 2V5M10.5 2V5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })
   ] });
 }
-function ChevronLeft() {
+function ChevronLeft2() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": true, viewBox: "0 0 12 12", className: "size-3", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
@@ -4101,7 +4311,7 @@ function ChevronLeft() {
     }
   ) });
 }
-function ChevronRight() {
+function ChevronRight2() {
   return /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": true, viewBox: "0 0 12 12", className: "size-3", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
     "path",
     {
@@ -4126,7 +4336,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__ */ jsxRuntime.jsx(ChevronLeft, {})
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft2, {})
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Heading, { className: "font-sans font-medium text-[14px] text-ink tracking-[-0.01em]" }),
@@ -4140,7 +4350,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__ */ jsxRuntime.jsx(ChevronRight, {})
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRight2, {})
         }
       )
     ] }),
@@ -8538,6 +8748,81 @@ function Separator({
     }
   );
 }
+var stepperStyles = tailwindVariants.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__ */ jsxRuntime.jsx("ol", { ...props, className: chunkNWGG5WFL_cjs.cn(root(), className) });
+}
+function StepperStep({
+  state,
+  orientation,
+  index,
+  icon,
+  isSelected = false,
+  isLast = false,
+  children,
+  className,
+  ...props
+}) {
+  const styles4 = stepperStyles({ orientation, state, isSelected });
+  return /* @__PURE__ */ jsxRuntime.jsxs("li", { "aria-current": state === "current" ? "step" : void 0, className: styles4.item(), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.Button, { ...props, className: chunkNWGG5WFL_cjs.cn("group", styles4.trigger(), className), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: styles4.marker(), children: state === "completed" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { strokeWidth: 2.5 }) : icon ?? index + 1 }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles4.label(), children })
+    ] }),
+    !isLast && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: styles4.connector() })
+  ] });
+}
 function SuccessAnimation({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
@@ -8821,6 +9106,100 @@ function TimeField({
     }
   );
 }
+var timeSlotListStyles = tailwindVariants.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__ */ jsxRuntime.jsx("div", { role: "status", className: chunkNWGG5WFL_cjs.cn(styles4.empty(), className), children: emptyMessage });
+  }
+  const focusTarget = selectedId ?? items.find((item) => !item.isDisabled)?.id ?? null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.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: chunkNWGG5WFL_cjs.cn(styles4.group(), className),
+      children: items.map((item) => {
+        const isSelected = item.id === selectedId;
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles4.row(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactAriaComponents.ToggleButton,
+            {
+              id: item.id,
+              ...item.isDisabled ? { isDisabled: true } : {},
+              ...autoFocus && item.id === focusTarget ? { autoFocus: true } : {},
+              className: styles4.item(),
+              children: item.label
+            }
+          ),
+          isSelected && confirmLabel && /* @__PURE__ */ jsxRuntime.jsx(
+            chunkNWGG5WFL_cjs.Button,
+            {
+              variant: "cta",
+              className: styles4.confirm(),
+              isDisabled,
+              onPress: () => onConfirm?.(item.id),
+              children: confirmLabel
+            }
+          )
+        ] }, String(item.id));
+      })
+    }
+  );
+}
 function createToastQueue(options = {}) {
   return new reactAriaComponents.UNSTABLE_ToastQueue({ maxVisibleToasts: options.maxVisibleToasts ?? 3 });
 }
@@ -8916,6 +9295,7 @@ exports.AttachmentChip = AttachmentChip;
 exports.AttributePicker = AttributePicker;
 exports.AttributeType = AttributeType;
 exports.AttributeTypeIcon = AttributeTypeIcon;
+exports.AvailabilityCalendar = AvailabilityCalendar;
 exports.Avatar = Avatar;
 exports.AvatarGroup = AvatarGroup;
 exports.Badge = Badge;
@@ -9021,6 +9401,8 @@ exports.SELECTION_COLUMN_ID = SELECTION_COLUMN_ID;
 exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
 exports.Separator = Separator;
+exports.Stepper = Stepper;
+exports.StepperStep = StepperStep;
 exports.SubmenuTrigger = SubmenuTrigger;
 exports.SuccessAnimation = SuccessAnimation;
 exports.Switch = Switch;
@@ -9037,6 +9419,7 @@ exports.TagInput = TagInput;
 exports.TextShimmer = TextShimmer;
 exports.Textarea = Textarea;
 exports.TimeField = TimeField;
+exports.TimeSlotList = TimeSlotList;
 exports.ToastRegion = ToastRegion;
 exports.Tooltip = Tooltip;
 exports.TooltipTrigger = TooltipTrigger;
@@ -9048,6 +9431,7 @@ exports.addPendingLeaf = addPendingLeaf;
 exports.addSubgroup = addSubgroup;
 exports.arityOf = arityOf;
 exports.attachmentChipStyles = attachmentChipStyles;
+exports.availabilityCalendarStyles = availabilityCalendarStyles;
 exports.avatarGroupStyles = avatarGroupStyles;
 exports.avatarStyles = avatarStyles;
 exports.badgeGroupOverflowStyles = badgeGroupOverflowStyles;
@@ -9109,6 +9493,7 @@ exports.resolveLucideIcon = resolveLucideIcon;
 exports.resolveLucideIconName = resolveLucideIconName;
 exports.segmentedControlStyles = segmentedControlStyles;
 exports.setJoiner = setJoiner;
+exports.stepperStyles = stepperStyles;
 exports.subscribeDraftMessageOutcome = subscribeDraftMessageOutcome;
 exports.summaryFor = summaryFor;
 exports.tableCellStyles = tableCellStyles;
@@ -9116,6 +9501,7 @@ exports.tableHeaderCellStyles = tableHeaderCellStyles;
 exports.tabsStyles = tabsStyles;
 exports.terminalKindFor = terminalKindFor;
 exports.textShimmerStyles = textShimmerStyles;
+exports.timeSlotListStyles = timeSlotListStyles;
 exports.toastStyles = toastStyles;
 exports.updateLeaf = updateLeaf;
 exports.updateSubgroup = updateSubgroup;