@proteos/ui 0.61.0 → 0.76.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/{chunk-NWGG5WFL.cjs → chunk-4ACELYEP.cjs} +23 -4
- package/dist/chunk-4ACELYEP.cjs.map +1 -0
- package/dist/{chunk-NSE4VW3Z.js → chunk-XRN5MNDX.js} +24 -5
- package/dist/chunk-XRN5MNDX.js.map +1 -0
- package/dist/index.cjs +811 -304
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +365 -15
- package/dist/index.d.ts +365 -15
- package/dist/index.js +537 -39
- package/dist/index.js.map +1 -1
- package/dist/{pdf-view-RRMAUK3L.cjs → pdf-view-2DSARHNQ.cjs} +7 -7
- package/dist/{pdf-view-RRMAUK3L.cjs.map → pdf-view-2DSARHNQ.cjs.map} +1 -1
- package/dist/{pdf-view-RQ2OZYHJ.js → pdf-view-2QU4FI37.js} +3 -3
- package/dist/{pdf-view-RQ2OZYHJ.js.map → pdf-view-2QU4FI37.js.map} +1 -1
- package/package.json +2 -2
- package/src/components/availability-calendar/availability-calendar.stories.tsx +78 -0
- package/src/components/availability-calendar/availability-calendar.test.tsx +89 -0
- package/src/components/availability-calendar/availability-calendar.tsx +182 -0
- package/src/components/availability-calendar/index.ts +5 -0
- package/src/components/button/button.stories.tsx +22 -1
- package/src/components/button/button.test.tsx +45 -1
- package/src/components/button/button.tsx +32 -2
- package/src/components/conversation-brief-card/conversation-brief-preview.tsx +176 -47
- package/src/components/conversation-brief-card/conversation-brief-review.test.tsx +58 -1
- package/src/components/data-table/data-table.test.tsx +65 -0
- package/src/components/data-table/data-table.tsx +33 -2
- package/src/components/glow-frame/glow-frame.stories.tsx +65 -0
- package/src/components/glow-frame/glow-frame.test.tsx +67 -0
- package/src/components/glow-frame/glow-frame.tsx +182 -0
- package/src/components/glow-frame/index.ts +2 -0
- package/src/components/stepper/index.ts +8 -0
- package/src/components/stepper/stepper.stories.tsx +84 -0
- package/src/components/stepper/stepper.test.tsx +79 -0
- package/src/components/stepper/stepper.tsx +127 -0
- package/src/components/time-slot-list/index.ts +2 -0
- package/src/components/time-slot-list/time-slot-list.stories.tsx +100 -0
- package/src/components/time-slot-list/time-slot-list.test.tsx +120 -0
- package/src/components/time-slot-list/time-slot-list.tsx +154 -0
- package/src/components/tooltip/tooltip.tsx +4 -1
- package/src/index.ts +4 -0
- package/src/styles.css +216 -0
- package/dist/chunk-NSE4VW3Z.js.map +0 -1
- package/dist/chunk-NWGG5WFL.cjs.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { cn, Button, Skeleton } from './chunk-
|
|
2
|
-
export { Button, Skeleton, buttonStyles, cn, skeletonStyles } from './chunk-
|
|
3
|
-
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,
|
|
1
|
+
import { cn, Button, Skeleton } from './chunk-XRN5MNDX.js';
|
|
2
|
+
export { Button, Skeleton, buttonStyles, cn, skeletonStyles } from './chunk-XRN5MNDX.js';
|
|
3
|
+
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';
|
|
4
4
|
import { tv } from 'tailwind-variants';
|
|
5
|
-
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,
|
|
5
|
+
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';
|
|
6
6
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
7
|
-
import { lazy, createContext, useState, useRef, useMemo, Children, isValidElement, useLayoutEffect, useEffect,
|
|
7
|
+
import { lazy, createContext, useContext, useState, useRef, useMemo, Children, isValidElement, useLayoutEffect, useEffect, useSyncExternalStore, useCallback, Suspense, useId, Fragment as Fragment$1 } from 'react';
|
|
8
8
|
import { formatAmount, parseAmount } from '@proteos/sdk';
|
|
9
9
|
import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
10
10
|
import { extractClosestEdge, attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
|
|
@@ -400,6 +400,108 @@ function AttributeTypeIcon({
|
|
|
400
400
|
}
|
|
401
401
|
);
|
|
402
402
|
}
|
|
403
|
+
var availabilityCalendarStyles = tv({
|
|
404
|
+
slots: {
|
|
405
|
+
root: "flex flex-col",
|
|
406
|
+
header: "flex items-center justify-between mb-3.5",
|
|
407
|
+
heading: "font-sans text-[15px] text-ink tracking-[-0.01em]",
|
|
408
|
+
headingYear: "ml-1 text-ink-3",
|
|
409
|
+
nav: "flex gap-1",
|
|
410
|
+
navButton: [
|
|
411
|
+
"size-7 rounded-md inline-flex items-center justify-center cursor-pointer outline-none",
|
|
412
|
+
"text-ink-3 hovered:text-ink hovered:bg-surface-3 pressed:bg-surface-4",
|
|
413
|
+
"data-[focus-visible]:shadow-[var(--shadow-focus)]",
|
|
414
|
+
"data-[disabled]:opacity-40 data-[disabled]:cursor-default data-[disabled]:hover:bg-transparent"
|
|
415
|
+
],
|
|
416
|
+
grid: "w-full border-separate border-spacing-1 table-fixed -m-1",
|
|
417
|
+
weekday: "font-mono text-[11px] font-medium uppercase tracking-[0.08em] text-ink-3 pb-2 text-center",
|
|
418
|
+
cell: [
|
|
419
|
+
"relative aspect-square flex items-center justify-center cursor-pointer outline-none",
|
|
420
|
+
"font-sans text-[14px] font-medium rounded-sm border border-transparent",
|
|
421
|
+
"transition-[background-color,color,border-color] duration-150",
|
|
422
|
+
// Available (the default when neither unavailable nor disabled).
|
|
423
|
+
"bg-surface-2 text-ink",
|
|
424
|
+
"data-[hovered]:bg-surface-3 data-[hovered]:border-rule-strong",
|
|
425
|
+
"data-[focus-visible]:shadow-[var(--shadow-focus)]",
|
|
426
|
+
// Selected: the one ink fill on the page.
|
|
427
|
+
"data-[selected]:bg-ink data-[selected]:text-surface data-[selected]:border-ink",
|
|
428
|
+
"data-[selected]:data-[hovered]:bg-ink data-[selected]:data-[hovered]:border-ink",
|
|
429
|
+
// Unavailable / past: quiet text, no fill, no hover.
|
|
430
|
+
"data-[unavailable]:bg-transparent data-[unavailable]:text-ink-4 data-[unavailable]:font-normal data-[unavailable]:cursor-default",
|
|
431
|
+
"data-[unavailable]:data-[hovered]:bg-transparent data-[unavailable]:data-[hovered]:border-transparent",
|
|
432
|
+
"data-[disabled]:bg-transparent data-[disabled]:text-ink-4 data-[disabled]:font-normal data-[disabled]:cursor-default",
|
|
433
|
+
"data-[disabled]:data-[hovered]:bg-transparent data-[disabled]:data-[hovered]:border-transparent",
|
|
434
|
+
// Days of the neighbouring months are blank in a month-aligned grid.
|
|
435
|
+
"data-[outside-month]:invisible"
|
|
436
|
+
],
|
|
437
|
+
dot: "absolute bottom-1.5 left-1/2 -translate-x-1/2 size-1 rounded-full bg-current",
|
|
438
|
+
cellSkeleton: "absolute inset-0 rounded-sm"
|
|
439
|
+
},
|
|
440
|
+
variants: {
|
|
441
|
+
isLoading: {
|
|
442
|
+
true: { cell: "bg-transparent cursor-default" },
|
|
443
|
+
false: {}
|
|
444
|
+
}
|
|
445
|
+
},
|
|
446
|
+
defaultVariants: { isLoading: false }
|
|
447
|
+
});
|
|
448
|
+
function AvailabilityCalendar({
|
|
449
|
+
value,
|
|
450
|
+
onChange,
|
|
451
|
+
isLoading = false,
|
|
452
|
+
className,
|
|
453
|
+
isDateUnavailable,
|
|
454
|
+
weekdayStyle = "short",
|
|
455
|
+
...props
|
|
456
|
+
}) {
|
|
457
|
+
const styles4 = availabilityCalendarStyles({ isLoading });
|
|
458
|
+
const unavailable = isLoading ? () => true : isDateUnavailable;
|
|
459
|
+
return /* @__PURE__ */ jsxs(
|
|
460
|
+
Calendar$1,
|
|
461
|
+
{
|
|
462
|
+
...props,
|
|
463
|
+
value,
|
|
464
|
+
onChange: (next) => onChange(next),
|
|
465
|
+
...unavailable ? { isDateUnavailable: unavailable } : {},
|
|
466
|
+
visibleDuration: { months: 1 },
|
|
467
|
+
className: cn(styles4.root(), className),
|
|
468
|
+
children: [
|
|
469
|
+
/* @__PURE__ */ jsxs("header", { className: styles4.header(), children: [
|
|
470
|
+
/* @__PURE__ */ jsx(Heading, { className: styles4.heading(), children: /* @__PURE__ */ jsx(MonthHeading, { yearClassName: styles4.headingYear() }) }),
|
|
471
|
+
/* @__PURE__ */ jsxs("div", { className: styles4.nav(), children: [
|
|
472
|
+
/* @__PURE__ */ jsx(Button$1, { slot: "previous", "aria-label": "Previous month", className: styles4.navButton(), children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" }) }),
|
|
473
|
+
/* @__PURE__ */ jsx(Button$1, { slot: "next", "aria-label": "Next month", className: styles4.navButton(), children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" }) })
|
|
474
|
+
] })
|
|
475
|
+
] }),
|
|
476
|
+
/* @__PURE__ */ jsx("div", { "aria-busy": isLoading, children: /* @__PURE__ */ jsxs(CalendarGrid, { weekdayStyle, className: styles4.grid(), children: [
|
|
477
|
+
/* @__PURE__ */ jsx(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx(CalendarHeaderCell, { className: styles4.weekday(), children: day }) }),
|
|
478
|
+
/* @__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: [
|
|
479
|
+
formattedDate,
|
|
480
|
+
isToday && /* @__PURE__ */ jsx("span", { className: styles4.dot(), "aria-hidden": "true" })
|
|
481
|
+
] }) }) })
|
|
482
|
+
] }) })
|
|
483
|
+
]
|
|
484
|
+
}
|
|
485
|
+
);
|
|
486
|
+
}
|
|
487
|
+
function MonthHeading({ yearClassName }) {
|
|
488
|
+
const state = useContext(CalendarStateContext);
|
|
489
|
+
if (!state) return null;
|
|
490
|
+
const start = state.visibleRange.start;
|
|
491
|
+
const date = start.toDate(state.timeZone);
|
|
492
|
+
const month = new Intl.DateTimeFormat(void 0, {
|
|
493
|
+
month: "long",
|
|
494
|
+
timeZone: state.timeZone
|
|
495
|
+
}).format(date);
|
|
496
|
+
const year = new Intl.DateTimeFormat(void 0, {
|
|
497
|
+
year: "numeric",
|
|
498
|
+
timeZone: state.timeZone
|
|
499
|
+
}).format(date);
|
|
500
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
501
|
+
/* @__PURE__ */ jsx("span", { className: "font-medium", children: month }),
|
|
502
|
+
/* @__PURE__ */ jsx("span", { className: yearClassName, children: year })
|
|
503
|
+
] });
|
|
504
|
+
}
|
|
403
505
|
var avatarStyles = tv({
|
|
404
506
|
base: [
|
|
405
507
|
"inline-grid place-items-center shrink-0 select-none overflow-hidden",
|
|
@@ -954,7 +1056,10 @@ function Tooltip({ className, offset = 6, ...props }) {
|
|
|
954
1056
|
...props,
|
|
955
1057
|
offset,
|
|
956
1058
|
className: (renderProps) => cn(
|
|
957
|
-
|
|
1059
|
+
// Above the floating chat / softphone windows (1100 / 1200) and their
|
|
1060
|
+
// full-screen workspace, like Select and Toast — a page inside the
|
|
1061
|
+
// window keeps its tooltips.
|
|
1062
|
+
"z-[1300] max-w-xs",
|
|
958
1063
|
"rounded-md border border-rule bg-surface shadow-[var(--shadow-raised)]",
|
|
959
1064
|
"px-2.5 py-1.5",
|
|
960
1065
|
"font-mono text-[11.5px] text-ink-2",
|
|
@@ -2518,9 +2623,13 @@ function ConversationBriefPreview({
|
|
|
2518
2623
|
contentClassName,
|
|
2519
2624
|
renderContent,
|
|
2520
2625
|
onEdit,
|
|
2521
|
-
editor
|
|
2626
|
+
editor,
|
|
2627
|
+
aside,
|
|
2628
|
+
isMetaHidden = false,
|
|
2629
|
+
isSubjectHidden = false
|
|
2522
2630
|
}) {
|
|
2523
2631
|
const [pickedContactId, setPickedContactId] = useState("");
|
|
2632
|
+
const [isPickingTarget, setIsPickingTarget] = useState(false);
|
|
2524
2633
|
const contact = contacts.find((entry) => entry.id === pickedContactId) ?? contacts[0] ?? null;
|
|
2525
2634
|
const numbers = useMemo(() => contactPhoneNumbers(contact), [contact]);
|
|
2526
2635
|
const [pickedNumber, setPickedNumber] = useState("");
|
|
@@ -2533,22 +2642,25 @@ function ConversationBriefPreview({
|
|
|
2533
2642
|
onSelectionChangeRef.current?.(contact, phoneNumber);
|
|
2534
2643
|
}, [contact, phoneNumber]);
|
|
2535
2644
|
return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
|
|
2536
|
-
/* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
|
|
2645
|
+
isSubjectHidden ? null : /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
|
|
2537
2646
|
/* @__PURE__ */ jsx("p", { className: "truncate text-[14px] font-semibold text-ink", children: brief.subject || names || "Prepared conversation" }),
|
|
2538
|
-
/* @__PURE__ */ jsx("p", { className: "font-mono text-[10.5px] text-ink-4", children: [
|
|
2647
|
+
isMetaHidden ? null : /* @__PURE__ */ jsx("p", { className: "font-mono text-[10.5px] text-ink-4", children: [
|
|
2539
2648
|
brief.subject ? names : "",
|
|
2540
2649
|
brief.channel ? `Channel ${brief.channel}` : "Any channel",
|
|
2541
2650
|
brief.type_key ? `Type ${brief.type_key}` : "",
|
|
2542
2651
|
brief.status === "prepared" ? "Prepared" : brief.status === "used" ? "Call held" : "Discarded"
|
|
2543
2652
|
].filter(Boolean).join(" \xB7 ") })
|
|
2544
2653
|
] }),
|
|
2545
|
-
editor ??
|
|
2654
|
+
editor ?? // A flex column of its own so a host that gives the box `flex-1`
|
|
2655
|
+
// (the call window) gets a scrolling box that fills the remaining
|
|
2656
|
+
// height; in an unconstrained host (a modal) it just wraps.
|
|
2657
|
+
/* @__PURE__ */ jsxs("div", { className: "group/brief-content relative flex min-h-0 flex-1 flex-col", children: [
|
|
2546
2658
|
/* @__PURE__ */ jsx(
|
|
2547
2659
|
"div",
|
|
2548
2660
|
{
|
|
2549
2661
|
className: cn(
|
|
2550
2662
|
"rounded-md border border-rule-2 bg-surface-2/60 px-3 py-2.5",
|
|
2551
|
-
"text-[13px] leading-relaxed text-ink-2 overflow-y-auto [scrollbar-width:thin]",
|
|
2663
|
+
"min-h-0 text-[13px] leading-relaxed text-ink-2 overflow-y-auto [scrollbar-width:thin]",
|
|
2552
2664
|
renderContent ? null : "whitespace-pre-wrap",
|
|
2553
2665
|
contentClassName
|
|
2554
2666
|
),
|
|
@@ -2572,28 +2684,121 @@ function ConversationBriefPreview({
|
|
|
2572
2684
|
) : null
|
|
2573
2685
|
] }),
|
|
2574
2686
|
onCall ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border-t border-rule-2 pt-3", children: [
|
|
2575
|
-
|
|
2576
|
-
|
|
2577
|
-
{
|
|
2578
|
-
"aria-label": "Who to call",
|
|
2579
|
-
selectedKey: contact?.id ?? "",
|
|
2580
|
-
onSelectionChange: (key) => {
|
|
2581
|
-
setPickedContactId(String(key));
|
|
2582
|
-
setPickedNumber("");
|
|
2583
|
-
},
|
|
2584
|
-
options: contacts.map((entry) => ({ id: entry.id, label: entry.name || entry.id }))
|
|
2585
|
-
}
|
|
2586
|
-
) : null,
|
|
2587
|
-
numbers.length > 1 ? /* @__PURE__ */ jsx(
|
|
2588
|
-
Select,
|
|
2687
|
+
/* @__PURE__ */ jsxs(
|
|
2688
|
+
"div",
|
|
2589
2689
|
{
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
|
|
2593
|
-
|
|
2690
|
+
className: cn(
|
|
2691
|
+
"grid gap-3",
|
|
2692
|
+
aside ? "grid-cols-[minmax(0,1fr)_minmax(0,1fr)]" : "grid-cols-1"
|
|
2693
|
+
),
|
|
2694
|
+
children: [
|
|
2695
|
+
/* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-2", children: [
|
|
2696
|
+
isPickingTarget && (contacts.length > 1 || numbers.length > 1) ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [
|
|
2697
|
+
/* @__PURE__ */ jsx("p", { className: "font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4", children: "Calling" }),
|
|
2698
|
+
/* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-1.5", children: [
|
|
2699
|
+
/* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [
|
|
2700
|
+
contacts.length > 1 ? /* @__PURE__ */ jsx(
|
|
2701
|
+
Select,
|
|
2702
|
+
{
|
|
2703
|
+
"aria-label": "Who to call",
|
|
2704
|
+
size: "sm",
|
|
2705
|
+
autoFocus: true,
|
|
2706
|
+
selectedKey: contact?.id ?? "",
|
|
2707
|
+
onSelectionChange: (key) => {
|
|
2708
|
+
setPickedContactId(String(key));
|
|
2709
|
+
setPickedNumber("");
|
|
2710
|
+
const picked = contacts.find((entry) => entry.id === String(key));
|
|
2711
|
+
if (contactPhoneNumbers(picked).length <= 1) setIsPickingTarget(false);
|
|
2712
|
+
},
|
|
2713
|
+
options: contacts.map((entry) => ({
|
|
2714
|
+
id: entry.id,
|
|
2715
|
+
label: entry.name || entry.id
|
|
2716
|
+
}))
|
|
2717
|
+
}
|
|
2718
|
+
) : null,
|
|
2719
|
+
numbers.length > 1 ? /* @__PURE__ */ jsx(
|
|
2720
|
+
Select,
|
|
2721
|
+
{
|
|
2722
|
+
"aria-label": "Number to dial",
|
|
2723
|
+
size: "sm",
|
|
2724
|
+
...contacts.length > 1 ? {} : { autoFocus: true },
|
|
2725
|
+
selectedKey: phoneNumber,
|
|
2726
|
+
onSelectionChange: (key) => {
|
|
2727
|
+
if (key !== null) setPickedNumber(String(key));
|
|
2728
|
+
setIsPickingTarget(false);
|
|
2729
|
+
},
|
|
2730
|
+
options: numbers.map((number) => ({ id: number, label: number }))
|
|
2731
|
+
}
|
|
2732
|
+
) : null
|
|
2733
|
+
] }),
|
|
2734
|
+
/* @__PURE__ */ jsx(
|
|
2735
|
+
Button,
|
|
2736
|
+
{
|
|
2737
|
+
variant: "ghost",
|
|
2738
|
+
size: "icon-sm",
|
|
2739
|
+
"aria-label": "Keep the current number",
|
|
2740
|
+
onPress: () => setIsPickingTarget(false),
|
|
2741
|
+
children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
|
|
2742
|
+
}
|
|
2743
|
+
)
|
|
2744
|
+
] })
|
|
2745
|
+
] }) : /* @__PURE__ */ jsxs("div", { className: "group/dial flex min-w-0 flex-col gap-1", children: [
|
|
2746
|
+
/* @__PURE__ */ jsx("p", { className: "font-mono text-[10px] uppercase tracking-[0.08em] text-ink-4", children: "Calling" }),
|
|
2747
|
+
/* @__PURE__ */ jsxs("div", { className: "flex min-h-9 min-w-0 items-center gap-2", children: [
|
|
2748
|
+
(() => {
|
|
2749
|
+
const hasChoice = contacts.length > 1 || numbers.length > 1;
|
|
2750
|
+
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.";
|
|
2751
|
+
const valueClassName = cn(
|
|
2752
|
+
"min-w-0 truncate text-[12px] tabular-nums",
|
|
2753
|
+
phoneNumber ? "text-ink-2" : "text-warning"
|
|
2754
|
+
);
|
|
2755
|
+
const icon = /* @__PURE__ */ jsx(
|
|
2756
|
+
Phone,
|
|
2757
|
+
{
|
|
2758
|
+
className: cn(
|
|
2759
|
+
"size-3 shrink-0",
|
|
2760
|
+
phoneNumber ? "text-ink-4" : "text-warning"
|
|
2761
|
+
),
|
|
2762
|
+
"aria-hidden": true
|
|
2763
|
+
}
|
|
2764
|
+
);
|
|
2765
|
+
return hasChoice ? /* @__PURE__ */ jsxs(
|
|
2766
|
+
Button$1,
|
|
2767
|
+
{
|
|
2768
|
+
className: cn(
|
|
2769
|
+
"flex min-w-0 cursor-pointer items-center gap-2 rounded-sm text-left outline-none",
|
|
2770
|
+
"hover:text-ink focus-visible:shadow-[var(--shadow-focus)]"
|
|
2771
|
+
),
|
|
2772
|
+
onPress: () => setIsPickingTarget(true),
|
|
2773
|
+
children: [
|
|
2774
|
+
icon,
|
|
2775
|
+
/* @__PURE__ */ jsx("span", { className: valueClassName, title: phoneNumber, children: valueText })
|
|
2776
|
+
]
|
|
2777
|
+
}
|
|
2778
|
+
) : /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2779
|
+
icon,
|
|
2780
|
+
/* @__PURE__ */ jsx("span", { className: valueClassName, title: phoneNumber, children: valueText })
|
|
2781
|
+
] });
|
|
2782
|
+
})(),
|
|
2783
|
+
contacts.length > 1 || numbers.length > 1 ? /* @__PURE__ */ jsx(
|
|
2784
|
+
Button,
|
|
2785
|
+
{
|
|
2786
|
+
variant: "ghost",
|
|
2787
|
+
size: "icon-sm",
|
|
2788
|
+
"aria-label": "Change the number to dial",
|
|
2789
|
+
className: "opacity-0 transition-opacity group-hover/dial:opacity-100 focus-visible:opacity-100",
|
|
2790
|
+
onPress: () => setIsPickingTarget(true),
|
|
2791
|
+
children: /* @__PURE__ */ jsx(Pencil, { "aria-hidden": true })
|
|
2792
|
+
}
|
|
2793
|
+
) : null
|
|
2794
|
+
] })
|
|
2795
|
+
] }),
|
|
2796
|
+
controls
|
|
2797
|
+
] }),
|
|
2798
|
+
aside ? /* @__PURE__ */ jsx("div", { className: "min-h-0 min-w-0", children: aside }) : null
|
|
2799
|
+
]
|
|
2594
2800
|
}
|
|
2595
|
-
)
|
|
2596
|
-
controls,
|
|
2801
|
+
),
|
|
2597
2802
|
callDisabledReason ? /* @__PURE__ */ jsx("p", { className: "text-[12px] text-warning", children: callDisabledReason }) : null,
|
|
2598
2803
|
isCallButtonHidden ? null : /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsxs(
|
|
2599
2804
|
Button,
|
|
@@ -3615,6 +3820,8 @@ function DataTable({
|
|
|
3615
3820
|
onSortingChange,
|
|
3616
3821
|
rowHeight = DEFAULT_ROW_HEIGHT,
|
|
3617
3822
|
overscan = 8,
|
|
3823
|
+
scrollRestorationId,
|
|
3824
|
+
initialScrollOffset,
|
|
3618
3825
|
onRowClick,
|
|
3619
3826
|
zebra = true,
|
|
3620
3827
|
emptyState,
|
|
@@ -3777,7 +3984,10 @@ function DataTable({
|
|
|
3777
3984
|
return items;
|
|
3778
3985
|
}, [tableRows, groupBy]);
|
|
3779
3986
|
const scrollerRef = useRef(null);
|
|
3987
|
+
const mountedSorting = useRef(sorting);
|
|
3780
3988
|
useEffect(() => {
|
|
3989
|
+
if (sorting === mountedSorting.current) return;
|
|
3990
|
+
mountedSorting.current = sorting;
|
|
3781
3991
|
scrollerRef.current?.scrollTo({ top: 0 });
|
|
3782
3992
|
}, [sorting]);
|
|
3783
3993
|
const listRef = useRef(null);
|
|
@@ -3792,7 +4002,8 @@ function DataTable({
|
|
|
3792
4002
|
getScrollElement: () => scrollerRef.current,
|
|
3793
4003
|
estimateSize: (index) => listItems[index]?.kind === "group" ? headingHeight : rowHeight,
|
|
3794
4004
|
overscan,
|
|
3795
|
-
scrollMargin: listOffset
|
|
4005
|
+
scrollMargin: listOffset,
|
|
4006
|
+
...initialScrollOffset !== void 0 ? { initialOffset: initialScrollOffset } : {}
|
|
3796
4007
|
});
|
|
3797
4008
|
const sentinelRef = useInfiniteScrollSentinel({
|
|
3798
4009
|
onIntersect: () => {
|
|
@@ -3856,6 +4067,7 @@ function DataTable({
|
|
|
3856
4067
|
TableScroller,
|
|
3857
4068
|
{
|
|
3858
4069
|
ref: scrollerRef,
|
|
4070
|
+
...scrollRestorationId !== void 0 ? { "data-scroll-restoration-id": scrollRestorationId } : {},
|
|
3859
4071
|
className: cn("scroll-pt-[36px]", bodyAfter ? "scroll-pb-8" : void 0),
|
|
3860
4072
|
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", style: { minWidth: minPanelWidth }, children: [
|
|
3861
4073
|
headerGroups.map((group) => /* @__PURE__ */ jsxs(TableHeader, { sticky: true, children: [
|
|
@@ -3902,6 +4114,11 @@ function DataTable({
|
|
|
3902
4114
|
{
|
|
3903
4115
|
ref: listRef,
|
|
3904
4116
|
role: "presentation",
|
|
4117
|
+
"aria-busy": query.isPlaceholderData ? true : void 0,
|
|
4118
|
+
className: cn(
|
|
4119
|
+
"transition-opacity duration-150 motion-reduce:transition-none",
|
|
4120
|
+
query.isPlaceholderData && "opacity-50"
|
|
4121
|
+
),
|
|
3905
4122
|
style: { height: totalSize, position: "relative", width: "100%" },
|
|
3906
4123
|
children: virtualItems.map((vRow) => {
|
|
3907
4124
|
const item = listItems[vRow.index];
|
|
@@ -4088,7 +4305,7 @@ function CalendarGlyph() {
|
|
|
4088
4305
|
/* @__PURE__ */ jsx("path", { d: "M5.5 2V5M10.5 2V5", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })
|
|
4089
4306
|
] });
|
|
4090
4307
|
}
|
|
4091
|
-
function
|
|
4308
|
+
function ChevronLeft2() {
|
|
4092
4309
|
return /* @__PURE__ */ jsx("svg", { "aria-hidden": true, viewBox: "0 0 12 12", className: "size-3", fill: "none", children: /* @__PURE__ */ jsx(
|
|
4093
4310
|
"path",
|
|
4094
4311
|
{
|
|
@@ -4100,7 +4317,7 @@ function ChevronLeft() {
|
|
|
4100
4317
|
}
|
|
4101
4318
|
) });
|
|
4102
4319
|
}
|
|
4103
|
-
function
|
|
4320
|
+
function ChevronRight2() {
|
|
4104
4321
|
return /* @__PURE__ */ jsx("svg", { "aria-hidden": true, viewBox: "0 0 12 12", className: "size-3", fill: "none", children: /* @__PURE__ */ jsx(
|
|
4105
4322
|
"path",
|
|
4106
4323
|
{
|
|
@@ -4125,7 +4342,7 @@ function CalendarSurface() {
|
|
|
4125
4342
|
"text-ink-3 hover:text-ink hover:bg-surface-2 cursor-pointer outline-none",
|
|
4126
4343
|
"focus-visible:shadow-[var(--shadow-focus)]"
|
|
4127
4344
|
),
|
|
4128
|
-
children: /* @__PURE__ */ jsx(
|
|
4345
|
+
children: /* @__PURE__ */ jsx(ChevronLeft2, {})
|
|
4129
4346
|
}
|
|
4130
4347
|
),
|
|
4131
4348
|
/* @__PURE__ */ jsx(Heading, { className: "font-sans font-medium text-[14px] text-ink tracking-[-0.01em]" }),
|
|
@@ -4139,7 +4356,7 @@ function CalendarSurface() {
|
|
|
4139
4356
|
"text-ink-3 hover:text-ink hover:bg-surface-2 cursor-pointer outline-none",
|
|
4140
4357
|
"focus-visible:shadow-[var(--shadow-focus)]"
|
|
4141
4358
|
),
|
|
4142
|
-
children: /* @__PURE__ */ jsx(
|
|
4359
|
+
children: /* @__PURE__ */ jsx(ChevronRight2, {})
|
|
4143
4360
|
}
|
|
4144
4361
|
)
|
|
4145
4362
|
] }),
|
|
@@ -5768,7 +5985,7 @@ function VideoView({ name, src }) {
|
|
|
5768
5985
|
/* @__PURE__ */ jsx("video", { controls: true, src, "aria-label": name, className: "h-full w-full object-contain" })
|
|
5769
5986
|
);
|
|
5770
5987
|
}
|
|
5771
|
-
var PdfView = lazy(() => import('./pdf-view-
|
|
5988
|
+
var PdfView = lazy(() => import('./pdf-view-2QU4FI37.js'));
|
|
5772
5989
|
var fileViewerStyles = tv({
|
|
5773
5990
|
base: [
|
|
5774
5991
|
"relative flex w-full flex-col overflow-hidden",
|
|
@@ -5811,6 +6028,118 @@ function FileViewer({
|
|
|
5811
6028
|
const skeleton = /* @__PURE__ */ jsx(Skeleton, { "aria-label": `Loading preview of ${name}`, className: "h-full w-full rounded-none" });
|
|
5812
6029
|
return /* @__PURE__ */ jsx("div", { className: cn(fileViewerStyles(), className), style: { height: heightPx }, children: !src ? skeleton : kind === "image" ? /* @__PURE__ */ jsx(ImageView, { name, src, ...onDownload ? { onDownload } : {} }) : kind === "video" ? /* @__PURE__ */ jsx(VideoView, { name, src }) : /* @__PURE__ */ jsx(Suspense, { fallback: skeleton, children: /* @__PURE__ */ jsx(PdfView, { name, src, ...onDownload ? { onDownload } : {} }) }) });
|
|
5813
6030
|
}
|
|
6031
|
+
var glowFrameStyles = tv({
|
|
6032
|
+
slots: {
|
|
6033
|
+
room: "glow-room flex min-h-0 flex-col",
|
|
6034
|
+
frame: "glow-frame flex min-h-0 flex-1 flex-col"
|
|
6035
|
+
}
|
|
6036
|
+
});
|
|
6037
|
+
var FADE_MS = 700;
|
|
6038
|
+
var FLASH_MS = 900;
|
|
6039
|
+
var REROLL_MS = 250;
|
|
6040
|
+
var HUES = [1, 2, 3, 4, 5, 6];
|
|
6041
|
+
function GlowFrame({ status, className, children }) {
|
|
6042
|
+
const isWorking = status === "working";
|
|
6043
|
+
const { run, isResting } = useBeams(isWorking);
|
|
6044
|
+
const flash = useFlash(status);
|
|
6045
|
+
const strokesRef = useReroll(flash);
|
|
6046
|
+
const styles4 = glowFrameStyles();
|
|
6047
|
+
return /* @__PURE__ */ jsx("div", { className: cn(styles4.room(), className), children: /* @__PURE__ */ jsxs(
|
|
6048
|
+
"div",
|
|
6049
|
+
{
|
|
6050
|
+
className: styles4.frame(),
|
|
6051
|
+
"data-status": status,
|
|
6052
|
+
"data-working": isWorking ? "true" : "false",
|
|
6053
|
+
"data-flashing": flash !== 0 ? "true" : "false",
|
|
6054
|
+
children: [
|
|
6055
|
+
children,
|
|
6056
|
+
isResting ? null : /* @__PURE__ */ jsxs("div", { className: "glow-fx", "aria-hidden": "true", "data-glow": "beams", children: [
|
|
6057
|
+
/* @__PURE__ */ jsx("div", { className: "glow-orb", children: /* @__PURE__ */ jsx("div", { className: "glow-dot glow-a" }) }),
|
|
6058
|
+
/* @__PURE__ */ jsx("div", { className: "glow-orb", children: /* @__PURE__ */ jsx("div", { className: "glow-dot glow-b" }) }),
|
|
6059
|
+
/* @__PURE__ */ jsxs("div", { className: "glow-beams", children: [
|
|
6060
|
+
/* @__PURE__ */ jsx("div", { className: "glow-blob glow-tail glow-a" }),
|
|
6061
|
+
/* @__PURE__ */ jsx("div", { className: "glow-blob glow-lead glow-a" }),
|
|
6062
|
+
/* @__PURE__ */ jsx("div", { className: "glow-blob glow-tail glow-b" }),
|
|
6063
|
+
/* @__PURE__ */ jsx("div", { className: "glow-blob glow-lead glow-b" })
|
|
6064
|
+
] })
|
|
6065
|
+
] }, `beams-${run}`),
|
|
6066
|
+
flash !== 0 ? /* @__PURE__ */ jsxs(
|
|
6067
|
+
"div",
|
|
6068
|
+
{
|
|
6069
|
+
ref: strokesRef,
|
|
6070
|
+
className: "glow-flash",
|
|
6071
|
+
"aria-hidden": "true",
|
|
6072
|
+
"data-glow": "flash",
|
|
6073
|
+
children: [
|
|
6074
|
+
/* @__PURE__ */ jsx("div", { className: "glow-ring glow-ring-1" }),
|
|
6075
|
+
/* @__PURE__ */ jsx("div", { className: "glow-stroke glow-stroke-2", children: /* @__PURE__ */ jsx("div", { className: "glow-ring glow-ring-2" }) }),
|
|
6076
|
+
/* @__PURE__ */ jsx("div", { className: "glow-stroke glow-stroke-3", children: /* @__PURE__ */ jsx("div", { className: "glow-ring glow-ring-3" }) }),
|
|
6077
|
+
/* @__PURE__ */ jsx("div", { className: "glow-stroke glow-stroke-4", children: /* @__PURE__ */ jsx("div", { className: "glow-ring glow-ring-4" }) })
|
|
6078
|
+
]
|
|
6079
|
+
},
|
|
6080
|
+
`flash-${flash}`
|
|
6081
|
+
) : null
|
|
6082
|
+
]
|
|
6083
|
+
}
|
|
6084
|
+
) });
|
|
6085
|
+
}
|
|
6086
|
+
function useBeams(isWorking) {
|
|
6087
|
+
const [run, setRun] = useState(0);
|
|
6088
|
+
const [isResting, setIsResting] = useState(!isWorking);
|
|
6089
|
+
const wasWorking = useRef(isWorking);
|
|
6090
|
+
useEffect(() => {
|
|
6091
|
+
if (isWorking) {
|
|
6092
|
+
if (!wasWorking.current) setRun((n) => n + 1);
|
|
6093
|
+
wasWorking.current = true;
|
|
6094
|
+
setIsResting(false);
|
|
6095
|
+
return;
|
|
6096
|
+
}
|
|
6097
|
+
wasWorking.current = false;
|
|
6098
|
+
const timer = window.setTimeout(() => setIsResting(true), FADE_MS + 50);
|
|
6099
|
+
return () => window.clearTimeout(timer);
|
|
6100
|
+
}, [isWorking]);
|
|
6101
|
+
return { run, isResting };
|
|
6102
|
+
}
|
|
6103
|
+
function useFlash(status) {
|
|
6104
|
+
const [flash, setFlash] = useState(0);
|
|
6105
|
+
const previous = useRef(status);
|
|
6106
|
+
useEffect(() => {
|
|
6107
|
+
const was = previous.current;
|
|
6108
|
+
previous.current = status;
|
|
6109
|
+
if (!(was === "working" && status === "ready")) return;
|
|
6110
|
+
setFlash((n) => n + 1);
|
|
6111
|
+
}, [status]);
|
|
6112
|
+
useEffect(() => {
|
|
6113
|
+
if (flash === 0) return;
|
|
6114
|
+
const timer = window.setTimeout(() => setFlash(0), FLASH_MS);
|
|
6115
|
+
return () => window.clearTimeout(timer);
|
|
6116
|
+
}, [flash]);
|
|
6117
|
+
return flash;
|
|
6118
|
+
}
|
|
6119
|
+
function useReroll(flash) {
|
|
6120
|
+
const ref = useRef(null);
|
|
6121
|
+
useEffect(() => {
|
|
6122
|
+
if (flash === 0) return;
|
|
6123
|
+
if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
|
|
6124
|
+
const reroll = () => {
|
|
6125
|
+
const rings = ref.current?.querySelectorAll(".glow-ring");
|
|
6126
|
+
if (!rings) return;
|
|
6127
|
+
const stops = HUES.map((hue) => ({ hue, at: Math.random() * 100 })).sort(
|
|
6128
|
+
(a, b) => a.at - b.at
|
|
6129
|
+
);
|
|
6130
|
+
for (const ring of rings) {
|
|
6131
|
+
stops.forEach((stop, i) => {
|
|
6132
|
+
ring.style.setProperty(`--glow-p${i + 1}`, `${stop.at.toFixed(2)}%`);
|
|
6133
|
+
ring.style.setProperty(`--glow-k${i + 1}`, `var(--color-glow-${stop.hue})`);
|
|
6134
|
+
});
|
|
6135
|
+
}
|
|
6136
|
+
};
|
|
6137
|
+
reroll();
|
|
6138
|
+
const timer = window.setInterval(reroll, REROLL_MS);
|
|
6139
|
+
return () => window.clearInterval(timer);
|
|
6140
|
+
}, [flash]);
|
|
6141
|
+
return ref;
|
|
6142
|
+
}
|
|
5814
6143
|
var imageAttachmentStyles = tv({
|
|
5815
6144
|
base: [
|
|
5816
6145
|
"relative block overflow-hidden",
|
|
@@ -5952,7 +6281,7 @@ function MenuItem({ icon, hasSubmenu, children, className, ...props }) {
|
|
|
5952
6281
|
children: [
|
|
5953
6282
|
icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: icon }) : null,
|
|
5954
6283
|
/* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children }),
|
|
5955
|
-
hasSubmenu ? /* @__PURE__ */ jsx(ChevronRight
|
|
6284
|
+
hasSubmenu ? /* @__PURE__ */ jsx(ChevronRight, { className: "ml-2 size-3 shrink-0 text-ink-4" }) : null
|
|
5956
6285
|
]
|
|
5957
6286
|
}
|
|
5958
6287
|
);
|
|
@@ -8537,6 +8866,81 @@ function Separator({
|
|
|
8537
8866
|
}
|
|
8538
8867
|
);
|
|
8539
8868
|
}
|
|
8869
|
+
var stepperStyles = tv({
|
|
8870
|
+
slots: {
|
|
8871
|
+
root: "flex min-w-0 flex-wrap items-center gap-y-2 m-0 list-none p-0",
|
|
8872
|
+
item: "flex items-center",
|
|
8873
|
+
trigger: [
|
|
8874
|
+
"inline-flex items-center gap-[7px] rounded-sm border-0 bg-transparent p-0",
|
|
8875
|
+
"cursor-pointer select-none outline-none",
|
|
8876
|
+
"transition-colors duration-150",
|
|
8877
|
+
"data-[focus-visible]:shadow-[var(--shadow-focus)]",
|
|
8878
|
+
"data-[disabled]:cursor-default"
|
|
8879
|
+
],
|
|
8880
|
+
marker: [
|
|
8881
|
+
"grid size-[18px] shrink-0 place-items-center rounded-pill border-[1.5px]",
|
|
8882
|
+
"font-mono text-[10px] font-medium leading-none",
|
|
8883
|
+
"transition-[background-color,border-color,color] duration-150",
|
|
8884
|
+
"[&_svg]:size-[11px]"
|
|
8885
|
+
],
|
|
8886
|
+
label: "whitespace-nowrap text-[13px]",
|
|
8887
|
+
connector: "mx-2.5 h-px w-6 shrink-0 bg-rule"
|
|
8888
|
+
},
|
|
8889
|
+
variants: {
|
|
8890
|
+
orientation: {
|
|
8891
|
+
horizontal: {},
|
|
8892
|
+
vertical: {
|
|
8893
|
+
root: "flex-col flex-nowrap items-stretch gap-y-0",
|
|
8894
|
+
item: "flex-col items-start",
|
|
8895
|
+
// Centered under the 18px marker (9px in, minus half the line).
|
|
8896
|
+
connector: "mx-0 my-1 ml-[8.5px] h-4 w-px"
|
|
8897
|
+
}
|
|
8898
|
+
},
|
|
8899
|
+
state: {
|
|
8900
|
+
completed: {
|
|
8901
|
+
marker: "border-accent bg-accent text-surface",
|
|
8902
|
+
label: "text-ink-2 group-data-[hovered]:text-ink"
|
|
8903
|
+
},
|
|
8904
|
+
current: {
|
|
8905
|
+
marker: "border-accent bg-accent text-surface",
|
|
8906
|
+
label: "font-medium text-accent"
|
|
8907
|
+
},
|
|
8908
|
+
upcoming: {
|
|
8909
|
+
marker: "border-rule-strong bg-transparent text-ink-3",
|
|
8910
|
+
label: "text-ink-3 group-data-[hovered]:text-ink"
|
|
8911
|
+
}
|
|
8912
|
+
},
|
|
8913
|
+
isSelected: {
|
|
8914
|
+
true: { label: "underline decoration-accent/40 underline-offset-4" },
|
|
8915
|
+
false: {}
|
|
8916
|
+
}
|
|
8917
|
+
},
|
|
8918
|
+
defaultVariants: { orientation: "horizontal", state: "upcoming", isSelected: false }
|
|
8919
|
+
});
|
|
8920
|
+
function Stepper({ orientation, className, ...props }) {
|
|
8921
|
+
const { root } = stepperStyles({ orientation });
|
|
8922
|
+
return /* @__PURE__ */ jsx("ol", { ...props, className: cn(root(), className) });
|
|
8923
|
+
}
|
|
8924
|
+
function StepperStep({
|
|
8925
|
+
state,
|
|
8926
|
+
orientation,
|
|
8927
|
+
index,
|
|
8928
|
+
icon,
|
|
8929
|
+
isSelected = false,
|
|
8930
|
+
isLast = false,
|
|
8931
|
+
children,
|
|
8932
|
+
className,
|
|
8933
|
+
...props
|
|
8934
|
+
}) {
|
|
8935
|
+
const styles4 = stepperStyles({ orientation, state, isSelected });
|
|
8936
|
+
return /* @__PURE__ */ jsxs("li", { "aria-current": state === "current" ? "step" : void 0, className: styles4.item(), children: [
|
|
8937
|
+
/* @__PURE__ */ jsxs(Button$1, { ...props, className: cn("group", styles4.trigger(), className), children: [
|
|
8938
|
+
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles4.marker(), children: state === "completed" ? /* @__PURE__ */ jsx(Check, { strokeWidth: 2.5 }) : icon ?? index + 1 }),
|
|
8939
|
+
/* @__PURE__ */ jsx("span", { className: styles4.label(), children })
|
|
8940
|
+
] }),
|
|
8941
|
+
!isLast && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles4.connector() })
|
|
8942
|
+
] });
|
|
8943
|
+
}
|
|
8540
8944
|
function SuccessAnimation({ className }) {
|
|
8541
8945
|
return /* @__PURE__ */ jsx(
|
|
8542
8946
|
"div",
|
|
@@ -8820,6 +9224,100 @@ function TimeField({
|
|
|
8820
9224
|
}
|
|
8821
9225
|
);
|
|
8822
9226
|
}
|
|
9227
|
+
var timeSlotListStyles = tv({
|
|
9228
|
+
slots: {
|
|
9229
|
+
group: "flex flex-col gap-2",
|
|
9230
|
+
row: "flex gap-2 min-w-0",
|
|
9231
|
+
item: [
|
|
9232
|
+
"flex-1 min-h-9 px-3 inline-flex items-center justify-center cursor-pointer outline-none",
|
|
9233
|
+
"font-sans text-[13.5px] font-medium text-ink rounded-md",
|
|
9234
|
+
"bg-surface border border-rule-strong",
|
|
9235
|
+
"transition-[background-color,color,border-color,box-shadow] duration-150",
|
|
9236
|
+
"hovered:bg-surface-2 hovered:border-ink-3",
|
|
9237
|
+
"pressed:bg-surface-3",
|
|
9238
|
+
"selected:border-ink selected:bg-surface selected:shadow-[inset_0_0_0_1px_var(--color-ink)]",
|
|
9239
|
+
"selected:hovered:bg-surface",
|
|
9240
|
+
"data-[focus-visible]:shadow-[var(--shadow-focus)]",
|
|
9241
|
+
"selected:data-[focus-visible]:shadow-[var(--shadow-focus),inset_0_0_0_1px_var(--color-ink)]",
|
|
9242
|
+
// Taken while you looked: dashed and quiet.
|
|
9243
|
+
"data-[disabled]:border-dashed data-[disabled]:border-rule data-[disabled]:text-ink-4",
|
|
9244
|
+
"data-[disabled]:cursor-default data-[disabled]:bg-transparent"
|
|
9245
|
+
],
|
|
9246
|
+
confirm: "flex-1 min-h-9",
|
|
9247
|
+
empty: [
|
|
9248
|
+
"rounded-md border border-rule-2 bg-surface-2 px-4 py-5 text-center",
|
|
9249
|
+
"font-sans text-[13px] text-ink-3"
|
|
9250
|
+
]
|
|
9251
|
+
},
|
|
9252
|
+
variants: {
|
|
9253
|
+
columns: {
|
|
9254
|
+
1: { group: "grid grid-cols-1" },
|
|
9255
|
+
2: { group: "grid grid-cols-2" }
|
|
9256
|
+
}
|
|
9257
|
+
},
|
|
9258
|
+
defaultVariants: { columns: 1 }
|
|
9259
|
+
});
|
|
9260
|
+
function TimeSlotList({
|
|
9261
|
+
items,
|
|
9262
|
+
selectedId,
|
|
9263
|
+
onSelect,
|
|
9264
|
+
confirmLabel,
|
|
9265
|
+
onConfirm,
|
|
9266
|
+
emptyMessage = "Nothing available.",
|
|
9267
|
+
columns,
|
|
9268
|
+
autoFocus = false,
|
|
9269
|
+
isDisabled = false,
|
|
9270
|
+
className,
|
|
9271
|
+
orientation = "vertical",
|
|
9272
|
+
...props
|
|
9273
|
+
}) {
|
|
9274
|
+
const styles4 = timeSlotListStyles({ columns });
|
|
9275
|
+
if (items.length === 0) {
|
|
9276
|
+
return /* @__PURE__ */ jsx("div", { role: "status", className: cn(styles4.empty(), className), children: emptyMessage });
|
|
9277
|
+
}
|
|
9278
|
+
const focusTarget = selectedId ?? items.find((item) => !item.isDisabled)?.id ?? null;
|
|
9279
|
+
return /* @__PURE__ */ jsx(
|
|
9280
|
+
ToggleButtonGroup,
|
|
9281
|
+
{
|
|
9282
|
+
...props,
|
|
9283
|
+
orientation,
|
|
9284
|
+
selectionMode: "single",
|
|
9285
|
+
disallowEmptySelection: true,
|
|
9286
|
+
isDisabled,
|
|
9287
|
+
selectedKeys: selectedId === null ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([selectedId]),
|
|
9288
|
+
onSelectionChange: (keys) => {
|
|
9289
|
+
const [next] = Array.from(keys);
|
|
9290
|
+
if (next !== void 0) onSelect(next);
|
|
9291
|
+
},
|
|
9292
|
+
className: cn(styles4.group(), className),
|
|
9293
|
+
children: items.map((item) => {
|
|
9294
|
+
const isSelected = item.id === selectedId;
|
|
9295
|
+
return /* @__PURE__ */ jsxs("div", { className: styles4.row(), children: [
|
|
9296
|
+
/* @__PURE__ */ jsx(
|
|
9297
|
+
ToggleButton,
|
|
9298
|
+
{
|
|
9299
|
+
id: item.id,
|
|
9300
|
+
...item.isDisabled ? { isDisabled: true } : {},
|
|
9301
|
+
...autoFocus && item.id === focusTarget ? { autoFocus: true } : {},
|
|
9302
|
+
className: styles4.item(),
|
|
9303
|
+
children: item.label
|
|
9304
|
+
}
|
|
9305
|
+
),
|
|
9306
|
+
isSelected && confirmLabel && /* @__PURE__ */ jsx(
|
|
9307
|
+
Button,
|
|
9308
|
+
{
|
|
9309
|
+
variant: "cta",
|
|
9310
|
+
className: styles4.confirm(),
|
|
9311
|
+
isDisabled,
|
|
9312
|
+
onPress: () => onConfirm?.(item.id),
|
|
9313
|
+
children: confirmLabel
|
|
9314
|
+
}
|
|
9315
|
+
)
|
|
9316
|
+
] }, String(item.id));
|
|
9317
|
+
})
|
|
9318
|
+
}
|
|
9319
|
+
);
|
|
9320
|
+
}
|
|
8823
9321
|
function createToastQueue(options = {}) {
|
|
8824
9322
|
return new UNSTABLE_ToastQueue({ maxVisibleToasts: options.maxVisibleToasts ?? 3 });
|
|
8825
9323
|
}
|
|
@@ -8889,6 +9387,6 @@ function ToastRegion({ queue, className }) {
|
|
|
8889
9387
|
);
|
|
8890
9388
|
}
|
|
8891
9389
|
|
|
8892
|
-
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 };
|
|
9390
|
+
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, GlowFrame, 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, glowFrameStyles, 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 };
|
|
8893
9391
|
//# sourceMappingURL=index.js.map
|
|
8894
9392
|
//# sourceMappingURL=index.js.map
|