@botiverse/raft-ui 0.22.0 → 0.22.1
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 +39 -0
- package/dist/components/timeline/timeline.css +2 -2
- package/dist/foundation.css +3 -3
- package/dist/{inbox-item.recipe-3j4DHKZ2.mjs → inbox-item-BtvK75T1.mjs} +562 -8
- package/dist/{index-DT1Hg5N-.d.mts → inbox-item-ChANmbeB.d.mts} +262 -3
- package/dist/index.d.mts +28 -245
- package/dist/index.mjs +41 -535
- package/dist/style.css +1 -1
- package/dist/styles.css +76 -3
- package/dist/tokens.json +2 -2
- package/dist/wip.d.mts +65 -2
- package/dist/wip.mjs +139 -3
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { cn } from "./cn.mjs";
|
|
2
2
|
import { Dialog } from "@base-ui/react/dialog";
|
|
3
|
-
import { ArrowLeft, Check, Minus, X } from "lucide-react";
|
|
3
|
+
import { ArrowLeft, Check, ChevronRight, Minus, X } from "lucide-react";
|
|
4
4
|
import { Children, Fragment, createContext, createElement, isValidElement, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
|
|
5
5
|
import { tv } from "tailwind-variants/lite";
|
|
6
6
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
@@ -1567,6 +1567,231 @@ function TooltipContent({ align = "center", alignOffset = 0, anchor, arrowPaddin
|
|
|
1567
1567
|
});
|
|
1568
1568
|
}
|
|
1569
1569
|
//#endregion
|
|
1570
|
+
//#region src/components/list-row/list-row.recipe.ts
|
|
1571
|
+
const hairline = [
|
|
1572
|
+
"before:pointer-events-none before:absolute before:top-0 before:right-0 before:hidden",
|
|
1573
|
+
"before:left-(--list-row-rule-start) before:border-t before:border-line-hairline",
|
|
1574
|
+
"[[data-slot=list-row]+&]:before:block [li+li>&]:before:block"
|
|
1575
|
+
];
|
|
1576
|
+
const listRow = tv$1({
|
|
1577
|
+
slots: {
|
|
1578
|
+
group: ["flex min-w-0 flex-col overflow-hidden", "rounded-container border border-line-hairline bg-layer-card text-foreground"],
|
|
1579
|
+
root: [
|
|
1580
|
+
"group/list-row relative flex w-full min-w-0 items-center gap-3 px-4 py-3 text-left",
|
|
1581
|
+
"font-sans no-underline",
|
|
1582
|
+
"transition-colors duration-100",
|
|
1583
|
+
"outline-none focus-visible:keyboard:inset-ring-2 focus-visible:keyboard:inset-ring-foreground",
|
|
1584
|
+
"data-selected:bg-info-soft",
|
|
1585
|
+
"[--list-row-ink:var(--foreground)] [--list-row-ink-2:var(--foreground-muted)] [--list-row-ink-3:var(--foreground-hint)]",
|
|
1586
|
+
"text-(--list-row-ink)",
|
|
1587
|
+
"not-disabled:not-aria-disabled:data-[tone=unread]:[--list-row-ink-2:var(--foreground)]",
|
|
1588
|
+
"not-disabled:not-aria-disabled:data-[tone=muted]:[--list-row-ink:var(--foreground-muted)]",
|
|
1589
|
+
"not-disabled:not-aria-disabled:data-[tone=away]:[--list-row-ink:var(--foreground-hint)]",
|
|
1590
|
+
"not-disabled:not-aria-disabled:data-[tone=away]:[--list-row-ink-2:var(--foreground-hint)]",
|
|
1591
|
+
"disabled:cursor-not-allowed disabled:[--list-row-ink:var(--foreground-disabled)]",
|
|
1592
|
+
"disabled:[--list-row-ink-2:var(--foreground-disabled)] disabled:[--list-row-ink-3:var(--foreground-disabled)]",
|
|
1593
|
+
"aria-disabled:cursor-not-allowed aria-disabled:[--list-row-ink:var(--foreground-disabled)]",
|
|
1594
|
+
"aria-disabled:[--list-row-ink-2:var(--foreground-disabled)] aria-disabled:[--list-row-ink-3:var(--foreground-disabled)]"
|
|
1595
|
+
],
|
|
1596
|
+
icon: ["flex shrink-0 items-center justify-center", "text-(--list-row-ink-3) [&>svg]:size-5 [&>svg]:shrink-0"],
|
|
1597
|
+
body: ["flex min-w-0 flex-1 flex-col gap-0.5"],
|
|
1598
|
+
line: ["flex min-w-0 items-center gap-2"],
|
|
1599
|
+
title: [
|
|
1600
|
+
"min-w-0 flex-1 truncate",
|
|
1601
|
+
"text-body font-semibold",
|
|
1602
|
+
"group-data-[tone=unread]/list-row:font-bold"
|
|
1603
|
+
],
|
|
1604
|
+
description: ["min-w-0 flex-1 truncate", "text-callout text-(--list-row-ink-2)"],
|
|
1605
|
+
meta: ["shrink-0", "font-mono text-mono-meta font-normal tabular-nums text-(--list-row-ink-3)"],
|
|
1606
|
+
value: ["max-w-[45%] shrink-0 truncate", "text-subhead text-(--list-row-ink-3)"],
|
|
1607
|
+
chevron: ["flex shrink-0 items-center justify-center", "text-(--list-row-ink-3) [&>svg]:size-5 [&>svg]:shrink-0"]
|
|
1608
|
+
},
|
|
1609
|
+
variants: {
|
|
1610
|
+
variant: {
|
|
1611
|
+
default: { root: ["min-h-16 [--list-row-rule-start:63px]", hairline] },
|
|
1612
|
+
plain: { root: ["[--list-row-rule-start:16px]", hairline] },
|
|
1613
|
+
entry: { root: "" }
|
|
1614
|
+
},
|
|
1615
|
+
interactive: {
|
|
1616
|
+
true: { root: [
|
|
1617
|
+
"not-disabled:not-aria-disabled:not-data-selected:hover:overlay-subtle",
|
|
1618
|
+
"not-disabled:not-aria-disabled:not-data-selected:active:overlay-medium",
|
|
1619
|
+
"not-data-selected:data-popup-open:overlay-subtle"
|
|
1620
|
+
] },
|
|
1621
|
+
false: {}
|
|
1622
|
+
},
|
|
1623
|
+
wrap: {
|
|
1624
|
+
true: { description: "whitespace-normal text-pretty" },
|
|
1625
|
+
false: {}
|
|
1626
|
+
}
|
|
1627
|
+
},
|
|
1628
|
+
defaultVariants: {
|
|
1629
|
+
variant: "default",
|
|
1630
|
+
interactive: true,
|
|
1631
|
+
wrap: false
|
|
1632
|
+
}
|
|
1633
|
+
});
|
|
1634
|
+
//#endregion
|
|
1635
|
+
//#region src/components/list-row/list-row.tsx
|
|
1636
|
+
/** An inset group: rows wrapped in a card (surface, hairline, radius-lg). */
|
|
1637
|
+
function ListRowGroup({ className, render, ...props }) {
|
|
1638
|
+
const { group } = listRow();
|
|
1639
|
+
const defaultProps = {
|
|
1640
|
+
"data-slot": "list-row-group",
|
|
1641
|
+
className: group({ className })
|
|
1642
|
+
};
|
|
1643
|
+
return useRender({
|
|
1644
|
+
defaultTagName: "div",
|
|
1645
|
+
render,
|
|
1646
|
+
props: mergeProps(defaultProps, props)
|
|
1647
|
+
});
|
|
1648
|
+
}
|
|
1649
|
+
/**
|
|
1650
|
+
* One row of a list. It renders a `button` by default; pass `render={<a />}`
|
|
1651
|
+
* (or a router link) for a row that goes somewhere. Children are the leading
|
|
1652
|
+
* block (an avatar, a channel or icon tile, `ListRowIcon`), `ListRowBody`, and
|
|
1653
|
+
* anything trailing (a value, a badge, a switch, `ListRowChevron`).
|
|
1654
|
+
*/
|
|
1655
|
+
function ListRow({ variant = "default", tone = "default", selected = false, interactive = true, className, render, ...props }) {
|
|
1656
|
+
const { root } = listRow({
|
|
1657
|
+
variant,
|
|
1658
|
+
interactive
|
|
1659
|
+
});
|
|
1660
|
+
const defaultProps = {
|
|
1661
|
+
"data-slot": "list-row",
|
|
1662
|
+
"data-variant": variant,
|
|
1663
|
+
"data-tone": tone === "default" ? void 0 : tone,
|
|
1664
|
+
"data-selected": selected ? "" : void 0,
|
|
1665
|
+
className: root({ className }),
|
|
1666
|
+
...interactive && !render ? { type: "button" } : {}
|
|
1667
|
+
};
|
|
1668
|
+
return useRender({
|
|
1669
|
+
defaultTagName: interactive ? "button" : "div",
|
|
1670
|
+
render,
|
|
1671
|
+
props: mergeProps(defaultProps, props)
|
|
1672
|
+
});
|
|
1673
|
+
}
|
|
1674
|
+
/** A 20px leading icon in ink-3: entry rows and settings. */
|
|
1675
|
+
function ListRowIcon({ className, render, ...props }) {
|
|
1676
|
+
const { icon } = listRow();
|
|
1677
|
+
const defaultProps = {
|
|
1678
|
+
"data-slot": "list-row-icon",
|
|
1679
|
+
"aria-hidden": true,
|
|
1680
|
+
className: icon({ className })
|
|
1681
|
+
};
|
|
1682
|
+
return useRender({
|
|
1683
|
+
defaultTagName: "span",
|
|
1684
|
+
render,
|
|
1685
|
+
props: mergeProps(defaultProps, props)
|
|
1686
|
+
});
|
|
1687
|
+
}
|
|
1688
|
+
/** The text column: the title and the preview, or a `ListRowTop` and a `ListRowBottom`. */
|
|
1689
|
+
function ListRowBody({ className, render, ...props }) {
|
|
1690
|
+
const { body } = listRow();
|
|
1691
|
+
const defaultProps = {
|
|
1692
|
+
"data-slot": "list-row-body",
|
|
1693
|
+
className: body({ className })
|
|
1694
|
+
};
|
|
1695
|
+
return useRender({
|
|
1696
|
+
defaultTagName: "span",
|
|
1697
|
+
render,
|
|
1698
|
+
props: mergeProps(defaultProps, props)
|
|
1699
|
+
});
|
|
1700
|
+
}
|
|
1701
|
+
/** The first line: the title, then the time. */
|
|
1702
|
+
function ListRowTop({ className, render, ...props }) {
|
|
1703
|
+
const { line } = listRow();
|
|
1704
|
+
const defaultProps = {
|
|
1705
|
+
"data-slot": "list-row-top",
|
|
1706
|
+
className: line({ className })
|
|
1707
|
+
};
|
|
1708
|
+
return useRender({
|
|
1709
|
+
defaultTagName: "span",
|
|
1710
|
+
render,
|
|
1711
|
+
props: mergeProps(defaultProps, props)
|
|
1712
|
+
});
|
|
1713
|
+
}
|
|
1714
|
+
/** The second line: the preview, then at most one badge. */
|
|
1715
|
+
function ListRowBottom({ className, render, ...props }) {
|
|
1716
|
+
const { line } = listRow();
|
|
1717
|
+
const defaultProps = {
|
|
1718
|
+
"data-slot": "list-row-bottom",
|
|
1719
|
+
className: line({ className })
|
|
1720
|
+
};
|
|
1721
|
+
return useRender({
|
|
1722
|
+
defaultTagName: "span",
|
|
1723
|
+
render,
|
|
1724
|
+
props: mergeProps(defaultProps, props)
|
|
1725
|
+
});
|
|
1726
|
+
}
|
|
1727
|
+
/** 16/24 600 on one line; the row's tone sets its weight and ink. */
|
|
1728
|
+
function ListRowTitle({ className, render, ...props }) {
|
|
1729
|
+
const { title } = listRow();
|
|
1730
|
+
const defaultProps = {
|
|
1731
|
+
"data-slot": "list-row-title",
|
|
1732
|
+
className: title({ className })
|
|
1733
|
+
};
|
|
1734
|
+
return useRender({
|
|
1735
|
+
defaultTagName: "span",
|
|
1736
|
+
render,
|
|
1737
|
+
props: mergeProps(defaultProps, props)
|
|
1738
|
+
});
|
|
1739
|
+
}
|
|
1740
|
+
/** The preview (who spoke first: "Wug: …") or a setting's consequence, 14/20 ink-2. */
|
|
1741
|
+
function ListRowDescription({ className, render, wrap = false, ...props }) {
|
|
1742
|
+
const { description } = listRow({ wrap });
|
|
1743
|
+
const defaultProps = {
|
|
1744
|
+
"data-slot": "list-row-description",
|
|
1745
|
+
className: description({ className })
|
|
1746
|
+
};
|
|
1747
|
+
return useRender({
|
|
1748
|
+
defaultTagName: "span",
|
|
1749
|
+
render,
|
|
1750
|
+
props: mergeProps(defaultProps, props)
|
|
1751
|
+
});
|
|
1752
|
+
}
|
|
1753
|
+
/** Machine-written facts in Space Mono 12, ink-3: the time, a gray count. */
|
|
1754
|
+
function ListRowMeta({ className, render, ...props }) {
|
|
1755
|
+
const { meta } = listRow();
|
|
1756
|
+
const defaultProps = {
|
|
1757
|
+
"data-slot": "list-row-meta",
|
|
1758
|
+
className: meta({ className })
|
|
1759
|
+
};
|
|
1760
|
+
return useRender({
|
|
1761
|
+
defaultTagName: "span",
|
|
1762
|
+
render,
|
|
1763
|
+
props: mergeProps(defaultProps, props)
|
|
1764
|
+
});
|
|
1765
|
+
}
|
|
1766
|
+
/** A setting's current value on the right, 15/20 ink-3, at most 45% of the row. */
|
|
1767
|
+
function ListRowValue({ className, render, ...props }) {
|
|
1768
|
+
const { value } = listRow();
|
|
1769
|
+
const defaultProps = {
|
|
1770
|
+
"data-slot": "list-row-value",
|
|
1771
|
+
className: value({ className })
|
|
1772
|
+
};
|
|
1773
|
+
return useRender({
|
|
1774
|
+
defaultTagName: "span",
|
|
1775
|
+
render,
|
|
1776
|
+
props: mergeProps(defaultProps, props)
|
|
1777
|
+
});
|
|
1778
|
+
}
|
|
1779
|
+
/** The ink-3 arrow of a row that opens another page. */
|
|
1780
|
+
function ListRowChevron({ className, render, ...props }) {
|
|
1781
|
+
const { chevron } = listRow();
|
|
1782
|
+
const defaultProps = {
|
|
1783
|
+
"data-slot": "list-row-chevron",
|
|
1784
|
+
"aria-hidden": true,
|
|
1785
|
+
className: chevron({ className }),
|
|
1786
|
+
children: /* @__PURE__ */ jsx(ChevronRight, {})
|
|
1787
|
+
};
|
|
1788
|
+
return useRender({
|
|
1789
|
+
defaultTagName: "span",
|
|
1790
|
+
render,
|
|
1791
|
+
props: mergeProps(defaultProps, props)
|
|
1792
|
+
});
|
|
1793
|
+
}
|
|
1794
|
+
//#endregion
|
|
1570
1795
|
//#region src/lib/presence.ts
|
|
1571
1796
|
/**
|
|
1572
1797
|
* The five status lights of the design system. Each colour is a fixed
|
|
@@ -3468,8 +3693,8 @@ const messageItem = tv$1({
|
|
|
3468
3693
|
"has-data-popup-open:[--mi-toolbar-opacity:1] has-data-popup-open:[--mi-toolbar-pe:auto]",
|
|
3469
3694
|
"min-h-0 px-2 py-timeline-row border-t-(length:--spacing-timeline-turn) border-transparent bg-clip-padding",
|
|
3470
3695
|
"hover:[--mi-ct-color:var(--foreground-hint)] has-data-popup-open:[--mi-ct-color:var(--foreground-hint)]",
|
|
3471
|
-
"bg-(--mi-row-fill) [--mi-row-fill:
|
|
3472
|
-
"hover:[--mi-row-fill:var(--fill-subtle)]",
|
|
3696
|
+
"bg-(--mi-row-fill) [--mi-row-fill:var(--located-fill)]",
|
|
3697
|
+
"not-data-located:hover:[--mi-row-fill:var(--fill-subtle)]",
|
|
3473
3698
|
"data-popup-open:[--mi-row-fill:var(--fill-subtle)] has-data-popup-open:[--mi-row-fill:var(--fill-subtle)]",
|
|
3474
3699
|
"has-data-[slot=message-item-search-match]:[--mi-row-fill:var(--info-soft)] has-data-[slot=message-item-search-match]:hover:[--mi-row-fill:var(--info-soft)]",
|
|
3475
3700
|
"has-[[data-slot=message-multi-select-checkbox][data-checked]]:[--mi-row-fill:var(--info-soft)]",
|
|
@@ -3562,11 +3787,12 @@ const messageItem = tv$1({
|
|
|
3562
3787
|
});
|
|
3563
3788
|
//#endregion
|
|
3564
3789
|
//#region src/components/message-item/message-item-root.tsx
|
|
3565
|
-
function MessageItem({ className, compact, render, ...props }) {
|
|
3790
|
+
function MessageItem({ className, compact, located = false, render, ...props }) {
|
|
3566
3791
|
const { root } = messageItem({ compact });
|
|
3567
3792
|
const defaultProps = {
|
|
3568
3793
|
"data-message-item": "",
|
|
3569
3794
|
"data-compact": compact ? "true" : void 0,
|
|
3795
|
+
"data-located": located ? "" : void 0,
|
|
3570
3796
|
className: root({ className })
|
|
3571
3797
|
};
|
|
3572
3798
|
return useRender({
|
|
@@ -4235,7 +4461,7 @@ function MessageReactionTooltipMeta({ className, render, ...props }) {
|
|
|
4235
4461
|
* centred on the chip (alignment.md, Marks in running text).
|
|
4236
4462
|
* - Sides: 6px at each end. A chip with a leading mark (a 14px icon, an app's
|
|
4237
4463
|
* image or avatar in `MessageReferenceIcon`'s 14px box, the loading spinner,
|
|
4238
|
-
* a task's
|
|
4464
|
+
* a task's 10px status pixel, each in its own box) takes
|
|
4239
4465
|
* 4.5px at each end, so the ink at its two ends sits equally far in
|
|
4240
4466
|
* (alignment.md, Chips), and the mark is 4px from the text. A note after the
|
|
4241
4467
|
* label keeps the same 4px.
|
|
@@ -4281,7 +4507,14 @@ const messageReference = tv$1({
|
|
|
4281
4507
|
"font-mono text-label leading-none font-normal text-foreground-hint"
|
|
4282
4508
|
],
|
|
4283
4509
|
icon: ["inline-flex size-3.5 shrink-0 items-center justify-center self-center", "*:size-full *:shrink-0 [&>img]:rounded-[2px] [&>img]:object-cover"],
|
|
4284
|
-
indicator: ["pointer-events-none absolute -right-1.5 top-0 inline-flex size-2 shrink-0 items-center justify-center", "*:data-[slot=status]:size-full"]
|
|
4510
|
+
indicator: ["pointer-events-none absolute -right-1.5 top-0 inline-flex size-2 shrink-0 items-center justify-center", "*:data-[slot=status]:size-full"],
|
|
4511
|
+
readMark: [
|
|
4512
|
+
"relative inline-block shrink-0 self-center",
|
|
4513
|
+
"-mr-[calc(0.857em*2/24)]",
|
|
4514
|
+
"align-[calc(0.7em/2-0.857em/2)] leading-none",
|
|
4515
|
+
"text-foreground-hint",
|
|
4516
|
+
"[&>svg]:block [&>svg]:size-[0.857em]"
|
|
4517
|
+
]
|
|
4285
4518
|
},
|
|
4286
4519
|
variants: {
|
|
4287
4520
|
variant: {
|
|
@@ -4329,6 +4562,31 @@ function MessageReferenceIndicator({ className, render, ...props }) {
|
|
|
4329
4562
|
state: { slot: "message-reference-indicator" }
|
|
4330
4563
|
});
|
|
4331
4564
|
}
|
|
4565
|
+
/**
|
|
4566
|
+
* The read receipt on a mention: a muted check after the mention's text, once
|
|
4567
|
+
* the one mentioned has read the message. Put it last inside the mention, and
|
|
4568
|
+
* render nothing until then. The check is decorative; `children` is what a
|
|
4569
|
+
* screen reader says instead ("Read"), visually hidden.
|
|
4570
|
+
*/
|
|
4571
|
+
function MessageReferenceReadMark({ children, className, render, ...props }) {
|
|
4572
|
+
const { readMark } = messageReference();
|
|
4573
|
+
const defaultProps = {
|
|
4574
|
+
className: readMark({ className }),
|
|
4575
|
+
children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Check, {
|
|
4576
|
+
"aria-hidden": true,
|
|
4577
|
+
strokeWidth: 2
|
|
4578
|
+
}), children == null ? null : /* @__PURE__ */ jsx("span", {
|
|
4579
|
+
className: "sr-only",
|
|
4580
|
+
children
|
|
4581
|
+
})] })
|
|
4582
|
+
};
|
|
4583
|
+
return useRender({
|
|
4584
|
+
defaultTagName: "span",
|
|
4585
|
+
render,
|
|
4586
|
+
props: mergeProps(defaultProps, props),
|
|
4587
|
+
state: { slot: "message-reference-read-mark" }
|
|
4588
|
+
});
|
|
4589
|
+
}
|
|
4332
4590
|
function MessageReferenceChip({ className, render, variant = "muted", capped, ...props }) {
|
|
4333
4591
|
const { root } = messageReference({
|
|
4334
4592
|
variant,
|
|
@@ -4944,6 +5202,32 @@ function MessageListJumpPillDismiss({ className, children, render, nativeButton,
|
|
|
4944
5202
|
});
|
|
4945
5203
|
}
|
|
4946
5204
|
//#endregion
|
|
5205
|
+
//#region src/components/skeleton/skeleton.tsx
|
|
5206
|
+
const skeleton = tv$1({
|
|
5207
|
+
slots: { root: [
|
|
5208
|
+
"animate-pulse motion-reduce:animate-none",
|
|
5209
|
+
"pointer-events-none",
|
|
5210
|
+
"data-[variant=line]:rounded-sticker data-[variant=line]:bg-fill-muted",
|
|
5211
|
+
"data-[variant=block]:rounded-sticker data-[variant=block]:bg-fill-muted"
|
|
5212
|
+
] },
|
|
5213
|
+
variants: { variant: {
|
|
5214
|
+
line: { root: "h-3" },
|
|
5215
|
+
block: { root: "" },
|
|
5216
|
+
circle: { root: ["rounded-sticker bg-fill-muted"] }
|
|
5217
|
+
} },
|
|
5218
|
+
defaultVariants: { variant: "block" }
|
|
5219
|
+
});
|
|
5220
|
+
function Skeleton({ variant = "block", className, ...props }) {
|
|
5221
|
+
const { root } = skeleton({ variant });
|
|
5222
|
+
return /* @__PURE__ */ jsx("div", {
|
|
5223
|
+
"aria-hidden": "true",
|
|
5224
|
+
"data-slot": "skeleton",
|
|
5225
|
+
"data-variant": variant,
|
|
5226
|
+
className: root({ className }),
|
|
5227
|
+
...props
|
|
5228
|
+
});
|
|
5229
|
+
}
|
|
5230
|
+
//#endregion
|
|
4947
5231
|
//#region src/components/inbox-item/inbox-item.recipe.ts
|
|
4948
5232
|
const inboxItem = tv$1({
|
|
4949
5233
|
slots: {
|
|
@@ -5008,7 +5292,7 @@ const inboxItem = tv$1({
|
|
|
5008
5292
|
"flex shrink-0",
|
|
5009
5293
|
"mt-0 flex-col items-end gap-2 pt-px",
|
|
5010
5294
|
"max-md:flex-col max-md:items-end max-md:gap-2",
|
|
5011
|
-
"after:hidden after:size-
|
|
5295
|
+
"after:hidden after:size-2.5 after:-mb-px after:shrink-0 after:rounded-[2px] after:border-[1.5px] after:border-sticker-ink after:bg-attention-400",
|
|
5012
5296
|
"group-data-[unread=true]/inbox-item:after:block",
|
|
5013
5297
|
"*:not-data-[reveal=hover]:opacity-[calc(1-var(--inbox-item-reveal-aside,0)*var(--inbox-item-revealed,0))] after:opacity-[calc(1-var(--inbox-item-reveal-aside,0)*var(--inbox-item-revealed,0))]",
|
|
5014
5298
|
"*:not-data-[reveal=hover]:mr-(--inbox-item-aside-room,0px) after:mr-(--inbox-item-aside-room,0px)",
|
|
@@ -5083,4 +5367,274 @@ const inboxItem = tv$1({
|
|
|
5083
5367
|
}]
|
|
5084
5368
|
});
|
|
5085
5369
|
//#endregion
|
|
5086
|
-
|
|
5370
|
+
//#region src/components/inbox-item/inbox-item.tsx
|
|
5371
|
+
const InboxItemDisabledContext = createContext(false);
|
|
5372
|
+
const InboxItemDensityContext = createContext(void 0);
|
|
5373
|
+
function InboxItem({ active = false, className, density, disabled = false, render, ...props }) {
|
|
5374
|
+
const { item } = inboxItem({ density });
|
|
5375
|
+
const defaultProps = {
|
|
5376
|
+
"aria-disabled": disabled || void 0,
|
|
5377
|
+
"data-active": active ? "true" : void 0,
|
|
5378
|
+
"data-density": density,
|
|
5379
|
+
"data-disabled": disabled ? "true" : void 0,
|
|
5380
|
+
"data-slot": "inbox-item",
|
|
5381
|
+
className: item({ className: `group/inbox-item ${className ?? ""}`.trim() })
|
|
5382
|
+
};
|
|
5383
|
+
const element = useRender({
|
|
5384
|
+
defaultTagName: "div",
|
|
5385
|
+
render,
|
|
5386
|
+
props: mergeProps(defaultProps, props)
|
|
5387
|
+
});
|
|
5388
|
+
return /* @__PURE__ */ jsx(InboxItemDisabledContext.Provider, {
|
|
5389
|
+
value: disabled,
|
|
5390
|
+
children: /* @__PURE__ */ jsx(InboxItemDensityContext.Provider, {
|
|
5391
|
+
value: density,
|
|
5392
|
+
children: element
|
|
5393
|
+
})
|
|
5394
|
+
});
|
|
5395
|
+
}
|
|
5396
|
+
function InboxItemTrigger({ className, onClick, render, ...props }) {
|
|
5397
|
+
const disabled = useContext(InboxItemDisabledContext);
|
|
5398
|
+
const { itemTrigger } = inboxItem();
|
|
5399
|
+
const defaultProps = {
|
|
5400
|
+
type: render ? void 0 : "button",
|
|
5401
|
+
"aria-disabled": disabled || void 0,
|
|
5402
|
+
"data-disabled": disabled ? "true" : void 0,
|
|
5403
|
+
"data-slot": "inbox-item-open",
|
|
5404
|
+
disabled: render ? void 0 : disabled,
|
|
5405
|
+
tabIndex: disabled && render ? -1 : void 0,
|
|
5406
|
+
className: itemTrigger({ className }),
|
|
5407
|
+
onClick: (event) => {
|
|
5408
|
+
if (disabled) {
|
|
5409
|
+
event.preventDefault();
|
|
5410
|
+
event.stopPropagation();
|
|
5411
|
+
return;
|
|
5412
|
+
}
|
|
5413
|
+
onClick?.(event);
|
|
5414
|
+
}
|
|
5415
|
+
};
|
|
5416
|
+
return useRender({
|
|
5417
|
+
defaultTagName: "button",
|
|
5418
|
+
render,
|
|
5419
|
+
props: mergeProps(defaultProps, props)
|
|
5420
|
+
});
|
|
5421
|
+
}
|
|
5422
|
+
function InboxItemLeading({ className, render, ...props }) {
|
|
5423
|
+
const { itemLeading } = inboxItem();
|
|
5424
|
+
const defaultProps = {
|
|
5425
|
+
"data-slot": "inbox-item-leading",
|
|
5426
|
+
className: itemLeading({ className })
|
|
5427
|
+
};
|
|
5428
|
+
return useRender({
|
|
5429
|
+
defaultTagName: "div",
|
|
5430
|
+
render,
|
|
5431
|
+
props: mergeProps(defaultProps, props)
|
|
5432
|
+
});
|
|
5433
|
+
}
|
|
5434
|
+
function InboxItemSelection({ className, render, ...props }) {
|
|
5435
|
+
const { itemSelection } = inboxItem();
|
|
5436
|
+
const defaultProps = {
|
|
5437
|
+
"data-slot": "inbox-item-selection",
|
|
5438
|
+
className: itemSelection({ className })
|
|
5439
|
+
};
|
|
5440
|
+
return useRender({
|
|
5441
|
+
defaultTagName: "div",
|
|
5442
|
+
render,
|
|
5443
|
+
props: mergeProps(defaultProps, props)
|
|
5444
|
+
});
|
|
5445
|
+
}
|
|
5446
|
+
function InboxItemContent({ className, render, ...props }) {
|
|
5447
|
+
const { itemContent } = inboxItem();
|
|
5448
|
+
const defaultProps = {
|
|
5449
|
+
"data-slot": "inbox-item-content",
|
|
5450
|
+
className: itemContent({ className })
|
|
5451
|
+
};
|
|
5452
|
+
return useRender({
|
|
5453
|
+
defaultTagName: "div",
|
|
5454
|
+
render,
|
|
5455
|
+
props: mergeProps(defaultProps, props)
|
|
5456
|
+
});
|
|
5457
|
+
}
|
|
5458
|
+
function InboxItemContext({ className, render, ...props }) {
|
|
5459
|
+
const { itemContext } = inboxItem();
|
|
5460
|
+
const defaultProps = {
|
|
5461
|
+
"data-slot": "inbox-item-context",
|
|
5462
|
+
className: itemContext({ className })
|
|
5463
|
+
};
|
|
5464
|
+
return useRender({
|
|
5465
|
+
defaultTagName: "div",
|
|
5466
|
+
render,
|
|
5467
|
+
props: mergeProps(defaultProps, props)
|
|
5468
|
+
});
|
|
5469
|
+
}
|
|
5470
|
+
function InboxItemSubtitle({ className, render, ...props }) {
|
|
5471
|
+
const { itemSubtitle } = inboxItem();
|
|
5472
|
+
const defaultProps = {
|
|
5473
|
+
"data-slot": "inbox-item-subtitle",
|
|
5474
|
+
className: itemSubtitle({ className })
|
|
5475
|
+
};
|
|
5476
|
+
return useRender({
|
|
5477
|
+
defaultTagName: "div",
|
|
5478
|
+
render,
|
|
5479
|
+
props: mergeProps(defaultProps, props)
|
|
5480
|
+
});
|
|
5481
|
+
}
|
|
5482
|
+
function InboxItemHeading({ className, render, ...props }) {
|
|
5483
|
+
const { itemHeading } = inboxItem();
|
|
5484
|
+
const defaultProps = {
|
|
5485
|
+
"data-slot": "inbox-item-heading",
|
|
5486
|
+
className: itemHeading({ className })
|
|
5487
|
+
};
|
|
5488
|
+
return useRender({
|
|
5489
|
+
defaultTagName: "div",
|
|
5490
|
+
render,
|
|
5491
|
+
props: mergeProps(defaultProps, props)
|
|
5492
|
+
});
|
|
5493
|
+
}
|
|
5494
|
+
function InboxItemTitle({ className, render, ...props }) {
|
|
5495
|
+
const density = useContext(InboxItemDensityContext);
|
|
5496
|
+
const { itemTitle } = inboxItem({ density });
|
|
5497
|
+
const defaultProps = {
|
|
5498
|
+
"data-slot": "inbox-item-title",
|
|
5499
|
+
className: itemTitle({ className })
|
|
5500
|
+
};
|
|
5501
|
+
return useRender({
|
|
5502
|
+
defaultTagName: "div",
|
|
5503
|
+
render,
|
|
5504
|
+
props: mergeProps(defaultProps, props)
|
|
5505
|
+
});
|
|
5506
|
+
}
|
|
5507
|
+
function InboxItemTrailing({ className, render, ...props }) {
|
|
5508
|
+
const density = useContext(InboxItemDensityContext);
|
|
5509
|
+
const { itemTrailing } = inboxItem({ density });
|
|
5510
|
+
const defaultProps = {
|
|
5511
|
+
"data-slot": "inbox-item-trailing",
|
|
5512
|
+
className: itemTrailing({ className })
|
|
5513
|
+
};
|
|
5514
|
+
return useRender({
|
|
5515
|
+
defaultTagName: "div",
|
|
5516
|
+
render,
|
|
5517
|
+
props: mergeProps(defaultProps, props)
|
|
5518
|
+
});
|
|
5519
|
+
}
|
|
5520
|
+
function InboxItemTimestamp({ className, render, ...props }) {
|
|
5521
|
+
const density = useContext(InboxItemDensityContext);
|
|
5522
|
+
const { itemTimestamp } = inboxItem({ density });
|
|
5523
|
+
const defaultProps = {
|
|
5524
|
+
"data-slot": "inbox-item-timestamp",
|
|
5525
|
+
className: itemTimestamp({ className })
|
|
5526
|
+
};
|
|
5527
|
+
return useRender({
|
|
5528
|
+
defaultTagName: "span",
|
|
5529
|
+
render,
|
|
5530
|
+
props: mergeProps(defaultProps, props)
|
|
5531
|
+
});
|
|
5532
|
+
}
|
|
5533
|
+
function InboxItemMarks({ className, render, ...props }) {
|
|
5534
|
+
const { itemMarks } = inboxItem();
|
|
5535
|
+
const defaultProps = {
|
|
5536
|
+
"data-slot": "inbox-item-marks",
|
|
5537
|
+
className: itemMarks({ className })
|
|
5538
|
+
};
|
|
5539
|
+
return useRender({
|
|
5540
|
+
defaultTagName: "div",
|
|
5541
|
+
render,
|
|
5542
|
+
props: mergeProps(defaultProps, props)
|
|
5543
|
+
});
|
|
5544
|
+
}
|
|
5545
|
+
function InboxItemHoverTarget({ className, onClick, render, ...props }) {
|
|
5546
|
+
const { itemHoverTarget } = inboxItem();
|
|
5547
|
+
const defaultProps = {
|
|
5548
|
+
"data-slot": "inbox-item-hover-target",
|
|
5549
|
+
className: itemHoverTarget({ className }),
|
|
5550
|
+
onClick: (event) => {
|
|
5551
|
+
onClick?.(event);
|
|
5552
|
+
if (event.defaultPrevented) return;
|
|
5553
|
+
const trigger = event.currentTarget.closest("[data-slot=inbox-item]")?.querySelector("[data-slot=inbox-item-open]");
|
|
5554
|
+
if (!trigger) return;
|
|
5555
|
+
trigger.dispatchEvent(new MouseEvent("click", {
|
|
5556
|
+
bubbles: true,
|
|
5557
|
+
cancelable: true,
|
|
5558
|
+
detail: event.detail,
|
|
5559
|
+
altKey: event.altKey,
|
|
5560
|
+
ctrlKey: event.ctrlKey,
|
|
5561
|
+
metaKey: event.metaKey,
|
|
5562
|
+
shiftKey: event.shiftKey
|
|
5563
|
+
}));
|
|
5564
|
+
}
|
|
5565
|
+
};
|
|
5566
|
+
return useRender({
|
|
5567
|
+
defaultTagName: "span",
|
|
5568
|
+
render,
|
|
5569
|
+
props: mergeProps(defaultProps, props)
|
|
5570
|
+
});
|
|
5571
|
+
}
|
|
5572
|
+
function InboxItemBody({ className, render, ...props }) {
|
|
5573
|
+
const density = useContext(InboxItemDensityContext);
|
|
5574
|
+
const { itemBody } = inboxItem({ density });
|
|
5575
|
+
const defaultProps = {
|
|
5576
|
+
"data-slot": "inbox-item-body",
|
|
5577
|
+
className: itemBody({ className })
|
|
5578
|
+
};
|
|
5579
|
+
return useRender({
|
|
5580
|
+
defaultTagName: "p",
|
|
5581
|
+
render,
|
|
5582
|
+
props: mergeProps(defaultProps, props)
|
|
5583
|
+
});
|
|
5584
|
+
}
|
|
5585
|
+
function InboxItemMessage({ className, render, ...props }) {
|
|
5586
|
+
const density = useContext(InboxItemDensityContext);
|
|
5587
|
+
const { itemMessage } = inboxItem({ density });
|
|
5588
|
+
const defaultProps = {
|
|
5589
|
+
"data-slot": "inbox-item-message",
|
|
5590
|
+
className: itemMessage({ className })
|
|
5591
|
+
};
|
|
5592
|
+
return useRender({
|
|
5593
|
+
defaultTagName: "p",
|
|
5594
|
+
render,
|
|
5595
|
+
props: mergeProps(defaultProps, props)
|
|
5596
|
+
});
|
|
5597
|
+
}
|
|
5598
|
+
function InboxItemSender({ className, render, ...props }) {
|
|
5599
|
+
const { itemSender } = inboxItem();
|
|
5600
|
+
const defaultProps = {
|
|
5601
|
+
"data-slot": "inbox-item-sender",
|
|
5602
|
+
className: itemSender({ className })
|
|
5603
|
+
};
|
|
5604
|
+
return useRender({
|
|
5605
|
+
defaultTagName: "span",
|
|
5606
|
+
render,
|
|
5607
|
+
props: mergeProps(defaultProps, props)
|
|
5608
|
+
});
|
|
5609
|
+
}
|
|
5610
|
+
function InboxItemMetadata({ className, render, ...props }) {
|
|
5611
|
+
const { itemMetadata } = inboxItem();
|
|
5612
|
+
const defaultProps = {
|
|
5613
|
+
"data-slot": "inbox-item-metadata",
|
|
5614
|
+
className: itemMetadata({ className })
|
|
5615
|
+
};
|
|
5616
|
+
return useRender({
|
|
5617
|
+
defaultTagName: "div",
|
|
5618
|
+
render,
|
|
5619
|
+
props: mergeProps(defaultProps, props)
|
|
5620
|
+
});
|
|
5621
|
+
}
|
|
5622
|
+
function InboxItemActions({ className, render, reveal, ...props }) {
|
|
5623
|
+
const density = useContext(InboxItemDensityContext);
|
|
5624
|
+
const { itemActions } = inboxItem({
|
|
5625
|
+
density,
|
|
5626
|
+
reveal
|
|
5627
|
+
});
|
|
5628
|
+
const defaultProps = {
|
|
5629
|
+
"data-reveal": reveal,
|
|
5630
|
+
"data-slot": "inbox-item-actions",
|
|
5631
|
+
className: itemActions({ className })
|
|
5632
|
+
};
|
|
5633
|
+
return useRender({
|
|
5634
|
+
defaultTagName: "div",
|
|
5635
|
+
render,
|
|
5636
|
+
props: mergeProps(defaultProps, props)
|
|
5637
|
+
});
|
|
5638
|
+
}
|
|
5639
|
+
//#endregion
|
|
5640
|
+
export { MessageMultiSelect as $, PopoverTitle as $n, ListRowTitle as $r, MessageItemAvatarSlot as $t, MessageQuotedPreview as A, DialogSheetReset as Ai, MobileNavServerItem as An, PanelBody as Ar, MessageItemReadReceipt as At, MessageQuotedPreviewLoading as B, ThemeStateContext as Bi, MobileNavServerPopoverRowLabel as Bn, ScrollAreaThumb as Br, MessageItemMeta as Bt, MessageListJumpPillDismiss as C, DialogSurface as Ci, PreviewCardHeader as Cn, DropdownMenuShortcut as Cr, MessageReactionTooltipMeta as Ct, MessageListHistoryLimited as D, panelToggleAction as Di, PreviewCardSeparator as Dn, Kbd as Dr, MessageReactionTooltipSeparator as Dt, MessageListEndFade as E, PanelAction as Ei, PreviewCardPortal as En, DropdownMenuTrigger as Er, MessageReactionTooltipNames as Et, MessageQuotedPreviewAuthorMeta as F, OverlayLayerProvider as Fi, MobileNavServerPopoverGroup as Fn, PanelSection as Fr, MessageItemDelegatedBy as Ft, MessageEmbed as G, headEdgePull as Gi, PopoverBody as Gn, ListRow as Gr, MessageItemTime as Gt, MessageQuotedPreviewThread as H, stackedActions as Hi, PopoverActions as Hn, Checkbox$1 as Hr, MessageItemSenderBadges as Ht, MessageQuotedPreviewAuthorName as I, useParentOverlayKind as Ii, MobileNavServerPopoverList as In, ScrollArea$1 as Ir, MessageItemDelegatedByButton as It, MessageEmbedHeader as J, PopoverDescription as Jn, ListRowChevron as Jr, MessageItemContent as Jt, MessageEmbedContent as K, headEdges as Ki, PopoverClose as Kn, ListRowBody as Kr, MessageItemAttachments as Kt, MessageQuotedPreviewChannel as L, withOverlayLayer as Li, MobileNavServerPopoverRow as Ln, ScrollAreaContent as Lr, MessageItemDelegatedByName as Lt, MessageQuotedPreviewAttachments as M, buttonVariants as Mi, MobileNavServerPopoverContent as Mn, PanelHeaderRoot as Mr, MessageItemToolbar as Mt, MessageQuotedPreviewAuthor as N, Spinner as Ni, MobileNavServerPopoverDestination as Nn, PanelScrollContent as Nr, MessageItemToolbarButton as Nt, MessageListNotice as O, TextLink as Oi, PreviewCardTitle as On, KbdGroup as Or, MessageItemBadge as Ot, MessageQuotedPreviewAuthorDelegatedBy as P, defaultNativeButton as Pi, MobileNavServerPopoverDestinations as Pn, PanelScrollViewport as Pr, MessageItemDelegatedAvatar as Pt, MessageTextSelectionToolbarSeparator as Q, PopoverSeparator as Qn, ListRowMeta as Qr, MessageItemSearchMatch as Qt, MessageQuotedPreviewContent as R, useThemeScopeProps as Ri, MobileNavServerPopoverRowBody as Rn, ScrollAreaCorner as Rr, MessageItemHeader as Rt, MessageListJumpPill as S, DialogSheetBack as Si, PreviewCardFooter as Sn, DropdownMenuSeparator as Sr, MessageReactionTooltipContent as St, MessageListDateDivider as T, DialogTrigger as Ti, PreviewCardPopup as Tn, DropdownMenuSubmenuTrigger as Tr, MessageReactionTooltipNameText as Tt, MessageQuotedPreviewTimestamp as U, useStackedActions as Ui, PopoverArrow as Un, CheckboxIndicator as Ur, MessageItemSenderButton as Ut, MessageQuotedPreviewText as V, tv$1 as Vi, Popover$1 as Vn, ScrollAreaViewport as Vr, MessageItemSender as Vt, MessageQuotedPreviewUnavailable as W, controlIconInset as Wi, PopoverBackdrop as Wn, PRESENCE_COLOR as Wr, MessageItemSenderGroup as Wt, MessageTextSelectionToolbar as X, PopoverPopup as Xn, ListRowGroup as Xr, MessageItemEmbedded as Xt, messageEmbed as Y, PopoverHeader as Yn, ListRowDescription as Yr, MessageItemEdited as Yt, MessageTextSelectionToolbarButton as Z, PopoverPortal as Zn, ListRowIcon as Zr, MessageItemFooter as Zt, InboxItemTrailing as _, DialogFooterNote as _i, PreviewCardArrow as _n, DropdownMenuPopup as _r, MessageReactionGlyph as _t, InboxItemContext as a, TooltipProvider as ai, AvatarBadge as an, MobileNavLabel as ar, MessageReferenceIndicator as at, Skeleton as b, DialogOverlay as bi, PreviewCardDescription as bn, DropdownMenuRadioItem as br, MessageReactionQuickButton as bt, InboxItemLeading as c, DialogCommit as ci, AvatarGroupCount as cn, DropdownMenuCheckboxItem as cr, MessageReferenceReadMark as ct, InboxItemMetadata as d, Dialog$1 as di, measureContent as dn, DropdownMenuFooter as dr, MessageReferenceUnavailable as dt, ListRowTop as ei, MessageItemContinuationTime as en, PopoverTrigger as er, MessageMultiSelectCheckbox as et, InboxItemSelection as f, DialogBody as fi, measureElement as fn, DropdownMenuItem as fr, inlineChip as ft, InboxItemTitle as g, DialogFooter as gi, PreviewCardActions as gn, DropdownMenuLinkItem as gr, MessageReactionErrorIndicator as gt, InboxItemTimestamp as h, DialogDescription as hi, PreviewCard$1 as hn, DropdownMenuLabel as hr, MessageReactionCount as ht, InboxItemContent as i, TooltipPortal as ii, Avatar$1 as in, MobileNavItem as ir, MessageReferenceIcon as it, MessageQuotedPreviewAttachment as j, Button$1 as ji, MobileNavServerPopover as jn, PanelFooter as jr, MessageItemSavedIndicator as jt, MessageList as k, textLinkVariants as ki, PreviewCardTrigger as kn, Panel as kr, MessageItemBadgeSeparator as kt, InboxItemMarks as l, DialogSheetContent as li, AvatarImage as ln, DropdownMenuCheckboxItemIndicator as lr, MessageReferenceSuffix as lt, InboxItemSubtitle as m, DialogContent as mi, readNow as mn, DropdownMenuItemLabel as mr, MessageReactionChip as mt, InboxItemActions as n, Tooltip$1 as ni, MessageItem as nn, useHoldThenMoveTouchSensor as nr, MessageMultiSelectToolbarActions as nt, InboxItemHeading as o, TooltipTrigger as oi, AvatarFallback as on, MobileNavRoot as or, MessageReferenceLabel as ot, InboxItemSender as p, DialogClose as pi, observeTruncation as pn, DropdownMenuItemCount as pr, MessageReactionAddButton as pt, MessageEmbedFooter as q, decisionWidth as qi, PopoverContent as qn, ListRowBottom as qr, MessageItemBody as qt, InboxItemBody as r, TooltipContent as ri, searchHit as rn, useMouseOnlyPointerSensor as rr, MessageReferenceChip as rt, InboxItemHoverTarget as s, Badge as si, AvatarGroup as sn, DropdownMenu as sr, MessageReferencePending as st, InboxItem as t, ListRowValue as ti, MessageItemGutter as tn, PopoverViewport as tr, MessageMultiSelectToolbar as tt, InboxItemMessage as u, useMobileViewport as ui, useOverflowTitle as un, DropdownMenuContent as ur, MessageReferenceText as ut, InboxItemTrigger as v, DialogHeader as vi, PreviewCardBody as vn, DropdownMenuPortal as vr, MessageReactionPickerContent as vt, MessageListJumpPillGroup as w, DialogTitle as wi, PreviewCardMeta as wn, DropdownMenuSubmenu as wr, MessageReactionTooltipName as wt, MessageListJumpControls as x, DialogPortal as xi, PreviewCardEyebrow as xn, DropdownMenuRadioItemIndicator as xr, MessageReactionQuickRow as xt, inboxItem as y, DialogNav as yi, PreviewCardContent as yn, DropdownMenuRadioGroup as yr, MessageReactionPickerStatic as yt, MessageQuotedPreviewHeader as z, useTheme as zi, MobileNavServerPopoverRowDescription as zn, ScrollAreaScrollbar as zr, MessageItemInlineStatus as zt };
|