@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/avatar/avatar.mjs

@@ -0,0 +1,298 @@
+import { cn } from "../../cn.mjs";
+import { tv } from "../../lib/tv.mjs";
+import { defaultNativeButton } from "../../lib/default-native-button.mjs";
+import { PRESENCE_COLOR } from "../../lib/presence.mjs";
+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";
+import { Avatar } from "@base-ui/react";
+//#region src/components/avatar/avatar.tsx
+const avatar = tv({
+	slots: {
+		root: [
+			"group/avatar relative flex shrink-0 items-center justify-center select-none",
+			"rounded-sticker border-[1.5px] border-sticker-ink",
+			"text-sticker-ink shadow-[0_0_0_1.5px_var(--sticker-edge)]"
+		],
+		image: ["size-full object-cover", "rounded-[2px]"],
+		fallback: [
+			"flex size-full items-center justify-center",
+			"[&>svg]:size-4",
+			"[[data-size='lg']>&]:[&>svg]:size-6",
+			"[[data-size='md']>&]:[&>svg]:size-4.5",
+			"[[data-size='xs']>&]:[&>svg]:size-3",
+			"overflow-hidden rounded-[2px]",
+			"font-sans text-[15px] leading-none font-bold tracking-[-0.01em] text-sticker-ink",
+			"[[data-type='server']>&]:text-brand",
+			"[[data-size='xl']>&]:text-[40px]",
+			"[[data-size='lg']>&]:text-[22px]",
+			"[[data-size='sm']>&]:text-[13px]",
+			"[[data-size='xs']>&]:text-[11px]",
+			"[[data-size='2xs']>&]:text-[11px]",
+			"[[data-size='3xs']>&]:text-[8px]",
+			"[[data-size='xl']>&]:[&>svg]:size-12",
+			"[[data-size='sm']>&]:[&>svg]:size-3.5",
+			"[[data-size='2xs']>&]:[&>svg]:size-3",
+			"[[data-size='3xs']>&]:[&>svg]:size-2"
+		],
+		badge: [
+			"absolute z-10 select-none",
+			"size-[11px] -right-1 -bottom-1 rounded-[2px]",
+			"outline-2 outline-solid outline-layer-canvas",
+			"group-data-[size=xl]/avatar:size-5 group-data-[size=xl]/avatar:-right-2 group-data-[size=xl]/avatar:-bottom-2",
+			"group-data-[size=lg]/avatar:size-3.5 group-data-[size=lg]/avatar:right-[-5px] group-data-[size=lg]/avatar:bottom-[-5px]",
+			"group-data-[size=md]/avatar:size-[11px]",
+			"group-data-[size=sm]/avatar:size-[9px] group-data-[size=sm]/avatar:right-[-3px] group-data-[size=sm]/avatar:bottom-[-3px]",
+			"group-data-[size=xs]/avatar:size-[7px] group-data-[size=xs]/avatar:-right-0.5 group-data-[size=xs]/avatar:-bottom-0.5",
+			"group-data-[size=2xs]/avatar:size-[7px] group-data-[size=2xs]/avatar:-right-0.5 group-data-[size=2xs]/avatar:-bottom-0.5",
+			"group-data-[size=3xs]/avatar:size-1.5 group-data-[size=3xs]/avatar:-right-0.5 group-data-[size=3xs]/avatar:-bottom-0.5"
+		],
+		dot: [
+			"inline-flex items-center justify-center outline-2",
+			"[&>svg]:hidden",
+			"group-data-[size=xl]/avatar:[&>svg]:size-2 group-data-[size=xl]/avatar:[&>svg]:block",
+			"group-data-[size=lg]/avatar:[&>svg]:size-2 group-data-[size=lg]/avatar:[&>svg]:block",
+			"group-data-[size=md]/avatar:[&>svg]:size-1.5 group-data-[size=md]/avatar:[&>svg]:block",
+			"group-data-[size=xs]/avatar:outline group-data-[size=2xs]/avatar:outline group-data-[size=3xs]/avatar:outline",
+			"rounded-[2px] border-[1.5px] border-sticker-ink",
+			"bg-(--status-color) text-sticker-ink outline-layer-canvas",
+			"group-data-[size=xl]/avatar:border-2",
+			"group-data-[size=xs]/avatar:border group-data-[size=2xs]/avatar:border group-data-[size=3xs]/avatar:border"
+		],
+		group: [
+			"group/avatar-group flex items-center",
+			"stack-x-[-5px]",
+			"*:data-[slot=avatar]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--avatar-group-surface,var(--layer-canvas))]",
+			"*:data-[slot=avatar-group-count]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--avatar-group-surface,var(--layer-canvas))]"
+		],
+		groupButton: [
+			"relative inline-flex shrink-0 cursor-pointer items-center p-1",
+			"rounded-chip border-0 bg-transparent",
+			"transition-colors *:transition-shadow *:duration-150 enabled:hover:bg-fill-medium enabled:active:bg-fill-medium",
+			"enabled:hover:*:data-[slot=avatar]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--fill-medium),0_0_0_3px_var(--avatar-group-surface,var(--layer-canvas))]",
+			"enabled:hover:*:data-[slot=avatar-group-count]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--fill-medium),0_0_0_3px_var(--avatar-group-surface,var(--layer-canvas))]",
+			"enabled:active:*:data-[slot=avatar]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--fill-medium),0_0_0_3px_var(--avatar-group-surface,var(--layer-canvas))]",
+			"enabled:active:*:data-[slot=avatar-group-count]:shadow-[0_0_0_1.5px_var(--sticker-edge),0_0_0_3px_var(--fill-medium),0_0_0_3px_var(--avatar-group-surface,var(--layer-canvas))]",
+			"outline-none focus-visible:shadow-focus",
+			"disabled:cursor-default"
+		]
+	},
+	variants: {
+		type: {
+			agent: { root: ["bg-inactive"] },
+			human: { root: ["bg-palette-lavender"] },
+			server: { root: ["bg-sticker-ink"] }
+		},
+		size: {
+			xl: { root: ["size-[99px] shadow-[0_0_0_1.5px_var(--sticker-edge),var(--elevation-sticker)]"] },
+			lg: { root: ["size-[51px]"] },
+			md: { root: ["size-[35px]"] },
+			sm: { root: ["size-[27px]"] },
+			xs: { root: ["size-[19px]"] },
+			"2xs": { root: ["size-[19px]"] },
+			"3xs": { root: "size-3.5" }
+		}
+	}
+});
+function Avatar$1({ size, type, className, children, ...props }) {
+	const { root } = avatar({
+		type,
+		size
+	});
+	return /* @__PURE__ */ jsx(Avatar.Root, {
+		"data-slot": "avatar",
+		"data-size": size,
+		"data-type": type,
+		className: root({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(AvatarFallback, {})
+	});
+}
+function AvatarImage({ className, ...props }) {
+	const { image } = avatar();
+	return /* @__PURE__ */ jsx(Avatar.Image, {
+		"data-slot": "avatar-image",
+		className: image({ className }),
+		...props
+	});
+}
+function AvatarFallbackIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "18",
+		height: "18",
+		viewBox: "0 0 18 18",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: /* @__PURE__ */ jsxs("g", {
+			fill: "none",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "1",
+			stroke: "currentColor",
+			children: [
+				/* @__PURE__ */ jsx("circle", {
+					cx: "9",
+					cy: "7.75",
+					r: "2"
+				}),
+				/* @__PURE__ */ jsx("path", { d: "M9,16.25c1.407,0,2.716-.407,3.827-1.101-.481-1.67-2.003-2.899-3.827-2.899s-3.347,1.229-3.827,2.899c1.112,.694,2.42,1.101,3.827,1.101Z" }),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "1.889",
+					cy: "10.414",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "2.971",
+					cy: "4.972",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "2.972",
+					cy: "13.027",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "1.89",
+					cy: "7.586",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "4.973",
+					cy: "2.972",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "7.586",
+					cy: "1.889",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "15.029",
+					cy: "13.028",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "16.111",
+					cy: "7.586",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "13.028",
+					cy: "2.971",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "16.11",
+					cy: "10.414",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "15.028",
+					cy: "4.973",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				}),
+				/* @__PURE__ */ jsx("circle", {
+					cx: "10.414",
+					cy: "1.89",
+					r: ".75",
+					fill: "currentColor",
+					"data-stroke": "none",
+					stroke: "none"
+				})
+			]
+		})
+	});
+}
+function AvatarFallback({ className, children, ...props }) {
+	const { fallback } = avatar();
+	return /* @__PURE__ */ jsx(Avatar.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: fallback({ className }),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(AvatarFallbackIcon, {})
+	});
+}
+const toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
+function AvatarBadge({ className, render, offset, presence = "online", ...props }) {
+	const { badge, dot } = avatar();
+	const offsetStyle = offset ? {
+		top: toCssLength(offset[1]),
+		left: toCssLength(offset[0]),
+		right: "auto",
+		bottom: "auto",
+		translate: "-50% -50%"
+	} : void 0;
+	const defaultProps = {
+		className: badge({ className: render ? className : dot({ className: cn(PRESENCE_COLOR[presence], className) }) }),
+		style: offsetStyle
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: { slot: "avatar-badge" }
+	});
+}
+function AvatarGroup({ className, ...props }) {
+	const { group } = avatar();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group",
+		className: group({ className }),
+		...props
+	});
+}
+function AvatarGroupButton({ className, render, nativeButton, ...props }) {
+	const { group, groupButton } = avatar();
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		render,
+		nativeButton: nativeButton ?? defaultNativeButton(render),
+		"data-slot": "avatar-group-button",
+		className: group({ class: [groupButton(), className] })
+	});
+}
+function AvatarGroupCount({ size, className, ...props }) {
+	const { root } = avatar({ size });
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "avatar-group-count",
+		className: root({ class: ["border-transparent bg-fill-muted font-mono text-mono-meta font-bold tabular-nums text-foreground-muted shadow-none", className] }),
+		...props
+	});
+}
+//#endregion
+export { Avatar$1 as Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupButton, AvatarGroupCount, AvatarImage };

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

