@lessly/ui 1.2.0 → 1.4.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/README.md +40 -3
- package/dist/index.d.ts +57 -1
- package/dist/index.js +405 -380
- package/dist/styles.css +6 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -204,10 +204,11 @@ Button.displayName = "Button";
|
|
|
204
204
|
import * as React3 from "react";
|
|
205
205
|
import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
206
206
|
var Card = React3.forwardRef(
|
|
207
|
-
({ className, title, action, variant = "default", children, ...props }, ref) => /* @__PURE__ */ jsxs2(
|
|
207
|
+
({ className, title, tooltip, action, variant = "default", children, ...props }, ref) => /* @__PURE__ */ jsxs2(
|
|
208
208
|
"div",
|
|
209
209
|
{
|
|
210
210
|
ref,
|
|
211
|
+
title: tooltip,
|
|
211
212
|
className: cn(
|
|
212
213
|
"rounded-xl border border-border-subtle bg-bg-surface text-text-primary shadow-sm",
|
|
213
214
|
variant === "list" && "overflow-hidden",
|
|
@@ -3886,21 +3887,21 @@ var ImageCropper = React57.forwardRef(
|
|
|
3886
3887
|
React57.useLayoutEffect(() => {
|
|
3887
3888
|
const el = stageRef.current;
|
|
3888
3889
|
if (!el) return void 0;
|
|
3889
|
-
const read = () => {
|
|
3890
|
-
const rect = el.getBoundingClientRect();
|
|
3890
|
+
const read = (entry) => {
|
|
3891
3891
|
const style = typeof getComputedStyle === "function" ? getComputedStyle(el) : null;
|
|
3892
3892
|
const edge = (value) => value ? parseFloat(value) || 0 : 0;
|
|
3893
3893
|
const bl = edge(style?.borderLeftWidth);
|
|
3894
3894
|
const bt = edge(style?.borderTopWidth);
|
|
3895
3895
|
inset.current = { left: bl, top: bt };
|
|
3896
|
-
const
|
|
3897
|
-
const
|
|
3896
|
+
const border = entry?.borderBoxSize?.[0];
|
|
3897
|
+
const w = border ? border.inlineSize - bl - edge(style?.borderRightWidth) : el.clientWidth;
|
|
3898
|
+
const h = border ? border.blockSize - bt - edge(style?.borderBottomWidth) : el.clientHeight;
|
|
3898
3899
|
if (w <= 0 || h <= 0) return;
|
|
3899
3900
|
setStage((prev) => prev.w === w && prev.h === h ? prev : { w, h });
|
|
3900
3901
|
};
|
|
3901
3902
|
read();
|
|
3902
3903
|
if (typeof ResizeObserver === "undefined") return void 0;
|
|
3903
|
-
const observer = new ResizeObserver(read);
|
|
3904
|
+
const observer = new ResizeObserver((entries) => read(entries[0]));
|
|
3904
3905
|
observer.observe(el);
|
|
3905
3906
|
return () => observer.disconnect();
|
|
3906
3907
|
}, []);
|
|
@@ -5107,13 +5108,13 @@ function ItemLabel({ item, kind }) {
|
|
|
5107
5108
|
const name = nameOf(item);
|
|
5108
5109
|
return /* @__PURE__ */ jsx85("span", { className: cn("min-w-0 flex-1 truncate", !name && "text-text-tertiary"), children: name ?? UNNAMED[kind] });
|
|
5109
5110
|
}
|
|
5110
|
-
function Mark2({ item, size }) {
|
|
5111
|
+
function Mark2({ item, size, reserve }) {
|
|
5111
5112
|
const box = size === "md" ? "size-7" : "size-5";
|
|
5112
5113
|
if (item.icon) {
|
|
5113
5114
|
return /* @__PURE__ */ jsx85("span", { className: cn("flex shrink-0 items-center justify-center overflow-hidden rounded-md", box), "aria-hidden": "true", children: item.icon });
|
|
5114
5115
|
}
|
|
5115
5116
|
const initial = nameOf(item)?.trim().charAt(0).toUpperCase();
|
|
5116
|
-
if (!initial) return null;
|
|
5117
|
+
if (!initial) return reserve ? /* @__PURE__ */ jsx85("span", { "aria-hidden": "true", className: cn("shrink-0", box) }) : null;
|
|
5117
5118
|
return /* @__PURE__ */ jsx85(
|
|
5118
5119
|
"span",
|
|
5119
5120
|
{
|
|
@@ -5172,7 +5173,7 @@ function OrgProductSwitcher({
|
|
|
5172
5173
|
children: [
|
|
5173
5174
|
/* @__PURE__ */ jsx85(DropdownMenuLabel, { className: sectionLabel, children: "Organizations" }),
|
|
5174
5175
|
organizations.map((o) => /* @__PURE__ */ jsxs56(DropdownMenuItem, { className: menuItem, onSelect: () => onOrgSelect(o.id), children: [
|
|
5175
|
-
/* @__PURE__ */ jsx85(Mark2, { item: o, size: "sm" }),
|
|
5176
|
+
/* @__PURE__ */ jsx85(Mark2, { item: o, size: "sm", reserve: true }),
|
|
5176
5177
|
/* @__PURE__ */ jsx85(ItemLabel, { item: o, kind: "organization" }),
|
|
5177
5178
|
o.id === activeOrgId && /* @__PURE__ */ jsx85(Check9, { className: "size-4 shrink-0 text-text-secondary", "aria-hidden": "true" })
|
|
5178
5179
|
] }, o.id)),
|
|
@@ -5180,7 +5181,7 @@ function OrgProductSwitcher({
|
|
|
5180
5181
|
/* @__PURE__ */ jsx85(DropdownMenuSeparator, { className: "mx-0 shrink-0 bg-border-subtle" }),
|
|
5181
5182
|
/* @__PURE__ */ jsx85(DropdownMenuLabel, { className: sectionLabel, children: orgName ? `${orgName} \xB7 Products` : "Products" }),
|
|
5182
5183
|
products.map((p) => /* @__PURE__ */ jsxs56(DropdownMenuItem, { className: menuItem, onSelect: () => onProductSelect?.(p.id), children: [
|
|
5183
|
-
/* @__PURE__ */ jsx85(Mark2, { item: p, size: "sm" }),
|
|
5184
|
+
/* @__PURE__ */ jsx85(Mark2, { item: p, size: "sm", reserve: true }),
|
|
5184
5185
|
/* @__PURE__ */ jsx85(ItemLabel, { item: p, kind: "product" }),
|
|
5185
5186
|
p.id === activeProductId && /* @__PURE__ */ jsx85(Check9, { className: "size-4 shrink-0 text-text-secondary", "aria-hidden": "true" })
|
|
5186
5187
|
] }, p.id))
|
|
@@ -5311,14 +5312,36 @@ function AppShell({ sidebar, topBar, children, className }) {
|
|
|
5311
5312
|
}
|
|
5312
5313
|
var AuthenticatedLayout = AppShell;
|
|
5313
5314
|
|
|
5314
|
-
// src/components/
|
|
5315
|
+
// src/components/top-bar.tsx
|
|
5315
5316
|
import * as React71 from "react";
|
|
5317
|
+
import { jsx as jsx88, jsxs as jsxs59 } from "react/jsx-runtime";
|
|
5318
|
+
var TopBar = React71.forwardRef(
|
|
5319
|
+
({ left, right, className, ...props }, ref) => /* @__PURE__ */ jsxs59("div", { ref, className: cn("flex w-full items-center gap-1", className), ...props, children: [
|
|
5320
|
+
left,
|
|
5321
|
+
right && /* @__PURE__ */ jsx88("div", { className: "ml-auto flex items-center gap-2", children: right })
|
|
5322
|
+
] })
|
|
5323
|
+
);
|
|
5324
|
+
TopBar.displayName = "TopBar";
|
|
5325
|
+
|
|
5326
|
+
// src/components/top-bar-utilities.tsx
|
|
5327
|
+
import * as React72 from "react";
|
|
5328
|
+
import { jsx as jsx89, jsxs as jsxs60 } from "react/jsx-runtime";
|
|
5329
|
+
var TopBarUtilities = React72.forwardRef(
|
|
5330
|
+
({ items, className, ...props }, ref) => /* @__PURE__ */ jsx89("div", { ref, className: cn("flex items-center gap-1", className), ...props, children: items.map(({ name, icon, onClick }) => /* @__PURE__ */ jsxs60(Tooltip, { children: [
|
|
5331
|
+
/* @__PURE__ */ jsx89(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx89(Button, { variant: "ghost", size: "sm", icon, "aria-label": name, onClick }) }),
|
|
5332
|
+
/* @__PURE__ */ jsx89(TooltipContent, { children: name })
|
|
5333
|
+
] }, name)) })
|
|
5334
|
+
);
|
|
5335
|
+
TopBarUtilities.displayName = "TopBarUtilities";
|
|
5336
|
+
|
|
5337
|
+
// src/components/grid.tsx
|
|
5338
|
+
import * as React73 from "react";
|
|
5316
5339
|
import { Slot as Slot7 } from "@radix-ui/react-slot";
|
|
5317
|
-
import { jsx as
|
|
5318
|
-
var Grid =
|
|
5340
|
+
import { jsx as jsx90 } from "react/jsx-runtime";
|
|
5341
|
+
var Grid = React73.forwardRef(
|
|
5319
5342
|
({ fluid = false, asChild = false, className, ...props }, ref) => {
|
|
5320
5343
|
const Comp = asChild ? Slot7 : "div";
|
|
5321
|
-
return /* @__PURE__ */
|
|
5344
|
+
return /* @__PURE__ */ jsx90(
|
|
5322
5345
|
Comp,
|
|
5323
5346
|
{
|
|
5324
5347
|
ref,
|
|
@@ -5336,9 +5359,9 @@ var Grid = React71.forwardRef(
|
|
|
5336
5359
|
Grid.displayName = "Grid";
|
|
5337
5360
|
|
|
5338
5361
|
// src/components/col.tsx
|
|
5339
|
-
import * as
|
|
5362
|
+
import * as React74 from "react";
|
|
5340
5363
|
import { Slot as Slot8 } from "@radix-ui/react-slot";
|
|
5341
|
-
import { jsx as
|
|
5364
|
+
import { jsx as jsx91 } from "react/jsx-runtime";
|
|
5342
5365
|
var TIER_MAX = { base: 4, md: 8, xl: 12 };
|
|
5343
5366
|
var SPAN = {
|
|
5344
5367
|
base: { 1: "col-span-1", 2: "col-span-2", 3: "col-span-3", 4: "col-span-4" },
|
|
@@ -5458,17 +5481,17 @@ function responsiveClasses(span, offset) {
|
|
|
5458
5481
|
}
|
|
5459
5482
|
return cn(...spanClasses, ...startClasses);
|
|
5460
5483
|
}
|
|
5461
|
-
var Col =
|
|
5484
|
+
var Col = React74.forwardRef(
|
|
5462
5485
|
({ span, offset, asChild = false, className, ...props }, ref) => {
|
|
5463
5486
|
const Comp = asChild ? Slot8 : "div";
|
|
5464
|
-
return /* @__PURE__ */
|
|
5487
|
+
return /* @__PURE__ */ jsx91(Comp, { ref, className: cn(responsiveClasses(span, offset), className), ...props });
|
|
5465
5488
|
}
|
|
5466
5489
|
);
|
|
5467
5490
|
Col.displayName = "Col";
|
|
5468
5491
|
|
|
5469
5492
|
// src/components/code-block.tsx
|
|
5470
|
-
import * as
|
|
5471
|
-
import { jsx as
|
|
5493
|
+
import * as React75 from "react";
|
|
5494
|
+
import { jsx as jsx92, jsxs as jsxs61 } from "react/jsx-runtime";
|
|
5472
5495
|
var TOKEN_CLASS = {
|
|
5473
5496
|
comment: "text-text-tertiary italic",
|
|
5474
5497
|
string: "text-text-success",
|
|
@@ -5639,30 +5662,30 @@ function dropLeading(tokens, count) {
|
|
|
5639
5662
|
}
|
|
5640
5663
|
return out;
|
|
5641
5664
|
}
|
|
5642
|
-
var CodeBlock =
|
|
5665
|
+
var CodeBlock = React75.forwardRef(
|
|
5643
5666
|
({ code, lang = "tsx", variant = "default", copy = false, filename, scroll = false, highlightLines, showLineNumbers = false, className, ...props }, ref) => {
|
|
5644
|
-
const lines =
|
|
5645
|
-
const rawLines =
|
|
5646
|
-
const highlighted =
|
|
5667
|
+
const lines = React75.useMemo(() => tokenizeLines(code, lang), [code, lang]);
|
|
5668
|
+
const rawLines = React75.useMemo(() => code.split("\n"), [code]);
|
|
5669
|
+
const highlighted = React75.useMemo(() => parseHighlightLines(highlightLines), [highlightLines]);
|
|
5647
5670
|
const isDiff = variant === "diff";
|
|
5648
5671
|
const isTerminal = variant === "terminal";
|
|
5649
5672
|
const showCopy = copy && !isTerminal;
|
|
5650
5673
|
const overlayCopy = showCopy && !filename;
|
|
5651
5674
|
const contentWhitespace = scroll ? "whitespace-pre" : "whitespace-pre-wrap break-words";
|
|
5652
|
-
const pre = /* @__PURE__ */
|
|
5675
|
+
const pre = /* @__PURE__ */ jsx92(
|
|
5653
5676
|
"pre",
|
|
5654
5677
|
{
|
|
5655
5678
|
ref,
|
|
5656
5679
|
className: cn("py-4 font-mono text-xs leading-6 text-text-secondary", scroll && "overflow-x-auto", className),
|
|
5657
5680
|
...props,
|
|
5658
|
-
children: /* @__PURE__ */
|
|
5681
|
+
children: /* @__PURE__ */ jsx92("code", { className: "block min-w-full", children: lines.map((tokens, i) => {
|
|
5659
5682
|
const n = i + 1;
|
|
5660
5683
|
const raw = rawLines[i] ?? "";
|
|
5661
5684
|
const diffKind = isDiff ? raw[0] === "+" ? "add" : raw[0] === "-" ? "remove" : null : null;
|
|
5662
5685
|
const promptLen = isTerminal && raw[0] === "$" ? 1 : 0;
|
|
5663
5686
|
const markerDrop = diffKind ? 1 : promptLen;
|
|
5664
5687
|
const body = markerDrop ? dropLeading(tokens, markerDrop) : tokens;
|
|
5665
|
-
return /* @__PURE__ */
|
|
5688
|
+
return /* @__PURE__ */ jsxs61(
|
|
5666
5689
|
"span",
|
|
5667
5690
|
{
|
|
5668
5691
|
"data-line": n,
|
|
@@ -5675,8 +5698,8 @@ var CodeBlock = React73.forwardRef(
|
|
|
5675
5698
|
!diffKind && highlighted.has(n) && "bg-bg-brand-subtle"
|
|
5676
5699
|
),
|
|
5677
5700
|
children: [
|
|
5678
|
-
showLineNumbers && /* @__PURE__ */
|
|
5679
|
-
(isDiff || isTerminal) && /* @__PURE__ */
|
|
5701
|
+
showLineNumbers && /* @__PURE__ */ jsx92("span", { "aria-hidden": true, className: "mr-3 w-8 shrink-0 select-none text-right text-text-tertiary", children: n }),
|
|
5702
|
+
(isDiff || isTerminal) && /* @__PURE__ */ jsx92(
|
|
5680
5703
|
"span",
|
|
5681
5704
|
{
|
|
5682
5705
|
"aria-hidden": true,
|
|
@@ -5689,7 +5712,7 @@ var CodeBlock = React73.forwardRef(
|
|
|
5689
5712
|
children: diffKind === "add" ? "+" : diffKind === "remove" ? "-" : promptLen > 0 ? "$" : ""
|
|
5690
5713
|
}
|
|
5691
5714
|
),
|
|
5692
|
-
/* @__PURE__ */
|
|
5715
|
+
/* @__PURE__ */ jsx92("span", { className: cn("min-w-0 flex-1", contentWhitespace), children: body.length ? body.map((token, j) => /* @__PURE__ */ jsx92("span", { className: TOKEN_CLASS[token.kind], children: token.text }, j)) : "\xA0" })
|
|
5693
5716
|
]
|
|
5694
5717
|
},
|
|
5695
5718
|
i
|
|
@@ -5697,16 +5720,16 @@ var CodeBlock = React73.forwardRef(
|
|
|
5697
5720
|
}) })
|
|
5698
5721
|
}
|
|
5699
5722
|
);
|
|
5700
|
-
return /* @__PURE__ */
|
|
5701
|
-
filename && /* @__PURE__ */
|
|
5702
|
-
/* @__PURE__ */
|
|
5703
|
-
showCopy && /* @__PURE__ */
|
|
5723
|
+
return /* @__PURE__ */ jsxs61("div", { className: "relative overflow-hidden rounded-lg border border-border-subtle bg-bg-primary", children: [
|
|
5724
|
+
filename && /* @__PURE__ */ jsxs61("div", { className: "flex items-center justify-between gap-3 border-b border-border-subtle px-4 py-2", children: [
|
|
5725
|
+
/* @__PURE__ */ jsx92("span", { className: "font-mono text-xs text-text-tertiary", children: filename }),
|
|
5726
|
+
showCopy && /* @__PURE__ */ jsx92(CopyButton, { value: code, label: "Copy code", className: "size-7" })
|
|
5704
5727
|
] }),
|
|
5705
5728
|
pre,
|
|
5706
5729
|
overlayCopy && // Always visible, on every device: a copy control you have to hover to discover is a
|
|
5707
5730
|
// control most people never find. Opaque (`bg-bg-primary`, the block's own surface) so it
|
|
5708
5731
|
// reads cleanly where a long first line runs under it.
|
|
5709
|
-
/* @__PURE__ */
|
|
5732
|
+
/* @__PURE__ */ jsx92(
|
|
5710
5733
|
CopyButton,
|
|
5711
5734
|
{
|
|
5712
5735
|
value: code,
|
|
@@ -5718,7 +5741,7 @@ var CodeBlock = React73.forwardRef(
|
|
|
5718
5741
|
}
|
|
5719
5742
|
);
|
|
5720
5743
|
CodeBlock.displayName = "CodeBlock";
|
|
5721
|
-
var Code =
|
|
5744
|
+
var Code = React75.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx92(
|
|
5722
5745
|
"code",
|
|
5723
5746
|
{
|
|
5724
5747
|
ref,
|
|
@@ -5732,13 +5755,13 @@ var Code = React73.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
|
5732
5755
|
Code.displayName = "Code";
|
|
5733
5756
|
|
|
5734
5757
|
// src/components/grid-overlay.tsx
|
|
5735
|
-
import * as
|
|
5736
|
-
import { jsx as
|
|
5758
|
+
import * as React76 from "react";
|
|
5759
|
+
import { jsx as jsx93 } from "react/jsx-runtime";
|
|
5737
5760
|
var BASELINE = "var(--grid-gutter) / 2";
|
|
5738
|
-
var GridOverlay =
|
|
5761
|
+
var GridOverlay = React76.forwardRef(
|
|
5739
5762
|
({ columns, baseline = false, className, style, ...props }, ref) => {
|
|
5740
5763
|
const count = Number.isFinite(columns) ? Math.max(1, Math.floor(columns)) : 1;
|
|
5741
|
-
return /* @__PURE__ */
|
|
5764
|
+
return /* @__PURE__ */ jsx93(
|
|
5742
5765
|
"div",
|
|
5743
5766
|
{
|
|
5744
5767
|
ref,
|
|
@@ -5755,7 +5778,7 @@ var GridOverlay = React74.forwardRef(
|
|
|
5755
5778
|
...style
|
|
5756
5779
|
},
|
|
5757
5780
|
...props,
|
|
5758
|
-
children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */
|
|
5781
|
+
children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx93("span", { style: { backgroundColor: "var(--bg-brand)", opacity: 0.1 } }, i))
|
|
5759
5782
|
}
|
|
5760
5783
|
);
|
|
5761
5784
|
}
|
|
@@ -5763,10 +5786,10 @@ var GridOverlay = React74.forwardRef(
|
|
|
5763
5786
|
GridOverlay.displayName = "GridOverlay";
|
|
5764
5787
|
|
|
5765
5788
|
// src/components/attachment-chip.tsx
|
|
5766
|
-
import * as
|
|
5789
|
+
import * as React77 from "react";
|
|
5767
5790
|
import { cva as cva10 } from "class-variance-authority";
|
|
5768
5791
|
import { Link2 as Link22, Clock, Plus as Plus2 } from "lucide-react";
|
|
5769
|
-
import { jsx as
|
|
5792
|
+
import { jsx as jsx94, jsxs as jsxs62 } from "react/jsx-runtime";
|
|
5770
5793
|
var attachmentChipVariants = cva10(
|
|
5771
5794
|
"inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-sm font-medium leading-tight",
|
|
5772
5795
|
{
|
|
@@ -5785,11 +5808,11 @@ var stateIcons = {
|
|
|
5785
5808
|
requested: Clock,
|
|
5786
5809
|
available: Plus2
|
|
5787
5810
|
};
|
|
5788
|
-
var AttachmentChip =
|
|
5811
|
+
var AttachmentChip = React77.forwardRef(
|
|
5789
5812
|
({ state: state2, account, icon, hideIcon = false, className, ...props }, ref) => {
|
|
5790
5813
|
const Icon = icon ?? stateIcons[state2 ?? "attached"];
|
|
5791
|
-
return /* @__PURE__ */
|
|
5792
|
-
!hideIcon && /* @__PURE__ */
|
|
5814
|
+
return /* @__PURE__ */ jsxs62("span", { ref, className: cn(attachmentChipVariants({ state: state2 }), className), ...props, children: [
|
|
5815
|
+
!hideIcon && /* @__PURE__ */ jsx94(Icon, { className: "size-3.5 shrink-0 opacity-90", "aria-hidden": "true" }),
|
|
5793
5816
|
account
|
|
5794
5817
|
] });
|
|
5795
5818
|
}
|
|
@@ -5797,9 +5820,9 @@ var AttachmentChip = React75.forwardRef(
|
|
|
5797
5820
|
AttachmentChip.displayName = "AttachmentChip";
|
|
5798
5821
|
|
|
5799
5822
|
// src/components/connector-card.tsx
|
|
5800
|
-
import * as
|
|
5823
|
+
import * as React78 from "react";
|
|
5801
5824
|
import { AlertTriangle, ChevronDown as ChevronDown6 } from "lucide-react";
|
|
5802
|
-
import { Fragment as Fragment12, jsx as
|
|
5825
|
+
import { Fragment as Fragment12, jsx as jsx95, jsxs as jsxs63 } from "react/jsx-runtime";
|
|
5803
5826
|
var originLabels = {
|
|
5804
5827
|
org: "Attached by the organization",
|
|
5805
5828
|
product: "Attached by this product"
|
|
@@ -5812,7 +5835,7 @@ var statusLabels = {
|
|
|
5812
5835
|
function monogram(name) {
|
|
5813
5836
|
return name.replace(/[^a-zA-Z0-9 ]/g, " ").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
|
|
5814
5837
|
}
|
|
5815
|
-
var ConnectorCard =
|
|
5838
|
+
var ConnectorCard = React78.forwardRef(
|
|
5816
5839
|
({
|
|
5817
5840
|
name,
|
|
5818
5841
|
kind,
|
|
@@ -5833,7 +5856,7 @@ var ConnectorCard = React76.forwardRef(
|
|
|
5833
5856
|
}, ref) => {
|
|
5834
5857
|
const connected = status !== "not-connected";
|
|
5835
5858
|
const label = statusLabel ?? statusLabels[status];
|
|
5836
|
-
const glyphBox = /* @__PURE__ */
|
|
5859
|
+
const glyphBox = /* @__PURE__ */ jsx95(
|
|
5837
5860
|
"div",
|
|
5838
5861
|
{
|
|
5839
5862
|
"aria-hidden": "true",
|
|
@@ -5841,48 +5864,48 @@ var ConnectorCard = React76.forwardRef(
|
|
|
5841
5864
|
children: glyph ?? monogram(name)
|
|
5842
5865
|
}
|
|
5843
5866
|
);
|
|
5844
|
-
const identity = /* @__PURE__ */
|
|
5845
|
-
/* @__PURE__ */
|
|
5846
|
-
(kind || origin) && /* @__PURE__ */
|
|
5847
|
-
kind && /* @__PURE__ */
|
|
5848
|
-
origin && /* @__PURE__ */
|
|
5867
|
+
const identity = /* @__PURE__ */ jsxs63("div", { className: "min-w-0", children: [
|
|
5868
|
+
/* @__PURE__ */ jsx95("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
|
|
5869
|
+
(kind || origin) && /* @__PURE__ */ jsxs63("div", { className: "mt-0.5 flex flex-wrap gap-1", children: [
|
|
5870
|
+
kind && /* @__PURE__ */ jsx95(Badge, { variant: "secondary", children: kind }),
|
|
5871
|
+
origin && /* @__PURE__ */ jsx95(Badge, { variant: "outline", children: originLabels[origin] })
|
|
5849
5872
|
] })
|
|
5850
5873
|
] });
|
|
5851
|
-
const statusBadge = label ? /* @__PURE__ */
|
|
5852
|
-
const accessNote = access ? /* @__PURE__ */
|
|
5874
|
+
const statusBadge = label ? /* @__PURE__ */ jsx95(Badge, { variant: "status", children: label }) : null;
|
|
5875
|
+
const accessNote = access ? /* @__PURE__ */ jsxs63(
|
|
5853
5876
|
"div",
|
|
5854
5877
|
{
|
|
5855
5878
|
role: "note",
|
|
5856
5879
|
className: "flex items-start gap-2 border-t border-border-subtle bg-bg-secondary px-4 py-2.5 text-xs font-medium text-text-secondary",
|
|
5857
5880
|
children: [
|
|
5858
|
-
/* @__PURE__ */
|
|
5859
|
-
/* @__PURE__ */
|
|
5881
|
+
/* @__PURE__ */ jsx95(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0", "aria-hidden": "true" }),
|
|
5882
|
+
/* @__PURE__ */ jsx95("span", { children: access })
|
|
5860
5883
|
]
|
|
5861
5884
|
}
|
|
5862
5885
|
) : null;
|
|
5863
5886
|
const footerAction = collapsible ? action : connected && action;
|
|
5864
|
-
const footer = attachedCount !== void 0 || footerAction ? /* @__PURE__ */
|
|
5865
|
-
/* @__PURE__ */
|
|
5887
|
+
const footer = attachedCount !== void 0 || footerAction ? /* @__PURE__ */ jsxs63("div", { className: "flex items-center justify-between border-t border-border-subtle px-4 py-3", children: [
|
|
5888
|
+
/* @__PURE__ */ jsx95("span", { className: "text-sm text-text-secondary", children: attachedCount !== void 0 ? /* @__PURE__ */ jsxs63(Fragment12, { children: [
|
|
5866
5889
|
"Attached to ",
|
|
5867
|
-
/* @__PURE__ */
|
|
5890
|
+
/* @__PURE__ */ jsx95("span", { className: "font-semibold text-text-primary", children: attachedCount }),
|
|
5868
5891
|
" ",
|
|
5869
5892
|
attachedCount === 1 ? "product" : "products"
|
|
5870
|
-
] }) : /* @__PURE__ */
|
|
5893
|
+
] }) : /* @__PURE__ */ jsx95("span", { className: "text-text-tertiary", children: "Not attached to any product yet" }) }),
|
|
5871
5894
|
footerAction
|
|
5872
5895
|
] }) : null;
|
|
5873
|
-
const drawer = children ? /* @__PURE__ */
|
|
5896
|
+
const drawer = children ? /* @__PURE__ */ jsx95("div", { "data-slot": "drawer", className: "border-t border-border-subtle", children }) : null;
|
|
5874
5897
|
if (!collapsible) {
|
|
5875
|
-
return /* @__PURE__ */
|
|
5898
|
+
return /* @__PURE__ */ jsxs63(
|
|
5876
5899
|
Card,
|
|
5877
5900
|
{
|
|
5878
5901
|
ref,
|
|
5879
5902
|
className: cn(status === "not-connected" && "border-dashed border-border-default", className),
|
|
5880
5903
|
...props,
|
|
5881
5904
|
children: [
|
|
5882
|
-
/* @__PURE__ */
|
|
5905
|
+
/* @__PURE__ */ jsxs63("div", { className: "flex items-center gap-3 p-4", children: [
|
|
5883
5906
|
glyphBox,
|
|
5884
5907
|
identity,
|
|
5885
|
-
/* @__PURE__ */
|
|
5908
|
+
/* @__PURE__ */ jsx95("div", { className: "ml-auto shrink-0", children: connected ? statusBadge : action ?? statusBadge })
|
|
5886
5909
|
] }),
|
|
5887
5910
|
accessNote,
|
|
5888
5911
|
footer,
|
|
@@ -5891,7 +5914,7 @@ var ConnectorCard = React76.forwardRef(
|
|
|
5891
5914
|
}
|
|
5892
5915
|
);
|
|
5893
5916
|
}
|
|
5894
|
-
return /* @__PURE__ */
|
|
5917
|
+
return /* @__PURE__ */ jsx95(Collapsible, { defaultOpen, open, onOpenChange, children: /* @__PURE__ */ jsxs63(
|
|
5895
5918
|
Card,
|
|
5896
5919
|
{
|
|
5897
5920
|
ref,
|
|
@@ -5902,7 +5925,7 @@ var ConnectorCard = React76.forwardRef(
|
|
|
5902
5925
|
),
|
|
5903
5926
|
...props,
|
|
5904
5927
|
children: [
|
|
5905
|
-
/* @__PURE__ */
|
|
5928
|
+
/* @__PURE__ */ jsx95(CollapsibleTrigger2, { asChild: true, children: /* @__PURE__ */ jsxs63(
|
|
5906
5929
|
"button",
|
|
5907
5930
|
{
|
|
5908
5931
|
type: "button",
|
|
@@ -5910,9 +5933,9 @@ var ConnectorCard = React76.forwardRef(
|
|
|
5910
5933
|
children: [
|
|
5911
5934
|
glyphBox,
|
|
5912
5935
|
identity,
|
|
5913
|
-
/* @__PURE__ */
|
|
5936
|
+
/* @__PURE__ */ jsxs63("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: [
|
|
5914
5937
|
statusBadge,
|
|
5915
|
-
/* @__PURE__ */
|
|
5938
|
+
/* @__PURE__ */ jsx95(
|
|
5916
5939
|
ChevronDown6,
|
|
5917
5940
|
{
|
|
5918
5941
|
"aria-hidden": "true",
|
|
@@ -5923,7 +5946,7 @@ var ConnectorCard = React76.forwardRef(
|
|
|
5923
5946
|
]
|
|
5924
5947
|
}
|
|
5925
5948
|
) }),
|
|
5926
|
-
/* @__PURE__ */
|
|
5949
|
+
/* @__PURE__ */ jsxs63(CollapsibleContent2, { children: [
|
|
5927
5950
|
accessNote,
|
|
5928
5951
|
footer,
|
|
5929
5952
|
drawer
|
|
@@ -5936,33 +5959,33 @@ var ConnectorCard = React76.forwardRef(
|
|
|
5936
5959
|
ConnectorCard.displayName = "ConnectorCard";
|
|
5937
5960
|
|
|
5938
5961
|
// src/components/request-row.tsx
|
|
5939
|
-
import * as
|
|
5940
|
-
import { Fragment as Fragment13, jsx as
|
|
5962
|
+
import * as React79 from "react";
|
|
5963
|
+
import { Fragment as Fragment13, jsx as jsx96, jsxs as jsxs64 } from "react/jsx-runtime";
|
|
5941
5964
|
function monogram2(name) {
|
|
5942
5965
|
return name.replace(/[^a-zA-Z0-9 ]/g, " ").split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join("");
|
|
5943
5966
|
}
|
|
5944
|
-
var RequestRow =
|
|
5967
|
+
var RequestRow = React79.forwardRef(
|
|
5945
5968
|
({ surface, name, state: state2, glyph, subtitle, account, onApprove, onDeny, onRequest, onRevoke, action, className, ...props }, ref) => {
|
|
5946
5969
|
let controls = action;
|
|
5947
5970
|
if (controls === void 0) {
|
|
5948
5971
|
if (surface === "org" && state2 === "pending") {
|
|
5949
|
-
controls = /* @__PURE__ */
|
|
5950
|
-
/* @__PURE__ */
|
|
5951
|
-
/* @__PURE__ */
|
|
5972
|
+
controls = /* @__PURE__ */ jsxs64(Fragment13, { children: [
|
|
5973
|
+
/* @__PURE__ */ jsx96(Button, { variant: "ghost", size: "sm", onClick: onDeny, children: "Deny" }),
|
|
5974
|
+
/* @__PURE__ */ jsx96(Button, { variant: "outline", size: "sm", onClick: onApprove, children: "Approve" })
|
|
5952
5975
|
] });
|
|
5953
5976
|
} else if (state2 === "sent") {
|
|
5954
|
-
controls = /* @__PURE__ */
|
|
5977
|
+
controls = /* @__PURE__ */ jsx96(Button, { variant: "destructive-ghost", size: "sm", onClick: onRevoke, children: "Revoke" });
|
|
5955
5978
|
} else if (state2 === "available") {
|
|
5956
|
-
controls = /* @__PURE__ */
|
|
5979
|
+
controls = /* @__PURE__ */ jsx96(Button, { variant: "outline", size: "sm", onClick: onRequest, children: "Request" });
|
|
5957
5980
|
} else if (state2 === "pending") {
|
|
5958
|
-
controls = /* @__PURE__ */
|
|
5981
|
+
controls = /* @__PURE__ */ jsx96(Badge, { variant: "status", children: "Requested" });
|
|
5959
5982
|
} else if (state2 === "denied") {
|
|
5960
|
-
controls = /* @__PURE__ */
|
|
5983
|
+
controls = /* @__PURE__ */ jsx96(Badge, { variant: "status", children: "Denied" });
|
|
5961
5984
|
} else if (state2 === "attached") {
|
|
5962
|
-
controls = account ? /* @__PURE__ */
|
|
5985
|
+
controls = account ? /* @__PURE__ */ jsx96(AttachmentChip, { state: "attached", account }) : /* @__PURE__ */ jsx96(Badge, { variant: "status", children: "In use" });
|
|
5963
5986
|
}
|
|
5964
5987
|
}
|
|
5965
|
-
return /* @__PURE__ */
|
|
5988
|
+
return /* @__PURE__ */ jsxs64(
|
|
5966
5989
|
"div",
|
|
5967
5990
|
{
|
|
5968
5991
|
ref,
|
|
@@ -5972,7 +5995,7 @@ var RequestRow = React77.forwardRef(
|
|
|
5972
5995
|
),
|
|
5973
5996
|
...props,
|
|
5974
5997
|
children: [
|
|
5975
|
-
/* @__PURE__ */
|
|
5998
|
+
/* @__PURE__ */ jsx96(
|
|
5976
5999
|
"div",
|
|
5977
6000
|
{
|
|
5978
6001
|
"aria-hidden": "true",
|
|
@@ -5980,11 +6003,11 @@ var RequestRow = React77.forwardRef(
|
|
|
5980
6003
|
children: glyph ?? monogram2(name)
|
|
5981
6004
|
}
|
|
5982
6005
|
),
|
|
5983
|
-
/* @__PURE__ */
|
|
5984
|
-
/* @__PURE__ */
|
|
5985
|
-
subtitle && /* @__PURE__ */
|
|
6006
|
+
/* @__PURE__ */ jsxs64("div", { className: "min-w-0", children: [
|
|
6007
|
+
/* @__PURE__ */ jsx96("p", { className: "truncate text-sm font-semibold text-text-primary", children: name }),
|
|
6008
|
+
subtitle && /* @__PURE__ */ jsx96("p", { className: "truncate text-xs text-text-tertiary", children: subtitle })
|
|
5986
6009
|
] }),
|
|
5987
|
-
/* @__PURE__ */
|
|
6010
|
+
/* @__PURE__ */ jsx96("div", { className: "ml-auto flex shrink-0 items-center gap-2", children: controls })
|
|
5988
6011
|
]
|
|
5989
6012
|
}
|
|
5990
6013
|
);
|
|
@@ -5993,9 +6016,9 @@ var RequestRow = React77.forwardRef(
|
|
|
5993
6016
|
RequestRow.displayName = "RequestRow";
|
|
5994
6017
|
|
|
5995
6018
|
// src/components/feedback-button.tsx
|
|
5996
|
-
import * as
|
|
6019
|
+
import * as React80 from "react";
|
|
5997
6020
|
import { MessageSquare, Loader2 as Loader23, CheckCircle2 } from "lucide-react";
|
|
5998
|
-
import { jsx as
|
|
6021
|
+
import { jsx as jsx97, jsxs as jsxs65 } from "react/jsx-runtime";
|
|
5999
6022
|
var TITLE_MAX = 256;
|
|
6000
6023
|
var DETAILS_MAX = 65536;
|
|
6001
6024
|
var DEFAULT_LABELS = {
|
|
@@ -6009,15 +6032,15 @@ var DEFAULT_LABELS = {
|
|
|
6009
6032
|
};
|
|
6010
6033
|
function FeedbackButton({ onSubmit, labels, className }) {
|
|
6011
6034
|
const l = { ...DEFAULT_LABELS, ...labels };
|
|
6012
|
-
const uid =
|
|
6035
|
+
const uid = React80.useId();
|
|
6013
6036
|
const titleId = `${uid}-title`;
|
|
6014
6037
|
const detailsId = `${uid}-details`;
|
|
6015
6038
|
const titleErrId = `${uid}-title-error`;
|
|
6016
6039
|
const detailsErrId = `${uid}-details-error`;
|
|
6017
|
-
const [open, setOpen] =
|
|
6018
|
-
const [status, setStatus] =
|
|
6019
|
-
const [title, setTitle] =
|
|
6020
|
-
const [details, setDetails] =
|
|
6040
|
+
const [open, setOpen] = React80.useState(false);
|
|
6041
|
+
const [status, setStatus] = React80.useState("idle");
|
|
6042
|
+
const [title, setTitle] = React80.useState("");
|
|
6043
|
+
const [details, setDetails] = React80.useState("");
|
|
6021
6044
|
const titleTooLong = title.length > TITLE_MAX;
|
|
6022
6045
|
const detailsTooLong = details.length > DETAILS_MAX;
|
|
6023
6046
|
const titleEmpty = title.trim().length === 0;
|
|
@@ -6042,20 +6065,20 @@ function FeedbackButton({ onSubmit, labels, className }) {
|
|
|
6042
6065
|
setStatus("error");
|
|
6043
6066
|
}
|
|
6044
6067
|
};
|
|
6045
|
-
return /* @__PURE__ */
|
|
6046
|
-
/* @__PURE__ */
|
|
6047
|
-
/* @__PURE__ */
|
|
6068
|
+
return /* @__PURE__ */ jsxs65(Popover, { open, onOpenChange: changeOpen, children: [
|
|
6069
|
+
/* @__PURE__ */ jsx97(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs65(Button, { variant: "ghost", size: "sm", "aria-label": l.trigger, className, children: [
|
|
6070
|
+
/* @__PURE__ */ jsx97(MessageSquare, { className: "size-4", "aria-hidden": "true" }),
|
|
6048
6071
|
l.trigger
|
|
6049
6072
|
] }) }),
|
|
6050
|
-
/* @__PURE__ */
|
|
6051
|
-
/* @__PURE__ */
|
|
6052
|
-
/* @__PURE__ */
|
|
6053
|
-
/* @__PURE__ */
|
|
6054
|
-
] }) : /* @__PURE__ */
|
|
6055
|
-
/* @__PURE__ */
|
|
6056
|
-
/* @__PURE__ */
|
|
6057
|
-
/* @__PURE__ */
|
|
6058
|
-
/* @__PURE__ */
|
|
6073
|
+
/* @__PURE__ */ jsx97(PopoverContent, { align: "end", side: "bottom", className: "w-80", children: status === "success" ? /* @__PURE__ */ jsxs65("div", { className: "flex flex-col items-center gap-3 py-2 text-center", children: [
|
|
6074
|
+
/* @__PURE__ */ jsx97(CheckCircle2, { className: "size-8 text-text-success", "aria-hidden": "true" }),
|
|
6075
|
+
/* @__PURE__ */ jsx97("p", { role: "status", className: "text-sm text-text-primary", children: l.success }),
|
|
6076
|
+
/* @__PURE__ */ jsx97(Button, { variant: "outline", size: "sm", onClick: () => changeOpen(false), children: "Close" })
|
|
6077
|
+
] }) : /* @__PURE__ */ jsxs65("form", { onSubmit: handleSubmit, className: "flex flex-col gap-3", children: [
|
|
6078
|
+
/* @__PURE__ */ jsx97("p", { className: "text-sm font-medium text-text-primary", children: l.title }),
|
|
6079
|
+
/* @__PURE__ */ jsxs65("div", { className: "flex flex-col gap-1.5", children: [
|
|
6080
|
+
/* @__PURE__ */ jsx97(Label2, { htmlFor: titleId, children: l.titleField }),
|
|
6081
|
+
/* @__PURE__ */ jsx97(
|
|
6059
6082
|
Input,
|
|
6060
6083
|
{
|
|
6061
6084
|
id: titleId,
|
|
@@ -6066,16 +6089,16 @@ function FeedbackButton({ onSubmit, labels, className }) {
|
|
|
6066
6089
|
"aria-describedby": titleTooLong ? titleErrId : void 0
|
|
6067
6090
|
}
|
|
6068
6091
|
),
|
|
6069
|
-
titleTooLong && /* @__PURE__ */
|
|
6092
|
+
titleTooLong && /* @__PURE__ */ jsxs65("p", { id: titleErrId, className: "text-xs text-text-danger", children: [
|
|
6070
6093
|
l.titleField,
|
|
6071
6094
|
" must be ",
|
|
6072
6095
|
TITLE_MAX,
|
|
6073
6096
|
" characters or fewer."
|
|
6074
6097
|
] })
|
|
6075
6098
|
] }),
|
|
6076
|
-
/* @__PURE__ */
|
|
6077
|
-
/* @__PURE__ */
|
|
6078
|
-
/* @__PURE__ */
|
|
6099
|
+
/* @__PURE__ */ jsxs65("div", { className: "flex flex-col gap-1.5", children: [
|
|
6100
|
+
/* @__PURE__ */ jsx97(Label2, { htmlFor: detailsId, children: l.detailsField }),
|
|
6101
|
+
/* @__PURE__ */ jsx97(
|
|
6079
6102
|
Textarea,
|
|
6080
6103
|
{
|
|
6081
6104
|
id: detailsId,
|
|
@@ -6086,16 +6109,16 @@ function FeedbackButton({ onSubmit, labels, className }) {
|
|
|
6086
6109
|
"aria-describedby": detailsTooLong ? detailsErrId : void 0
|
|
6087
6110
|
}
|
|
6088
6111
|
),
|
|
6089
|
-
detailsTooLong && /* @__PURE__ */
|
|
6112
|
+
detailsTooLong && /* @__PURE__ */ jsxs65("p", { id: detailsErrId, className: "text-xs text-text-danger", children: [
|
|
6090
6113
|
l.detailsField,
|
|
6091
6114
|
" must be ",
|
|
6092
6115
|
DETAILS_MAX,
|
|
6093
6116
|
" characters or fewer."
|
|
6094
6117
|
] })
|
|
6095
6118
|
] }),
|
|
6096
|
-
status === "error" && /* @__PURE__ */
|
|
6097
|
-
/* @__PURE__ */
|
|
6098
|
-
submitting && /* @__PURE__ */
|
|
6119
|
+
status === "error" && /* @__PURE__ */ jsx97(InlineError, { children: l.error }),
|
|
6120
|
+
/* @__PURE__ */ jsxs65(Button, { type: "submit", disabled: !valid || submitting, children: [
|
|
6121
|
+
submitting && /* @__PURE__ */ jsx97(Loader23, { className: "size-4 animate-spin", "aria-hidden": "true" }),
|
|
6099
6122
|
l.submit
|
|
6100
6123
|
] })
|
|
6101
6124
|
] }) })
|
|
@@ -6151,27 +6174,27 @@ function isNotificationSettled(item) {
|
|
|
6151
6174
|
}
|
|
6152
6175
|
|
|
6153
6176
|
// src/components/notification-bell.tsx
|
|
6154
|
-
import * as
|
|
6177
|
+
import * as React82 from "react";
|
|
6155
6178
|
import { BellRing, Settings } from "lucide-react";
|
|
6156
6179
|
|
|
6157
6180
|
// src/components/notification-row.tsx
|
|
6158
|
-
import * as
|
|
6181
|
+
import * as React81 from "react";
|
|
6159
6182
|
|
|
6160
6183
|
// src/components/notification-parts.tsx
|
|
6161
6184
|
import { Check as Check10 } from "lucide-react";
|
|
6162
|
-
import { jsx as
|
|
6185
|
+
import { jsx as jsx98 } from "react/jsx-runtime";
|
|
6163
6186
|
var rowControlHitArea = "relative after:absolute after:-inset-x-2 after:-top-1.5 after:-bottom-2.5";
|
|
6164
6187
|
function rowControlName(label, title) {
|
|
6165
6188
|
return `${label} "${title}"`;
|
|
6166
6189
|
}
|
|
6167
6190
|
function MarkReadButton({ title, onClick }) {
|
|
6168
6191
|
const label = `Mark "${title}" as read`;
|
|
6169
|
-
return /* @__PURE__ */
|
|
6192
|
+
return /* @__PURE__ */ jsx98(
|
|
6170
6193
|
Button,
|
|
6171
6194
|
{
|
|
6172
6195
|
variant: "ghost",
|
|
6173
6196
|
size: "xs",
|
|
6174
|
-
icon: /* @__PURE__ */
|
|
6197
|
+
icon: /* @__PURE__ */ jsx98(Check10, {}),
|
|
6175
6198
|
"aria-label": label,
|
|
6176
6199
|
onClick,
|
|
6177
6200
|
className: "relative text-text-secondary after:absolute after:-inset-3 hover:text-text-primary"
|
|
@@ -6185,12 +6208,12 @@ function DeepLinkControl({
|
|
|
6185
6208
|
onClick
|
|
6186
6209
|
}) {
|
|
6187
6210
|
const name = rowControlName(link.label, title);
|
|
6188
|
-
return link.href ? /* @__PURE__ */
|
|
6211
|
+
return link.href ? /* @__PURE__ */ jsx98("a", { href: link.href, "aria-label": name, onClick, className, children: link.label }) : /* @__PURE__ */ jsx98("button", { type: "button", "aria-label": name, onClick, className, children: link.label });
|
|
6189
6212
|
}
|
|
6190
6213
|
|
|
6191
6214
|
// src/components/notification-row.tsx
|
|
6192
|
-
import { jsx as
|
|
6193
|
-
var NotificationRow =
|
|
6215
|
+
import { jsx as jsx99, jsxs as jsxs66 } from "react/jsx-runtime";
|
|
6216
|
+
var NotificationRow = React81.forwardRef(
|
|
6194
6217
|
({ item, onItemClick, onActionClick, onMarkRead, formatAge, className, ...props }, ref) => {
|
|
6195
6218
|
const settled = isNotificationSettled(item);
|
|
6196
6219
|
const unread = !settled && !item.read;
|
|
@@ -6202,20 +6225,20 @@ var NotificationRow = React79.forwardRef(
|
|
|
6202
6225
|
// Three steps of one ladder, and every one of them a token a reader can read:
|
|
6203
6226
|
// unread is the loudest, read is quieter, settled is quietest. An opacity is
|
|
6204
6227
|
// not a step — it drags the text under the contrast floor with the row.
|
|
6205
|
-
/* @__PURE__ */
|
|
6228
|
+
/* @__PURE__ */ jsxs66(
|
|
6206
6229
|
"div",
|
|
6207
6230
|
{
|
|
6208
6231
|
ref,
|
|
6209
6232
|
className: cn("group rounded-lg bg-bg-surface px-3 py-2.5", className),
|
|
6210
6233
|
...props,
|
|
6211
6234
|
children: [
|
|
6212
|
-
/* @__PURE__ */
|
|
6213
|
-
/* @__PURE__ */
|
|
6214
|
-
/* @__PURE__ */
|
|
6215
|
-
/* @__PURE__ */
|
|
6235
|
+
/* @__PURE__ */ jsxs66("div", { className: "flex items-start gap-2.5", children: [
|
|
6236
|
+
/* @__PURE__ */ jsxs66("div", { className: "min-w-0 flex-1", children: [
|
|
6237
|
+
/* @__PURE__ */ jsxs66("p", { className: "truncate text-xs text-text-tertiary", children: [
|
|
6238
|
+
/* @__PURE__ */ jsx99("span", { className: "font-semibold uppercase tracking-wide text-text-secondary", children: item.source }),
|
|
6216
6239
|
item.receipt ? `, ${item.receipt}` : ""
|
|
6217
6240
|
] }),
|
|
6218
|
-
/* @__PURE__ */
|
|
6241
|
+
/* @__PURE__ */ jsx99(
|
|
6219
6242
|
"button",
|
|
6220
6243
|
{
|
|
6221
6244
|
type: "button",
|
|
@@ -6227,7 +6250,7 @@ var NotificationRow = React79.forwardRef(
|
|
|
6227
6250
|
children: item.title
|
|
6228
6251
|
}
|
|
6229
6252
|
),
|
|
6230
|
-
item.body && /* @__PURE__ */
|
|
6253
|
+
item.body && /* @__PURE__ */ jsx99(
|
|
6231
6254
|
"p",
|
|
6232
6255
|
{
|
|
6233
6256
|
className: cn(
|
|
@@ -6238,15 +6261,15 @@ var NotificationRow = React79.forwardRef(
|
|
|
6238
6261
|
}
|
|
6239
6262
|
)
|
|
6240
6263
|
] }),
|
|
6241
|
-
(age || markable) && /* @__PURE__ */
|
|
6242
|
-
stamp && age && /* @__PURE__ */
|
|
6243
|
-
markable && /* @__PURE__ */
|
|
6264
|
+
(age || markable) && /* @__PURE__ */ jsxs66("div", { className: "mt-px flex shrink-0 items-center gap-1", children: [
|
|
6265
|
+
stamp && age && /* @__PURE__ */ jsx99("time", { dateTime: toDateTimeAttribute(stamp), className: "text-xs text-text-tertiary", children: age }),
|
|
6266
|
+
markable && /* @__PURE__ */ jsx99(MarkReadButton, { title: item.title, onClick: () => onMarkRead(item.id) })
|
|
6244
6267
|
] })
|
|
6245
6268
|
] }),
|
|
6246
|
-
(actions.length > 0 || item.deepLink) && /* @__PURE__ */
|
|
6269
|
+
(actions.length > 0 || item.deepLink) && /* @__PURE__ */ jsxs66("div", { className: "mt-2 flex flex-wrap items-center gap-x-4 gap-y-2", children: [
|
|
6247
6270
|
actions.map((action) => {
|
|
6248
6271
|
const chip = action.variant === "primary" || action.variant === "destructive";
|
|
6249
|
-
return /* @__PURE__ */
|
|
6272
|
+
return /* @__PURE__ */ jsx99(
|
|
6250
6273
|
"button",
|
|
6251
6274
|
{
|
|
6252
6275
|
type: "button",
|
|
@@ -6263,7 +6286,7 @@ var NotificationRow = React79.forwardRef(
|
|
|
6263
6286
|
action.id
|
|
6264
6287
|
);
|
|
6265
6288
|
}),
|
|
6266
|
-
item.deepLink && /* @__PURE__ */
|
|
6289
|
+
item.deepLink && /* @__PURE__ */ jsx99(
|
|
6267
6290
|
DeepLinkControl,
|
|
6268
6291
|
{
|
|
6269
6292
|
link: item.deepLink,
|
|
@@ -6285,8 +6308,8 @@ var NotificationRow = React79.forwardRef(
|
|
|
6285
6308
|
NotificationRow.displayName = "NotificationRow";
|
|
6286
6309
|
|
|
6287
6310
|
// src/components/notification-bell.tsx
|
|
6288
|
-
import { jsx as
|
|
6289
|
-
var NotificationBell =
|
|
6311
|
+
import { jsx as jsx100, jsxs as jsxs67 } from "react/jsx-runtime";
|
|
6312
|
+
var NotificationBell = React82.forwardRef(
|
|
6290
6313
|
({
|
|
6291
6314
|
items,
|
|
6292
6315
|
unreadCount,
|
|
@@ -6306,8 +6329,8 @@ var NotificationBell = React80.forwardRef(
|
|
|
6306
6329
|
const unread = unreadCount ?? items.filter((n) => !n.read && n.cls !== "ephemeral").length;
|
|
6307
6330
|
const rows = items.slice(0, maxItems);
|
|
6308
6331
|
const hidden = items.length - rows.length;
|
|
6309
|
-
return /* @__PURE__ */
|
|
6310
|
-
/* @__PURE__ */
|
|
6332
|
+
return /* @__PURE__ */ jsxs67(Popover, { open, onOpenChange, children: [
|
|
6333
|
+
/* @__PURE__ */ jsx100(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs67(
|
|
6311
6334
|
"button",
|
|
6312
6335
|
{
|
|
6313
6336
|
ref,
|
|
@@ -6318,12 +6341,12 @@ var NotificationBell = React80.forwardRef(
|
|
|
6318
6341
|
className
|
|
6319
6342
|
),
|
|
6320
6343
|
children: [
|
|
6321
|
-
/* @__PURE__ */
|
|
6322
|
-
unread > 0 && /* @__PURE__ */
|
|
6344
|
+
/* @__PURE__ */ jsx100(BellRing, { className: "size-[18px]", "aria-hidden": "true" }),
|
|
6345
|
+
unread > 0 && /* @__PURE__ */ jsx100("span", { className: "absolute -right-1.5 -top-1.5 flex size-[17px] items-center justify-center rounded-full bg-bg-brand text-xs font-bold leading-none text-text-on-brand ring-2 ring-bg-surface", children: unread })
|
|
6323
6346
|
]
|
|
6324
6347
|
}
|
|
6325
6348
|
) }),
|
|
6326
|
-
/* @__PURE__ */
|
|
6349
|
+
/* @__PURE__ */ jsxs67(
|
|
6327
6350
|
PopoverContent,
|
|
6328
6351
|
{
|
|
6329
6352
|
align: "end",
|
|
@@ -6331,10 +6354,10 @@ var NotificationBell = React80.forwardRef(
|
|
|
6331
6354
|
style: { maxHeight: "var(--radix-popover-content-available-height, 32rem)" },
|
|
6332
6355
|
className: "flex w-[380px] flex-col overflow-hidden p-0",
|
|
6333
6356
|
children: [
|
|
6334
|
-
/* @__PURE__ */
|
|
6335
|
-
/* @__PURE__ */
|
|
6336
|
-
/* @__PURE__ */
|
|
6337
|
-
unread === 0 ? /* @__PURE__ */
|
|
6357
|
+
/* @__PURE__ */ jsxs67("div", { className: "flex shrink-0 items-center justify-between px-5 py-3", children: [
|
|
6358
|
+
/* @__PURE__ */ jsx100("span", { className: "text-sm font-bold text-text-primary", children: "Notification center" }),
|
|
6359
|
+
/* @__PURE__ */ jsxs67("div", { className: "flex items-center gap-3", children: [
|
|
6360
|
+
unread === 0 ? /* @__PURE__ */ jsx100("span", { className: "text-sm font-medium text-text-tertiary", children: "All read" }) : /* @__PURE__ */ jsx100(
|
|
6338
6361
|
"button",
|
|
6339
6362
|
{
|
|
6340
6363
|
type: "button",
|
|
@@ -6343,19 +6366,19 @@ var NotificationBell = React80.forwardRef(
|
|
|
6343
6366
|
children: "Mark all read"
|
|
6344
6367
|
}
|
|
6345
6368
|
),
|
|
6346
|
-
onOpenSettings && /* @__PURE__ */
|
|
6369
|
+
onOpenSettings && /* @__PURE__ */ jsx100(
|
|
6347
6370
|
"button",
|
|
6348
6371
|
{
|
|
6349
6372
|
type: "button",
|
|
6350
6373
|
"aria-label": "Notification settings",
|
|
6351
6374
|
onClick: () => onOpenSettings(),
|
|
6352
6375
|
className: "flex size-6 items-center justify-center rounded-md text-text-tertiary transition-colors hover:bg-bg-surface hover:text-text-primary",
|
|
6353
|
-
children: /* @__PURE__ */
|
|
6376
|
+
children: /* @__PURE__ */ jsx100(Settings, { className: "size-[15px]", "aria-hidden": "true" })
|
|
6354
6377
|
}
|
|
6355
6378
|
)
|
|
6356
6379
|
] })
|
|
6357
6380
|
] }),
|
|
6358
|
-
/* @__PURE__ */
|
|
6381
|
+
/* @__PURE__ */ jsx100("div", { className: "min-h-0 flex-1 space-y-1.5 overflow-y-auto px-2 pb-2", children: rows.length === 0 ? /* @__PURE__ */ jsx100("p", { className: "px-3 py-12 text-center text-xs leading-relaxed text-text-tertiary", children: "Nothing yet. Everything addressed to you lands here." }) : rows.map((item) => /* @__PURE__ */ jsx100(
|
|
6359
6382
|
NotificationRow,
|
|
6360
6383
|
{
|
|
6361
6384
|
item,
|
|
@@ -6366,8 +6389,8 @@ var NotificationBell = React80.forwardRef(
|
|
|
6366
6389
|
},
|
|
6367
6390
|
item.id
|
|
6368
6391
|
)) }),
|
|
6369
|
-
footer != null && /* @__PURE__ */
|
|
6370
|
-
items.length > 0 && onOpenArchive && /* @__PURE__ */
|
|
6392
|
+
footer != null && /* @__PURE__ */ jsx100("div", { className: "shrink-0 px-5 py-2.5 text-xs text-text-tertiary", children: footer }),
|
|
6393
|
+
items.length > 0 && onOpenArchive && /* @__PURE__ */ jsx100(
|
|
6371
6394
|
"button",
|
|
6372
6395
|
{
|
|
6373
6396
|
type: "button",
|
|
@@ -6385,9 +6408,9 @@ var NotificationBell = React80.forwardRef(
|
|
|
6385
6408
|
NotificationBell.displayName = "NotificationBell";
|
|
6386
6409
|
|
|
6387
6410
|
// src/components/notification-center.tsx
|
|
6388
|
-
import * as
|
|
6411
|
+
import * as React83 from "react";
|
|
6389
6412
|
import { Check as Check11, Search as Search2 } from "lucide-react";
|
|
6390
|
-
import { jsx as
|
|
6413
|
+
import { jsx as jsx101, jsxs as jsxs68 } from "react/jsx-runtime";
|
|
6391
6414
|
var chipBase = "rounded-lg px-3 py-1.5 text-sm font-medium transition-colors";
|
|
6392
6415
|
var chipOn = "bg-bg-brand-subtle text-text-brand";
|
|
6393
6416
|
var chipOff = "bg-bg-elevated text-text-secondary hover:text-text-primary";
|
|
@@ -6402,12 +6425,12 @@ function CenterRow({
|
|
|
6402
6425
|
const markable = Boolean(onMarkRead) && unread && item.cls !== "ephemeral";
|
|
6403
6426
|
const stamp = item.createdAt ? item.createdAt instanceof Date ? item.createdAt : new Date(item.createdAt) : null;
|
|
6404
6427
|
const age = stamp ? formatAge(stamp) : null;
|
|
6405
|
-
return /* @__PURE__ */
|
|
6406
|
-
/* @__PURE__ */
|
|
6407
|
-
/* @__PURE__ */
|
|
6408
|
-
/* @__PURE__ */
|
|
6409
|
-
(age || markable) && /* @__PURE__ */
|
|
6410
|
-
stamp && age && /* @__PURE__ */
|
|
6428
|
+
return /* @__PURE__ */ jsxs68("article", { className: "group rounded-lg bg-bg-elevated px-4 py-3", children: [
|
|
6429
|
+
/* @__PURE__ */ jsxs68("div", { className: "flex items-center gap-2", children: [
|
|
6430
|
+
/* @__PURE__ */ jsx101("span", { className: "text-xs font-semibold uppercase tracking-[0.09em] text-text-secondary", children: item.source }),
|
|
6431
|
+
/* @__PURE__ */ jsx101(Badge, { variant: severityBadgeVariant(item.severity), children: severityLabels[item.severity] }),
|
|
6432
|
+
(age || markable) && /* @__PURE__ */ jsxs68("div", { className: "ml-auto flex shrink-0 items-center gap-1.5", children: [
|
|
6433
|
+
stamp && age && /* @__PURE__ */ jsx101(
|
|
6411
6434
|
"time",
|
|
6412
6435
|
{
|
|
6413
6436
|
dateTime: toDateTimeAttribute(stamp),
|
|
@@ -6415,10 +6438,10 @@ function CenterRow({
|
|
|
6415
6438
|
children: age
|
|
6416
6439
|
}
|
|
6417
6440
|
),
|
|
6418
|
-
markable && /* @__PURE__ */
|
|
6441
|
+
markable && /* @__PURE__ */ jsx101(MarkReadButton, { title: item.title, onClick: () => onMarkRead(item.id) })
|
|
6419
6442
|
] })
|
|
6420
6443
|
] }),
|
|
6421
|
-
/* @__PURE__ */
|
|
6444
|
+
/* @__PURE__ */ jsx101(
|
|
6422
6445
|
"button",
|
|
6423
6446
|
{
|
|
6424
6447
|
type: "button",
|
|
@@ -6430,13 +6453,13 @@ function CenterRow({
|
|
|
6430
6453
|
children: item.title
|
|
6431
6454
|
}
|
|
6432
6455
|
),
|
|
6433
|
-
item.body && /* @__PURE__ */
|
|
6434
|
-
(item.receipt || item.deepLink) && /* @__PURE__ */
|
|
6435
|
-
item.receipt && /* @__PURE__ */
|
|
6436
|
-
/* @__PURE__ */
|
|
6456
|
+
item.body && /* @__PURE__ */ jsx101("p", { className: "mt-0.5 text-sm leading-snug text-text-secondary", children: item.body }),
|
|
6457
|
+
(item.receipt || item.deepLink) && /* @__PURE__ */ jsxs68("div", { className: "mt-2 flex flex-wrap items-center gap-x-4 gap-y-1.5", children: [
|
|
6458
|
+
item.receipt && /* @__PURE__ */ jsxs68("span", { className: "inline-flex items-center gap-1.5 text-sm text-text-tertiary", children: [
|
|
6459
|
+
/* @__PURE__ */ jsx101(Check11, { className: "size-3 shrink-0 text-text-success", "aria-hidden": "true" }),
|
|
6437
6460
|
item.receipt
|
|
6438
6461
|
] }),
|
|
6439
|
-
item.deepLink && /* @__PURE__ */
|
|
6462
|
+
item.deepLink && /* @__PURE__ */ jsx101(
|
|
6440
6463
|
DeepLinkControl,
|
|
6441
6464
|
{
|
|
6442
6465
|
link: item.deepLink,
|
|
@@ -6451,7 +6474,7 @@ function CenterRow({
|
|
|
6451
6474
|
] })
|
|
6452
6475
|
] });
|
|
6453
6476
|
}
|
|
6454
|
-
var NotificationCenter =
|
|
6477
|
+
var NotificationCenter = React83.forwardRef(
|
|
6455
6478
|
({
|
|
6456
6479
|
items,
|
|
6457
6480
|
header = true,
|
|
@@ -6468,16 +6491,16 @@ var NotificationCenter = React81.forwardRef(
|
|
|
6468
6491
|
formatAge,
|
|
6469
6492
|
className
|
|
6470
6493
|
}, ref) => {
|
|
6471
|
-
const [status, setStatus] =
|
|
6472
|
-
const [source, setSource] =
|
|
6473
|
-
const [product, setProduct] =
|
|
6474
|
-
const [query, setQuery] =
|
|
6475
|
-
const [limit, setLimit] =
|
|
6476
|
-
const age =
|
|
6494
|
+
const [status, setStatus] = React83.useState("all");
|
|
6495
|
+
const [source, setSource] = React83.useState("all");
|
|
6496
|
+
const [product, setProduct] = React83.useState("all");
|
|
6497
|
+
const [query, setQuery] = React83.useState("");
|
|
6498
|
+
const [limit, setLimit] = React83.useState(pageSize);
|
|
6499
|
+
const age = React83.useCallback(
|
|
6477
6500
|
(createdAt) => formatAge ? formatAge(createdAt) : formatRelativeAge(createdAt),
|
|
6478
6501
|
[formatAge]
|
|
6479
6502
|
);
|
|
6480
|
-
const sourceChips =
|
|
6503
|
+
const sourceChips = React83.useMemo(
|
|
6481
6504
|
() => sources ?? Array.from(new Set(items.map((n) => n.source))),
|
|
6482
6505
|
[sources, items]
|
|
6483
6506
|
);
|
|
@@ -6488,13 +6511,13 @@ var NotificationCenter = React81.forwardRef(
|
|
|
6488
6511
|
const shown = matched.slice(0, limit);
|
|
6489
6512
|
const remaining = matched.length - shown.length;
|
|
6490
6513
|
const filtering = q !== "" || status !== "all" || source !== "all" || product !== "all";
|
|
6491
|
-
return /* @__PURE__ */
|
|
6492
|
-
(header || onMarkAllRead) && /* @__PURE__ */
|
|
6493
|
-
header && /* @__PURE__ */
|
|
6494
|
-
/* @__PURE__ */
|
|
6495
|
-
description && /* @__PURE__ */
|
|
6514
|
+
return /* @__PURE__ */ jsxs68("div", { ref, className: cn("mx-auto max-w-[560px]", className), children: [
|
|
6515
|
+
(header || onMarkAllRead) && /* @__PURE__ */ jsxs68("div", { className: cn("mb-4 flex items-start gap-4", !header && "justify-end"), children: [
|
|
6516
|
+
header && /* @__PURE__ */ jsxs68("div", { className: "min-w-0 flex-1", children: [
|
|
6517
|
+
/* @__PURE__ */ jsx101("h1", { className: "mb-1.5 text-2xl font-semibold tracking-tight text-text-primary", children: title }),
|
|
6518
|
+
description && /* @__PURE__ */ jsx101("p", { className: "text-sm text-text-tertiary", children: description })
|
|
6496
6519
|
] }),
|
|
6497
|
-
onMarkAllRead && /* @__PURE__ */
|
|
6520
|
+
onMarkAllRead && /* @__PURE__ */ jsx101(
|
|
6498
6521
|
"button",
|
|
6499
6522
|
{
|
|
6500
6523
|
type: "button",
|
|
@@ -6504,9 +6527,9 @@ var NotificationCenter = React81.forwardRef(
|
|
|
6504
6527
|
}
|
|
6505
6528
|
)
|
|
6506
6529
|
] }),
|
|
6507
|
-
searchable && /* @__PURE__ */
|
|
6508
|
-
/* @__PURE__ */
|
|
6509
|
-
/* @__PURE__ */
|
|
6530
|
+
searchable && /* @__PURE__ */ jsxs68("div", { className: "mb-3 flex items-center gap-2 rounded-lg bg-bg-elevated px-3 py-2", children: [
|
|
6531
|
+
/* @__PURE__ */ jsx101(Search2, { className: "size-4 shrink-0 text-text-tertiary", "aria-hidden": "true" }),
|
|
6532
|
+
/* @__PURE__ */ jsx101(
|
|
6510
6533
|
"input",
|
|
6511
6534
|
{
|
|
6512
6535
|
type: "text",
|
|
@@ -6517,8 +6540,8 @@ var NotificationCenter = React81.forwardRef(
|
|
|
6517
6540
|
}
|
|
6518
6541
|
)
|
|
6519
6542
|
] }),
|
|
6520
|
-
/* @__PURE__ */
|
|
6521
|
-
/* @__PURE__ */
|
|
6543
|
+
/* @__PURE__ */ jsxs68("div", { className: "mb-2 flex flex-wrap gap-1.5", children: [
|
|
6544
|
+
/* @__PURE__ */ jsx101(
|
|
6522
6545
|
"button",
|
|
6523
6546
|
{
|
|
6524
6547
|
type: "button",
|
|
@@ -6527,7 +6550,7 @@ var NotificationCenter = React81.forwardRef(
|
|
|
6527
6550
|
children: "All"
|
|
6528
6551
|
}
|
|
6529
6552
|
),
|
|
6530
|
-
/* @__PURE__ */
|
|
6553
|
+
/* @__PURE__ */ jsx101(
|
|
6531
6554
|
"button",
|
|
6532
6555
|
{
|
|
6533
6556
|
type: "button",
|
|
@@ -6537,8 +6560,8 @@ var NotificationCenter = React81.forwardRef(
|
|
|
6537
6560
|
}
|
|
6538
6561
|
)
|
|
6539
6562
|
] }),
|
|
6540
|
-
/* @__PURE__ */
|
|
6541
|
-
/* @__PURE__ */
|
|
6563
|
+
/* @__PURE__ */ jsxs68("div", { className: "mb-2 flex flex-wrap gap-1.5", children: [
|
|
6564
|
+
/* @__PURE__ */ jsx101(
|
|
6542
6565
|
"button",
|
|
6543
6566
|
{
|
|
6544
6567
|
type: "button",
|
|
@@ -6547,7 +6570,7 @@ var NotificationCenter = React81.forwardRef(
|
|
|
6547
6570
|
children: "All sources"
|
|
6548
6571
|
}
|
|
6549
6572
|
),
|
|
6550
|
-
sourceChips.map((s) => /* @__PURE__ */
|
|
6573
|
+
sourceChips.map((s) => /* @__PURE__ */ jsx101(
|
|
6551
6574
|
"button",
|
|
6552
6575
|
{
|
|
6553
6576
|
type: "button",
|
|
@@ -6558,8 +6581,8 @@ var NotificationCenter = React81.forwardRef(
|
|
|
6558
6581
|
s
|
|
6559
6582
|
))
|
|
6560
6583
|
] }),
|
|
6561
|
-
products && products.length > 0 && /* @__PURE__ */
|
|
6562
|
-
/* @__PURE__ */
|
|
6584
|
+
products && products.length > 0 && /* @__PURE__ */ jsxs68("div", { className: "mb-4 flex flex-wrap gap-1.5", children: [
|
|
6585
|
+
/* @__PURE__ */ jsx101(
|
|
6563
6586
|
"button",
|
|
6564
6587
|
{
|
|
6565
6588
|
type: "button",
|
|
@@ -6568,7 +6591,7 @@ var NotificationCenter = React81.forwardRef(
|
|
|
6568
6591
|
children: "All products"
|
|
6569
6592
|
}
|
|
6570
6593
|
),
|
|
6571
|
-
products.map((p) => /* @__PURE__ */
|
|
6594
|
+
products.map((p) => /* @__PURE__ */ jsx101(
|
|
6572
6595
|
"button",
|
|
6573
6596
|
{
|
|
6574
6597
|
type: "button",
|
|
@@ -6579,8 +6602,8 @@ var NotificationCenter = React81.forwardRef(
|
|
|
6579
6602
|
p.id
|
|
6580
6603
|
))
|
|
6581
6604
|
] }),
|
|
6582
|
-
shown.length === 0 ? /* @__PURE__ */
|
|
6583
|
-
shown.map((item) => /* @__PURE__ */
|
|
6605
|
+
shown.length === 0 ? /* @__PURE__ */ jsx101("p", { className: "rounded-xl bg-bg-elevated px-4 py-10 text-center text-sm leading-relaxed text-text-tertiary", children: filtering ? "Nothing matches." : "Nothing here yet. Everything addressed to you lands here." }) : /* @__PURE__ */ jsxs68("div", { className: "flex flex-col gap-1.5", children: [
|
|
6606
|
+
shown.map((item) => /* @__PURE__ */ jsx101(
|
|
6584
6607
|
CenterRow,
|
|
6585
6608
|
{
|
|
6586
6609
|
item,
|
|
@@ -6591,7 +6614,7 @@ var NotificationCenter = React81.forwardRef(
|
|
|
6591
6614
|
},
|
|
6592
6615
|
item.id
|
|
6593
6616
|
)),
|
|
6594
|
-
remaining > 0 && /* @__PURE__ */
|
|
6617
|
+
remaining > 0 && /* @__PURE__ */ jsxs68(
|
|
6595
6618
|
"button",
|
|
6596
6619
|
{
|
|
6597
6620
|
type: "button",
|
|
@@ -6611,9 +6634,9 @@ var NotificationCenter = React81.forwardRef(
|
|
|
6611
6634
|
NotificationCenter.displayName = "NotificationCenter";
|
|
6612
6635
|
|
|
6613
6636
|
// src/components/notification-settings.tsx
|
|
6614
|
-
import * as
|
|
6637
|
+
import * as React84 from "react";
|
|
6615
6638
|
import { Moon as Moon2, Plus as Plus3, Volume2 } from "lucide-react";
|
|
6616
|
-
import { Fragment as Fragment14, jsx as
|
|
6639
|
+
import { Fragment as Fragment14, jsx as jsx102, jsxs as jsxs69 } from "react/jsx-runtime";
|
|
6617
6640
|
var THRESHOLDS = [
|
|
6618
6641
|
["everything", "Everything"],
|
|
6619
6642
|
["important", "Important"],
|
|
@@ -6625,13 +6648,13 @@ function ThresholdControl({
|
|
|
6625
6648
|
value,
|
|
6626
6649
|
onChange
|
|
6627
6650
|
}) {
|
|
6628
|
-
return /* @__PURE__ */
|
|
6651
|
+
return /* @__PURE__ */ jsx102(
|
|
6629
6652
|
"span",
|
|
6630
6653
|
{
|
|
6631
6654
|
role: "group",
|
|
6632
6655
|
"aria-label": `Interrupt me for ${label}`,
|
|
6633
6656
|
className: "inline-flex shrink-0 rounded-lg border border-border-subtle bg-transparent p-0.5",
|
|
6634
|
-
children: THRESHOLDS.map(([threshold, text]) => /* @__PURE__ */
|
|
6657
|
+
children: THRESHOLDS.map(([threshold, text]) => /* @__PURE__ */ jsx102(
|
|
6635
6658
|
"button",
|
|
6636
6659
|
{
|
|
6637
6660
|
type: "button",
|
|
@@ -6648,7 +6671,7 @@ function ThresholdControl({
|
|
|
6648
6671
|
}
|
|
6649
6672
|
);
|
|
6650
6673
|
}
|
|
6651
|
-
var NotificationSettings =
|
|
6674
|
+
var NotificationSettings = React84.forwardRef(
|
|
6652
6675
|
({
|
|
6653
6676
|
subscriptions,
|
|
6654
6677
|
value,
|
|
@@ -6661,7 +6684,7 @@ var NotificationSettings = React82.forwardRef(
|
|
|
6661
6684
|
pushSlot,
|
|
6662
6685
|
className
|
|
6663
6686
|
}, ref) => {
|
|
6664
|
-
const [tab, setTab] =
|
|
6687
|
+
const [tab, setTab] = React84.useState(DEFAULT_KEY);
|
|
6665
6688
|
const isDefault = tab === DEFAULT_KEY;
|
|
6666
6689
|
const defaults = value[DEFAULT_KEY] ?? { thresholds: {} };
|
|
6667
6690
|
const customized = !isDefault && Object.prototype.hasOwnProperty.call(value, tab);
|
|
@@ -6681,15 +6704,15 @@ var NotificationSettings = React82.forwardRef(
|
|
|
6681
6704
|
const scopeGroup = (scope) => {
|
|
6682
6705
|
const rows = subscriptions.filter((s) => s.scope === scope);
|
|
6683
6706
|
if (rows.length === 0) return null;
|
|
6684
|
-
return /* @__PURE__ */
|
|
6685
|
-
/* @__PURE__ */
|
|
6686
|
-
/* @__PURE__ */
|
|
6707
|
+
return /* @__PURE__ */ jsxs69("div", { children: [
|
|
6708
|
+
/* @__PURE__ */ jsx102("p", { className: "mb-1.5 px-0.5 text-xs font-bold uppercase tracking-wider text-text-tertiary", children: scope === "product" ? "This product" : "Organization" }),
|
|
6709
|
+
/* @__PURE__ */ jsx102("div", { className: "space-y-2", children: rows.map((sub) => /* @__PURE__ */ jsxs69(
|
|
6687
6710
|
"div",
|
|
6688
6711
|
{
|
|
6689
6712
|
className: "flex items-center gap-4 rounded-xl bg-bg-elevated px-4 py-3",
|
|
6690
6713
|
children: [
|
|
6691
|
-
/* @__PURE__ */
|
|
6692
|
-
/* @__PURE__ */
|
|
6714
|
+
/* @__PURE__ */ jsx102("p", { className: "min-w-0 flex-1 text-sm font-semibold text-text-primary", children: sub.name }),
|
|
6715
|
+
/* @__PURE__ */ jsx102(
|
|
6693
6716
|
ThresholdControl,
|
|
6694
6717
|
{
|
|
6695
6718
|
label: sub.name,
|
|
@@ -6703,10 +6726,10 @@ var NotificationSettings = React82.forwardRef(
|
|
|
6703
6726
|
)) })
|
|
6704
6727
|
] }, scope);
|
|
6705
6728
|
};
|
|
6706
|
-
return /* @__PURE__ */
|
|
6707
|
-
products && products.length > 0 && /* @__PURE__ */
|
|
6708
|
-
/* @__PURE__ */
|
|
6709
|
-
/* @__PURE__ */
|
|
6729
|
+
return /* @__PURE__ */ jsxs69("div", { ref, className: cn("space-y-5", className), children: [
|
|
6730
|
+
products && products.length > 0 && /* @__PURE__ */ jsxs69("div", { children: [
|
|
6731
|
+
/* @__PURE__ */ jsx102("p", { className: "mb-2 px-0.5 text-xs font-bold uppercase tracking-wider text-text-tertiary", children: "Preferences for" }),
|
|
6732
|
+
/* @__PURE__ */ jsx102("div", { className: "flex flex-wrap gap-2", children: [{ id: DEFAULT_KEY, label: "Default" }, ...products].map((t) => /* @__PURE__ */ jsx102(
|
|
6710
6733
|
"button",
|
|
6711
6734
|
{
|
|
6712
6735
|
type: "button",
|
|
@@ -6721,26 +6744,26 @@ var NotificationSettings = React82.forwardRef(
|
|
|
6721
6744
|
t.id
|
|
6722
6745
|
)) })
|
|
6723
6746
|
] }),
|
|
6724
|
-
isDefault ? /* @__PURE__ */
|
|
6725
|
-
/* @__PURE__ */
|
|
6726
|
-
/* @__PURE__ */
|
|
6727
|
-
/* @__PURE__ */
|
|
6728
|
-
/* @__PURE__ */
|
|
6729
|
-
pushSlot ?? /* @__PURE__ */
|
|
6747
|
+
isDefault ? /* @__PURE__ */ jsxs69(Fragment14, { children: [
|
|
6748
|
+
/* @__PURE__ */ jsx102("p", { className: "text-sm leading-relaxed text-text-secondary", children: "Your defaults, applied to every product unless you customize one. Everything addressed to you always lands in the in-app record; that cannot be turned off." }),
|
|
6749
|
+
/* @__PURE__ */ jsxs69(Card, { className: "border-none bg-bg-elevated p-5", children: [
|
|
6750
|
+
/* @__PURE__ */ jsx102("p", { className: "mb-1.5 text-xs font-bold uppercase tracking-wide text-text-tertiary", children: "Push to" }),
|
|
6751
|
+
/* @__PURE__ */ jsx102("p", { className: "mb-3 text-sm leading-relaxed text-text-secondary", children: "Forward notifications beyond the in-app record to a connected integration." }),
|
|
6752
|
+
pushSlot ?? /* @__PURE__ */ jsx102("div", { className: "rounded-lg bg-bg-surface px-4 py-6 text-center", children: /* @__PURE__ */ jsx102("p", { className: "text-sm text-text-tertiary", children: "No integrations connected." }) })
|
|
6730
6753
|
] }),
|
|
6731
|
-
mutes.length > 0 && /* @__PURE__ */
|
|
6732
|
-
/* @__PURE__ */
|
|
6733
|
-
/* @__PURE__ */
|
|
6734
|
-
/* @__PURE__ */
|
|
6735
|
-
/* @__PURE__ */
|
|
6736
|
-
/* @__PURE__ */
|
|
6737
|
-
/* @__PURE__ */
|
|
6754
|
+
mutes.length > 0 && /* @__PURE__ */ jsxs69("div", { children: [
|
|
6755
|
+
/* @__PURE__ */ jsx102("p", { className: "mb-1.5 px-0.5 text-xs font-bold uppercase tracking-wider text-text-tertiary", children: "Muted" }),
|
|
6756
|
+
/* @__PURE__ */ jsx102(Card, { className: "border-none bg-bg-elevated p-2", children: mutes.map((m) => /* @__PURE__ */ jsxs69("div", { className: "flex items-center gap-3 rounded-lg px-3 py-2.5", children: [
|
|
6757
|
+
/* @__PURE__ */ jsx102(Moon2, { className: "size-4 shrink-0 text-text-tertiary", "aria-hidden": "true" }),
|
|
6758
|
+
/* @__PURE__ */ jsxs69("div", { className: "min-w-0 flex-1", children: [
|
|
6759
|
+
/* @__PURE__ */ jsx102("p", { className: "text-sm font-medium text-text-primary", children: m.source }),
|
|
6760
|
+
/* @__PURE__ */ jsxs69("p", { className: "text-sm text-text-tertiary", children: [
|
|
6738
6761
|
"Muted \u2014 ",
|
|
6739
6762
|
m.label,
|
|
6740
6763
|
". Critical still comes through."
|
|
6741
6764
|
] })
|
|
6742
6765
|
] }),
|
|
6743
|
-
/* @__PURE__ */
|
|
6766
|
+
/* @__PURE__ */ jsx102(
|
|
6744
6767
|
"button",
|
|
6745
6768
|
{
|
|
6746
6769
|
type: "button",
|
|
@@ -6753,13 +6776,13 @@ var NotificationSettings = React82.forwardRef(
|
|
|
6753
6776
|
] }),
|
|
6754
6777
|
scopeGroup("product"),
|
|
6755
6778
|
scopeGroup("org"),
|
|
6756
|
-
onSoundEnabledChange && /* @__PURE__ */
|
|
6757
|
-
/* @__PURE__ */
|
|
6758
|
-
/* @__PURE__ */
|
|
6759
|
-
/* @__PURE__ */
|
|
6760
|
-
/* @__PURE__ */
|
|
6779
|
+
onSoundEnabledChange && /* @__PURE__ */ jsx102(Card, { className: "border-none bg-bg-elevated p-4", children: /* @__PURE__ */ jsxs69("div", { className: "flex items-center gap-3", children: [
|
|
6780
|
+
/* @__PURE__ */ jsx102(Volume2, { className: "size-4 text-text-tertiary", "aria-hidden": "true" }),
|
|
6781
|
+
/* @__PURE__ */ jsxs69("div", { className: "flex-1", children: [
|
|
6782
|
+
/* @__PURE__ */ jsx102("p", { className: "text-sm font-medium text-text-primary", children: "Notification sound" }),
|
|
6783
|
+
/* @__PURE__ */ jsx102("p", { className: "text-sm text-text-tertiary", children: "Play a tone when a notification arrives. Critical always chimes." })
|
|
6761
6784
|
] }),
|
|
6762
|
-
/* @__PURE__ */
|
|
6785
|
+
/* @__PURE__ */ jsx102(
|
|
6763
6786
|
Switch,
|
|
6764
6787
|
{
|
|
6765
6788
|
checked: soundEnabled ?? false,
|
|
@@ -6768,35 +6791,35 @@ var NotificationSettings = React82.forwardRef(
|
|
|
6768
6791
|
}
|
|
6769
6792
|
)
|
|
6770
6793
|
] }) })
|
|
6771
|
-
] }) : !customized ? /* @__PURE__ */
|
|
6772
|
-
/* @__PURE__ */
|
|
6794
|
+
] }) : !customized ? /* @__PURE__ */ jsxs69(Card, { className: "border-none bg-bg-elevated p-8 text-center", children: [
|
|
6795
|
+
/* @__PURE__ */ jsxs69("p", { className: "text-sm font-semibold text-text-primary", children: [
|
|
6773
6796
|
productLabel,
|
|
6774
6797
|
" follows your Default preferences."
|
|
6775
6798
|
] }),
|
|
6776
|
-
/* @__PURE__ */
|
|
6777
|
-
/* @__PURE__ */
|
|
6799
|
+
/* @__PURE__ */ jsx102("p", { className: "mx-auto mt-1.5 max-w-[360px] text-sm leading-relaxed text-text-tertiary", children: "Interrupt thresholds, sound and forwarding all come from Default. Opt in to give this product its own interrupt thresholds." }),
|
|
6800
|
+
/* @__PURE__ */ jsxs69(
|
|
6778
6801
|
"button",
|
|
6779
6802
|
{
|
|
6780
6803
|
type: "button",
|
|
6781
6804
|
onClick: customize,
|
|
6782
6805
|
className: "mt-5 inline-flex items-center gap-1.5 rounded-lg bg-bg-brand px-3.5 py-2 text-sm font-semibold text-text-on-brand transition-colors hover:bg-bg-brand-hover",
|
|
6783
6806
|
children: [
|
|
6784
|
-
/* @__PURE__ */
|
|
6807
|
+
/* @__PURE__ */ jsx102(Plus3, { className: "size-4", "aria-hidden": "true" }),
|
|
6785
6808
|
" Customize for ",
|
|
6786
6809
|
productLabel
|
|
6787
6810
|
]
|
|
6788
6811
|
}
|
|
6789
6812
|
)
|
|
6790
|
-
] }) : /* @__PURE__ */
|
|
6791
|
-
/* @__PURE__ */
|
|
6792
|
-
/* @__PURE__ */
|
|
6793
|
-
/* @__PURE__ */
|
|
6813
|
+
] }) : /* @__PURE__ */ jsxs69(Fragment14, { children: [
|
|
6814
|
+
/* @__PURE__ */ jsx102(Card, { className: "border-none bg-bg-brand-subtle p-3.5", children: /* @__PURE__ */ jsxs69("div", { className: "flex items-center gap-3", children: [
|
|
6815
|
+
/* @__PURE__ */ jsxs69("div", { className: "min-w-0 flex-1", children: [
|
|
6816
|
+
/* @__PURE__ */ jsxs69("p", { className: "text-sm font-semibold text-text-brand", children: [
|
|
6794
6817
|
"Custom preferences for ",
|
|
6795
6818
|
productLabel
|
|
6796
6819
|
] }),
|
|
6797
|
-
/* @__PURE__ */
|
|
6820
|
+
/* @__PURE__ */ jsx102("p", { className: "text-sm leading-relaxed text-text-secondary", children: "Only the interrupt thresholds below differ. Sound and forwarding follow Default." })
|
|
6798
6821
|
] }),
|
|
6799
|
-
/* @__PURE__ */
|
|
6822
|
+
/* @__PURE__ */ jsx102(
|
|
6800
6823
|
"button",
|
|
6801
6824
|
{
|
|
6802
6825
|
type: "button",
|
|
@@ -6814,14 +6837,14 @@ var NotificationSettings = React82.forwardRef(
|
|
|
6814
6837
|
NotificationSettings.displayName = "NotificationSettings";
|
|
6815
6838
|
|
|
6816
6839
|
// src/components/notification-toast.tsx
|
|
6817
|
-
import * as
|
|
6840
|
+
import * as React85 from "react";
|
|
6818
6841
|
import { X as X5 } from "lucide-react";
|
|
6819
|
-
import { jsx as
|
|
6842
|
+
import { jsx as jsx103, jsxs as jsxs70 } from "react/jsx-runtime";
|
|
6820
6843
|
var chipBase2 = "rounded-lg px-2.5 py-1 text-sm font-medium transition-colors";
|
|
6821
6844
|
var chipPrimary = "bg-bg-brand text-text-on-brand hover:bg-bg-brand-hover";
|
|
6822
6845
|
var chipDestructive = "bg-bg-elevated text-text-danger hover:bg-bg-surface";
|
|
6823
6846
|
var linkAction = "text-sm font-semibold text-text-brand transition-colors hover:text-text-primary";
|
|
6824
|
-
var NotificationToast =
|
|
6847
|
+
var NotificationToast = React85.forwardRef(
|
|
6825
6848
|
({
|
|
6826
6849
|
item,
|
|
6827
6850
|
showSource = true,
|
|
@@ -6838,9 +6861,9 @@ var NotificationToast = React83.forwardRef(
|
|
|
6838
6861
|
const actions = item.actions ?? [];
|
|
6839
6862
|
const percent = progress === void 0 || !Number.isFinite(progress) ? void 0 : Math.min(100, Math.max(0, progress));
|
|
6840
6863
|
const progressLine = progressLabel === void 0 && percent !== void 0 ? `live, ${Math.round(percent)}%` : progressLabel;
|
|
6841
|
-
const barId =
|
|
6864
|
+
const barId = React85.useId();
|
|
6842
6865
|
const hasProgressLine = progressLine !== null && progressLine !== void 0;
|
|
6843
|
-
return /* @__PURE__ */
|
|
6866
|
+
return /* @__PURE__ */ jsxs70(
|
|
6844
6867
|
"div",
|
|
6845
6868
|
{
|
|
6846
6869
|
ref,
|
|
@@ -6851,24 +6874,24 @@ var NotificationToast = React83.forwardRef(
|
|
|
6851
6874
|
className
|
|
6852
6875
|
),
|
|
6853
6876
|
children: [
|
|
6854
|
-
/* @__PURE__ */
|
|
6855
|
-
showSource && /* @__PURE__ */
|
|
6856
|
-
/* @__PURE__ */
|
|
6857
|
-
(overflow || onDismiss) && /* @__PURE__ */
|
|
6877
|
+
/* @__PURE__ */ jsxs70("div", { className: "flex items-center gap-2", children: [
|
|
6878
|
+
showSource && /* @__PURE__ */ jsx103("span", { className: "text-xs font-semibold uppercase tracking-[0.09em] text-text-secondary", children: item.source }),
|
|
6879
|
+
/* @__PURE__ */ jsx103(Badge, { variant: severityBadgeVariant(item.severity), children: severityLabels[item.severity] }),
|
|
6880
|
+
(overflow || onDismiss) && /* @__PURE__ */ jsxs70("span", { className: "-mr-1 ml-auto flex shrink-0 items-center gap-1", children: [
|
|
6858
6881
|
overflow,
|
|
6859
|
-
onDismiss && /* @__PURE__ */
|
|
6882
|
+
onDismiss && /* @__PURE__ */ jsx103(
|
|
6860
6883
|
"button",
|
|
6861
6884
|
{
|
|
6862
6885
|
type: "button",
|
|
6863
6886
|
"aria-label": dismissLabel,
|
|
6864
6887
|
onClick: () => onDismiss(item),
|
|
6865
6888
|
className: "flex size-5 shrink-0 items-center justify-center rounded-md text-text-tertiary transition-colors hover:bg-bg-surface hover:text-text-primary",
|
|
6866
|
-
children: /* @__PURE__ */
|
|
6889
|
+
children: /* @__PURE__ */ jsx103(X5, { className: "size-3.5", "aria-hidden": "true" })
|
|
6867
6890
|
}
|
|
6868
6891
|
)
|
|
6869
6892
|
] })
|
|
6870
6893
|
] }),
|
|
6871
|
-
onItemClick ? /* @__PURE__ */
|
|
6894
|
+
onItemClick ? /* @__PURE__ */ jsx103(
|
|
6872
6895
|
"button",
|
|
6873
6896
|
{
|
|
6874
6897
|
type: "button",
|
|
@@ -6876,15 +6899,15 @@ var NotificationToast = React83.forwardRef(
|
|
|
6876
6899
|
className: "mt-1 block text-left text-sm font-semibold leading-snug text-text-primary underline-offset-2 hover:underline",
|
|
6877
6900
|
children: item.title
|
|
6878
6901
|
}
|
|
6879
|
-
) : /* @__PURE__ */
|
|
6880
|
-
item.body && /* @__PURE__ */
|
|
6881
|
-
note && /* @__PURE__ */
|
|
6902
|
+
) : /* @__PURE__ */ jsx103("p", { className: "mt-1 text-sm font-semibold leading-snug text-text-primary", children: item.title }),
|
|
6903
|
+
item.body && /* @__PURE__ */ jsx103("p", { className: "mt-0.5 text-sm leading-snug text-text-secondary", children: item.body }),
|
|
6904
|
+
note && /* @__PURE__ */ jsx103("p", { className: "mt-1.5 text-xs font-medium text-text-warning", children: note }),
|
|
6882
6905
|
percent !== void 0 && // The card is a `role="status"`, which implies `aria-atomic` — every tick of the bar would
|
|
6883
6906
|
// otherwise re-announce the whole card. `aria-live="off"` on the subtree that moves is the
|
|
6884
6907
|
// one cheap mitigation: the bar stays in the accessibility tree to be read on demand, it
|
|
6885
6908
|
// just stops interrupting.
|
|
6886
|
-
/* @__PURE__ */
|
|
6887
|
-
/* @__PURE__ */
|
|
6909
|
+
/* @__PURE__ */ jsxs70("div", { className: "mt-2", "aria-live": "off", children: [
|
|
6910
|
+
/* @__PURE__ */ jsx103(
|
|
6888
6911
|
Progress,
|
|
6889
6912
|
{
|
|
6890
6913
|
value: percent,
|
|
@@ -6893,11 +6916,11 @@ var NotificationToast = React83.forwardRef(
|
|
|
6893
6916
|
"aria-label": hasProgressLine ? void 0 : "Progress"
|
|
6894
6917
|
}
|
|
6895
6918
|
),
|
|
6896
|
-
hasProgressLine && /* @__PURE__ */
|
|
6919
|
+
hasProgressLine && /* @__PURE__ */ jsx103("p", { id: barId, className: "mt-0.5 text-xs text-text-secondary", children: progressLine })
|
|
6897
6920
|
] }),
|
|
6898
|
-
actions.length > 0 && /* @__PURE__ */
|
|
6921
|
+
actions.length > 0 && /* @__PURE__ */ jsx103("div", { className: "mt-2.5 flex flex-wrap items-center gap-2", children: actions.map((action) => {
|
|
6899
6922
|
const variant = action.variant ?? "link";
|
|
6900
|
-
return /* @__PURE__ */
|
|
6923
|
+
return /* @__PURE__ */ jsx103(
|
|
6901
6924
|
"button",
|
|
6902
6925
|
{
|
|
6903
6926
|
type: "button",
|
|
@@ -6916,15 +6939,15 @@ var NotificationToast = React83.forwardRef(
|
|
|
6916
6939
|
NotificationToast.displayName = "NotificationToast";
|
|
6917
6940
|
|
|
6918
6941
|
// src/components/notification-toaster.tsx
|
|
6919
|
-
import * as
|
|
6920
|
-
import { jsx as
|
|
6942
|
+
import * as React86 from "react";
|
|
6943
|
+
import { jsx as jsx104 } from "react/jsx-runtime";
|
|
6921
6944
|
var positions = {
|
|
6922
6945
|
"bottom-right": "bottom-6 right-6 flex-col",
|
|
6923
6946
|
"bottom-left": "bottom-6 left-6 flex-col",
|
|
6924
6947
|
"top-right": "top-6 right-6 flex-col-reverse",
|
|
6925
6948
|
"top-left": "top-6 left-6 flex-col-reverse"
|
|
6926
6949
|
};
|
|
6927
|
-
var NotificationToaster =
|
|
6950
|
+
var NotificationToaster = React86.forwardRef(
|
|
6928
6951
|
({
|
|
6929
6952
|
items,
|
|
6930
6953
|
dwell,
|
|
@@ -6941,15 +6964,15 @@ var NotificationToaster = React84.forwardRef(
|
|
|
6941
6964
|
className
|
|
6942
6965
|
}, ref) => {
|
|
6943
6966
|
const shown = items.slice(0, max);
|
|
6944
|
-
const [paused, setPaused] =
|
|
6945
|
-
const onDismissRef =
|
|
6967
|
+
const [paused, setPaused] = React86.useState(false);
|
|
6968
|
+
const onDismissRef = React86.useRef(onDismiss);
|
|
6946
6969
|
onDismissRef.current = onDismiss;
|
|
6947
6970
|
const fyiDwell = dwell?.fyi;
|
|
6948
6971
|
const importantDwell = dwell?.important;
|
|
6949
6972
|
const criticalDwell = dwell?.critical;
|
|
6950
|
-
const remaining =
|
|
6973
|
+
const remaining = React86.useRef(/* @__PURE__ */ new Map());
|
|
6951
6974
|
const liveIds = shown.map((item) => `${item.id}:${item.severity}`).join(" ");
|
|
6952
|
-
|
|
6975
|
+
React86.useEffect(() => {
|
|
6953
6976
|
const owedById = remaining.current;
|
|
6954
6977
|
const dwellSeconds = {
|
|
6955
6978
|
fyi: fyiDwell ?? TOAST_DWELL.fyi,
|
|
@@ -6990,7 +7013,7 @@ var NotificationToaster = React84.forwardRef(
|
|
|
6990
7013
|
};
|
|
6991
7014
|
}, [liveIds, paused, fyiDwell, importantDwell, criticalDwell]);
|
|
6992
7015
|
if (shown.length === 0) return null;
|
|
6993
|
-
return /* @__PURE__ */
|
|
7016
|
+
return /* @__PURE__ */ jsx104(
|
|
6994
7017
|
"div",
|
|
6995
7018
|
{
|
|
6996
7019
|
ref,
|
|
@@ -7003,7 +7026,7 @@ var NotificationToaster = React84.forwardRef(
|
|
|
7003
7026
|
positions[position],
|
|
7004
7027
|
className
|
|
7005
7028
|
),
|
|
7006
|
-
children: shown.map((item, i) => /* @__PURE__ */
|
|
7029
|
+
children: shown.map((item, i) => /* @__PURE__ */ jsx104("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx104(
|
|
7007
7030
|
NotificationToast,
|
|
7008
7031
|
{
|
|
7009
7032
|
item,
|
|
@@ -7277,7 +7300,7 @@ var COUNTRY_OPTIONS = [
|
|
|
7277
7300
|
];
|
|
7278
7301
|
|
|
7279
7302
|
// src/components/organization-onboarding-form.tsx
|
|
7280
|
-
import * as
|
|
7303
|
+
import * as React87 from "react";
|
|
7281
7304
|
|
|
7282
7305
|
// src/lib/auth-surface.ts
|
|
7283
7306
|
var AUTH_FILLED_BUTTON = "flex h-[46px] w-full items-center justify-center gap-[11px] rounded-[10px] border border-transparent bg-text-primary px-[14px] text-[14.5px] font-semibold tracking-[-0.005em] text-bg-sunken transition-opacity hover:opacity-[0.92] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand active:translate-y-px disabled:cursor-not-allowed disabled:opacity-[0.55]";
|
|
@@ -7285,7 +7308,7 @@ var AUTH_QUIET_BUTTON = "flex h-[46px] w-full items-center justify-center gap-[1
|
|
|
7285
7308
|
var AUTH_BUTTON_SHADOW = "var(--auth-btn-shadow)";
|
|
7286
7309
|
|
|
7287
7310
|
// src/components/organization-onboarding-form.tsx
|
|
7288
|
-
import { jsx as
|
|
7311
|
+
import { jsx as jsx105, jsxs as jsxs71 } from "react/jsx-runtime";
|
|
7289
7312
|
var CONTROLLER_SHARE_PCT = 50;
|
|
7290
7313
|
var MAX_BENEFICIAL_OWNERS = 50;
|
|
7291
7314
|
var OWNERSHIP_CONFIRMATION_MESSAGE = "Please confirm the ownership details by ticking the box";
|
|
@@ -7320,22 +7343,22 @@ function OrganizationOnboardingForm({
|
|
|
7320
7343
|
onCancel,
|
|
7321
7344
|
className
|
|
7322
7345
|
}) {
|
|
7323
|
-
const [name, setName] =
|
|
7324
|
-
const [legalName, setLegalName] =
|
|
7325
|
-
const [ownerName, setOwnerName] =
|
|
7326
|
-
const [countryOfIncorporation, setCountryOfIncorporation] =
|
|
7346
|
+
const [name, setName] = React87.useState(defaultValues?.name ?? "");
|
|
7347
|
+
const [legalName, setLegalName] = React87.useState(defaultValues?.legal_name ?? "");
|
|
7348
|
+
const [ownerName, setOwnerName] = React87.useState(defaultValues?.owner_name ?? "");
|
|
7349
|
+
const [countryOfIncorporation, setCountryOfIncorporation] = React87.useState(
|
|
7327
7350
|
defaultValues?.country_of_incorporation ?? ""
|
|
7328
7351
|
);
|
|
7329
|
-
const [residencyCountry, setResidencyCountry] =
|
|
7352
|
+
const [residencyCountry, setResidencyCountry] = React87.useState(
|
|
7330
7353
|
defaultValues?.residency_country ?? ""
|
|
7331
7354
|
);
|
|
7332
|
-
const [owners, setOwners] =
|
|
7355
|
+
const [owners, setOwners] = React87.useState(
|
|
7333
7356
|
() => initialRows(defaultValues?.beneficial_owners)
|
|
7334
7357
|
);
|
|
7335
|
-
const [ownershipConfirmed, setOwnershipConfirmed] =
|
|
7336
|
-
const [confirmationAttempted, setConfirmationAttempted] =
|
|
7337
|
-
const nextKeyRef =
|
|
7338
|
-
const submittingRef =
|
|
7358
|
+
const [ownershipConfirmed, setOwnershipConfirmed] = React87.useState(false);
|
|
7359
|
+
const [confirmationAttempted, setConfirmationAttempted] = React87.useState(false);
|
|
7360
|
+
const nextKeyRef = React87.useRef(owners.length);
|
|
7361
|
+
const submittingRef = React87.useRef(false);
|
|
7339
7362
|
const trimmed = name.trim();
|
|
7340
7363
|
const filledOwners = owners.filter((row) => !isRowBlank(row));
|
|
7341
7364
|
const ownerShares = filledOwners.map((row) => parseShare(row.share));
|
|
@@ -7389,7 +7412,7 @@ function OrganizationOnboardingForm({
|
|
|
7389
7412
|
...needsOwnershipConfirmation ? { ownership_confirmed: ownershipConfirmed } : {}
|
|
7390
7413
|
});
|
|
7391
7414
|
};
|
|
7392
|
-
|
|
7415
|
+
React87.useEffect(() => {
|
|
7393
7416
|
submittingRef.current = false;
|
|
7394
7417
|
}, [
|
|
7395
7418
|
name,
|
|
@@ -7402,12 +7425,12 @@ function OrganizationOnboardingForm({
|
|
|
7402
7425
|
submitting,
|
|
7403
7426
|
serverError
|
|
7404
7427
|
]);
|
|
7405
|
-
const countryField = (params) => /* @__PURE__ */
|
|
7406
|
-
/* @__PURE__ */
|
|
7428
|
+
const countryField = (params) => /* @__PURE__ */ jsxs71("div", { className: "space-y-1.5", children: [
|
|
7429
|
+
/* @__PURE__ */ jsxs71(Label2, { htmlFor: params.id, children: [
|
|
7407
7430
|
params.label,
|
|
7408
|
-
params.required && /* @__PURE__ */
|
|
7431
|
+
params.required && /* @__PURE__ */ jsx105("span", { className: "text-text-danger", children: " *" })
|
|
7409
7432
|
] }),
|
|
7410
|
-
/* @__PURE__ */
|
|
7433
|
+
/* @__PURE__ */ jsx105(
|
|
7411
7434
|
Select,
|
|
7412
7435
|
{
|
|
7413
7436
|
id: params.id,
|
|
@@ -7420,10 +7443,10 @@ function OrganizationOnboardingForm({
|
|
|
7420
7443
|
}
|
|
7421
7444
|
)
|
|
7422
7445
|
] });
|
|
7423
|
-
return /* @__PURE__ */
|
|
7424
|
-
/* @__PURE__ */
|
|
7425
|
-
/* @__PURE__ */
|
|
7426
|
-
/* @__PURE__ */
|
|
7446
|
+
return /* @__PURE__ */ jsxs71("form", { onSubmit: handleSubmit, className: cn("space-y-4", className), children: [
|
|
7447
|
+
/* @__PURE__ */ jsxs71("div", { className: "space-y-1.5", children: [
|
|
7448
|
+
/* @__PURE__ */ jsx105(Label2, { htmlFor: "create-org-name", children: "Organization name" }),
|
|
7449
|
+
/* @__PURE__ */ jsx105(
|
|
7427
7450
|
Input,
|
|
7428
7451
|
{
|
|
7429
7452
|
id: "create-org-name",
|
|
@@ -7434,9 +7457,9 @@ function OrganizationOnboardingForm({
|
|
|
7434
7457
|
}
|
|
7435
7458
|
)
|
|
7436
7459
|
] }),
|
|
7437
|
-
/* @__PURE__ */
|
|
7438
|
-
/* @__PURE__ */
|
|
7439
|
-
/* @__PURE__ */
|
|
7460
|
+
/* @__PURE__ */ jsxs71("div", { className: "space-y-1.5", children: [
|
|
7461
|
+
/* @__PURE__ */ jsx105(Label2, { htmlFor: "create-org-legal-name", children: "Legal name" }),
|
|
7462
|
+
/* @__PURE__ */ jsx105(
|
|
7440
7463
|
Input,
|
|
7441
7464
|
{
|
|
7442
7465
|
id: "create-org-legal-name",
|
|
@@ -7447,9 +7470,9 @@ function OrganizationOnboardingForm({
|
|
|
7447
7470
|
}
|
|
7448
7471
|
)
|
|
7449
7472
|
] }),
|
|
7450
|
-
/* @__PURE__ */
|
|
7451
|
-
/* @__PURE__ */
|
|
7452
|
-
/* @__PURE__ */
|
|
7473
|
+
/* @__PURE__ */ jsxs71("div", { className: "space-y-1.5", children: [
|
|
7474
|
+
/* @__PURE__ */ jsx105(Label2, { htmlFor: "create-org-owner-name", children: "Owner name" }),
|
|
7475
|
+
/* @__PURE__ */ jsx105(
|
|
7453
7476
|
Input,
|
|
7454
7477
|
{
|
|
7455
7478
|
id: "create-org-owner-name",
|
|
@@ -7474,10 +7497,10 @@ function OrganizationOnboardingForm({
|
|
|
7474
7497
|
onChange: setResidencyCountry,
|
|
7475
7498
|
required: false
|
|
7476
7499
|
}),
|
|
7477
|
-
/* @__PURE__ */
|
|
7478
|
-
/* @__PURE__ */
|
|
7479
|
-
/* @__PURE__ */
|
|
7480
|
-
/* @__PURE__ */
|
|
7500
|
+
/* @__PURE__ */ jsxs71("div", { className: "space-y-2", children: [
|
|
7501
|
+
/* @__PURE__ */ jsxs71("div", { className: "flex items-center justify-between", children: [
|
|
7502
|
+
/* @__PURE__ */ jsx105(Label2, { children: "Beneficial owners" }),
|
|
7503
|
+
/* @__PURE__ */ jsx105(
|
|
7481
7504
|
Button,
|
|
7482
7505
|
{
|
|
7483
7506
|
type: "button",
|
|
@@ -7490,16 +7513,16 @@ function OrganizationOnboardingForm({
|
|
|
7490
7513
|
}
|
|
7491
7514
|
)
|
|
7492
7515
|
] }),
|
|
7493
|
-
owners.length === 0 && /* @__PURE__ */
|
|
7494
|
-
owners.map((row) => /* @__PURE__ */
|
|
7516
|
+
owners.length === 0 && /* @__PURE__ */ jsx105("p", { className: "text-xs text-text-tertiary", children: "List the natural persons who ultimately own or control the organization." }),
|
|
7517
|
+
owners.map((row) => /* @__PURE__ */ jsxs71(
|
|
7495
7518
|
"div",
|
|
7496
7519
|
{
|
|
7497
7520
|
"data-testid": `beneficial-owner-row-${row.key}`,
|
|
7498
7521
|
className: "flex items-end gap-2",
|
|
7499
7522
|
children: [
|
|
7500
|
-
/* @__PURE__ */
|
|
7501
|
-
/* @__PURE__ */
|
|
7502
|
-
/* @__PURE__ */
|
|
7523
|
+
/* @__PURE__ */ jsxs71("div", { className: "flex-1 space-y-1", children: [
|
|
7524
|
+
/* @__PURE__ */ jsx105(Label2, { htmlFor: `bo-name-${row.key}`, className: "text-xs", children: "Name" }),
|
|
7525
|
+
/* @__PURE__ */ jsx105(
|
|
7503
7526
|
Input,
|
|
7504
7527
|
{
|
|
7505
7528
|
id: `bo-name-${row.key}`,
|
|
@@ -7509,9 +7532,9 @@ function OrganizationOnboardingForm({
|
|
|
7509
7532
|
}
|
|
7510
7533
|
)
|
|
7511
7534
|
] }),
|
|
7512
|
-
/* @__PURE__ */
|
|
7513
|
-
/* @__PURE__ */
|
|
7514
|
-
/* @__PURE__ */
|
|
7535
|
+
/* @__PURE__ */ jsxs71("div", { className: "w-40 space-y-1", children: [
|
|
7536
|
+
/* @__PURE__ */ jsx105(Label2, { htmlFor: `bo-country-${row.key}`, className: "text-xs", children: "Country" }),
|
|
7537
|
+
/* @__PURE__ */ jsx105(
|
|
7515
7538
|
Select,
|
|
7516
7539
|
{
|
|
7517
7540
|
id: `bo-country-${row.key}`,
|
|
@@ -7524,9 +7547,9 @@ function OrganizationOnboardingForm({
|
|
|
7524
7547
|
}
|
|
7525
7548
|
)
|
|
7526
7549
|
] }),
|
|
7527
|
-
/* @__PURE__ */
|
|
7528
|
-
/* @__PURE__ */
|
|
7529
|
-
/* @__PURE__ */
|
|
7550
|
+
/* @__PURE__ */ jsxs71("div", { className: "w-24 space-y-1", children: [
|
|
7551
|
+
/* @__PURE__ */ jsx105(Label2, { htmlFor: `bo-share-${row.key}`, className: "text-xs", children: "Share %" }),
|
|
7552
|
+
/* @__PURE__ */ jsx105(
|
|
7530
7553
|
Input,
|
|
7531
7554
|
{
|
|
7532
7555
|
id: `bo-share-${row.key}`,
|
|
@@ -7537,7 +7560,7 @@ function OrganizationOnboardingForm({
|
|
|
7537
7560
|
}
|
|
7538
7561
|
)
|
|
7539
7562
|
] }),
|
|
7540
|
-
/* @__PURE__ */
|
|
7563
|
+
/* @__PURE__ */ jsx105(
|
|
7541
7564
|
Button,
|
|
7542
7565
|
{
|
|
7543
7566
|
type: "button",
|
|
@@ -7552,16 +7575,16 @@ function OrganizationOnboardingForm({
|
|
|
7552
7575
|
},
|
|
7553
7576
|
row.key
|
|
7554
7577
|
)),
|
|
7555
|
-
!ownersValid && /* @__PURE__ */
|
|
7556
|
-
shareSum > 100 && /* @__PURE__ */
|
|
7578
|
+
!ownersValid && /* @__PURE__ */ jsx105("p", { "data-testid": "beneficial-owners-error", className: "text-xs text-text-danger", children: "Every owner needs a name, a country and a share between 0 and 100." }),
|
|
7579
|
+
shareSum > 100 && /* @__PURE__ */ jsxs71("p", { "data-testid": "beneficial-owners-sum-warning", className: "text-xs text-text-warning", children: [
|
|
7557
7580
|
"The listed shares add up to ",
|
|
7558
7581
|
shareSum,
|
|
7559
7582
|
"%, which is more than 100%."
|
|
7560
7583
|
] })
|
|
7561
7584
|
] }),
|
|
7562
|
-
needsOwnershipConfirmation && /* @__PURE__ */
|
|
7563
|
-
/* @__PURE__ */
|
|
7564
|
-
/* @__PURE__ */
|
|
7585
|
+
needsOwnershipConfirmation && /* @__PURE__ */ jsxs71("div", { className: "space-y-1", children: [
|
|
7586
|
+
/* @__PURE__ */ jsxs71("div", { className: "flex items-start gap-2", children: [
|
|
7587
|
+
/* @__PURE__ */ jsx105(
|
|
7565
7588
|
Checkbox,
|
|
7566
7589
|
{
|
|
7567
7590
|
id: "create-org-ownership-confirmed",
|
|
@@ -7571,19 +7594,19 @@ function OrganizationOnboardingForm({
|
|
|
7571
7594
|
onCheckedChange: (value) => setOwnershipConfirmed(value === true)
|
|
7572
7595
|
}
|
|
7573
7596
|
),
|
|
7574
|
-
/* @__PURE__ */
|
|
7597
|
+
/* @__PURE__ */ jsxs71(
|
|
7575
7598
|
Label2,
|
|
7576
7599
|
{
|
|
7577
7600
|
htmlFor: "create-org-ownership-confirmed",
|
|
7578
7601
|
className: "text-xs font-regular leading-snug",
|
|
7579
7602
|
children: [
|
|
7580
7603
|
"I confirm the ownership structure above is complete and correct",
|
|
7581
|
-
/* @__PURE__ */
|
|
7604
|
+
/* @__PURE__ */ jsx105("span", { className: "text-text-danger", children: " *" })
|
|
7582
7605
|
]
|
|
7583
7606
|
}
|
|
7584
7607
|
)
|
|
7585
7608
|
] }),
|
|
7586
|
-
showConfirmationError && /* @__PURE__ */
|
|
7609
|
+
showConfirmationError && /* @__PURE__ */ jsx105(
|
|
7587
7610
|
"p",
|
|
7588
7611
|
{
|
|
7589
7612
|
id: "create-org-ownership-error",
|
|
@@ -7593,12 +7616,12 @@ function OrganizationOnboardingForm({
|
|
|
7593
7616
|
}
|
|
7594
7617
|
)
|
|
7595
7618
|
] }),
|
|
7596
|
-
(serverError || otherViolations.length > 0) && /* @__PURE__ */
|
|
7619
|
+
(serverError || otherViolations.length > 0) && /* @__PURE__ */ jsxs71(InlineError, { children: [
|
|
7597
7620
|
serverError,
|
|
7598
|
-
otherViolations.length > 0 && /* @__PURE__ */
|
|
7621
|
+
otherViolations.length > 0 && /* @__PURE__ */ jsx105("ul", { "data-testid": "create-org-violations", className: "mt-1 list-disc pl-4", children: otherViolations.map((violation) => /* @__PURE__ */ jsx105("li", { children: violation }, violation)) })
|
|
7599
7622
|
] }),
|
|
7600
|
-
/* @__PURE__ */
|
|
7601
|
-
/* @__PURE__ */
|
|
7623
|
+
/* @__PURE__ */ jsxs71("div", { className: "space-y-2 pt-1", children: [
|
|
7624
|
+
/* @__PURE__ */ jsx105(
|
|
7602
7625
|
"button",
|
|
7603
7626
|
{
|
|
7604
7627
|
type: "submit",
|
|
@@ -7609,14 +7632,14 @@ function OrganizationOnboardingForm({
|
|
|
7609
7632
|
children: submitting ? "Creating\u2026" : submitLabel
|
|
7610
7633
|
}
|
|
7611
7634
|
),
|
|
7612
|
-
onCancel && /* @__PURE__ */
|
|
7635
|
+
onCancel && /* @__PURE__ */ jsx105("button", { type: "button", onClick: onCancel, className: AUTH_QUIET_BUTTON, children: "Cancel" })
|
|
7613
7636
|
] })
|
|
7614
7637
|
] });
|
|
7615
7638
|
}
|
|
7616
7639
|
|
|
7617
7640
|
// src/components/list-columns.tsx
|
|
7618
|
-
import * as
|
|
7619
|
-
import { jsx as
|
|
7641
|
+
import * as React88 from "react";
|
|
7642
|
+
import { jsx as jsx106, jsxs as jsxs72 } from "react/jsx-runtime";
|
|
7620
7643
|
var CELL_WIDTH = { 20: "w-20", 24: "w-24", 28: "w-28", 32: "w-32" };
|
|
7621
7644
|
var headerClass = "flex items-center gap-3 border-b border-border-subtle bg-bg-secondary px-4 py-1.5 text-xs text-text-tertiary";
|
|
7622
7645
|
var cellsClass = "flex shrink-0 items-center gap-3";
|
|
@@ -7634,13 +7657,13 @@ function warnDuplicateKeys(columns, where) {
|
|
|
7634
7657
|
seen.add(c.key);
|
|
7635
7658
|
}
|
|
7636
7659
|
}
|
|
7637
|
-
var ListHeader =
|
|
7660
|
+
var ListHeader = React88.forwardRef(function ListHeader2({ lead, columns, mark = true, trailing = true, className, ...props }, ref) {
|
|
7638
7661
|
warnDuplicateKeys(columns, "ListHeader");
|
|
7639
|
-
return /* @__PURE__ */
|
|
7640
|
-
mark && /* @__PURE__ */
|
|
7641
|
-
/* @__PURE__ */
|
|
7642
|
-
/* @__PURE__ */
|
|
7643
|
-
trailing && /* @__PURE__ */
|
|
7662
|
+
return /* @__PURE__ */ jsxs72("div", { ref, className: cn(headerClass, className), ...props, children: [
|
|
7663
|
+
mark && /* @__PURE__ */ jsx106("span", { className: "size-8 shrink-0", "aria-hidden": true }),
|
|
7664
|
+
/* @__PURE__ */ jsx106("span", { className: "min-w-0 flex-1 truncate", children: lead }),
|
|
7665
|
+
/* @__PURE__ */ jsx106("span", { className: cellsClass, children: columns.map((c) => /* @__PURE__ */ jsx106("span", { className: cn(CELL_WIDTH[c.width], cellClass), children: c.label }, c.key)) }),
|
|
7666
|
+
trailing && /* @__PURE__ */ jsx106("span", { className: "size-4 shrink-0", "aria-hidden": true })
|
|
7644
7667
|
] });
|
|
7645
7668
|
});
|
|
7646
7669
|
function cellValue(values, column) {
|
|
@@ -7648,9 +7671,9 @@ function cellValue(values, column) {
|
|
|
7648
7671
|
const value = values[column.key];
|
|
7649
7672
|
return value === void 0 || value === null || value === "" ? column.fallback : value;
|
|
7650
7673
|
}
|
|
7651
|
-
var ListCells =
|
|
7674
|
+
var ListCells = React88.forwardRef(function ListCells2({ columns, values, className, ...props }, ref) {
|
|
7652
7675
|
warnDuplicateKeys(columns, "ListCells");
|
|
7653
|
-
return /* @__PURE__ */
|
|
7676
|
+
return /* @__PURE__ */ jsx106("span", { ref, className: cn(cellsClass, className), ...props, children: columns.map((c) => /* @__PURE__ */ jsx106(
|
|
7654
7677
|
"span",
|
|
7655
7678
|
{
|
|
7656
7679
|
className: cn(CELL_WIDTH[c.width], cellClass, c.quiet && "text-text-tertiary"),
|
|
@@ -7663,9 +7686,9 @@ ListHeader.displayName = "ListHeader";
|
|
|
7663
7686
|
ListCells.displayName = "ListCells";
|
|
7664
7687
|
|
|
7665
7688
|
// src/components/theme-picker.tsx
|
|
7666
|
-
import * as
|
|
7689
|
+
import * as React89 from "react";
|
|
7667
7690
|
import { Check as Check12, Monitor as Monitor2 } from "lucide-react";
|
|
7668
|
-
import { jsx as
|
|
7691
|
+
import { jsx as jsx107, jsxs as jsxs73 } from "react/jsx-runtime";
|
|
7669
7692
|
var THEME_SWATCHES = {
|
|
7670
7693
|
// --bg-surface --bg-sunken --bg-overlay --border-default --text-tertiary
|
|
7671
7694
|
light: { canvas: "#f2f3f4", rail: "#e1e2e4", body: "#ffffff", quiet: "#bbbec7", strong: "#535a6e" },
|
|
@@ -7679,13 +7702,13 @@ var OPTIONS = [
|
|
|
7679
7702
|
{ value: "system", label: "Auto", name: "Auto, follows your device theme" }
|
|
7680
7703
|
];
|
|
7681
7704
|
function Panels({ palette }) {
|
|
7682
|
-
return /* @__PURE__ */
|
|
7683
|
-
/* @__PURE__ */
|
|
7705
|
+
return /* @__PURE__ */ jsxs73("span", { className: "flex h-full gap-1.5 p-1.5", style: { background: palette.canvas }, children: [
|
|
7706
|
+
/* @__PURE__ */ jsx107(
|
|
7684
7707
|
"span",
|
|
7685
7708
|
{
|
|
7686
7709
|
className: "flex flex-col gap-1.5 p-1.5",
|
|
7687
7710
|
style: { width: "28%", borderRadius: 5, background: palette.rail },
|
|
7688
|
-
children: RAIL_BARS.map((w, i) => /* @__PURE__ */
|
|
7711
|
+
children: RAIL_BARS.map((w, i) => /* @__PURE__ */ jsx107(
|
|
7689
7712
|
"span",
|
|
7690
7713
|
{
|
|
7691
7714
|
className: "rounded-full",
|
|
@@ -7695,12 +7718,12 @@ function Panels({ palette }) {
|
|
|
7695
7718
|
))
|
|
7696
7719
|
}
|
|
7697
7720
|
),
|
|
7698
|
-
/* @__PURE__ */
|
|
7721
|
+
/* @__PURE__ */ jsx107(
|
|
7699
7722
|
"span",
|
|
7700
7723
|
{
|
|
7701
7724
|
className: "flex flex-1 flex-col gap-1.5 border p-2",
|
|
7702
7725
|
style: { borderRadius: 5, background: palette.body, borderColor: palette.quiet },
|
|
7703
|
-
children: BODY_BARS.map((w, i) => /* @__PURE__ */
|
|
7726
|
+
children: BODY_BARS.map((w, i) => /* @__PURE__ */ jsx107(
|
|
7704
7727
|
"span",
|
|
7705
7728
|
{
|
|
7706
7729
|
className: "rounded-full",
|
|
@@ -7716,13 +7739,13 @@ var autoPlateClass = "flex h-full items-center justify-center bg-bg-secondary";
|
|
|
7716
7739
|
var previewClass = "block h-28 overflow-hidden rounded-lg border border-border-default";
|
|
7717
7740
|
var cardClass = "grid gap-2 rounded-lg p-1.5 text-left transition-colors hover:bg-bg-elevated focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-border-focus";
|
|
7718
7741
|
var TRACK = { gridTemplateColumns: "repeat(auto-fit, minmax(8rem, 1fr))" };
|
|
7719
|
-
var Picker =
|
|
7720
|
-
return /* @__PURE__ */
|
|
7742
|
+
var Picker = React89.forwardRef(function Picker2({ value, onValueChange, className, ...props }, ref) {
|
|
7743
|
+
return /* @__PURE__ */ jsx107("div", { role: "group", "aria-label": "Theme", ...props, ref, className: cn("grid gap-4", className), style: { ...TRACK, ...props.style }, children: OPTIONS.map((o) => {
|
|
7721
7744
|
const selected = o.value === value;
|
|
7722
7745
|
return (
|
|
7723
7746
|
// Not a `Button` (Guidelines/When it isn't a Button): the preview is the control, and
|
|
7724
7747
|
// `aria-pressed` is what says which one is on.
|
|
7725
|
-
/* @__PURE__ */
|
|
7748
|
+
/* @__PURE__ */ jsxs73(
|
|
7726
7749
|
"button",
|
|
7727
7750
|
{
|
|
7728
7751
|
type: "button",
|
|
@@ -7731,8 +7754,8 @@ var Picker = React87.forwardRef(function Picker2({ value, onValueChange, classNa
|
|
|
7731
7754
|
onClick: () => onValueChange(o.value),
|
|
7732
7755
|
className: cardClass,
|
|
7733
7756
|
children: [
|
|
7734
|
-
/* @__PURE__ */
|
|
7735
|
-
/* @__PURE__ */
|
|
7757
|
+
/* @__PURE__ */ jsx107("span", { className: cn(previewClass, selected && "ring-2 ring-border-strong"), "aria-hidden": true, children: o.value === "system" ? /* @__PURE__ */ jsx107("span", { className: autoPlateClass, children: /* @__PURE__ */ jsx107(Monitor2, { className: "size-8 text-text-tertiary" }) }) : /* @__PURE__ */ jsx107(Panels, { palette: THEME_SWATCHES[o.value] }) }),
|
|
7758
|
+
/* @__PURE__ */ jsxs73(
|
|
7736
7759
|
"span",
|
|
7737
7760
|
{
|
|
7738
7761
|
className: cn(
|
|
@@ -7740,7 +7763,7 @@ var Picker = React87.forwardRef(function Picker2({ value, onValueChange, classNa
|
|
|
7740
7763
|
selected ? "font-semibold text-text-primary" : "text-text-secondary"
|
|
7741
7764
|
),
|
|
7742
7765
|
children: [
|
|
7743
|
-
/* @__PURE__ */
|
|
7766
|
+
/* @__PURE__ */ jsx107(Check12, { className: cn("size-4 shrink-0", !selected && "invisible"), "aria-hidden": true }),
|
|
7744
7767
|
o.label
|
|
7745
7768
|
]
|
|
7746
7769
|
}
|
|
@@ -7752,9 +7775,9 @@ var Picker = React87.forwardRef(function Picker2({ value, onValueChange, classNa
|
|
|
7752
7775
|
);
|
|
7753
7776
|
}) });
|
|
7754
7777
|
});
|
|
7755
|
-
var WiredPicker =
|
|
7778
|
+
var WiredPicker = React89.forwardRef(function WiredPicker2({ onValueChange, ...props }, ref) {
|
|
7756
7779
|
const { theme, setTheme } = useTheme();
|
|
7757
|
-
return /* @__PURE__ */
|
|
7780
|
+
return /* @__PURE__ */ jsx107(
|
|
7758
7781
|
Picker,
|
|
7759
7782
|
{
|
|
7760
7783
|
...props,
|
|
@@ -7767,22 +7790,22 @@ var WiredPicker = React87.forwardRef(function WiredPicker2({ onValueChange, ...p
|
|
|
7767
7790
|
}
|
|
7768
7791
|
);
|
|
7769
7792
|
});
|
|
7770
|
-
var ThemePicker =
|
|
7771
|
-
const controlled =
|
|
7793
|
+
var ThemePicker = React89.forwardRef(function ThemePicker2({ value, onValueChange, ...props }, ref) {
|
|
7794
|
+
const controlled = React89.useRef(value !== void 0);
|
|
7772
7795
|
if (process.env.NODE_ENV !== "production" && controlled.current !== (value !== void 0)) {
|
|
7773
7796
|
console.warn(
|
|
7774
7797
|
"[ThemePicker] `value` went from " + (controlled.current ? "set to missing" : "missing to set") + " after mount. The picker stays " + (controlled.current ? "controlled" : "wired to the console theme") + " for its whole life: render it once its value is known, or leave `value` off entirely."
|
|
7775
7798
|
);
|
|
7776
7799
|
}
|
|
7777
|
-
return controlled.current ? /* @__PURE__ */
|
|
7778
|
-
}) }) : /* @__PURE__ */
|
|
7800
|
+
return controlled.current ? /* @__PURE__ */ jsx107(Picker, { ...props, ref, value: value ?? "system", onValueChange: onValueChange ?? (() => {
|
|
7801
|
+
}) }) : /* @__PURE__ */ jsx107(WiredPicker, { ...props, ref, onValueChange });
|
|
7779
7802
|
});
|
|
7780
7803
|
ThemePicker.displayName = "ThemePicker";
|
|
7781
7804
|
|
|
7782
7805
|
// src/components/secret-reveal.tsx
|
|
7783
|
-
import * as
|
|
7806
|
+
import * as React90 from "react";
|
|
7784
7807
|
import { Copy as Copy2, Download } from "lucide-react";
|
|
7785
|
-
import { jsx as
|
|
7808
|
+
import { jsx as jsx108, jsxs as jsxs74 } from "react/jsx-runtime";
|
|
7786
7809
|
var asText = (value) => Array.isArray(value) ? value.join("\n") : value;
|
|
7787
7810
|
var REVEALED = "A secret is on screen and will not be shown again.";
|
|
7788
7811
|
var REFUSED = "The browser refused the clipboard. Select the value to copy it.";
|
|
@@ -7790,15 +7813,15 @@ function SecretValue({ value }) {
|
|
|
7790
7813
|
if (Array.isArray(value)) {
|
|
7791
7814
|
const half = Math.ceil(value.length / 2);
|
|
7792
7815
|
const columns = [value.slice(0, half), value.slice(half)].filter((column) => column.length > 0);
|
|
7793
|
-
return /* @__PURE__ */
|
|
7816
|
+
return /* @__PURE__ */ jsx108("div", { className: "flex w-fit gap-x-12", children: columns.map((column, index) => (
|
|
7794
7817
|
// Neither the columns nor the values inside one are ever reordered, and two identical
|
|
7795
7818
|
// values in a list are legal, so the index is the key and the value is not.
|
|
7796
|
-
/* @__PURE__ */
|
|
7819
|
+
/* @__PURE__ */ jsx108("div", { className: "grid gap-y-1.5", children: column.map((line, row) => /* @__PURE__ */ jsx108("code", { className: "font-mono text-sm font-medium tabular-nums text-text-primary", children: line }, row)) }, index)
|
|
7797
7820
|
)) });
|
|
7798
7821
|
}
|
|
7799
|
-
return /* @__PURE__ */
|
|
7822
|
+
return /* @__PURE__ */ jsx108("code", { className: "block break-all font-mono text-sm font-medium text-text-primary", children: value });
|
|
7800
7823
|
}
|
|
7801
|
-
var SecretReveal =
|
|
7824
|
+
var SecretReveal = React90.forwardRef(
|
|
7802
7825
|
({
|
|
7803
7826
|
value,
|
|
7804
7827
|
caption,
|
|
@@ -7815,18 +7838,18 @@ var SecretReveal = React88.forwardRef(
|
|
|
7815
7838
|
className,
|
|
7816
7839
|
...props
|
|
7817
7840
|
}, ref) => {
|
|
7818
|
-
const [takenText, setTakenText] =
|
|
7819
|
-
const [refusedText, setRefusedText] =
|
|
7820
|
-
const [announcedFor, setAnnouncedFor] =
|
|
7821
|
-
const copyRef =
|
|
7822
|
-
const captionId =
|
|
7841
|
+
const [takenText, setTakenText] = React90.useState(null);
|
|
7842
|
+
const [refusedText, setRefusedText] = React90.useState(null);
|
|
7843
|
+
const [announcedFor, setAnnouncedFor] = React90.useState(null);
|
|
7844
|
+
const copyRef = React90.useRef(null);
|
|
7845
|
+
const captionId = React90.useId();
|
|
7823
7846
|
const text = asText(value);
|
|
7824
7847
|
const empty = text.length === 0;
|
|
7825
7848
|
const taken = takenText === text;
|
|
7826
7849
|
const refused = refusedText === text;
|
|
7827
|
-
|
|
7850
|
+
React90.useEffect(() => setAnnouncedFor(text), [text]);
|
|
7828
7851
|
const announced = announcedFor === text ? REVEALED : "";
|
|
7829
|
-
|
|
7852
|
+
React90.useEffect(() => {
|
|
7830
7853
|
if (autoFocus) copyRef.current?.focus();
|
|
7831
7854
|
}, [autoFocus]);
|
|
7832
7855
|
const reportTaken = () => {
|
|
@@ -7852,12 +7875,12 @@ var SecretReveal = React88.forwardRef(
|
|
|
7852
7875
|
reportTaken();
|
|
7853
7876
|
onDownload?.();
|
|
7854
7877
|
};
|
|
7855
|
-
return /* @__PURE__ */
|
|
7856
|
-
/* @__PURE__ */
|
|
7857
|
-
/* @__PURE__ */
|
|
7858
|
-
/* @__PURE__ */
|
|
7859
|
-
/* @__PURE__ */
|
|
7860
|
-
/* @__PURE__ */
|
|
7878
|
+
return /* @__PURE__ */ jsx108("div", { ref, className: cn("overflow-hidden rounded-lg bg-bg-sunken", className), ...props, children: /* @__PURE__ */ jsx108("div", { className: highlightClassName, ref: highlightRef, children: /* @__PURE__ */ jsxs74("div", { className: "grid gap-3 rounded-lg border border-border-strong px-4 py-3", children: [
|
|
7879
|
+
/* @__PURE__ */ jsx108("span", { role: "status", className: "sr-only", children: announced }),
|
|
7880
|
+
/* @__PURE__ */ jsx108("div", { id: captionId, className: "text-sm text-text-secondary", children: caption }),
|
|
7881
|
+
/* @__PURE__ */ jsx108(SecretValue, { value }),
|
|
7882
|
+
/* @__PURE__ */ jsxs74("div", { className: "flex flex-wrap items-center gap-2", children: [
|
|
7883
|
+
/* @__PURE__ */ jsx108(
|
|
7861
7884
|
Button,
|
|
7862
7885
|
{
|
|
7863
7886
|
ref: copyRef,
|
|
@@ -7865,12 +7888,12 @@ var SecretReveal = React88.forwardRef(
|
|
|
7865
7888
|
"aria-describedby": captionId,
|
|
7866
7889
|
variant: "outline",
|
|
7867
7890
|
size: "sm",
|
|
7868
|
-
icon: /* @__PURE__ */
|
|
7891
|
+
icon: /* @__PURE__ */ jsx108(Copy2, {}),
|
|
7869
7892
|
children: copyLabel ?? (Array.isArray(value) ? "Copy all" : "Copy")
|
|
7870
7893
|
}
|
|
7871
7894
|
),
|
|
7872
|
-
onDownload && /* @__PURE__ */
|
|
7873
|
-
/* @__PURE__ */
|
|
7895
|
+
onDownload && /* @__PURE__ */ jsx108(Button, { onClick: download, "aria-describedby": captionId, variant: "outline", size: "sm", icon: /* @__PURE__ */ jsx108(Download, {}), children: downloadLabel }),
|
|
7896
|
+
/* @__PURE__ */ jsx108(
|
|
7874
7897
|
Button,
|
|
7875
7898
|
{
|
|
7876
7899
|
onClick: onConfirm,
|
|
@@ -7881,7 +7904,7 @@ var SecretReveal = React88.forwardRef(
|
|
|
7881
7904
|
}
|
|
7882
7905
|
)
|
|
7883
7906
|
] }),
|
|
7884
|
-
refused && /* @__PURE__ */
|
|
7907
|
+
refused && /* @__PURE__ */ jsx108("div", { role: "status", className: "text-xs text-text-tertiary", children: REFUSED })
|
|
7885
7908
|
] }) }) });
|
|
7886
7909
|
}
|
|
7887
7910
|
);
|
|
@@ -8157,6 +8180,8 @@ export {
|
|
|
8157
8180
|
TooltipContent,
|
|
8158
8181
|
TooltipProvider,
|
|
8159
8182
|
TooltipTrigger,
|
|
8183
|
+
TopBar,
|
|
8184
|
+
TopBarUtilities,
|
|
8160
8185
|
UserMenu,
|
|
8161
8186
|
WEIGHT_TONE,
|
|
8162
8187
|
alertVariants,
|