@mastra/playground-ui 68.0.0 → 69.0.0-alpha.1

package/dist/MetricsTable-DIjbD5Xk.js

@@ -0,0 +1,327 @@
+import { i as TooltipTrigger, n as TooltipContent, t as Tooltip } from "./tooltip-DJcze2VZ.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { Skeleton } from "./components/Skeleton.es.js";
+import { t as ScrollArea } from "./scroll-area-9-S7wfSs.js";
+import { t as TablePagination } from "./table-pagination-S7ksCNCo.js";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowDownIcon, ArrowUpIcon } from "lucide-react";
+// src/ds/components/MetricsTable/metrics-table-header.tsx
+var SORT_ICON = {
+	asc: ArrowUpIcon,
+	desc: ArrowDownIcon
+};
+var FOCUS = "focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus focus-visible:-outline-offset-1";
+/**
+* A faint dotted underline under the label: the header explains itself on hover or focus. It
+* brightens while the header is hovered or focused, so it hints without pulling the eye at rest.
+*/
+var EXPLAINED = "cursor-help underline decoration-dotted decoration-placeholder/45 underline-offset-4 transition-[text-decoration-color] duration-150 group-hover/header:decoration-placeholder group-focus-visible/header:decoration-placeholder";
+/** The header's label, as a sort button with the sorted direction's arrow. Takes a tooltip's trigger props. */
+function SortButton({ header, explained, sorted, className, ...props }) {
+	const SortIcon = sorted && SORT_ICON[sorted];
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		...props,
+		className: cn("group/header flex items-center gap-1 rounded whitespace-nowrap hover:text-muted-foreground", FOCUS, className),
+		children: [/* @__PURE__ */ jsx("span", {
+			className: cn(explained && EXPLAINED),
+			children: header
+		}), SortIcon && /* @__PURE__ */ jsx(SortIcon, {
+			"aria-hidden": true,
+			className: "size-3"
+		})]
+	});
+}
+/** The header's label as text; focusable when it has a tooltip, so the keyboard reaches it. */
+function HeaderText({ header, explained, className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		tabIndex: explained ? 0 : void 0,
+		...props,
+		className: cn("group/header rounded whitespace-nowrap", FOCUS, className),
+		children: /* @__PURE__ */ jsx("span", {
+			className: cn(explained && EXPLAINED),
+			children: header
+		})
+	});
+}
+/**
+* A column's header: a sort button when the column sorts, plain text otherwise. With a
+* `description`, the label itself shows it in a tooltip (no separate info icon), marked by a
+* dotted underline, and screen readers get it as the header's description.
+*/
+function MetricsTableHeaderLabel({ header, description, sorted, onSort }) {
+	const descriptionId = useId();
+	const explained = Boolean(description);
+	const describedBy = explained ? descriptionId : void 0;
+	const trigger = onSort ? /* @__PURE__ */ jsx(SortButton, {
+		header,
+		explained,
+		sorted,
+		onClick: onSort,
+		"aria-describedby": describedBy
+	}) : /* @__PURE__ */ jsx(HeaderText, {
+		header,
+		explained,
+		"aria-describedby": describedBy
+	});
+	if (!explained) return trigger;
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: trigger }), /* @__PURE__ */ jsx(TooltipContent, {
+		id: descriptionId,
+		keepMounted: true,
+		side: "top",
+		className: "max-w-72",
+		children: description
+	})] });
+}
+// src/ds/components/MetricsTable/metrics-table-rows.tsx
+/**
+* Full-width lines that fade over their last 6px. A hovered row covers the lines above and below
+* it, which then fade over 24px so they read as part of the hover. Written out in full so Tailwind
+* finds every class.
+*/
+var ROW_LINE = "isolate before:absolute before:inset-x-0 before:-top-px before:bottom-0 before:-z-10 before:rounded hover:before:bg-fill-subtle after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border last:after:hidden after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] hover:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]";
+/**
+* Rows are 34.5px: 7px above 13px text (a 19.5px line) and 8px below, one more pixel for the
+* separator drawn in the row's last pixel, so text sits centered between the lines.
+*/
+var ROW_BOX = "pt-1.75 pb-2 text-body-sm";
+var ROW = cn("relative col-span-full grid grid-cols-subgrid items-center px-3", ROW_BOX, ROW_LINE);
+/** Skeleton widths for the first column's names, so loading rows don't look stamped. */
+var SKELETON_NAMES = [
+	"w-32",
+	"w-24",
+	"w-36",
+	"w-20",
+	"w-28"
+];
+/** Controls a cell can hold; their own clicks and keys don't count as the row's. */
+var CONTROLS = "a, button, input, select, textarea, label, [role=\"button\"], [role=\"link\"], [contenteditable]";
+/** Whether an event started on a control inside the row rather than on the row itself. */
+function fromControl(event) {
+	if (!(event.target instanceof Element)) return false;
+	const control = event.target.closest(CONTROLS);
+	return Boolean(control && event.currentTarget.contains(control));
+}
+/** Where a loading cell's bar sits and how wide it is: figures right, the name in varied widths. */
+function skeletonBar(column, columnIndex, rowIndex) {
+	if (column.align === "end") return "right-0 w-10";
+	if (columnIndex > 0) return "left-0 w-16";
+	return cn("left-0", SKELETON_NAMES[rowIndex % SKELETON_NAMES.length]);
+}
+/** Skeleton rows while loading, the empty message without rows, else the page's rows. */
+function MetricsTableBody({ columns, rows, getRowKey, empty, pageSize, isLoading, ...behavior }) {
+	if (isLoading) return Array.from({ length: pageSize ?? 5 }, (_, i) => /* @__PURE__ */ jsx(MetricsTableSkeletonRow, {
+		columns,
+		rowIndex: i
+	}, i));
+	if (rows.length === 0) {
+		if (pageSize) {
+			if (empty === void 0) return /* @__PURE__ */ jsx(MetricsTableFiller, { count: pageSize });
+			return /* @__PURE__ */ jsxs("div", {
+				role: "row",
+				className: "col-span-full grid *:col-start-1 *:row-start-1",
+				children: [/* @__PURE__ */ jsx(MetricsTableFiller, { count: pageSize }), /* @__PURE__ */ jsx("p", {
+					role: "cell",
+					className: "flex items-center justify-center px-3 py-4 text-center text-body-sm text-muted-foreground",
+					children: empty
+				})]
+			});
+		}
+		if (empty === void 0) return null;
+		return /* @__PURE__ */ jsx("div", {
+			role: "row",
+			className: "col-span-full",
+			children: /* @__PURE__ */ jsx("p", {
+				role: "cell",
+				className: "py-8 text-center text-body-sm text-muted-foreground",
+				children: empty
+			})
+		});
+	}
+	return rows.map((row) => /* @__PURE__ */ jsx(MetricsTableRow, {
+		row,
+		columns,
+		...behavior
+	}, getRowKey(row)));
+}
+/**
+* Blank space as tall as `count` rows, so a paged table is a full page tall however many rows it
+* shows. Rows of the same box, not a fixed height, so it follows the row's text size.
+*/
+function MetricsTableFiller({ count }) {
+	if (count <= 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		"data-slot": "metrics-table-filler",
+		className: "col-span-full",
+		children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx("div", {
+			className: ROW_BOX,
+			children: "​"
+		}, i))
+	});
+}
+/** A loading row: the real row's markup with a bar in each cell, so it has the same height. */
+function MetricsTableSkeletonRow({ columns, rowIndex }) {
+	return /* @__PURE__ */ jsx("div", {
+		role: "row",
+		"aria-busy": true,
+		className: ROW,
+		children: columns.map((column, columnIndex) => /* @__PURE__ */ jsxs("div", {
+			role: "cell",
+			className: cn("relative flex min-w-0", column.align === "end" && "justify-end"),
+			children: ["​", /* @__PURE__ */ jsx(Skeleton, { className: cn("absolute top-1/2 h-3.5 -translate-y-1/2", skeletonBar(column, columnIndex, rowIndex)) })]
+		}, column.id))
+	});
+}
+/** One row: its cells, and with `onRowClick` a focusable row that Enter and Space also click. */
+function MetricsTableRow({ row, columns, onRowClick, onRowHover, isRowDimmed, isRowActive, rowTitle }) {
+	const active = isRowActive?.(row) ?? false;
+	const dimmed = isRowDimmed?.(row) ?? false;
+	const handleClick = (event) => {
+		if (!fromControl(event)) onRowClick?.(row);
+	};
+	const handleKeyDown = (event) => {
+		if (event.target !== event.currentTarget) return;
+		if (event.key !== "Enter" && event.key !== " ") return;
+		event.preventDefault();
+		onRowClick?.(row);
+	};
+	return /* @__PURE__ */ jsx("div", {
+		role: "row",
+		"aria-current": active || void 0,
+		tabIndex: onRowClick ? 0 : void 0,
+		title: rowTitle?.(row),
+		onClick: onRowClick ? handleClick : void 0,
+		onKeyDown: onRowClick ? handleKeyDown : void 0,
+		onMouseEnter: onRowHover ? () => onRowHover(row) : void 0,
+		onMouseLeave: onRowHover ? () => onRowHover(void 0) : void 0,
+		className: cn(ROW, "rounded text-foreground transition-opacity duration-150", onRowClick && cn("cursor-pointer", "focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus focus-visible:-outline-offset-1"), active && "before:bg-fill-subtle", dimmed && "opacity-40"),
+		children: columns.map((column) => /* @__PURE__ */ jsx("div", {
+			role: "cell",
+			className: cn("flex min-w-0 items-center", column.align === "end" && "justify-end text-right"),
+			children: column.cell(row)
+		}, column.id))
+	});
+}
+// src/ds/components/MetricsTable/metrics-table.tsx
+/**
+* A full-width line that fades over its last 6px; over 24px when the first row is hovered, so it
+* reads as part of the hover. Written out in full so Tailwind finds every class.
+*/
+var HEADER_LINE = "after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]";
+var ARIA_SORT = {
+	asc: "ascending",
+	desc: "descending"
+};
+/**
+* Clicks on a column cycle its first direction, the other one, then off: off goes back to the
+* table's default order. Another column starts at its own first direction.
+*/
+function nextSort(current, column) {
+	const first = column.firstDirection ?? "desc";
+	if (current?.column !== column.id) return {
+		column: column.id,
+		direction: first
+	};
+	if (current.direction !== first) return void 0;
+	return {
+		column: column.id,
+		direction: first === "desc" ? "asc" : "desc"
+	};
+}
+/** Ascending order of two present sort values. */
+function compareAscending(x, y) {
+	if (typeof x === "number" && typeof y === "number") return x - y;
+	return String(x).localeCompare(String(y));
+}
+function sortRows(rows, columns, sort) {
+	const by = columns.find((c) => c.id === sort?.column)?.sortValue;
+	if (!sort || !by) return rows;
+	const sign = sort.direction === "desc" ? -1 : 1;
+	return rows.toSorted((a, b) => {
+		const x = by(a);
+		const y = by(b);
+		if (x === void 0 && y === void 0) return 0;
+		if (x === void 0) return 1;
+		if (y === void 0) return -1;
+		return sign * compareAscending(x, y);
+	});
+}
+/**
+* A column's grid track. Figures take a share of the spare width, like an HTML table's auto
+* layout: never narrower than their values, wider when the card has room.
+*/
+var columnWidth = (column) => column.width ?? (column.align === "end" ? "minmax(max-content,1fr)" : "max-content");
+/**
+* A table for the numbers behind a chart: one row per series or group, columns for its figures,
+* separated by lines that fade at the ends. With `SeriesMark` and `Sparkline` cells and the row
+* hover and click hooks it doubles as the chart's legend; without them it's a plain data table.
+* With `pageSize` it pages long lists, and is always a full page tall. For a share of a total, a compact `ShareBar` fits better.
+*/
+function MetricsTable({ columns, rows, getRowKey, sort, defaultSort, onSortChange, onRowClick, onRowHover, isRowDimmed, isRowActive, rowTitle, empty, pageSize, isLoading = false, "aria-label": ariaLabel, className }) {
+	const [ownSort, setOwnSort] = useState(defaultSort);
+	const [page, setPage] = useState(0);
+	const current = sort ?? ownSort;
+	const sorted = sortRows(rows, columns, current);
+	const pageCount = pageSize ? Math.ceil(sorted.length / pageSize) : 1;
+	const safePage = Math.min(page, Math.max(0, pageCount - 1));
+	const shown = pageSize ? sorted.slice(safePage * pageSize, (safePage + 1) * pageSize) : sorted;
+	const template = { gridTemplateColumns: columns.map(columnWidth).join(" ") };
+	const showsPagination = !isLoading && pageCount > 1;
+	const sortBy = (column) => {
+		const next = nextSort(current, column) ?? defaultSort;
+		setOwnSort(next);
+		setPage(0);
+		onSortChange?.(next);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("grid min-w-0 gap-3", className),
+		children: [/* @__PURE__ */ jsxs(ScrollArea, {
+			orientation: "horizontal",
+			children: [/* @__PURE__ */ jsxs("div", {
+				role: "table",
+				"aria-label": ariaLabel,
+				className: "grid min-w-min gap-x-4",
+				style: template,
+				children: [/* @__PURE__ */ jsx("div", {
+					role: "row",
+					className: cn("relative col-span-full grid grid-cols-subgrid items-end px-3 pb-1.5 text-body-sm font-medium text-placeholder", HEADER_LINE),
+					children: columns.map((column) => {
+						const direction = current?.column === column.id ? current.direction : void 0;
+						return /* @__PURE__ */ jsx("div", {
+							role: "columnheader",
+							"aria-sort": direction && ARIA_SORT[direction],
+							className: cn("flex min-w-0 items-center gap-1", column.align === "end" && "justify-end text-right"),
+							children: /* @__PURE__ */ jsx(MetricsTableHeaderLabel, {
+								header: column.header,
+								description: column.description,
+								sorted: direction,
+								onSort: column.sortValue ? () => sortBy(column) : void 0
+							})
+						}, column.id);
+					})
+				}), /* @__PURE__ */ jsx(MetricsTableBody, {
+					columns,
+					rows: shown,
+					getRowKey,
+					onRowClick,
+					onRowHover,
+					isRowDimmed,
+					isRowActive,
+					rowTitle,
+					empty,
+					pageSize,
+					isLoading
+				})]
+			}), pageSize !== void 0 && !isLoading && shown.length > 0 && /* @__PURE__ */ jsx(MetricsTableFiller, { count: pageSize - shown.length })]
+		}), showsPagination && /* @__PURE__ */ jsx(TablePagination, {
+			page: safePage,
+			pageCount,
+			onPageChange: setPage
+		})]
+	});
+}
+export { MetricsTable as t };
+
+//# sourceMappingURL=MetricsTable-DIjbD5Xk.js.map

