raft-ui
Version:
React UI components for Raft.
1,566 lines (1,561 loc) • 66.6 kB
JavaScript
import { cn } from "./cn.mjs";
import { tv } from "tailwind-variants/lite";
import { createContext, use, useSyncExternalStore } from "react";
import { Button } from "@base-ui/react/button";
import { mergeProps } from "@base-ui/react/merge-props";
import { useRender } from "@base-ui/react/use-render";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
import { ScrollArea } from "@base-ui/react/scroll-area";
//#region src/lib/tv.ts
const tv$1 = ((options) => {
const recipe = tv(options);
const wrappedRecipe = ((props) => {
const result = recipe(props);
if (result == null || typeof result === "string") return cn(result);
return Object.fromEntries(Object.entries(result).map(([slotName, slot]) => [slotName, (slotProps) => cn(slot(slotProps))]));
});
return Object.assign(wrappedRecipe, recipe);
});
//#endregion
//#region src/lib/theme/theme-context.ts
const ThemeContext = createContext("brutal");
const ThemeStateContext = createContext({
theme: "brutal",
setTheme: () => void 0,
mode: "light",
resolvedMode: "light"
});
//#endregion
//#region src/lib/theme/use-theme.ts
/** Read the active style family for theme-aware component recipes. */
function useThemeFamily() {
return use(ThemeContext);
}
/** Read and update the application-level RUI theme selection. */
function useTheme() {
return use(ThemeStateContext);
}
//#endregion
//#region src/lib/default-native-button.ts
function defaultNativeButton(render) {
if (!render || typeof render !== "object" || !("type" in render)) return;
const element = render;
if (typeof element.type === "string") return element.type === "button";
}
//#endregion
//#region src/components/spinner/spinner.tsx
const ELEGANT_SPINNER_STYLE = `
@keyframes raft-elegant-spinner-spin {
to {
transform: rotate(360deg);
}
}
@keyframes raft-elegant-spinner-dash {
0% {
stroke-dasharray: 1 150;
stroke-dashoffset: 0;
}
50% {
stroke-dasharray: 90 150;
stroke-dashoffset: -35;
}
100% {
stroke-dasharray: 90 150;
stroke-dashoffset: -124;
}
}
[data-slot="spinner"] [data-spinner-ring] {
animation: raft-elegant-spinner-spin 1600ms linear infinite;
transform-box: fill-box;
transform-origin: center;
will-change: transform;
}
[data-slot="spinner"] [data-spinner-arc] {
animation: raft-elegant-spinner-dash 1400ms cubic-bezier(0.42, 0, 0.58, 1) infinite;
stroke-dasharray: 1 150;
stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
[data-slot="spinner"] [data-spinner-ring] {
animation-duration: 2400ms;
will-change: auto;
}
[data-slot="spinner"] [data-spinner-arc] {
animation: none;
stroke-dasharray: 72 150;
stroke-dashoffset: -30;
}
}
`;
const spinner = tv$1({
slots: {
root: ["relative inline-flex shrink-0 items-center justify-center", "leading-none text-current"],
ring: "block size-full shrink-0"
},
variants: {
theme: {
brutal: {},
elegant: {}
},
size: {
xs: {},
sm: {},
md: {},
lg: {}
},
variant: {
default: {},
inverse: {}
}
},
defaultVariants: { size: "sm" },
compoundVariants: [
{
theme: "brutal",
size: "xs",
class: { root: "size-2.5" }
},
{
theme: "brutal",
size: "sm",
class: { root: "size-4" }
},
{
theme: "brutal",
size: "md",
class: { root: "size-5" }
},
{
theme: "brutal",
size: "lg",
class: { root: "size-8" }
},
{
theme: "brutal",
variant: "default",
class: {
root: "text-black",
ring: "animate-spin rounded-full border-2 border-current/20 border-t-current"
}
},
{
theme: "brutal",
variant: "inverse",
class: {
root: "text-white",
ring: "animate-spin rounded-full border-2 border-current/40 border-t-current"
}
},
{
theme: "elegant",
size: "xs",
class: { root: "size-3.5" }
},
{
theme: "elegant",
size: "sm",
class: { root: "size-3.5" }
},
{
theme: "elegant",
size: "md",
class: { root: "size-4.5" }
},
{
theme: "elegant",
size: "lg",
class: { root: "size-4.5" }
}
]
});
const spinnerStyle = /* @__PURE__ */ jsx("style", {
href: "raft-ui-spinner",
precedence: "default",
children: ELEGANT_SPINNER_STYLE
});
function Spinner({ size = "sm", variant = "default", className, render, ...props }) {
const theme = useThemeFamily();
const { root, ring } = spinner({
theme,
size,
variant
});
const children = theme === "elegant" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [spinnerStyle, /* @__PURE__ */ jsxs("svg", {
"data-spinner-ring": "",
"aria-hidden": "true",
className: ring(),
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
children: [/* @__PURE__ */ jsx("circle", {
className: "opacity-20",
cx: "12",
cy: "12",
r: "10",
stroke: "currentColor",
strokeWidth: "2.5"
}), /* @__PURE__ */ jsx("circle", {
"data-spinner-arc": "",
className: "opacity-80",
cx: "12",
cy: "12",
r: "10",
fill: "none",
pathLength: "150",
stroke: "currentColor",
strokeLinecap: "round",
strokeWidth: "2.5"
})]
})] }) : /* @__PURE__ */ jsx("span", {
"data-spinner-ring": "",
"aria-hidden": "true",
className: ring()
});
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
role: "status",
"aria-label": "Loading",
className: root({ className }),
children
}, props),
state: {
slot: "spinner",
size
}
});
}
//#endregion
//#region src/components/button/button.tsx
const buttonVariants = tv$1({
slots: {
root: [
"relative inline-flex shrink-0 items-center justify-center",
"font-heading whitespace-nowrap select-none",
"rounded-none",
"shadow-raft-sm transition-all duration-100",
"outline-[1px] outline-offset-2 outline-transparent focus-visible:outline-transparent",
"data-[loading=true]:cursor-wait",
"disabled:pointer-events-none disabled:opacity-40 data-[loading=true]:opacity-100",
"disabled:transform-none",
"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
],
content: "relative z-10 inline-flex items-center justify-center gap-[inherit] data-[loading=true]:invisible",
loadingIndicator: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center"
},
variants: {
theme: {
brutal: { root: ["border-2 font-bold"] },
elegant: { root: [
"overflow-clip border-0 font-sans font-medium antialiased",
"focus-visible:ring-2 focus-visible:ring-[color-mix(in_oklch,var(--button-focus-ring,var(--primary-400))_80%,transparent)] focus-visible:ring-offset-1 focus-visible:ring-offset-layer-canvas-muted",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.05),0_0_0_1px_var(--line-muted)]",
"before:pointer-events-none before:absolute before:inset-0 before:z-0 before:rounded-[inherit]",
"active:scale-[0.985]"
] }
},
variant: {
primary: { root: ["border-line-strong bg-primary-400 text-primary-950", "hover:bg-primary-500"] },
default: { root: ["border-line-strong bg-layer-panel text-foreground", "hover:bg-layer-panel"] },
information: { root: ["border-line-strong bg-info text-foreground-inverse", "hover:bg-info"] },
muted: { root: ["border-line-strong bg-secondary-400 text-secondary-950", "hover:bg-secondary-400"] },
accent: { root: ["border-line-strong bg-accent-400 text-accent-950", "hover:bg-accent-500"] },
warning: { root: ["border-line-strong bg-warning text-warning-foreground", "hover:bg-warning"] },
outline: { root: [
"border-line-strong bg-transparent text-foreground",
"hover:bg-fill-muted",
"shadow-none"
] },
ghost: { root: ["border-transparent bg-transparent text-foreground-strong shadow-none", "hover:border-line-strong hover:bg-fill-muted"] },
link: { root: ["border-transparent bg-transparent text-foreground shadow-none underline-offset-4", "hover:underline"] },
"danger-secondary": { root: ["border-line-strong bg-danger-soft text-danger", "hover:bg-danger-soft"] },
danger: { root: ["border-line-strong bg-danger text-danger-foreground", "hover:border-danger-hover hover:bg-danger-hover"] },
"danger-outline": { root: [
"border-line-strong bg-transparent text-danger",
"hover:bg-fill-muted",
"shadow-none"
] }
},
size: {
xs: { root: [
"h-6 gap-1 px-2 py-0 text-[11px]",
"has-data-[icon=inline-start]:pl-1.5 has-data-[icon=inline-end]:pr-1.5",
"**:data-icon:size-[1em]",
"[&_svg:not([class*='size-'])]:size-3"
] },
sm: { root: [
"h-7 gap-[5px] px-2.5 py-0 text-xs",
"has-data-[icon=inline-start]:pl-2 has-data-[icon=inline-end]:pr-2",
"**:data-icon:size-[1em]",
"[&_svg:not([class*='size-'])]:size-3.5"
] },
md: { root: [
"h-8 gap-[5.5px] px-3 py-0 text-sm",
"has-data-[icon=inline-start]:pl-2.5 has-data-[icon=inline-end]:pr-2.5",
"**:data-icon:size-[1em]"
] },
lg: { root: [
"gap-1.5 px-3.5 py-0 text-base",
"has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3",
"**:data-icon:size-[1em]"
] },
"icon-xs": { root: ["size-6 p-0 text-[11px]", "[&_svg:not([class*='size-'])]:size-3"] },
"icon-sm": { root: ["size-7 p-0 text-xs", "[&_svg:not([class*='size-'])]:size-3.5"] },
"icon-md": { root: "size-8 p-0 text-sm" },
"icon-lg": { root: "p-0 text-sm" }
}
},
defaultVariants: {
variant: "default",
size: "md"
},
compoundVariants: [
{
theme: "elegant",
size: "xs",
class: { root: "rounded-sm" }
},
{
theme: "elegant",
size: "icon-xs",
class: { root: "rounded-sm" }
},
{
theme: "elegant",
size: "sm",
class: { root: "rounded-sm" }
},
{
theme: "elegant",
size: "icon-sm",
class: { root: "rounded-sm" }
},
{
theme: "elegant",
size: "md",
class: { root: "rounded-md" }
},
{
theme: "elegant",
size: "icon-md",
class: { root: "rounded-md" }
},
{
theme: "elegant",
size: "lg",
class: { root: "h-9 rounded-md" }
},
{
theme: "elegant",
size: "icon-lg",
class: { root: "size-9 rounded-md" }
},
{
theme: "elegant",
variant: [
"default",
"primary",
"outline",
"information",
"muted",
"accent",
"warning",
"danger",
"danger-secondary",
"danger-outline"
],
class: { root: "dark:shadow-raft-xs" }
},
{
theme: "elegant",
variant: ["default", "outline"],
class: { root: "[--button-focus-ring:var(--foreground)]" }
},
{
theme: "elegant",
variant: [
"ghost",
"link",
"muted"
],
class: { root: "[--button-focus-ring:var(--line-hairline)]" }
},
{
theme: "elegant",
variant: [
"danger-secondary",
"danger",
"danger-outline"
],
class: { root: "[--button-focus-ring:var(--danger)]" }
},
{
theme: "brutal",
variant: "primary",
class: { root: "bg-brutal-yellow text-foreground-strong hover:bg-brutal-yellow" }
},
{
theme: "brutal",
variant: "default",
class: { root: "bg-layer-panel text-foreground-strong hover:bg-layer-panel" }
},
{
theme: "brutal",
variant: "outline",
class: { root: "bg-layer-panel text-foreground-strong shadow-raft-sm hover:bg-layer-panel" }
},
{
theme: "brutal",
variant: "information",
class: { root: "bg-brutal-cyan text-foreground-strong hover:bg-brutal-cyan" }
},
{
theme: "brutal",
variant: "muted",
class: { root: "bg-brutal-stone text-foreground-strong hover:bg-brutal-stone" }
},
{
theme: "brutal",
variant: "accent",
class: { root: "bg-brutal-pink text-foreground-strong hover:bg-brutal-pink" }
},
{
theme: "brutal",
variant: "danger",
class: { root: "bg-brutal-red text-foreground-strong hover:border-line-strong hover:bg-brutal-red" }
},
{
theme: "brutal",
variant: "danger-secondary",
class: { root: "text-[color-mix(in_oklab,var(--danger)_72%,transparent)] hover:border-line-strong" }
},
{
theme: "brutal",
variant: "warning",
class: { root: "bg-brutal-orange text-foreground-strong hover:bg-brutal-orange" }
},
{
theme: "brutal",
size: "lg",
class: { root: ["h-10 px-4 text-sm", "has-data-[icon=inline-start]:pl-3.5 has-data-[icon=inline-end]:pr-3.5"] }
},
{
theme: "brutal",
size: "icon-lg",
class: { root: "size-10" }
},
{
theme: "elegant",
variant: "default",
class: { root: [
"bg-foreground text-foreground-inverse",
"dark:bg-ink",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.12),0_0_0_1px_var(--foreground)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0/8%)_0%,oklab(0%_0_0/0%)_100%)]",
"hover:bg-[oklch(0.31_0.006_106.42)] dark:hover:bg-foreground-strong"
] }
},
{
theme: "elegant",
variant: "primary",
class: { root: [
"bg-primary-400 text-primary-950",
"[--button-focus-ring:var(--primary-400)]",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.15),0_0_0_1px_var(--primary-edge)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0/11%)_0%,oklab(100%_0_0/0%)_0%,oklab(0%_0_0/0%)_100%)]",
"hover:bg-primary-hover",
"dark:hover:bg-primary-500"
] }
},
{
theme: "elegant",
variant: "outline",
class: { root: [
"bg-layer-panel text-foreground dark:text-foreground-muted",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.05),0_0_0_1px_var(--line-muted)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(0%_0_0/0%)_30%,oklab(0%_0_0/1%)_100%)]",
"hover:bg-fill-muted",
"dark:bg-fill-muted dark:hover:bg-fill-strong"
] }
},
{
theme: "elegant",
variant: "ghost",
class: { root: ["bg-transparent text-foreground-muted shadow-none", "hover:bg-ink-4"] }
},
{
theme: "elegant",
variant: "danger-secondary",
class: { root: [
"bg-danger-soft text-danger",
"dark:bg-[oklch(0.37_0.06_27)] dark:text-[oklch(0.8_0.17_22)]",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.08),0_0_0_1px_var(--danger-muted)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0/4%)_0%,oklab(0%_0_0/0%)_100%)]",
"hover:bg-danger-muted",
"dark:hover:bg-[oklch(0.4_0.07_27)]"
] }
},
{
theme: "elegant",
variant: "danger",
class: { root: [
"bg-danger text-danger-foreground",
"dark:bg-[oklch(0.58_0.21_27)] dark:text-[oklch(0.985_0.004_106.42)]",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.12),0_0_0_1px_var(--danger)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0/10%)_0%,oklab(0%_0_0/0%)_100%)]",
"hover:bg-danger-hover",
"dark:hover:bg-[oklch(0.61_0.21_27)]"
] }
},
{
theme: "elegant",
variant: "danger-outline",
class: { root: [
"bg-layer-panel text-danger",
"dark:bg-fill-muted dark:text-[oklch(0.78_0.19_25)]",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.025),0_0_0_1px_var(--danger-muted)]",
"hover:bg-danger-soft",
"dark:hover:bg-fill-strong"
] }
},
{
theme: "elegant",
variant: "accent",
class: { root: [
"bg-accent-400 text-accent-950",
"dark:text-foreground-inverse",
"[--button-focus-ring:var(--accent-400)]",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.12),0_0_0_1px_var(--accent-400)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0/8%)_0%,oklab(0%_0_0/0%)_100%)]",
"hover:bg-accent-hover"
] }
},
{
theme: "elegant",
variant: "warning",
class: { root: [
"bg-warning text-[oklch(0.25_0.05_50)]",
"dark:bg-[oklch(0.66_0.17_46)]",
"[--button-focus-ring:var(--warning)]",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.14),0_0_0_1px_var(--warning)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0/10%)_0%,oklab(0%_0_0/0%)_100%)]",
"hover:bg-warning-hover",
"dark:hover:bg-[oklch(0.69_0.17_46)]"
] }
},
{
theme: "elegant",
variant: "link",
class: { root: "bg-transparent text-foreground-muted shadow-none" }
},
{
theme: "elegant",
variant: "information",
class: { root: [
"bg-info text-foreground-inverse",
"dark:bg-info-strong",
"[--button-focus-ring:var(--info)]",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.12),0_0_0_1px_var(--info)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0/8%)_0%,oklab(0%_0_0/0%)_100%)]",
"hover:bg-info-hover",
"dark:hover:bg-info"
] }
},
{
theme: "elegant",
variant: "muted",
class: { root: [
"bg-fill-muted text-foreground-muted dark:text-foreground-placeholder",
"shadow-[inset_0_1px_0.5px_oklch(1_0_0/0.05),0_0_0_1px_var(--line-muted)]",
"before:bg-[linear-gradient(in_oklab_180deg,oklab(100%_0_0/5%)_0%,oklab(0%_0_0/1%)_100%)]",
"hover:bg-fill-strong",
"dark:bg-layer-panel",
"dark:hover:bg-fill-muted"
] }
},
{
theme: "brutal",
variant: [
"primary",
"default",
"information",
"muted",
"accent",
"warning",
"outline",
"danger-secondary",
"danger"
],
class: { root: [
"hover:-translate-y-px hover:shadow-raft-md",
"active:translate-px",
"active:shadow-raft-xs"
] }
},
{
theme: "brutal",
variant: "danger-outline",
class: { root: ["hover:-translate-y-px", "active:translate-px"] }
}
]
});
function Button$1({ variant, size, loading = false, loadingLabel = "Loading", disabled, className, children, render, nativeButton, ...props }) {
const theme = useThemeFamily();
const { root, content, loadingIndicator } = buttonVariants({
theme,
variant,
size
});
return /* @__PURE__ */ jsxs(Button, {
...props,
render,
nativeButton: nativeButton ?? defaultNativeButton(render),
"data-slot": "button",
className: root({ className }),
"data-loading": loading ? "true" : void 0,
disabled: disabled || loading,
"aria-disabled": loading || void 0,
children: [loading ? /* @__PURE__ */ jsx("span", {
"data-slot": "button-loading-indicator",
className: loadingIndicator(),
children: /* @__PURE__ */ jsx(Spinner, { "aria-label": loadingLabel })
}) : null, /* @__PURE__ */ jsx("span", {
"data-slot": "button-content",
"data-loading": loading ? "true" : void 0,
className: content(),
children
})]
});
}
//#endregion
//#region src/lib/use-mobile-viewport.ts
const MOBILE_QUERY = "(max-width: 767px)";
function subscribeMobileViewport(onStoreChange) {
if (typeof window === "undefined") return () => void 0;
const media = window.matchMedia(MOBILE_QUERY);
media.addEventListener("change", onStoreChange);
return () => media.removeEventListener("change", onStoreChange);
}
function getMobileViewportSnapshot() {
return typeof window !== "undefined" && window.matchMedia(MOBILE_QUERY).matches;
}
function useMobileViewport() {
return useSyncExternalStore(subscribeMobileViewport, getMobileViewportSnapshot, () => false);
}
//#endregion
//#region src/components/scroll-area/scroll-area.recipe.ts
const scrollArea = tv$1({
slots: {
root: ["relative min-h-0"],
viewport: ["size-full min-h-0 overscroll-contain outline-none", "[overflow-anchor:auto] [-webkit-overflow-scrolling:touch]"],
content: ["min-h-full"],
scrollbar: [
"group/scroll-area-scrollbar z-50 flex touch-none select-none p-1",
"opacity-0 transition-opacity duration-150 pointer-events-none",
"data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0",
"data-[orientation=vertical]:w-3 data-[orientation=vertical]:justify-center",
"data-[orientation=horizontal]:h-3 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:justify-center"
],
thumb: [
"relative rounded-full",
"group-data-[orientation=vertical]/scroll-area-scrollbar:w-1.5",
"group-data-[orientation=horizontal]/scroll-area-scrollbar:h-1.5"
],
corner: ["bg-transparent"]
},
variants: { theme: {
brutal: { thumb: ["bg-black/35 hover:bg-black/55"] },
elegant: { thumb: ["bg-foreground-muted/35 hover:bg-foreground-muted/55"] }
} }
});
//#endregion
//#region src/components/scroll-area/scroll-area.tsx
function ScrollArea$1({ className, ...props }) {
const { root } = scrollArea({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx(ScrollArea.Root, {
"data-slot": "scroll-area",
className: root({ className }),
...props
});
}
function ScrollAreaViewport({ className, ...props }) {
const { viewport } = scrollArea({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx(ScrollArea.Viewport, {
"data-slot": "scroll-area-viewport",
className: viewport({ className }),
...props
});
}
function ScrollAreaContent({ className, ...props }) {
const { content } = scrollArea({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx(ScrollArea.Content, {
"data-slot": "scroll-area-content",
className: content({ className }),
...props
});
}
function ScrollAreaScrollbar({ className, orientation = "vertical", ...props }) {
const { scrollbar } = scrollArea({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx(ScrollArea.Scrollbar, {
"data-slot": "scroll-area-scrollbar",
orientation,
className: scrollbar({ className }),
...props
});
}
function ScrollAreaThumb({ className, ...props }) {
const { thumb } = scrollArea({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx(ScrollArea.Thumb, {
"data-slot": "scroll-area-thumb",
className: thumb({ className }),
...props
});
}
function ScrollAreaCorner({ className, ...props }) {
const { corner } = scrollArea({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx(ScrollArea.Corner, {
"data-slot": "scroll-area-corner",
className: corner({ className }),
...props
});
}
//#endregion
//#region src/components/sidebar/sidebar.recipe.ts
const headerMaskLayers = [
"data-[layer=solid]:bg-[linear-gradient(to_bottom,var(--layer-canvas-muted)_0%,var(--layer-canvas-muted)_28%,color-mix(in_oklch,var(--layer-canvas-muted)_82%,transparent)_52%,transparent_100%)]",
"data-[layer=soft]:h-[108%] data-[layer=soft]:bg-[linear-gradient(to_bottom,color-mix(in_oklch,var(--layer-canvas-muted)_48%,transparent)_0%,color-mix(in_oklch,var(--layer-canvas-muted)_18%,transparent)_40%,transparent_100%)]",
"data-[layer=blur]:h-[112%] data-[layer=blur]:backdrop-blur-[14px] data-[layer=blur]:backdrop-saturate-125",
"data-[layer=blur]:[mask-image:linear-gradient(to_bottom,black_0%,black_22%,oklch(0_0_0/0.55)_48%,transparent_100%)]",
"data-[layer=blur]:[-webkit-mask-image:linear-gradient(to_bottom,black_0%,black_22%,oklch(0_0_0/0.55)_48%,transparent_100%)]"
];
const liveActivityFadeOverlay = [
"has-[_[data-slot=live-agent-activity-bar]]:before:pointer-events-none has-[_[data-slot=live-agent-activity-bar]]:before:absolute has-[_[data-slot=live-agent-activity-bar]]:before:inset-x-0 has-[_[data-slot=live-agent-activity-bar]]:before:-bottom-3 has-[_[data-slot=live-agent-activity-bar]]:before:z-0 has-[_[data-slot=live-agent-activity-bar]]:before:h-20",
"has-[_[data-slot=live-agent-activity-bar]]:before:bg-[linear-gradient(to_bottom,transparent,var(--layer-canvas-muted))] has-[_[data-slot=live-agent-activity-bar]]:before:backdrop-blur-[4px]",
"has-[_[data-slot=live-agent-activity-bar]]:before:[mask-image:linear-gradient(to_top,black_50%,transparent)]",
"has-[_[data-slot=live-agent-activity-bar]]:before:[-webkit-mask-image:linear-gradient(to_top,black_50%,transparent)]",
"has-[_[data-slot=live-agent-activity-bar]]:before:content-['']"
];
const sidebarRecipe = tv$1({
slots: {
sidebarRoot: ["relative flex size-full min-h-0 select-none flex-col", "has-[>[data-slot=sidebar-live-activity]_[data-slot=live-agent-activity-bar]]:overflow-clip"],
sidebarHeader: ["flex shrink-0 items-center gap-3"],
sidebarHeaderMask: ["pointer-events-none absolute inset-x-0 top-0 -z-10 hidden"],
sidebarHeaderMaskLayer: ["absolute inset-x-0 top-0"],
sidebarHeaderTitle: ["truncate text-lg font-bold text-foreground"],
sidebarGroupLabel: ["px-2 pt-1 pb-2", "font-mono text-[10px] font-medium uppercase tracking-wider text-foreground-muted"],
sidebarBody: ["relative flex min-h-0 flex-1 overflow-hidden"],
sidebarContent: ["relative flex min-h-0 min-w-0 flex-1"],
sidebarViewport: ["size-full min-h-0 flex-1 overflow-x-hidden overflow-y-auto"],
sidebarContentInner: ["min-h-full min-w-0 w-full px-2 pt-3", "pb-(--sidebar-content-bottom,12px)"],
sidebarScrollbar: [
"z-30 flex w-3 justify-center py-1 opacity-0 transition-opacity duration-150",
"pointer-events-none",
"data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0"
],
sidebarLiveActivity: ["pointer-events-none absolute inset-x-0 max-md:hidden"]
},
variants: { theme: {
brutal: {
sidebarRoot: ["bg-brutal-cream", "md:has-[>[data-slot=sidebar-live-activity]_[data-slot=live-agent-activity-bar]]:[--sidebar-content-bottom:52px]"],
sidebarHeader: [
"h-(--shell-header-height,62px) shrink-0 border-b-2 border-black bg-brutal-cream px-5",
"max-md:bg-primary-400 max-md:px-4",
"[@media(max-height:600px)]:h-12"
],
sidebarBody: "bg-brutal-cream max-md:bg-white",
sidebarLiveActivity: "bottom-0 z-40"
},
elegant: {
sidebarRoot: [
"relative bg-layer-canvas-muted [--sidebar-inset-x:28px] md:[--sidebar-inset-x:26px]",
"md:[--sidebar-inset-end:18px]",
"md:has-[>[data-slot=sidebar-live-activity]_[data-slot=live-agent-activity-bar]]:[--sidebar-content-bottom:68px]"
],
sidebarHeader: [
"absolute inset-x-0 top-0 z-20 isolate",
"h-(--shell-header-height,56px) border-b-0 bg-transparent",
"px-(--sidebar-inset-x,26px) md:pr-[var(--sidebar-inset-end,var(--sidebar-inset-x,26px))]",
"[&_[data-slot=notification-center-trigger]]:-mr-2"
],
sidebarHeaderMask: ["block h-[calc(100%+12px)]"],
sidebarHeaderMaskLayer: ["h-full", ...headerMaskLayers],
sidebarHeaderTitle: "font-heading text-[17px] font-medium text-foreground-muted",
sidebarBody: "bg-layer-canvas-muted",
sidebarContentInner: ["px-(--sidebar-inset-x,26px) md:pr-[var(--sidebar-inset-end,var(--sidebar-inset-x,26px))]", "pt-(--shell-header-height,56px)"],
sidebarScrollbar: "justify-end",
sidebarLiveActivity: [
"bottom-3 z-10",
"pl-[26px] pr-4",
...liveActivityFadeOverlay,
"*:relative *:z-10"
]
}
} }
});
//#endregion
//#region src/components/sidebar/sidebar.tsx
function SidebarRoot({ className, render, ...props }) {
const { sidebarRoot } = sidebarRecipe({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "sidebar-root",
className: sidebarRoot({ className })
}, props)
});
}
function SidebarHeader({ children, className, render, ...props }) {
const { sidebarHeader, sidebarHeaderMask, sidebarHeaderMaskLayer } = sidebarRecipe({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "sidebar-header",
className: sidebarHeader({ className }),
children: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("div", {
"aria-hidden": true,
"data-slot": "sidebar-header-mask",
className: sidebarHeaderMask(),
children: [
/* @__PURE__ */ jsx("div", {
"data-slot": "sidebar-header-mask-layer",
"data-layer": "solid",
className: sidebarHeaderMaskLayer()
}),
/* @__PURE__ */ jsx("div", {
"data-slot": "sidebar-header-mask-layer",
"data-layer": "soft",
className: sidebarHeaderMaskLayer()
}),
/* @__PURE__ */ jsx("div", {
"data-slot": "sidebar-header-mask-layer",
"data-layer": "blur",
className: sidebarHeaderMaskLayer()
})
]
}), children] })
}, props)
});
}
function SidebarHeaderTitle({ className, render, ...props }) {
const { sidebarHeaderTitle } = sidebarRecipe({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "sidebar-header-title",
className: sidebarHeaderTitle({ className })
}, props)
});
}
function SidebarGroupLabel({ className, render, ...props }) {
const { sidebarGroupLabel } = sidebarRecipe({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "sidebar-group-label",
className: sidebarGroupLabel({ className })
}, props)
});
}
function SidebarBody({ className, render, ...props }) {
const { sidebarBody } = sidebarRecipe({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "sidebar-body",
className: sidebarBody({ className })
}, props)
});
}
function SidebarContent({ children, className, render, ...props }) {
const isMobile = useMobileViewport();
const { sidebarContent, sidebarContentInner, sidebarScrollbar, sidebarViewport } = sidebarRecipe({ theme: useThemeFamily() });
const nativeViewport = useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "sidebar-content",
className: sidebarViewport(),
children: /* @__PURE__ */ jsx("div", {
className: sidebarContentInner({ className }),
style: {
minWidth: 0,
width: "100%"
},
children
})
}, props)
});
if (isMobile) return /* @__PURE__ */ jsx("div", {
"data-slot": "sidebar-native-scroll-area",
className: sidebarContent(),
children: nativeViewport
});
return /* @__PURE__ */ jsxs(ScrollArea$1, {
"data-slot": "sidebar-scroll-area",
className: sidebarContent(),
children: [/* @__PURE__ */ jsx(ScrollAreaViewport, {
...props,
render,
"data-slot": "sidebar-content",
className: sidebarViewport(),
children: /* @__PURE__ */ jsx(ScrollAreaContent, {
className: sidebarContentInner({ className }),
style: {
minWidth: 0,
width: "100%"
},
children
})
}), /* @__PURE__ */ jsx(ScrollAreaScrollbar, {
className: sidebarScrollbar(),
children: /* @__PURE__ */ jsx(ScrollAreaThumb, {})
})]
});
}
function SidebarLiveActivity({ children, className, render, ...props }) {
const { sidebarLiveActivity } = sidebarRecipe({ theme: useThemeFamily() });
return useRender({
defaultTagName: "div",
render,
props: mergeProps({
"data-slot": "sidebar-live-activity",
className: sidebarLiveActivity({ className }),
children
}, props)
});
}
//#endregion
//#region src/components/badge/badge.tsx
const badge = tv$1({
slots: { root: [
"inline-flex w-fit shrink-0 min-w-0 max-w-full items-center gap-1 px-1.5",
"overflow-hidden whitespace-nowrap",
"text-[10px] font-bold leading-none",
"transition-[filter,opacity] duration-100",
"disabled:cursor-not-allowed disabled:opacity-60",
"[&_[data-slot='spinner']]:size-3 [&_[data-slot='spinner']]:text-xs"
] },
variants: {
theme: {
brutal: { root: ["h-5 border border-line-strong enabled:hover:brightness-90"] },
elegant: { root: [
"gap-1.5 rounded-full border border-transparent px-2.5 py-0.5",
"[&:has(svg)]:px-2",
"[&_svg]:shrink-0 [&_svg]:translate-y-[0.5px]",
"text-[11px] font-medium leading-3 tracking-[0.22px]",
"enabled:hover:brightness-[0.96]"
] }
},
appearance: {
solid: { root: "" },
soft: { root: "" },
outline: { root: "" }
},
variant: {
default: { root: "bg-layer-panel text-foreground" },
primary: { root: "bg-primary-400 text-primary-950" },
information: { root: "bg-info text-foreground-inverse" },
muted: { root: "bg-secondary-400 text-foreground" },
accent: { root: "bg-accent-400 text-accent-950" },
success: { root: "bg-success text-success-strong" },
warning: { root: "bg-warning text-warning-foreground" },
danger: { root: "bg-[oklch(0.66_0.19_31)] text-foreground" }
},
uppercase: {
true: { root: "" },
false: { root: "" }
}
},
defaultVariants: {
appearance: "solid",
variant: "default",
uppercase: false
},
compoundVariants: [
{
theme: "brutal",
uppercase: true,
class: { root: "uppercase tracking-wide" }
},
{
theme: "brutal",
appearance: "solid",
variant: "success",
class: { root: "bg-brutal-lime text-foreground-strong" }
},
{
theme: "brutal",
appearance: "solid",
variant: "danger",
class: { root: "bg-brutal-red text-foreground-strong" }
},
{
theme: "brutal",
appearance: "solid",
variant: "information",
class: { root: "bg-info text-info-strong" }
},
{
theme: "brutal",
appearance: "solid",
variant: "warning",
class: { root: "bg-warning text-foreground-strong" }
},
{
theme: "brutal",
appearance: "soft",
variant: "default",
class: { root: "bg-secondary-100 text-secondary-800" }
},
{
theme: "brutal",
appearance: "soft",
variant: "muted",
class: { root: "bg-secondary-200 text-secondary-800" }
},
{
theme: "brutal",
appearance: "soft",
variant: "primary",
class: { root: "bg-primary-400/40 text-primary-900" }
},
{
theme: "brutal",
appearance: "soft",
variant: "information",
class: { root: "bg-info-muted text-info-strong" }
},
{
theme: "brutal",
appearance: "soft",
variant: "accent",
class: { root: "bg-accent-200 text-accent-700" }
},
{
theme: "brutal",
appearance: "soft",
variant: "success",
class: { root: "bg-success/30 text-[oklch(0.39_0.11_153.079)]" }
},
{
theme: "brutal",
appearance: "soft",
variant: "warning",
class: { root: "bg-warning-muted text-[oklch(0.43_0.12_44.441)]" }
},
{
theme: "brutal",
appearance: "soft",
variant: "danger",
class: { root: "bg-danger-muted text-danger-strong" }
},
{
theme: "brutal",
appearance: "outline",
variant: "default",
class: { root: "bg-transparent text-foreground" }
},
{
theme: "brutal",
appearance: "outline",
variant: "muted",
class: { root: "bg-transparent text-secondary-900" }
},
{
theme: "brutal",
appearance: "outline",
variant: "primary",
class: { root: "bg-transparent text-primary-700" }
},
{
theme: "brutal",
appearance: "outline",
variant: "information",
class: { root: "bg-transparent text-info-strong" }
},
{
theme: "brutal",
appearance: "outline",
variant: "accent",
class: { root: "bg-transparent text-accent-700" }
},
{
theme: "brutal",
appearance: "outline",
variant: "success",
class: { root: "bg-transparent text-[oklch(0.48_0.12_153.079)]" }
},
{
theme: "brutal",
appearance: "outline",
variant: "warning",
class: { root: "bg-transparent text-warning-strong" }
},
{
theme: "brutal",
appearance: "outline",
variant: "danger",
class: { root: "bg-transparent text-[oklch(0.54_0.19_31)]" }
},
{
theme: "elegant",
appearance: "solid",
variant: "default",
class: { root: "bg-ink-8 text-foreground-muted" }
},
{
theme: "elegant",
appearance: "solid",
variant: "muted",
class: { root: "bg-inactive text-inactive-foreground" }
},
{
theme: "elegant",
appearance: "solid",
variant: "primary",
class: { root: "bg-primary-400 text-[oklch(0.431_0.088_86.67)]" }
},
{
theme: "elegant",
appearance: "solid",
variant: "information",
class: { root: "bg-info text-info-strong dark:text-foreground-inverse" }
},
{
theme: "elegant",
appearance: "solid",
variant: "accent",
class: { root: "bg-accent-400 text-[oklch(0.281_0.112_3.73)]" }
},
{
theme: "elegant",
appearance: "solid",
variant: "success",
class: { root: "bg-success text-success-foreground dark:text-foreground-inverse" }
},
{
theme: "elegant",
appearance: "solid",
variant: "warning",
class: { root: "bg-warning text-warning-foreground dark:text-foreground-inverse" }
},
{
theme: "elegant",
appearance: "solid",
variant: "danger",
class: { root: "bg-[oklch(0.672_0.215_26.69)] text-white dark:text-foreground-inverse" }
},
{
theme: "elegant",
appearance: "soft",
variant: "default",
class: { root: "border-transparent bg-fill-strong text-[oklch(0.409_0_0)] dark:text-[oklch(0.87_0_0)]" }
},
{
theme: "elegant",
appearance: "soft",
variant: "muted",
class: { root: "border-transparent bg-fill-strong text-[oklch(0.447_0.002_67.77)] dark:text-[oklch(0.8_0.002_67.77)]" }
},
{
theme: "elegant",
appearance: "soft",
variant: "primary",
class: { root: "border-transparent bg-primary-soft text-primary-strong" }
},
{
theme: "elegant",
appearance: "soft",
variant: "information",
class: { root: "border-transparent bg-info-soft text-info-strong" }
},
{
theme: "elegant",
appearance: "soft",
variant: "accent",
class: { root: "border-transparent bg-accent-soft text-accent-strong" }
},
{
theme: "elegant",
appearance: "soft",
variant: "success",
class: { root: "border-transparent bg-success-soft text-success-strong" }
},
{
theme: "elegant",
appearance: "soft",
variant: "warning",
class: { root: "border-transparent bg-warning-soft text-warning-strong" }
},
{
theme: "elegant",
appearance: "soft",
variant: "danger",
class: { root: "border-transparent bg-danger-soft text-danger-strong" }
},
{
theme: "elegant",
appearance: "outline",
variant: "default",
class: { root: "border-line-muted bg-transparent text-foreground" }
},
{
theme: "elegant",
appearance: "outline",
variant: "muted",
class: { root: "border-secondary-500 bg-transparent text-secondary-900 dark:text-secondary-300" }
},
{
theme: "elegant",
appearance: "outline",
variant: "primary",
class: { root: "border-primary-500 bg-transparent text-primary-strong" }
},
{
theme: "elegant",
appearance: "outline",
variant: "information",
class: { root: "border-info bg-transparent text-info-strong" }
},
{
theme: "elegant",
appearance: "outline",
variant: "accent",
class: { root: "border-accent-500 bg-transparent text-accent-strong" }
},
{
theme: "elegant",
appearance: "outline",
variant: "success",
class: { root: "border-success bg-transparent text-success-strong" }
},
{
theme: "elegant",
appearance: "outline",
variant: "warning",
class: { root: "border-warning bg-transparent text-warning-strong" }
},
{
theme: "elegant",
appearance: "outline",
variant: "danger",
class: { root: "border-danger bg-transparent text-danger-strong" }
}
]
});
function BadgeRoot({ appearance, variant, uppercase, className, render, ...props }) {
const theme = useThemeFamily();
const resolvedAppearance = appearance ?? "solid";
const resolvedUppercase = uppercase ?? false;
const { root } = badge({
theme,
appearance: resolvedAppearance,
variant,
uppercase: resolvedUppercase
});
return useRender({
defaultTagName: "span",
render,
props: mergeProps({ className: root({ className }) }, props),
state: {
slot: "badge",
appearance: resolvedAppearance,
variant,
uppercase: resolvedUppercase
}
});
}
function Experimental(props) {
return /* @__PURE__ */ jsx(BadgeRoot, {
variant: "success",
uppercase: true,
...props,
children: "Experimental"
});
}
const Badge = Object.assign(BadgeRoot, { Experimental });
//#endregion
//#region src/components/sidebar/sidebar-item.recipe.ts
const sidebarItemRecipe = tv$1({
slots: {
sidebarItem: [
"group/sidebar-item mb-1 flex w-full items-center gap-1.5 px-2 py-2 text-left",
"border-2 text-sm font-medium transition-colors",
"[@media(max-height:600px)]:py-1 md:py-1"
],
sidebarItemIcon: ["flex size-4.5 shrink-0 items-center justify-center", "[&>svg]:size-3.5 [&>svg]:shrink-0"],
sidebarItemChannelIcon: ["flex shrink-0 items-center justify-center", "[&_svg]:shrink-0 [&_svg]:stroke-[1.5]"],
sidebarItemContent: [
"has-[>[data-slot=sidebar-item-subtitle]]:*:data-[slot=sidebar-item-title]:max-w-[70%]",
"has-[>[data-slot=sidebar-item-subtitle]]:*:data-[slot=sidebar-item-title]:shrink-0",
"has-[>[data-slot=sidebar-item-meta-icon]]:items-center"
],
sidebarItemTitle: ["block min-w-0 truncate"],
sidebarItemSubtitle: ["block min-w-0 flex-1 truncate text-xs font-normal"],
sidebarItemMeta: ["ml-auto shrink-0 font-mono text-[10px]"],
sidebarItemStatus: ["shrink-0"],
sidebarItemIndicator: [
"size-4 shrink-0 items-center justify-center gap-0 px-0 py-0",
"[&:has(svg)]:px-0",
"[&_svg]:size-2.5 [&_svg]:shrink-0 [&_svg]:translate-y-0"
],
sidebarItemMetaIcon: ["inline-flex size-4 shrink-0 items-center justify-center", "[&_svg]:size-3 [&_svg]:shrink-0"],
sidebarItemAside: ["flex shrink-0 items-center gap-1"],
sidebarItemCount: ["shrink-0"]
},
variants: {
theme: {
brutal: {
sidebarItem: [
"border-transparent text-black",
"hover:border-black hover:bg-white hover:shadow-raft-sm",
"active:border-black active:bg-white active:shadow-raft-sm",
"data-active:border-black data-active:bg-brutal-pink",
"data-active:shadow-raft-sm",
"data-popup-open:border-black data-popup-open:bg-white data-popup-open:shadow-raft-sm",
"focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-[black]"
],
sidebarItemTitle: "font-medium text-black",
sidebarItemChannelIcon: "[&_svg]:size-3",
sidebarItemSubtitle: "text-black/40",
sidebarItemMeta: "text-xs font-medium text-black/70",
sidebarItemIndicator: ["rounded-sm border border-black bg-primary", "text-[10px] font-bold leading-none text-black"],
sidebarItemMetaIcon: "text-black/70",
sidebarItemCount: ["h-4 gap-0 rounded-sm border border-black bg-brutal-pink px-1.5 py-0.5 text-[10px] font-bold leading-none text-white"]
},
elegant: {
sidebarItem: [
"relative isolate mb-0.5 -mx-(--sidebar-row-inset-x,6px) w-[calc(100%+12px)] rounded-md border border-transparent px-(--sidebar-row-inset-x,6px) py-1.5 md:py-1.5 [@media(max-height:600px)]:py-1",
"*:z-10",
"text-[13px] font-medium text-foreground-muted",
"hover:border-transparent hover:bg-fill-strong/80 hover:text-foreground",
"dark:hover:bg-ink-6 dark:active:bg-ink-6",
"active:border-transparent active:bg-fill-strong/80 active:text-foreground",
"data-active:border-transparent data-active:bg-layer-panel",
"dark:data-active:bg-layer-card",
"data-active:text-foreground-strong",
"data-active:shadow-raft-sm data-active:ring-1 data-active:ring-line-muted/45",
"dark:data-active:ring-transparent",
"data-popup-open:border-transparent data-popup-open:bg-layer-panel",
"dark:data-popup-open:bg-layer-card",
"data-popup-open:shadow-raft-xs data-popup-open:ring-1 data-popup-open:ring-line-muted/30",
"dark:data-popup-open:ring-transparent"
],
sidebarItemTitle: "font-[450] text-foreground-muted",
sidebarItemIcon: "size-4.5 text-foreground-icon [&_svg]:stroke-[1.5]",
sidebarItemChannelIcon: "size-3 text-foreground-icon [&_svg]:size-3.5",
sidebarItemSubtitle: "text-ink-30",
sidebarItemMeta: "font-sans text-xs font-medium leading-none normal-nums text-foreground-icon",
sidebarItemStatus: ["pointer-events-none absolute top-1/2 right-[calc(100%+2px)] -translate-y-1/2"],
sidebarItemIndicator: ["rounded-sm border-0", "text-[10px] font-normal leading-none tracking-normal"],
sidebarItemMetaIcon: "text-foreground-icon",
sidebarItemCount: ["h-4 min-w-4 items-center justify-center rounded-sm px-1 py-0", "text-[10px] font-normal leading-none tabular-nums tracking-normal"]
}
},
stacked: {
false: { sidebarItemContent: ["min-w-0 flex flex-1 items-baseline gap-1 text-left"] },
true: { sidebarItemContent: ["min-w-0 flex-1 text-left"] }
}
},
defaultVariants: { stacked: false }
});
//#endregion
//#region src/components/sidebar/sidebar-item.tsx
function SidebarItemRoot({ active = false, className, render, ...props }) {
return useRender({
render: render ?? /* @__PURE__ */ jsx(Button, {}),
props: mergeProps({
type: "button",
"data-slot": "sidebar-item",
"data-active": active ? "true" : void 0,
className
}, props)
});
}
function SidebarItem({ className, ...props }) {
const { sidebarItem } = sidebarItemRecipe({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx(SidebarItemRoot, {
className: sidebarItem({ className }),
...props
});
}
function SidebarItemIcon({ className, render, ...props }) {
const { sidebarItemIcon } = sidebarItemRecipe({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "sidebar-item-icon",
className: sidebarItemIcon({ className })
}, props)
});
}
function SidebarItemChannelIcon({ className, render, ...props }) {
const { sidebarItemChannelIcon } = sidebarItemRecipe({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "sidebar-item-channel-icon",
className: sidebarItemChannelIcon({ className })
}, props)
});
}
function SidebarItemContent({ className, render, stacked, ...props }) {
const { sidebarItemContent } = sidebarItemRecipe();
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "sidebar-item-content",
className: sidebarItemContent({
className,
stacked
})
}, props)
});
}
function SidebarItemTitle({ className, render, ...props }) {
const { sidebarItemTitle } = sidebarItemRecipe({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "sidebar-item-title",
className: sidebarItemTitle({ className })
}, props)
});
}
function SidebarItemSubtitle({ className, render, ...props }) {
const { sidebarItemSubtitle } = sidebarItemRecipe({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "sidebar-item-subtitle",
className: sidebarItemSubtitle({ className })
}, props)
});
}
function SidebarItemMeta({ className, render, ...props }) {
const { sidebarItemMeta } = sidebarItemRecipe({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "sidebar-item-meta",
className: sidebarItemMeta({ className })
}, props)
});
}
function SidebarItemStatus({ className, render, ...props }) {
const { sidebarItemStatus } = sidebarItemRecipe({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "sidebar-item-status",
className: sidebarItemStatus({ className })
}, props)
});
}
function SidebarItemIndicator({ appearance = "solid", className, uppercase = false, variant = "primary", ...props }) {
const { sidebarItemIndicator } = sidebarItemRecipe({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx(Badge, {
"data-slot": "sidebar-item-indicator",
appearance,
uppercase,
variant,
className: sidebarItemIndicator({ className }),
...props
});
}
function SidebarItemMetaIcon({ className, render, ...props }) {
const { sidebarItemMetaIcon } = sidebarItemRecipe({ theme: useThemeFamily() });
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "sidebar-item-meta-icon",
className: sidebarItemMetaIcon({ className })
}, props)
});
}
function SidebarItemAside({ className, render, ...props }) {
const { sidebarItemAside } = sidebarItemRecipe();
return useRender({
defaultTagName: "span",
render,
props: mergeProps({
"data-slot": "sidebar-item-aside",
className: sidebarItemAside({ className })
}, props)
});
}
function SidebarItemCount({ appearance = "solid", className, uppercase = false, variant = "primary", ...props }) {
const { sidebarItemCount } = sidebarItemRecipe({ theme: useThemeFamily() });
return /* @__PURE__ */ jsx(Badge, {
"data-slot": "sidebar-item-count",
appearance,
uppercase,
variant,
className: sidebarItemCount({ className }),
...props
});
}
//#endregion
//#region src/components/panel/panel.recipe.ts
const panel = tv$1({
slots: {
root: ["[--panel-footer-clearance:10rem]", "text-foreground-strong"],
header: ["[@media(max-height:600px)]:h-12"],
body: ["relative min-h-0 flex-1 overflow-hidden"],
scrollViewport: ["h-full min-h-0 overflow-y-auto overscroll-contain", "[overflow-anchor:auto] [-webkit-overflow-scrolling:touch]"],
scrollContent: ["min-h-full"],
section: ["border-t border-ink-10 px-5 py-4"],
footer: ["relative flex shrink-0 items-center px-3 max-md:px-1.5 pt-3", "pb-[calc(env(safe-area-inset-bottom)+0.75rem)] max-md:pb-[calc(env(safe-area-inset-bottom)+0.375rem)]"]
},
variants: {
theme: {
brutal: {},
elegant: {
scrollContent: "md:pb-[var(--panel-footer-clearance)]",
footer: [
"z-40 md:absolute md:inset-x-0 md:bottom-0",
"max-md:px-2.5 md:px-7 max-md:pt-0 md:pt-0",
"max-md:pb-[calc(env(safe-area-inset-bottom)+0.625rem)] md:pb-3",
"border-t-0 bg-transparent",
"before:pointer-events-none before:absolute before:inset-x-0 before:bottom-0 before:z-0 before:h-36",
"before:bg-[linear-gradient(to_bottom,transparent,var(--layer-panel))] before:backdrop-blur-[4px]",
"dark:before:bg-[linear-gradient(to_bottom,transparent,oklch(0_0_0/0.16))] dark:before:backdrop-blur-[2px]",
"before:mask-[linear-gradient(to_top,black_50%,transparent),linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]",
"before:[-webkit-mask-image:linear-gradient(to_top,black_50%,transparent),linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]",
"before:mask-intersect before:[-webkit-mask-composite:source-in]",
"before:content-[''] *:relative *:z-10"
]
}
},
edge: {
inset: { root: "group/panel-frame" },
attached: { root: "group/panel-frame" }
}
},
compoundVariants: [{
theme: "brutal",
edge: "attached",
class: { root: ["border-l-2 border-black", "*:data-panel-frame-header:border-b-2 *:data-panel-frame-header:border-black"] }
}, {
theme: "elegant",
edge: "attached",
class: { root: ["border-l border-line-muted", "*:data-panel-frame-header:border-b *:data-panel-frame-header:border-line-muted"] }
}]
});
//#endregion
//#region src/components/panel/panel.tsx
f