@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/float-button/float-button.mjs

@@ -0,0 +1,116 @@
+import { defaultNativeButton } from "../../lib/default-native-button.mjs";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.mjs";
+import { resolvePositionStyles } from "./float-button.position.mjs";
+import { createContext, useContext, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@base-ui/react/button";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/float-button/float-button.tsx
+const FloatButtonGroupContext = createContext(null);
+/** @deprecated Not part of the Raft Design System; place actions in the page's header or toolbar. Removed in raft-ui 1.0. */
+function FloatButton({ icon, description, tooltip, variant = "default", shape: shapeProp, size: sizeProp, position, side, offset, className, style, children, nativeButton: nativeButtonProp, render, ...props }) {
+	const groupContext = useContext(FloatButtonGroupContext);
+	const hasText = Boolean(children);
+	const shape = shapeProp ?? groupContext?.shape ?? "circle";
+	const size = sizeProp ?? groupContext?.size ?? "md";
+	const positionStyles = resolvePositionStyles({
+		position,
+		side,
+		offset,
+		style
+	});
+	const nativeButton = nativeButtonProp ?? defaultNativeButton(render) ?? true;
+	const rootClasses = [
+		"r-float-button",
+		`r-float-button--${size}`,
+		`r-float-button--${shape}`,
+		`r-float-button--${variant}`,
+		hasText && "r-float-button--with-text",
+		description && "r-float-button--with-desc",
+		className
+	].filter(Boolean).join(" ");
+	const contentClasses = ["r-float-button__content", description && "r-float-button__content--with-desc"].filter(Boolean).join(" ");
+	const renderedButton = /* @__PURE__ */ jsx(Button, {
+		...mergeProps({
+			type: nativeButton ? "button" : void 0,
+			"data-slot": "float-button",
+			"data-shape": shape,
+			"data-size": size,
+			"data-variant": variant,
+			"data-with-text": hasText ? "true" : void 0,
+			className: rootClasses,
+			style: positionStyles
+		}, props),
+		render,
+		children: /* @__PURE__ */ jsxs("span", {
+			"data-slot": "float-button-content",
+			className: contentClasses,
+			children: [
+				icon,
+				children ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "float-button-text",
+					className: "r-float-button__text",
+					children
+				}) : null,
+				description ? /* @__PURE__ */ jsx("span", {
+					"data-slot": "float-button-description",
+					className: "r-float-button__desc",
+					children: description
+				}) : null
+			]
+		})
+	});
+	if (tooltip) return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, { render: renderedButton }), /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })] });
+	return renderedButton;
+}
+/** @deprecated Not part of the Raft Design System; place actions in the page's header or toolbar. Removed in raft-ui 1.0. */
+function FloatButtonGroup({ direction = "vertical", attached = false, shape = "circle", size, position, side, offset, gap, className, style, render, children, ...props }) {
+	const combinedStyle = {
+		...resolvePositionStyles({
+			position,
+			side,
+			offset,
+			style
+		}),
+		...gap !== void 0 && !attached ? {
+			"--dsl-float-button-group-gap": typeof gap === "number" ? `${gap}px` : gap,
+			gap: typeof gap === "number" ? `${gap}px` : gap
+		} : {},
+		...style
+	};
+	const rootClasses = [
+		"r-float-button-group",
+		`r-float-button-group--${direction}`,
+		attached && "r-float-button-group--attached",
+		`r-float-button-group--${shape}`,
+		className
+	].filter(Boolean).join(" ");
+	const defaultProps = {
+		role: "group",
+		"data-slot": "float-button-group",
+		"data-direction": direction,
+		"data-attached": attached ? "true" : void 0,
+		"data-shape": shape,
+		className: rootClasses,
+		style: combinedStyle
+	};
+	const contextValue = useMemo(() => ({
+		shape,
+		size
+	}), [shape, size]);
+	const groupContent = /* @__PURE__ */ jsx(FloatButtonGroupContext.Provider, {
+		value: contextValue,
+		children
+	});
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, {
+			...props,
+			children: groupContent
+		})
+	});
+}
+//#endregion
+export { FloatButton, FloatButtonGroup };

