@epilot/spark-ui 0.10.0

package/dist/components/list.cjs

@@ -0,0 +1,132 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_components_skeleton = require("./skeleton.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _base_ui_react_use_render = require("@base-ui/react/use-render");
+let cnfast = require("cnfast");
+//#region src/components/list.tsx
+const ListItemContext = react.createContext({ recent: false });
+const ListItemColumnContext = react.createContext({ isEnd: false });
+function List({ className, variant = "soft", ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		role: "list",
+		"data-slot": "list",
+		"data-variant": variant,
+		className: (0, cnfast.cn)("group/list m-0 list-none p-0", "data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*0.5)]", "data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-[calc(var(--spark-layout-gap)*0.5)]", className),
+		...props
+	});
+}
+function ListItem({ className, children, recent, selected, skeleton, render, ...props }) {
+	const interactive = !skeleton && render != null;
+	const recentCtx = react.useMemo(() => ({ recent: recent ?? false }), [recent]);
+	const row = (0, _base_ui_react_use_render.useRender)({
+		defaultTagName: "div",
+		render: skeleton ? void 0 : render,
+		props: {
+			"data-slot": "list-item-row",
+			"aria-hidden": skeleton ? true : void 0,
+			className: (0, cnfast.cn)("flex min-h-[2.75rem] w-full items-center gap-4 rounded-[inherit] px-4 py-3 text-left no-underline", !skeleton && selected && "bg-spark-a3", interactive && [
+				"group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none",
+				"hover:bg-spark-a3 focus-visible:bg-spark-a3",
+				"focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+				"disabled:pointer-events-none disabled:opacity-50"
+			]),
+			children: skeleton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItemSkeleton, {}) : children
+		}
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+		"data-slot": "list-item",
+		className: (0, cnfast.cn)("relative has-focus-visible:z-10", "group-data-[variant=soft]/list:rounded-md group-data-[variant=soft]/list:bg-gray-a2 dark:group-data-[variant=soft]/list:bg-gray-a3", "group-data-[variant=surface]/list:bg-gray-2", "group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:border-gray-a6 group-data-[variant=surface]/list:first:rounded-t-md group-data-[variant=surface]/list:last:rounded-b-md group-data-[variant=surface]/list:last:border-b", "group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:border-gray-a6 group-data-[variant=outline]/list:first:rounded-t-md group-data-[variant=outline]/list:last:rounded-b-md group-data-[variant=outline]/list:last:border-b", className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItemContext.Provider, {
+			value: recentCtx,
+			children: row
+		})
+	});
+}
+function ListItemSkeleton() {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_skeleton.Skeleton, { className: "size-10 shrink-0 rounded-full" }),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_skeleton.Skeleton, { className: "h-3.5 w-1/3" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_skeleton.Skeleton, { className: "h-3.5 w-2/3" })]
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: "flex min-w-0 flex-1 flex-col items-end gap-2",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_skeleton.Skeleton, { className: "h-3.5 w-1/4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_skeleton.Skeleton, { className: "h-3.5 w-1/2" })]
+		})
+	] });
+}
+function ListItemLeading({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "list-item-leading",
+		className: (0, cnfast.cn)("flex shrink-0 items-center", className),
+		...props
+	});
+}
+function ListItemContent({ className, align = "start", ...props }) {
+	const columnCtx = react.useMemo(() => ({ isEnd: align === "end" }), [align]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListItemColumnContext.Provider, {
+		value: columnCtx,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			"data-slot": "list-item-content",
+			className: (0, cnfast.cn)("flex min-w-0 flex-1 flex-col gap-1", align === "end" ? "items-end text-right" : "items-start text-left", className),
+			...props
+		})
+	});
+}
+function ListItemPreline({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "list-item-preline",
+		className: (0, cnfast.cn)("block w-full truncate text-sm text-gray-11", className),
+		...props
+	});
+}
+function ListItemTitle({ className, children, ...props }) {
+	const { recent } = react.useContext(ListItemContext);
+	const { isEnd } = react.useContext(ListItemColumnContext);
+	const showDot = recent && !isEnd;
+	const title = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "list-item-title",
+		className: (0, cnfast.cn)(showDot ? "min-w-0 truncate" : "block w-full truncate", "text-base font-bold text-gray-12", className),
+		...props,
+		children
+	});
+	if (!showDot) return title;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+		className: "flex w-full items-center gap-2",
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			"data-slot": "list-item-indicator",
+			className: "size-2 shrink-0 rounded-full bg-spark-9"
+		}), title]
+	});
+}
+function ListItemSubline({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "list-item-subline",
+		className: (0, cnfast.cn)("block w-full truncate text-sm text-gray-11", className),
+		...props
+	});
+}
+function ListItemTrailing({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"data-slot": "list-item-trailing",
+		className: (0, cnfast.cn)("flex shrink-0 items-center text-gray-11", "transition-colors duration-150 motion-reduce:transition-none", "group-hover/row:text-spark-a11 group-focus-visible/row:text-spark-a11", className),
+		...props
+	});
+}
+//#endregion
+exports.List = List;
+exports.ListItem = ListItem;
+exports.ListItemContent = ListItemContent;
+exports.ListItemLeading = ListItemLeading;
+exports.ListItemPreline = ListItemPreline;
+exports.ListItemSubline = ListItemSubline;
+exports.ListItemTitle = ListItemTitle;
+exports.ListItemTrailing = ListItemTrailing;
+
+//# sourceMappingURL=list.cjs.map

