@botiverse/raft-ui 0.51.0 → 0.52.0

package/dist/components/dropdown-menu/dropdown-menu.mjs

@@ -0,0 +1,319 @@
+import { tv } from "../../lib/tv.mjs";
+import { useThemeScopeProps } from "../../lib/theme/theme-scope.mjs";
+import { Button } from "../button/button.mjs";
+import { Badge } from "../badge/badge.mjs";
+import { usePopupCollisionPadding } from "../../lib/frame-insets.mjs";
+import { Kbd } from "../kbd/kbd.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/dropdown-menu/dropdown-menu.tsx
+const dropdownMenu = tv({ slots: {
+	trigger: ["select-none"],
+	positioner: ["isolate z-50 outline-none"],
+	content: [
+		"max-h-(--available-height) overflow-hidden",
+		"outline-none",
+		"flex min-w-60 flex-col gap-0 rounded-container bg-layer-popover p-1 text-foreground",
+		"shadow-float ring-1 ring-line-seam"
+	],
+	item: [
+		"flex w-full cursor-default select-none items-center",
+		"text-left outline-none transition-colors",
+		"min-h-option gap-2.5 rounded-chip px-2.5 py-option-inset",
+		"font-sans text-callout font-medium text-foreground",
+		"hover:bg-brand-soft data-highlighted:bg-brand-soft",
+		"data-checked:font-bold data-[selected]:font-bold data-[emphasis=strong]:font-bold",
+		"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
+		"[&>svg]:text-foreground-muted data-disabled:[&>svg]:text-foreground-disabled"
+	],
+	radioItem: [
+		"flex w-full cursor-default select-none items-center",
+		"text-left outline-none transition-colors",
+		"min-h-option gap-2.5 rounded-chip px-2.5 py-option-inset",
+		"font-sans text-callout font-medium text-foreground",
+		"hover:bg-brand-soft data-highlighted:bg-brand-soft",
+		"data-checked:font-bold",
+		"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
+		"[&>svg]:text-foreground-muted data-disabled:[&>svg]:text-foreground-disabled"
+	],
+	submenuTrigger: [
+		"flex w-full cursor-default select-none items-center",
+		"text-left outline-none transition-colors",
+		"min-h-option gap-2.5 rounded-chip px-2.5 py-option-inset",
+		"font-sans text-callout font-medium text-foreground",
+		"hover:bg-brand-soft data-highlighted:bg-brand-soft data-popup-open:bg-brand-soft",
+		"data-disabled:pointer-events-none data-disabled:text-foreground-disabled",
+		"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&>svg:not([class*='size-'])]:size-4",
+		"[&>svg]:text-foreground-muted data-disabled:[&>svg]:text-foreground-disabled"
+	],
+	itemLabel: ["min-w-0 flex-1 truncate text-left"],
+	footer: ["px-3 py-2 text-xs text-foreground-muted tabular-nums"],
+	label: ["px-2.5 pt-2 pb-1", "font-sans text-caption font-bold text-foreground-hint"],
+	shortcut: [
+		"ml-auto",
+		"h-auto min-w-0 rounded-none bg-transparent p-0 shadow-none ring-0",
+		"font-mono text-mono-meta font-normal text-foreground-hint"
+	],
+	itemCount: ["ml-auto inline-flex min-w-5 justify-center gap-0 px-1 tabular-nums"],
+	separator: ["-mx-1 my-1 h-px border-0 bg-line-hairline"],
+	indicator: ["pointer-events-none ml-auto flex shrink-0 items-center justify-center", "size-4 text-foreground [&_svg]:size-4"],
+	radioLabel: ["min-w-0 flex-1 truncate"]
+} });
+function DropdownMenu(props) {
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+function DropdownMenuSubmenu(props) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
+		"data-slot": "dropdown-menu-submenu",
+		...props
+	});
+}
+function DropdownMenuTrigger({ className, render = /* @__PURE__ */ jsx(Button, {
+	variant: "outline",
+	size: "md"
+}), ...props }) {
+	const { trigger } = dropdownMenu();
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		render,
+		className: trigger({ className }),
+		...props
+	});
+}
+function DropdownMenuPortal(props) {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...useThemeScopeProps(props)
+	});
+}
+function DropdownMenuPopup({ className, ...props }) {
+	const { content } = dropdownMenu();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dropdown-menu-content",
+		className: content({ className }),
+		...props
+	});
+}
+function DropdownMenuFramePositioner({ collisionPadding, container, ...props }) {
+	const padding = usePopupCollisionPadding(collisionPadding, 5, container);
+	return /* @__PURE__ */ jsx(Menu.Positioner, {
+		collisionPadding: padding,
+		...props
+	});
+}
+function DropdownMenuContent({ align = "start", alignOffset = 0, anchor, arrowPadding, collisionAvoidance, collisionBoundary, collisionPadding, disableAnchorTracking, positionMethod = "fixed", side = "bottom", sideOffset, sticky, portalProps, className, ...props }) {
+	const resolvedSideOffset = sideOffset ?? 6;
+	const { positioner, content } = dropdownMenu();
+	return /* @__PURE__ */ jsx(DropdownMenuPortal, {
+		...portalProps,
+		children: /* @__PURE__ */ jsx(DropdownMenuFramePositioner, {
+			align,
+			alignOffset,
+			anchor,
+			arrowPadding,
+			collisionAvoidance,
+			collisionBoundary,
+			collisionPadding,
+			container: portalProps?.container,
+			disableAnchorTracking,
+			positionMethod,
+			side,
+			sideOffset: resolvedSideOffset,
+			sticky,
+			className: positioner(),
+			children: /* @__PURE__ */ jsx(Menu.Popup, {
+				"data-slot": "dropdown-menu-content",
+				className: content({ className }),
+				...props
+			})
+		})
+	});
+}
+function DropdownMenuItem({ className, ...props }) {
+	const { item } = dropdownMenu();
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		className: item({ className }),
+		...props
+	});
+}
+function DropdownMenuItemLabel({ className, ...props }) {
+	const { itemLabel } = dropdownMenu();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-item-label",
+		className: itemLabel({ className }),
+		...props
+	});
+}
+function DropdownMenuFooter({ className, ...props }) {
+	const { footer } = dropdownMenu();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dropdown-menu-footer",
+		className: footer({ className }),
+		...props
+	});
+}
+function DropdownMenuSubmenuTrigger({ children, className, ...props }) {
+	const { submenuTrigger, indicator } = dropdownMenu();
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		"data-slot": "dropdown-menu-submenu-trigger",
+		className: submenuTrigger({ className }),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: indicator(),
+			"data-slot": "dropdown-menu-submenu-trigger-indicator",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx(DropdownMenuSubmenuChevronIcon, {})
+		})]
+	});
+}
+function DropdownMenuLabel({ className, ...props }) {
+	const { label } = dropdownMenu();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "dropdown-menu-label",
+		className: label({ className }),
+		...props
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	const { shortcut } = dropdownMenu();
+	return /* @__PURE__ */ jsx(Kbd, {
+		"data-slot": "dropdown-menu-shortcut",
+		className: shortcut({ className }),
+		...props
+	});
+}
+function DropdownMenuItemCount({ className, ...props }) {
+	const { itemCount } = dropdownMenu();
+	return /* @__PURE__ */ jsx(Badge, {
+		"data-slot": "dropdown-menu-item-count",
+		className: itemCount({ className }),
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	const { separator } = dropdownMenu();
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: separator({ className }),
+		...props
+	});
+}
+function DropdownMenuSubmenuChevronIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 12 12",
+		"aria-hidden": true,
+		className: "size-3 shrink-0",
+		children: /* @__PURE__ */ jsx("g", {
+			fill: "none",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "1",
+			stroke: "currentColor",
+			children: /* @__PURE__ */ jsx("path", { d: "M4.25 2.5L7.75 6l-3.5 3.5" })
+		})
+	});
+}
+function DropdownMenuCheckIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		width: "12",
+		height: "12",
+		viewBox: "0 0 12 12",
+		"aria-hidden": true,
+		className: "size-3 shrink-0",
+		children: /* @__PURE__ */ jsx("g", {
+			fill: "none",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			strokeWidth: "1",
+			stroke: "currentColor",
+			children: /* @__PURE__ */ jsx("path", { d: "M1.75 6.41L4.4 9.25L10.25 2.99" })
+		})
+	});
+}
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuRadioItem({ className, children, closeOnClick = true, ...props }) {
+	const { radioItem, radioLabel, indicator } = dropdownMenu();
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		className: radioItem({ className }),
+		closeOnClick,
+		...props,
+		children: [renderRadioItemChildren(children, radioLabel()), /* @__PURE__ */ jsx("span", {
+			className: indicator(),
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(DropdownMenuCheckIcon, {}) })
+		})]
+	});
+}
+function renderRadioItemChildren(children, className) {
+	if (typeof children === "string" || typeof children === "number") return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-radio-item-label",
+		className,
+		children
+	});
+	if (Array.isArray(children) && children.every((child) => typeof child === "string")) return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-radio-item-label",
+		className,
+		children
+	});
+	return children;
+}
+function DropdownMenuRadioItemIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioItemIndicator, {
+		"data-slot": "dropdown-menu-radio-item-indicator",
+		className,
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, ...props }) {
+	const { item, indicator } = dropdownMenu();
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		className: item({ className }),
+		...props,
+		children: [children, /* @__PURE__ */ jsx("span", {
+			className: indicator(),
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(DropdownMenuCheckIcon, {}) })
+		})]
+	});
+}
+function DropdownMenuCheckboxItemIndicator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, {
+		"data-slot": "dropdown-menu-checkbox-item-indicator",
+		className,
+		...props
+	});
+}
+/**
+* One choice that is another page, such as the same page in another
+* language: a link, so it opens in a new tab and can be copied. Its
+* `href` goes on the item; `current` marks the page being shown.
+*/
+function DropdownMenuLinkItem({ current = false, className, children, ...props }) {
+	const { radioItem, radioLabel, indicator } = dropdownMenu();
+	return /* @__PURE__ */ jsxs(Menu.LinkItem, {
+		"data-slot": "dropdown-menu-link-item",
+		"aria-current": current ? "page" : void 0,
+		"data-checked": current ? "" : void 0,
+		className: radioItem({ className }),
+		...props,
+		children: [renderRadioItemChildren(children, radioLabel()), current ? /* @__PURE__ */ jsx("span", {
+			className: indicator(),
+			children: /* @__PURE__ */ jsx(DropdownMenuCheckIcon, {})
+		}) : null]
+	});
+}
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuContent, DropdownMenuFooter, DropdownMenuItem, DropdownMenuItemCount, DropdownMenuItemLabel, DropdownMenuLabel, DropdownMenuLinkItem, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuRadioItemIndicator, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSubmenu, DropdownMenuSubmenuTrigger, DropdownMenuTrigger };

