@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/sidebar/sidebar.mjs

@@ -0,0 +1,149 @@
+import { useMobileViewport } from "../../lib/use-mobile-viewport.mjs";
+import { ScrollArea, ScrollAreaContent, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "../scroll-area/scroll-area.mjs";
+import { sidebarRecipe } from "./sidebar.recipe.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/sidebar/sidebar.tsx
+function SidebarRoot({ className, render, ...props }) {
+	const { sidebarRoot } = sidebarRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-root",
+		className: sidebarRoot({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarHeader({ children, className, render, ...props }) {
+	const { sidebarHeader, sidebarHeaderMask, sidebarHeaderMaskLayer } = sidebarRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-header",
+		className: sidebarHeader({ className }),
+		children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", {
+			"aria-hidden": true,
+			"data-slot": "sidebar-header-mask",
+			className: sidebarHeaderMask(),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					"data-slot": "sidebar-header-mask-layer",
+					"data-layer": "solid",
+					className: sidebarHeaderMaskLayer()
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-slot": "sidebar-header-mask-layer",
+					"data-layer": "soft",
+					className: sidebarHeaderMaskLayer()
+				}),
+				/* @__PURE__ */ jsx("div", {
+					"data-slot": "sidebar-header-mask-layer",
+					"data-layer": "blur",
+					className: sidebarHeaderMaskLayer()
+				})
+			]
+		}), children] })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarHeaderTitle({ className, render, ...props }) {
+	const { sidebarHeaderTitle } = sidebarRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-header-title",
+		className: sidebarHeaderTitle({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarGroupLabel({ className, render, ...props }) {
+	const { sidebarGroupLabel } = sidebarRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-group-label",
+		className: sidebarGroupLabel({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+function SidebarBody({ className, render, ...props }) {
+	const { sidebarBody } = sidebarRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-body",
+		className: sidebarBody({ className })
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+const SIDEBAR_CONTENT_INNER_STYLE = {
+	minWidth: 0,
+	width: "100%"
+};
+function SidebarContent({ children, className, render, ...props }) {
+	const isMobile = useMobileViewport();
+	const { sidebarContent, sidebarContentInner, sidebarScrollbar, sidebarViewport } = sidebarRecipe();
+	const nativeViewportProps = {
+		"data-slot": "sidebar-content",
+		className: sidebarViewport(),
+		children: /* @__PURE__ */ jsx("div", {
+			className: sidebarContentInner({ className }),
+			style: SIDEBAR_CONTENT_INNER_STYLE,
+			children
+		})
+	};
+	const nativeViewport = useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(nativeViewportProps, props)
+	});
+	if (isMobile) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-native-scroll-area",
+		className: sidebarContent(),
+		children: nativeViewport
+	});
+	return /* @__PURE__ */ jsxs(ScrollArea, {
+		"data-slot": "sidebar-scroll-area",
+		className: sidebarContent(),
+		children: [/* @__PURE__ */ jsx(ScrollAreaViewport, {
+			...props,
+			render,
+			"data-slot": "sidebar-content",
+			className: sidebarViewport(),
+			children: /* @__PURE__ */ jsx(ScrollAreaContent, {
+				className: sidebarContentInner({ className }),
+				style: SIDEBAR_CONTENT_INNER_STYLE,
+				children
+			})
+		}), /* @__PURE__ */ jsx(ScrollAreaScrollbar, {
+			className: sidebarScrollbar(),
+			children: /* @__PURE__ */ jsx(ScrollAreaThumb, {})
+		})]
+	});
+}
+function SidebarLiveActivity({ children, className, render, ...props }) {
+	const { sidebarLiveActivity } = sidebarRecipe();
+	const defaultProps = {
+		"data-slot": "sidebar-live-activity",
+		className: sidebarLiveActivity({ className }),
+		children
+	};
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: mergeProps(defaultProps, props)
+	});
+}
+//#endregion
+export { SidebarBody, SidebarContent, SidebarGroupLabel, SidebarHeader, SidebarHeaderTitle, SidebarLiveActivity, SidebarRoot };

package/dist/components/sidebar/sidebar.recipe.mjs

@@ -0,0 +1,37 @@
+import { headEdgePull, listColumnMargin } from "../../lib/head-edges.mjs";
+import { tv } from "../../lib/tv.mjs";
+//#region src/components/sidebar/sidebar.recipe.ts
+const sidebarRecipe = tv({ slots: {
+	sidebarRoot: [
+		"relative flex size-full min-h-0  select-none flex-col",
+		listColumnMargin,
+		"has-[>[data-slot=sidebar-live-activity]_[data-slot=live-agent-activity-bar]]:overflow-clip",
+		"bg-layer-sidebar text-foreground max-md:bg-layer-canvas",
+		"border-line-seam md:border-r",
+		"md:has-[>[data-slot=sidebar-live-activity]_[data-slot=live-agent-activity-bar]]:[--sidebar-content-bottom:52px]"
+	],
+	sidebarHeader: [
+		"flex items-center",
+		"h-(--shell-header-height,56px) shrink-0 gap-2 border-b border-line-seam px-(--column-margin)",
+		"bg-layer-sidebar text-foreground",
+		"max-md:bg-layer-frame max-md:text-foreground-on-frame",
+		headEdgePull,
+		"[@media(max-height:600px)]:h-12"
+	],
+	sidebarHeaderMask: ["pointer-events-none absolute inset-x-0 top-0 -z-10 hidden"],
+	sidebarHeaderMaskLayer: ["absolute inset-x-0 top-0"],
+	sidebarHeaderTitle: ["truncate font-bold", "font-sans text-headline text-foreground max-md:text-foreground-on-frame"],
+	sidebarGroupLabel: ["px-5 pt-4 pb-0", "font-sans text-footnote font-bold normal-case tracking-normal text-foreground-hint"],
+	sidebarBody: ["relative flex min-h-0 flex-1 overflow-hidden", "bg-layer-sidebar max-md:bg-layer-canvas"],
+	sidebarContent: ["relative flex min-h-0 min-w-0 flex-1"],
+	sidebarViewport: ["size-full min-h-0  flex-1 overflow-x-hidden overflow-y-auto"],
+	sidebarContentInner: ["min-h-full min-w-0 w-full", "pt-2 pb-(--sidebar-content-bottom,8px)"],
+	sidebarScrollbar: [
+		"z-30 flex w-3 justify-center py-1 opacity-0 transition-opacity duration-150",
+		"pointer-events-none",
+		"data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0"
+	],
+	sidebarLiveActivity: ["pointer-events-none absolute inset-x-0 max-md:hidden", "bottom-0 z-40"]
+} });
+//#endregion
+export { sidebarRecipe };

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

@@ -0,0 +1,2 @@
+import { Skeleton, SkeletonProps, SkeletonVariant } from "./skeleton.mjs";
+export { Skeleton, type SkeletonProps, type SkeletonVariant };

package/dist/components/skeleton/skeleton.d.mts

@@ -0,0 +1,50 @@
+import { VariantProps } from "../../lib/tv.mjs";
+import { HTMLAttributes } from "react";
+//#region src/components/skeleton/skeleton.d.ts
+declare const skeleton: import("tailwind-variants/lite").TVReturnType<{
+  variant: {
+    line: {
+      root: string;
+    };
+    block: {
+      root: string;
+    };
+    circle: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+}, undefined, {
+  variant: {
+    line: {
+      root: string;
+    };
+    block: {
+      root: string;
+    };
+    circle: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  variant: {
+    line: {
+      root: string;
+    };
+    block: {
+      root: string;
+    };
+    circle: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+}>>;
+export type SkeletonVariant = NonNullable<VariantProps<typeof skeleton>["variant"]>;
+export type SkeletonProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof skeleton>;
+export declare function Skeleton({ variant, className, ...props }: SkeletonProps): import("react").JSX.Element;
+//#endregion

package/dist/components/skeleton/skeleton.mjs

@@ -0,0 +1,29 @@
+import { tv } from "../../lib/tv.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/skeleton/skeleton.tsx
+const skeleton = tv({
+	slots: { root: [
+		"animate-pulse motion-reduce:animate-none",
+		"pointer-events-none",
+		"data-[variant=line]:rounded-sticker data-[variant=line]:bg-fill-muted",
+		"data-[variant=block]:rounded-sticker data-[variant=block]:bg-fill-muted"
+	] },
+	variants: { variant: {
+		line: { root: "h-3" },
+		block: { root: "" },
+		circle: { root: ["rounded-sticker bg-fill-muted"] }
+	} },
+	defaultVariants: { variant: "block" }
+});
+function Skeleton({ variant = "block", className, ...props }) {
+	const { root } = skeleton({ variant });
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		"data-slot": "skeleton",
+		"data-variant": variant,
+		className: root({ className }),
+		...props
+	});
+}
+//#endregion
+export { Skeleton };

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

@@ -0,0 +1,2 @@
+import { Spinner, SpinnerProps } from "./spinner.mjs";
+export { Spinner, type SpinnerProps };

package/dist/components/spinner/spinner.d.mts

@@ -0,0 +1,77 @@
+import { VariantProps } from "../../lib/tv.mjs";
+import { WithoutChildren } from "../../lib/without-children.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/spinner/spinner.d.ts
+declare const spinner: import("tailwind-variants/lite").TVReturnType<{
+  size: {
+    xs: {
+      root: string[];
+    };
+    sm: {};
+    md: {
+      root: string[];
+    };
+    lg: {
+      root: string[];
+    };
+  };
+  variant: {
+    default: {};
+    inverse: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  ring: string[];
+  pixel: string[];
+}, undefined, {
+  size: {
+    xs: {
+      root: string[];
+    };
+    sm: {};
+    md: {
+      root: string[];
+    };
+    lg: {
+      root: string[];
+    };
+  };
+  variant: {
+    default: {};
+    inverse: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  ring: string[];
+  pixel: string[];
+}, import("tailwind-variants/lite").TVReturnTypeLike<{
+  size: {
+    xs: {
+      root: string[];
+    };
+    sm: {};
+    md: {
+      root: string[];
+    };
+    lg: {
+      root: string[];
+    };
+  };
+  variant: {
+    default: {};
+    inverse: {
+      root: string[];
+    };
+  };
+}, {
+  root: string[];
+  ring: string[];
+  pixel: string[];
+}>>;
+export type SpinnerProps = WithoutChildren<useRender.ComponentProps<"span">> & VariantProps<typeof spinner>;
+export declare function Spinner({ size, variant, className, render, ...props }: SpinnerProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion

package/dist/components/spinner/spinner.mjs

@@ -0,0 +1,118 @@
+import { tv } from "../../lib/tv.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/spinner/spinner.tsx
+const SPINNER_STYLE = `
+@keyframes raft-spinner-pixel {
+  0%,
+  24% {
+    opacity: 1;
+  }
+  25%,
+  100% {
+    opacity: 0.2;
+  }
+}
+
+[data-slot="spinner"] [data-spinner-pixel] {
+  animation: raft-spinner-pixel 1s steps(1) infinite;
+}
+
+[data-slot="spinner"] [data-spinner-pixel]:nth-child(2) {
+  animation-delay: 0.25s;
+}
+
+[data-slot="spinner"] [data-spinner-pixel]:nth-child(4) {
+  animation-delay: 0.5s;
+}
+
+[data-slot="spinner"] [data-spinner-pixel]:nth-child(3) {
+  animation-delay: 0.75s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot="spinner"] [data-spinner-pixel] {
+    animation: none;
+  }
+
+  [data-slot="spinner"] [data-spinner-pixel]:first-child {
+    opacity: 1;
+  }
+}
+`;
+const spinner = tv({
+	slots: {
+		root: [
+			"relative inline-flex shrink-0 items-center justify-center",
+			"leading-none text-current",
+			"[--spinner-pixel:5px] [--spinner-gap:2px]"
+		],
+		ring: ["shrink-0", "grid size-auto grid-cols-[repeat(2,var(--spinner-pixel))] gap-(--spinner-gap)"],
+		pixel: ["block size-(--spinner-pixel) rounded-[1px] bg-current opacity-20"]
+	},
+	variants: {
+		size: {
+			xs: { root: ["[--spinner-pixel:4px] [--spinner-gap:1.5px]"] },
+			sm: {},
+			md: { root: ["[--spinner-pixel:6px] [--spinner-gap:2px]"] },
+			lg: { root: ["[--spinner-pixel:8px] [--spinner-gap:3px]"] }
+		},
+		variant: {
+			default: {},
+			inverse: { root: ["text-foreground-inverse"] }
+		}
+	},
+	defaultVariants: { size: "sm" }
+});
+const spinnerStyle = /* @__PURE__ */ jsx("style", {
+	href: "raft-ui-spinner",
+	precedence: "default",
+	children: SPINNER_STYLE
+});
+function Spinner({ size = "sm", variant = "default", className, render, ...props }) {
+	const { root, ring, pixel } = spinner({
+		size,
+		variant
+	});
+	const children = /* @__PURE__ */ jsxs(Fragment, { children: [spinnerStyle, /* @__PURE__ */ jsxs("span", {
+		"data-spinner-grid": "",
+		"aria-hidden": "true",
+		className: ring(),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-spinner-pixel": "",
+				className: pixel()
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-spinner-pixel": "",
+				className: pixel()
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-spinner-pixel": "",
+				className: pixel()
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"data-spinner-pixel": "",
+				className: pixel()
+			})
+		]
+	})] });
+	const defaultProps = {
+		role: "status",
+		"aria-label": "Loading",
+		className: root({ className }),
+		children
+	};
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: {
+			slot: "spinner",
+			size
+		}
+	});
+}
+//#endregion
+export { Spinner };

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