package/dist/components/float-button/float-button.position.d.mts

@@ -0,0 +1,6 @@
+import { CSSProperties } from "react";
+//#region src/components/float-button/float-button.position.d.ts
+export type FloatButtonPosition = "fixed" | "absolute" | "relative";
+export type FloatButtonSide = "bottom-right" | "bottom-left" | "top-right" | "top-left";
+export type FloatButtonOffset = number | string | [number | string, number | string];
+//#endregion

package/dist/components/float-button/float-button.position.mjs

@@ -0,0 +1,41 @@
+//#region src/components/float-button/float-button.position.ts
+function resolvePositionStyles(options) {
+	const { position, side, offset, style } = options;
+	if (!position && !side && offset === void 0) return style ?? {};
+	const resolvedPosition = position ?? "fixed";
+	if (resolvedPosition === "relative") return {
+		position: "relative",
+		...style
+	};
+	const resolvedSide = side ?? "bottom-right";
+	const [offsetX, offsetY] = normalizeOffset(offset ?? 16);
+	const posStyles = { position: resolvedPosition };
+	if (resolvedSide === "bottom-right") {
+		posStyles.bottom = offsetY;
+		posStyles.right = offsetX;
+	} else if (resolvedSide === "bottom-left") {
+		posStyles.bottom = offsetY;
+		posStyles.left = offsetX;
+	} else if (resolvedSide === "top-right") {
+		posStyles.top = offsetY;
+		posStyles.right = offsetX;
+	} else if (resolvedSide === "top-left") {
+		posStyles.top = offsetY;
+		posStyles.left = offsetX;
+	}
+	return {
+		...posStyles,
+		...style
+	};
+}
+function normalizeOffset(offset) {
+	if (Array.isArray(offset)) return [formatLength(offset[0]), formatLength(offset[1])];
+	const formatted = formatLength(offset);
+	return [formatted, formatted];
+}
+function formatLength(val) {
+	if (typeof val === "number") return `${val}px`;
+	return val;
+}
+//#endregion
+export { resolvePositionStyles };

package/dist/components/float-button/index.d.mts

@@ -0,0 +1,3 @@
+import { FloatButtonOffset, FloatButtonPosition, FloatButtonSide } from "./float-button.position.mjs";
+import { FloatButton, FloatButtonGroup, FloatButtonGroupDirection, FloatButtonGroupProps, FloatButtonProps, FloatButtonShape, FloatButtonSize, FloatButtonVariant } from "./float-button.mjs";
+export { FloatButton, FloatButtonGroup, type FloatButtonGroupDirection, type FloatButtonGroupProps, type FloatButtonOffset, type FloatButtonPosition, type FloatButtonProps, type FloatButtonShape, type FloatButtonSide, type FloatButtonSize, type FloatButtonVariant };