package/dist/components/list.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.cjs","names":["React","Skeleton"],"sources":["../../src/components/list.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype ListVariant = 'soft' | 'surface' | 'outline' | 'ghost'\n\n// ListItem publishes `recent` so ListItemTitle can render the inline recency dot; the\n// column context lets the title show it only on the primary (start) column, never the\n// value column of a two-column row.\nconst ListItemContext = React.createContext<{ recent: boolean }>({\n  recent: false,\n})\nconst ListItemColumnContext = React.createContext<{ isEnd: boolean }>({\n  isEnd: false,\n})\n\ninterface ListProps extends React.ComponentProps<'ul'> {\n  /** A prop, not the ambient `data-style` knob — that would cascade into row content. */\n  variant?: ListVariant\n}\n\nfunction List({ className, variant = 'soft', ...props }: ListProps) {\n  return (\n    <ul\n      // role=list keeps list semantics even under list-style:none (Safari drops them).\n      role=\"list\"\n      data-slot=\"list\"\n      // group/list + data-variant drive every item's per-variant chrome (below).\n      data-variant={variant}\n      className={cn(\n        'group/list m-0 list-none p-0',\n        // soft = separate cards → stack with a small gap (the gap IS the divider). ghost\n        // shares that same gap for spacing but no fill/border (see ListItem's chrome\n        // block, which has no ghost selector). surface/outline glue rows into one panel.\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*0.5)]',\n        'data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-[calc(var(--spark-layout-gap)*0.5)]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemProps extends React.ComponentProps<'li'> {\n  /** The \"recently changed\" accent dot. */\n  recent?: boolean\n  /** Persistent accent-tint (e.g. the active document). */\n  selected?: boolean\n  /** Loading placeholder (Figma `skeleton=true`). */\n  skeleton?: boolean\n  /**\n   * Base UI polymorphism for the inner row. Pass `<a href/>` or `<button/>` to make\n   * the row interactive (accent-on-hover/focus, cursor, focus ring). Omit → static row.\n   */\n  render?: useRender.RenderProp\n}\n\nfunction ListItem({\n  className,\n  children,\n  recent,\n  selected,\n  skeleton,\n  render,\n  ...props\n}: ListItemProps) {\n  // Skeleton rows are decorative placeholders — never render as a real <a>/<button>. An\n  // aria-hidden anchor would still be focusable (WCAG 4.1.2), so skeleton forces a plain,\n  // non-interactive <div> regardless of `render`.\n  const interactive = !skeleton && render != null\n\n  const recentCtx = React.useMemo(() => ({ recent: recent ?? false }), [recent])\n\n  const row = useRender({\n    defaultTagName: 'div',\n    render: skeleton ? undefined : render,\n    props: {\n      'data-slot': 'list-item-row',\n      // skeleton is a decorative placeholder → keep it out of the a11y tree.\n      'aria-hidden': skeleton ? true : undefined,\n      className: cn(\n        // row layout from Figma 2217-1667; min-h is a HARD 44px floor (WCAG 2.5.5),\n        // py/gap/text still scale past it via the spacing/scaling knobs. no-underline\n        // resets the default <a> decoration when the row renders as a link.\n        'flex min-h-[2.75rem] w-full items-center gap-4 rounded-[inherit] px-4 py-3 text-left no-underline',\n        !skeleton && selected && 'bg-spark-a3',\n        interactive && [\n          'group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none',\n          // neutral at rest → subtle accent tint on hover/focus (the affordance goes\n          // accent too, in ListItemTrailing; title + leading stay neutral).\n          'hover:bg-spark-a3 focus-visible:bg-spark-a3',\n          'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'disabled:pointer-events-none disabled:opacity-50',\n        ],\n      ),\n      children: skeleton ? <ListItemSkeleton /> : children,\n    },\n  })\n\n  return (\n    <li\n      data-slot=\"list-item\"\n      className={cn(\n        'relative has-focus-visible:z-10',\n        'group-data-[variant=soft]/list:rounded-md group-data-[variant=soft]/list:bg-gray-a2 dark:group-data-[variant=soft]/list:bg-gray-a3',\n        'group-data-[variant=surface]/list:bg-gray-2',\n        'group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:border-gray-a6 group-data-[variant=surface]/list:first:rounded-t-md group-data-[variant=surface]/list:last:rounded-b-md group-data-[variant=surface]/list:last:border-b',\n        'group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:border-gray-a6 group-data-[variant=outline]/list:first:rounded-t-md group-data-[variant=outline]/list:last:rounded-b-md group-data-[variant=outline]/list:last:border-b',\n        className,\n      )}\n      {...props}\n    >\n      <ListItemContext.Provider value={recentCtx}>\n        {row}\n      </ListItemContext.Provider>\n    </li>\n  )\n}\n\nfunction ListItemSkeleton() {\n  // Compose the shared Skeleton primitive so the placeholder matches every other skeleton\n  // (token + radius + animation + motion-reduce).\n  return (\n    <>\n      <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <Skeleton className=\"h-3.5 w-1/3\" />\n        <Skeleton className=\"h-3.5 w-2/3\" />\n      </div>\n      <div className=\"flex min-w-0 flex-1 flex-col items-end gap-2\">\n        <Skeleton className=\"h-3.5 w-1/4\" />\n        <Skeleton className=\"h-3.5 w-1/2\" />\n      </div>\n    </>\n  )\n}\n\nfunction ListItemLeading({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-leading\"\n      className={cn('flex shrink-0 items-center', className)}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemContentProps extends React.ComponentProps<'div'> {\n  /** `end` right-aligns the column (the value column). */\n  align?: 'start' | 'end'\n}\n\nfunction ListItemContent({\n  className,\n  align = 'start',\n  ...props\n}: ListItemContentProps) {\n  const columnCtx = React.useMemo(() => ({ isEnd: align === 'end' }), [align])\n  return (\n    <ListItemColumnContext.Provider value={columnCtx}>\n      <div\n        data-slot=\"list-item-content\"\n        className={cn(\n          'flex min-w-0 flex-1 flex-col gap-1',\n          align === 'end' ? 'items-end text-right' : 'items-start text-left',\n          className,\n        )}\n        {...props}\n      />\n    </ListItemColumnContext.Provider>\n  )\n}\n\nfunction ListItemPreline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-preline\"\n      className={cn('block w-full truncate text-sm text-gray-11', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'span'>) {\n  const { recent } = React.useContext(ListItemContext)\n  const { isEnd } = React.useContext(ListItemColumnContext)\n  // recency dot sits inline, immediately left of the title (Figma 1310-977) — only on the\n  // primary (start) column, so a two-column value row's value never carries it.\n  const showDot = recent && !isEnd\n\n  // className/{...props} always land on THIS span (the one that truncates), so a caller's\n  // override (e.g. `title`, `line-clamp-2 whitespace-normal`) behaves identically whether\n  // or not the dot renders — only the wrapping structure differs below.\n  const title = (\n    <span\n      data-slot=\"list-item-title\"\n      className={cn(\n        showDot ? 'min-w-0 truncate' : 'block w-full truncate',\n        'text-base font-bold text-gray-12',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n\n  if (!showDot) {\n    // No dot: stay a plain block so the column's text alignment (e.g. an end column's\n    // text-right) governs the title directly.\n    return title\n  }\n\n  return (\n    <span className=\"flex w-full items-center gap-2\">\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"list-item-indicator\"\n        className=\"size-2 shrink-0 rounded-full bg-spark-9\"\n      />\n      {title}\n    </span>\n  )\n}\n\nfunction ListItemSubline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-subline\"\n      className={cn('block w-full truncate text-sm text-gray-11', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTrailing({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-trailing\"\n      className={cn(\n        'flex shrink-0 items-center text-gray-11',\n        // interactive rows tint the affordance accent on hover/focus (group/row is set on\n        // the interactive inner row; absent on static rows, so this simply never fires).\n        // Relies on the child reading currentColor (MaterialSymbol does) — the colour-\n        // independent Icon component hardcodes its own ink and won't pick this up; use\n        // MaterialSymbol here, not Icon.\n        'transition-colors duration-150 motion-reduce:transition-none',\n        'group-hover/row:text-spark-a11 group-focus-visible/row:text-spark-a11',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  List,\n  ListItem,\n  ListItemContent,\n  ListItemLeading,\n  ListItemPreline,\n  ListItemSubline,\n  ListItemTitle,\n  ListItemTrailing,\n}\nexport type { ListProps, ListItemProps, ListItemContentProps, ListVariant }\n"],"mappings":"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"}

package/dist/components/list.d.cts

@@ -0,0 +1,71 @@
+"use client";
+
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/list.d.ts
+type ListVariant = 'soft' | 'surface' | 'outline' | 'ghost';
+interface ListProps extends React$1.ComponentProps<'ul'> {
+  /** A prop, not the ambient `data-style` knob — that would cascade into row content. */
+  variant?: ListVariant;
+}
+declare function List({
+  className,
+  variant,
+  ...props
+}: ListProps): import("react/jsx-runtime").JSX.Element;
+interface ListItemProps extends React$1.ComponentProps<'li'> {
+  /** The "recently changed" accent dot. */
+  recent?: boolean;
+  /** Persistent accent-tint (e.g. the active document). */
+  selected?: boolean;
+  /** Loading placeholder (Figma `skeleton=true`). */
+  skeleton?: boolean;
+  /**
+   * Base UI polymorphism for the inner row. Pass `<a href/>` or `<button/>` to make
+   * the row interactive (accent-on-hover/focus, cursor, focus ring). Omit → static row.
+   */
+  render?: useRender.RenderProp;
+}
+declare function ListItem({
+  className,
+  children,
+  recent,
+  selected,
+  skeleton,
+  render,
+  ...props
+}: ListItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ListItemLeading({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+interface ListItemContentProps extends React$1.ComponentProps<'div'> {
+  /** `end` right-aligns the column (the value column). */
+  align?: 'start' | 'end';
+}
+declare function ListItemContent({
+  className,
+  align,
+  ...props
+}: ListItemContentProps): import("react/jsx-runtime").JSX.Element;
+declare function ListItemPreline({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function ListItemTitle({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function ListItemSubline({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function ListItemTrailing({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { List, ListItem, ListItemContent, type ListItemContentProps, ListItemLeading, ListItemPreline, type ListItemProps, ListItemSubline, ListItemTitle, ListItemTrailing, type ListProps, type ListVariant };
+//# sourceMappingURL=list.d.cts.map

package/dist/components/list.d.ts

@@ -0,0 +1,71 @@
+"use client";
+
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/list.d.ts
+type ListVariant = 'soft' | 'surface' | 'outline' | 'ghost';
+interface ListProps extends React$1.ComponentProps<'ul'> {
+  /** A prop, not the ambient `data-style` knob — that would cascade into row content. */
+  variant?: ListVariant;
+}
+declare function List({
+  className,
+  variant,
+  ...props
+}: ListProps): import("react/jsx-runtime").JSX.Element;
+interface ListItemProps extends React$1.ComponentProps<'li'> {
+  /** The "recently changed" accent dot. */
+  recent?: boolean;
+  /** Persistent accent-tint (e.g. the active document). */
+  selected?: boolean;
+  /** Loading placeholder (Figma `skeleton=true`). */
+  skeleton?: boolean;
+  /**
+   * Base UI polymorphism for the inner row. Pass `<a href/>` or `<button/>` to make
+   * the row interactive (accent-on-hover/focus, cursor, focus ring). Omit → static row.
+   */
+  render?: useRender.RenderProp;
+}
+declare function ListItem({
+  className,
+  children,
+  recent,
+  selected,
+  skeleton,
+  render,
+  ...props
+}: ListItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ListItemLeading({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+interface ListItemContentProps extends React$1.ComponentProps<'div'> {
+  /** `end` right-aligns the column (the value column). */
+  align?: 'start' | 'end';
+}
+declare function ListItemContent({
+  className,
+  align,
+  ...props
+}: ListItemContentProps): import("react/jsx-runtime").JSX.Element;
+declare function ListItemPreline({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function ListItemTitle({
+  className,
+  children,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function ListItemSubline({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function ListItemTrailing({
+  className,
+  ...props
+}: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { List, ListItem, ListItemContent, type ListItemContentProps, ListItemLeading, ListItemPreline, type ListItemProps, ListItemSubline, ListItemTitle, ListItemTrailing, type ListProps, type ListVariant };
+//# sourceMappingURL=list.d.ts.map

package/dist/components/list.js

@@ -0,0 +1,122 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import { Skeleton } from "./skeleton.js";
+import * as React$1 from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/list.tsx
+const ListItemContext = React$1.createContext({ recent: false });
+const ListItemColumnContext = React$1.createContext({ isEnd: false });
+function List({ className, variant = "soft", ...props }) {
+	return /* @__PURE__ */ jsx("ul", {
+		role: "list",
+		"data-slot": "list",
+		"data-variant": variant,
+		className: cn("group/list m-0 list-none p-0", "data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*0.5)]", "data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-[calc(var(--spark-layout-gap)*0.5)]", className),
+		...props
+	});
+}
+function ListItem({ className, children, recent, selected, skeleton, render, ...props }) {
+	const interactive = !skeleton && render != null;
+	const recentCtx = React$1.useMemo(() => ({ recent: recent ?? false }), [recent]);
+	const row = useRender({
+		defaultTagName: "div",
+		render: skeleton ? void 0 : render,
+		props: {
+			"data-slot": "list-item-row",
+			"aria-hidden": skeleton ? true : void 0,
+			className: cn("flex min-h-[2.75rem] w-full items-center gap-4 rounded-[inherit] px-4 py-3 text-left no-underline", !skeleton && selected && "bg-spark-a3", interactive && [
+				"group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none",
+				"hover:bg-spark-a3 focus-visible:bg-spark-a3",
+				"focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+				"disabled:pointer-events-none disabled:opacity-50"
+			]),
+			children: skeleton ? /* @__PURE__ */ jsx(ListItemSkeleton, {}) : children
+		}
+	});
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "list-item",
+		className: cn("relative has-focus-visible:z-10", "group-data-[variant=soft]/list:rounded-md group-data-[variant=soft]/list:bg-gray-a2 dark:group-data-[variant=soft]/list:bg-gray-a3", "group-data-[variant=surface]/list:bg-gray-2", "group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:border-gray-a6 group-data-[variant=surface]/list:first:rounded-t-md group-data-[variant=surface]/list:last:rounded-b-md group-data-[variant=surface]/list:last:border-b", "group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:border-gray-a6 group-data-[variant=outline]/list:first:rounded-t-md group-data-[variant=outline]/list:last:rounded-b-md group-data-[variant=outline]/list:last:border-b", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ListItemContext.Provider, {
+			value: recentCtx,
+			children: row
+		})
+	});
+}
+function ListItemSkeleton() {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(Skeleton, { className: "size-10 shrink-0 rounded-full" }),
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-1/3" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-2/3" })]
+		}),
+		/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col items-end gap-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-1/4" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3.5 w-1/2" })]
+		})
+	] });
+}
+function ListItemLeading({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "list-item-leading",
+		className: cn("flex shrink-0 items-center", className),
+		...props
+	});
+}
+function ListItemContent({ className, align = "start", ...props }) {
+	const columnCtx = React$1.useMemo(() => ({ isEnd: align === "end" }), [align]);
+	return /* @__PURE__ */ jsx(ListItemColumnContext.Provider, {
+		value: columnCtx,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "list-item-content",
+			className: cn("flex min-w-0 flex-1 flex-col gap-1", align === "end" ? "items-end text-right" : "items-start text-left", className),
+			...props
+		})
+	});
+}
+function ListItemPreline({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "list-item-preline",
+		className: cn("block w-full truncate text-sm text-gray-11", className),
+		...props
+	});
+}
+function ListItemTitle({ className, children, ...props }) {
+	const { recent } = React$1.useContext(ListItemContext);
+	const { isEnd } = React$1.useContext(ListItemColumnContext);
+	const showDot = recent && !isEnd;
+	const title = /* @__PURE__ */ jsx("span", {
+		"data-slot": "list-item-title",
+		className: cn(showDot ? "min-w-0 truncate" : "block w-full truncate", "text-base font-bold text-gray-12", className),
+		...props,
+		children
+	});
+	if (!showDot) return title;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "flex w-full items-center gap-2",
+		children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "list-item-indicator",
+			className: "size-2 shrink-0 rounded-full bg-spark-9"
+		}), title]
+	});
+}
+function ListItemSubline({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "list-item-subline",
+		className: cn("block w-full truncate text-sm text-gray-11", className),
+		...props
+	});
+}
+function ListItemTrailing({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "list-item-trailing",
+		className: cn("flex shrink-0 items-center text-gray-11", "transition-colors duration-150 motion-reduce:transition-none", "group-hover/row:text-spark-a11 group-focus-visible/row:text-spark-a11", className),
+		...props
+	});
+}
+//#endregion
+export { List, ListItem, ListItemContent, ListItemLeading, ListItemPreline, ListItemSubline, ListItemTitle, ListItemTrailing };
+
+//# sourceMappingURL=list.js.map

