@botiverse/raft-ui 0.51.0 → 0.52.1

package/dist/components/tasks/task-loading.mjs

@@ -0,0 +1,32 @@
+import { taskLoading } from "./task-loading.recipe.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/tasks/task-loading.tsx
+function TaskLoadingList({ className, render, ...props }) {
+	const { list } = taskLoading();
+	const defaultProps = {
+		"data-slot": "task-loading-list",
+		"aria-busy": true,
+		className: list({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TaskLoadingRow({ className, render, ...props }) {
+	const { row } = taskLoading();
+	const defaultProps = {
+		"data-slot": "task-loading-row",
+		"aria-hidden": true,
+		className: row({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { TaskLoadingList, TaskLoadingRow };

package/dist/components/tasks/task-loading.recipe.mjs

@@ -0,0 +1,8 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/tasks/task-loading.recipe.ts
+const taskLoading = tv({ slots: {
+	list: ["flex flex-col gap-2"],
+	row: ["flex min-w-0 flex-col p-3", "gap-2 rounded-container border border-line-hairline bg-layer-card shadow-none"]
+} });
+//#endregion
+export { taskLoading };

package/dist/components/tasks/task-status-badge.d.mts

@@ -0,0 +1,24 @@
+import { TaskStatusId } from "./task-status.recipe.mjs";
+import { TaskChipSize } from "./task-chip.mjs";
+import { ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/tasks/task-status-badge.d.ts
+export interface TaskStatusBadgeProps extends useRender.ComponentProps<"span"> {
+  status: TaskStatusId;
+  /** Badge text. The caller owns the copy (and its localization); Raft never
+   *  hardcodes a status label here. */
+  children?: ReactNode;
+  /** Same as `TaskChip`'s `size`: `sm` lines up with an `sm` Badge. */
+  size?: TaskChipSize;
+}
+/**
+ * A task status with its label: the status icon + caller-provided text.
+ *
+ * This is `TaskChip` showing a status name instead of a task number. It has no
+ * look of its own: a status badge in the task panel and a task chip in a
+ * message are one component that differs only in what it shows, so shape,
+ * size, border and colour all come from `TaskChip`. The slot name is kept for callers that select on it.
+ */
+declare function TaskStatusBadgeRoot({ status, children, ...props }: TaskStatusBadgeProps): import("react").JSX.Element;
+export declare const TaskStatusBadge: typeof TaskStatusBadgeRoot;
+//#endregion

package/dist/components/tasks/task-status-badge.mjs

@@ -0,0 +1,24 @@
+import { TaskStatusIcon } from "./task-status-icon.mjs";
+import { TaskChip } from "./task-chip.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/tasks/task-status-badge.tsx
+/**
+* A task status with its label: the status icon + caller-provided text.
+*
+* This is `TaskChip` showing a status name instead of a task number. It has no
+* look of its own: a status badge in the task panel and a task chip in a
+* message are one component that differs only in what it shows, so shape,
+* size, border and colour all come from `TaskChip`. The slot name is kept for callers that select on it.
+*/
+function TaskStatusBadgeRoot({ status, children, ...props }) {
+	return /* @__PURE__ */ jsxs(TaskChip, {
+		status,
+		"data-slot": "task-status-badge",
+		"data-status": status,
+		...props,
+		children: [/* @__PURE__ */ jsx(TaskStatusIcon, { status }), children]
+	});
+}
+const TaskStatusBadge = Object.assign(TaskStatusBadgeRoot, {});
+//#endregion
+export { TaskStatusBadge };

package/dist/components/tasks/task-status-icon.d.mts

@@ -0,0 +1,13 @@
+import { TaskStatusId } from "./task-status.recipe.mjs";
+import { SVGProps } from "react";
+//#region src/components/tasks/task-status-icon.d.ts
+export declare function TaskTodoIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function TaskInProgressIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function TaskInReviewIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function TaskDoneIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function TaskClosedIcon(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;
+export declare function TaskStatusIcon({ status, className, ...props }: {
+  status: TaskStatusId;
+  className?: string;
+} & SVGProps<SVGSVGElement>): import("react").JSX.Element;
+//#endregion

package/dist/components/tasks/task-status-icon.mjs

@@ -0,0 +1,90 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/tasks/task-status-icon.tsx
+/** Raft draws every status as its pixel: a 10px square in the status colour
+*  with a 1.5px sticker-ink edge (2px outer radius), the size of every status
+*  light beside text (status.md#sizes). The square keeps its size
+*  and sits centred in whatever box the context gives the icon, so an icon
+*  slot sized for a glyph still shows the same pixel. */
+const TASK_STATUS_PIXEL_STYLE = {
+	todo: {
+		fill: "var(--task-status-todo)",
+		stroke: "var(--sticker-ink)"
+	},
+	"in-progress": {
+		fill: "var(--task-status-in-progress)",
+		stroke: "var(--sticker-ink)"
+	},
+	"in-review": {
+		fill: "var(--task-status-in-review)",
+		stroke: "var(--sticker-ink)"
+	},
+	done: {
+		fill: "var(--task-status-done)",
+		stroke: "var(--sticker-ink)"
+	},
+	closed: {
+		fill: "var(--task-status-closed)",
+		stroke: "var(--sticker-ink)"
+	}
+};
+function TaskStatusPixel({ status, className, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": true,
+		"data-slot": "task-status-icon",
+		"data-status": status,
+		width: "10",
+		height: "10",
+		overflow: "visible",
+		className,
+		...props,
+		children: /* @__PURE__ */ jsx("rect", {
+			x: "50%",
+			y: "50%",
+			width: "8.5",
+			height: "8.5",
+			rx: "1.25",
+			strokeWidth: "1.5",
+			transform: "translate(-4.25 -4.25)",
+			style: TASK_STATUS_PIXEL_STYLE[status]
+		})
+	});
+}
+function TaskTodoIcon(props) {
+	return /* @__PURE__ */ jsx(TaskStatusPixel, {
+		status: "todo",
+		...props
+	});
+}
+function TaskInProgressIcon(props) {
+	return /* @__PURE__ */ jsx(TaskStatusPixel, {
+		status: "in-progress",
+		...props
+	});
+}
+function TaskInReviewIcon(props) {
+	return /* @__PURE__ */ jsx(TaskStatusPixel, {
+		status: "in-review",
+		...props
+	});
+}
+function TaskDoneIcon(props) {
+	return /* @__PURE__ */ jsx(TaskStatusPixel, {
+		status: "done",
+		...props
+	});
+}
+function TaskClosedIcon(props) {
+	return /* @__PURE__ */ jsx(TaskStatusPixel, {
+		status: "closed",
+		...props
+	});
+}
+function TaskStatusIcon({ status, className, ...props }) {
+	return /* @__PURE__ */ jsx(TaskStatusPixel, {
+		status,
+		className,
+		...props
+	});
+}
+//#endregion
+export { TaskClosedIcon, TaskDoneIcon, TaskInProgressIcon, TaskInReviewIcon, TaskStatusIcon, TaskTodoIcon };

package/dist/components/tasks/task-status.recipe.d.mts

@@ -0,0 +1,62 @@
+//#region src/components/tasks/task-status.recipe.d.ts
+export type TaskStatusId = "todo" | "in-progress" | "in-review" | "done" | "closed";
+export declare const TASK_STATUS_IDS: readonly TaskStatusId[];
+/**
+ * A task status's colour is the `task-status-*` token scale (see
+ * `foundation.css`): every task-status surface (the pixel, the chip, the badge,
+ * the Timeline dot) reads the same token for a given status, so they cannot
+ * drift apart.
+ */
+/** The soft (washed) background for a status: the chip and the card status. */
+export declare const taskStatusSoft: import("tailwind-variants/lite").TVReturnType<{
+  status: {
+    todo: "bg-task-status-todo-soft";
+    "in-progress": "bg-task-status-in-progress-soft";
+    "in-review": "bg-task-status-in-review-soft";
+    done: "bg-task-status-done-soft";
+    closed: "bg-task-status-closed-soft";
+  };
+}, undefined, undefined, {
+  status: {
+    todo: "bg-task-status-todo-soft";
+    "in-progress": "bg-task-status-in-progress-soft";
+    "in-review": "bg-task-status-in-review-soft";
+    done: "bg-task-status-done-soft";
+    closed: "bg-task-status-closed-soft";
+  };
+}, undefined, import("tailwind-variants/lite").TVReturnTypeLike<{
+  status: {
+    todo: "bg-task-status-todo-soft";
+    "in-progress": "bg-task-status-in-progress-soft";
+    "in-review": "bg-task-status-in-review-soft";
+    done: "bg-task-status-done-soft";
+    closed: "bg-task-status-closed-soft";
+  };
+}, undefined>>;
+/** The strong (readable-on-soft) ink slot for a status. */
+export declare const taskStatusStrong: import("tailwind-variants/lite").TVReturnType<{
+  status: {
+    todo: "text-task-status-todo-strong";
+    "in-progress": "text-task-status-in-progress-strong";
+    "in-review": "text-task-status-in-review-strong";
+    done: "text-task-status-done-strong";
+    closed: "text-task-status-closed-strong";
+  };
+}, undefined, undefined, {
+  status: {
+    todo: "text-task-status-todo-strong";
+    "in-progress": "text-task-status-in-progress-strong";
+    "in-review": "text-task-status-in-review-strong";
+    done: "text-task-status-done-strong";
+    closed: "text-task-status-closed-strong";
+  };
+}, undefined, import("tailwind-variants/lite").TVReturnTypeLike<{
+  status: {
+    todo: "text-task-status-todo-strong";
+    "in-progress": "text-task-status-in-progress-strong";
+    "in-review": "text-task-status-in-review-strong";
+    done: "text-task-status-done-strong";
+    closed: "text-task-status-closed-strong";
+  };
+}, undefined>>;
+//#endregion

package/dist/components/tasks/task-status.recipe.mjs

@@ -0,0 +1,33 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/tasks/task-status.recipe.ts
+const TASK_STATUS_IDS = [
+	"todo",
+	"in-progress",
+	"in-review",
+	"done",
+	"closed"
+];
+/**
+* A task status's colour is the `task-status-*` token scale (see
+* `foundation.css`): every task-status surface (the pixel, the chip, the badge,
+* the Timeline dot) reads the same token for a given status, so they cannot
+* drift apart.
+*/
+/** The soft (washed) background for a status: the chip and the card status. */
+const taskStatusSoft = tv({ variants: { status: {
+	todo: "bg-task-status-todo-soft",
+	"in-progress": "bg-task-status-in-progress-soft",
+	"in-review": "bg-task-status-in-review-soft",
+	done: "bg-task-status-done-soft",
+	closed: "bg-task-status-closed-soft"
+} } });
+/** The strong (readable-on-soft) ink slot for a status. */
+const taskStatusStrong = tv({ variants: { status: {
+	todo: "text-task-status-todo-strong",
+	"in-progress": "text-task-status-in-progress-strong",
+	"in-review": "text-task-status-in-review-strong",
+	done: "text-task-status-done-strong",
+	closed: "text-task-status-closed-strong"
+} } });
+//#endregion
+export { TASK_STATUS_IDS, taskStatusSoft, taskStatusStrong };

package/dist/components/tasks/tasks-panel.d.mts

@@ -0,0 +1,22 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/tasks/tasks-panel.d.ts
+export type TasksPanelRootProps = useRender.ComponentProps<"section">;
+export declare function TasksPanelRoot({ className, render, ...props }: TasksPanelRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TasksPanelToolbarProps = useRender.ComponentProps<"div">;
+export declare function TasksPanelToolbar({ className, render, ...props }: TasksPanelToolbarProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+/** Generic toolbar cluster. Prefer NewTask / Filters / View for responsive layout. */
+export type TasksPanelToolbarGroupProps = useRender.ComponentProps<"div">;
+export declare function TasksPanelToolbarGroup({ className, render, ...props }: TasksPanelToolbarGroupProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TasksPanelToolbarNewTaskProps = useRender.ComponentProps<"div">;
+export declare function TasksPanelToolbarNewTask({ className, render, ...props }: TasksPanelToolbarNewTaskProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TasksPanelToolbarFiltersProps = useRender.ComponentProps<"div">;
+export declare function TasksPanelToolbarFilters({ className, render, ...props }: TasksPanelToolbarFiltersProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TasksPanelToolbarViewProps = useRender.ComponentProps<"div">;
+export declare function TasksPanelToolbarView({ className, render, ...props }: TasksPanelToolbarViewProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TasksPanelToolbarLabelProps = useRender.ComponentProps<"span">;
+export declare function TasksPanelToolbarLabel({ className, render, ...props }: TasksPanelToolbarLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TasksPanelViewportProps = useRender.ComponentProps<"div">;
+export declare function TasksPanelViewport({ className, render, ...props }: TasksPanelViewportProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TasksPanelEmptyProps = useRender.ComponentProps<"div">;
+export declare function TasksPanelEmpty({ className, render, ...props }: TasksPanelEmptyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/tasks/tasks-panel.mjs

@@ -0,0 +1,114 @@
+import { tasksPanel } from "./tasks-panel.recipe.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/tasks/tasks-panel.tsx
+function TasksPanelRoot({ className, render, ...props }) {
+	const { root } = tasksPanel();
+	const defaultProps = {
+		"data-slot": "tasks-panel-root",
+		className: root({ className })
+	};
+	return useRender({
+		defaultTagName: "section",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TasksPanelToolbar({ className, render, ...props }) {
+	const { toolbar } = tasksPanel();
+	const defaultProps = {
+		"data-slot": "tasks-panel-toolbar",
+		className: toolbar({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TasksPanelToolbarGroup({ className, render, ...props }) {
+	const { toolbarGroup } = tasksPanel();
+	const defaultProps = {
+		"data-slot": "tasks-panel-toolbar-group",
+		className: toolbarGroup({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TasksPanelToolbarNewTask({ className, render, ...props }) {
+	const { toolbarNewTask } = tasksPanel();
+	const defaultProps = {
+		"data-slot": "tasks-panel-toolbar-new-task",
+		className: toolbarNewTask({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TasksPanelToolbarFilters({ className, render, ...props }) {
+	const { toolbarFilters } = tasksPanel();
+	const defaultProps = {
+		"data-slot": "tasks-panel-toolbar-filters",
+		className: toolbarFilters({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TasksPanelToolbarView({ className, render, ...props }) {
+	const { toolbarView } = tasksPanel();
+	const defaultProps = {
+		"data-slot": "tasks-panel-toolbar-view",
+		className: toolbarView({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TasksPanelToolbarLabel({ className, render, ...props }) {
+	const { toolbarLabel } = tasksPanel();
+	const defaultProps = {
+		"data-slot": "tasks-panel-toolbar-label",
+		className: toolbarLabel({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TasksPanelViewport({ className, render, ...props }) {
+	const { viewport } = tasksPanel();
+	const defaultProps = {
+		"data-slot": "tasks-panel-viewport",
+		className: viewport({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function TasksPanelEmpty({ className, render, ...props }) {
+	const { empty } = tasksPanel();
+	const defaultProps = {
+		"data-slot": "tasks-panel-empty",
+		className: empty({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { TasksPanelEmpty, TasksPanelRoot, TasksPanelToolbar, TasksPanelToolbarFilters, TasksPanelToolbarGroup, TasksPanelToolbarLabel, TasksPanelToolbarNewTask, TasksPanelToolbarView, TasksPanelViewport };

package/dist/components/tasks/tasks-panel.recipe.mjs

@@ -0,0 +1,36 @@
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/tasks/tasks-panel.recipe.ts
+const tasksPanel = tv({ slots: {
+	root: ["@container/tasks flex min-h-0 min-w-0 flex-1 flex-col", "bg-layer-canvas text-foreground"],
+	toolbar: [
+		"grid shrink-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-2",
+		"@min-md/tasks:flex @min-md/tasks:flex-wrap @min-md/tasks:items-center @min-md/tasks:justify-between",
+		"min-h-14 border-b border-line-seam bg-layer-canvas px-5 py-3",
+		"@max-md/tasks:px-4"
+	],
+	toolbarGroup: ["flex flex-wrap items-center gap-2"],
+	toolbarNewTask: ["col-start-1 row-start-1 justify-self-start", "flex flex-wrap items-center gap-2"],
+	toolbarFilters: [
+		"col-span-2 row-start-2 min-w-0",
+		"only:col-auto only:row-auto",
+		"@min-md/tasks:mr-auto",
+		"flex flex-wrap items-center gap-2"
+	],
+	toolbarView: ["col-start-2 row-start-1 justify-self-end", "flex flex-wrap items-center gap-2"],
+	toolbarLabel: [
+		"inline-flex items-center",
+		"[&_svg]:size-3.5 [&_svg]:shrink-0 [&>svg:last-child]:size-3",
+		"h-8 gap-1.5 rounded-control px-2.5",
+		"bg-transparent inset-ring inset-ring-line-seam",
+		"font-sans text-footnote font-semibold text-foreground-muted whitespace-nowrap"
+	],
+	viewport: [
+		"min-h-0 flex-1 overflow-auto overscroll-contain p-4",
+		"pb-[calc(1rem+env(safe-area-inset-bottom,0px))]",
+		"bg-layer-canvas px-5",
+		"@max-md/tasks:px-4"
+	],
+	empty: ["flex h-full flex-col items-center justify-center"]
+} });
+//#endregion
+export { tasksPanel };

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

@@ -0,0 +1,2 @@
+import { Text, TextHeading, TextHeadingProps, TextMono, TextMonoProps, TextSans, TextSansProps } from "./text.mjs";
+export { Text, TextHeading, type TextHeadingProps, TextMono, type TextMonoProps, TextSans, type TextSansProps };

package/dist/components/text/text.d.mts

@@ -0,0 +1,186 @@
+import { VariantProps } from "../../lib/tv.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/text/text.d.ts
+declare const heading: import("tailwind-variants/lite").TVReturnType<{
+  level: {
+    1: string[];
+    2: string[];
+    3: string[];
+    4: string[];
+    5: string[];
+    6: string[];
+  };
+  variant: {
+    default: string[];
+    primary: string[];
+    information: string[];
+    muted: string[];
+    placeholder: string[];
+    accent: string[];
+    success: string[];
+    warning: string[];
+    danger: string[];
+  };
+}, undefined, string[], {
+  level: {
+    1: string[];
+    2: string[];
+    3: string[];
+    4: string[];
+    5: string[];
+    6: string[];
+  };
+  variant: {
+    default: string[];
+    primary: string[];
+    information: string[];
+    muted: string[];
+    placeholder: string[];
+    accent: string[];
+    success: string[];
+    warning: string[];
+    danger: string[];
+  };
+}, undefined, import("tailwind-variants/lite").TVReturnTypeLike<{
+  level: {
+    1: string[];
+    2: string[];
+    3: string[];
+    4: string[];
+    5: string[];
+    6: string[];
+  };
+  variant: {
+    default: string[];
+    primary: string[];
+    information: string[];
+    muted: string[];
+    placeholder: string[];
+    accent: string[];
+    success: string[];
+    warning: string[];
+    danger: string[];
+  };
+}, undefined>>;
+declare const sans: import("tailwind-variants/lite").TVReturnType<{
+  size: {
+    large: string[];
+    body: string[];
+    small: string[];
+    caption: string[];
+    group: string[];
+  };
+  variant: {
+    default: string[];
+    primary: string[];
+    information: string[];
+    muted: string[];
+    placeholder: string[];
+    accent: string[];
+    success: string[];
+    warning: string[];
+    danger: string[];
+  };
+}, undefined, string[], {
+  size: {
+    large: string[];
+    body: string[];
+    small: string[];
+    caption: string[];
+    group: string[];
+  };
+  variant: {
+    default: string[];
+    primary: string[];
+    information: string[];
+    muted: string[];
+    placeholder: string[];
+    accent: string[];
+    success: string[];
+    warning: string[];
+    danger: string[];
+  };
+}, undefined, import("tailwind-variants/lite").TVReturnTypeLike<{
+  size: {
+    large: string[];
+    body: string[];
+    small: string[];
+    caption: string[];
+    group: string[];
+  };
+  variant: {
+    default: string[];
+    primary: string[];
+    information: string[];
+    muted: string[];
+    placeholder: string[];
+    accent: string[];
+    success: string[];
+    warning: string[];
+    danger: string[];
+  };
+}, undefined>>;
+declare const mono: import("tailwind-variants/lite").TVReturnType<{
+  size: {
+    code: string[];
+    meta: string[];
+    tabular: string[];
+  };
+  variant: {
+    default: string[];
+    primary: string[];
+    information: string[];
+    muted: string[];
+    placeholder: string[];
+    accent: string[];
+    success: string[];
+    warning: string[];
+    danger: string[];
+  };
+}, undefined, string[], {
+  size: {
+    code: string[];
+    meta: string[];
+    tabular: string[];
+  };
+  variant: {
+    default: string[];
+    primary: string[];
+    information: string[];
+    muted: string[];
+    placeholder: string[];
+    accent: string[];
+    success: string[];
+    warning: string[];
+    danger: string[];
+  };
+}, undefined, import("tailwind-variants/lite").TVReturnTypeLike<{
+  size: {
+    code: string[];
+    meta: string[];
+    tabular: string[];
+  };
+  variant: {
+    default: string[];
+    primary: string[];
+    information: string[];
+    muted: string[];
+    placeholder: string[];
+    accent: string[];
+    success: string[];
+    warning: string[];
+    danger: string[];
+  };
+}, undefined>>;
+export type TextHeadingProps = useRender.ComponentProps<"h1"> & VariantProps<typeof heading>;
+export declare function TextHeading({ level, variant, className, render, ...props }: TextHeadingProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TextSansProps = useRender.ComponentProps<"p"> & VariantProps<typeof sans>;
+export declare function TextSans({ size, variant, className, render, ...props }: TextSansProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TextMonoProps = useRender.ComponentProps<"p"> & VariantProps<typeof mono>;
+export declare function TextMono({ size, variant, className, render, ...props }: TextMonoProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare const Text: {
+  Heading: typeof TextHeading;
+  Sans: typeof TextSans;
+  Mono: typeof TextMono;
+};
+//#endregion