package/dist/components/form-section/form-section.d.mts

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/form-section/form-section.d.ts
+export type FormSectionProps = Omit<useRender.ComponentProps<"section">, "title"> & {
+  title: ReactNode;
+  /** Where this part stands (Complete, Optional, Off …): a quiet tag. */
+  status?: ReactNode;
+  description?: ReactNode;
+};
+/**
+ * One part of a bigger form (a wide dialog or sheet): a small heading with
+ * its status and a line on what it is for, then its fields. Consecutive
+ * sections are separated by a hairline.
+ */
+export declare function FormSection({ className, render, title, status, description, children, ...props }: FormSectionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/form-section/form-section.mjs

@@ -0,0 +1,53 @@
+import { tv } from "../../lib/tv.mjs";
+import { Badge } from "../badge/badge.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/form-section/form-section.tsx
+const formSection = tv({ slots: {
+	root: ["flex flex-col gap-3 py-4 first:pt-0", "[[data-slot=form-section]+&]:border-t [[data-slot=form-section]+&]:border-line-hairline"],
+	head: ["flex min-w-0 flex-col", "gap-0.5"],
+	titleRow: ["flex min-w-0 items-center gap-2"],
+	title: ["m-0 min-w-0 flex-1", "font-sans text-footnote font-bold text-foreground-muted"],
+	description: ["m-0", "font-sans text-footnote text-foreground-hint"]
+} });
+/**
+* One part of a bigger form (a wide dialog or sheet): a small heading with
+* its status and a line on what it is for, then its fields. Consecutive
+* sections are separated by a hairline.
+*/
+function FormSection({ className, render, title, status, description, children, ...props }) {
+	const slots = formSection();
+	return useRender({
+		defaultTagName: "section",
+		render,
+		props: mergeProps({
+			"data-slot": "form-section",
+			className: slots.root({ className }),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+				"data-slot": "form-section-head",
+				className: slots.head(),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: slots.titleRow(),
+					children: [/* @__PURE__ */ jsx("h3", {
+						"data-slot": "form-section-title",
+						className: slots.title(),
+						children: title
+					}), status ? /* @__PURE__ */ jsx(Badge, {
+						appearance: "soft",
+						variant: "muted",
+						className: "shrink-0",
+						"data-slot": "form-section-status",
+						children: status
+					}) : null]
+				}), description ? /* @__PURE__ */ jsx("p", {
+					"data-slot": "form-section-description",
+					className: slots.description(),
+					children: description
+				}) : null]
+			}), children] })
+		}, props)
+	});
+}
+//#endregion
+export { FormSection };

package/dist/components/form-section/index.d.mts

@@ -0,0 +1,2 @@
+import { FormSection, FormSectionProps } from "./form-section.mjs";
+export { FormSection, type FormSectionProps };

package/dist/components/icon-tile/icon-tile.d.mts

