@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/banner/banner.d.mts

@@ -0,0 +1,141 @@
+import { VariantProps } from "../../lib/tv.mjs";
+import { ButtonProps } from "../button/button.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/banner/banner.d.ts
+declare const banner: import("tailwind-variants/lite").TVReturnType<{
+  status: {
+    default: {
+      root: string[];
+    };
+    destructive: {
+      root: string[];
+    };
+    warning: {
+      root: string[];
+    };
+    info: {
+      root: string[];
+    };
+    success: {
+      root: string[];
+    };
+  };
+  size: {
+    sm: {
+      root: string[];
+    };
+    md: {
+      root: string[];
+    };
+    lg: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  title: string[];
+  description: string[];
+  action: string[];
+  close: string[];
+}, undefined, {
+  status: {
+    default: {
+      root: string[];
+    };
+    destructive: {
+      root: string[];
+    };
+    warning: {
+      root: string[];
+    };
+    info: {
+      root: string[];
+    };
+    success: {
+      root: string[];
+    };
+  };
+  size: {
+    sm: {
+      root: string[];
+    };
+    md: {
+      root: string[];
+    };
+    lg: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  title: string[];
+  description: string[];
+  action: string[];
+  close: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  status: {
+    default: {
+      root: string[];
+    };
+    destructive: {
+      root: string[];
+    };
+    warning: {
+      root: string[];
+    };
+    info: {
+      root: string[];
+    };
+    success: {
+      root: string[];
+    };
+  };
+  size: {
+    sm: {
+      root: string[];
+    };
+    md: {
+      root: string[];
+    };
+    lg: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  title: string[];
+  description: string[];
+  action: string[];
+  close: string[];
+}>>;
+export type BannerStatus = NonNullable<VariantProps<typeof banner>["status"]>;
+export type BannerProps = useRender.ComponentProps<"div"> & Omit<VariantProps<typeof banner>, "align"> & {
+  status: BannerStatus;
+};
+/**
+ * A short notice people read before they act, on a soft tint that says its
+ * intent. Compose it from a leading icon, `BannerTitle`, `BannerDescription`,
+ * and either `BannerAction` (its button) or `BannerClose` (a × when there is no
+ * button).
+ */
+export declare function Banner({ status, size, className, render, ...props }: BannerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type BannerTitleProps = useRender.ComponentProps<"div">;
+export declare function BannerTitle({ render, className, ...props }: BannerTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type BannerDescriptionProps = useRender.ComponentProps<"div">;
+export declare function BannerDescription({ render, className, ...props }: BannerDescriptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type BannerActionProps = Omit<useRender.ComponentProps<"div">, "align">;
+/**
+ * The banner's buttons: at the end of the last line of text, centered on it,
+ * while the text fits beside them on one line; on a line of their own under the
+ * text, aligned to the end, when it doesn't or the banner is narrower than
+ * 480px.
+ */
+export declare function BannerAction({ render, className, ref, ...props }: BannerActionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type BannerCloseProps = Omit<ButtonProps, "variant" | "size">;
+/**
+ * The × of a banner that has no button: a frameless icon button at the end of
+ * the first line, centered on it, its icon box ending on the banner's padding.
+ * Never put it in `BannerAction`.
+ */
+export declare function BannerClose({ className, children, "aria-label": ariaLabel, ...props }: BannerCloseProps): import("react").JSX.Element;
+//#endregion

package/dist/components/banner/banner.mjs

@@ -0,0 +1,228 @@
+import { tv } from "../../lib/tv.mjs";
+import { Button } from "../button/button.mjs";
+import { X } from "lucide-react";
+import { useLayoutEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/banner/banner.tsx
+const banner = tv({
+	slots: {
+		root: [
+			"group/banner @container grid gap-y-0",
+			"[&>svg]:col-start-1 [&>svg]:shrink-0",
+			"*:data-[slot=spinner]:col-start-1 *:data-[slot=spinner]:row-start-1",
+			"w-full grid-cols-[minmax(0,1fr)] items-start gap-x-2.5 rounded-container border-0",
+			"font-sans text-callout text-foreground ring-1 ring-line-hairline ring-inset",
+			"has-[>svg]:grid-cols-[20px_minmax(0,1fr)]",
+			"has-[>[data-slot=spinner]]:grid-cols-[20px_minmax(0,1fr)]",
+			"[&>svg]:row-start-1 [&>svg]:size-5 [&>svg]:text-foreground",
+			"[&>svg]:mt-[calc((1lh-20px)/2)]",
+			"*:data-[slot=spinner]:h-lh *:data-[slot=spinner]:leading-[inherit] *:data-[slot=spinner]:self-start *:data-[slot=spinner]:justify-self-center",
+			"has-[>svg]:[--banner-text-col:2]",
+			"has-[>[data-slot=spinner]]:[--banner-text-col:2]",
+			"has-[>[data-slot=banner-title]]:[--banner-desc-row:2]",
+			"has-[>[data-slot=banner-description]]:[--banner-last-row:var(--banner-desc-row,1)]",
+			"has-[>[data-banner-close]]:[--banner-action-end:span_2]"
+		],
+		title: [
+			"min-w-0 wrap-break-word text-foreground",
+			"row-start-1 font-bold",
+			"col-start-(--banner-text-col,1)",
+			"@min-[452px]:has-[~[data-slot=banner-description]~[data-slot=banner-action]:not([data-wrap])]:col-end-[span_2]"
+		],
+		description: [
+			"min-w-0 wrap-break-word font-normal",
+			"text-foreground",
+			"col-start-(--banner-text-col,1)",
+			"row-start-(--banner-desc-row,1)"
+		],
+		action: [
+			"mt-2 flex shrink-0 flex-wrap items-center justify-end gap-2 self-start",
+			"col-start-(--banner-text-col,1) col-end-(--banner-action-end,-1)",
+			"@min-[452px]:not-data-wrap:col-start-[calc(var(--banner-text-col,1)+1)] @min-[452px]:not-data-wrap:col-end-auto",
+			"@min-[452px]:not-data-wrap:row-start-(--banner-last-row,1)",
+			"@min-[452px]:not-data-wrap:mt-0 @min-[452px]:not-data-wrap:h-lh @min-[452px]:not-data-wrap:flex-nowrap @min-[452px]:not-data-wrap:self-end"
+		],
+		close: ["col-start-[calc(var(--banner-text-col,1)+1)] row-start-1 self-start", "-my-[calc((--spacing(8)-1lh)/2)] -me-icon-inset"]
+	},
+	variants: {
+		status: {
+			default: { root: ["bg-fill-muted"] },
+			destructive: { root: ["bg-danger-soft"] },
+			warning: { root: ["bg-warning-soft"] },
+			info: { root: ["bg-info-soft"] },
+			success: { root: ["bg-success-soft"] }
+		},
+		size: {
+			sm: { root: [
+				"gap-x-2 px-3 py-2",
+				"has-[>svg]:grid-cols-[16px_minmax(0,1fr)] has-[>[data-slot=spinner]]:grid-cols-[16px_minmax(0,1fr)]",
+				"[&>svg]:mt-[calc((1lh-16px)/2)] [&>svg]:size-4"
+			] },
+			md: { root: ["px-3.5 py-3"] },
+			lg: { root: ["px-4 py-3.5"] }
+		}
+	},
+	defaultVariants: { size: "md" },
+	compoundVariants: [{
+		size: "sm",
+		class: { root: "has-[>[data-slot=banner-action],>[data-banner-close]]:py-[calc((--spacing(8)-1lh)/2+--spacing(1))]" }
+	}]
+});
+/**
+* A short notice people read before they act, on a soft tint that says its
+* intent. Compose it from a leading icon, `BannerTitle`, `BannerDescription`,
+* and either `BannerAction` (its button) or `BannerClose` (a × when there is no
+* button).
+*/
+function Banner({ status, size = "md", className, render, ...props }) {
+	const { root } = banner({
+		status,
+		size
+	});
+	const defaultProps = {
+		className: root({ className }),
+		role: status === "destructive" ? "alert" : "status"
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: {
+			slot: "banner",
+			size,
+			status
+		}
+	});
+}
+function BannerTitle({ render, className, ...props }) {
+	const { title } = banner();
+	const defaultProps = { className: title({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "banner-title" }
+	});
+}
+function BannerDescription({ render, className, ...props }) {
+	const { description } = banner();
+	const defaultProps = { className: description({ className }) };
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "banner-description" }
+	});
+}
+function lineCount(element) {
+	const lineHeight = Number.parseFloat(getComputedStyle(element).lineHeight);
+	if (!(lineHeight > 0)) return 1;
+	return Math.round(element.getBoundingClientRect().height / lineHeight);
+}
+function contentWidth(element) {
+	const range = document.createRange();
+	range.selectNodeContents(element);
+	return range.getBoundingClientRect().width;
+}
+function useWrapsBesideText(action) {
+	const [wraps, setWraps] = useState(false);
+	useLayoutEffect(() => {
+		const root = action?.parentElement;
+		if (!action || !root || typeof ResizeObserver === "undefined") return;
+		const measure = () => {
+			const text = root.querySelector(":scope > [data-slot=banner-description]") ?? root.querySelector(":scope > [data-slot=banner-title]");
+			if (!text) {
+				setWraps(false);
+				return;
+			}
+			if (root.querySelector(":scope > [data-banner-close]")) {
+				setWraps(true);
+				return;
+			}
+			const lines = lineCount(text);
+			if (!action.hasAttribute("data-wrap")) {
+				if (lines > 1) setWraps(true);
+				return;
+			}
+			if (lines > 1) return;
+			const gap = Number.parseFloat(getComputedStyle(root).columnGap) || 0;
+			if (contentWidth(text) + contentWidth(action) + gap + 1 <= text.getBoundingClientRect().width) setWraps(false);
+		};
+		let frame = 0;
+		const schedule = () => {
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(measure);
+		};
+		measure();
+		const resize = new ResizeObserver(schedule);
+		resize.observe(root);
+		for (const child of root.children) resize.observe(child);
+		const mutation = new MutationObserver(schedule);
+		mutation.observe(root, {
+			childList: true,
+			characterData: true,
+			subtree: true
+		});
+		const fonts = typeof document.fonts === "undefined" ? void 0 : document.fonts;
+		let live = true;
+		fonts?.ready.then(() => {
+			if (live) schedule();
+		});
+		fonts?.addEventListener("loadingdone", schedule);
+		return () => {
+			live = false;
+			cancelAnimationFrame(frame);
+			resize.disconnect();
+			mutation.disconnect();
+			fonts?.removeEventListener("loadingdone", schedule);
+		};
+	}, [action]);
+	useLayoutEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		if (action?.parentElement?.querySelector(":scope > [data-banner-close]")) console.warn("raft-ui: a Banner has both BannerAction and BannerClose. Use BannerClose only on a banner with no button; close one that has a button with a ghost Dismiss button in BannerAction.");
+	}, [action]);
+	return wraps;
+}
+/**
+* The banner's buttons: at the end of the last line of text, centered on it,
+* while the text fits beside them on one line; on a line of their own under the
+* text, aligned to the end, when it doesn't or the banner is narrower than
+* 480px.
+*/
+function BannerAction({ render, className, ref, ...props }) {
+	const { action } = banner();
+	const [element, setElement] = useState(null);
+	const wraps = useWrapsBesideText(element);
+	const defaultProps = {
+		className: action({ className }),
+		...wraps ? { "data-wrap": "" } : {}
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		ref: ref ? [ref, setElement] : setElement,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "banner-action" }
+	});
+}
+/**
+* The × of a banner that has no button: a frameless icon button at the end of
+* the first line, centered on it, its icon box ending on the banner's padding.
+* Never put it in `BannerAction`.
+*/
+function BannerClose({ className, children, "aria-label": ariaLabel = "Dismiss", ...props }) {
+	const { close } = banner();
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		variant: "ghost",
+		size: "icon-md",
+		"aria-label": ariaLabel,
+		"data-banner-close": "",
+		className: close({ className }),
+		children: children ?? /* @__PURE__ */ jsx(X, {})
+	});
+}
+//#endregion
+export { Banner, BannerAction, BannerClose, BannerDescription, BannerTitle };

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

