@botiverse/raft-ui 0.50.0 → 0.52.0

package/dist/components/system-message/system-message.mjs

@@ -0,0 +1,113 @@
+import { cn } from "../../cn.mjs";
+import { messageSystem } from "./system-message.recipe.mjs";
+import { ChevronRight } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/system-message/system-message.tsx
+function SystemMessage({ className, render, ...props }) {
+	const { systemRoot } = messageSystem();
+	const defaultProps = { className: systemRoot({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "system-message-item" }
+	});
+}
+function SystemMessageTime({ className, render, ...props }) {
+	const { systemTime } = messageSystem();
+	const defaultProps = { className: systemTime({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "system-message-item-time" }
+	});
+}
+function SystemMessageContent({ children, className, render, title, ...props }) {
+	const { systemContent } = messageSystem();
+	const defaultProps = {
+		className: systemContent({ className }),
+		children,
+		title: title ?? (typeof children === "string" ? children : void 0)
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "system-message-item-content" }
+	});
+}
+function SystemMessageGroup({ className, render, ...props }) {
+	const { systemGroup } = messageSystem();
+	const defaultProps = {
+		"data-slot": "system-message-group",
+		className: systemGroup({ className })
+	};
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		render,
+		...mergeProps(defaultProps, props)
+	});
+}
+function SystemMessageGroupHeader({ className, render, ...props }) {
+	const { systemGroupHeader } = messageSystem();
+	const defaultProps = {
+		"data-slot": "system-message-group-header",
+		className: systemGroupHeader({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SystemMessageGroupDisclosure({ className, render, ...props }) {
+	const { systemGroupDisclosure } = messageSystem();
+	const defaultProps = {
+		type: "button",
+		"data-slot": "system-message-group-disclosure",
+		className: systemGroupDisclosure({ className })
+	};
+	return useRender({
+		render: render ?? /* @__PURE__ */ jsx(Collapsible.Trigger, {}),
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SystemMessageGroupSummary({ className, render, ...props }) {
+	const { systemGroupSummary } = messageSystem();
+	const defaultProps = {
+		"data-slot": "system-message-group-summary",
+		className: systemGroupSummary({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SystemMessageGroupChevron({ className, render, ...props }) {
+	const { systemGroupChevron } = messageSystem();
+	const defaultProps = {
+		"data-slot": "system-message-group-chevron",
+		"aria-hidden": true,
+		className: systemGroupChevron({ className })
+	};
+	return useRender({
+		render: render ?? /* @__PURE__ */ jsx(ChevronRight, {}),
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SystemMessageGroupPanel({ className, render, ...props }) {
+	const defaultProps = {
+		"data-slot": "system-message-group-panel",
+		className: cn(className)
+	};
+	return /* @__PURE__ */ jsx(Collapsible.Panel, {
+		render,
+		...mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { SystemMessage, SystemMessageContent, SystemMessageGroup, SystemMessageGroupChevron, SystemMessageGroupDisclosure, SystemMessageGroupHeader, SystemMessageGroupPanel, SystemMessageGroupSummary, SystemMessageTime };

package/dist/components/system-message/system-message.recipe.mjs

@@ -0,0 +1,34 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/system-message/system-message.recipe.ts
+const messageSystem = tv({ slots: {
+	systemRoot: [
+		"flex min-w-0 items-center justify-center",
+		"gap-2 px-4 pt-timeline-lead pb-timeline-row in-data-[slot=system-message-group-panel]:py-1.5",
+		"font-mono text-mono-meta text-foreground-hint",
+		"before:min-w-3 before:flex-1 before:border-t before:border-line-hairline",
+		"after:min-w-3 after:flex-1 after:border-t after:border-line-hairline"
+	],
+	systemTime: ["shrink-0 whitespace-nowrap", "font-mono text-mono-meta text-foreground-hint"],
+	systemContent: ["min-w-0 truncate", "text-foreground-hint"],
+	systemGroup: ["group/system-group"],
+	systemGroupHeader: [
+		"flex justify-center",
+		"items-center gap-2 px-4",
+		"pt-[calc(var(--spacing-timeline-lead)-(--spacing(7)-var(--text-mono-meta--line-height))/2)]",
+		"mb-[calc(var(--spacing-timeline-row)-(--spacing(7)-var(--text-mono-meta--line-height))/2)] group-data-open/system-group:mb-0 group-data-open/system-group:pb-1.5",
+		"before:min-w-3 before:flex-1 before:border-t before:border-line-hairline",
+		"after:min-w-3 after:flex-1 after:border-t after:border-line-hairline"
+	],
+	systemGroupDisclosure: [
+		"group relative flex max-w-full items-center",
+		"[&[data-panel-open]_[data-slot=system-message-group-chevron]]:-rotate-90",
+		"h-7 gap-1 rounded-control px-2 py-0",
+		"font-mono text-mono-meta text-foreground-hint",
+		"hover:bg-fill-medium hover:text-foreground active:bg-fill-medium",
+		"outline-none focus-visible:shadow-focus"
+	],
+	systemGroupSummary: ["truncate"],
+	systemGroupChevron: ["size-3 shrink-0 rotate-90 transition-transform", "text-foreground-hint"]
+} });
+//#endregion
+export { messageSystem };

package/dist/components/table/index.d.mts

@@ -0,0 +1,2 @@
+import { Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableColgroup, TableColgroupProps, TableColumn, TableColumnProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps } from "./table.mjs";
+export { Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableColgroup, type TableColgroupProps, TableColumn, type TableColumnProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps };

package/dist/components/table/table.d.mts

@@ -0,0 +1,35 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/table/table.d.ts
+type TableProps = StyledProps<useRender.ComponentProps<"table">>;
+type TableHeaderProps = StyledProps<useRender.ComponentProps<"thead">>;
+type TableBodyProps = StyledProps<useRender.ComponentProps<"tbody">>;
+type TableRowProps = StyledProps<useRender.ComponentProps<"tr">>;
+type TableHeadProps = StyledProps<useRender.ComponentProps<"th">>;
+type TableCellProps = StyledProps<useRender.ComponentProps<"td">>;
+type TableColgroupProps = StyledProps<useRender.ComponentProps<"colgroup">>;
+type TableColumnProps = StyledProps<useRender.ComponentProps<"col">>;
+type TableCaptionProps = StyledProps<useRender.ComponentProps<"caption">>;
+/**
+ * Native `<table>` semantics with the kit's chrome: render real
+ * table/thead/tbody/tr/th/td elements (useRender passthrough), so `scope`,
+ * screen-reader navigation and keyboard behaviour stay intact. A caller that
+ * wants a visually header-less table keeps its `<TableHead>` and hides it with
+ * `sr-only`; omitting the header would drop the semantics.
+ */
+export declare function Table({ className, render, ...props }: TableProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function TableHeader({ className, render, ...props }: TableHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function TableBody({ className, render, ...props }: TableBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function TableRow({ className, render, ...props }: TableRowProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function TableHead({ className, render, scope, ...props }: TableHeadProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function TableCell({ className, render, ...props }: TableCellProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/**
+ * The table's accessible name. Render it visually or hide it with `sr-only`;
+ * a table without a caption should carry `aria-label` instead.
+ */
+export declare function TableCaption({ className, render, ...props }: TableCaptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Column-width declarations: pair with `<Table className="table-fixed">`. */
+export declare function TableColgroup({ className, render, ...props }: TableColgroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare function TableColumn({ className, render, ...props }: TableColumnProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export type { TableBodyProps, TableCaptionProps, TableCellProps, TableColgroupProps, TableColumnProps, TableHeadProps, TableHeaderProps, TableProps, TableRowProps };

package/dist/components/table/table.mjs

@@ -0,0 +1,102 @@
+import { table } from "./table.recipe.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/table/table.tsx
+/**
+* Native `<table>` semantics with the kit's chrome: render real
+* table/thead/tbody/tr/th/td elements (useRender passthrough), so `scope`,
+* screen-reader navigation and keyboard behaviour stay intact. A caller that
+* wants a visually header-less table keeps its `<TableHead>` and hides it with
+* `sr-only`; omitting the header would drop the semantics.
+*/
+function Table({ className, render, ...props }) {
+	const { root } = table();
+	return useRender({
+		defaultTagName: "table",
+		render,
+		props: mergeProps({ className: root({ className }) }, props),
+		state: { slot: "table" }
+	});
+}
+function TableHeader({ className, render, ...props }) {
+	const { header } = table();
+	return useRender({
+		defaultTagName: "thead",
+		render,
+		props: mergeProps({ className: header({ className }) }, props),
+		state: { slot: "table-header" }
+	});
+}
+function TableBody({ className, render, ...props }) {
+	const { body } = table();
+	return useRender({
+		defaultTagName: "tbody",
+		render,
+		props: mergeProps({ className: body({ className }) }, props),
+		state: { slot: "table-body" }
+	});
+}
+function TableRow({ className, render, ...props }) {
+	const { row } = table();
+	return useRender({
+		defaultTagName: "tr",
+		render,
+		props: mergeProps({ className: row({ className }) }, props),
+		state: { slot: "table-row" }
+	});
+}
+function TableHead({ className, render, scope = "col", ...props }) {
+	const { head } = table();
+	return useRender({
+		defaultTagName: "th",
+		render,
+		props: mergeProps({
+			scope,
+			className: head({ className })
+		}, props),
+		state: { slot: "table-head" }
+	});
+}
+function TableCell({ className, render, ...props }) {
+	const { cell } = table();
+	return useRender({
+		defaultTagName: "td",
+		render,
+		props: mergeProps({ className: cell({ className }) }, props),
+		state: { slot: "table-cell" }
+	});
+}
+/**
+* The table's accessible name. Render it visually or hide it with `sr-only`;
+* a table without a caption should carry `aria-label` instead.
+*/
+function TableCaption({ className, render, ...props }) {
+	const { caption } = table();
+	return useRender({
+		defaultTagName: "caption",
+		render,
+		props: mergeProps({ className: caption({ className }) }, props),
+		state: { slot: "table-caption" }
+	});
+}
+/** Column-width declarations: pair with `<Table className="table-fixed">`. */
+function TableColgroup({ className, render, ...props }) {
+	const { colgroup } = table();
+	return useRender({
+		defaultTagName: "colgroup",
+		render,
+		props: mergeProps({ className: colgroup({ className }) }, props),
+		state: { slot: "table-colgroup" }
+	});
+}
+function TableColumn({ className, render, ...props }) {
+	const { column } = table();
+	return useRender({
+		defaultTagName: "col",
+		render,
+		props: mergeProps({ className: column({ className }) }, props),
+		state: { slot: "table-column" }
+	});
+}
+//#endregion
+export { Table, TableBody, TableCaption, TableCell, TableColgroup, TableColumn, TableHead, TableHeader, TableRow };

package/dist/components/table/table.recipe.mjs

@@ -0,0 +1,31 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/table/table.recipe.ts
+/**
+* The settings-grade table: unified header, row separators and cell padding in
+* the shared theme language (matching the markdown table's chrome tokens).
+* Column widths are the caller's business — pair `<TableColgroup>` with the
+* `table-fixed` class when stable widths matter; the base writes no
+* `table-layout` so that override is always available.
+*/
+const table = tv({ slots: {
+	root: ["w-full border-collapse caption-bottom", "font-sans text-callout text-foreground"],
+	header: [],
+	body: ["[&>tr:last-child>td]:border-b-0 [&>tr:last-child>th]:border-b-0", "[&>tr]:hover:bg-fill-subtle [&>tr]:active:bg-fill-medium"],
+	row: [
+		"not-aria-selected:not-data-[selected=true]:data-popup-open:bg-fill-subtle",
+		"not-aria-selected:not-data-[selected=true]:has-data-popup-open:bg-fill-subtle",
+		"aria-selected:bg-info-soft aria-selected:hover:bg-info-soft aria-selected:active:bg-info-soft",
+		"data-[selected=true]:bg-info-soft data-[selected=true]:hover:bg-info-soft data-[selected=true]:active:bg-info-soft"
+	],
+	head: [
+		"text-left whitespace-nowrap",
+		"border-b border-line-hairline px-3 py-2",
+		"text-footnote font-bold normal-case tracking-normal text-foreground-hint"
+	],
+	cell: ["align-top wrap-anywhere", "border-b border-line-hairline px-3 py-2"],
+	colgroup: [],
+	column: [],
+	caption: ["pt-2 text-caption text-foreground-hint"]
+} });
+//#endregion
+export { table };

package/dist/components/tabs/index.d.mts

@@ -0,0 +1,2 @@
+import { OrderedTabItem, SortableTabsList, SortableTabsListProps, SortableTabsTab, SortableTabsTabProps, Tabs, TabsLabel, TabsLabelProps, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsPlacement, TabsProps, TabsTab, TabsTabProps, useOrderedTabs } from "./tabs.mjs";
+export { type OrderedTabItem, SortableTabsList, type SortableTabsListProps, SortableTabsTab, type SortableTabsTabProps, Tabs, TabsLabel, type TabsLabelProps, TabsList, type TabsListProps, TabsPanel, type TabsPanelProps, type TabsPlacement, type TabsProps, TabsTab, type TabsTabProps, useOrderedTabs };

package/dist/components/tabs/tabs.d.mts

@@ -0,0 +1,185 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { VariantProps } from "../../lib/tv.mjs";
+import { DragMessages } from "../drag/drag-announcements.mjs";
+import { ComponentPropsWithRef } from "react";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/tabs/tabs.d.ts
+declare const tabs: import("tailwind-variants/lite").TVReturnType<{
+  variant: {
+    default: {
+      list: string[];
+      tab: string[];
+    };
+    underline: {
+      list: string[];
+      tab: string[];
+    };
+  };
+  placement: {
+    top: {
+      list: string[];
+    };
+    bottom: {
+      root: string;
+      list: string[];
+    };
+    left: {
+      root: string;
+      panel: string;
+      list: string[];
+      tab: string[];
+    };
+    right: {
+      root: string;
+      list: string[];
+      panel: string;
+      tab: string[];
+    };
+  };
+}, {
+  root: string[];
+  list: string[];
+  background: string[];
+  tab: string[];
+  content: string[];
+  label: string[];
+  panel: string[];
+  indicator: string[];
+}, undefined, {
+  variant: {
+    default: {
+      list: string[];
+      tab: string[];
+    };
+    underline: {
+      list: string[];
+      tab: string[];
+    };
+  };
+  placement: {
+    top: {
+      list: string[];
+    };
+    bottom: {
+      root: string;
+      list: string[];
+    };
+    left: {
+      root: string;
+      panel: string;
+      list: string[];
+      tab: string[];
+    };
+    right: {
+      root: string;
+      list: string[];
+      panel: string;
+      tab: string[];
+    };
+  };
+}, {
+  root: string[];
+  list: string[];
+  background: string[];
+  tab: string[];
+  content: string[];
+  label: string[];
+  panel: string[];
+  indicator: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  variant: {
+    default: {
+      list: string[];
+      tab: string[];
+    };
+    underline: {
+      list: string[];
+      tab: string[];
+    };
+  };
+  placement: {
+    top: {
+      list: string[];
+    };
+    bottom: {
+      root: string;
+      list: string[];
+    };
+    left: {
+      root: string;
+      panel: string;
+      list: string[];
+      tab: string[];
+    };
+    right: {
+      root: string;
+      list: string[];
+      panel: string;
+      tab: string[];
+    };
+  };
+}, {
+  root: string[];
+  list: string[];
+  background: string[];
+  tab: string[];
+  content: string[];
+  label: string[];
+  panel: string[];
+  indicator: string[];
+}>>;
+/** Exported for the merge-contract test. */
+export type TabsPlacement = "top" | "bottom" | "left" | "right";
+type TabsListVariant = "default" | "underline";
+export type TabsProps<T extends string = string> = StyledProps<Omit<Tabs.Root.Props, "defaultValue" | "onValueChange" | "value">> & Omit<VariantProps<typeof tabs>, "placement"> & {
+  /**
+   * Side of the panels the tab list sits on. `left` and `right` also make the
+   * tabs vertical (arrow up / down) unless `orientation` is set.
+   */
+  placement?: TabsPlacement;
+  value?: T;
+  defaultValue?: T;
+  onValueChange?: (value: T, eventDetails: Tabs.Root.ChangeEventDetails) => void;
+};
+declare function Tabs$1<T extends string = string>({ value, defaultValue, onValueChange, placement, orientation, className, ...props }: TabsProps<T>): import("react").JSX.Element;
+export type TabsListProps = StyledProps<Tabs.List.Props> & {
+  variant?: TabsListVariant;
+};
+export declare function TabsList({ className, children, variant, ref, ...props }: TabsListProps): import("react").JSX.Element;
+export type SortableTabsListProps<T extends string = string> = TabsListProps & {
+  value: readonly T[];
+  onReorder: (value: T[]) => void;
+  /** A tab was picked up. On a touch screen the long press that armed it may
+   *  have opened a menu the caller owns: close it here (DS › States ›
+   *  Dragging on a touch screen). */
+  onDragStart?: (value: T) => void;
+  /**
+   * Your translations of the drag's instructions and announcements. Each step
+   * is said by the tab's name (its `aria-label` or text) and its position in
+   * the row, named after the list's `aria-label`; never by its value.
+   */
+  messages?: Partial<DragMessages>;
+  /**
+   * Where the lifted copy renders: `document.body` by default, so a
+   * transformed ancestor (a drawer, a dialog) doesn't offset it. `null`
+   * renders it in place.
+   */
+  container?: Element | DocumentFragment | null;
+};
+export declare function SortableTabsList<T extends string = string>({ value, onReorder, onDragStart, messages, container, children, variant, ...props }: SortableTabsListProps<T>): import("react").JSX.Element;
+export type TabsTabProps<T extends string = string> = StyledProps<Tabs.Tab.Props> & {
+  value: T;
+};
+export declare function TabsTab<T extends string = string>({ value, ...props }: TabsTabProps<T>): import("react").JSX.Element;
+export type SortableTabsTabProps<T extends string = string> = TabsTabProps<T>;
+export declare function SortableTabsTab<T extends string = string>({ value, ...props }: SortableTabsTabProps<T>): import("react").JSX.Element;
+export type TabsLabelProps = ComponentPropsWithRef<"span">;
+export declare function TabsLabel({ className, ...props }: TabsLabelProps): import("react").JSX.Element;
+export type TabsPanelProps = StyledProps<Tabs.Panel.Props>;
+export declare function TabsPanel({ className, ...props }: TabsPanelProps): import("react").JSX.Element;
+export type OrderedTabItem<T extends string = string> = {
+  id: T;
+};
+export declare function useOrderedTabs<T extends OrderedTabItem<string>>(items: readonly T[], storedOrder: readonly string[]): T[];
+//#endregion
+export { Tabs$1 as Tabs };