package/dist/components/dropdown-menu/index.d.mts

@@ -0,0 +1,2 @@
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemIndicatorProps, DropdownMenuCheckboxItemProps, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuFooter, DropdownMenuFooterProps, DropdownMenuItem, DropdownMenuItemCount, DropdownMenuItemCountProps, DropdownMenuItemLabel, DropdownMenuItemLabelProps, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuLabelProps, DropdownMenuPopup, DropdownMenuPopupProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuRadioItemIndicator, DropdownMenuRadioItemIndicatorProps, DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuShortcut, DropdownMenuShortcutProps, DropdownMenuSubmenu, DropdownMenuSubmenuProps, DropdownMenuSubmenuTrigger, DropdownMenuSubmenuTriggerProps, DropdownMenuTrigger, DropdownMenuTriggerProps } from "./dropdown-menu.mjs";
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, type DropdownMenuCheckboxItemIndicatorProps, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuFooter, type DropdownMenuFooterProps, DropdownMenuItem, DropdownMenuItemCount, type DropdownMenuItemCountProps, DropdownMenuItemLabel, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPopup, type DropdownMenuPopupProps, DropdownMenuPortal, type DropdownMenuPortalProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuRadioItemIndicator, type DropdownMenuRadioItemIndicatorProps, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSubmenu, type DropdownMenuSubmenuProps, DropdownMenuSubmenuTrigger, type DropdownMenuSubmenuTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps };

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

