@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/ellipsis/ellipsis.mjs

@@ -0,0 +1,320 @@
+import { tv } from "../../lib/tv.mjs";
+import { TextLink } from "../text-link/text-link.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
+import { measureContent, observeTruncation, readNow } from "../../lib/truncation.mjs";
+import { createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ellipsis/ellipsis.tsx
+const ellipsis = tv({
+	slots: {
+		root: ["group/ellipsis min-w-0 max-w-full"],
+		text: ["min-w-0"],
+		content: [],
+		spacer: ["float-end h-[calc(100%-1lh)] w-0", "data-hidden:hidden group-data-measuring/ellipsis:hidden"],
+		after: ["data-hidden:hidden group-data-measuring/ellipsis:hidden"]
+	},
+	variants: {
+		multiline: {
+			true: {
+				root: ["flex"],
+				text: ["flex-1", "wrap-break-word"],
+				after: ["float-end clear-end ps-1"]
+			},
+			false: {
+				root: ["inline-flex items-baseline gap-x-1 align-bottom"],
+				after: ["shrink-0"]
+			}
+		},
+		expanded: {
+			true: {},
+			false: {}
+		},
+		clickable: {
+			true: { text: ["cursor-pointer"] },
+			false: {}
+		}
+	},
+	compoundVariants: [
+		{
+			multiline: false,
+			expanded: false,
+			class: { text: ["truncate", "print:overflow-visible print:whitespace-normal"] }
+		},
+		{
+			multiline: false,
+			expanded: true,
+			class: { text: ["wrap-anywhere whitespace-normal"] }
+		},
+		{
+			multiline: true,
+			expanded: false,
+			class: { text: ["line-clamp-(--ellipsis-lines)", "print:line-clamp-none"] }
+		},
+		{
+			multiline: true,
+			expanded: true,
+			class: { text: ["line-clamp-none"] }
+		}
+	]
+});
+const EllipsisContext = createContext(null);
+const INTERACTIVE = "a[href], button, input, select, textarea, summary, [tabindex], [contenteditable]:not([contenteditable='false']), [role='button'], [role='link']";
+const TOUCH_MEDIA_QUERY = "(hover: none), (pointer: coarse)";
+function isTouchScreen() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(TOUCH_MEDIA_QUERY).matches;
+}
+function contains(ref, target) {
+	return target instanceof Node && ref.current?.contains(target) === true;
+}
+function hasSelection(within) {
+	const selection = within.ownerDocument.defaultView?.getSelection();
+	return !!selection && !selection.isCollapsed && selection.anchorNode != null && within.contains(selection.anchorNode);
+}
+function useExpanded(expandedProp, defaultExpanded, onExpandedChange) {
+	const [expandedState, setExpandedState] = useState(defaultExpanded);
+	const expanded = expandedProp ?? expandedState;
+	return [expanded, useCallback(() => {
+		const next = !expanded;
+		if (expandedProp === void 0) setExpandedState(next);
+		onExpandedChange?.(next);
+	}, [
+		expanded,
+		expandedProp,
+		onExpandedChange
+	])];
+}
+/**
+* Registers the text with the shared measurer (lib/truncation.ts) and keeps
+* its answer: whether the text, alone, is cut, and whether it has a control
+* inside. While it is expanded the last collapsed answer is kept, so the
+* text and its control stay what they were until it collapses and is
+* measured again. `layout` names what remounts or reclamps the text.
+*/
+function useTruncation(expanded, layout, onNotTruncated) {
+	const rootRef = useRef(null);
+	const textRef = useRef(null);
+	const contentRef = useRef(null);
+	const afterRef = useRef(null);
+	const setTextRef = useCallback((node) => {
+		textRef.current = node;
+	}, []);
+	const [truncation, setTruncation] = useState(void 0);
+	const [interactive, setInteractive] = useState(false);
+	const expandedRef = useRef(expanded);
+	const targetRef = useRef(null);
+	const commit = useCallback((next) => {
+		setInteractive(contentRef.current?.querySelector(INTERACTIVE) != null);
+		if (expandedRef.current) return;
+		setTruncation(next);
+		if (next !== true) onNotTruncated();
+	}, [onNotTruncated]);
+	useLayoutEffect(() => {
+		expandedRef.current = expanded;
+		const root = rootRef.current;
+		const text = textRef.current;
+		const content = contentRef.current;
+		if (!root || !text || !content) return void 0;
+		const target = {
+			observe: () => [text, afterRef.current],
+			watch: () => content,
+			isolate: () => {
+				root.setAttribute("data-measuring", "");
+				return () => root.removeAttribute("data-measuring");
+			},
+			read: () => measureContent(text, content),
+			commit
+		};
+		targetRef.current = target;
+		return observeTruncation(target);
+	}, [
+		commit,
+		expanded,
+		layout
+	]);
+	return {
+		rootRef,
+		textRef,
+		setTextRef,
+		contentRef,
+		afterRef,
+		truncation,
+		interactive,
+		measureNow: useCallback(() => {
+			const target = targetRef.current;
+			if (!target) return void 0;
+			const next = readNow(target);
+			commit(next);
+			return next;
+		}, [commit])
+	};
+}
+/** The tooltip's `onOpenChange`: it opens only on a text measured as cut, now. */
+function useOpenWhenTruncated(setOpen, expanded, afterRef, measureNow) {
+	return useCallback((next, details) => {
+		if (!next) {
+			setOpen(false);
+			return;
+		}
+		if (isTouchScreen() || expanded) return;
+		if (contains(afterRef, details.event?.target)) return;
+		if (measureNow() === true) setOpen(true);
+	}, [
+		afterRef,
+		expanded,
+		measureNow,
+		setOpen
+	]);
+}
+/**
+* Makes the text the button that expands and collapses it, while
+* `clickable`. It stays one while expanded, `aria-expanded="true"`, so focus
+* stays on it and it collapses again the same way.
+*/
+function useExpandOnClick(clickable, expanded, toggle, textRef) {
+	const onClick = useCallback(() => {
+		if (!clickable) return;
+		if (textRef.current && hasSelection(textRef.current)) return;
+		toggle();
+	}, [
+		clickable,
+		textRef,
+		toggle
+	]);
+	const onKeyDown = useCallback((event) => {
+		if (!clickable || event.target !== event.currentTarget) return;
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			toggle();
+		}
+	}, [clickable, toggle]);
+	if (!clickable) return {};
+	return {
+		role: "button",
+		tabIndex: 0,
+		"aria-expanded": expanded,
+		onClick,
+		onKeyDown
+	};
+}
+function useRootStyle(style, lines) {
+	return useMemo(() => lines > 1 ? {
+		...style,
+		["--ellipsis-lines"]: String(lines)
+	} : style, [style, lines]);
+}
+function Ellipsis({ children, lines = 1, tooltip = true, after, expanded: expandedProp, defaultExpanded = false, onExpandedChange, expandOnClick = false, className, style, ...props }) {
+	const textId = useId();
+	const [open, setOpen] = useState(false);
+	const closeTooltip = useCallback(() => setOpen(false), []);
+	const [expanded, toggle] = useExpanded(expandedProp, defaultExpanded, onExpandedChange);
+	const multiline = lines > 1;
+	const hasTooltip = tooltip !== false && tooltip != null;
+	const hasAfter = after != null;
+	const measured = useTruncation(expanded, `${lines} ${hasAfter} ${hasTooltip}`, closeTooltip);
+	const { rootRef, textRef, setTextRef, contentRef, afterRef, truncation } = measured;
+	const handleOpenChange = useOpenWhenTruncated(setOpen, expanded, afterRef, measured.measureNow);
+	const truncated = truncation === true && !expanded;
+	const clickable = expandOnClick && !hasAfter && !measured.interactive && (truncation === true || expanded);
+	const afterNode = typeof after === "function" ? after({
+		truncated,
+		expanded,
+		toggle
+	}) : after;
+	const afterHidden = !truncated && !expanded;
+	const slots = ellipsis({
+		multiline,
+		expanded,
+		clickable
+	});
+	const context = useMemo(() => ({
+		expanded,
+		toggle,
+		textId
+	}), [
+		expanded,
+		toggle,
+		textId
+	]);
+	const rootStyle = useRootStyle(style, lines);
+	const clickProps = useExpandOnClick(clickable, expanded, toggle, textRef);
+	const afterElement = hasAfter ? /* @__PURE__ */ jsx("span", {
+		ref: afterRef,
+		"data-slot": "ellipsis-after",
+		"data-hidden": afterHidden ? "" : void 0,
+		inert: afterHidden,
+		className: slots.after(),
+		onPointerEnter: closeTooltip,
+		children: afterNode
+	}) : null;
+	const floatingAfter = multiline && hasAfter;
+	const textChildren = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		floatingAfter && /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			"data-slot": "ellipsis-spacer",
+			"data-hidden": afterHidden ? "" : void 0,
+			className: slots.spacer()
+		}),
+		floatingAfter && afterElement,
+		/* @__PURE__ */ jsx("span", {
+			ref: contentRef,
+			"data-slot": "ellipsis-content",
+			className: slots.content(),
+			children
+		})
+	] });
+	const textProps = {
+		id: textId,
+		"data-slot": "ellipsis-text",
+		"data-truncated": truncated ? "" : void 0,
+		className: slots.text(),
+		...clickProps
+	};
+	const text = hasTooltip ? /* @__PURE__ */ jsxs(Tooltip, {
+		open: open && truncated,
+		onOpenChange: handleOpenChange,
+		children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+			ref: setTextRef,
+			render: /* @__PURE__ */ jsx("span", {}),
+			...textProps,
+			className: slots.text({ class: "select-auto" }),
+			children: textChildren
+		}), /* @__PURE__ */ jsx(TooltipContent, { children: tooltip === true ? children : tooltip })]
+	}) : /* @__PURE__ */ jsx("span", {
+		ref: setTextRef,
+		...textProps,
+		children: textChildren
+	});
+	return /* @__PURE__ */ jsx(EllipsisContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs("span", {
+			ref: rootRef,
+			"data-slot": "ellipsis",
+			className: slots.root({ className }),
+			style: rootStyle,
+			...props,
+			children: [text, !multiline ? afterElement : null]
+		})
+	});
+}
+/**
+* The control that expands an Ellipsis and collapses it again, for its
+* `after`. A real button, with `aria-expanded` and `aria-controls` pointing
+* at the text. The label is the caller's: "Show More" / "Show Less".
+*/
+function EllipsisToggle({ onClick, ...props }) {
+	const context = useContext(EllipsisContext);
+	if (!context) throw new Error("EllipsisToggle must be inside an Ellipsis `after`.");
+	const { expanded, toggle, textId } = context;
+	const handleClick = useCallback((event) => {
+		onClick?.(event);
+		if (!event.defaultPrevented) toggle();
+	}, [onClick, toggle]);
+	return /* @__PURE__ */ jsx(TextLink, {
+		"aria-expanded": expanded,
+		"aria-controls": textId,
+		onClick: handleClick,
+		...props
+	});
+}
+//#endregion
+export { Ellipsis, EllipsisToggle };

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