package/dist/MetricsTable-DIjbD5Xk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsTable-DIjbD5Xk.js","names":[],"sources":["../src/ds/components/MetricsTable/metrics-table-header.tsx","../src/ds/components/MetricsTable/metrics-table-rows.tsx","../src/ds/components/MetricsTable/metrics-table.tsx"],"sourcesContent":["import { ArrowDownIcon, ArrowUpIcon } from 'lucide-react';\nimport { useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type { MetricsTableSortDirection } from './metrics-table-types';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/ds/components/Tooltip';\nimport { cn } from '@/lib/utils';\n\nconst SORT_ICON = { asc: ArrowUpIcon, desc: ArrowDownIcon };\n\nexport const FOCUS =\n  'focus-visible:outline-1 focus-visible:outline-solid focus-visible:outline-border-focus focus-visible:-outline-offset-1';\n\n/**\n * A faint dotted underline under the label: the header explains itself on hover or focus. It\n * brightens while the header is hovered or focused, so it hints without pulling the eye at rest.\n */\nconst EXPLAINED =\n  'cursor-help underline decoration-dotted decoration-placeholder/45 underline-offset-4 transition-[text-decoration-color] duration-150 group-hover/header:decoration-placeholder group-focus-visible/header:decoration-placeholder';\n\ntype HeaderTextProps = {\n  header: string;\n  /** Underlines the label: the header has a tooltip. */\n  explained: boolean;\n};\n\n/** The header's label, as a sort button with the sorted direction's arrow. Takes a tooltip's trigger props. */\nfunction SortButton({\n  header,\n  explained,\n  sorted,\n  className,\n  ...props\n}: HeaderTextProps & { sorted?: MetricsTableSortDirection } & ComponentProps<'button'>) {\n  const SortIcon = sorted && SORT_ICON[sorted];\n  return (\n    <button\n      type=\"button\"\n      {...props}\n      className={cn(\n        'group/header flex items-center gap-1 rounded whitespace-nowrap hover:text-muted-foreground',\n        FOCUS,\n        className,\n      )}\n    >\n      <span className={cn(explained && EXPLAINED)}>{header}</span>\n      {SortIcon && <SortIcon aria-hidden className=\"size-3\" />}\n    </button>\n  );\n}\n\n/** The header's label as text; focusable when it has a tooltip, so the keyboard reaches it. */\nfunction HeaderText({ header, explained, className, ...props }: HeaderTextProps & ComponentProps<'span'>) {\n  return (\n    <span\n      tabIndex={explained ? 0 : undefined}\n      {...props}\n      className={cn('group/header rounded whitespace-nowrap', FOCUS, className)}\n    >\n      <span className={cn(explained && EXPLAINED)}>{header}</span>\n    </span>\n  );\n}\n\n/**\n * A column's header: a sort button when the column sorts, plain text otherwise. With a\n * `description`, the label itself shows it in a tooltip (no separate info icon), marked by a\n * dotted underline, and screen readers get it as the header's description.\n */\nexport function MetricsTableHeaderLabel({\n  header,\n  description,\n  sorted,\n  onSort,\n}: {\n  header: string;\n  description?: ReactNode;\n  sorted?: MetricsTableSortDirection;\n  /** Makes the header a sort button. */\n  onSort?: () => void;\n}) {\n  const descriptionId = useId();\n  const explained = Boolean(description);\n  const describedBy = explained ? descriptionId : undefined;\n  const trigger = onSort ? (\n    <SortButton header={header} explained={explained} sorted={sorted} onClick={onSort} aria-describedby={describedBy} />\n  ) : (\n    <HeaderText header={header} explained={explained} aria-describedby={describedBy} />\n  );\n\n  if (!explained) return trigger;\n  return (\n    <Tooltip>\n      <TooltipTrigger render={trigger} />\n      {/* Kept mounted (hidden) while closed, so screen readers always get the text. */}\n      <TooltipContent id={descriptionId} keepMounted side=\"top\" className=\"max-w-72\">\n        {description}\n      </TooltipContent>\n    </Tooltip>\n  );\n}\n","import type { KeyboardEvent, MouseEvent } from 'react';\nimport { FOCUS } from './metrics-table-header';\nimport type { MetricsTableColumn, MetricsTableProps } from './metrics-table-types';\nimport { Skeleton } from '@/ds/components/Skeleton';\nimport { cn } from '@/lib/utils';\n\n/**\n * Full-width lines that fade over their last 6px. A hovered row covers the lines above and below\n * it, which then fade over 24px so they read as part of the hover. Written out in full so Tailwind\n * finds every class.\n */\nconst ROW_LINE =\n  'isolate before:absolute before:inset-x-0 before:-top-px before:bottom-0 before:-z-10 before:rounded hover:before:bg-fill-subtle after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border last:after:hidden after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] hover:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]';\n\n/**\n * Rows are 34.5px: 7px above 13px text (a 19.5px line) and 8px below, one more pixel for the\n * separator drawn in the row's last pixel, so text sits centered between the lines.\n */\nconst ROW_BOX = 'pt-1.75 pb-2 text-body-sm';\n\nconst ROW = cn('relative col-span-full grid grid-cols-subgrid items-center px-3', ROW_BOX, ROW_LINE);\n\n/** Skeleton widths for the first column's names, so loading rows don't look stamped. */\nconst SKELETON_NAMES = ['w-32', 'w-24', 'w-36', 'w-20', 'w-28'];\n\n/** Controls a cell can hold; their own clicks and keys don't count as the row's. */\nconst CONTROLS = 'a, button, input, select, textarea, label, [role=\"button\"], [role=\"link\"], [contenteditable]';\n\n/** Whether an event started on a control inside the row rather than on the row itself. */\nfunction fromControl(event: MouseEvent | KeyboardEvent) {\n  if (!(event.target instanceof Element)) return false;\n  const control = event.target.closest(CONTROLS);\n  return Boolean(control && event.currentTarget.contains(control));\n}\n\n/** Where a loading cell's bar sits and how wide it is: figures right, the name in varied widths. */\nfunction skeletonBar<Row>(column: MetricsTableColumn<Row>, columnIndex: number, rowIndex: number) {\n  if (column.align === 'end') return 'right-0 w-10';\n  if (columnIndex > 0) return 'left-0 w-16';\n  return cn('left-0', SKELETON_NAMES[rowIndex % SKELETON_NAMES.length]);\n}\n\ntype RowBehavior<Row> = Pick<\n  MetricsTableProps<Row>,\n  'onRowClick' | 'onRowHover' | 'isRowDimmed' | 'isRowActive' | 'rowTitle'\n>;\n\nexport type MetricsTableBodyProps<Row> = RowBehavior<Row> & {\n  columns: MetricsTableColumn<Row>[];\n  /** The rows on the current page, sorted. */\n  rows: Row[];\n  getRowKey: (row: Row) => string;\n  empty: MetricsTableProps<Row>['empty'];\n  /** A paged table's rows per page: drawn while loading, and kept as the empty table's height. */\n  pageSize: number | undefined;\n  isLoading: boolean;\n};\n\n/** Skeleton rows while loading, the empty message without rows, else the page's rows. */\nexport function MetricsTableBody<Row>({\n  columns,\n  rows,\n  getRowKey,\n  empty,\n  pageSize,\n  isLoading,\n  ...behavior\n}: MetricsTableBodyProps<Row>) {\n  if (isLoading) {\n    return Array.from({ length: pageSize ?? 5 }, (_, i) => (\n      <MetricsTableSkeletonRow key={i} columns={columns} rowIndex={i} />\n    ));\n  }\n  if (rows.length === 0) {\n    if (pageSize) {\n      if (empty === undefined) return <MetricsTableFiller count={pageSize} />;\n      // Empty, a paged table keeps at least a full page's height, with the message in its middle.\n      // Both share one grid cell, so a message taller than the page still grows the row.\n      return (\n        <div role=\"row\" className=\"col-span-full grid *:col-start-1 *:row-start-1\">\n          <MetricsTableFiller count={pageSize} />\n          <p\n            role=\"cell\"\n            className=\"flex items-center justify-center px-3 py-4 text-center text-body-sm text-muted-foreground\"\n          >\n            {empty}\n          </p>\n        </div>\n      );\n    }\n    if (empty === undefined) return null;\n    return (\n      <div role=\"row\" className=\"col-span-full\">\n        <p role=\"cell\" className=\"py-8 text-center text-body-sm text-muted-foreground\">\n          {empty}\n        </p>\n      </div>\n    );\n  }\n  return rows.map(row => <MetricsTableRow key={getRowKey(row)} row={row} columns={columns} {...behavior} />);\n}\n\n/**\n * Blank space as tall as `count` rows, so a paged table is a full page tall however many rows it\n * shows. Rows of the same box, not a fixed height, so it follows the row's text size.\n */\nexport function MetricsTableFiller({ count }: { count: number }) {\n  if (count <= 0) return null;\n  return (\n    <div aria-hidden data-slot=\"metrics-table-filler\" className=\"col-span-full\">\n      {Array.from({ length: count }, (_, i) => (\n        <div key={i} className={ROW_BOX}>\n          {'\\u200b'}\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** A loading row: the real row's markup with a bar in each cell, so it has the same height. */\nfunction MetricsTableSkeletonRow<Row>({ columns, rowIndex }: { columns: MetricsTableColumn<Row>[]; rowIndex: number }) {\n  return (\n    <div role=\"row\" aria-busy className={ROW}>\n      {columns.map((column, columnIndex) => (\n        <div\n          key={column.id}\n          role=\"cell\"\n          className={cn('relative flex min-w-0', column.align === 'end' && 'justify-end')}\n        >\n          {/* A zero-width space gives the cell a real line box, so loading rows match loaded ones. */}\n          {'​'}\n          <Skeleton\n            className={cn('absolute top-1/2 h-3.5 -translate-y-1/2', skeletonBar(column, columnIndex, rowIndex))}\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/** One row: its cells, and with `onRowClick` a focusable row that Enter and Space also click. */\nfunction MetricsTableRow<Row>({\n  row,\n  columns,\n  onRowClick,\n  onRowHover,\n  isRowDimmed,\n  isRowActive,\n  rowTitle,\n}: RowBehavior<Row> & { row: Row; columns: MetricsTableColumn<Row>[] }) {\n  const active = isRowActive?.(row) ?? false;\n  const dimmed = isRowDimmed?.(row) ?? false;\n\n  const handleClick = (event: MouseEvent) => {\n    if (!fromControl(event)) onRowClick?.(row);\n  };\n  const handleKeyDown = (event: KeyboardEvent) => {\n    // Only while the row itself has focus, so a cell's link or input keeps its keys.\n    if (event.target !== event.currentTarget) return;\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    // Space would also scroll the page.\n    event.preventDefault();\n    onRowClick?.(row);\n  };\n\n  return (\n    <div\n      role=\"row\"\n      aria-current={active || undefined}\n      tabIndex={onRowClick ? 0 : undefined}\n      title={rowTitle?.(row)}\n      onClick={onRowClick ? handleClick : undefined}\n      onKeyDown={onRowClick ? handleKeyDown : undefined}\n      onMouseEnter={onRowHover ? () => onRowHover(row) : undefined}\n      onMouseLeave={onRowHover ? () => onRowHover(undefined) : undefined}\n      className={cn(\n        ROW,\n        'rounded text-foreground transition-opacity duration-150',\n        onRowClick && cn('cursor-pointer', FOCUS),\n        active && 'before:bg-fill-subtle',\n        dimmed && 'opacity-40',\n      )}\n    >\n      {columns.map(column => (\n        <div\n          key={column.id}\n          role=\"cell\"\n          className={cn('flex min-w-0 items-center', column.align === 'end' && 'justify-end text-right')}\n        >\n          {column.cell(row)}\n        </div>\n      ))}\n    </div>\n  );\n}\n","import { useState } from 'react';\nimport { MetricsTableHeaderLabel } from './metrics-table-header';\nimport { MetricsTableBody, MetricsTableFiller } from './metrics-table-rows';\nimport type { MetricsTableColumn, MetricsTableProps, MetricsTableSort } from './metrics-table-types';\nimport { ScrollArea } from '@/ds/components/ScrollArea/scroll-area';\nimport { TablePagination } from '@/ds/components/Table/table-pagination';\nimport { cn } from '@/lib/utils';\n\n/**\n * A full-width line that fades over its last 6px; over 24px when the first row is hovered, so it\n * reads as part of the hover. Written out in full so Tailwind finds every class.\n */\nconst HEADER_LINE =\n  'after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:[mask-image:linear-gradient(to_right,transparent,black_6px,black_calc(100%-6px),transparent)] [&:has(+:hover)]:after:[mask-image:linear-gradient(to_right,transparent,black_24px,black_calc(100%-24px),transparent)]';\n\nconst ARIA_SORT = { asc: 'ascending', desc: 'descending' } as const;\n\n/**\n * Clicks on a column cycle its first direction, the other one, then off: off goes back to the\n * table's default order. Another column starts at its own first direction.\n */\nfunction nextSort<Row>(\n  current: MetricsTableSort | undefined,\n  column: MetricsTableColumn<Row>,\n): MetricsTableSort | undefined {\n  const first = column.firstDirection ?? 'desc';\n  if (current?.column !== column.id) return { column: column.id, direction: first };\n  if (current.direction !== first) return undefined;\n  return { column: column.id, direction: first === 'desc' ? 'asc' : 'desc' };\n}\n\n/** Ascending order of two present sort values. */\nfunction compareAscending(x: number | string, y: number | string) {\n  if (typeof x === 'number' && typeof y === 'number') return x - y;\n  return String(x).localeCompare(String(y));\n}\n\nfunction sortRows<Row>(rows: Row[], columns: MetricsTableColumn<Row>[], sort: MetricsTableSort | undefined) {\n  const by = columns.find(c => c.id === sort?.column)?.sortValue;\n  if (!sort || !by) return rows;\n  const sign = sort.direction === 'desc' ? -1 : 1;\n  // A row without a value goes last whichever way the column sorts.\n  return rows.toSorted((a, b) => {\n    const x = by(a);\n    const y = by(b);\n    if (x === undefined && y === undefined) return 0;\n    if (x === undefined) return 1;\n    if (y === undefined) return -1;\n    return sign * compareAscending(x, y);\n  });\n}\n\n/**\n * A column's grid track. Figures take a share of the spare width, like an HTML table's auto\n * layout: never narrower than their values, wider when the card has room.\n */\nconst columnWidth = <Row,>(column: MetricsTableColumn<Row>) =>\n  column.width ?? (column.align === 'end' ? 'minmax(max-content,1fr)' : 'max-content');\n\n/**\n * A table for the numbers behind a chart: one row per series or group, columns for its figures,\n * separated by lines that fade at the ends. With `SeriesMark` and `Sparkline` cells and the row\n * hover and click hooks it doubles as the chart's legend; without them it's a plain data table.\n * With `pageSize` it pages long lists, and is always a full page tall. For a share of a total, a compact `ShareBar` fits better.\n */\nexport function MetricsTable<Row>({\n  columns,\n  rows,\n  getRowKey,\n  sort,\n  defaultSort,\n  onSortChange,\n  onRowClick,\n  onRowHover,\n  isRowDimmed,\n  isRowActive,\n  rowTitle,\n  empty,\n  pageSize,\n  isLoading = false,\n  'aria-label': ariaLabel,\n  className,\n}: MetricsTableProps<Row>) {\n  const [ownSort, setOwnSort] = useState(defaultSort);\n  const [page, setPage] = useState(0);\n  const current = sort ?? ownSort;\n  const sorted = sortRows(rows, columns, current);\n  const pageCount = pageSize ? Math.ceil(sorted.length / pageSize) : 1;\n  // Fewer rows than before (a narrower filter) keeps the last page rather than an empty one.\n  const safePage = Math.min(page, Math.max(0, pageCount - 1));\n  const shown = pageSize ? sorted.slice(safePage * pageSize, (safePage + 1) * pageSize) : sorted;\n  const template = { gridTemplateColumns: columns.map(columnWidth).join(' ') };\n  const showsPagination = !isLoading && pageCount > 1;\n\n  const sortBy = (column: MetricsTableColumn<Row>) => {\n    const next = nextSort(current, column) ?? defaultSort;\n    setOwnSort(next);\n    setPage(0);\n    onSortChange?.(next);\n  };\n\n  return (\n    <div className={cn('grid min-w-0 gap-3', className)}>\n      {/* Narrower than its content (a phone), the table scrolls sideways instead of squeezing columns or the page. */}\n      <ScrollArea orientation=\"horizontal\">\n        {/* One set of column tracks for the header and every row (each row is a subgrid), so a column's\n            width follows its widest cell in the whole table and headers sit over their cells. */}\n        <div\n          role=\"table\"\n          aria-label={ariaLabel}\n          // min-content, not max-content: a long name would otherwise grow every `fr` column with it.\n          className=\"grid min-w-min gap-x-4\"\n          style={template}\n        >\n          <div\n            role=\"row\"\n            className={cn(\n              'relative col-span-full grid grid-cols-subgrid items-end px-3 pb-1.5 text-body-sm font-medium text-placeholder',\n              HEADER_LINE,\n            )}\n          >\n            {columns.map(column => {\n              const direction = current?.column === column.id ? current.direction : undefined;\n              return (\n                <div\n                  key={column.id}\n                  role=\"columnheader\"\n                  aria-sort={direction && ARIA_SORT[direction]}\n                  className={cn('flex min-w-0 items-center gap-1', column.align === 'end' && 'justify-end text-right')}\n                >\n                  <MetricsTableHeaderLabel\n                    header={column.header}\n                    description={column.description}\n                    sorted={direction}\n                    onSort={column.sortValue ? () => sortBy(column) : undefined}\n                  />\n                </div>\n              );\n            })}\n          </div>\n          <MetricsTableBody\n            columns={columns}\n            rows={shown}\n            getRowKey={getRowKey}\n            onRowClick={onRowClick}\n            onRowHover={onRowHover}\n            isRowDimmed={isRowDimmed}\n            isRowActive={isRowActive}\n            rowTitle={rowTitle}\n            empty={empty}\n            pageSize={pageSize}\n            isLoading={isLoading}\n          />\n        </div>\n        {/* Always a full page tall, so loading, paging and switching data don't move what's below. */}\n        {pageSize !== undefined && !isLoading && shown.length > 0 && (\n          <MetricsTableFiller count={pageSize - shown.length} />\n        )}\n      </ScrollArea>\n      {showsPagination && <TablePagination page={safePage} pageCount={pageCount} onPageChange={setPage} />}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/Notice-B_KjMmA6.cjs

@@ -0,0 +1,117 @@
+require('./Notice.css');const require_Button = require("./Button-BfICfyxD.cjs");
+const require_utils = require("./utils-uDc1ofX1.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let lucide_react = require("lucide-react");
+let _base_ui_react_use_render = require("@base-ui/react/use-render");
+let _base_ui_react_merge_props = require("@base-ui/react/merge-props");
+// src/ds/components/Notice/notice-button.tsx
+function nativeButtonProps(render) {
+	if (!render || (0, react.isValidElement)(render) && render.type === "button") return { type: "button" };
+	return {};
+}
+function NoticeButton({ render, icon, className, children, ...props }) {
+	return (0, _base_ui_react_use_render.useRender)({
+		defaultTagName: "button",
+		render,
+		props: (0, _base_ui_react_merge_props.mergeProps)(nativeButtonProps(render), {
+			className: require_utils.cn(require_Button.buttonVariants({ variant: "link" }), "min-w-0 text-foreground [&>svg]:size-icon-sm [&>svg]:shrink-0", className),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [icon, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.ButtonLabel, {
+				variant: "link",
+				children
+			})] })
+		}, props)
+	});
+}
+// src/ds/components/Notice/notice-message.tsx
+function NoticeMessage({ children, className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		children
+	});
+}
+// src/ds/components/Notice/notice-root.tsx
+var variantConfig = {
+	success: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.LightbulbIcon, {}),
+		iconClass: "text-success-indicator"
+	},
+	destructive: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.OctagonAlertIcon, {}),
+		iconClass: "text-destructive-indicator"
+	},
+	warning: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.TriangleAlertIcon, {}),
+		iconClass: "text-warning-foreground"
+	},
+	info: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.InfoIcon, {}),
+		iconClass: "text-info-indicator"
+	},
+	note: {
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.FileTextIcon, {}),
+		iconClass: "text-muted-foreground"
+	}
+};
+function hasContent(content) {
+	return react.Children.toArray(content).some((child) => child !== "");
+}
+function NoticeRoot({ variant, title, icon, action, actionPlacement = "below", onDismiss, children, className, ...props }) {
+	const { icon: defaultIcon, iconClass } = variantConfig[variant];
+	const hasTitle = hasContent(title);
+	const hasMessage = hasContent(children);
+	const hasAction = hasContent(action);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...props,
+		"data-slot": "notice",
+		"data-tone": variant,
+		"data-action-placement": actionPlacement,
+		className: require_utils.cn("relative grid min-w-0 gap-x-3 rounded-lg p-3 text-body-sm", onDismiss && "pe-11", className),
+		children: [
+			(hasTitle || hasMessage || hasAction) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-slot": "notice-icon",
+				"aria-hidden": true,
+				className: require_utils.cn("flex size-5 shrink-0 items-center justify-center [&>svg]:size-icon-sm", iconClass),
+				children: icon ?? defaultIcon
+			}),
+			(hasTitle || hasMessage) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-slot": "notice-content",
+				className: "flex min-w-0 flex-col gap-1 wrap-anywhere",
+				children: [hasTitle && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "text-subheading",
+					children: title
+				}), hasMessage && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "flex min-w-0 flex-col gap-2",
+					children
+				})]
+			}),
+			hasAction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				"data-slot": "notice-action",
+				className: "flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2",
+				children: action
+			}),
+			onDismiss && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				className: "absolute end-2 top-2 before:absolute before:-inset-2",
+				tooltip: "Dismiss notice",
+				onClick: onDismiss,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.XIcon, {})
+			})
+		]
+	});
+}
+// src/ds/components/Notice/Notice.tsx
+var Notice = Object.assign(NoticeRoot, {
+	Message: NoticeMessage,
+	Button: NoticeButton
+});
+Object.defineProperty(exports, "Notice", {
+	enumerable: true,
+	get: function() {
+		return Notice;
+	}
+});
+
+//# sourceMappingURL=Notice-B_KjMmA6.cjs.map