@@ -0,0 +1,2 @@
+import { Avatar, AvatarBadge, AvatarBadgeOffset, AvatarBadgeProps, AvatarFallback, AvatarFallbackProps, AvatarGroup, AvatarGroupButton, AvatarGroupButtonProps, AvatarGroupCount, AvatarGroupCountProps, AvatarGroupProps, AvatarImage, AvatarImageProps, AvatarProps, AvatarSize } from "./avatar.mjs";
+export { Avatar, AvatarBadge, type AvatarBadgeOffset, type AvatarBadgeProps, AvatarFallback, type AvatarFallbackProps, AvatarGroup, AvatarGroupButton, type AvatarGroupButtonProps, AvatarGroupCount, type AvatarGroupCountProps, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, type AvatarSize };

package/dist/components/badge/badge.d.mts

@@ -0,0 +1,89 @@
+import { VariantProps } from "../../lib/tv.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/badge/badge.d.ts
+export declare const badge: import("tailwind-variants/lite").TVReturnType<{
+  appearance: {
+    solid: {
+      root: string[];
+    };
+    soft: {
+      root: string[];
+    };
+    outline: {
+      root: string[];
+    };
+  };
+  variant: {
+    default: "";
+    primary: "";
+    you: "";
+    busy: "";
+    information: "";
+    muted: "";
+    accent: "";
+    success: "";
+    warning: "";
+    danger: "";
+  };
+}, {
+  root: string[];
+}, undefined, {
+  appearance: {
+    solid: {
+      root: string[];
+    };
+    soft: {
+      root: string[];
+    };
+    outline: {
+      root: string[];
+    };
+  };
+  variant: {
+    default: "";
+    primary: "";
+    you: "";
+    busy: "";
+    information: "";
+    muted: "";
+    accent: "";
+    success: "";
+    warning: "";
+    danger: "";
+  };
+}, {
+  root: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  appearance: {
+    solid: {
+      root: string[];
+    };
+    soft: {
+      root: string[];
+    };
+    outline: {
+      root: string[];
+    };
+  };
+  variant: {
+    default: "";
+    primary: "";
+    you: "";
+    busy: "";
+    information: "";
+    muted: "";
+    accent: "";
+    success: "";
+    warning: "";
+    danger: "";
+  };
+}, {
+  root: string[];
+}>>;
+export type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badge>;
+declare function BadgeRoot({ appearance, variant, className, render, ...props }: BadgeProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function Experimental({ children, ...props }: Omit<BadgeProps, "appearance" | "variant">): import("react").JSX.Element;
+export declare const Badge: typeof BadgeRoot & {
+  Experimental: typeof Experimental;
+};
+//#endregion

package/dist/components/badge/badge.mjs

@@ -0,0 +1,203 @@
+import { tv } from "../../lib/tv.mjs";
+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/badge/badge.tsx
+const badge = tv({
+	slots: { root: [
+		"inline-flex h-[22px] w-fit min-w-0 max-w-full shrink-0 items-center gap-1 overflow-hidden whitespace-nowrap rounded-chip px-1.5",
+		"font-sans text-caption font-semibold normal-case tracking-normal",
+		"transition-[filter,opacity] duration-100",
+		"[&_svg]:size-3.5 [&_svg]:shrink-0 [&_[data-slot='spinner']]:size-3 [&_[data-slot='spinner']]:text-xs",
+		"*:data-[slot=status]:lead-dot",
+		"disabled:cursor-not-allowed disabled:bg-fill-muted disabled:text-foreground-disabled disabled:opacity-100 disabled:inset-ring-0"
+	] },
+	variants: {
+		appearance: {
+			solid: { root: [
+				"h-5 min-w-5 justify-center rounded-sticker",
+				"font-bold tabular-nums",
+				"text-sticker-ink inset-ring-[1.5px] inset-ring-sticker-ink ring-[1.5px] ring-sticker-edge",
+				"[&_svg]:size-[13px]",
+				"enabled:hover:overlay-sticker-medium enabled:active:overlay-sticker-medium"
+			] },
+			soft: { root: ["text-foreground", "enabled:hover:overlay-medium enabled:active:overlay-medium"] },
+			outline: { root: [
+				"font-mono text-mono-meta font-normal",
+				"bg-transparent text-foreground-muted inset-ring inset-ring-line-hairline",
+				"enabled:hover:bg-fill-medium enabled:active:bg-fill-medium"
+			] }
+		},
+		variant: {
+			default: "",
+			primary: "",
+			you: "",
+			busy: "",
+			information: "",
+			muted: "",
+			accent: "",
+			success: "",
+			warning: "",
+			danger: ""
+		}
+	},
+	defaultVariants: {
+		appearance: "solid",
+		variant: "default"
+	},
+	compoundVariants: [
+		{
+			appearance: "solid",
+			variant: "default",
+			class: { root: "bg-sticker-paper" }
+		},
+		{
+			appearance: "solid",
+			variant: "muted",
+			class: { root: "bg-inactive" }
+		},
+		{
+			appearance: "solid",
+			variant: "primary",
+			class: { root: "bg-brand" }
+		},
+		{
+			appearance: "solid",
+			variant: "you",
+			class: { root: "bg-you" }
+		},
+		{
+			appearance: "solid",
+			variant: "busy",
+			class: { root: "bg-presence-busy" }
+		},
+		{
+			appearance: "solid",
+			variant: "information",
+			class: { root: "bg-info" }
+		},
+		{
+			appearance: "solid",
+			variant: "accent",
+			class: { root: "bg-attention font-mono text-mono-meta" }
+		},
+		{
+			appearance: "solid",
+			variant: "success",
+			class: { root: "bg-success" }
+		},
+		{
+			appearance: "solid",
+			variant: "warning",
+			class: { root: "bg-warning" }
+		},
+		{
+			appearance: "solid",
+			variant: "danger",
+			class: { root: "bg-danger" }
+		},
+		{
+			appearance: "soft",
+			variant: "default",
+			class: { root: "bg-fill-muted" }
+		},
+		{
+			appearance: "soft",
+			variant: "muted",
+			class: { root: "bg-inactive-soft" }
+		},
+		{
+			appearance: "soft",
+			variant: "primary",
+			class: { root: "bg-brand-soft" }
+		},
+		{
+			appearance: "soft",
+			variant: "busy",
+			class: { root: "bg-presence-busy-soft" }
+		},
+		{
+			appearance: "soft",
+			variant: "information",
+			class: { root: "bg-info-soft" }
+		},
+		{
+			appearance: "soft",
+			variant: "accent",
+			class: { root: "bg-attention-soft" }
+		},
+		{
+			appearance: "soft",
+			variant: "success",
+			class: { root: "bg-success-soft" }
+		},
+		{
+			appearance: "soft",
+			variant: "warning",
+			class: { root: "bg-warning-soft" }
+		},
+		{
+			appearance: "soft",
+			variant: "danger",
+			class: { root: "bg-danger-soft" }
+		},
+		{
+			appearance: "outline",
+			variant: "primary",
+			class: { root: "text-brand-strong" }
+		},
+		{
+			appearance: "outline",
+			variant: "information",
+			class: { root: "text-info-strong" }
+		},
+		{
+			appearance: "outline",
+			variant: "accent",
+			class: { root: "text-attention-strong" }
+		},
+		{
+			appearance: "outline",
+			variant: "success",
+			class: { root: "text-success-strong" }
+		},
+		{
+			appearance: "outline",
+			variant: "warning",
+			class: { root: "text-warning-strong" }
+		},
+		{
+			appearance: "outline",
+			variant: "danger",
+			class: { root: "text-danger-strong" }
+		}
+	]
+});
+function BadgeRoot({ appearance, variant, className, render, ...props }) {
+	const resolvedAppearance = appearance ?? "solid";
+	const { root } = badge({
+		appearance: resolvedAppearance,
+		variant
+	});
+	const defaultProps = { className: root({ className }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: {
+			slot: "badge",
+			appearance: resolvedAppearance,
+			variant
+		}
+	});
+}
+function Experimental({ children, ...props }) {
+	return /* @__PURE__ */ jsx(BadgeRoot, {
+		variant: "success",
+		...props,
+		children: children ?? "Experimental"
+	});
+}
+const Badge = Object.assign(BadgeRoot, { Experimental });
+//#endregion
+export { Badge, badge };

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

@@ -0,0 +1,2 @@
+import { Badge, BadgeProps } from "./badge.mjs";
+export { Badge, type BadgeProps };