@@ -0,0 +1,2 @@
+import { Banner, BannerAction, BannerActionProps, BannerClose, BannerCloseProps, BannerDescription, BannerDescriptionProps, BannerProps, BannerStatus, BannerTitle, BannerTitleProps } from "./banner.mjs";
+export { Banner, BannerAction, type BannerActionProps, BannerClose, type BannerCloseProps, BannerDescription, type BannerDescriptionProps, type BannerProps, type BannerStatus, BannerTitle, type BannerTitleProps };

package/dist/components/button/button.d.mts

@@ -0,0 +1,257 @@
+import { StyledProps } from "../../lib/styled-props.mjs";
+import { DataAttributes } from "../../lib/data-attributes.mjs";
+import { VariantProps } from "../../lib/tv.mjs";
+import { Button } from "@base-ui/react/button";
+//#region src/components/button/button.d.ts
+export declare const buttonVariants: import("tailwind-variants/lite").TVReturnType<{
+  variant: {
+    primary: {
+      root: string[];
+    };
+    accent: {
+      root: string[];
+    };
+    warning: {
+      root: string[];
+    };
+    danger: {
+      root: string[];
+    };
+    default: {
+      root: string[];
+    };
+    outline: {
+      root: string[];
+    };
+    information: {
+      root: string[];
+    };
+    muted: {
+      root: string[];
+    };
+    success: {
+      root: string[];
+    };
+    "danger-secondary": {
+      root: string[];
+    };
+    "danger-outline": {
+      root: string[];
+    };
+    ghost: {
+      root: string[];
+    };
+    "on-frame": {
+      root: string[];
+    };
+  };
+  size: {
+    xs: {
+      root: string[];
+    };
+    sm: {
+      root: string[];
+    };
+    md: {
+      root: string[];
+    };
+    lg: {
+      root: string[];
+    };
+    xl: {
+      root: string[];
+    };
+    "icon-xs": {
+      root: string[];
+    };
+    "icon-sm": {
+      root: string[];
+    };
+    "icon-md": {
+      root: string[];
+    };
+    "icon-lg": {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  content: string;
+  loadingIndicator: string;
+}, undefined, {
+  variant: {
+    primary: {
+      root: string[];
+    };
+    accent: {
+      root: string[];
+    };
+    warning: {
+      root: string[];
+    };
+    danger: {
+      root: string[];
+    };
+    default: {
+      root: string[];
+    };
+    outline: {
+      root: string[];
+    };
+    information: {
+      root: string[];
+    };
+    muted: {
+      root: string[];
+    };
+    success: {
+      root: string[];
+    };
+    "danger-secondary": {
+      root: string[];
+    };
+    "danger-outline": {
+      root: string[];
+    };
+    ghost: {
+      root: string[];
+    };
+    "on-frame": {
+      root: string[];
+    };
+  };
+  size: {
+    xs: {
+      root: string[];
+    };
+    sm: {
+      root: string[];
+    };
+    md: {
+      root: string[];
+    };
+    lg: {
+      root: string[];
+    };
+    xl: {
+      root: string[];
+    };
+    "icon-xs": {
+      root: string[];
+    };
+    "icon-sm": {
+      root: string[];
+    };
+    "icon-md": {
+      root: string[];
+    };
+    "icon-lg": {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  content: string;
+  loadingIndicator: string;
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  variant: {
+    primary: {
+      root: string[];
+    };
+    accent: {
+      root: string[];
+    };
+    warning: {
+      root: string[];
+    };
+    danger: {
+      root: string[];
+    };
+    default: {
+      root: string[];
+    };
+    outline: {
+      root: string[];
+    };
+    information: {
+      root: string[];
+    };
+    muted: {
+      root: string[];
+    };
+    success: {
+      root: string[];
+    };
+    "danger-secondary": {
+      root: string[];
+    };
+    "danger-outline": {
+      root: string[];
+    };
+    ghost: {
+      root: string[];
+    };
+    "on-frame": {
+      root: string[];
+    };
+  };
+  size: {
+    xs: {
+      root: string[];
+    };
+    sm: {
+      root: string[];
+    };
+    md: {
+      root: string[];
+    };
+    lg: {
+      root: string[];
+    };
+    xl: {
+      root: string[];
+    };
+    "icon-xs": {
+      root: string[];
+    };
+    "icon-sm": {
+      root: string[];
+    };
+    "icon-md": {
+      root: string[];
+    };
+    "icon-lg": {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  content: string;
+  loadingIndicator: string;
+}>>;
+type ButtonVariantProps = VariantProps<typeof buttonVariants>;
+/** The Button sizes: `md`, `lg`, `xl`, `icon-md` and `icon-lg`. */
+export type ButtonSize = "md" | "lg" | "xl" | "icon-md" | "icon-lg";
+/**
+ * Deprecated: `xs` and `sm` render as `md`, `icon-xs` and `icon-sm` as
+ * `icon-md`. Removed in raft-ui 1.0; run
+ * `node node_modules/@botiverse/raft-ui/codemods/button-sizes.mjs <src>`.
+ */
+export type DeprecatedButtonSize = "xs" | "sm" | "icon-xs" | "icon-sm";
+export type ButtonProps = StyledProps<Button.Props> & Omit<ButtonVariantProps, "size"> & DataAttributes & {
+  /**
+   * `md` (32px) and `icon-md` for rows, cards, banners, toolbars and panel
+   * headers; `lg` and `icon-lg` (the control height) for dialog footers,
+   * forms and beside a field; `xl` for a full-width call to action. The size
+   * follows the place: see Button › Size by place.
+   *
+   * `xs`, `sm`, `icon-xs` and `icon-sm` are deprecated aliases of `md` and
+   * `icon-md`, removed in raft-ui 1.0 (`codemods/button-sizes.mjs`).
+   */
+  size?: "md" | "lg" | "xl" | "icon-md" | "icon-lg" | DeprecatedButtonSize;
+  loading?: boolean;
+  loadingLabel?: string;
+};
+declare function Button$1({ variant, size, loading, loadingLabel, disabled, className, children, render, nativeButton, ...props }: ButtonProps): import("react").JSX.Element;
+//#endregion
+export { Button$1 as Button };