@@ -0,0 +1,97 @@
+import { VariantProps } from "../../lib/tv.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/icon-tile/icon-tile.d.ts
+declare const iconTile: import("tailwind-variants/lite").TVReturnType<{
+  variant: {
+    default: {
+      root: string;
+    };
+    warning: {
+      root: string;
+    };
+    information: {
+      root: string;
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+}, undefined, {
+  variant: {
+    default: {
+      root: string;
+    };
+    warning: {
+      root: string;
+    };
+    information: {
+      root: string;
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  variant: {
+    default: {
+      root: string;
+    };
+    warning: {
+      root: string;
+    };
+    information: {
+      root: string;
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+}>>;
+export type IconTileProps = useRender.ComponentProps<"span"> & VariantProps<typeof iconTile>;
+/**
+ * A neutral square holding an icon, sized like an avatar: 19, 27, 35 or 51.
+ * It is decorative beside its words, so it is hidden from assistive tech; a
+ * tile that means something on its own takes `role="img"` and an
+ * `aria-label`, and is announced.
+ */
+export declare function IconTile({ variant, size, className, render, ...props }: IconTileProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/icon-tile/icon-tile.mjs

@@ -0,0 +1,49 @@
+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/icon-tile/icon-tile.tsx
+const iconTile = tv({
+	slots: { root: ["inline-flex shrink-0 items-center justify-center", "rounded-sticker [&_svg]:shrink-0"] },
+	variants: {
+		variant: {
+			default: { root: "bg-fill-muted text-foreground-muted" },
+			warning: { root: "bg-warning-soft text-foreground" },
+			information: { root: "bg-info-soft text-foreground" }
+		},
+		size: {
+			xs: { root: "size-[19px] [&_svg:not([class*='size-'])]:size-[11px]" },
+			sm: { root: "size-[27px] [&_svg:not([class*='size-'])]:size-3.5" },
+			md: { root: "size-[35px] [&_svg:not([class*='size-'])]:size-[18px]" },
+			lg: { root: "size-[51px] [&_svg:not([class*='size-'])]:size-[22px]" }
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "md"
+	}
+});
+/**
+* A neutral square holding an icon, sized like an avatar: 19, 27, 35 or 51.
+* It is decorative beside its words, so it is hidden from assistive tech; a
+* tile that means something on its own takes `role="img"` and an
+* `aria-label`, and is announced.
+*/
+function IconTile({ variant, size, className, render, ...props }) {
+	const { root } = iconTile({
+		variant,
+		size
+	});
+	const defaultProps = {
+		"data-slot": "icon-tile",
+		"data-size": size ?? "md",
+		"aria-hidden": props.role ? void 0 : true,
+		className: root({ className })
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { IconTile };

package/dist/components/icon-tile/index.d.mts

@@ -0,0 +1,2 @@
+import { IconTile, IconTileProps } from "./icon-tile.mjs";
+export { IconTile, type IconTileProps };

package/dist/components/icons/action-icons.d.mts

@@ -0,0 +1,34 @@
+import { SVGProps } from "react";
+//#region src/components/icons/action-icons.d.ts
+export type ActionIconProps = SVGProps<SVGSVGElement>;
+/** Follow a thread: a plus inside ThreadIcon's front bubble. */
+export declare function FollowThreadIcon(props: ActionIconProps): import("react").JSX.Element;
+/** Unfollow a thread: a minus inside ThreadIcon's front bubble. */
+export declare function UnfollowThreadIcon(props: ActionIconProps): import("react").JSX.Element;
+/** Join a public channel: Lucide's hash, cut short of a plus in the bottom-right corner. */
+export declare function JoinChannelIcon(props: ActionIconProps): import("react").JSX.Element;
+/** Leave a public channel: the same cut hash, with a minus. */
+export declare function LeaveChannelIcon(props: ActionIconProps): import("react").JSX.Element;
+/** Join a private channel: Lucide's lock, its body cut short of a plus in the bottom-right corner. */
+export declare function JoinPrivateChannelIcon(props: ActionIconProps): import("react").JSX.Element;
+/** Leave a private channel: the same cut lock, with a minus. */
+export declare function LeavePrivateChannelIcon(props: ActionIconProps): import("react").JSX.Element;
+/** Join a joint channel: Lucide's git-branch, with a plus in its empty bottom-right corner. */
+export declare function JoinJointChannelIcon(props: ActionIconProps): import("react").JSX.Element;
+/** Leave a joint channel: Lucide's git-branch, with a minus. */
+export declare function LeaveJointChannelIcon(props: ActionIconProps): import("react").JSX.Element;
+/** Follow an Artifact: a plus inside ArtifactIcon's page, where its two lines of text were. */
+export declare function FollowArtifactIcon(props: ActionIconProps): import("react").JSX.Element;
+/**
+ * Unfollow an Artifact: a minus inside ArtifactIcon's page. Below 18px the minus is drawn
+ * heavier and a little longer (stroke 3, 6 long, on whole pixels at 16px), so it reads as a
+ * mark rather than one more line of the page's text; at 20 and 24 it is the plain minus.
+ */
+export declare function UnfollowArtifactIcon(props: ActionIconProps): import("react").JSX.Element;
+/** Add a comment: CommentIcon at 24, its bubble cut short of a plus in the bottom-right corner. */
+export declare function AddCommentIcon(props: ActionIconProps): import("react").JSX.Element;
+/** Create a task: Lucide's list-todo, a plus in place of its last line. */
+export declare function CreateTaskIcon(props: ActionIconProps): import("react").JSX.Element;
+/** Reopen a task: a ticked box, broken open at the top by a counter-clockwise arrow (Lucide's rotate-ccw-square with a check). */
+export declare function ReopenTaskIcon(props: ActionIconProps): import("react").JSX.Element;
+//#endregion