@@ -0,0 +1,55 @@
+import { TextLinkProps } from "../text-link/text-link.mjs";
+import { ComponentProps, ReactNode } from "react";
+//#region src/components/ellipsis/ellipsis.d.ts
+/** What a function passed as `after` receives. */
+export interface EllipsisState {
+  /** The text is cut off right now. `false` while it is expanded. */
+  truncated: boolean;
+  expanded: boolean;
+  /** Expands the text, or collapses it again. */
+  toggle: () => void;
+}
+export interface EllipsisProps extends Omit<ComponentProps<"span">, "children"> {
+  /**
+   * The text. Inline content only (text, links, code, mentions): a block
+   * child such as `<p>` or `<div>` breaks the clamp.
+   */
+  children: ReactNode;
+  /** How many lines the text may take before it is cut. */
+  lines?: number;
+  /**
+   * The tooltip shown on hover, and on keyboard focus when the text is a
+   * button, while the text is cut: `true` shows the children, a node shows
+   * that node, `false` shows none. It never opens on a text that fits, or on
+   * a touch screen.
+   */
+  tooltip?: ReactNode;
+  /**
+   * Shown after the text, at the end of the last visible line, only while the
+   * text is cut or expanded; it takes no room while the text fits. A function
+   * receives the state, for an expand control (`EllipsisToggle`).
+   */
+  after?: ReactNode | ((state: EllipsisState) => ReactNode);
+  /** Whether the whole text shows (controlled). */
+  expanded?: boolean;
+  /** Whether the whole text shows at first (uncontrolled). */
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  /**
+   * Makes the cut text itself the button that expands it and collapses it
+   * again, for a keyboard and a touch screen as well as a pointer. Only plain
+   * text with no `after` takes it: a text with a link or another control
+   * inside stays text, and so does one with an `after`, whose control is the
+   * button instead (a button can't hold another).
+   */
+  expandOnClick?: boolean;
+}
+export declare function Ellipsis({ children, lines, tooltip, after, expanded: expandedProp, defaultExpanded, onExpandedChange, expandOnClick, className, style, ...props }: EllipsisProps): import("react").JSX.Element;
+export type EllipsisToggleProps = Omit<TextLinkProps, "aria-expanded" | "aria-controls">;
+/**
+ * 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".
+ */
+export declare function EllipsisToggle({ onClick, ...props }: EllipsisToggleProps): import("react").JSX.Element;
+//#endregion