@botiverse/raft-ui 0.28.0 → 0.30.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/CHANGELOG.md +32 -0
- package/dist/{inbox-item-CfS34Ssw.mjs → inbox-item-69Tx19JG.mjs} +308 -21
- package/dist/{inbox-item-D1MJIoH9.d.mts → inbox-item-CXvn7hxs.d.mts} +5 -4
- package/dist/index.d.mts +2 -2
- package/dist/index.mjs +2 -278
- package/dist/wip.d.mts +65 -2
- package/dist/wip.mjs +243 -3
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,35 @@
|
|
|
1
|
+
## [0.30.0](https://github.com/botiverse/raft-design/compare/v0.29.0...v0.30.0) (2026-10-23)
|
|
2
|
+
|
|
3
|
+
### Design System
|
|
4
|
+
|
|
5
|
+
- **A dialog whose job is to choose keeps an open list**: when choosing is the dialog's main content (a computer to move an agent to, people to add), the choices stay open as a list at any count, not a select: a radio circle for one choice, a checkbox for several. A search field shows always when people look for something they know by name, and from 6 choices when they choose by comparing. Filtering never clears the choice; the chosen rows stay first. A row may have two description lines, and a details button at its end outside the row's label. ([#767](https://github.com/botiverse/raft-design/pull/767), [#772](https://github.com/botiverse/raft-design/pull/772))
|
|
6
|
+
- Why: a dropdown hides what people came to compare (stdrc, xxchan).
|
|
7
|
+
- Affects: a rule for products; raft-ui adds `ChoiceList` (wip).
|
|
8
|
+
- Docs: https://raft-design.botiverse.build/components/choice-list/
|
|
9
|
+
|
|
10
|
+
### Added
|
|
11
|
+
|
|
12
|
+
- **ChoiceList** (wip, `@botiverse/raft-ui/wip`): an always-open list to choose one (`value: string | null`) or several (`multiple`, `string[]`), built on Base UI RadioGroup / CheckboxGroup. `items` take a label, search text, up to two description lines, media, a row-end action and disabled; `search="auto" | "always"`; `searchLabel` and `clearSearchLabel` are required. Rows are 36px with a mouse and 44px on a touch screen. ([#772](https://github.com/botiverse/raft-design/pull/772))
|
|
13
|
+
- Docs: https://raft-design.botiverse.build/components/choice-list/
|
|
14
|
+
|
|
15
|
+
## [0.29.0](https://github.com/botiverse/raft-design/compare/v0.28.0...v0.29.0) (2026-10-23)
|
|
16
|
+
|
|
17
|
+
### Design System
|
|
18
|
+
|
|
19
|
+
- **A mention's read mark is the online light with an ink check**: once an agent has read a message that mentions it, the online light (the 8px lime square with its ink edge) shows at the mention's top right with an ink check in it. A light with no check means presence; a light with a check means read. It never covers the name: the mention keeps 10px after it. Nothing shows until the agent has read the message, the hover card still says Read or Not read yet, and on a touch screen the read light alone says it. Colored fills carry ink, never white. ([#770](https://github.com/botiverse/raft-design/pull/770))
|
|
20
|
+
- Why: the bare gray check was too faint to notice (artin), and the corner light is what people knew from the app; the check keeps it apart from presence (decided by artin and stdrc).
|
|
21
|
+
- Affects: a rule for products; `MessageReferenceReadMark` draws the new mark; status and color rules list the read light.
|
|
22
|
+
- Docs: https://raft-design.botiverse.build/components/message-item/#read-receipts-on-a-mention
|
|
23
|
+
- **On a phone, Activity's Mark as Done is the left swipe and the press-and-hold menu**: no button at rest on a phone; a tablet or a desktop keeps it. A swipe starts only when the finger moves clearly sideways. ([#769](https://github.com/botiverse/raft-design/pull/769))
|
|
24
|
+
- Why: a list of rows to clear read as a column of buttons; swiping a row away is how people clear lists on a phone (decided by stdrc).
|
|
25
|
+
- Affects: a rule for products.
|
|
26
|
+
- Docs: https://raft-design.botiverse.build/patterns/responsive/#touch-screens
|
|
27
|
+
|
|
28
|
+
### Changed
|
|
29
|
+
|
|
30
|
+
- **`MessageReferenceIndicator` placement**: `right: -10px` (was `-6px`) and `top: 0`; the mention keeps 10px after its text (was 8px), so the corner mark no longer overlaps the last letter. ([#770](https://github.com/botiverse/raft-design/pull/770))
|
|
31
|
+
- **`MessageReferenceReadMark`** is exported from `@botiverse/raft-ui` (still from `/wip` too) and draws the online light with a check; its API is unchanged (children are what a screen reader says). ([#770](https://github.com/botiverse/raft-design/pull/770))
|
|
32
|
+
|
|
1
33
|
## [0.28.0](https://github.com/botiverse/raft-design/compare/v0.27.0...v0.28.0) (2026-10-23)
|
|
2
34
|
|
|
3
35
|
### Design System
|
|
@@ -16,6 +16,9 @@ import { Menu } from "@base-ui/react/menu";
|
|
|
16
16
|
import { Popover } from "@base-ui/react/popover";
|
|
17
17
|
import { PointerSensor, TouchSensor, useSensor } from "@dnd-kit/core";
|
|
18
18
|
import { PreviewCard } from "@base-ui/react/preview-card";
|
|
19
|
+
import { Input } from "@base-ui/react/input";
|
|
20
|
+
import { Radio } from "@base-ui/react/radio";
|
|
21
|
+
import { RadioGroup } from "@base-ui/react/radio-group";
|
|
19
22
|
import { Toggle } from "@base-ui/react/toggle";
|
|
20
23
|
import { Toolbar } from "@base-ui/react/toolbar";
|
|
21
24
|
//#region src/lib/decision-width.ts
|
|
@@ -1858,6 +1861,56 @@ const PRESENCE_COLOR = {
|
|
|
1858
1861
|
external: "[--status-color:var(--presence-external)]"
|
|
1859
1862
|
};
|
|
1860
1863
|
//#endregion
|
|
1864
|
+
//#region src/components/status/status.tsx
|
|
1865
|
+
const status = tv$1({
|
|
1866
|
+
slots: { root: [
|
|
1867
|
+
"relative inline-block shrink-0",
|
|
1868
|
+
"bg-(--status-color)",
|
|
1869
|
+
"rounded-[2px] border-[1.5px] border-sticker-ink"
|
|
1870
|
+
] },
|
|
1871
|
+
variants: {
|
|
1872
|
+
variant: {
|
|
1873
|
+
default: { root: "[--status-color:var(--presence-offline)]" },
|
|
1874
|
+
primary: { root: "[--status-color:var(--brand-400)]" },
|
|
1875
|
+
information: { root: "[--status-color:var(--info)]" },
|
|
1876
|
+
muted: { root: "[--status-color:var(--secondary-400)]" },
|
|
1877
|
+
accent: { root: "[--status-color:var(--attention-400)]" },
|
|
1878
|
+
success: { root: "[--status-color:var(--success)]" },
|
|
1879
|
+
warning: { root: "[--status-color:var(--warning)]" },
|
|
1880
|
+
danger: { root: "[--status-color:var(--danger)]" }
|
|
1881
|
+
},
|
|
1882
|
+
size: {
|
|
1883
|
+
xs: { root: "size-1.5 rounded-[1px] border" },
|
|
1884
|
+
sm: { root: "size-2" },
|
|
1885
|
+
md: { root: "size-2.5" },
|
|
1886
|
+
lg: { root: "size-[11px]" }
|
|
1887
|
+
}
|
|
1888
|
+
},
|
|
1889
|
+
defaultVariants: {
|
|
1890
|
+
size: "md",
|
|
1891
|
+
variant: "default"
|
|
1892
|
+
}
|
|
1893
|
+
});
|
|
1894
|
+
function StatusRoot({ size, variant, presence, className, render, ...props }) {
|
|
1895
|
+
const { root } = status({
|
|
1896
|
+
size,
|
|
1897
|
+
variant
|
|
1898
|
+
});
|
|
1899
|
+
const defaultProps = { className: root({ className: cn(presence && PRESENCE_COLOR[presence], className) }) };
|
|
1900
|
+
return useRender({
|
|
1901
|
+
defaultTagName: "span",
|
|
1902
|
+
render,
|
|
1903
|
+
props: mergeProps(defaultProps, props),
|
|
1904
|
+
state: {
|
|
1905
|
+
slot: "status",
|
|
1906
|
+
variant,
|
|
1907
|
+
presence,
|
|
1908
|
+
size
|
|
1909
|
+
}
|
|
1910
|
+
});
|
|
1911
|
+
}
|
|
1912
|
+
const Status = StatusRoot;
|
|
1913
|
+
//#endregion
|
|
1861
1914
|
//#region src/components/checkbox/checkbox-indicator.tsx
|
|
1862
1915
|
const checkboxIndicator = tv$1({
|
|
1863
1916
|
slots: { root: [
|
|
@@ -3449,6 +3502,232 @@ function useOverflowTitle(ref, title) {
|
|
|
3449
3502
|
}, [own, ref]);
|
|
3450
3503
|
}
|
|
3451
3504
|
//#endregion
|
|
3505
|
+
//#region src/components/input-group/input-group.tsx
|
|
3506
|
+
const inputGroup = tv$1({
|
|
3507
|
+
slots: {
|
|
3508
|
+
root: [
|
|
3509
|
+
"group/input-group relative flex w-full min-w-0 items-center",
|
|
3510
|
+
"has-data-[input-group-trim=inline-end]:[--ig-control-pr:0]",
|
|
3511
|
+
"h-control overflow-hidden rounded-control border-[1.5px] border-line-field bg-layer-card text-foreground",
|
|
3512
|
+
"shadow-none transition-shadow duration-90 ease-out has-focus-visible:shadow-focus",
|
|
3513
|
+
"has-[[data-slot=input-group-control][data-invalid]]:border-danger-strong",
|
|
3514
|
+
"has-[[data-slot=input-group-control]:disabled]:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:border-line-hairline has-[[data-slot=input-group-control]:disabled]:bg-fill-muted",
|
|
3515
|
+
"has-[[data-slot=input-group-control]:disabled]:[--ig-addon-fg:var(--foreground-disabled)]",
|
|
3516
|
+
"has-[[data-slot=input-group-control]:disabled]:[--ig-text-fg:var(--foreground-disabled)]"
|
|
3517
|
+
],
|
|
3518
|
+
addon: [
|
|
3519
|
+
"flex shrink-0 items-center justify-center gap-2 px-3",
|
|
3520
|
+
"select-none",
|
|
3521
|
+
"text-(--ig-addon-fg,var(--ig-addon-fg-default,var(--foreground-hint)))",
|
|
3522
|
+
"[&>svg:not([class*='size-'])]:size-4.5"
|
|
3523
|
+
],
|
|
3524
|
+
text: [
|
|
3525
|
+
"flex min-w-0 max-w-1/2 shrink-0 items-center px-3",
|
|
3526
|
+
"select-none",
|
|
3527
|
+
"font-mono text-mono-code",
|
|
3528
|
+
"text-(--ig-text-fg,var(--ig-text-fg-default,var(--foreground-hint)))"
|
|
3529
|
+
],
|
|
3530
|
+
textInner: ["min-w-0 truncate"],
|
|
3531
|
+
control: [
|
|
3532
|
+
"min-w-0 flex-1 bg-transparent pl-3 outline-none",
|
|
3533
|
+
"pr-(--ig-control-pr,0.75rem)",
|
|
3534
|
+
"h-full py-0 font-heading text-field font-field",
|
|
3535
|
+
"text-foreground placeholder:text-foreground-hint",
|
|
3536
|
+
"disabled:cursor-not-allowed disabled:text-foreground-disabled disabled:placeholder:text-foreground-disabled"
|
|
3537
|
+
]
|
|
3538
|
+
},
|
|
3539
|
+
variants: {
|
|
3540
|
+
align: {
|
|
3541
|
+
"inline-start": {
|
|
3542
|
+
addon: "order-first",
|
|
3543
|
+
text: "order-first"
|
|
3544
|
+
},
|
|
3545
|
+
"inline-end": {
|
|
3546
|
+
addon: "order-last",
|
|
3547
|
+
text: "order-last"
|
|
3548
|
+
}
|
|
3549
|
+
},
|
|
3550
|
+
variant: {
|
|
3551
|
+
default: {},
|
|
3552
|
+
container: {
|
|
3553
|
+
addon: [
|
|
3554
|
+
"self-stretch",
|
|
3555
|
+
"[--ig-addon-fg-default:var(--foreground-hint)]",
|
|
3556
|
+
"border-line-hairline bg-fill-muted"
|
|
3557
|
+
],
|
|
3558
|
+
text: [
|
|
3559
|
+
"self-stretch",
|
|
3560
|
+
"[--ig-text-fg-default:var(--foreground-hint)]",
|
|
3561
|
+
"border-line-hairline bg-fill-muted"
|
|
3562
|
+
]
|
|
3563
|
+
}
|
|
3564
|
+
}
|
|
3565
|
+
},
|
|
3566
|
+
compoundVariants: [
|
|
3567
|
+
{
|
|
3568
|
+
variant: "default",
|
|
3569
|
+
align: "inline-start",
|
|
3570
|
+
class: {
|
|
3571
|
+
addon: "[&~[data-slot=input-group-control]]:pl-0",
|
|
3572
|
+
text: "[&~[data-slot=input-group-control]]:pl-0"
|
|
3573
|
+
}
|
|
3574
|
+
},
|
|
3575
|
+
{
|
|
3576
|
+
variant: "container",
|
|
3577
|
+
align: "inline-start",
|
|
3578
|
+
class: {
|
|
3579
|
+
addon: "border-r",
|
|
3580
|
+
text: "border-r"
|
|
3581
|
+
}
|
|
3582
|
+
},
|
|
3583
|
+
{
|
|
3584
|
+
variant: "container",
|
|
3585
|
+
align: "inline-end",
|
|
3586
|
+
class: {
|
|
3587
|
+
addon: "border-l",
|
|
3588
|
+
text: "border-l"
|
|
3589
|
+
}
|
|
3590
|
+
},
|
|
3591
|
+
{
|
|
3592
|
+
variant: "default",
|
|
3593
|
+
align: "inline-start",
|
|
3594
|
+
class: {
|
|
3595
|
+
addon: "pr-2",
|
|
3596
|
+
text: "pr-0.5"
|
|
3597
|
+
}
|
|
3598
|
+
},
|
|
3599
|
+
{
|
|
3600
|
+
variant: "default",
|
|
3601
|
+
align: "inline-end",
|
|
3602
|
+
class: {
|
|
3603
|
+
addon: [
|
|
3604
|
+
"pl-2",
|
|
3605
|
+
"*:data-[slot=button]:size-control-embedded *:data-[slot=button]:rounded-chip",
|
|
3606
|
+
"[&>[data-slot=button]_svg:not([class*='size-'])]:size-4",
|
|
3607
|
+
"[&>[data-slot=button]:last-child]:me-[calc(var(--control-embedded-inset)-0.75rem-1px)]"
|
|
3608
|
+
],
|
|
3609
|
+
text: "pl-0.5"
|
|
3610
|
+
}
|
|
3611
|
+
}
|
|
3612
|
+
],
|
|
3613
|
+
defaultVariants: {
|
|
3614
|
+
align: "inline-start",
|
|
3615
|
+
variant: "default"
|
|
3616
|
+
}
|
|
3617
|
+
});
|
|
3618
|
+
function InputGroup({ className, ...props }) {
|
|
3619
|
+
const { root } = inputGroup();
|
|
3620
|
+
return /* @__PURE__ */ jsx("div", {
|
|
3621
|
+
"data-slot": "input-group",
|
|
3622
|
+
className: root({ className }),
|
|
3623
|
+
...props
|
|
3624
|
+
});
|
|
3625
|
+
}
|
|
3626
|
+
function InputGroupAddonRoot({ align = "inline-start", variant = "default", className, ...props }) {
|
|
3627
|
+
const { addon } = inputGroup({
|
|
3628
|
+
align,
|
|
3629
|
+
variant
|
|
3630
|
+
});
|
|
3631
|
+
return /* @__PURE__ */ jsx("div", {
|
|
3632
|
+
"data-slot": "input-group-addon",
|
|
3633
|
+
"data-align": align,
|
|
3634
|
+
"data-variant": variant,
|
|
3635
|
+
"data-input-group-trim": variant === "default" && align === "inline-end" ? align : void 0,
|
|
3636
|
+
className: addon({ className }),
|
|
3637
|
+
...props
|
|
3638
|
+
});
|
|
3639
|
+
}
|
|
3640
|
+
function TextAddon({ align = "inline-start", variant = "default", className, ref, title, children, ...props }) {
|
|
3641
|
+
const { text, textInner } = inputGroup({
|
|
3642
|
+
align,
|
|
3643
|
+
variant
|
|
3644
|
+
});
|
|
3645
|
+
const overflowRef = useOverflowTitle(ref, title);
|
|
3646
|
+
return /* @__PURE__ */ jsx("span", {
|
|
3647
|
+
ref: overflowRef,
|
|
3648
|
+
title,
|
|
3649
|
+
"data-slot": "input-group-text",
|
|
3650
|
+
"data-align": align,
|
|
3651
|
+
"data-variant": variant,
|
|
3652
|
+
"data-input-group-trim": variant === "default" && align === "inline-end" ? align : void 0,
|
|
3653
|
+
className: text({ className }),
|
|
3654
|
+
...props,
|
|
3655
|
+
children: /* @__PURE__ */ jsx("span", {
|
|
3656
|
+
"data-slot": "input-group-text-value",
|
|
3657
|
+
className: textInner(),
|
|
3658
|
+
children
|
|
3659
|
+
})
|
|
3660
|
+
});
|
|
3661
|
+
}
|
|
3662
|
+
const InputGroupAddon = Object.assign(InputGroupAddonRoot, { Text: TextAddon });
|
|
3663
|
+
function InputGroupInput({ className, suppressPasswordManager, "data-invalid": dataInvalid, ...props }) {
|
|
3664
|
+
const { control } = inputGroup();
|
|
3665
|
+
return /* @__PURE__ */ jsx(Input, {
|
|
3666
|
+
"data-slot": "input-group-control",
|
|
3667
|
+
className: control({ className: [suppressPasswordManager && "keeper-ignore", className] }),
|
|
3668
|
+
"data-1p-ignore": suppressPasswordManager ? "true" : void 0,
|
|
3669
|
+
"data-bwignore": suppressPasswordManager ? "true" : void 0,
|
|
3670
|
+
"data-form-type": suppressPasswordManager ? "other" : void 0,
|
|
3671
|
+
"data-lpignore": suppressPasswordManager ? "true" : void 0,
|
|
3672
|
+
...props,
|
|
3673
|
+
"data-invalid": dataInvalid || void 0,
|
|
3674
|
+
"aria-invalid": dataInvalid ? "true" : void 0
|
|
3675
|
+
});
|
|
3676
|
+
}
|
|
3677
|
+
//#endregion
|
|
3678
|
+
//#region src/components/radio-group/radio-group.tsx
|
|
3679
|
+
const radioGroup = tv$1({ slots: {
|
|
3680
|
+
root: [
|
|
3681
|
+
"grid w-full gap-2",
|
|
3682
|
+
"data-disabled:[&>label]:cursor-not-allowed data-disabled:[&>label]:text-foreground-disabled",
|
|
3683
|
+
"data-disabled:[&>label_*]:text-foreground-disabled",
|
|
3684
|
+
"font-sans [&>label]:font-semibold"
|
|
3685
|
+
],
|
|
3686
|
+
item: [
|
|
3687
|
+
"relative inline-flex shrink-0 touch-manipulation items-center justify-center rounded-full outline-none",
|
|
3688
|
+
"data-disabled:cursor-not-allowed",
|
|
3689
|
+
"after:absolute after:-inset-x-3 after:-inset-y-2 after:content-['']",
|
|
3690
|
+
"pointer-coarse:after:-inset-y-[calc(--spacing(3)+1.5px)]",
|
|
3691
|
+
"[label>&]:my-[max(0px,calc((1lh-1.25rem)/2))]",
|
|
3692
|
+
"[label>&]:after:-inset-y-[calc(max(0px,(1lh-1.25rem)/2)+5.5px)]",
|
|
3693
|
+
"size-5 border-[1.5px] border-line-strong bg-layer-card text-foreground",
|
|
3694
|
+
"focus-visible:shadow-focus",
|
|
3695
|
+
"data-disabled:border-foreground-disabled data-disabled:bg-fill-muted data-disabled:text-foreground-disabled"
|
|
3696
|
+
],
|
|
3697
|
+
indicator: ["pointer-events-none flex size-full items-center justify-center"],
|
|
3698
|
+
dot: ["block rounded-full bg-current", "size-2"]
|
|
3699
|
+
} });
|
|
3700
|
+
function RadioGroup$1({ className, ...props }) {
|
|
3701
|
+
const { root } = radioGroup();
|
|
3702
|
+
return /* @__PURE__ */ jsx(RadioGroup, {
|
|
3703
|
+
"data-slot": "radio-group",
|
|
3704
|
+
className: root({ className }),
|
|
3705
|
+
...props
|
|
3706
|
+
});
|
|
3707
|
+
}
|
|
3708
|
+
function RadioGroupIndicator({ className, children, ...props }) {
|
|
3709
|
+
const { indicator, dot } = radioGroup();
|
|
3710
|
+
return /* @__PURE__ */ jsx(Radio.Indicator, {
|
|
3711
|
+
"data-slot": "radio-group-indicator",
|
|
3712
|
+
className: indicator({ className }),
|
|
3713
|
+
...props,
|
|
3714
|
+
children: children ?? /* @__PURE__ */ jsx("span", {
|
|
3715
|
+
"data-slot": "radio-group-dot",
|
|
3716
|
+
className: dot()
|
|
3717
|
+
})
|
|
3718
|
+
});
|
|
3719
|
+
}
|
|
3720
|
+
function RadioGroupItem({ appearance = "default", className, children, ...props }) {
|
|
3721
|
+
const { item } = radioGroup();
|
|
3722
|
+
const itemClassName = appearance === "none" ? cn("sr-only", "data-disabled:cursor-not-allowed", className) : item({ className });
|
|
3723
|
+
return /* @__PURE__ */ jsx(Radio.Root, {
|
|
3724
|
+
"data-slot": "radio-group-item",
|
|
3725
|
+
className: itemClassName,
|
|
3726
|
+
...props,
|
|
3727
|
+
children: children ?? (appearance === "default" ? /* @__PURE__ */ jsx(RadioGroupIndicator, {}) : null)
|
|
3728
|
+
});
|
|
3729
|
+
}
|
|
3730
|
+
//#endregion
|
|
3452
3731
|
//#region src/components/avatar/avatar.tsx
|
|
3453
3732
|
const avatar = tv$1({
|
|
3454
3733
|
slots: {
|
|
@@ -4779,6 +5058,7 @@ const SUFFIX_LIFT = {
|
|
|
4779
5058
|
"x-height": "top-[calc((1em-var(--message-reference-em))/4)]",
|
|
4780
5059
|
icon: "top-[calc(0.25em-var(--message-reference-em)*0.35)]"
|
|
4781
5060
|
}["x-height"];
|
|
5061
|
+
const INDICATOR = ["pointer-events-none absolute -right-2.5 top-0 inline-flex size-2 shrink-0 items-center justify-center", "*:data-[slot=status]:size-full"];
|
|
4782
5062
|
const messageReference = tv$1({
|
|
4783
5063
|
slots: {
|
|
4784
5064
|
root: [
|
|
@@ -4789,9 +5069,9 @@ const messageReference = tv$1({
|
|
|
4789
5069
|
"outline-none focus-visible:shadow-focus",
|
|
4790
5070
|
"[&_svg]:size-[0.857em] [&_svg]:shrink-0 [&_svg]:self-center",
|
|
4791
5071
|
"*:data-[slot=spinner]:self-center",
|
|
4792
|
-
"has-[>[data-slot=message-reference-indicator]]:relative has-[>[data-slot=message-reference-indicator]]:mr-2",
|
|
4793
|
-
"has-[>[data-slot=message-reference-indicator]]:inline-block",
|
|
4794
|
-
"has-[>[data-slot=message-reference-indicator]]:overflow-visible"
|
|
5072
|
+
"has-[>[data-slot=message-reference-indicator],>[data-slot=message-reference-read-mark]]:relative has-[>[data-slot=message-reference-indicator],>[data-slot=message-reference-read-mark]]:mr-2.5",
|
|
5073
|
+
"has-[>[data-slot=message-reference-indicator],>[data-slot=message-reference-read-mark]]:inline-block",
|
|
5074
|
+
"has-[>[data-slot=message-reference-indicator],>[data-slot=message-reference-read-mark]]:overflow-visible"
|
|
4795
5075
|
],
|
|
4796
5076
|
chipLabel: "min-w-0 truncate",
|
|
4797
5077
|
suffix: [
|
|
@@ -4800,13 +5080,11 @@ const messageReference = tv$1({
|
|
|
4800
5080
|
"font-mono text-label leading-none font-normal text-foreground-hint"
|
|
4801
5081
|
],
|
|
4802
5082
|
icon: ["inline-flex size-3.5 shrink-0 items-center justify-center self-center", "*:size-full *:shrink-0 [&>img]:rounded-[2px] [&>img]:object-cover"],
|
|
4803
|
-
indicator:
|
|
5083
|
+
indicator: INDICATOR,
|
|
4804
5084
|
readMark: [
|
|
4805
|
-
|
|
4806
|
-
"-
|
|
4807
|
-
"
|
|
4808
|
-
"text-foreground-hint",
|
|
4809
|
-
"[&>svg]:block [&>svg]:size-[0.857em]"
|
|
5085
|
+
...INDICATOR,
|
|
5086
|
+
"[&>svg]:absolute [&>svg]:top-1/2 [&>svg]:left-1/2 [&>svg]:-translate-1/2",
|
|
5087
|
+
"[&>svg]:size-[6.5px]! [&>svg]:text-sticker-ink"
|
|
4810
5088
|
]
|
|
4811
5089
|
},
|
|
4812
5090
|
variants: {
|
|
@@ -4856,22 +5134,31 @@ function MessageReferenceIndicator({ className, render, ...props }) {
|
|
|
4856
5134
|
});
|
|
4857
5135
|
}
|
|
4858
5136
|
/**
|
|
4859
|
-
* The read receipt on a mention:
|
|
4860
|
-
*
|
|
4861
|
-
*
|
|
4862
|
-
*
|
|
5137
|
+
* The read receipt on a mention: the online light (8px, lime, ink edge) with
|
|
5138
|
+
* an ink check in it, at the mention's top right, once the one mentioned has
|
|
5139
|
+
* read the message. Put it last inside the mention, and render nothing until
|
|
5140
|
+
* then. The light and check are decorative; `children` is what a screen
|
|
5141
|
+
* reader says instead ("Read"), visually hidden.
|
|
4863
5142
|
*/
|
|
4864
5143
|
function MessageReferenceReadMark({ children, className, render, ...props }) {
|
|
4865
5144
|
const { readMark } = messageReference();
|
|
4866
5145
|
const defaultProps = {
|
|
4867
5146
|
className: readMark({ className }),
|
|
4868
|
-
children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
4869
|
-
|
|
4870
|
-
|
|
4871
|
-
|
|
4872
|
-
|
|
4873
|
-
|
|
4874
|
-
|
|
5147
|
+
children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
5148
|
+
/* @__PURE__ */ jsx(Status, {
|
|
5149
|
+
presence: "online",
|
|
5150
|
+
size: "sm",
|
|
5151
|
+
"aria-hidden": true
|
|
5152
|
+
}),
|
|
5153
|
+
/* @__PURE__ */ jsx(Check, {
|
|
5154
|
+
"aria-hidden": true,
|
|
5155
|
+
strokeWidth: 3
|
|
5156
|
+
}),
|
|
5157
|
+
children == null ? null : /* @__PURE__ */ jsx("span", {
|
|
5158
|
+
className: "sr-only",
|
|
5159
|
+
children
|
|
5160
|
+
})
|
|
5161
|
+
] })
|
|
4875
5162
|
};
|
|
4876
5163
|
return useRender({
|
|
4877
5164
|
defaultTagName: "span",
|
|
@@ -5938,4 +6225,4 @@ function InboxItemActions({ className, render, reveal, ...props }) {
|
|
|
5938
6225
|
});
|
|
5939
6226
|
}
|
|
5940
6227
|
//#endregion
|
|
5941
|
-
export { MessageTextSelectionToolbarSeparator as $,
|
|
6228
|
+
export { MessageTextSelectionToolbarSeparator as $, headEdgePull as $i, PopoverClose as $n, ListRowBody as $r, MessageItemSearchMatch as $t, MessageList as A, DialogSurface as Ai, PreviewCardHeader as An, DropdownMenuShortcut as Ar, MessageItemBadgeSeparator as At, MessageQuotedPreviewHeader as B, buttonVariants as Bi, MobileNavServerPopoverDestination as Bn, PanelScrollContent as Br, MessageItemInlineStatus as Bt, MessageListJumpPill as C, DialogFooter as Ci, PreviewCardActions as Cn, DropdownMenuLinkItem as Cr, MessageReactionTooltipContent as Ct, MessageListEndFade as D, DialogOverlay as Di, PreviewCardDescription as Dn, DropdownMenuRadioItem as Dr, MessageReactionTooltipNames as Dt, MessageListDateDivider as E, DialogNav as Ei, PreviewCardContent as En, DropdownMenuRadioGroup as Er, MessageReactionTooltipNameText as Et, MessageQuotedPreviewAuthorDelegatedBy as F, TextLink as Fi, PreviewCardTitle as Fn, KbdGroup as Fr, MessageItemDelegatedAvatar as Ft, MessageQuotedPreviewUnavailable as G, withOverlayLayer as Gi, MobileNavServerPopoverRowBody as Gn, ScrollAreaCorner as Gr, MessageItemSenderGroup as Gt, MessageQuotedPreviewText as H, defaultNativeButton as Hi, MobileNavServerPopoverGroup as Hn, PanelSection as Hr, MessageItemSender as Ht, MessageQuotedPreviewAuthorMeta as I, TextLinkExternalIcon as Ii, PreviewCardTrigger as In, Panel as Ir, MessageItemDelegatedBy as It, MessageEmbedFooter as J, ThemeStateContext as Ji, Popover$1 as Jn, ScrollAreaViewport as Jr, MessageItemBody as Jt, MessageEmbed as K, useThemeScopeProps as Ki, MobileNavServerPopoverRowDescription as Kn, ScrollAreaScrollbar as Kr, MessageItemTime as Kt, MessageQuotedPreviewAuthorName as L, textLinkVariants as Li, MobileNavServerItem as Ln, PanelBody as Lr, MessageItemDelegatedByButton as Lt, MessageQuotedPreviewAttachment as M, DialogTrigger as Mi, PreviewCardPopup as Mn, DropdownMenuSubmenuTrigger as Mr, MessageItemSavedIndicator as Mt, MessageQuotedPreviewAttachments as N, PanelAction as Ni, PreviewCardPortal as Nn, DropdownMenuTrigger as Nr, MessageItemToolbar as Nt, MessageListHistoryLimited as O, DialogPortal as Oi, PreviewCardEyebrow as On, DropdownMenuRadioItemIndicator as Or, MessageReactionTooltipSeparator as Ot, MessageQuotedPreviewAuthor as P, panelToggleAction as Pi, PreviewCardSeparator as Pn, Kbd as Pr, MessageItemToolbarButton as Pt, MessageTextSelectionToolbarButton as Q, controlIconInset as Qi, PopoverBody as Qn, ListRow as Qr, MessageItemFooter as Qt, MessageQuotedPreviewChannel as R, DialogSheetReset as Ri, MobileNavServerPopover as Rn, PanelFooter as Rr, MessageItemDelegatedByName as Rt, MessageListJumpControls as S, DialogDescription as Si, PreviewCard$1 as Sn, DropdownMenuLabel as Sr, MessageReactionQuickRow as St, MessageListJumpPillGroup as T, DialogHeader as Ti, PreviewCardBody as Tn, DropdownMenuPortal as Tr, MessageReactionTooltipName as Tt, MessageQuotedPreviewThread as U, OverlayLayerProvider as Ui, MobileNavServerPopoverList as Un, ScrollArea$1 as Ur, MessageItemSenderBadges as Ut, MessageQuotedPreviewLoading as V, Spinner as Vi, MobileNavServerPopoverDestinations as Vn, PanelScrollViewport as Vr, MessageItemMeta as Vt, MessageQuotedPreviewTimestamp as W, useParentOverlayKind as Wi, MobileNavServerPopoverRow as Wn, ScrollAreaContent as Wr, MessageItemSenderButton as Wt, messageEmbed as X, stackedActions as Xi, PopoverArrow as Xn, CheckboxIndicator as Xr, MessageItemEdited as Xt, MessageEmbedHeader as Y, tv$1 as Yi, PopoverActions as Yn, Checkbox$1 as Yr, MessageItemContent as Yt, MessageTextSelectionToolbar as Z, useStackedActions as Zi, PopoverBackdrop as Zn, Status as Zr, MessageItemEmbedded as Zt, InboxItemTrailing as _, useMobileViewport as _i, useOverflowTitle as _n, DropdownMenuContent as _r, MessageReactionErrorIndicator as _t, InboxItemContext as a, ListRowMeta as ai, Avatar$1 as an, PopoverSeparator as ar, MessageReferenceIcon as at, useLatestRef as b, DialogClose as bi, observeTruncation as bn, DropdownMenuItemCount as br, MessageReactionPickerStatic as bt, InboxItemLeading as c, ListRowValue as ci, AvatarGroup as cn, PopoverViewport as cr, MessageReferencePending as ct, InboxItemMetadata as d, TooltipPortal as di, RadioGroup$1 as dn, MobileNavItem as dr, MessageReferenceText as dt, headEdges as ea, ListRowBottom as ei, MessageItemAvatarSlot as en, PopoverContent as er, MessageMultiSelect as et, InboxItemSelection as f, TooltipProvider as fi, RadioGroupIndicator as fn, MobileNavLabel as fr, MessageReferenceUnavailable as ft, InboxItemTitle as g, DialogSheetContent as gi, InputGroupInput as gn, DropdownMenuCheckboxItemIndicator as gr, MessageReactionCount as gt, InboxItemTimestamp as h, DialogCommit as hi, InputGroupAddon as hn, DropdownMenuCheckboxItem as hr, MessageReactionChip as ht, InboxItemContent as i, ListRowIcon as ii, searchHit as in, PopoverPortal as ir, MessageReferenceChip as it, MessageQuotedPreview as j, DialogTitle as ji, PreviewCardMeta as jn, DropdownMenuSubmenu as jr, MessageItemReadReceipt as jt, MessageListNotice as k, DialogSheetBack as ki, PreviewCardFooter as kn, DropdownMenuSeparator as kr, MessageItemBadge as kt, InboxItemMarks as l, Tooltip$1 as li, AvatarGroupCount as ln, useHoldThenMoveTouchSensor as lr, MessageReferenceReadMark as lt, InboxItemSubtitle as m, Badge as mi, InputGroup as mn, DropdownMenu as mr, MessageReactionAddButton as mt, InboxItemActions as n, ListRowDescription as ni, MessageItemGutter as nn, PopoverHeader as nr, MessageMultiSelectToolbar as nt, InboxItemHeading as o, ListRowTitle as oi, AvatarBadge as on, PopoverTitle as or, MessageReferenceIndicator as ot, InboxItemSender as p, TooltipTrigger as pi, RadioGroupItem as pn, MobileNavRoot as pr, inlineChip as pt, MessageEmbedContent as q, useTheme as qi, MobileNavServerPopoverRowLabel as qn, ScrollAreaThumb as qr, MessageItemAttachments as qt, InboxItemBody as r, ListRowGroup as ri, MessageItem as rn, PopoverPopup as rr, MessageMultiSelectToolbarActions as rt, InboxItemHoverTarget as s, ListRowTop as si, AvatarFallback as sn, PopoverTrigger as sr, MessageReferenceLabel as st, InboxItem as t, decisionWidth as ta, ListRowChevron as ti, MessageItemContinuationTime as tn, PopoverDescription as tr, MessageMultiSelectCheckbox as tt, InboxItemMessage as u, TooltipContent as ui, AvatarImage as un, useMouseOnlyPointerSensor as ur, MessageReferenceSuffix as ut, InboxItemTrigger as v, Dialog$1 as vi, measureContent as vn, DropdownMenuFooter as vr, MessageReactionGlyph as vt, MessageListJumpPillDismiss as w, DialogFooterNote as wi, PreviewCardArrow as wn, DropdownMenuPopup as wr, MessageReactionTooltipMeta as wt, Skeleton as x, DialogContent as xi, readNow as xn, DropdownMenuItemLabel as xr, MessageReactionQuickButton as xt, inboxItem as y, DialogBody as yi, measureElement as yn, DropdownMenuItem as yr, MessageReactionPickerContent as yt, MessageQuotedPreviewContent as z, Button$1 as zi, MobileNavServerPopoverContent as zn, PanelHeaderRoot as zr, MessageItemHeader as zt };
|
|
@@ -1465,10 +1465,11 @@ type MessageReferenceIndicatorProps = useRender.ComponentProps<"span">;
|
|
|
1465
1465
|
declare function MessageReferenceIndicator({ className, render, ...props }: MessageReferenceIndicatorProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
1466
1466
|
type MessageReferenceReadMarkProps = useRender.ComponentProps<"span">;
|
|
1467
1467
|
/**
|
|
1468
|
-
* The read receipt on a mention:
|
|
1469
|
-
*
|
|
1470
|
-
*
|
|
1471
|
-
*
|
|
1468
|
+
* The read receipt on a mention: the online light (8px, lime, ink edge) with
|
|
1469
|
+
* an ink check in it, at the mention's top right, once the one mentioned has
|
|
1470
|
+
* read the message. Put it last inside the mention, and render nothing until
|
|
1471
|
+
* then. The light and check are decorative; `children` is what a screen
|
|
1472
|
+
* reader says instead ("Read"), visually hidden.
|
|
1472
1473
|
*/
|
|
1473
1474
|
declare function MessageReferenceReadMark({ children, className, render, ...props }: MessageReferenceReadMarkProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
|
|
1474
1475
|
type MessageReferenceChipProps = SpanProps$1 & {
|