raft-ui
Version:
React UI components for Raft.
1,070 lines (1,069 loc) • 41.6 kB
JavaScript
import { N as SidebarItemRoot, Q as Button, R as SidebarBody, W as SidebarRoot, _ as Panel, a as PanelHeaderIcon, b as PanelHeaderRoot, f as ConversationPanelContent, ot as tv, rt as useThemeFamily, z as SidebarContent } from "./panel-header-Dzc23jwl.mjs";
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { jsx } from "react/jsx-runtime";
//#region src/components/activity-inbox/activity-inbox.recipe.ts
const activityInbox = tv({
slots: {
list: ["flex flex-col gap-2"],
item: [
"relative flex w-full items-start gap-3 p-3 text-left",
"has-[[data-slot=activity-inbox-item-trailing]]:[&_[data-slot=activity-inbox-item-heading]]:pr-36",
"has-[[data-slot=activity-inbox-item-trailing]]:[&_[data-slot=activity-inbox-item-subtitle]]:pr-36",
"transition-colors"
],
itemOpen: ["absolute inset-0 z-0 outline-none"],
itemSelection: ["relative z-10 mt-0.5 flex size-4 shrink-0 items-center justify-center"],
itemContent: ["pointer-events-none relative z-10 min-w-0 flex-1 text-left"],
itemSubtitle: ["mb-0.5 min-w-0 py-0.5 text-[11px] leading-3"],
itemHeading: ["mb-0.5 flex min-w-0 items-start gap-2"],
itemTitle: ["relative line-clamp-2 min-w-0 flex-1 pl-[18px] text-sm leading-5", "[&>svg]:absolute [&>svg]:top-[3px] [&>svg]:left-0 [&>svg]:size-3.5"],
itemTrailing: ["pointer-events-none absolute top-1.5 right-3 z-10", "flex shrink-0 items-center gap-3"],
itemTimestamp: ["shrink-0 whitespace-nowrap text-right text-xs leading-5 tabular-nums"],
itemBody: ["line-clamp-2 text-xs leading-4"],
itemSender: [],
itemMetadata: ["mt-1 flex min-h-5 flex-wrap items-center gap-1.5"],
itemActions: ["pointer-events-auto flex shrink-0 items-center gap-1.5"]
},
variants: { theme: {
brutal: {
item: [
"border-2 border-black/30 bg-white",
"hover:border-black hover:shadow-raft-sm",
"active:border-black active:shadow-raft-sm",
"data-disabled:pointer-events-none data-disabled:hover:border-black/30 data-disabled:hover:shadow-none",
"data-[active=true]:border-black data-[active=true]:shadow-raft-sm",
"data-[active=true]:hover:border-black data-[active=true]:hover:shadow-raft-sm",
"has-[[data-slot=activity-inbox-item-open]:focus-visible]:border-black has-[[data-slot=activity-inbox-item-open]:focus-visible]:shadow-raft-sm"
],
itemSubtitle: ["font-bold text-black/45"],
itemTitle: [
"font-semibold text-black/55",
"group-data-[unread=true]/activity-item:font-bold",
"group-data-[unread=true]/activity-item:text-black",
"[&>svg]:text-black/45"
],
itemTimestamp: ["font-mono text-black/40"],
itemTrailing: ["top-2"],
itemBody: ["text-black/55", "group-data-[unread=true]/activity-item:text-black"],
itemSender: ["font-bold text-black/70"],
itemActions: [
"[&>[data-slot=panel-toggle-action][data-pressed]]:bg-white",
"[&>[data-slot=panel-toggle-action][data-pressed]]:text-brutal-orange",
"[&>[data-slot=panel-toggle-action][data-pressed]:hover]:bg-white",
"[&>[data-slot=panel-toggle-action][data-pressed]:hover]:text-brutal-orange"
]
},
elegant: {
list: ["gap-2.5 rounded-[10px] bg-[color-mix(in_oklch,var(--ink-4),var(--layer-panel))] p-3 shadow-raft-xs", "dark:bg-layer-card"],
item: [
"p-3",
"rounded-lg border-[0.5px] border-line-muted bg-layer-panel shadow-raft-xs",
"transition-[background-color,border-color] duration-150",
"hover:bg-[color-mix(in_oklch,var(--ink)_1%,var(--layer-panel))]",
"dark:border-transparent",
"data-disabled:pointer-events-none",
"data-[active=true]:border-transparent data-[active=true]:ring-2 data-[active=true]:ring-primary-400 data-[active=true]:ring-offset-2 data-[active=true]:ring-offset-layer-canvas-muted",
"has-[[data-slot=activity-inbox-item-open]:focus-visible]:ring-1 has-[[data-slot=activity-inbox-item-open]:focus-visible]:ring-primary-400",
"dark:has-[[data-slot=activity-inbox-item-open]:focus-visible]:ring-2 dark:has-[[data-slot=activity-inbox-item-open]:focus-visible]:ring-primary-400/60"
],
itemSubtitle: ["mb-1", "font-medium text-foreground-placeholder"],
itemHeading: ["mb-1"],
itemTitle: [
"font-normal tracking-[-0.01em] text-foreground",
"group-data-[unread=true]/activity-item:font-medium",
"group-data-[unread=true]/activity-item:text-foreground-strong",
"[&>svg]:text-foreground-icon"
],
itemTimestamp: ["tabular-nums text-foreground-placeholder"],
itemBody: [
"text-[13px] leading-4.5",
"tracking-[-0.01em] text-foreground-muted",
"group-data-[unread=true]/activity-item:text-foreground"
],
itemMetadata: ["mt-2"],
itemSender: ["font-medium text-foreground"],
itemActions: [
"[&>[data-slot=panel-toggle-action][data-pressed]]:bg-transparent",
"[&>[data-slot=panel-toggle-action][data-pressed]]:text-primary-400",
"[&>[data-slot=panel-toggle-action][data-pressed]:hover]:bg-fill-strong/80",
"[&>[data-slot=panel-toggle-action][data-pressed]:hover]:text-primary-400",
"dark:[&>[data-slot=panel-toggle-action][data-pressed]]:bg-fill-muted",
"dark:[&>[data-slot=panel-toggle-action][data-pressed]:hover]:bg-fill-strong"
]
}
} }
});
//#endregion
//#region src/components/activity-inbox/activity-inbox.tsx
function ActivityInboxList({ className, render, ...props }) {
const { list } = activityInbox({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "activity-inbox-list",
className: list({ className })
}, props)
});
}
function ActivityInboxItem({ active = false, className, disabled = false, render, ...props }) {
const { item } = activityInbox({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"aria-disabled": disabled || void 0,
"data-active": active ? "true" : void 0,
"data-disabled": disabled ? "true" : void 0,
"data-slot": "activity-inbox-item",
className: item({ className: `group/activity-item ${className ?? ""}`.trim() })
}, props)
});
}
function ActivityInboxItemOpen({ className, render, ...props }) {
const { itemOpen } = activityInbox({ theme: useThemeFamily() });
return useRender({
defaultTagName: "button",
render,
props: mergeProps({
"data-slot": "activity-inbox-item-open",
className: itemOpen({ className }),
type: "button"
}, props)
});
}
function ActivityInboxItemSelection({ className, render, ...props }) {
const { itemSelection } = activityInbox({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "activity-inbox-item-selection",
className: itemSelection({ className })
}, props)
});
}
function ActivityInboxItemContent({ className, render, ...props }) {
const { itemContent } = activityInbox({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "activity-inbox-item-content",
className: itemContent({ className })
}, props)
});
}
function ActivityInboxItemSubtitle({ className, render, ...props }) {
const { itemSubtitle } = activityInbox({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "activity-inbox-item-subtitle",
className: itemSubtitle({ className })
}, props)
});
}
function ActivityInboxItemHeading({ className, render, ...props }) {
const { itemHeading } = activityInbox({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "activity-inbox-item-heading",
className: itemHeading({ className })
}, props)
});
}
function ActivityInboxItemTitle({ className, render, ...props }) {
const { itemTitle } = activityInbox({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "activity-inbox-item-title",
className: itemTitle({ className })
}, props)
});
}
function ActivityInboxItemTrailing({ className, render, ...props }) {
const { itemTrailing } = activityInbox({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "activity-inbox-item-trailing",
className: itemTrailing({ className })
}, props)
});
}
function ActivityInboxItemTimestamp({ className, render, ...props }) {
const { itemTimestamp } = activityInbox({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "activity-inbox-item-timestamp",
className: itemTimestamp({ className })
}, props)
});
}
function ActivityInboxItemBody({ className, render, ...props }) {
const { itemBody } = activityInbox({ theme: useThemeFamily() });
return useRender({
defaultTagName: "p",
render,
props: mergeProps({
"data-slot": "activity-inbox-item-body",
className: itemBody({ className })
}, props)
});
}
function ActivityInboxItemSender({ className, render, ...props }) {
const { itemSender } = activityInbox({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "activity-inbox-item-sender",
className: itemSender({ className })
}, props)
});
}
function ActivityInboxItemMetadata({ className, render, ...props }) {
const { itemMetadata } = activityInbox({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "activity-inbox-item-metadata",
className: itemMetadata({ className })
}, props)
});
}
function ActivityInboxItemActions({ className, render, ...props }) {
const { itemActions } = activityInbox({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "activity-inbox-item-actions",
className: itemActions({ className })
}, props)
});
}
//#endregion
//#region src/components/activity-inbox/activity-inbox-shell.recipe.ts
const activityInboxShell = tv({
slots: {
panel: ["flex h-full min-h-0 flex-1 flex-col overflow-hidden"],
headerIconChip: ["hidden size-9 shrink-0 items-center justify-center md:flex"],
viewport: ["safe-bottom relative flex-1 overflow-y-auto p-3"],
loadingMore: ["py-3 text-center text-xs"]
},
variants: { theme: {
brutal: {
panel: ["bg-white text-black"],
headerIconChip: ["border-2 border-black bg-primary-400 text-black"],
viewport: ["bg-white"],
loadingMore: ["font-bold text-black/40"]
},
elegant: {
panel: ["bg-layer-canvas-muted text-foreground"],
headerIconChip: ["rounded-md bg-fill-muted text-foreground-icon", "dark:bg-layer-card"],
viewport: ["bg-layer-panel pt-1.5 dark:bg-transparent", "px-7 max-md:pl-5 max-md:pr-3.5"],
loadingMore: ["font-medium text-foreground-placeholder"]
}
} }
});
//#endregion
//#region src/components/activity-inbox/activity-inbox-shell.tsx
function ActivityInboxPanel({ className, ...props }) {
const { panel } = activityInboxShell({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx(Panel, {
render: /* @__PURE__ */ jsx("div", {}),
edge: "inset",
"data-slot": "activity-inbox-root",
className: panel({ className }),
...props
});
}
function ActivityInboxHeaderIcon({ className, ...props }) {
const { headerIconChip } = activityInboxShell({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx(PanelHeaderIcon, {
className: headerIconChip({ className }),
...props
});
}
function ActivityInboxViewport({ className, ...props }) {
const { viewport } = activityInboxShell({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx("div", {
"data-slot": "activity-inbox-viewport",
className: viewport({ className }),
...props
});
}
function ActivityInboxLoadingMore({ className, ...props }) {
const { loadingMore } = activityInboxShell({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx("div", {
"data-slot": "activity-inbox-loading-more",
className: loadingMore({ className }),
...props
});
}
//#endregion
//#region src/components/activity-inbox/activity-inbox-sidebar.recipe.ts
const activityInboxSidebar = tv({
slots: {
sidebar: [
"w-48 shrink-0",
"max-md:hidden",
"md:flex"
],
sidebarBody: [],
sidebarContent: ["p-3"],
sidebarHeading: ["mb-1 mt-5 flex items-center gap-2 px-2"],
sidebarHeadingLabel: ["flex-1 text-[10px] uppercase"],
navigationItem: [
"flex w-full items-center gap-2 border-2 px-2.5 py-2 text-left",
"transition-colors disabled:pointer-events-none disabled:opacity-50",
"[&_svg]:shrink-0"
],
navigationLabel: ["min-w-0 flex-1 truncate"],
navigationCount: ["shrink-0"]
},
variants: { theme: {
brutal: {
sidebar: ["border-r-2 border-black"],
sidebarBody: ["bg-white"],
sidebarHeadingLabel: ["font-black tracking-widest text-black/40"],
navigationItem: [
"border-transparent text-xs font-bold text-black",
"hover:border-black/30 hover:bg-black/5",
"data-active:border-black data-active:bg-primary-400 data-active:shadow-raft-sm"
],
navigationCount: ["font-mono text-black/45"]
},
elegant: {
sidebar: ["w-56", "dark:bg-layer-canvas-muted"],
sidebarHeadingLabel: ["font-medium tracking-wider text-foreground-placeholder"],
navigationItem: [
"rounded-md border-transparent text-[13px] font-medium text-foreground-muted",
"hover:border-transparent hover:bg-fill-strong/80 hover:text-foreground-strong",
"dark:hover:bg-ink-6",
"data-active:border-transparent data-active:bg-layer-panel data-active:text-foreground",
"data-[active]:shadow-sm data-active:ring-1 data-active:ring-line-muted/45",
"dark:data-active:bg-layer-card dark:data-active:ring-transparent",
"outline-none focus-visible:ring-1 focus-visible:ring-primary-400 dark:focus-visible:ring-2 dark:focus-visible:ring-primary-400/60"
],
navigationCount: ["text-xs tabular-nums text-foreground-icon"]
}
} }
});
//#endregion
//#region src/components/activity-inbox/activity-inbox-sidebar.tsx
function ActivityInboxSidebar({ className, children, ...props }) {
const { sidebar, sidebarBody, sidebarContent } = activityInboxSidebar({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx(SidebarRoot, {
render: /* @__PURE__ */ jsx("aside", {}),
"data-slot": "activity-inbox-sidebar",
className: sidebar({ className }),
...props,
children: /* @__PURE__ */ jsx(SidebarBody, {
className: sidebarBody(),
children: /* @__PURE__ */ jsx(SidebarContent, {
className: sidebarContent(),
children
})
})
});
}
function ActivityInboxSidebarHeading({ className, ...props }) {
const { sidebarHeading } = activityInboxSidebar({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx("div", {
"data-slot": "activity-inbox-sidebar-heading",
className: sidebarHeading({ className }),
...props
});
}
function ActivityInboxSidebarHeadingLabel({ className, ...props }) {
const { sidebarHeadingLabel } = activityInboxSidebar({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx("span", {
"data-slot": "activity-inbox-sidebar-heading-label",
className: sidebarHeadingLabel({ className }),
...props
});
}
function ActivityInboxNavigationItem({ active, className, ...props }) {
const { navigationItem } = activityInboxSidebar({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx(SidebarItemRoot, {
active,
"data-slot": "activity-inbox-navigation-item",
className: navigationItem({ className }),
...props
});
}
function ActivityInboxNavigationLabel({ className, ...props }) {
const { navigationLabel } = activityInboxSidebar({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx("span", {
"data-slot": "activity-inbox-navigation-label",
className: navigationLabel({ className }),
...props
});
}
function ActivityInboxNavigationCount({ className, ...props }) {
const { navigationCount } = activityInboxSidebar({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx("span", {
"data-slot": "activity-inbox-navigation-count",
className: navigationCount({ className }),
...props
});
}
//#endregion
//#region src/components/activity-inbox/activity-inbox-toolbar.recipe.ts
const activityInboxToolbar = tv({
slots: {
controls: ["flex shrink-0 flex-nowrap items-center gap-2 px-3 py-2.5"],
selectionToolbar: [
"flex min-h-11 shrink-0 items-center gap-2 px-3",
"max-md:flex-wrap max-md:py-2",
"md:h-11 md:flex-nowrap md:py-0"
],
selectionCount: ["mr-1 text-xs"],
toolbarAction: []
},
variants: {
theme: {
brutal: {
controls: ["border-b-2 border-black bg-white"],
selectionToolbar: ["border-b-2 border-black bg-black/3"],
selectionCount: ["font-black text-black"]
},
elegant: {
controls: [
"border-b border-line-hairline bg-layer-panel",
"dark:border-line-hairline dark:bg-transparent",
"px-7 max-md:pl-5 max-md:pr-3.5"
],
selectionToolbar: ["px-7 max-md:pl-5 max-md:pr-3.5"],
selectionCount: ["font-medium text-foreground-strong"]
}
},
toolbarActionVariant: {
secondary: { toolbarAction: [] },
primary: { toolbarAction: [] },
link: { toolbarAction: [] },
ghost: { toolbarAction: [] }
}
},
compoundVariants: [
{
theme: "brutal",
toolbarActionVariant: "primary",
class: { toolbarAction: ["bg-brutal-cyan text-foreground-strong", "hover:bg-brutal-cyan"] }
},
{
theme: "brutal",
toolbarActionVariant: "link",
class: { toolbarAction: ["text-xs underline font-bold decoration-2 text-black"] }
},
{
theme: "brutal",
toolbarActionVariant: "ghost",
class: { toolbarAction: ["font-mono font-bold text-black/60", "hover:border-transparent hover:bg-transparent hover:text-black"] }
},
{
theme: "elegant",
toolbarActionVariant: "link",
class: { toolbarAction: ["text-xs underline font-medium text-foreground-muted", "hover:text-foreground-strong"] }
},
{
theme: "elegant",
toolbarActionVariant: "ghost",
class: { toolbarAction: ["font-medium hover:bg-transparent hover:text-foreground-strong"] }
}
]
});
//#endregion
//#region src/components/activity-inbox/activity-inbox-toolbar.tsx
function ActivityInboxControls({ className, ...props }) {
const { controls } = activityInboxToolbar({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx("div", {
"data-slot": "activity-inbox-controls",
className: controls({ className }),
...props
});
}
function ActivityInboxSelectionToolbar({ className, ...props }) {
const { selectionToolbar } = activityInboxToolbar({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx("div", {
"data-slot": "activity-inbox-selection-toolbar",
className: selectionToolbar({ className }),
...props
});
}
function ActivityInboxSelectionCount({ className, ...props }) {
const { selectionCount } = activityInboxToolbar({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx("span", {
"data-slot": "activity-inbox-selection-count",
className: selectionCount({ className }),
...props
});
}
/**
* Bulk-selection toolbar action built on the shared Button. `secondary` maps to
* Button's outline treatment, `primary` to the high-emphasis fill, `link` to a
* text action, and `ghost` to the sort-style text trigger.
*/
function ActivityInboxToolbarAction({ className, variant = "secondary", ...props }) {
const { toolbarAction } = activityInboxToolbar({
theme: useThemeFamily(),
toolbarActionVariant: variant
});
return /* @__PURE__ */ jsx(Button, {
type: "button",
size: "xs",
variant: variant === "primary" ? "default" : variant === "link" ? "link" : variant === "ghost" ? "ghost" : "outline",
className: toolbarAction({ className }),
...props
});
}
//#endregion
//#region src/components/search/search.recipe.ts
const search = tv({
slots: {
frame: "flex h-full min-h-0 flex-1 flex-col",
header: "flex items-center gap-3",
content: "relative flex min-h-0 min-w-0 flex-1 flex-col",
headerIconChip: "flex size-9 shrink-0 items-center justify-center",
filtersRow: "shrink-0 px-4 py-3",
viewport: ["min-h-0 flex-1 overflow-y-auto p-4"],
summary: ["mb-3 block px-1 text-xs"],
section: ["mb-3"],
sectionHeading: ["px-1 py-2"],
list: ["flex flex-col gap-2"]
},
variants: { theme: {
brutal: {
frame: "bg-white",
header: ["h-[62px] px-5 border-b-2 border-black bg-white", "[@media(max-height:600px)]:h-[62px]!"],
headerIconChip: "border-2 border-black bg-soft-signal",
filtersRow: "border-b-2 border-black bg-white",
viewport: "bg-white",
summary: ["font-bold uppercase tracking-widest text-black/60"],
sectionHeading: ["font-mono text-[10px] font-bold uppercase tracking-[0.2em] text-black/50"]
},
elegant: {
frame: "bg-layer-canvas-muted dark:bg-layer-canvas-muted",
header: [
"min-h-(--shell-header-height,56px)",
"max-md:h-[var(--shell-header-height,56px)] max-md:bg-layer-canvas-muted dark:bg-layer-canvas-muted",
"max-md:pl-5 max-md:pr-3.5 md:pl-9 md:pr-5"
],
headerIconChip: "rounded-md bg-fill-muted text-foreground-icon",
filtersRow: [
"border-b border-line-muted bg-layer-panel",
"px-7 max-md:pl-5 max-md:pr-3.5",
"dark:bg-transparent"
],
viewport: ["bg-layer-panel dark:bg-transparent", "px-7 max-md:pl-5 max-md:pr-3.5"],
summary: ["font-medium", "text-foreground-muted"],
section: ["rounded-[10px] bg-[color-mix(in_oklch,var(--ink-4),var(--layer-panel))] p-3 shadow-raft-xs", "dark:bg-layer-card"],
sectionHeading: ["px-0 pt-0 pb-2.5 text-xs font-medium", "text-foreground-muted"],
list: ["gap-2.5"]
}
} }
});
//#endregion
//#region src/components/search/search.tsx
function SearchShellRoot({ className, edge = "inset", render, ...props }) {
const { frame } = search({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx(Panel, {
...props,
render: render ?? /* @__PURE__ */ jsx("div", {}),
edge,
className: frame({ className })
});
}
function SearchShellHeader({ className, ...props }) {
const { header } = search({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx(PanelHeaderRoot, {
"data-panel-frame-header": "",
"data-slot": "search-shell-header",
className: header({ className }),
...props
});
}
function SearchShellContent({ className, render, ...props }) {
const { content } = search({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx(ConversationPanelContent, {
...props,
render: render ?? /* @__PURE__ */ jsx("section", {}),
"data-slot": "search-shell-content",
className: content({ className })
});
}
function SearchShellFilters({ className, ...props }) {
const { filtersRow } = search({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx("div", {
"data-slot": "search-shell-filters",
className: filtersRow({ className }),
...props
});
}
function SearchShellViewport({ className, ...props }) {
const { viewport } = search({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx("div", {
"data-slot": "search-shell-viewport",
className: viewport({ className }),
...props
});
}
function SearchShellHeaderIcon({ className, ...props }) {
const { headerIconChip } = search({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx("div", {
"data-slot": "search-shell-header-icon",
className: headerIconChip({ className }),
...props
});
}
function SearchResultsSummary({ className, render, ...props }) {
const { summary } = search({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "search-results-summary",
className: summary({ className })
}, props)
});
}
function SearchResultsSection({ className, render, ...props }) {
const { section } = search({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "search-results-section",
className: section({ className })
}, props)
});
}
function SearchResultsSectionHeading({ className, render, ...props }) {
const { sectionHeading } = search({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "search-results-section-heading",
className: sectionHeading({ className })
}, props)
});
}
function SearchResultsList({ className, render, ...props }) {
const { list } = search({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "search-results-list",
className: list({ className })
}, props)
});
}
//#endregion
//#region src/components/search/search-entity.recipe.ts
const searchEntity = tv({
slots: {
entity: ["flex min-w-0 w-full items-center p-3 text-left transition-colors"],
entityLeading: ["relative flex shrink-0"],
entityIcon: ["flex size-8 items-center justify-center overflow-hidden"],
entityActivity: ["absolute -right-0.5 -bottom-0.5 inline-block size-2.5 shrink-0 rounded-full"],
entityTitle: ["truncate text-sm"],
entityDescription: ["block truncate text-xs"]
},
variants: { theme: {
brutal: {
entity: [
"border-2 border-black/30 bg-white",
"hover:border-black hover:shadow-raft-sm active:border-black active:shadow-raft-sm",
"data-[selected=true]:border-black data-[selected=true]:shadow-raft-sm",
"focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-black"
],
entityIcon: ["border-2 border-black bg-white text-black"],
entityActivity: ["border border-black bg-brutal-lime"],
entityTitle: ["font-bold text-black data-muted:text-black/45"],
entityDescription: ["text-black/50 data-muted:text-black/30"]
},
elegant: {
entity: [
"rounded-lg border-[0.5px] border-line-muted bg-layer-panel shadow-raft-xs",
"transition-[background-color,border-color] duration-150",
"hover:bg-[color-mix(in_oklch,var(--ink)_1%,var(--layer-panel))]",
"data-[selected=true]:border-transparent data-[selected=true]:ring-2 data-[selected=true]:ring-primary-400 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-layer-canvas-muted",
"outline-none focus-visible:ring-1 focus-visible:ring-primary-400",
"dark:border-transparent",
"dark:focus-visible:ring-2 dark:focus-visible:ring-primary-400/60 dark:focus-visible:ring-offset-0"
],
entityIcon: ["rounded-md bg-fill-muted text-foreground-icon"],
entityActivity: ["border border-layer-panel bg-brutal-lime dark:bg-success"],
entityTitle: ["font-medium text-foreground-strong data-muted:text-foreground-disabled"],
entityDescription: ["text-foreground-muted/70 data-muted:text-foreground-disabled"]
}
} }
});
//#endregion
//#region src/components/search/search-entity.tsx
function SearchEntityResult({ selected = false, className, render, ...props }) {
const { entity } = searchEntity({ theme: useThemeFamily() });
return useRender({
defaultTagName: "button",
render,
props: mergeProps({
"data-slot": "search-entity-result",
"data-selected": selected ? "true" : void 0,
className: entity({ className }),
type: "button"
}, props)
});
}
function SearchEntityResultLeading({ className, render, ...props }) {
const { entityLeading } = searchEntity({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "search-entity-result-leading",
className: entityLeading({ className })
}, props)
});
}
function SearchEntityResultIcon({ className, render, ...props }) {
const { entityIcon } = searchEntity({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "search-entity-result-icon",
className: entityIcon({ className })
}, props)
});
}
function SearchEntityResultActivity({ className, render, ...props }) {
const { entityActivity } = searchEntity({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "search-entity-result-activity",
className: entityActivity({ className })
}, props)
});
}
function SearchEntityResultTitle({ muted = false, className, render, ...props }) {
const { entityTitle } = searchEntity({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "search-entity-result-title",
"data-muted": muted ? "" : void 0,
className: entityTitle({ className })
}, props)
});
}
function SearchEntityResultDescription({ muted = false, className, render, ...props }) {
const { entityDescription } = searchEntity({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "search-entity-result-description",
"data-muted": muted ? "" : void 0,
className: entityDescription({ className })
}, props)
});
}
//#endregion
//#region src/components/search/search-message.recipe.ts
const searchMessage = tv({
slots: {
message: ["w-full text-left transition-colors"],
messageHeader: ["flex flex-wrap items-center gap-2 text-xs"],
messageBody: ["min-w-0 line-clamp-2 text-sm"],
messageMeta: [],
messageThreadMeta: ["inline-flex items-center gap-1"],
messageSender: ["inline-flex items-center gap-1"],
messageTimestamp: [],
messageMatch: ["px-0.5"]
},
variants: { theme: {
brutal: {
message: [
"border-2 border-black/30 bg-white p-3",
"hover:border-black hover:shadow-raft-sm active:border-black active:shadow-raft-sm",
"data-[selected=true]:border-black data-[selected=true]:shadow-raft-sm",
"data-[nested=true]:border-x-0 data-[nested=true]:border-b-0 data-[nested=true]:border-t-2 data-[nested=true]:px-3 data-[nested=true]:py-3",
"data-[nested=true]:border-black/10 data-[nested=true]:hover:border-black/10 data-[nested=true]:hover:bg-black/3 data-[nested=true]:hover:shadow-none",
"data-[nested=true][data-selected=true]:border-black data-[nested=true][data-selected=true]:bg-[oklch(0.96299649_0.06890535_97.696701)] data-[nested=true][data-selected=true]:shadow-none data-[nested=true][data-selected=true]:ring-0",
"focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-black"
],
messageHeader: ["mb-1"],
messageMeta: ["font-bold text-black/50"],
messageThreadMeta: ["font-bold text-black/40"],
messageSender: ["font-bold text-black"],
messageTimestamp: ["font-mono text-black/40"],
messageMatch: ["bg-primary-400 font-bold text-black"],
messageBody: ["leading-relaxed text-black/70"]
},
elegant: {
message: [
"group/search-message rounded-lg border-[0.5px] border-line-muted bg-layer-panel p-0 shadow-raft-xs",
"transition-[background-color,border-color] duration-150",
"hover:bg-[color-mix(in_oklch,var(--ink)_1%,var(--layer-panel))]",
"data-[selected=true]:border-transparent data-[selected=true]:ring-2 data-[selected=true]:ring-primary-400 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-layer-canvas-muted",
"data-[nested=true]:rounded-none data-[nested=true]:border-0 data-[nested=true]:border-t-[0.5px] data-[nested=true]:border-line-hairline data-[nested=true]:bg-transparent data-[nested=true]:p-3 data-[nested=true]:shadow-none",
"data-[nested=true]:hover:bg-ink-2 data-[nested=true]:hover:shadow-none",
"data-[nested=true][data-selected=true]:border-line-hairline data-[nested=true][data-selected=true]:bg-fill-muted data-[nested=true][data-selected=true]:shadow-none data-[nested=true][data-selected=true]:ring-0",
"outline-none focus-visible:ring-1 focus-visible:ring-primary-400",
"dark:border-transparent",
"dark:focus-visible:ring-2 dark:focus-visible:ring-primary-400/60 dark:focus-visible:ring-offset-0",
"dark:data-[nested=true]:border-ink-10 dark:data-[nested=true]:bg-transparent dark:data-[nested=true]:shadow-none",
"dark:data-[nested=true]:hover:bg-[color-mix(in_oklch,var(--layer-canvas-muted)_20%,var(--layer-inset))] dark:data-[nested=true]:hover:shadow-none",
"dark:data-[nested=true][data-selected=true]:border-ink-10 dark:data-[nested=true][data-selected=true]:bg-fill-muted dark:data-[nested=true][data-selected=true]:shadow-none dark:data-[nested=true][data-selected=true]:ring-0",
"dark:data-[nested=true][data-selected=true]:hover:bg-fill-strong"
],
messageHeader: ["px-3 pt-2.5 pb-1", "group-data-[nested=true]/search-message:mb-1 group-data-[nested=true]/search-message:p-0"],
messageBody: [
"border-0 bg-transparent px-3 pt-0 pb-2.5",
"transition-colors duration-150",
"group-data-[nested=true]/search-message:rounded-none group-data-[nested=true]/search-message:border-0 group-data-[nested=true]/search-message:bg-transparent group-data-[nested=true]/search-message:p-0",
"group-data-[nested=true]/search-message:group-hover/search-message:bg-transparent",
"leading-5.25 tracking-[-0.01em] text-foreground-muted"
],
messageMeta: ["font-medium text-foreground-muted/70"],
messageThreadMeta: ["font-medium text-foreground-muted/70"],
messageSender: ["font-medium text-foreground-muted"],
messageTimestamp: ["font-sans tabular-nums text-foreground-muted/70"],
messageMatch: ["bg-primary-400/70 text-primary-950 [font:inherit]"]
}
} }
});
//#endregion
//#region src/components/search/search-message.tsx
function SearchMessageResultBase({ nested = false, selected = false, className, render, ...props }) {
const { message } = searchMessage({ theme: useThemeFamily() });
return useRender({
defaultTagName: "button",
render,
props: mergeProps({
"data-slot": "search-message-result",
"data-nested": nested ? "true" : void 0,
"data-selected": selected ? "true" : void 0,
className: message({ className }),
type: "button"
}, props)
});
}
function SearchMessageResult(props) {
return /* @__PURE__ */ jsx(SearchMessageResultBase, { ...props });
}
function SearchThreadMessageResult(props) {
return /* @__PURE__ */ jsx(SearchMessageResultBase, {
...props,
nested: true
});
}
function SearchMessageResultHeader({ className, render, ...props }) {
const { messageHeader } = searchMessage({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "search-message-result-header",
className: messageHeader({ className })
}, props)
});
}
function SearchMessageResultBody({ className, render, ...props }) {
const { messageBody } = searchMessage({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "search-message-result-body",
className: messageBody({ className })
}, props)
});
}
function SearchMessageResultMeta({ className, render, ...props }) {
const { messageMeta } = searchMessage({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "search-message-result-meta",
className: messageMeta({ className })
}, props)
});
}
function SearchMessageResultThreadMeta({ className, render, ...props }) {
const { messageThreadMeta } = searchMessage({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "search-message-result-thread-meta",
className: messageThreadMeta({ className })
}, props)
});
}
function SearchMessageResultSender({ className, render, ...props }) {
const { messageSender } = searchMessage({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "search-message-result-sender",
className: messageSender({ className })
}, props)
});
}
function SearchMessageResultTimestamp({ className, render, ...props }) {
const { messageTimestamp } = searchMessage({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "search-message-result-timestamp",
className: messageTimestamp({ className })
}, props)
});
}
function SearchMessageResultMatch({ className, render, ...props }) {
const { messageMatch } = searchMessage({ theme: useThemeFamily() });
return useRender({
defaultTagName: "mark",
render,
props: mergeProps({
"data-slot": "search-message-result-match",
className: messageMatch({ className })
}, props)
});
}
//#endregion
//#region src/components/search/search-thread.recipe.ts
const searchThread = tv({
slots: {
thread: ["overflow-hidden transition-colors"],
threadHeader: ["px-3 py-2"],
threadMeta: ["mb-1 flex flex-wrap items-center gap-2 text-[11px]"],
threadTimestamp: ["normal-case"],
threadTitle: ["text-sm"],
threadMessages: ["flex flex-col [&>*:first-child]:border-t-0"]
},
variants: { theme: {
brutal: {
thread: [
"border-2 border-black/30 bg-white",
"hover:border-black hover:shadow-raft-sm",
"data-[selected=true]:border-black data-[selected=true]:shadow-raft-sm"
],
threadHeader: ["border-b-2 border-black bg-[oklch(0.96625109_0.02494438_333.728876)]"],
threadMeta: ["font-bold uppercase tracking-wide text-black/70"],
threadTimestamp: ["font-mono text-black/50"],
threadTitle: ["font-bold text-black"]
},
elegant: {
thread: [
"group/thread rounded-lg border-[0.5px] border-line-muted bg-layer-panel shadow-raft-xs",
"transition-[background-color,border-color] duration-150",
"hover:bg-[color-mix(in_oklch,var(--ink)_1%,var(--layer-panel))]",
"data-[selected=true]:border-transparent data-[selected=true]:ring-2 data-[selected=true]:ring-primary-400 data-[selected=true]:ring-offset-2 data-[selected=true]:ring-offset-layer-canvas-muted",
"dark:border-transparent"
],
threadHeader: ["px-3 pt-2.5 pb-2"],
threadMeta: ["font-medium text-foreground-muted"],
threadTimestamp: ["font-sans tabular-nums text-foreground-muted/70"],
threadTitle: ["font-medium text-foreground-strong"],
threadMessages: [
"overflow-clip border-t-[0.5px] border-line-hairline bg-transparent",
"transition-colors duration-150",
"dark:border-ink-10"
]
}
} }
});
//#endregion
//#region src/components/search/search-thread.tsx
function SearchThreadResult({ selected = false, className, render, ...props }) {
const { thread } = searchThread({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "search-thread-result",
"data-selected": selected ? "true" : void 0,
className: thread({ className })
}, props)
});
}
function SearchThreadResultHeader({ className, render, ...props }) {
const { threadHeader } = searchThread({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "search-thread-result-header",
className: threadHeader({ className })
}, props)
});
}
function SearchThreadResultMeta({ className, render, ...props }) {
const { threadMeta } = searchThread({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "search-thread-result-meta",
className: threadMeta({ className })
}, props)
});
}
function SearchThreadResultTimestamp({ className, render, ...props }) {
const { threadTimestamp } = searchThread({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "search-thread-result-timestamp",
className: threadTimestamp({ className })
}, props)
});
}
function SearchThreadResultTitle({ className, render, ...props }) {
const { threadTitle } = searchThread({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "search-thread-result-title",
className: threadTitle({ className })
}, props)
});
}
function SearchThreadResultMessages({ className, render, ...props }) {
const { threadMessages } = searchThread({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "search-thread-result-messages",
className: threadMessages({ className })
}, props)
});
}
//#endregion
export { ActivityInboxControls, ActivityInboxHeaderIcon, ActivityInboxItem, ActivityInboxItemActions, ActivityInboxItemBody, ActivityInboxItemContent, ActivityInboxItemHeading, ActivityInboxItemMetadata, ActivityInboxItemOpen, ActivityInboxItemSelection, ActivityInboxItemSender, ActivityInboxItemSubtitle, ActivityInboxItemTimestamp, ActivityInboxItemTitle, ActivityInboxItemTrailing, ActivityInboxList, ActivityInboxLoadingMore, ActivityInboxNavigationCount, ActivityInboxNavigationItem, ActivityInboxNavigationLabel, ActivityInboxPanel, ActivityInboxSelectionCount, ActivityInboxSelectionToolbar, ActivityInboxSidebar, ActivityInboxSidebarHeading, ActivityInboxSidebarHeadingLabel, ActivityInboxToolbarAction, ActivityInboxViewport, SearchEntityResult, SearchEntityResultActivity, SearchEntityResultDescription, SearchEntityResultIcon, SearchEntityResultLeading, SearchEntityResultTitle, SearchMessageResult, SearchMessageResultBody, SearchMessageResultHeader, SearchMessageResultMatch, SearchMessageResultMeta, SearchMessageResultSender, SearchMessageResultThreadMeta, SearchMessageResultTimestamp, SearchResultsList, SearchResultsSection, SearchResultsSectionHeading, SearchResultsSummary, SearchShellContent, SearchShellFilters, SearchShellHeader, SearchShellHeaderIcon, SearchShellRoot, SearchShellViewport, SearchThreadMessageResult, SearchThreadResult, SearchThreadResultHeader, SearchThreadResultMessages, SearchThreadResultMeta, SearchThreadResultTimestamp, SearchThreadResultTitle };