package/dist/components/list.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.js","names":["React"],"sources":["../../src/components/list.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype ListVariant = 'soft' | 'surface' | 'outline' | 'ghost'\n\n// ListItem publishes `recent` so ListItemTitle can render the inline recency dot; the\n// column context lets the title show it only on the primary (start) column, never the\n// value column of a two-column row.\nconst ListItemContext = React.createContext<{ recent: boolean }>({\n  recent: false,\n})\nconst ListItemColumnContext = React.createContext<{ isEnd: boolean }>({\n  isEnd: false,\n})\n\ninterface ListProps extends React.ComponentProps<'ul'> {\n  /** A prop, not the ambient `data-style` knob — that would cascade into row content. */\n  variant?: ListVariant\n}\n\nfunction List({ className, variant = 'soft', ...props }: ListProps) {\n  return (\n    <ul\n      // role=list keeps list semantics even under list-style:none (Safari drops them).\n      role=\"list\"\n      data-slot=\"list\"\n      // group/list + data-variant drive every item's per-variant chrome (below).\n      data-variant={variant}\n      className={cn(\n        'group/list m-0 list-none p-0',\n        // soft = separate cards → stack with a small gap (the gap IS the divider). ghost\n        // shares that same gap for spacing but no fill/border (see ListItem's chrome\n        // block, which has no ghost selector). surface/outline glue rows into one panel.\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*0.5)]',\n        'data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-[calc(var(--spark-layout-gap)*0.5)]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemProps extends React.ComponentProps<'li'> {\n  /** The \"recently changed\" accent dot. */\n  recent?: boolean\n  /** Persistent accent-tint (e.g. the active document). */\n  selected?: boolean\n  /** Loading placeholder (Figma `skeleton=true`). */\n  skeleton?: boolean\n  /**\n   * Base UI polymorphism for the inner row. Pass `<a href/>` or `<button/>` to make\n   * the row interactive (accent-on-hover/focus, cursor, focus ring). Omit → static row.\n   */\n  render?: useRender.RenderProp\n}\n\nfunction ListItem({\n  className,\n  children,\n  recent,\n  selected,\n  skeleton,\n  render,\n  ...props\n}: ListItemProps) {\n  // Skeleton rows are decorative placeholders — never render as a real <a>/<button>. An\n  // aria-hidden anchor would still be focusable (WCAG 4.1.2), so skeleton forces a plain,\n  // non-interactive <div> regardless of `render`.\n  const interactive = !skeleton && render != null\n\n  const recentCtx = React.useMemo(() => ({ recent: recent ?? false }), [recent])\n\n  const row = useRender({\n    defaultTagName: 'div',\n    render: skeleton ? undefined : render,\n    props: {\n      'data-slot': 'list-item-row',\n      // skeleton is a decorative placeholder → keep it out of the a11y tree.\n      'aria-hidden': skeleton ? true : undefined,\n      className: cn(\n        // row layout from Figma 2217-1667; min-h is a HARD 44px floor (WCAG 2.5.5),\n        // py/gap/text still scale past it via the spacing/scaling knobs. no-underline\n        // resets the default <a> decoration when the row renders as a link.\n        'flex min-h-[2.75rem] w-full items-center gap-4 rounded-[inherit] px-4 py-3 text-left no-underline',\n        !skeleton && selected && 'bg-spark-a3',\n        interactive && [\n          'group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none',\n          // neutral at rest → subtle accent tint on hover/focus (the affordance goes\n          // accent too, in ListItemTrailing; title + leading stay neutral).\n          'hover:bg-spark-a3 focus-visible:bg-spark-a3',\n          'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'disabled:pointer-events-none disabled:opacity-50',\n        ],\n      ),\n      children: skeleton ? <ListItemSkeleton /> : children,\n    },\n  })\n\n  return (\n    <li\n      data-slot=\"list-item\"\n      className={cn(\n        'relative has-focus-visible:z-10',\n        'group-data-[variant=soft]/list:rounded-md group-data-[variant=soft]/list:bg-gray-a2 dark:group-data-[variant=soft]/list:bg-gray-a3',\n        'group-data-[variant=surface]/list:bg-gray-2',\n        'group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:border-gray-a6 group-data-[variant=surface]/list:first:rounded-t-md group-data-[variant=surface]/list:last:rounded-b-md group-data-[variant=surface]/list:last:border-b',\n        'group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:border-gray-a6 group-data-[variant=outline]/list:first:rounded-t-md group-data-[variant=outline]/list:last:rounded-b-md group-data-[variant=outline]/list:last:border-b',\n        className,\n      )}\n      {...props}\n    >\n      <ListItemContext.Provider value={recentCtx}>\n        {row}\n      </ListItemContext.Provider>\n    </li>\n  )\n}\n\nfunction ListItemSkeleton() {\n  // Compose the shared Skeleton primitive so the placeholder matches every other skeleton\n  // (token + radius + animation + motion-reduce).\n  return (\n    <>\n      <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <Skeleton className=\"h-3.5 w-1/3\" />\n        <Skeleton className=\"h-3.5 w-2/3\" />\n      </div>\n      <div className=\"flex min-w-0 flex-1 flex-col items-end gap-2\">\n        <Skeleton className=\"h-3.5 w-1/4\" />\n        <Skeleton className=\"h-3.5 w-1/2\" />\n      </div>\n    </>\n  )\n}\n\nfunction ListItemLeading({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-leading\"\n      className={cn('flex shrink-0 items-center', className)}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemContentProps extends React.ComponentProps<'div'> {\n  /** `end` right-aligns the column (the value column). */\n  align?: 'start' | 'end'\n}\n\nfunction ListItemContent({\n  className,\n  align = 'start',\n  ...props\n}: ListItemContentProps) {\n  const columnCtx = React.useMemo(() => ({ isEnd: align === 'end' }), [align])\n  return (\n    <ListItemColumnContext.Provider value={columnCtx}>\n      <div\n        data-slot=\"list-item-content\"\n        className={cn(\n          'flex min-w-0 flex-1 flex-col gap-1',\n          align === 'end' ? 'items-end text-right' : 'items-start text-left',\n          className,\n        )}\n        {...props}\n      />\n    </ListItemColumnContext.Provider>\n  )\n}\n\nfunction ListItemPreline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-preline\"\n      className={cn('block w-full truncate text-sm text-gray-11', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'span'>) {\n  const { recent } = React.useContext(ListItemContext)\n  const { isEnd } = React.useContext(ListItemColumnContext)\n  // recency dot sits inline, immediately left of the title (Figma 1310-977) — only on the\n  // primary (start) column, so a two-column value row's value never carries it.\n  const showDot = recent && !isEnd\n\n  // className/{...props} always land on THIS span (the one that truncates), so a caller's\n  // override (e.g. `title`, `line-clamp-2 whitespace-normal`) behaves identically whether\n  // or not the dot renders — only the wrapping structure differs below.\n  const title = (\n    <span\n      data-slot=\"list-item-title\"\n      className={cn(\n        showDot ? 'min-w-0 truncate' : 'block w-full truncate',\n        'text-base font-bold text-gray-12',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n\n  if (!showDot) {\n    // No dot: stay a plain block so the column's text alignment (e.g. an end column's\n    // text-right) governs the title directly.\n    return title\n  }\n\n  return (\n    <span className=\"flex w-full items-center gap-2\">\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"list-item-indicator\"\n        className=\"size-2 shrink-0 rounded-full bg-spark-9\"\n      />\n      {title}\n    </span>\n  )\n}\n\nfunction ListItemSubline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-subline\"\n      className={cn('block w-full truncate text-sm text-gray-11', className)}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTrailing({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-trailing\"\n      className={cn(\n        'flex shrink-0 items-center text-gray-11',\n        // interactive rows tint the affordance accent on hover/focus (group/row is set on\n        // the interactive inner row; absent on static rows, so this simply never fires).\n        // Relies on the child reading currentColor (MaterialSymbol does) — the colour-\n        // independent Icon component hardcodes its own ink and won't pick this up; use\n        // MaterialSymbol here, not Icon.\n        'transition-colors duration-150 motion-reduce:transition-none',\n        'group-hover/row:text-spark-a11 group-focus-visible/row:text-spark-a11',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  List,\n  ListItem,\n  ListItemContent,\n  ListItemLeading,\n  ListItemPreline,\n  ListItemSubline,\n  ListItemTitle,\n  ListItemTrailing,\n}\nexport type { ListProps, ListItemProps, ListItemContentProps, ListVariant }\n"],"mappings":"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"}