@@ -0,0 +1,3 @@
+import { Ellipsis, EllipsisProps, EllipsisState, EllipsisToggle, EllipsisToggleProps } from "./ellipsis.mjs";
+import { useTruncated } from "../../lib/use-truncated.mjs";
+export { Ellipsis, type EllipsisProps, type EllipsisState, EllipsisToggle, type EllipsisToggleProps, useTruncated };

package/dist/components/empty-state/empty-state.d.mts

@@ -0,0 +1,15 @@
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/empty-state/empty-state.d.ts
+export type EmptyStateProps = useRender.ComponentProps<"div">;
+export declare function EmptyState({ render, className, ...props }: EmptyStateProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type EmptyStateContentProps = useRender.ComponentProps<"div">;
+export declare function EmptyStateContent({ render, className, ...props }: EmptyStateContentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type EmptyStateIconProps = useRender.ComponentProps<"div">;
+export declare function EmptyStateIcon({ render, className, ...props }: EmptyStateIconProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type EmptyStateTitleProps = useRender.ComponentProps<"div">;
+export declare function EmptyStateTitle({ render, className, ...props }: EmptyStateTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type EmptyStateDescriptionProps = useRender.ComponentProps<"div">;
+export declare function EmptyStateDescription({ render, className, ...props }: EmptyStateDescriptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type EmptyStateActionsProps = useRender.ComponentProps<"div">;
+export declare function EmptyStateActions({ render, className, ...props }: EmptyStateActionsProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/empty-state/empty-state.mjs

@@ -0,0 +1,102 @@
+import { tv } from "../../lib/tv.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/empty-state/empty-state.tsx
+const emptyState = tv({ slots: {
+	root: ["flex w-full min-w-0 flex-col items-center justify-center px-6 py-12 text-center"],
+	content: [
+		"flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-center",
+		"[&>[data-slot=empty-state-icon]]:mb-0",
+		"[&>[data-slot=empty-state-title]]:mb-0"
+	],
+	icon: ["mb-4 inline-flex items-center justify-center [&_svg]:shrink-0", "text-foreground-hint [&_svg]:size-9"],
+	title: ["mb-2 w-full max-w-full text-center text-balance", "font-sans text-headline font-bold text-foreground-muted"],
+	description: [
+		"mx-auto w-full text-center text-pretty",
+		"[&>a]:font-semibold [&>a]:decoration-[1.5px] [&>a]:underline-offset-[3px]",
+		"[&>a]:hover:text-foreground [&>a]:hover:underline",
+		"max-w-[300px] text-callout text-foreground-hint"
+	],
+	actions: ["mt-5"]
+} });
+function EmptyState({ render, className, ...props }) {
+	const { root } = emptyState();
+	const defaultProps = {
+		"data-slot": "empty-state",
+		className: root({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "empty-state" }
+	});
+}
+function EmptyStateContent({ render, className, ...props }) {
+	const { content } = emptyState();
+	const defaultProps = {
+		"data-slot": "empty-state-content",
+		className: content({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "empty-state-content" }
+	});
+}
+function EmptyStateIcon({ render, className, ...props }) {
+	const { icon } = emptyState();
+	const defaultProps = {
+		"data-slot": "empty-state-icon",
+		"aria-hidden": true,
+		className: icon({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "empty-state-icon" }
+	});
+}
+function EmptyStateTitle({ render, className, ...props }) {
+	const { title } = emptyState();
+	const defaultProps = {
+		"data-slot": "empty-state-title",
+		className: title({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "empty-state-title" }
+	});
+}
+function EmptyStateDescription({ render, className, ...props }) {
+	const { description } = emptyState();
+	const defaultProps = {
+		"data-slot": "empty-state-description",
+		className: description({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "empty-state-description" }
+	});
+}
+function EmptyStateActions({ render, className, ...props }) {
+	const { actions } = emptyState();
+	const defaultProps = {
+		"data-slot": "empty-state-actions",
+		className: actions({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "empty-state-actions" }
+	});
+}
+//#endregion
+export { EmptyState, EmptyStateActions, EmptyStateContent, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle };

package/dist/components/empty-state/index.d.mts

@@ -0,0 +1,2 @@
+import { EmptyState, EmptyStateActions, EmptyStateActionsProps, EmptyStateContent, EmptyStateContentProps, EmptyStateDescription, EmptyStateDescriptionProps, EmptyStateIcon, EmptyStateIconProps, EmptyStateProps, EmptyStateTitle, EmptyStateTitleProps } from "./empty-state.mjs";
+export { EmptyState, EmptyStateActions, type EmptyStateActionsProps, EmptyStateContent, type EmptyStateContentProps, EmptyStateDescription, type EmptyStateDescriptionProps, EmptyStateIcon, type EmptyStateIconProps, type EmptyStateProps, EmptyStateTitle, type EmptyStateTitleProps };

package/dist/components/field/field.d.mts

@@ -0,0 +1,79 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { VariantProps } from "../../lib/tv.mjs";
+import { Field } from "@base-ui/react/field";
+//#region src/components/field/field.d.ts
+declare const field: import("tailwind-variants/lite").TVReturnType<{
+  size: {
+    sm: {
+      item: string[];
+      label: string[];
+    };
+    md: {
+      item: string[];
+      label: string[];
+    };
+  };
+}, {
+  root: string[];
+  item: string[];
+  label: string[];
+  description: string[];
+  error: string[];
+}, undefined, {
+  size: {
+    sm: {
+      item: string[];
+      label: string[];
+    };
+    md: {
+      item: string[];
+      label: string[];
+    };
+  };
+}, {
+  root: string[];
+  item: string[];
+  label: string[];
+  description: string[];
+  error: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  size: {
+    sm: {
+      item: string[];
+      label: string[];
+    };
+    md: {
+      item: string[];
+      label: string[];
+    };
+  };
+}, {
+  root: string[];
+  item: string[];
+  label: string[];
+  description: string[];
+  error: string[];
+}>>;
+export type FieldProps = StyledProps<Field.Root.Props>;
+declare function Field$1({ className, ...props }: FieldProps): import("react").JSX.Element;
+export type FieldItemProps = StyledProps<Field.Item.Props> & VariantProps<typeof field>;
+export declare function FieldItem({ size, className, ...props }: FieldItemProps): import("react").JSX.Element;
+type LabelMarker = {
+  required?: boolean;
+  optional?: never;
+} | {
+  optional?: boolean;
+  required?: never;
+};
+export type FieldLabelProps = StyledProps<Field.Label.Props> & VariantProps<typeof field> & LabelMarker;
+export declare function FieldLabel({ size, required, optional, className, children, ...props }: FieldLabelProps): import("react").JSX.Element;
+export type FieldDescriptionProps = StyledProps<Field.Description.Props>;
+export declare function FieldDescription({ className, ...props }: FieldDescriptionProps): import("react").JSX.Element;
+export type FieldErrorProps = StyledProps<Field.Error.Props>;
+export declare function FieldError({ className, role, ...props }: FieldErrorProps): import("react").JSX.Element;
+export type FieldControlProps = Field.Control.Props;
+export declare function FieldControl(props: FieldControlProps): import("react").JSX.Element;
+export type FieldValidityProps = Field.Validity.Props;
+export declare function FieldValidity(props: FieldValidityProps): import("react").JSX.Element;
+//#endregion
+export { Field$1 as Field };

package/dist/components/field/field.mjs

@@ -0,0 +1,100 @@
+import { tv } from "../../lib/tv.mjs";
+import { LabelAsterisk, LabelOptional } from "../label/label.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Field } from "@base-ui/react/field";
+//#region src/components/field/field.tsx
+const field = tv({
+	slots: {
+		root: ["group/field flex flex-col gap-1.5"],
+		item: [
+			"group/field-item flex items-start gap-2",
+			"*:min-w-0",
+			"*:data-[slot=checkbox]:mt-[calc((1lh-1.25rem)/2)]",
+			"*:data-[slot=radio-group-item]:mt-[calc((1lh-1.25rem)/2)]",
+			"*:data-[slot=switch]:mt-[calc((1lh-1.875rem)/2)]"
+		],
+		label: [
+			"block wrap-anywhere",
+			"group-data-disabled/field:text-foreground-disabled",
+			"font-sans font-semibold text-foreground-muted"
+		],
+		description: [
+			"wrap-anywhere",
+			"group-data-disabled/field:text-foreground-disabled",
+			"text-caption text-foreground-hint"
+		],
+		error: [
+			"wrap-anywhere",
+			"group-data-disabled/field:text-foreground-disabled",
+			"text-caption font-semibold text-danger-strong"
+		]
+	},
+	variants: { size: {
+		sm: {
+			item: ["text-caption"],
+			label: ["text-caption font-semibold"]
+		},
+		md: {
+			item: ["text-footnote"],
+			label: ["text-footnote font-semibold"]
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+function Field$1({ className, ...props }) {
+	const { root } = field();
+	return /* @__PURE__ */ jsx(Field.Root, {
+		"data-slot": "field",
+		className: root({ className }),
+		...props
+	});
+}
+function FieldItem({ size, className, ...props }) {
+	const { item } = field({ size });
+	return /* @__PURE__ */ jsx(Field.Item, {
+		"data-slot": "field-item",
+		className: item({ className }),
+		...props
+	});
+}
+function FieldLabel({ size, required, optional, className, children, ...props }) {
+	const { label } = field({ size });
+	return /* @__PURE__ */ jsxs(Field.Label, {
+		"data-slot": "field-label",
+		className: label({ className }),
+		...props,
+		children: [
+			children,
+			required ? /* @__PURE__ */ jsx(LabelAsterisk, { className: "ml-1" }) : null,
+			optional ? /* @__PURE__ */ jsx(LabelOptional, { className: "ml-1" }) : null
+		]
+	});
+}
+function FieldDescription({ className, ...props }) {
+	const { description } = field();
+	return /* @__PURE__ */ jsx(Field.Description, {
+		"data-slot": "field-description",
+		className: description({ className }),
+		...props
+	});
+}
+function FieldError({ className, role = "alert", ...props }) {
+	const { error } = field();
+	return /* @__PURE__ */ jsx(Field.Error, {
+		"data-slot": "field-error",
+		role,
+		className: error({ className }),
+		...props
+	});
+}
+function FieldControl(props) {
+	return /* @__PURE__ */ jsx(Field.Control, {
+		"data-slot": "field-control",
+		...props
+	});
+}
+function FieldValidity(props) {
+	return /* @__PURE__ */ jsx(Field.Validity, { ...props });
+}
+//#endregion
+export { Field$1 as Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity };

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

@@ -0,0 +1,2 @@
+import { Field, FieldControl, FieldControlProps, FieldDescription, FieldDescriptionProps, FieldError, FieldErrorProps, FieldItem, FieldItemProps, FieldLabel, FieldLabelProps, FieldProps, FieldValidity, FieldValidityProps } from "./field.mjs";
+export { Field, FieldControl, type FieldControlProps, FieldDescription, type FieldDescriptionProps, FieldError, type FieldErrorProps, FieldItem, type FieldItemProps, FieldLabel, type FieldLabelProps, type FieldProps, FieldValidity, type FieldValidityProps };

package/dist/components/file-preview/file-preview.d.mts

@@ -0,0 +1,17 @@
+import { VariantProps } from "../../lib/tv.mjs";
+import { filePreview } from "./file-preview.recipe.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/file-preview/file-preview.d.ts
+export type FilePreviewProps = useRender.ComponentProps<"span">;
+export declare function FilePreview({ className, render, ...props }: FilePreviewProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type FilePreviewDocumentProps = useRender.ComponentProps<"span">;
+export declare function FilePreviewDocument({ children, className, render, ...props }: FilePreviewDocumentProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type FilePreviewFileProps = useRender.ComponentProps<"span">;
+export declare function FilePreviewFile({ children, className, render, ...props }: FilePreviewFileProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type FilePreviewCodeProps = useRender.ComponentProps<"span">;
+export declare function FilePreviewCode({ children, className, render, ...props }: FilePreviewCodeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type FilePreviewBadgeProps = useRender.ComponentProps<"span"> & Pick<VariantProps<typeof filePreview>, "placement">;
+export declare function FilePreviewBadge({ placement, className, render, ...props }: FilePreviewBadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type FilePreviewMediaProps = useRender.ComponentProps<"span">;
+export declare function FilePreviewMedia({ children, className, render, ...props }: FilePreviewMediaProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion