@estiva-app/ui 0.62.1 → 0.63.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/ComposerTriggers.d.ts +8 -2
- package/dist/ComposerTriggers.d.ts.map +1 -1
- package/dist/KindIcon.d.ts +30 -0
- package/dist/KindIcon.d.ts.map +1 -0
- package/dist/PastedImages.d.ts +33 -0
- package/dist/PastedImages.d.ts.map +1 -0
- package/dist/editor.d.ts +1 -0
- package/dist/editor.d.ts.map +1 -1
- package/dist/editor.js +74 -13
- package/dist/editor.js.map +4 -4
- package/dist/eslint/index.js +1 -0
- package/dist/eslint/index.js.map +2 -2
- package/dist/eslint/no-restyled-part.d.ts.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +236 -206
- package/dist/index.js.map +4 -4
- package/package.json +1 -1
- package/registry.json +148 -4
- package/src/ComposerTriggers.mdx +6 -4
- package/src/ComposerTriggers.test.tsx +30 -0
- package/src/ComposerTriggers.tsx +9 -3
- package/src/KindIcon.mdx +58 -0
- package/src/KindIcon.stories.tsx +64 -0
- package/src/KindIcon.tsx +64 -0
- package/src/PastedImages.mdx +61 -0
- package/src/PastedImages.stories.tsx +53 -0
- package/src/PastedImages.test.ts +83 -0
- package/src/PastedImages.ts +105 -0
- package/src/editor.ts +1 -0
- package/src/eslint/no-restyled-part.ts +1 -0
- package/src/index.ts +1 -0
- package/src/pages.test.ts +4 -1
- package/src/registry/registry.test.ts +6 -6
- package/stories/Choosing.mdx +2 -0
package/dist/index.js
CHANGED
|
@@ -2560,19 +2560,47 @@ function RichText({
|
|
|
2560
2560
|
return /* @__PURE__ */ jsx34("div", { "data-rich-text": true, className: richTextClassName(size), children: blocks.map((block, i) => /* @__PURE__ */ jsx34(Block, { block, draw }, block.id ?? i)) });
|
|
2561
2561
|
}
|
|
2562
2562
|
|
|
2563
|
+
// src/KindIcon.tsx
|
|
2564
|
+
import { IconBox, IconCircleDashed, IconFile as IconFile2, IconListDetails, IconMessage } from "@tabler/icons-react";
|
|
2565
|
+
import { jsx as jsx35 } from "react/jsx-runtime";
|
|
2566
|
+
var ICONS = {
|
|
2567
|
+
topic: IconCircleDashed,
|
|
2568
|
+
project: IconBox,
|
|
2569
|
+
issue: IconListDetails,
|
|
2570
|
+
file: IconFile2,
|
|
2571
|
+
message: IconMessage
|
|
2572
|
+
};
|
|
2573
|
+
var KIND_MESSAGE = 9;
|
|
2574
|
+
var KIND_CHANNEL = 39e3;
|
|
2575
|
+
var KIND_BARE_FILE = 30840;
|
|
2576
|
+
var KIND_PROJECT = 30850;
|
|
2577
|
+
var KIND_ISSUE = 30851;
|
|
2578
|
+
function thingKindOf(eventKind) {
|
|
2579
|
+
if (eventKind === KIND_MESSAGE) return "message";
|
|
2580
|
+
if (eventKind === KIND_CHANNEL || eventKind === KIND_BARE_FILE) return "topic";
|
|
2581
|
+
if (eventKind === KIND_PROJECT) return "project";
|
|
2582
|
+
if (eventKind === KIND_ISSUE) return "issue";
|
|
2583
|
+
return "file";
|
|
2584
|
+
}
|
|
2585
|
+
var TONE_CLASSES = { secondary: "text-text-secondary", inherit: "" };
|
|
2586
|
+
function KindIcon({ kind, size = 16, tone = "secondary", className }) {
|
|
2587
|
+
const Icon = ICONS[kind];
|
|
2588
|
+
return /* @__PURE__ */ jsx35(Icon, { size, stroke: 1.5, className: cn("shrink-0", TONE_CLASSES[tone], className), "aria-hidden": true });
|
|
2589
|
+
}
|
|
2590
|
+
|
|
2563
2591
|
// src/IdentityMenu.tsx
|
|
2564
2592
|
import { useCallback as useCallback2, useRef as useRef8 } from "react";
|
|
2565
2593
|
|
|
2566
2594
|
// src/Person.tsx
|
|
2567
|
-
import { jsx as
|
|
2595
|
+
import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2568
2596
|
function Person({ name, picture, fallback = "\u2014", size = 20, className }) {
|
|
2569
2597
|
return (
|
|
2570
2598
|
// gap-2: the face-to-name distance is one rule (8px) wherever a person
|
|
2571
2599
|
// appears — Katerina, 2026-09-01, set on Person so PersonTrigger and every
|
|
2572
2600
|
// row agree by construction.
|
|
2573
2601
|
/* @__PURE__ */ jsxs26("span", { className: cn("flex min-w-0 items-center gap-2", className), children: [
|
|
2574
|
-
/* @__PURE__ */
|
|
2575
|
-
/* @__PURE__ */
|
|
2602
|
+
/* @__PURE__ */ jsx36(Avatar, { name, src: picture, size }),
|
|
2603
|
+
/* @__PURE__ */ jsx36("span", { className: cn("truncate", !name && "text-text-muted"), children: name ?? fallback })
|
|
2576
2604
|
] })
|
|
2577
2605
|
);
|
|
2578
2606
|
}
|
|
@@ -2580,10 +2608,10 @@ function Person({ name, picture, fallback = "\u2014", size = 20, className }) {
|
|
|
2580
2608
|
// src/PersonTrigger.tsx
|
|
2581
2609
|
import { Button as BaseButton7 } from "@base-ui/react/button";
|
|
2582
2610
|
import { IconChevronDown as IconChevronDown2 } from "@tabler/icons-react";
|
|
2583
|
-
import { jsx as
|
|
2611
|
+
import { jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2584
2612
|
function PersonTrigger({ name, picture, fallback, size, open = false, compact = false, className, ...props }) {
|
|
2585
2613
|
if (compact) {
|
|
2586
|
-
return /* @__PURE__ */
|
|
2614
|
+
return /* @__PURE__ */ jsx37(
|
|
2587
2615
|
BaseButton7,
|
|
2588
2616
|
{
|
|
2589
2617
|
type: "button",
|
|
@@ -2592,7 +2620,7 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
|
|
|
2592
2620
|
"aria-label": props["aria-label"] ?? name ?? fallback,
|
|
2593
2621
|
className: cn("cursor-pointer rounded-full", className),
|
|
2594
2622
|
...props,
|
|
2595
|
-
children: /* @__PURE__ */
|
|
2623
|
+
children: /* @__PURE__ */ jsx37(Avatar, { name, src: picture, size: size ?? 36 })
|
|
2596
2624
|
}
|
|
2597
2625
|
);
|
|
2598
2626
|
}
|
|
@@ -2616,8 +2644,8 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
|
|
|
2616
2644
|
),
|
|
2617
2645
|
...props,
|
|
2618
2646
|
children: [
|
|
2619
|
-
/* @__PURE__ */
|
|
2620
|
-
/* @__PURE__ */
|
|
2647
|
+
/* @__PURE__ */ jsx37(Person, { name, picture, fallback, size: size ?? 22 }),
|
|
2648
|
+
/* @__PURE__ */ jsx37(IconChevronDown2, { size: 14, stroke: 1.5, className: "shrink-0 text-text-muted" })
|
|
2621
2649
|
]
|
|
2622
2650
|
}
|
|
2623
2651
|
)
|
|
@@ -2625,10 +2653,10 @@ function PersonTrigger({ name, picture, fallback, size, open = false, compact =
|
|
|
2625
2653
|
}
|
|
2626
2654
|
|
|
2627
2655
|
// src/IdentityMenu.tsx
|
|
2628
|
-
import { Fragment as Fragment9, jsx as
|
|
2656
|
+
import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
2629
2657
|
function IdentityPanel({ className, onClose = () => {
|
|
2630
2658
|
}, ...rest }) {
|
|
2631
|
-
return /* @__PURE__ */
|
|
2659
|
+
return /* @__PURE__ */ jsx38(MenuPanel, { className: cn("w-72", className), children: /* @__PURE__ */ jsx38(IdentityRows, { ...rest, onClose }) });
|
|
2632
2660
|
}
|
|
2633
2661
|
function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, onClose, children }) {
|
|
2634
2662
|
const act = (action) => () => {
|
|
@@ -2638,34 +2666,34 @@ function IdentityRows({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, on
|
|
|
2638
2666
|
const appRows = typeof children === "function" ? children(onClose) : children;
|
|
2639
2667
|
return /* @__PURE__ */ jsxs28(Fragment9, { children: [
|
|
2640
2668
|
/* @__PURE__ */ jsxs28(MenuSection, { label: signedIn ? "Signed in as" : "Acting as", children: [
|
|
2641
|
-
/* @__PURE__ */
|
|
2642
|
-
/* @__PURE__ */
|
|
2669
|
+
/* @__PURE__ */ jsx38(MenuRow, { children: /* @__PURE__ */ jsx38("div", { className: "flex min-w-0 text-body-2-strong", children: /* @__PURE__ */ jsx38(Person, { name: me.name, picture: me.picture, fallback: "Anonymous", size: 28 }) }) }),
|
|
2670
|
+
/* @__PURE__ */ jsx38(Note, { children: signedIn ? "Your Estiva ID. The same person you are in every Estiva app." : "A key held by this browser only. Nobody else knows who you are." }),
|
|
2643
2671
|
me.email && /* @__PURE__ */ jsxs28(Note, { children: [
|
|
2644
2672
|
me.email,
|
|
2645
2673
|
" \xB7 known to Estiva, never published to the relay"
|
|
2646
2674
|
] })
|
|
2647
2675
|
] }),
|
|
2648
2676
|
relayUrl && /* @__PURE__ */ jsxs28(Fragment9, { children: [
|
|
2649
|
-
/* @__PURE__ */
|
|
2677
|
+
/* @__PURE__ */ jsx38(Divider, { className: "mx-0 my-2" }),
|
|
2650
2678
|
/* @__PURE__ */ jsxs28(MenuSection, { label: "Workspace", children: [
|
|
2651
|
-
/* @__PURE__ */
|
|
2652
|
-
/* @__PURE__ */
|
|
2679
|
+
/* @__PURE__ */ jsx38(MenuRow, { children: /* @__PURE__ */ jsx38("span", { className: "break-all font-mono text-caption text-text-primary", children: relayUrl }) }),
|
|
2680
|
+
/* @__PURE__ */ jsx38(Note, { children: "Everyone on this relay shares this workspace, in every app." })
|
|
2653
2681
|
] })
|
|
2654
2682
|
] }),
|
|
2655
2683
|
appRows && /* @__PURE__ */ jsxs28(Fragment9, { children: [
|
|
2656
|
-
/* @__PURE__ */
|
|
2684
|
+
/* @__PURE__ */ jsx38(Divider, { className: "mx-0 my-2" }),
|
|
2657
2685
|
appRows
|
|
2658
2686
|
] }),
|
|
2659
|
-
signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */
|
|
2660
|
-
signedIn && idBase && /* @__PURE__ */
|
|
2687
|
+
signedIn && idBase || onCopyKey || idBase && onSignOut ? /* @__PURE__ */ jsx38(Divider, { className: "mx-0 my-2" }) : null,
|
|
2688
|
+
signedIn && idBase && /* @__PURE__ */ jsx38(
|
|
2661
2689
|
MenuItem,
|
|
2662
2690
|
{
|
|
2663
2691
|
label: "Edit your profile in Estiva ID",
|
|
2664
2692
|
onClick: act(() => window.open(idBase, "_blank", "noopener,noreferrer"))
|
|
2665
2693
|
}
|
|
2666
2694
|
),
|
|
2667
|
-
onCopyKey && /* @__PURE__ */
|
|
2668
|
-
idBase && onSignOut && /* @__PURE__ */
|
|
2695
|
+
onCopyKey && /* @__PURE__ */ jsx38(MenuItem, { label: "Copy public key", onClick: act(onCopyKey) }),
|
|
2696
|
+
idBase && onSignOut && /* @__PURE__ */ jsx38(MenuItem, { label: "Sign out", onClick: act(onSignOut) })
|
|
2669
2697
|
] });
|
|
2670
2698
|
}
|
|
2671
2699
|
function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, compact = false, className, children }) {
|
|
@@ -2676,13 +2704,13 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
|
|
|
2676
2704
|
to be `relative`, because the panel was positioned against it; the panel
|
|
2677
2705
|
hangs from the trigger and portals now, so a positioning context here
|
|
2678
2706
|
would only be a lie about what this box does. */
|
|
2679
|
-
/* @__PURE__ */
|
|
2707
|
+
/* @__PURE__ */ jsx38("div", { className, children: /* @__PURE__ */ jsx38(
|
|
2680
2708
|
Menu,
|
|
2681
2709
|
{
|
|
2682
2710
|
align: "right",
|
|
2683
2711
|
actionsRef: actions,
|
|
2684
2712
|
className: "w-72",
|
|
2685
|
-
trigger: /* @__PURE__ */
|
|
2713
|
+
trigger: /* @__PURE__ */ jsx38(
|
|
2686
2714
|
PersonTrigger,
|
|
2687
2715
|
{
|
|
2688
2716
|
name: me.name,
|
|
@@ -2693,7 +2721,7 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
|
|
|
2693
2721
|
"aria-label": compact ? "Account menu" : void 0
|
|
2694
2722
|
}
|
|
2695
2723
|
),
|
|
2696
|
-
children: /* @__PURE__ */
|
|
2724
|
+
children: /* @__PURE__ */ jsx38(
|
|
2697
2725
|
IdentityRows,
|
|
2698
2726
|
{
|
|
2699
2727
|
me,
|
|
@@ -2711,14 +2739,14 @@ function IdentityMenu({ me, signedIn, relayUrl, idBase, onCopyKey, onSignOut, co
|
|
|
2711
2739
|
);
|
|
2712
2740
|
}
|
|
2713
2741
|
function Note({ children }) {
|
|
2714
|
-
return /* @__PURE__ */
|
|
2742
|
+
return /* @__PURE__ */ jsx38("span", { className: "px-2 pb-1.5 text-caption text-text-secondary", children });
|
|
2715
2743
|
}
|
|
2716
2744
|
|
|
2717
2745
|
// src/FilePicker.tsx
|
|
2718
2746
|
import { forwardRef } from "react";
|
|
2719
|
-
import { jsx as
|
|
2747
|
+
import { jsx as jsx39 } from "react/jsx-runtime";
|
|
2720
2748
|
var FilePicker = forwardRef(function FilePicker2({ onPick, ...props }, ref) {
|
|
2721
|
-
return /* @__PURE__ */
|
|
2749
|
+
return /* @__PURE__ */ jsx39(
|
|
2722
2750
|
"input",
|
|
2723
2751
|
{
|
|
2724
2752
|
ref,
|
|
@@ -2739,7 +2767,7 @@ var FilePicker = forwardRef(function FilePicker2({ onPick, ...props }, ref) {
|
|
|
2739
2767
|
// src/Select.tsx
|
|
2740
2768
|
import { IconCheck as IconCheck2, IconChevronDown as IconChevronDown3 } from "@tabler/icons-react";
|
|
2741
2769
|
import { Select as BaseSelect } from "@base-ui/react/select";
|
|
2742
|
-
import { jsx as
|
|
2770
|
+
import { jsx as jsx40, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2743
2771
|
var GAP4 = 4;
|
|
2744
2772
|
var VIEWPORT_PAD4 = 8;
|
|
2745
2773
|
function Select({ value, onChange, options, size = "default", ariaLabel, placeholder = "Select\u2026", disabled, disabledReason, className, ...aria }) {
|
|
@@ -2781,13 +2809,13 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
|
|
|
2781
2809
|
),
|
|
2782
2810
|
children: [
|
|
2783
2811
|
/* @__PURE__ */ jsxs29("span", { className: cn("flex min-w-0 items-center gap-2", !selected && "text-text-muted"), children: [
|
|
2784
|
-
selected?.leading && /* @__PURE__ */
|
|
2785
|
-
/* @__PURE__ */
|
|
2812
|
+
selected?.leading && /* @__PURE__ */ jsx40("span", { className: "flex shrink-0 items-center", children: selected.leading }),
|
|
2813
|
+
/* @__PURE__ */ jsx40(BaseSelect.Value, { className: "truncate", children: () => selected?.label ?? placeholder })
|
|
2786
2814
|
] }),
|
|
2787
|
-
/* @__PURE__ */
|
|
2815
|
+
/* @__PURE__ */ jsx40(
|
|
2788
2816
|
BaseSelect.Icon,
|
|
2789
2817
|
{
|
|
2790
|
-
render: /* @__PURE__ */
|
|
2818
|
+
render: /* @__PURE__ */ jsx40(IconChevronDown3, { size: size === "small" ? 14 : 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
|
|
2791
2819
|
}
|
|
2792
2820
|
)
|
|
2793
2821
|
]
|
|
@@ -2806,8 +2834,8 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
|
|
|
2806
2834
|
disabled: disabled && !held,
|
|
2807
2835
|
modal: false,
|
|
2808
2836
|
children: [
|
|
2809
|
-
held ? /* @__PURE__ */
|
|
2810
|
-
/* @__PURE__ */
|
|
2837
|
+
held ? /* @__PURE__ */ jsx40(TooltipTrigger, { label: disabledReason ?? "", children: trigger }) : trigger,
|
|
2838
|
+
/* @__PURE__ */ jsx40(BaseSelect.Portal, { children: /* @__PURE__ */ jsx40(
|
|
2811
2839
|
BaseSelect.Positioner,
|
|
2812
2840
|
{
|
|
2813
2841
|
side: "bottom",
|
|
@@ -2816,25 +2844,25 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
|
|
|
2816
2844
|
collisionPadding: VIEWPORT_PAD4,
|
|
2817
2845
|
alignItemWithTrigger: false,
|
|
2818
2846
|
className: "z-50 data-[anchor-hidden]:hidden",
|
|
2819
|
-
children: /* @__PURE__ */
|
|
2847
|
+
children: /* @__PURE__ */ jsx40(
|
|
2820
2848
|
BaseSelect.Popup,
|
|
2821
2849
|
{
|
|
2822
|
-
render: /* @__PURE__ */
|
|
2850
|
+
render: /* @__PURE__ */ jsx40(MenuPanel, {}),
|
|
2823
2851
|
className: "min-w-[var(--anchor-width)] p-0",
|
|
2824
|
-
children: /* @__PURE__ */
|
|
2852
|
+
children: /* @__PURE__ */ jsx40(ScrollArea, { viewportClassName: "max-h-[min(288px,var(--available-height))]", contentClassName: "flex flex-col gap-0.5 p-2", children: options.map((option) => /* @__PURE__ */ jsxs29(
|
|
2825
2853
|
BaseSelect.Item,
|
|
2826
2854
|
{
|
|
2827
2855
|
value: option.value,
|
|
2828
2856
|
className: cn(menuItemClassName({ size: "default" }), "justify-between data-[selected]:font-medium"),
|
|
2829
2857
|
children: [
|
|
2830
2858
|
/* @__PURE__ */ jsxs29("span", { className: "flex min-w-0 items-center gap-2", children: [
|
|
2831
|
-
option.leading && /* @__PURE__ */
|
|
2832
|
-
/* @__PURE__ */
|
|
2859
|
+
option.leading && /* @__PURE__ */ jsx40("span", { className: "flex shrink-0 items-center", children: option.leading }),
|
|
2860
|
+
/* @__PURE__ */ jsx40(BaseSelect.ItemText, { className: "truncate text-body-2 text-text-primary", children: option.label })
|
|
2833
2861
|
] }),
|
|
2834
|
-
/* @__PURE__ */
|
|
2862
|
+
/* @__PURE__ */ jsx40(
|
|
2835
2863
|
BaseSelect.ItemIndicator,
|
|
2836
2864
|
{
|
|
2837
|
-
render: /* @__PURE__ */
|
|
2865
|
+
render: /* @__PURE__ */ jsx40(IconCheck2, { size: 16, stroke: 1.5, className: "shrink-0 text-text-secondary" })
|
|
2838
2866
|
}
|
|
2839
2867
|
)
|
|
2840
2868
|
]
|
|
@@ -2853,9 +2881,9 @@ function Select({ value, onChange, options, size = "default", ariaLabel, placeho
|
|
|
2853
2881
|
// src/TextInput.tsx
|
|
2854
2882
|
import { forwardRef as forwardRef2 } from "react";
|
|
2855
2883
|
import { Input } from "@base-ui/react/input";
|
|
2856
|
-
import { jsx as
|
|
2884
|
+
import { jsx as jsx41 } from "react/jsx-runtime";
|
|
2857
2885
|
var TextInput = forwardRef2(function TextInput2({ className, type = "text", size = "default", ...props }, ref) {
|
|
2858
|
-
return /* @__PURE__ */
|
|
2886
|
+
return /* @__PURE__ */ jsx41(
|
|
2859
2887
|
Input,
|
|
2860
2888
|
{
|
|
2861
2889
|
ref,
|
|
@@ -2881,13 +2909,13 @@ var TextInput = forwardRef2(function TextInput2({ className, type = "text", size
|
|
|
2881
2909
|
// src/Textarea.tsx
|
|
2882
2910
|
import { forwardRef as forwardRef3 } from "react";
|
|
2883
2911
|
import { Field as BaseField3 } from "@base-ui/react/field";
|
|
2884
|
-
import { jsx as
|
|
2912
|
+
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
2885
2913
|
var Textarea = forwardRef3(function Textarea2({ className, ...props }, ref) {
|
|
2886
|
-
return /* @__PURE__ */
|
|
2914
|
+
return /* @__PURE__ */ jsx42(
|
|
2887
2915
|
BaseField3.Control,
|
|
2888
2916
|
{
|
|
2889
2917
|
ref,
|
|
2890
|
-
render: /* @__PURE__ */
|
|
2918
|
+
render: /* @__PURE__ */ jsx42("textarea", {}),
|
|
2891
2919
|
className: cn(
|
|
2892
2920
|
// The border strengthens on hover, as Select's and ChipInput's do (Katerina, 16 September:
|
|
2893
2921
|
// "aren't there hover states in text input and text area?"). Focus comes after hover in
|
|
@@ -2907,7 +2935,7 @@ var Textarea = forwardRef3(function Textarea2({ className, ...props }, ref) {
|
|
|
2907
2935
|
|
|
2908
2936
|
// src/ConfirmDialog.tsx
|
|
2909
2937
|
import { useState as useState6 } from "react";
|
|
2910
|
-
import { Fragment as Fragment10, jsx as
|
|
2938
|
+
import { Fragment as Fragment10, jsx as jsx43, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
2911
2939
|
function ConfirmDialog({ title, children, confirmLabel, destructive = false, onConfirm, onClose }) {
|
|
2912
2940
|
const [busy, setBusy] = useState6(false);
|
|
2913
2941
|
const confirm = async () => {
|
|
@@ -2919,17 +2947,17 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
|
|
|
2919
2947
|
setBusy(false);
|
|
2920
2948
|
}
|
|
2921
2949
|
};
|
|
2922
|
-
return /* @__PURE__ */
|
|
2950
|
+
return /* @__PURE__ */ jsx43(
|
|
2923
2951
|
DialogShell,
|
|
2924
2952
|
{
|
|
2925
2953
|
alert: true,
|
|
2926
2954
|
title,
|
|
2927
2955
|
onClose,
|
|
2928
2956
|
footer: /* @__PURE__ */ jsxs30(Fragment10, { children: [
|
|
2929
|
-
/* @__PURE__ */
|
|
2930
|
-
/* @__PURE__ */
|
|
2957
|
+
/* @__PURE__ */ jsx43(Button, { variant: "muted", onClick: onClose, disabled: busy, children: "Cancel" }),
|
|
2958
|
+
/* @__PURE__ */ jsx43(Button, { variant: destructive ? "destructive" : "primary", onClick: () => void confirm(), disabled: busy, children: confirmLabel })
|
|
2931
2959
|
] }),
|
|
2932
|
-
children: /* @__PURE__ */
|
|
2960
|
+
children: /* @__PURE__ */ jsx43("div", { className: "flex flex-col gap-3 text-body-2 text-text-primary", children })
|
|
2933
2961
|
}
|
|
2934
2962
|
);
|
|
2935
2963
|
}
|
|
@@ -2938,7 +2966,7 @@ function ConfirmDialog({ title, children, confirmLabel, destructive = false, onC
|
|
|
2938
2966
|
import { useEffect as useEffect5, useRef as useRef9, useState as useState7 } from "react";
|
|
2939
2967
|
import { Field as BaseField4 } from "@base-ui/react/field";
|
|
2940
2968
|
import { Input as Input2 } from "@base-ui/react/input";
|
|
2941
|
-
import { jsx as
|
|
2969
|
+
import { jsx as jsx44 } from "react/jsx-runtime";
|
|
2942
2970
|
function EditableText({ value, display, displayNode, placeholder, onCommit, multiline = false, className, label, readOnly = false }) {
|
|
2943
2971
|
const [editing, setEditing] = useState7(false);
|
|
2944
2972
|
const [draft, setDraft] = useState7(value);
|
|
@@ -2996,7 +3024,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
|
|
|
2996
3024
|
written and never read. Read-only, this is a line of text: whatever
|
|
2997
3025
|
names the region around it (a `Field`, a `Property`) names this too.
|
|
2998
3026
|
*/
|
|
2999
|
-
/* @__PURE__ */
|
|
3027
|
+
/* @__PURE__ */ jsx44(
|
|
3000
3028
|
"div",
|
|
3001
3029
|
{
|
|
3002
3030
|
className: cn("w-full px-2 py-1", multiline && !displayNode && "whitespace-pre-wrap", display ?? value ? "text-text-primary" : "text-text-muted", className),
|
|
@@ -3006,11 +3034,11 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
|
|
|
3006
3034
|
);
|
|
3007
3035
|
}
|
|
3008
3036
|
if (editing) {
|
|
3009
|
-
return multiline ? /* @__PURE__ */
|
|
3037
|
+
return multiline ? /* @__PURE__ */ jsx44(
|
|
3010
3038
|
BaseField4.Control,
|
|
3011
3039
|
{
|
|
3012
3040
|
ref: fieldRef,
|
|
3013
|
-
render: /* @__PURE__ */
|
|
3041
|
+
render: /* @__PURE__ */ jsx44("textarea", { rows: 4 }),
|
|
3014
3042
|
"aria-label": label,
|
|
3015
3043
|
value: draft,
|
|
3016
3044
|
disabled: busy,
|
|
@@ -3019,7 +3047,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
|
|
|
3019
3047
|
onBlur: () => void commit(),
|
|
3020
3048
|
className: fieldClass
|
|
3021
3049
|
}
|
|
3022
|
-
) : /* @__PURE__ */
|
|
3050
|
+
) : /* @__PURE__ */ jsx44(
|
|
3023
3051
|
Input2,
|
|
3024
3052
|
{
|
|
3025
3053
|
ref: fieldRef,
|
|
@@ -3033,7 +3061,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
|
|
|
3033
3061
|
}
|
|
3034
3062
|
);
|
|
3035
3063
|
}
|
|
3036
|
-
return /* @__PURE__ */
|
|
3064
|
+
return /* @__PURE__ */ jsx44(
|
|
3037
3065
|
"button",
|
|
3038
3066
|
{
|
|
3039
3067
|
type: "button",
|
|
@@ -3053,7 +3081,7 @@ function EditableText({ value, display, displayNode, placeholder, onCommit, mult
|
|
|
3053
3081
|
// src/ErrorBoundary.tsx
|
|
3054
3082
|
import { Component } from "react";
|
|
3055
3083
|
import { IconAlertTriangle as IconAlertTriangle2 } from "@tabler/icons-react";
|
|
3056
|
-
import { jsx as
|
|
3084
|
+
import { jsx as jsx45 } from "react/jsx-runtime";
|
|
3057
3085
|
var ErrorBoundary = class extends Component {
|
|
3058
3086
|
state = { hasError: false };
|
|
3059
3087
|
static getDerivedStateFromError() {
|
|
@@ -3064,22 +3092,22 @@ var ErrorBoundary = class extends Component {
|
|
|
3064
3092
|
}
|
|
3065
3093
|
render() {
|
|
3066
3094
|
if (!this.state.hasError) return this.props.children;
|
|
3067
|
-
const message = /* @__PURE__ */
|
|
3095
|
+
const message = /* @__PURE__ */ jsx45(
|
|
3068
3096
|
EmptyState,
|
|
3069
3097
|
{
|
|
3070
|
-
icon: /* @__PURE__ */
|
|
3098
|
+
icon: /* @__PURE__ */ jsx45(IconAlertTriangle2, { size: 16, stroke: 1.5 }),
|
|
3071
3099
|
message: `Something went wrong${this.props.label ? ` in the ${this.props.label}` : ""}. Your data is safe \u2014 try again.`,
|
|
3072
3100
|
action: { label: "Try again", onClick: () => this.setState({ hasError: false }) }
|
|
3073
3101
|
}
|
|
3074
3102
|
);
|
|
3075
3103
|
if (this.props.frame) return this.props.frame(message);
|
|
3076
|
-
return this.props.fallbackClassName ? /* @__PURE__ */
|
|
3104
|
+
return this.props.fallbackClassName ? /* @__PURE__ */ jsx45("div", { className: this.props.fallbackClassName, children: message }) : message;
|
|
3077
3105
|
}
|
|
3078
3106
|
};
|
|
3079
3107
|
|
|
3080
3108
|
// src/ProgressBar.tsx
|
|
3081
3109
|
import { Progress } from "@base-ui/react/progress";
|
|
3082
|
-
import { jsx as
|
|
3110
|
+
import { jsx as jsx46 } from "react/jsx-runtime";
|
|
3083
3111
|
var TRACK_CLASSES = {
|
|
3084
3112
|
default: "h-1.5 w-full overflow-hidden rounded-full bg-bg-inset",
|
|
3085
3113
|
// 4px, Katerina's ruling of 14 September; Peek's own bar is 3px until it takes this one.
|
|
@@ -3092,13 +3120,13 @@ var INDICATOR_CLASSES = {
|
|
|
3092
3120
|
function ProgressBar({ value, max, label, variant = "default", className }) {
|
|
3093
3121
|
return (
|
|
3094
3122
|
// `max={0}` needs no guard: Base UI reads the 0/0 share as an empty bar.
|
|
3095
|
-
/* @__PURE__ */
|
|
3123
|
+
/* @__PURE__ */ jsx46(Progress.Root, { value, max, "aria-label": label, className, children: /* @__PURE__ */ jsx46(Progress.Track, { className: TRACK_CLASSES[variant], children: /* @__PURE__ */ jsx46(Progress.Indicator, { className: INDICATOR_CLASSES[variant] }) }) })
|
|
3096
3124
|
);
|
|
3097
3125
|
}
|
|
3098
3126
|
|
|
3099
3127
|
// src/Breadcrumb.tsx
|
|
3100
3128
|
import { Fragment as Fragment11, useCallback as useCallback3, useLayoutEffect as useLayoutEffect4, useRef as useRef10, useState as useState8 } from "react";
|
|
3101
|
-
import { jsx as
|
|
3129
|
+
import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
3102
3130
|
function Breadcrumb({ items, className }) {
|
|
3103
3131
|
const navRef = useRef10(null);
|
|
3104
3132
|
const labelRefs = useRef10([]);
|
|
@@ -3118,7 +3146,7 @@ function Breadcrumb({ items, className }) {
|
|
|
3118
3146
|
observer.observe(nav);
|
|
3119
3147
|
return () => observer.disconnect();
|
|
3120
3148
|
}, [measure, items]);
|
|
3121
|
-
return /* @__PURE__ */
|
|
3149
|
+
return /* @__PURE__ */ jsx47("nav", { ref: navRef, "aria-label": "Breadcrumb", className: cn("flex min-w-0 items-center gap-1.5 text-body-2", className), children: items.map((item, index) => {
|
|
3122
3150
|
const last = index === items.length - 1;
|
|
3123
3151
|
const tone = item.muted || last && item.mono ? "text-text-muted" : last ? "text-text-primary" : "text-text-secondary";
|
|
3124
3152
|
const text = cn(
|
|
@@ -3139,16 +3167,16 @@ function Breadcrumb({ items, className }) {
|
|
|
3139
3167
|
// on a box around it, which the link takes them from, rather than
|
|
3140
3168
|
// pushed into it (UIG-9); the link is still the one element that
|
|
3141
3169
|
// truncates and is measured.
|
|
3142
|
-
/* @__PURE__ */
|
|
3143
|
-
) : /* @__PURE__ */
|
|
3170
|
+
/* @__PURE__ */ jsx47("span", { className: cn("flex min-w-0", item.mono && "shrink-0 font-mono text-caption", tone, "hover:text-text-primary"), children: /* @__PURE__ */ jsx47(Link, { ref: setLabelRef, variant: "plain", truncate: true, href: item.href, onClick: item.onClick, children: item.label }) })
|
|
3171
|
+
) : /* @__PURE__ */ jsx47("span", { ref: setLabelRef, className: text, "aria-current": last ? "page" : void 0, children: item.label });
|
|
3144
3172
|
return /* @__PURE__ */ jsxs31(Fragment11, { children: [
|
|
3145
|
-
index > 0 && /* @__PURE__ */
|
|
3146
|
-
item.icon && /* @__PURE__ */
|
|
3173
|
+
index > 0 && /* @__PURE__ */ jsx47("span", { "aria-hidden": "true", className: "shrink-0 text-text-muted", children: "/" }),
|
|
3174
|
+
item.icon && /* @__PURE__ */ jsx47("span", { "aria-hidden": "true", className: cn("flex shrink-0", tone), children: item.icon }),
|
|
3147
3175
|
truncated.has(index) ? (
|
|
3148
3176
|
// `min-w-0 shrink` undoes the wrapper's own shrink-0 — the crumb
|
|
3149
3177
|
// must keep truncating inside it, or wrapping it would widen the
|
|
3150
3178
|
// trail and the tooltip would never be needed again.
|
|
3151
|
-
/* @__PURE__ */
|
|
3179
|
+
/* @__PURE__ */ jsx47(WithTooltip, { label: item.label, wrapperClassName: "min-w-0 shrink", children: crumb })
|
|
3152
3180
|
) : crumb
|
|
3153
3181
|
] }, `${item.label}-${index}`);
|
|
3154
3182
|
}) });
|
|
@@ -3160,13 +3188,13 @@ import { Collapsible } from "@base-ui/react/collapsible";
|
|
|
3160
3188
|
import { IconAlertSquareRounded, IconChevronRight as IconChevronRight2, IconDotsVertical } from "@tabler/icons-react";
|
|
3161
3189
|
|
|
3162
3190
|
// src/UnreadDot.tsx
|
|
3163
|
-
import { jsx as
|
|
3191
|
+
import { jsx as jsx48 } from "react/jsx-runtime";
|
|
3164
3192
|
function UnreadDot({ className }) {
|
|
3165
|
-
return /* @__PURE__ */
|
|
3193
|
+
return /* @__PURE__ */ jsx48("div", { className: cn("flex h-6 w-6 shrink-0 items-center justify-center", className), "data-unread": true, children: /* @__PURE__ */ jsx48("div", { className: "h-1.5 w-1.5 rounded-full bg-accent-primary" }) });
|
|
3166
3194
|
}
|
|
3167
3195
|
|
|
3168
3196
|
// src/NavItem.tsx
|
|
3169
|
-
import { jsx as
|
|
3197
|
+
import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
3170
3198
|
function NavItem({
|
|
3171
3199
|
label,
|
|
3172
3200
|
href,
|
|
@@ -3197,7 +3225,7 @@ function NavItem({
|
|
|
3197
3225
|
onOpenChange?.(next);
|
|
3198
3226
|
};
|
|
3199
3227
|
const besides = menu != null || hasRows;
|
|
3200
|
-
const mark = unread ? urgent ? /* @__PURE__ */
|
|
3228
|
+
const mark = unread ? urgent ? /* @__PURE__ */ jsx49(UrgentMark, {}) : /* @__PURE__ */ jsx49(UnreadDot, {}) : null;
|
|
3201
3229
|
const stepsAside = menu != null && "transition-opacity group-hover/nav:opacity-0 group-has-[:focus-visible]/nav:opacity-0 group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:opacity-0 [@media(hover:none)]:opacity-0";
|
|
3202
3230
|
const row = /* @__PURE__ */ jsxs32(
|
|
3203
3231
|
"a",
|
|
@@ -3221,7 +3249,7 @@ function NavItem({
|
|
|
3221
3249
|
...props,
|
|
3222
3250
|
onClick: inApp,
|
|
3223
3251
|
children: [
|
|
3224
|
-
(icon || hasRows) && /* @__PURE__ */
|
|
3252
|
+
(icon || hasRows) && /* @__PURE__ */ jsx49(
|
|
3225
3253
|
"span",
|
|
3226
3254
|
{
|
|
3227
3255
|
className: cn(
|
|
@@ -3232,10 +3260,10 @@ function NavItem({
|
|
|
3232
3260
|
children: icon
|
|
3233
3261
|
}
|
|
3234
3262
|
),
|
|
3235
|
-
/* @__PURE__ */
|
|
3263
|
+
/* @__PURE__ */ jsx49("span", { className: cn("flex-1 truncate", unread && "font-medium"), children: label }),
|
|
3236
3264
|
hint != null && // Takes room only while it shows, so the label gives way to it.
|
|
3237
|
-
/* @__PURE__ */
|
|
3238
|
-
count ? /* @__PURE__ */
|
|
3265
|
+
/* @__PURE__ */ jsx49("span", { className: "hidden shrink-0 items-center group-hover/nav:flex group-has-[:focus-visible]/nav:flex", children: hint }),
|
|
3266
|
+
count ? /* @__PURE__ */ jsx49(WithTooltip, { label: countLabel ?? `${count} open`, children: /* @__PURE__ */ jsx49(
|
|
3239
3267
|
"span",
|
|
3240
3268
|
{
|
|
3241
3269
|
className: cn(
|
|
@@ -3251,7 +3279,7 @@ function NavItem({
|
|
|
3251
3279
|
// `-mr-1`: the 24px slot's dot then sits on the axis of a count and
|
|
3252
3280
|
// of the ⋮ (8px from the edge to the 16px box), one column with a
|
|
3253
3281
|
// folder heading's dot and ⋮ (Katerina, 5 October).
|
|
3254
|
-
/* @__PURE__ */
|
|
3282
|
+
/* @__PURE__ */ jsx49("span", { className: cn("-mr-1 flex shrink-0", stepsAside), children: mark })
|
|
3255
3283
|
) : menu != null && !count ? (
|
|
3256
3284
|
// Nothing at the right, but a menu: no room is kept at rest, so the
|
|
3257
3285
|
// label has the row's whole width; while the ⋮ shows, its 24px slot
|
|
@@ -3259,7 +3287,7 @@ function NavItem({
|
|
|
3259
3287
|
// `-mr-1`: the ⋮ sits at `right-1`, 4px into the row's padding, so the
|
|
3260
3288
|
// slot does too — at the padding's edge it kept 4px the ⋮ never
|
|
3261
3289
|
// covers, and the label stopped 12px short of the button, not 8.
|
|
3262
|
-
/* @__PURE__ */
|
|
3290
|
+
/* @__PURE__ */ jsx49("span", { "aria-hidden": "true", className: "-mr-1 hidden w-6 shrink-0 group-hover/nav:block group-has-[:focus-visible]/nav:block group-has-[[data-nav-menu]_[aria-expanded=true]]/nav:block [@media(hover:none)]:block" })
|
|
3263
3291
|
) : null
|
|
3264
3292
|
]
|
|
3265
3293
|
}
|
|
@@ -3270,7 +3298,7 @@ function NavItem({
|
|
|
3270
3298
|
row,
|
|
3271
3299
|
hasRows && // `left-1`: the 24px button's 16px arrow then sits where the icon
|
|
3272
3300
|
// sits (the row's px-2), so the icon turns into the arrow in place.
|
|
3273
|
-
/* @__PURE__ */
|
|
3301
|
+
/* @__PURE__ */ jsx49("div", { className: "absolute inset-y-0 left-1 flex items-center opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100", children: /* @__PURE__ */ jsx49(
|
|
3274
3302
|
IconButton,
|
|
3275
3303
|
{
|
|
3276
3304
|
tooltip: open ? "Collapse" : "Expand",
|
|
@@ -3278,7 +3306,7 @@ function NavItem({
|
|
|
3278
3306
|
"aria-expanded": open,
|
|
3279
3307
|
"aria-controls": panelId,
|
|
3280
3308
|
onClick: () => setOpen(!open),
|
|
3281
|
-
children: /* @__PURE__ */
|
|
3309
|
+
children: /* @__PURE__ */ jsx49(IconChevronRight2, { size: 16, stroke: 1.5, className: cn("transition-transform duration-150", open && "rotate-90") })
|
|
3282
3310
|
}
|
|
3283
3311
|
) }),
|
|
3284
3312
|
menu != null && // `right-1`: the 24px button's 16px icon ends 8px from the row's
|
|
@@ -3289,11 +3317,11 @@ function NavItem({
|
|
|
3289
3317
|
// right of the slot's centre.
|
|
3290
3318
|
// On a screen with no hover it always shows: nothing there can point
|
|
3291
3319
|
// at the row, and the menu has no other way in.
|
|
3292
|
-
/* @__PURE__ */
|
|
3320
|
+
/* @__PURE__ */ jsx49("div", { "data-nav-menu": true, className: cn("absolute inset-y-0 right-1 flex items-center", "opacity-0 transition-opacity group-hover/nav:opacity-100 group-has-[:focus-visible]/nav:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100"), children: /* @__PURE__ */ jsx49(
|
|
3293
3321
|
Menu,
|
|
3294
3322
|
{
|
|
3295
3323
|
align: "right",
|
|
3296
|
-
trigger: /* @__PURE__ */
|
|
3324
|
+
trigger: /* @__PURE__ */ jsx49(IconButton, { tooltip: "More options", "aria-label": name, children: /* @__PURE__ */ jsx49(IconDotsVertical, { size: 16, stroke: 1.5 }) }),
|
|
3297
3325
|
children: menu
|
|
3298
3326
|
}
|
|
3299
3327
|
) })
|
|
@@ -3301,19 +3329,19 @@ function NavItem({
|
|
|
3301
3329
|
if (!hasRows) return line;
|
|
3302
3330
|
return /* @__PURE__ */ jsxs32(Collapsible.Root, { open, onOpenChange: setOpen, className: "flex shrink-0 flex-col", children: [
|
|
3303
3331
|
line,
|
|
3304
|
-
/* @__PURE__ */
|
|
3332
|
+
/* @__PURE__ */ jsx49(
|
|
3305
3333
|
Collapsible.Panel,
|
|
3306
3334
|
{
|
|
3307
3335
|
id: panelId,
|
|
3308
3336
|
hiddenUntilFound: true,
|
|
3309
3337
|
className: COLLAPSIBLE_PANEL_CLASSES,
|
|
3310
|
-
children: /* @__PURE__ */
|
|
3338
|
+
children: /* @__PURE__ */ jsx49("div", { className: "flex flex-col gap-0.5 pt-0.5 pl-6", children })
|
|
3311
3339
|
}
|
|
3312
3340
|
)
|
|
3313
3341
|
] });
|
|
3314
3342
|
}
|
|
3315
3343
|
function UrgentMark() {
|
|
3316
|
-
return /* @__PURE__ */
|
|
3344
|
+
return /* @__PURE__ */ jsx49("div", { className: "flex h-6 w-6 shrink-0 items-center justify-center", "data-urgent": true, children: /* @__PURE__ */ jsx49("div", { className: "flex items-center rounded-full bg-warning-muted p-0.5 signal:shadow-glow-warning", children: /* @__PURE__ */ jsx49(IconAlertSquareRounded, { size: 12, stroke: 2.5, className: "text-warning-default" }) }) });
|
|
3317
3345
|
}
|
|
3318
3346
|
|
|
3319
3347
|
// src/NavTree.tsx
|
|
@@ -3326,14 +3354,14 @@ import { Collapsible as Collapsible2 } from "@base-ui/react/collapsible";
|
|
|
3326
3354
|
// src/SectionHeader.tsx
|
|
3327
3355
|
import { IconChevronRight as IconChevronRight3, IconDotsVertical as IconDotsVertical2 } from "@tabler/icons-react";
|
|
3328
3356
|
import { useRender } from "@base-ui/react/use-render";
|
|
3329
|
-
import { Fragment as Fragment12, jsx as
|
|
3357
|
+
import { Fragment as Fragment12, jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
3330
3358
|
function SectionHeader({ title, chevron = false, icon, isExpanded = true, onToggle, trailing, count, actions, menu, menuLabel, showActions = "hover", hover = "fill", look = "heading", render, className }) {
|
|
3331
3359
|
const row = look === "row";
|
|
3332
3360
|
const acts = actions && actions.length > 0 || menu != null;
|
|
3333
3361
|
const trailingClasses = !acts ? "has-[[data-unread]]:-mr-1" : showActions === "hover" && "has-[[data-unread]]:pointer-events-none has-[[data-unread]]:absolute has-[[data-unread]]:inset-y-0 has-[[data-unread]]:right-1 has-[[data-unread]]:w-6 has-[[data-unread]]:justify-center has-[[data-unread]]:transition-opacity group-hover:has-[[data-unread]]:opacity-0 group-has-[:focus-visible]:has-[[data-unread]]:opacity-0 group-has-[[data-section-menu]_[aria-expanded=true]]:has-[[data-unread]]:opacity-0 [@media(hover:none)]:has-[[data-unread]]:opacity-0";
|
|
3334
3362
|
const reveal = showActions === "hover" && "opacity-0 transition-opacity group-hover:opacity-100 group-has-[:focus-visible]:opacity-100 has-[[aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100";
|
|
3335
3363
|
const titleElement = useRender({
|
|
3336
|
-
render: render ?? (chevron ? /* @__PURE__ */
|
|
3364
|
+
render: render ?? (chevron ? /* @__PURE__ */ jsx50("button", { type: "button", onClick: onToggle, "aria-expanded": isExpanded }) : /* @__PURE__ */ jsx50("span", {})),
|
|
3337
3365
|
props: {
|
|
3338
3366
|
// `text-left`: a button centres its text. `h-full` and `flex-1`: the
|
|
3339
3367
|
// whole row up to the actions is the hit target, as it was when the
|
|
@@ -3342,8 +3370,8 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
|
|
|
3342
3370
|
className: cn("flex h-full min-w-0 flex-1 items-center text-left", row || chevron || icon != null ? "gap-2" : "gap-1"),
|
|
3343
3371
|
children: /* @__PURE__ */ jsxs33(Fragment12, { children: [
|
|
3344
3372
|
icon != null ? /* @__PURE__ */ jsxs33("span", { className: "relative flex size-4 shrink-0 items-center justify-center text-text-secondary", children: [
|
|
3345
|
-
/* @__PURE__ */
|
|
3346
|
-
chevron && /* @__PURE__ */
|
|
3373
|
+
/* @__PURE__ */ jsx50("span", { className: cn("flex", chevron && "transition-opacity group-hover:opacity-0 group-has-[:focus-visible]:opacity-0"), children: icon }),
|
|
3374
|
+
chevron && /* @__PURE__ */ jsx50(
|
|
3347
3375
|
IconChevronRight3,
|
|
3348
3376
|
{
|
|
3349
3377
|
size: 16,
|
|
@@ -3351,7 +3379,7 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
|
|
|
3351
3379
|
className: cn("absolute opacity-0 transition-[opacity,transform] duration-150 group-hover:opacity-100 group-has-[:focus-visible]:opacity-100", isExpanded && "rotate-90")
|
|
3352
3380
|
}
|
|
3353
3381
|
)
|
|
3354
|
-
] }) : chevron && /* @__PURE__ */
|
|
3382
|
+
] }) : chevron && /* @__PURE__ */ jsx50(
|
|
3355
3383
|
IconChevronRight3,
|
|
3356
3384
|
{
|
|
3357
3385
|
size: 16,
|
|
@@ -3359,11 +3387,11 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
|
|
|
3359
3387
|
className: cn("shrink-0 transition-transform duration-150", !row && "text-text-secondary", isExpanded && "rotate-90")
|
|
3360
3388
|
}
|
|
3361
3389
|
),
|
|
3362
|
-
look === "quiet" ? /* @__PURE__ */
|
|
3390
|
+
look === "quiet" ? /* @__PURE__ */ jsx50("span", { className: "min-w-0 truncate text-caption text-text-muted", children: title }) : row ? (
|
|
3363
3391
|
// A row's words: NavItem's size and colour, brightening under the pointer with the row.
|
|
3364
|
-
/* @__PURE__ */
|
|
3365
|
-
) : /* @__PURE__ */
|
|
3366
|
-
count != null && /* @__PURE__ */
|
|
3392
|
+
/* @__PURE__ */ jsx50("span", { className: "min-w-0 flex-1 truncate text-body-2", children: title })
|
|
3393
|
+
) : /* @__PURE__ */ jsx50(SectionLabel, { folds: chevron, children: title }),
|
|
3394
|
+
count != null && /* @__PURE__ */ jsx50("span", { className: cn("ml-1 shrink-0", COUNT_TEXT_CLASSES), children: count })
|
|
3367
3395
|
] })
|
|
3368
3396
|
}
|
|
3369
3397
|
});
|
|
@@ -3388,18 +3416,18 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
|
|
|
3388
3416
|
),
|
|
3389
3417
|
children: [
|
|
3390
3418
|
titleElement,
|
|
3391
|
-
trailing != null && /* @__PURE__ */
|
|
3392
|
-
acts && /* @__PURE__ */
|
|
3419
|
+
trailing != null && /* @__PURE__ */ jsx50("div", { className: cn("flex shrink-0 items-center", trailingClasses), children: trailing }),
|
|
3420
|
+
acts && /* @__PURE__ */ jsx50(
|
|
3393
3421
|
"div",
|
|
3394
3422
|
{
|
|
3395
3423
|
className: "-mr-1 flex shrink-0 items-center",
|
|
3396
3424
|
children: /* @__PURE__ */ jsxs33("div", { className: cn("flex items-center gap-1", reveal), children: [
|
|
3397
|
-
actions?.map((action) => /* @__PURE__ */
|
|
3398
|
-
menu != null && /* @__PURE__ */
|
|
3425
|
+
actions?.map((action) => /* @__PURE__ */ jsx50(IconButton, { tooltip: action.tooltip, "aria-label": action.tooltip, onClick: action.onClick, children: action.icon }, action.tooltip)),
|
|
3426
|
+
menu != null && /* @__PURE__ */ jsx50("div", { "data-section-menu": true, className: "flex items-center", children: /* @__PURE__ */ jsx50(
|
|
3399
3427
|
Menu,
|
|
3400
3428
|
{
|
|
3401
3429
|
align: "right",
|
|
3402
|
-
trigger: /* @__PURE__ */
|
|
3430
|
+
trigger: /* @__PURE__ */ jsx50(IconButton, { tooltip: "More options", "aria-label": menuLabel ?? `More options for ${title}`, children: /* @__PURE__ */ jsx50(IconDotsVertical2, { size: 16, stroke: 1.5 }) }),
|
|
3403
3431
|
children: menu
|
|
3404
3432
|
}
|
|
3405
3433
|
) })
|
|
@@ -3412,7 +3440,7 @@ function SectionHeader({ title, chevron = false, icon, isExpanded = true, onTogg
|
|
|
3412
3440
|
}
|
|
3413
3441
|
|
|
3414
3442
|
// src/CollapsibleSection.tsx
|
|
3415
|
-
import { jsx as
|
|
3443
|
+
import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
3416
3444
|
var OPEN = "open";
|
|
3417
3445
|
var CLOSED = "closed";
|
|
3418
3446
|
function readStored(key) {
|
|
@@ -3440,30 +3468,30 @@ function CollapsibleSection({ title, defaultOpen = true, open: openProp, onOpenC
|
|
|
3440
3468
|
onOpenChange?.(next);
|
|
3441
3469
|
};
|
|
3442
3470
|
return /* @__PURE__ */ jsxs34(Collapsible2.Root, { open, onOpenChange: setOpen, className: cn("flex flex-col", className), children: [
|
|
3443
|
-
/* @__PURE__ */
|
|
3444
|
-
/* @__PURE__ */
|
|
3471
|
+
/* @__PURE__ */ jsx51(SectionHeader, { title, chevron: true, icon, isExpanded: open, trailing, actions, menu, menuLabel, showActions, look, className: "shrink-0", render: /* @__PURE__ */ jsx51(Collapsible2.Trigger, {}) }),
|
|
3472
|
+
/* @__PURE__ */ jsx51(
|
|
3445
3473
|
Collapsible2.Panel,
|
|
3446
3474
|
{
|
|
3447
3475
|
hiddenUntilFound: true,
|
|
3448
3476
|
className: COLLAPSIBLE_PANEL_CLASSES,
|
|
3449
|
-
children: /* @__PURE__ */
|
|
3477
|
+
children: /* @__PURE__ */ jsx51("div", { className: cn("flex flex-col pt-0.5", (look === "row" || indent) && "pl-6", contentClassName), children })
|
|
3450
3478
|
}
|
|
3451
3479
|
)
|
|
3452
3480
|
] });
|
|
3453
3481
|
}
|
|
3454
3482
|
|
|
3455
3483
|
// src/NavTree.tsx
|
|
3456
|
-
import { Fragment as Fragment13, jsx as
|
|
3484
|
+
import { Fragment as Fragment13, jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
3457
3485
|
var NAV_TREE_INTENT_MS = 150;
|
|
3458
3486
|
function holds(nodes, id) {
|
|
3459
3487
|
return !!nodes && id !== void 0 && nodes.some((node) => node.id === id || holds(node.children ?? null, id));
|
|
3460
3488
|
}
|
|
3461
3489
|
function Line({ message }) {
|
|
3462
|
-
return /* @__PURE__ */
|
|
3490
|
+
return /* @__PURE__ */ jsx52("div", { className: "px-2 py-1", children: /* @__PURE__ */ jsx52(EmptyState, { scope: "section", message }) });
|
|
3463
3491
|
}
|
|
3464
3492
|
function Row({ node, selected, onSelect }) {
|
|
3465
|
-
const under = node.childrenMessage !== void 0 ? /* @__PURE__ */
|
|
3466
|
-
return /* @__PURE__ */
|
|
3493
|
+
const under = node.childrenMessage !== void 0 ? /* @__PURE__ */ jsx52(Line, { message: node.childrenMessage }) : node.children?.length ? node.children.map((child) => /* @__PURE__ */ jsx52(Row, { node: child, selected, onSelect }, child.id)) : node.children === null || node.hasChildren && node.children === void 0 ? /* @__PURE__ */ jsx52(SkeletonList, { rows: 2 }) : void 0;
|
|
3494
|
+
return /* @__PURE__ */ jsx52(
|
|
3467
3495
|
NavItem,
|
|
3468
3496
|
{
|
|
3469
3497
|
href: node.href,
|
|
@@ -3485,7 +3513,7 @@ function Row({ node, selected, onSelect }) {
|
|
|
3485
3513
|
);
|
|
3486
3514
|
}
|
|
3487
3515
|
function Group({ group, selected, onSelect, storageKey }) {
|
|
3488
|
-
return /* @__PURE__ */
|
|
3516
|
+
return /* @__PURE__ */ jsx52(
|
|
3489
3517
|
NavTreeSection,
|
|
3490
3518
|
{
|
|
3491
3519
|
id: group.id,
|
|
@@ -3501,7 +3529,7 @@ function Group({ group, selected, onSelect, storageKey }) {
|
|
|
3501
3529
|
onOpenChange: group.onOpenChange,
|
|
3502
3530
|
storageKey: storageKey ? `${storageKey}.${group.id}` : void 0,
|
|
3503
3531
|
onIntent: group.onIntent,
|
|
3504
|
-
children: group.nodes?.map((node) => /* @__PURE__ */
|
|
3532
|
+
children: group.nodes?.map((node) => /* @__PURE__ */ jsx52(Row, { node, selected, onSelect }, node.id))
|
|
3505
3533
|
}
|
|
3506
3534
|
);
|
|
3507
3535
|
}
|
|
@@ -3509,7 +3537,7 @@ function NavTreeSection({ id, title, message, loading = false, trailing, actions
|
|
|
3509
3537
|
const timer = useRef11(void 0);
|
|
3510
3538
|
useEffect6(() => () => clearTimeout(timer.current), []);
|
|
3511
3539
|
const intent = onIntent;
|
|
3512
|
-
return /* @__PURE__ */
|
|
3540
|
+
return /* @__PURE__ */ jsx52(
|
|
3513
3541
|
"div",
|
|
3514
3542
|
{
|
|
3515
3543
|
className: "shrink-0 [&+&]:mt-1",
|
|
@@ -3520,7 +3548,7 @@ function NavTreeSection({ id, title, message, loading = false, trailing, actions
|
|
|
3520
3548
|
} : void 0,
|
|
3521
3549
|
onPointerLeave: intent ? () => clearTimeout(timer.current) : void 0,
|
|
3522
3550
|
onFocus: intent,
|
|
3523
|
-
children: /* @__PURE__ */
|
|
3551
|
+
children: /* @__PURE__ */ jsx52(
|
|
3524
3552
|
CollapsibleSection,
|
|
3525
3553
|
{
|
|
3526
3554
|
title,
|
|
@@ -3535,7 +3563,7 @@ function NavTreeSection({ id, title, message, loading = false, trailing, actions
|
|
|
3535
3563
|
icon,
|
|
3536
3564
|
className: "shrink-0",
|
|
3537
3565
|
contentClassName: "gap-0.5",
|
|
3538
|
-
children: message !== void 0 ? /* @__PURE__ */
|
|
3566
|
+
children: message !== void 0 ? /* @__PURE__ */ jsx52(Line, { message }) : loading ? /* @__PURE__ */ jsx52(SkeletonList, { rows: 3 }) : children
|
|
3539
3567
|
}
|
|
3540
3568
|
)
|
|
3541
3569
|
}
|
|
@@ -3543,18 +3571,18 @@ function NavTreeSection({ id, title, message, loading = false, trailing, actions
|
|
|
3543
3571
|
}
|
|
3544
3572
|
function NavTree({ title, titleActions, groups, children, selected, onSelect, emptyMessage = "", storageKey }) {
|
|
3545
3573
|
return /* @__PURE__ */ jsxs35(Fragment13, { children: [
|
|
3546
|
-
title && /* @__PURE__ */
|
|
3547
|
-
groups === void 0 ? children : groups === null ? /* @__PURE__ */
|
|
3574
|
+
title && /* @__PURE__ */ jsx52(SectionHeader, { title, look: "quiet", showActions: "always", actions: titleActions, className: "mt-4 shrink-0" }),
|
|
3575
|
+
groups === void 0 ? children : groups === null ? /* @__PURE__ */ jsx52(SkeletonList, { rows: 5 }) : groups.length === 0 ? (
|
|
3548
3576
|
// No words, no line: an app that says nothing when it has no groups.
|
|
3549
|
-
emptyMessage ? /* @__PURE__ */
|
|
3550
|
-
) : groups.map((group) => /* @__PURE__ */
|
|
3577
|
+
emptyMessage ? /* @__PURE__ */ jsx52(Line, { message: emptyMessage }) : null
|
|
3578
|
+
) : groups.map((group) => /* @__PURE__ */ jsx52(Group, { group, selected, onSelect, storageKey }, group.id))
|
|
3551
3579
|
] });
|
|
3552
3580
|
}
|
|
3553
3581
|
|
|
3554
3582
|
// src/Popover.tsx
|
|
3555
3583
|
import { useMemo as useMemo4 } from "react";
|
|
3556
3584
|
import { Popover as BasePopover } from "@base-ui/react/popover";
|
|
3557
|
-
import { jsx as
|
|
3585
|
+
import { jsx as jsx53, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
3558
3586
|
var GAP5 = 4;
|
|
3559
3587
|
var VIEWPORT_PAD5 = 8;
|
|
3560
3588
|
function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpenChange, finalFocus, actionsRef, ariaLabel, children, className, contentClassName, maxHeight }) {
|
|
@@ -3571,8 +3599,8 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
|
|
|
3571
3599
|
actionsRef,
|
|
3572
3600
|
modal: false,
|
|
3573
3601
|
children: [
|
|
3574
|
-
trigger && /* @__PURE__ */
|
|
3575
|
-
/* @__PURE__ */
|
|
3602
|
+
trigger && /* @__PURE__ */ jsx53(BasePopover.Trigger, { render: trigger, disabled: triggerDisabled(trigger) }),
|
|
3603
|
+
/* @__PURE__ */ jsx53(BasePopover.Portal, { children: /* @__PURE__ */ jsx53(
|
|
3576
3604
|
BasePopover.Positioner,
|
|
3577
3605
|
{
|
|
3578
3606
|
anchor: anchorTarget,
|
|
@@ -3581,20 +3609,20 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
|
|
|
3581
3609
|
sideOffset: GAP5,
|
|
3582
3610
|
collisionPadding: VIEWPORT_PAD5,
|
|
3583
3611
|
className: "z-50 data-[anchor-hidden]:hidden",
|
|
3584
|
-
children: /* @__PURE__ */
|
|
3612
|
+
children: /* @__PURE__ */ jsx53(
|
|
3585
3613
|
BasePopover.Popup,
|
|
3586
3614
|
{
|
|
3587
3615
|
"aria-label": ariaLabel,
|
|
3588
3616
|
initialFocus: trigger ? void 0 : false,
|
|
3589
3617
|
finalFocus,
|
|
3590
3618
|
className: cn("min-w-[180px] outline-none p-0", className),
|
|
3591
|
-
render: /* @__PURE__ */
|
|
3592
|
-
children: /* @__PURE__ */
|
|
3619
|
+
render: /* @__PURE__ */ jsx53(MenuPanel, {}),
|
|
3620
|
+
children: /* @__PURE__ */ jsx53(
|
|
3593
3621
|
ScrollArea,
|
|
3594
3622
|
{
|
|
3595
3623
|
viewportClassName: maxHeight ?? "max-h-[var(--available-height)]",
|
|
3596
3624
|
contentClassName: cn("flex flex-col p-2", contentClassName),
|
|
3597
|
-
children: /* @__PURE__ */
|
|
3625
|
+
children: /* @__PURE__ */ jsx53(DividerInPanel.Provider, { value: true, children })
|
|
3598
3626
|
}
|
|
3599
3627
|
)
|
|
3600
3628
|
}
|
|
@@ -3608,7 +3636,7 @@ function Popover({ trigger, anchor, align = "left", side = "bottom", open, onOpe
|
|
|
3608
3636
|
|
|
3609
3637
|
// src/SuggestionMenu.tsx
|
|
3610
3638
|
import { useCallback as useCallback4, useEffect as useEffect7, useId as useId3, useImperativeHandle, useMemo as useMemo5, useRef as useRef12, useState as useState11 } from "react";
|
|
3611
|
-
import { jsx as
|
|
3639
|
+
import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
3612
3640
|
function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sections, itemKey, row, onSelect, handle }) {
|
|
3613
3641
|
const shown = useMemo5(() => sections.filter((section) => section.items.length > 0), [sections]);
|
|
3614
3642
|
const items = useMemo5(() => shown.flatMap((section) => section.items), [shown]);
|
|
@@ -3673,7 +3701,7 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
|
|
|
3673
3701
|
const { label, description, leading, shortcut, hint, size } = row(item);
|
|
3674
3702
|
return (
|
|
3675
3703
|
// A row of a list the editor drives from its caret: focus stays in the text, so the row is no Tab stop.
|
|
3676
|
-
/* @__PURE__ */
|
|
3704
|
+
/* @__PURE__ */ jsx54(
|
|
3677
3705
|
MenuItem,
|
|
3678
3706
|
{
|
|
3679
3707
|
role: "option",
|
|
@@ -3700,9 +3728,9 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
|
|
|
3700
3728
|
};
|
|
3701
3729
|
return (
|
|
3702
3730
|
// finalFocus={false}: focus never left the text, and a list that closes because focus moved elsewhere must not pull it back (71a4577b).
|
|
3703
|
-
/* @__PURE__ */
|
|
3704
|
-
i > 0 && /* @__PURE__ */
|
|
3705
|
-
section.label ? /* @__PURE__ */
|
|
3731
|
+
/* @__PURE__ */ jsx54(Popover, { anchor: rect, open: rect !== null, side: "top", align: "left", className: width, maxHeight, ariaLabel, finalFocus: false, children: /* @__PURE__ */ jsx54("div", { ref: keepFocus, id: listboxId, role: "listbox", "aria-label": ariaLabel, className: "flex flex-col gap-0.5", children: shown.map((section, i) => /* @__PURE__ */ jsxs37("div", { className: "contents", children: [
|
|
3732
|
+
i > 0 && /* @__PURE__ */ jsx54(MenuSeparator, {}),
|
|
3733
|
+
section.label ? /* @__PURE__ */ jsx54("div", { role: "group", "aria-label": section.label, children: /* @__PURE__ */ jsx54(MenuSection, { label: section.label, className: section.className, children: section.items.map(drawRow) }) }) : section.items.map(drawRow)
|
|
3706
3734
|
] }, section.label ?? i)) }) })
|
|
3707
3735
|
);
|
|
3708
3736
|
}
|
|
@@ -3710,7 +3738,7 @@ function SuggestionMenu({ rect, editorElement, ariaLabel, width, maxHeight, sect
|
|
|
3710
3738
|
// src/ShowMore.tsx
|
|
3711
3739
|
import { useLayoutEffect as useLayoutEffect5, useRef as useRef13, useState as useState12 } from "react";
|
|
3712
3740
|
import { IconChevronDown as IconChevronDown4, IconChevronUp } from "@tabler/icons-react";
|
|
3713
|
-
import { jsx as
|
|
3741
|
+
import { jsx as jsx55, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
3714
3742
|
var FADE_CLASSES = { surface: "from-bg-surface", inset: "from-bg-inset" };
|
|
3715
3743
|
function ShowMore({ children, maxHeight = 96, surface = "surface", action, className }) {
|
|
3716
3744
|
const box = useRef13(null);
|
|
@@ -3730,22 +3758,22 @@ function ShowMore({ children, maxHeight = 96, surface = "surface", action, class
|
|
|
3730
3758
|
return /* @__PURE__ */ jsxs38("div", { className: cn("flex flex-col items-start", className), children: [
|
|
3731
3759
|
/* @__PURE__ */ jsxs38("div", { ref: box, className: cn("relative w-full", cut && "overflow-hidden"), style: cut ? { maxHeight } : void 0, onFocus: cut ? () => setOpen(true) : void 0, children: [
|
|
3732
3760
|
children,
|
|
3733
|
-
cut && /* @__PURE__ */
|
|
3761
|
+
cut && /* @__PURE__ */ jsx55("div", { "aria-hidden": true, className: cn("pointer-events-none absolute inset-x-0 bottom-0 h-10 bg-gradient-to-t to-transparent", FADE_CLASSES[surface]) })
|
|
3734
3762
|
] }),
|
|
3735
3763
|
action ? /* @__PURE__ */ jsxs38("div", { className: cn("mt-1 flex w-full items-center gap-2", overflows ? "justify-between" : "justify-end"), children: [
|
|
3736
|
-
overflows && /* @__PURE__ */
|
|
3737
|
-
/* @__PURE__ */
|
|
3738
|
-
] }) : overflows && /* @__PURE__ */
|
|
3764
|
+
overflows && /* @__PURE__ */ jsx55(Toggle, { open, onToggle: () => setOpen((o) => !o) }),
|
|
3765
|
+
/* @__PURE__ */ jsx55("div", { className: "-mr-2 flex shrink-0", children: action })
|
|
3766
|
+
] }) : overflows && /* @__PURE__ */ jsx55(Toggle, { open, onToggle: () => setOpen((o) => !o), className: "mt-1" })
|
|
3739
3767
|
] });
|
|
3740
3768
|
}
|
|
3741
3769
|
function Toggle({ open, onToggle, className }) {
|
|
3742
3770
|
const Icon = open ? IconChevronUp : IconChevronDown4;
|
|
3743
|
-
return /* @__PURE__ */
|
|
3771
|
+
return /* @__PURE__ */ jsx55(
|
|
3744
3772
|
Button,
|
|
3745
3773
|
{
|
|
3746
3774
|
variant: "outlined",
|
|
3747
3775
|
size: "small",
|
|
3748
|
-
leadingIcon: /* @__PURE__ */
|
|
3776
|
+
leadingIcon: /* @__PURE__ */ jsx55(Icon, { stroke: 1.5, className: "size-3.5" }),
|
|
3749
3777
|
className,
|
|
3750
3778
|
"aria-expanded": open,
|
|
3751
3779
|
onClick: onToggle,
|
|
@@ -3756,9 +3784,9 @@ function Toggle({ open, onToggle, className }) {
|
|
|
3756
3784
|
|
|
3757
3785
|
// src/Toolbar.tsx
|
|
3758
3786
|
import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar";
|
|
3759
|
-
import { jsx as
|
|
3787
|
+
import { jsx as jsx56 } from "react/jsx-runtime";
|
|
3760
3788
|
function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocus = true, surface = true, children, className }) {
|
|
3761
|
-
const strip = /* @__PURE__ */
|
|
3789
|
+
const strip = /* @__PURE__ */ jsx56(
|
|
3762
3790
|
BaseToolbar.Root,
|
|
3763
3791
|
{
|
|
3764
3792
|
"aria-label": ariaLabel,
|
|
@@ -3769,27 +3797,27 @@ function Toolbar({ "aria-label": ariaLabel, orientation = "horizontal", loopFocu
|
|
|
3769
3797
|
}
|
|
3770
3798
|
);
|
|
3771
3799
|
if (!surface) return strip;
|
|
3772
|
-
return /* @__PURE__ */
|
|
3800
|
+
return /* @__PURE__ */ jsx56(MenuPanel, { className: "w-fit p-1", children: strip });
|
|
3773
3801
|
}
|
|
3774
3802
|
function ToolbarButton({ ref, disabled, disabledReason, ...props }) {
|
|
3775
|
-
return /* @__PURE__ */
|
|
3803
|
+
return /* @__PURE__ */ jsx56(
|
|
3776
3804
|
BaseToolbar.Button,
|
|
3777
3805
|
{
|
|
3778
3806
|
ref,
|
|
3779
3807
|
disabled: disabled || !!disabledReason,
|
|
3780
3808
|
focusableWhenDisabled: true,
|
|
3781
|
-
render: /* @__PURE__ */
|
|
3809
|
+
render: /* @__PURE__ */ jsx56(IconButton, { disabled, disabledReason, ...props })
|
|
3782
3810
|
}
|
|
3783
3811
|
);
|
|
3784
3812
|
}
|
|
3785
3813
|
function ToolbarLink({ ref, href, ...props }) {
|
|
3786
|
-
return /* @__PURE__ */
|
|
3814
|
+
return /* @__PURE__ */ jsx56(BaseToolbar.Link, { ref, render: /* @__PURE__ */ jsx56(IconButton, { href, ...props }) });
|
|
3787
3815
|
}
|
|
3788
3816
|
function ToolbarInput({ size, ...props }) {
|
|
3789
|
-
return /* @__PURE__ */
|
|
3817
|
+
return /* @__PURE__ */ jsx56(BaseToolbar.Input, { render: /* @__PURE__ */ jsx56(TextInput, { size }), ...props });
|
|
3790
3818
|
}
|
|
3791
3819
|
function ToolbarSeparator({ className }) {
|
|
3792
|
-
return /* @__PURE__ */
|
|
3820
|
+
return /* @__PURE__ */ jsx56(
|
|
3793
3821
|
BaseToolbar.Separator,
|
|
3794
3822
|
{
|
|
3795
3823
|
orientation: "vertical",
|
|
@@ -3799,9 +3827,9 @@ function ToolbarSeparator({ className }) {
|
|
|
3799
3827
|
}
|
|
3800
3828
|
|
|
3801
3829
|
// src/ReactionPicker.tsx
|
|
3802
|
-
import { jsx as
|
|
3830
|
+
import { jsx as jsx57 } from "react/jsx-runtime";
|
|
3803
3831
|
function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reactions", surface = true, className }) {
|
|
3804
|
-
return /* @__PURE__ */
|
|
3832
|
+
return /* @__PURE__ */ jsx57(Toolbar, { "aria-label": ariaLabel, surface, className: cn("gap-0.5", className), children: options.map((option) => (
|
|
3805
3833
|
/*
|
|
3806
3834
|
A `ToolbarButton`, not a button in a tooltip wrapper. The wrapper
|
|
3807
3835
|
would become the toolbar's item and the button inside it would never
|
|
@@ -3811,14 +3839,14 @@ function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reaction
|
|
|
3811
3839
|
The tooltip names it for a pointer, `aria-label` for everything else,
|
|
3812
3840
|
and both say the meaning rather than the glyph.
|
|
3813
3841
|
*/
|
|
3814
|
-
/* @__PURE__ */
|
|
3842
|
+
/* @__PURE__ */ jsx57(
|
|
3815
3843
|
ToolbarButton,
|
|
3816
3844
|
{
|
|
3817
3845
|
"aria-label": option.label,
|
|
3818
3846
|
tooltip: option.label,
|
|
3819
3847
|
onClick: () => onSelect(option.emoji),
|
|
3820
3848
|
className: "size-7",
|
|
3821
|
-
children: /* @__PURE__ */
|
|
3849
|
+
children: /* @__PURE__ */ jsx57("span", { "aria-hidden": "true", className: "text-h3 leading-none", children: option.emoji })
|
|
3822
3850
|
},
|
|
3823
3851
|
option.emoji
|
|
3824
3852
|
)
|
|
@@ -3827,23 +3855,23 @@ function ReactionPicker({ options, onSelect, "aria-label": ariaLabel = "Reaction
|
|
|
3827
3855
|
|
|
3828
3856
|
// src/PreviewCard.tsx
|
|
3829
3857
|
import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
|
|
3830
|
-
import { jsx as
|
|
3858
|
+
import { jsx as jsx58, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
3831
3859
|
var GAP6 = 12;
|
|
3832
3860
|
var VIEWPORT_PAD6 = 8;
|
|
3833
3861
|
var OPEN_DELAY2 = 350;
|
|
3834
3862
|
var CLOSE_DELAY = 200;
|
|
3835
3863
|
function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, closeDelay = CLOSE_DELAY, className, contentClassName, wrapperClassName }) {
|
|
3836
3864
|
return /* @__PURE__ */ jsxs39(BasePreviewCard.Root, { children: [
|
|
3837
|
-
/* @__PURE__ */
|
|
3865
|
+
/* @__PURE__ */ jsx58(
|
|
3838
3866
|
BasePreviewCard.Trigger,
|
|
3839
3867
|
{
|
|
3840
3868
|
delay,
|
|
3841
3869
|
closeDelay,
|
|
3842
|
-
render: /* @__PURE__ */
|
|
3870
|
+
render: /* @__PURE__ */ jsx58("span", { className: cn("inline-flex", wrapperClassName) }),
|
|
3843
3871
|
children
|
|
3844
3872
|
}
|
|
3845
3873
|
),
|
|
3846
|
-
/* @__PURE__ */
|
|
3874
|
+
/* @__PURE__ */ jsx58(BasePreviewCard.Portal, { children: /* @__PURE__ */ jsx58(
|
|
3847
3875
|
BasePreviewCard.Positioner,
|
|
3848
3876
|
{
|
|
3849
3877
|
side,
|
|
@@ -3851,12 +3879,12 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
|
|
|
3851
3879
|
sideOffset: GAP6,
|
|
3852
3880
|
collisionPadding: VIEWPORT_PAD6,
|
|
3853
3881
|
className: "z-50 data-[anchor-hidden]:hidden",
|
|
3854
|
-
children: /* @__PURE__ */
|
|
3882
|
+
children: /* @__PURE__ */ jsx58(
|
|
3855
3883
|
BasePreviewCard.Popup,
|
|
3856
3884
|
{
|
|
3857
3885
|
className: cn("w-[360px] p-0 outline-none", className),
|
|
3858
|
-
render: /* @__PURE__ */
|
|
3859
|
-
children: /* @__PURE__ */
|
|
3886
|
+
render: /* @__PURE__ */ jsx58(MenuPanel, {}),
|
|
3887
|
+
children: /* @__PURE__ */ jsx58(ScrollArea, { viewportClassName: "max-h-[min(300px,var(--available-height))]", contentClassName: cn("flex flex-col gap-3 p-3", contentClassName), children: content })
|
|
3860
3888
|
}
|
|
3861
3889
|
)
|
|
3862
3890
|
}
|
|
@@ -3865,13 +3893,13 @@ function PreviewCard({ content, children, side = "right", delay = OPEN_DELAY2, c
|
|
|
3865
3893
|
}
|
|
3866
3894
|
|
|
3867
3895
|
// src/Rail.tsx
|
|
3868
|
-
import { jsx as
|
|
3896
|
+
import { jsx as jsx59 } from "react/jsx-runtime";
|
|
3869
3897
|
function Rail({ "aria-label": ariaLabel = "Navigation", children, className }) {
|
|
3870
|
-
return /* @__PURE__ */
|
|
3898
|
+
return /* @__PURE__ */ jsx59("nav", { "aria-label": ariaLabel, className: cn("flex w-16 shrink-0 flex-col items-start gap-2 px-2 py-3", className), children });
|
|
3871
3899
|
}
|
|
3872
3900
|
|
|
3873
3901
|
// src/RailItem.tsx
|
|
3874
|
-
import { jsx as
|
|
3902
|
+
import { jsx as jsx60, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
3875
3903
|
function RailItem({ href, icon, label, active = false, className, onClick, ...props }) {
|
|
3876
3904
|
const inApp = useInAppClick(href, onClick);
|
|
3877
3905
|
return /* @__PURE__ */ jsxs40(
|
|
@@ -3883,14 +3911,14 @@ function RailItem({ href, icon, label, active = false, className, onClick, ...pr
|
|
|
3883
3911
|
...props,
|
|
3884
3912
|
onClick: inApp,
|
|
3885
3913
|
children: [
|
|
3886
|
-
/* @__PURE__ */
|
|
3914
|
+
/* @__PURE__ */ jsx60(
|
|
3887
3915
|
"div",
|
|
3888
3916
|
{
|
|
3889
3917
|
className: cn(
|
|
3890
3918
|
"flex items-center justify-center rounded-lg p-2 transition-colors",
|
|
3891
3919
|
active ? "bg-bg-selected" : "group-hover:bg-bg-hover"
|
|
3892
3920
|
),
|
|
3893
|
-
children: /* @__PURE__ */
|
|
3921
|
+
children: /* @__PURE__ */ jsx60(
|
|
3894
3922
|
"span",
|
|
3895
3923
|
{
|
|
3896
3924
|
className: cn(
|
|
@@ -3902,14 +3930,14 @@ function RailItem({ href, icon, label, active = false, className, onClick, ...pr
|
|
|
3902
3930
|
)
|
|
3903
3931
|
}
|
|
3904
3932
|
),
|
|
3905
|
-
/* @__PURE__ */
|
|
3933
|
+
/* @__PURE__ */ jsx60("span", { className: cn("text-center text-menu", active ? "text-text-primary" : "text-text-secondary"), children: label })
|
|
3906
3934
|
]
|
|
3907
3935
|
}
|
|
3908
3936
|
);
|
|
3909
3937
|
}
|
|
3910
3938
|
|
|
3911
3939
|
// src/Property.tsx
|
|
3912
|
-
import { jsx as
|
|
3940
|
+
import { jsx as jsx61, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
3913
3941
|
var VALUE_CLASSES = "contents";
|
|
3914
3942
|
function Property({ label, layout = "row", children, className }) {
|
|
3915
3943
|
if (layout === "stacked") {
|
|
@@ -3918,20 +3946,20 @@ function Property({ label, layout = "row", children, className }) {
|
|
|
3918
3946
|
// Peek's topic-details sections already sit at 12px, Ship's rail was
|
|
3919
3947
|
// 6px, and unifying means the bigger, calmer one.
|
|
3920
3948
|
/* @__PURE__ */ jsxs41("dl", { className: cn("flex flex-col gap-3", className), children: [
|
|
3921
|
-
/* @__PURE__ */
|
|
3922
|
-
/* @__PURE__ */
|
|
3949
|
+
/* @__PURE__ */ jsx61("dt", { className: "text-menu uppercase tracking-widest text-text-secondary", children: label }),
|
|
3950
|
+
/* @__PURE__ */ jsx61("dd", { className: VALUE_CLASSES, children })
|
|
3923
3951
|
] })
|
|
3924
3952
|
);
|
|
3925
3953
|
}
|
|
3926
3954
|
return /* @__PURE__ */ jsxs41("dl", { className: cn("flex items-center gap-2", className), children: [
|
|
3927
|
-
/* @__PURE__ */
|
|
3928
|
-
/* @__PURE__ */
|
|
3955
|
+
/* @__PURE__ */ jsx61("dt", { className: "w-[68px] shrink-0 text-caption text-text-secondary", children: label }),
|
|
3956
|
+
/* @__PURE__ */ jsx61("dd", { className: VALUE_CLASSES, children })
|
|
3929
3957
|
] });
|
|
3930
3958
|
}
|
|
3931
3959
|
|
|
3932
3960
|
// src/Reaction.tsx
|
|
3933
3961
|
import { Toggle as Toggle2 } from "@base-ui/react/toggle";
|
|
3934
|
-
import { jsx as
|
|
3962
|
+
import { jsx as jsx62, jsxs as jsxs42 } from "react/jsx-runtime";
|
|
3935
3963
|
function Reaction({ emoji, count, pressed = false, className, ...props }) {
|
|
3936
3964
|
return (
|
|
3937
3965
|
// @estiva-escape(no-copied-look): W1 (Katerina, 24 September: leave alone): a reaction pill shares four words with a field's box by coincidence
|
|
@@ -3957,8 +3985,8 @@ function Reaction({ emoji, count, pressed = false, className, ...props }) {
|
|
|
3957
3985
|
),
|
|
3958
3986
|
...props,
|
|
3959
3987
|
children: [
|
|
3960
|
-
/* @__PURE__ */
|
|
3961
|
-
/* @__PURE__ */
|
|
3988
|
+
/* @__PURE__ */ jsx62("span", { "aria-hidden": "true", className: "shrink-0 text-body-1 leading-none", children: emoji }),
|
|
3989
|
+
/* @__PURE__ */ jsx62("span", { className: CHIP_TEXT_CLASSES, children: count })
|
|
3962
3990
|
]
|
|
3963
3991
|
}
|
|
3964
3992
|
)
|
|
@@ -3968,7 +3996,7 @@ function Reaction({ emoji, count, pressed = false, className, ...props }) {
|
|
|
3968
3996
|
// src/SearchInput.tsx
|
|
3969
3997
|
import "react";
|
|
3970
3998
|
import { Input as Input3 } from "@base-ui/react/input";
|
|
3971
|
-
import { jsx as
|
|
3999
|
+
import { jsx as jsx63, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
3972
4000
|
function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...props }) {
|
|
3973
4001
|
return /* @__PURE__ */ jsxs43(
|
|
3974
4002
|
"div",
|
|
@@ -3982,7 +4010,7 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
|
|
|
3982
4010
|
className
|
|
3983
4011
|
),
|
|
3984
4012
|
children: [
|
|
3985
|
-
/* @__PURE__ */
|
|
4013
|
+
/* @__PURE__ */ jsx63(
|
|
3986
4014
|
Input3,
|
|
3987
4015
|
{
|
|
3988
4016
|
className: cn("flex-1 min-w-0 text-input-value", BARE_INPUT_CLASSES),
|
|
@@ -3990,40 +4018,40 @@ function SearchInput({ shortcut, className, placeholder = "Search\u2026", ...pro
|
|
|
3990
4018
|
...props
|
|
3991
4019
|
}
|
|
3992
4020
|
),
|
|
3993
|
-
shortcut && /* @__PURE__ */
|
|
4021
|
+
shortcut && /* @__PURE__ */ jsx63(Kbd, { children: shortcut })
|
|
3994
4022
|
]
|
|
3995
4023
|
}
|
|
3996
4024
|
);
|
|
3997
4025
|
}
|
|
3998
4026
|
|
|
3999
4027
|
// src/Panel.tsx
|
|
4000
|
-
import { jsx as
|
|
4028
|
+
import { jsx as jsx64, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
4001
4029
|
function Frame({ title, chevron = false, actions, children, footer, bodyClassName, bodyRef, onBodyScroll, className, broken = false }) {
|
|
4002
4030
|
return /* @__PURE__ */ jsxs44("div", { className: cn("flex h-full min-h-0 flex-1 flex-col", className), children: [
|
|
4003
|
-
/* @__PURE__ */
|
|
4031
|
+
/* @__PURE__ */ jsx64(ContainerHeader, { title, chevron, actions }),
|
|
4004
4032
|
broken ? (
|
|
4005
4033
|
// The message takes the room the body had and centres itself in it.
|
|
4006
|
-
/* @__PURE__ */
|
|
4007
|
-
) : /* @__PURE__ */
|
|
4008
|
-
!broken && footer && /* @__PURE__ */
|
|
4034
|
+
/* @__PURE__ */ jsx64("div", { className: "flex min-h-0 flex-1 flex-col px-4", children })
|
|
4035
|
+
) : /* @__PURE__ */ jsx64(ScrollArea, { className: "min-h-0 flex-1", contentClassName: bodyClassName, viewportRef: bodyRef, onScroll: onBodyScroll, children }),
|
|
4036
|
+
!broken && footer && /* @__PURE__ */ jsx64("div", { className: "shrink-0", children: footer })
|
|
4009
4037
|
] });
|
|
4010
4038
|
}
|
|
4011
4039
|
function Panel(props) {
|
|
4012
|
-
return /* @__PURE__ */
|
|
4040
|
+
return /* @__PURE__ */ jsx64(
|
|
4013
4041
|
ErrorBoundary,
|
|
4014
4042
|
{
|
|
4015
4043
|
label: "panel",
|
|
4016
4044
|
frame: (message) => (
|
|
4017
4045
|
// Only the name comes back with the message: the actions and the footer may be what threw.
|
|
4018
|
-
/* @__PURE__ */
|
|
4046
|
+
/* @__PURE__ */ jsx64(Frame, { title: props.title, chevron: props.chevron, className: props.className, broken: true, children: message })
|
|
4019
4047
|
),
|
|
4020
|
-
children: /* @__PURE__ */
|
|
4048
|
+
children: /* @__PURE__ */ jsx64(Frame, { ...props })
|
|
4021
4049
|
}
|
|
4022
4050
|
);
|
|
4023
4051
|
}
|
|
4024
4052
|
|
|
4025
4053
|
// src/ListColumn.tsx
|
|
4026
|
-
import { jsx as
|
|
4054
|
+
import { jsx as jsx65, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
4027
4055
|
function Column({ title, chevron = false, titleMenu, actions, above, collapsed = false, children, className, broken = false }) {
|
|
4028
4056
|
return /* @__PURE__ */ jsxs45(
|
|
4029
4057
|
"div",
|
|
@@ -4036,35 +4064,35 @@ function Column({ title, chevron = false, titleMenu, actions, above, collapsed =
|
|
|
4036
4064
|
),
|
|
4037
4065
|
"data-collapsed": collapsed || void 0,
|
|
4038
4066
|
children: [
|
|
4039
|
-
/* @__PURE__ */
|
|
4067
|
+
/* @__PURE__ */ jsx65(ContainerHeader, { title, chevron, titleMenu, actions }),
|
|
4040
4068
|
above,
|
|
4041
4069
|
broken ? (
|
|
4042
4070
|
// The message takes the room the list had and centres itself in it (Katerina, 19 September).
|
|
4043
|
-
/* @__PURE__ */
|
|
4044
|
-
) : /* @__PURE__ */
|
|
4071
|
+
/* @__PURE__ */ jsx65("div", { className: "flex min-h-0 flex-1 flex-col px-3", children })
|
|
4072
|
+
) : /* @__PURE__ */ jsx65(ScrollArea, { className: "flex-1", contentClassName: "flex flex-col gap-0.5 px-3 pt-4 pb-3", children })
|
|
4045
4073
|
]
|
|
4046
4074
|
}
|
|
4047
4075
|
);
|
|
4048
4076
|
}
|
|
4049
4077
|
function ListColumn(props) {
|
|
4050
|
-
return /* @__PURE__ */
|
|
4078
|
+
return /* @__PURE__ */ jsx65(
|
|
4051
4079
|
ErrorBoundary,
|
|
4052
4080
|
{
|
|
4053
4081
|
label: "list panel",
|
|
4054
4082
|
frame: (message) => (
|
|
4055
4083
|
// Only the name comes back with the message: the actions and the row above may be what threw.
|
|
4056
|
-
/* @__PURE__ */
|
|
4084
|
+
/* @__PURE__ */ jsx65(Column, { title: props.title, chevron: props.chevron, collapsed: props.collapsed, className: props.className, broken: true, children: message })
|
|
4057
4085
|
),
|
|
4058
|
-
children: /* @__PURE__ */
|
|
4086
|
+
children: /* @__PURE__ */ jsx65(Column, { ...props })
|
|
4059
4087
|
}
|
|
4060
4088
|
);
|
|
4061
4089
|
}
|
|
4062
4090
|
|
|
4063
4091
|
// src/Tabs.tsx
|
|
4064
4092
|
import { Tabs as BaseTabs } from "@base-ui/react/tabs";
|
|
4065
|
-
import { Fragment as Fragment14, jsx as
|
|
4093
|
+
import { Fragment as Fragment14, jsx as jsx66, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
4066
4094
|
function Tabs({ tabs, active, onChange, size = "default", className, ...aria }) {
|
|
4067
|
-
return /* @__PURE__ */
|
|
4095
|
+
return /* @__PURE__ */ jsx66(
|
|
4068
4096
|
BaseTabs.Root,
|
|
4069
4097
|
{
|
|
4070
4098
|
value: active,
|
|
@@ -4072,7 +4100,7 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
|
|
|
4072
4100
|
if (details.reason === "none") onChange(value);
|
|
4073
4101
|
},
|
|
4074
4102
|
className,
|
|
4075
|
-
children: /* @__PURE__ */
|
|
4103
|
+
children: /* @__PURE__ */ jsx66(
|
|
4076
4104
|
BaseTabs.List,
|
|
4077
4105
|
{
|
|
4078
4106
|
activateOnFocus: true,
|
|
@@ -4094,11 +4122,11 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
|
|
|
4094
4122
|
tab.icon,
|
|
4095
4123
|
/* @__PURE__ */ jsxs46("span", { className: "flex items-baseline", children: [
|
|
4096
4124
|
tab.label,
|
|
4097
|
-
tab.count !== void 0 ? /* @__PURE__ */
|
|
4125
|
+
tab.count !== void 0 ? /* @__PURE__ */ jsx66("span", { className: "ml-2.5 font-mono text-caption tabular-nums text-text-secondary", children: tab.count }) : null
|
|
4098
4126
|
] }),
|
|
4099
4127
|
tab.unread ? /* @__PURE__ */ jsxs46(Fragment14, { children: [
|
|
4100
|
-
/* @__PURE__ */
|
|
4101
|
-
/* @__PURE__ */
|
|
4128
|
+
/* @__PURE__ */ jsx66(UnreadDot, { className: "h-auto w-auto" }),
|
|
4129
|
+
/* @__PURE__ */ jsx66("span", { className: "sr-only", children: "new" })
|
|
4102
4130
|
] }) : null
|
|
4103
4131
|
]
|
|
4104
4132
|
},
|
|
@@ -4114,7 +4142,7 @@ function Tabs({ tabs, active, onChange, size = "default", className, ...aria })
|
|
|
4114
4142
|
import { createContext as createContext7, useContext as useContext7, useMemo as useMemo6 } from "react";
|
|
4115
4143
|
import { Toast as BaseToast } from "@base-ui/react/toast";
|
|
4116
4144
|
import { IconAlertCircle as IconAlertCircle2, IconCircleCheck, IconCircleX } from "@tabler/icons-react";
|
|
4117
|
-
import { jsx as
|
|
4145
|
+
import { jsx as jsx67, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
4118
4146
|
var SURFACE_STYLES = {
|
|
4119
4147
|
success: "bg-success-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
|
|
4120
4148
|
brand: "bg-accent-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
|
|
@@ -4122,7 +4150,7 @@ var SURFACE_STYLES = {
|
|
|
4122
4150
|
warning: "bg-warning-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md",
|
|
4123
4151
|
error: "bg-error-muted signal:bg-bg-inset signal:border signal:border-border-default signal:shadow-md leaf:bg-bg-inset leaf:border leaf:border-border-default leaf:shadow-md"
|
|
4124
4152
|
};
|
|
4125
|
-
var
|
|
4153
|
+
var ICONS2 = {
|
|
4126
4154
|
success: IconCircleCheck,
|
|
4127
4155
|
brand: IconCircleCheck,
|
|
4128
4156
|
neutral: IconCircleCheck,
|
|
@@ -4149,17 +4177,17 @@ var pillClassName = (type, hasAction, className) => cn(
|
|
|
4149
4177
|
className
|
|
4150
4178
|
);
|
|
4151
4179
|
function LeadingIcon({ type }) {
|
|
4152
|
-
const Icon =
|
|
4153
|
-
return /* @__PURE__ */
|
|
4180
|
+
const Icon = ICONS2[type];
|
|
4181
|
+
return /* @__PURE__ */ jsx67(Icon, { size: 16, stroke: 1.5, className: cn("text-text-primary shrink-0", ICON_STYLES[type]) });
|
|
4154
4182
|
}
|
|
4155
4183
|
function Toast({ label, type = "neutral", leadingIcon = true, actionLabel, onAction, className }) {
|
|
4156
4184
|
const hasAction = !!(actionLabel && onAction);
|
|
4157
4185
|
return /* @__PURE__ */ jsxs47("div", { className: pillClassName(type, hasAction, className), children: [
|
|
4158
4186
|
/* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-2 shrink-0", children: [
|
|
4159
|
-
leadingIcon && /* @__PURE__ */
|
|
4160
|
-
/* @__PURE__ */
|
|
4187
|
+
leadingIcon && /* @__PURE__ */ jsx67(LeadingIcon, { type }),
|
|
4188
|
+
/* @__PURE__ */ jsx67("span", { className: LABEL_CLASSES, children: label })
|
|
4161
4189
|
] }),
|
|
4162
|
-
hasAction && /* @__PURE__ */
|
|
4190
|
+
hasAction && /* @__PURE__ */ jsx67(Button, { variant: "outlined", size: "small", onClick: onAction, children: actionLabel })
|
|
4163
4191
|
] });
|
|
4164
4192
|
}
|
|
4165
4193
|
var ToastContext = createContext7(null);
|
|
@@ -4180,9 +4208,9 @@ function ToastProvider({ children }) {
|
|
|
4180
4208
|
}),
|
|
4181
4209
|
[manager]
|
|
4182
4210
|
);
|
|
4183
|
-
return /* @__PURE__ */
|
|
4211
|
+
return /* @__PURE__ */ jsx67(ToastContext.Provider, { value, children: /* @__PURE__ */ jsxs47(BaseToast.Provider, { toastManager: manager, limit: VISIBLE_TOASTS, children: [
|
|
4184
4212
|
children,
|
|
4185
|
-
/* @__PURE__ */
|
|
4213
|
+
/* @__PURE__ */ jsx67(BaseToast.Portal, { children: /* @__PURE__ */ jsx67(BaseToast.Viewport, { className: "fixed bottom-4 left-4 z-[100] flex flex-col-reverse items-start gap-2 pointer-events-none", children: /* @__PURE__ */ jsx67(ToastList, {}) }) })
|
|
4186
4214
|
] }) });
|
|
4187
4215
|
}
|
|
4188
4216
|
function ToastList() {
|
|
@@ -4198,17 +4226,17 @@ function ToastList() {
|
|
|
4198
4226
|
className: pillClassName(type, !!actionLabel, "pointer-events-auto data-[limited]:hidden"),
|
|
4199
4227
|
children: [
|
|
4200
4228
|
/* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-2 shrink-0", children: [
|
|
4201
|
-
leadingIcon && /* @__PURE__ */
|
|
4202
|
-
/* @__PURE__ */
|
|
4229
|
+
leadingIcon && /* @__PURE__ */ jsx67(LeadingIcon, { type }),
|
|
4230
|
+
/* @__PURE__ */ jsx67(BaseToast.Title, { render: /* @__PURE__ */ jsx67("span", {}), className: LABEL_CLASSES })
|
|
4203
4231
|
] }),
|
|
4204
|
-
actionLabel && /* @__PURE__ */
|
|
4232
|
+
actionLabel && /* @__PURE__ */ jsx67(
|
|
4205
4233
|
BaseToast.Action,
|
|
4206
4234
|
{
|
|
4207
4235
|
onClick: () => {
|
|
4208
4236
|
onAction?.();
|
|
4209
4237
|
close(toast.id);
|
|
4210
4238
|
},
|
|
4211
|
-
render: /* @__PURE__ */
|
|
4239
|
+
render: /* @__PURE__ */ jsx67(Button, { variant: "outlined", size: "small", children: actionLabel })
|
|
4212
4240
|
}
|
|
4213
4241
|
)
|
|
4214
4242
|
]
|
|
@@ -4264,6 +4292,7 @@ export {
|
|
|
4264
4292
|
InlineChip,
|
|
4265
4293
|
InputChip,
|
|
4266
4294
|
Kbd,
|
|
4295
|
+
KindIcon,
|
|
4267
4296
|
Lightbox,
|
|
4268
4297
|
Link,
|
|
4269
4298
|
ListColumn,
|
|
@@ -4325,6 +4354,7 @@ export {
|
|
|
4325
4354
|
isApplePlatform,
|
|
4326
4355
|
richTextClassName,
|
|
4327
4356
|
shortcutLabel,
|
|
4357
|
+
thingKindOf,
|
|
4328
4358
|
useToast
|
|
4329
4359
|
};
|
|
4330
4360
|
//# sourceMappingURL=index.js.map
|