package/dist/components/marker.cjs

@@ -0,0 +1,52 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_chunk = require("../chunk-DY84GLCh.cjs");
+let react = require("react");
+react = require_chunk.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+let _base_ui_react_merge_props = require("@base-ui/react/merge-props");
+let _base_ui_react_use_render = require("@base-ui/react/use-render");
+let cnfast = require("cnfast");
+//#region src/components/marker.tsx
+const markerVariants = (0, class_variance_authority.cva)("group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-gray-light [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-gray", { variants: { variant: {
+	default: "",
+	separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-gray-a6 after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-gray-a6",
+	border: "border-b border-gray pb-2"
+} } });
+function Marker({ className, variant = "default", render, ...props }) {
+	return (0, _base_ui_react_use_render.useRender)({
+		defaultTagName: "div",
+		render,
+		props: (0, _base_ui_react_merge_props.mergeProps)({
+			"data-slot": "marker",
+			"data-variant": variant,
+			className: (0, cnfast.cn)(markerVariants({
+				variant,
+				className
+			}))
+		}, props)
+	});
+}
+function MarkerIcon({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "marker-icon",
+		"aria-hidden": "true",
+		className: (0, cnfast.cn)("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+function MarkerContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		"data-slot": "marker-content",
+		className: (0, cnfast.cn)("min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-gray", className),
+		...props
+	});
+}
+//#endregion
+exports.Marker = Marker;
+exports.MarkerContent = MarkerContent;
+exports.MarkerIcon = MarkerIcon;
+exports.markerVariants = markerVariants;
+
+//# sourceMappingURL=marker.cjs.map

package/dist/components/marker.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker.cjs","names":[],"sources":["../../src/components/marker.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst markerVariants = cva(\n  \"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-gray-light [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-gray\",\n  {\n    variants: {\n      variant: {\n        default: '',\n        separator:\n          'before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-gray-a6 after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-gray-a6',\n        border: 'border-b border-gray pb-2',\n      },\n    },\n  },\n)\n\n// `render` replaces radix `asChild` — pass an element (e.g. a <button> for a\n// clickable \"jump to\" marker) and Base UI's useRender merges props onto it.\nfunction Marker({\n  className,\n  variant = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof markerVariants>) {\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        'data-slot': 'marker',\n        'data-variant': variant,\n        className: cn(markerVariants({ variant, className })),\n      } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\nfunction MarkerIcon({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"marker-icon\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MarkerContent({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"marker-content\"\n      className={cn(\n        'min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-gray',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Marker, MarkerContent, MarkerIcon, markerVariants }\n"],"mappings":";;;;;;;;;;;AAMA,MAAM,kBAAA,GAAA,yBAAA,KACJ,gMACA,EACE,UAAU,EACR,SAAS;CACP,SAAS;CACT,WACE;CACF,QAAQ;AACV,EACF,EACF,CACF;AAIA,SAAS,OAAO,EACd,WACA,UAAU,WACV,QACA,GAAG,SACqE;CACxE,QAAA,GAAA,0BAAA,WAAiB;EACf,gBAAgB;EAChB;EACA,QAAA,GAAA,2BAAA,YACE;GACE,aAAa;GACb,gBAAgB;GAChB,YAAA,GAAA,OAAA,IAAc,eAAe;IAAE;IAAS;GAAU,CAAC,CAAC;EACtD,GACA,KACF;CACF,CAAC;AACH;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAuC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,YAAA,GAAA,OAAA,IACE,wDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAuC;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,4LACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/marker.d.cts

@@ -0,0 +1,27 @@
+"use client";
+
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/marker.d.ts
+declare const markerVariants: (props?: ({
+  variant?: "separator" | "default" | "border" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Marker({
+  className,
+  variant,
+  render,
+  ...props
+}: useRender.ComponentProps<'div'> & VariantProps<typeof markerVariants>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function MarkerIcon({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function MarkerContent({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Marker, MarkerContent, MarkerIcon, markerVariants };
+//# sourceMappingURL=marker.d.cts.map

package/dist/components/marker.d.ts

@@ -0,0 +1,27 @@
+"use client";
+
+import * as React$1 from "react";
+import { VariantProps } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+
+//#region src/components/marker.d.ts
+declare const markerVariants: (props?: ({
+  variant?: "separator" | "default" | "border" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Marker({
+  className,
+  variant,
+  render,
+  ...props
+}: useRender.ComponentProps<'div'> & VariantProps<typeof markerVariants>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function MarkerIcon({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function MarkerContent({
+  className,
+  ...props
+}: React$1.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { Marker, MarkerContent, MarkerIcon, markerVariants };
+//# sourceMappingURL=marker.d.ts.map

package/dist/components/marker.js

@@ -0,0 +1,46 @@
+"use client";
+import { cn } from "../utils/cn.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/marker.tsx
+const markerVariants = cva("group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-gray-light [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-gray", { variants: { variant: {
+	default: "",
+	separator: "before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-gray-a6 after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-gray-a6",
+	border: "border-b border-gray pb-2"
+} } });
+function Marker({ className, variant = "default", render, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps({
+			"data-slot": "marker",
+			"data-variant": variant,
+			className: cn(markerVariants({
+				variant,
+				className
+			}))
+		}, props)
+	});
+}
+function MarkerIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "marker-icon",
+		"aria-hidden": "true",
+		className: cn("size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+function MarkerContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "marker-content",
+		className: cn("min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-gray", className),
+		...props
+	});
+}
+//#endregion
+export { Marker, MarkerContent, MarkerIcon, markerVariants };
+
+//# sourceMappingURL=marker.js.map

package/dist/components/marker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marker.js","names":[],"sources":["../../src/components/marker.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props'\nimport { useRender } from '@base-ui/react/use-render'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst markerVariants = cva(\n  \"group/marker relative flex min-h-4 w-full items-center gap-2 text-left text-sm text-gray-light [&_svg:not([class*='size-'])]:size-4 [a]:underline [a]:underline-offset-3 [a]:hover:text-gray\",\n  {\n    variants: {\n      variant: {\n        default: '',\n        separator:\n          'before:mr-1 before:h-px before:min-w-0 before:flex-1 before:bg-gray-a6 after:ml-1 after:h-px after:min-w-0 after:flex-1 after:bg-gray-a6',\n        border: 'border-b border-gray pb-2',\n      },\n    },\n  },\n)\n\n// `render` replaces radix `asChild` — pass an element (e.g. a <button> for a\n// clickable \"jump to\" marker) and Base UI's useRender merges props onto it.\nfunction Marker({\n  className,\n  variant = 'default',\n  render,\n  ...props\n}: useRender.ComponentProps<'div'> & VariantProps<typeof markerVariants>) {\n  return useRender({\n    defaultTagName: 'div',\n    render,\n    props: mergeProps<'div'>(\n      {\n        'data-slot': 'marker',\n        'data-variant': variant,\n        className: cn(markerVariants({ variant, className })),\n      } as React.ComponentProps<'div'>,\n      props,\n    ),\n  })\n}\n\nfunction MarkerIcon({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"marker-icon\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-4 shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MarkerContent({ className, ...props }: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"marker-content\"\n      className={cn(\n        'min-w-0 wrap-break-word group-data-[variant=separator]/marker:flex-none group-data-[variant=separator]/marker:text-center *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-gray',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Marker, MarkerContent, MarkerIcon, markerVariants }\n"],"mappings":";;;;;;;;AAMA,MAAM,iBAAiB,IACrB,gMACA,EACE,UAAU,EACR,SAAS;CACP,SAAS;CACT,WACE;CACF,QAAQ;AACV,EACF,EACF,CACF;AAIA,SAAS,OAAO,EACd,WACA,UAAU,WACV,QACA,GAAG,SACqE;CACxE,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL;GACE,aAAa;GACb,gBAAgB;GAChB,WAAW,GAAG,eAAe;IAAE;IAAS;GAAU,CAAC,CAAC;EACtD,GACA,KACF;CACF,CAAC;AACH;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAuC;CACzE,OACE,oBAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GACT,wDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAuC;CAC5E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,4LACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}