@@ -0,0 +1,2 @@
+import { Status, StatusProps } from "./status.mjs";
+export { Status, type StatusProps };

package/dist/components/status/status.d.mts

@@ -0,0 +1,143 @@
+import { VariantProps } from "../../lib/tv.mjs";
+import { Presence } from "../../lib/presence.mjs";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/status/status.d.ts
+declare const status: import("tailwind-variants/lite").TVReturnType<{
+  variant: {
+    default: {
+      root: string;
+    };
+    primary: {
+      root: string;
+    };
+    information: {
+      root: string;
+    };
+    muted: {
+      root: string;
+    };
+    accent: {
+      root: string;
+    };
+    success: {
+      root: string;
+    };
+    warning: {
+      root: string;
+    };
+    danger: {
+      root: string;
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+}, undefined, {
+  variant: {
+    default: {
+      root: string;
+    };
+    primary: {
+      root: string;
+    };
+    information: {
+      root: string;
+    };
+    muted: {
+      root: string;
+    };
+    accent: {
+      root: string;
+    };
+    success: {
+      root: string;
+    };
+    warning: {
+      root: string;
+    };
+    danger: {
+      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;
+    };
+    primary: {
+      root: string;
+    };
+    information: {
+      root: string;
+    };
+    muted: {
+      root: string;
+    };
+    accent: {
+      root: string;
+    };
+    success: {
+      root: string;
+    };
+    warning: {
+      root: string;
+    };
+    danger: {
+      root: string;
+    };
+  };
+  size: {
+    xs: {
+      root: string;
+    };
+    sm: {
+      root: string;
+    };
+    md: {
+      root: string;
+    };
+    lg: {
+      root: string;
+    };
+  };
+}, {
+  root: string[];
+}>>;
+export type StatusProps = Omit<useRender.ComponentProps<"span">, "children"> & VariantProps<typeof status> & {
+  /** A status light (online, busy, error, offline, external): a fixed
+   *  meaning that needs its word nearby, or an aria-label. It takes the
+   *  place of `variant`'s colour. */
+  presence?: Presence;
+};
+declare function StatusRoot({ size, variant, presence, className, render, ...props }: StatusProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export declare const Status: typeof StatusRoot;
+//#endregion

package/dist/components/status/status.mjs

@@ -0,0 +1,56 @@
+import { cn } from "../../cn.mjs";
+import { tv } from "../../lib/tv.mjs";
+import { PRESENCE_COLOR } from "../../lib/presence.mjs";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/status/status.tsx
+const status = tv({
+	slots: { root: [
+		"relative inline-block shrink-0",
+		"bg-(--status-color)",
+		"rounded-[2px] border-[1.5px] border-sticker-ink"
+	] },
+	variants: {
+		variant: {
+			default: { root: "[--status-color:var(--presence-offline)]" },
+			primary: { root: "[--status-color:var(--presence-busy)]" },
+			information: { root: "[--status-color:var(--info)]" },
+			muted: { root: "[--status-color:var(--secondary-400)]" },
+			accent: { root: "[--status-color:var(--attention-400)]" },
+			success: { root: "[--status-color:var(--success)]" },
+			warning: { root: "[--status-color:var(--warning)]" },
+			danger: { root: "[--status-color:var(--danger)]" }
+		},
+		size: {
+			xs: { root: "size-1.5 rounded-[1px] border" },
+			sm: { root: "size-2" },
+			md: { root: "size-2.5" },
+			lg: { root: "size-[11px]" }
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		variant: "default"
+	}
+});
+function StatusRoot({ size, variant, presence, className, render, ...props }) {
+	const { root } = status({
+		size,
+		variant
+	});
+	const defaultProps = { className: root({ className: cn(presence && PRESENCE_COLOR[presence], className) }) };
+	return useRender({
+		defaultTagName: "span",
+		render,
+		props: mergeProps(defaultProps, props),
+		state: {
+			slot: "status",
+			variant,
+			presence,
+			size
+		}
+	});
+}
+const Status = StatusRoot;
+//#endregion
+export { Status };

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

@@ -0,0 +1,3 @@
+import { Step, StepProps, StepStatus, Steps, StepsProps } from "./steps.mjs";
+import { OtterIndicator, OtterIndicatorProps } from "./otter-indicator.mjs";
+export { OtterIndicator, type OtterIndicatorProps, Step, type StepProps, type StepStatus, Steps, type StepsProps };

package/dist/components/steps/otter-indicator.d.mts

@@ -0,0 +1,17 @@
+import { StepStatus } from "./steps.mjs";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/steps/otter-indicator.d.ts
+export interface OtterIndicatorProps extends Omit<ComponentPropsWithRef<"svg">, "children"> {
+  status: StepStatus;
+}
+/**
+ * An otter on its back, one pose per status:
+ * - `wait`: asleep on the dry bank, the parcel still on its belly.
+ * - `process`: afloat, paddling with one arm, the parcel on its belly.
+ * - `finish`: drifting at ease, hugging the delivered parcel.
+ * - `error`: shivering in the water; the parcel has slipped away.
+ *
+ * It fills its box; give it 48px or more so the poses read.
+ */
+export declare function OtterIndicator({ status, className, ...props }: OtterIndicatorProps): import("react").JSX.Element;
+//#endregion