package/dist/Notice-B_KjMmA6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notice-B_KjMmA6.cjs","names":["isValidElement","useRender","mergeProps","cn","buttonVariants","_Fragment","ButtonLabel","LightbulbIcon","OctagonAlertIcon","TriangleAlertIcon","InfoIcon","FileTextIcon","Children","cn","Button","XIcon"],"sources":["../src/ds/components/Notice/notice-button.tsx","../src/ds/components/Notice/notice-message.tsx","../src/ds/components/Notice/notice-root.tsx","../src/ds/components/Notice/Notice.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { isValidElement } from 'react';\nimport type { ReactNode } from 'react';\nimport { ButtonLabel, buttonVariants } from '../Button/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface NoticeButtonProps extends useRender.ComponentProps<'button'> {\n  icon?: ReactNode;\n}\n\nfunction nativeButtonProps(render: NoticeButtonProps['render']) {\n  if (!render || (isValidElement(render) && render.type === 'button')) return { type: 'button' as const };\n  return {};\n}\n\nexport function NoticeButton({ render, icon, className, children, ...props }: NoticeButtonProps) {\n  return useRender({\n    defaultTagName: 'button',\n    render,\n    props: mergeProps<'button'>(\n      nativeButtonProps(render),\n      {\n        className: cn(\n          buttonVariants({ variant: 'link' }),\n          'min-w-0 text-foreground [&>svg]:size-icon-sm [&>svg]:shrink-0',\n          className,\n        ),\n        children: (\n          <>\n            {icon}\n            <ButtonLabel variant=\"link\">{children}</ButtonLabel>\n          </>\n        ),\n      },\n      props,\n    ),\n  });\n}\n","export interface NoticeMessageProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function NoticeMessage({ children, className }: NoticeMessageProps) {\n  return <div className={className}>{children}</div>;\n}\n","import { FileTextIcon, InfoIcon, LightbulbIcon, OctagonAlertIcon, TriangleAlertIcon, XIcon } from 'lucide-react';\nimport { Children } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Button } from '../Button/Button';\nimport './notice.css';\nimport { cn } from '@/lib/utils';\n\nexport type NoticeVariant = 'warning' | 'destructive' | 'success' | 'info' | 'note';\n\nconst variantConfig: Record<NoticeVariant, { icon: ReactNode; iconClass: string }> = {\n  success: { icon: <LightbulbIcon />, iconClass: 'text-success-indicator' },\n  destructive: { icon: <OctagonAlertIcon />, iconClass: 'text-destructive-indicator' },\n  warning: { icon: <TriangleAlertIcon />, iconClass: 'text-warning-foreground' },\n  info: { icon: <InfoIcon />, iconClass: 'text-info-indicator' },\n  note: { icon: <FileTextIcon />, iconClass: 'text-muted-foreground' },\n};\n\nfunction hasContent(content: ReactNode) {\n  return Children.toArray(content).some(child => child !== '');\n}\n\nexport interface NoticeRootProps extends Omit<ComponentProps<'div'>, 'title'> {\n  variant: NoticeVariant;\n  title?: ReactNode;\n  icon?: ReactNode;\n  action?: ReactNode;\n  actionPlacement?: 'below' | 'end';\n  onDismiss?: () => void;\n}\n\nexport function NoticeRoot({\n  variant,\n  title,\n  icon,\n  action,\n  actionPlacement = 'below',\n  onDismiss,\n  children,\n  className,\n  ...props\n}: NoticeRootProps) {\n  const { icon: defaultIcon, iconClass } = variantConfig[variant];\n  const hasTitle = hasContent(title);\n  const hasMessage = hasContent(children);\n  const hasAction = hasContent(action);\n\n  return (\n    <div\n      {...props}\n      data-slot=\"notice\"\n      data-tone={variant}\n      data-action-placement={actionPlacement}\n      className={cn('relative grid min-w-0 gap-x-3 rounded-lg p-3 text-body-sm', onDismiss && 'pe-11', className)}\n    >\n      {(hasTitle || hasMessage || hasAction) && (\n        <span\n          data-slot=\"notice-icon\"\n          aria-hidden\n          className={cn('flex size-5 shrink-0 items-center justify-center [&>svg]:size-icon-sm', iconClass)}\n        >\n          {icon ?? defaultIcon}\n        </span>\n      )}\n      {(hasTitle || hasMessage) && (\n        <div data-slot=\"notice-content\" className=\"flex min-w-0 flex-col gap-1 wrap-anywhere\">\n          {hasTitle && <div className=\"text-subheading\">{title}</div>}\n          {hasMessage && <div className=\"flex min-w-0 flex-col gap-2\">{children}</div>}\n        </div>\n      )}\n      {hasAction && (\n        <div data-slot=\"notice-action\" className=\"flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2\">\n          {action}\n        </div>\n      )}\n      {onDismiss && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute end-2 top-2 before:absolute before:-inset-2\"\n          tooltip=\"Dismiss notice\"\n          onClick={onDismiss}\n        >\n          <XIcon />\n        </Button>\n      )}\n    </div>\n  );\n}\n","import { NoticeButton } from './notice-button';\nimport { NoticeMessage } from './notice-message';\nimport { NoticeRoot } from './notice-root';\n\nexport { type NoticeVariant, type NoticeRootProps } from './notice-root';\nexport { type NoticeMessageProps } from './notice-message';\n\nexport const Notice = Object.assign(NoticeRoot, {\n  Message: NoticeMessage,\n  Button: NoticeButton,\n});\n"],"mappings":"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"}

package/dist/Notice-OSlG42lD.js

@@ -0,0 +1,112 @@
+import { i as ButtonLabel, o as buttonVariants, t as Button } from "./Button-Bi7aXd_G.js";
+import { t as cn } from "./utils-DQx8TpNT.js";
+import { Children, isValidElement } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { FileTextIcon, InfoIcon, LightbulbIcon, OctagonAlertIcon, TriangleAlertIcon, XIcon } from "lucide-react";
+import { useRender } from "@base-ui/react/use-render";
+import { mergeProps } from "@base-ui/react/merge-props";
+import './Notice.css';// src/ds/components/Notice/notice-button.tsx
+function nativeButtonProps(render) {
+	if (!render || isValidElement(render) && render.type === "button") return { type: "button" };
+	return {};
+}
+function NoticeButton({ render, icon, className, children, ...props }) {
+	return useRender({
+		defaultTagName: "button",
+		render,
+		props: mergeProps(nativeButtonProps(render), {
+			className: cn(buttonVariants({ variant: "link" }), "min-w-0 text-foreground [&>svg]:size-icon-sm [&>svg]:shrink-0", className),
+			children: /* @__PURE__ */ jsxs(Fragment$1, { children: [icon, /* @__PURE__ */ jsx(ButtonLabel, {
+				variant: "link",
+				children
+			})] })
+		}, props)
+	});
+}
+// src/ds/components/Notice/notice-message.tsx
+function NoticeMessage({ children, className }) {
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children
+	});
+}
+// src/ds/components/Notice/notice-root.tsx
+var variantConfig = {
+	success: {
+		icon: /* @__PURE__ */ jsx(LightbulbIcon, {}),
+		iconClass: "text-success-indicator"
+	},
+	destructive: {
+		icon: /* @__PURE__ */ jsx(OctagonAlertIcon, {}),
+		iconClass: "text-destructive-indicator"
+	},
+	warning: {
+		icon: /* @__PURE__ */ jsx(TriangleAlertIcon, {}),
+		iconClass: "text-warning-foreground"
+	},
+	info: {
+		icon: /* @__PURE__ */ jsx(InfoIcon, {}),
+		iconClass: "text-info-indicator"
+	},
+	note: {
+		icon: /* @__PURE__ */ jsx(FileTextIcon, {}),
+		iconClass: "text-muted-foreground"
+	}
+};
+function hasContent(content) {
+	return Children.toArray(content).some((child) => child !== "");
+}
+function NoticeRoot({ variant, title, icon, action, actionPlacement = "below", onDismiss, children, className, ...props }) {
+	const { icon: defaultIcon, iconClass } = variantConfig[variant];
+	const hasTitle = hasContent(title);
+	const hasMessage = hasContent(children);
+	const hasAction = hasContent(action);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		"data-slot": "notice",
+		"data-tone": variant,
+		"data-action-placement": actionPlacement,
+		className: cn("relative grid min-w-0 gap-x-3 rounded-lg p-3 text-body-sm", onDismiss && "pe-11", className),
+		children: [
+			(hasTitle || hasMessage || hasAction) && /* @__PURE__ */ jsx("span", {
+				"data-slot": "notice-icon",
+				"aria-hidden": true,
+				className: cn("flex size-5 shrink-0 items-center justify-center [&>svg]:size-icon-sm", iconClass),
+				children: icon ?? defaultIcon
+			}),
+			(hasTitle || hasMessage) && /* @__PURE__ */ jsxs("div", {
+				"data-slot": "notice-content",
+				className: "flex min-w-0 flex-col gap-1 wrap-anywhere",
+				children: [hasTitle && /* @__PURE__ */ jsx("div", {
+					className: "text-subheading",
+					children: title
+				}), hasMessage && /* @__PURE__ */ jsx("div", {
+					className: "flex min-w-0 flex-col gap-2",
+					children
+				})]
+			}),
+			hasAction && /* @__PURE__ */ jsx("div", {
+				"data-slot": "notice-action",
+				className: "flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2",
+				children: action
+			}),
+			onDismiss && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				className: "absolute end-2 top-2 before:absolute before:-inset-2",
+				tooltip: "Dismiss notice",
+				onClick: onDismiss,
+				children: /* @__PURE__ */ jsx(XIcon, {})
+			})
+		]
+	});
+}
+// src/ds/components/Notice/Notice.tsx
+var Notice = Object.assign(NoticeRoot, {
+	Message: NoticeMessage,
+	Button: NoticeButton
+});
+export { Notice as t };
+
+//# sourceMappingURL=Notice-OSlG42lD.js.map

package/dist/Notice-OSlG42lD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Notice-OSlG42lD.js","names":["_Fragment"],"sources":["../src/ds/components/Notice/notice-button.tsx","../src/ds/components/Notice/notice-message.tsx","../src/ds/components/Notice/notice-root.tsx","../src/ds/components/Notice/Notice.tsx"],"sourcesContent":["import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { isValidElement } from 'react';\nimport type { ReactNode } from 'react';\nimport { ButtonLabel, buttonVariants } from '../Button/Button';\nimport { cn } from '@/lib/utils';\n\nexport interface NoticeButtonProps extends useRender.ComponentProps<'button'> {\n  icon?: ReactNode;\n}\n\nfunction nativeButtonProps(render: NoticeButtonProps['render']) {\n  if (!render || (isValidElement(render) && render.type === 'button')) return { type: 'button' as const };\n  return {};\n}\n\nexport function NoticeButton({ render, icon, className, children, ...props }: NoticeButtonProps) {\n  return useRender({\n    defaultTagName: 'button',\n    render,\n    props: mergeProps<'button'>(\n      nativeButtonProps(render),\n      {\n        className: cn(\n          buttonVariants({ variant: 'link' }),\n          'min-w-0 text-foreground [&>svg]:size-icon-sm [&>svg]:shrink-0',\n          className,\n        ),\n        children: (\n          <>\n            {icon}\n            <ButtonLabel variant=\"link\">{children}</ButtonLabel>\n          </>\n        ),\n      },\n      props,\n    ),\n  });\n}\n","export interface NoticeMessageProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport function NoticeMessage({ children, className }: NoticeMessageProps) {\n  return <div className={className}>{children}</div>;\n}\n","import { FileTextIcon, InfoIcon, LightbulbIcon, OctagonAlertIcon, TriangleAlertIcon, XIcon } from 'lucide-react';\nimport { Children } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Button } from '../Button/Button';\nimport './notice.css';\nimport { cn } from '@/lib/utils';\n\nexport type NoticeVariant = 'warning' | 'destructive' | 'success' | 'info' | 'note';\n\nconst variantConfig: Record<NoticeVariant, { icon: ReactNode; iconClass: string }> = {\n  success: { icon: <LightbulbIcon />, iconClass: 'text-success-indicator' },\n  destructive: { icon: <OctagonAlertIcon />, iconClass: 'text-destructive-indicator' },\n  warning: { icon: <TriangleAlertIcon />, iconClass: 'text-warning-foreground' },\n  info: { icon: <InfoIcon />, iconClass: 'text-info-indicator' },\n  note: { icon: <FileTextIcon />, iconClass: 'text-muted-foreground' },\n};\n\nfunction hasContent(content: ReactNode) {\n  return Children.toArray(content).some(child => child !== '');\n}\n\nexport interface NoticeRootProps extends Omit<ComponentProps<'div'>, 'title'> {\n  variant: NoticeVariant;\n  title?: ReactNode;\n  icon?: ReactNode;\n  action?: ReactNode;\n  actionPlacement?: 'below' | 'end';\n  onDismiss?: () => void;\n}\n\nexport function NoticeRoot({\n  variant,\n  title,\n  icon,\n  action,\n  actionPlacement = 'below',\n  onDismiss,\n  children,\n  className,\n  ...props\n}: NoticeRootProps) {\n  const { icon: defaultIcon, iconClass } = variantConfig[variant];\n  const hasTitle = hasContent(title);\n  const hasMessage = hasContent(children);\n  const hasAction = hasContent(action);\n\n  return (\n    <div\n      {...props}\n      data-slot=\"notice\"\n      data-tone={variant}\n      data-action-placement={actionPlacement}\n      className={cn('relative grid min-w-0 gap-x-3 rounded-lg p-3 text-body-sm', onDismiss && 'pe-11', className)}\n    >\n      {(hasTitle || hasMessage || hasAction) && (\n        <span\n          data-slot=\"notice-icon\"\n          aria-hidden\n          className={cn('flex size-5 shrink-0 items-center justify-center [&>svg]:size-icon-sm', iconClass)}\n        >\n          {icon ?? defaultIcon}\n        </span>\n      )}\n      {(hasTitle || hasMessage) && (\n        <div data-slot=\"notice-content\" className=\"flex min-w-0 flex-col gap-1 wrap-anywhere\">\n          {hasTitle && <div className=\"text-subheading\">{title}</div>}\n          {hasMessage && <div className=\"flex min-w-0 flex-col gap-2\">{children}</div>}\n        </div>\n      )}\n      {hasAction && (\n        <div data-slot=\"notice-action\" className=\"flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2\">\n          {action}\n        </div>\n      )}\n      {onDismiss && (\n        <Button\n          type=\"button\"\n          variant=\"ghost\"\n          size=\"icon-sm\"\n          className=\"absolute end-2 top-2 before:absolute before:-inset-2\"\n          tooltip=\"Dismiss notice\"\n          onClick={onDismiss}\n        >\n          <XIcon />\n        </Button>\n      )}\n    </div>\n  );\n}\n","import { NoticeButton } from './notice-button';\nimport { NoticeMessage } from './notice-message';\nimport { NoticeRoot } from './notice-root';\n\nexport { type NoticeVariant, type NoticeRootProps } from './notice-root';\nexport { type NoticeMessageProps } from './notice-message';\n\nexport const Notice = Object.assign(NoticeRoot, {\n  Message: NoticeMessage,\n  Button: NoticeButton,\n});\n"],"mappings":";;;;;;;;AAWA,SAAS,kBAAkB,QAAqC;CAC9D,IAAI,CAAC,UAAW,eAAe,MAAM,KAAK,OAAO,SAAS,UAAW,OAAO,EAAE,MAAM,SAAkB;CACtG,OAAO,CAAC;AACV;AAEA,SAAgB,aAAa,EAAE,QAAQ,MAAM,WAAW,UAAU,GAAG,SAA4B;CAC/F,OAAO,UAAU;EACf,gBAAgB;EAChB;EACA,OAAO,WACL,kBAAkB,MAAM,GACxB;GACE,WAAW,GACT,eAAe,EAAE,SAAS,OAAO,CAAC,GAClC,iEACA,SACF;GACA,UACE,qBAAAA,YAAA,EAAA,UAAA,CACG,MACD,oBAAC,aAAD;IAAa,SAAQ;IAAQ;GAAsB,CAAA,CACnD,EAAA,CAAA;EAEN,GACA,KACF;CACF,CAAC;AACH;;ACjCA,SAAgB,cAAc,EAAE,UAAU,aAAiC;CACzE,OAAO,oBAAC,OAAD;EAAgB;EAAY;CAAc,CAAA;AACnD;;ACEA,IAAM,gBAA+E;CACnF,SAAS;EAAE,MAAM,oBAAC,eAAD,CAAgB,CAAA;EAAG,WAAW;CAAyB;CACxE,aAAa;EAAE,MAAM,oBAAC,kBAAD,CAAmB,CAAA;EAAG,WAAW;CAA6B;CACnF,SAAS;EAAE,MAAM,oBAAC,mBAAD,CAAoB,CAAA;EAAG,WAAW;CAA0B;CAC7E,MAAM;EAAE,MAAM,oBAAC,UAAD,CAAW,CAAA;EAAG,WAAW;CAAsB;CAC7D,MAAM;EAAE,MAAM,oBAAC,cAAD,CAAe,CAAA;EAAG,WAAW;CAAwB;AACrE;AAEA,SAAS,WAAW,SAAoB;CACtC,OAAO,SAAS,QAAQ,OAAO,CAAC,CAAC,MAAK,UAAS,UAAU,EAAE;AAC7D;AAWA,SAAgB,WAAW,EACzB,SACA,OACA,MACA,QACA,kBAAkB,SAClB,WACA,UACA,WACA,GAAG,SACe;CAClB,MAAM,EAAE,MAAM,aAAa,cAAc,cAAc;CACvD,MAAM,WAAW,WAAW,KAAK;CACjC,MAAM,aAAa,WAAW,QAAQ;CACtC,MAAM,YAAY,WAAW,MAAM;CAEnC,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,aAAU;EACV,aAAW;EACX,yBAAuB;EACvB,WAAW,GAAG,6DAA6D,aAAa,SAAS,SAAS;EAL5G,UAAA;IAOI,YAAY,cAAc,cAC1B,oBAAC,QAAD;IACE,aAAU;IACV,eAAA;IACA,WAAW,GAAG,yEAAyE,SAAS;IAE/F,UAAA,QAAQ;GACL,CAAA;IAEN,YAAY,eACZ,qBAAC,OAAD;IAAK,aAAU;IAAiB,WAAU;IAA1C,UAAA,CACG,YAAY,oBAAC,OAAD;KAAK,WAAU;KAAmB,UAAA;IAAW,CAAA,GACzD,cAAc,oBAAC,OAAD;KAAK,WAAU;KAA+B;IAAc,CAAA,CACxE;;GAEN,aACC,oBAAC,OAAD;IAAK,aAAU;IAAgB,WAAU;IACtC,UAAA;GACE,CAAA;GAEN,aACC,oBAAC,QAAD;IACE,MAAK;IACL,SAAQ;IACR,MAAK;IACL,WAAU;IACV,SAAQ;IACR,SAAS;IAET,UAAA,oBAAC,OAAD,CAAQ,CAAA;GACF,CAAA;EAEP;;AAET;;ACjFA,IAAa,SAAS,OAAO,OAAO,YAAY;CAC9C,SAAS;CACT,QAAQ;AACV,CAAC"}