@botiverse/raft-ui 0.83.0 → 0.85.0

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

@@ -7,7 +7,7 @@ import { ContextMenu } from "@base-ui/react";
 //#region src/components/context-menu/context-menu.tsx
 const contextMenu = tv({ slots: {
 	trigger: ["select-none"],
-	positioner: ["isolate z-50 outline-none"],
+	positioner: ["isolate z-popup outline-none"],
 	content: [
 		"flex flex-col max-h-(--available-height) overflow-hidden",
 		"outline-none",

package/dist/components/conversation-panel/conversation-panel-empty-state.mjs

@@ -12,7 +12,7 @@ const conversationPanelEmptyState = tv({ slots: {
 	brand: ["shrink-0", "mb-1 inline-flex rounded-none p-0 text-foreground-hint"],
 	brandMark: [
 		"relative flex items-center justify-center",
-		"[&>svg]:relative [&>svg]:z-10",
+		"[&>svg]:relative [&>svg]:z-raised",
 		"size-9 overflow-visible rounded-none",
 		"[&>svg]:size-9 [&>svg]:stroke-2"
 	]

package/dist/components/dialog/dialog.mjs

@@ -22,9 +22,9 @@ import { createPortal } from "react-dom";
 //#region src/components/dialog/dialog.tsx
 const dialog = tv({
 	slots: {
-		overlay: ["fixed inset-0 z-50 bg-layer-backdrop"],
+		overlay: ["fixed inset-0 z-dialog bg-layer-backdrop"],
 		content: [
-			"fixed top-1/2 left-1/2 z-50 flex w-[calc(100%-2rem)] -translate-1/2 flex-col",
+			"fixed top-1/2 left-1/2 z-dialog flex w-[calc(100%-2rem)] -translate-1/2 flex-col",
 			"max-h-[calc(100dvh-2rem)] outline-none",
 			"overflow-clip rounded-dialog bg-layer-popover text-foreground",
 			"shadow-float ring-1 ring-line-seam"
@@ -83,8 +83,8 @@ const dialog = tv({
 				content: []
 			},
 			1: {
-				overlay: ["z-60"],
-				content: ["z-60"]
+				overlay: ["z-dialog-layer"],
+				content: ["z-dialog-layer"]
 			}
 		},
 		nested: {

package/dist/components/drag/drag-lift.d.mts

@@ -49,8 +49,9 @@ export declare function keepGrabInside(proxyWidth: number, inset?: number): Modi
  */
 export declare function cancelDrag(win?: Window): void;
 /**
- * Above every raft-ui layer (popovers 50, a stacked dialog 60, toasts and the
- * lightbox 70) and an app's own top layers, among the layers rendered in
+ * `--z-index-drag` (`z-drag`) as a number: above every raft-ui layer (popups
+ * and dialogs 50, a `layer={1}` dialog 60, the lightbox 70, toasts 80) and an
+ * app's own top layers, among the layers rendered in
  * `document.body`, where the copy goes by default. dnd-kit's own default.
  */
 export declare const DRAG_LIFT_Z_INDEX = 999;

package/dist/components/drag/drag-lift.mjs

@@ -109,8 +109,9 @@ function cancelDrag(win = window) {
 	win.dispatchEvent(new Event("resize"));
 }
 /**
-* Above every raft-ui layer (popovers 50, a stacked dialog 60, toasts and the
-* lightbox 70) and an app's own top layers, among the layers rendered in
+* `--z-index-drag` (`z-drag`) as a number: above every raft-ui layer (popups
+* and dialogs 50, a `layer={1}` dialog 60, the lightbox 70, toasts 80) and an
+* app's own top layers, among the layers rendered in
 * `document.body`, where the copy goes by default. dnd-kit's own default.
 */
 const DRAG_LIFT_Z_INDEX = 999;

package/dist/components/drag/drag.recipe.mjs

@@ -18,7 +18,7 @@ const drag = tv({
 			"border-[1.5px] border-dashed border-line-strong bg-fill-subtle"
 		],
 		hint: [
-			"pointer-events-none fixed top-0 left-0 z-70 max-w-80",
+			"pointer-events-none fixed top-0 left-0 z-drag max-w-80",
 			"rounded-chip px-2 py-1",
 			"font-sans text-caption",
 			"bg-layer-hud text-foreground-on-hud shadow-float ring-1 ring-line-seam"

package/dist/components/drawer/drawer.recipe.mjs

@@ -66,13 +66,13 @@ const drawer = tv({
 	extend: drawerMotion,
 	slots: {
 		overlay: [
-			"fixed inset-0 z-50 min-h-dvh select-none",
+			"fixed inset-0 z-dialog min-h-dvh select-none",
 			"supports-[-webkit-touch-callout:none]:absolute",
 			"bg-layer-backdrop"
 		],
-		viewport: ["pointer-events-none fixed inset-0 z-50 select-none"],
+		viewport: ["pointer-events-none fixed inset-0 z-dialog select-none"],
 		popup: [
-			"group/drawer-popup pointer-events-auto fixed z-50 flex h-(--drawer-content-height) flex-col outline-none",
+			"group/drawer-popup pointer-events-auto fixed z-dialog flex h-(--drawer-content-height) flex-col outline-none",
 			"[--drawer-inset:12px] [--drawer-content-height:var(--drawer-height,auto)]",
 			"data-nested-drawer-open:overflow-hidden",
 			"bg-layer-popover text-foreground",
@@ -80,7 +80,7 @@ const drawer = tv({
 		],
 		content: ["flex min-h-0 flex-1 flex-col rounded-[inherit] select-text", "group-data-swiping/drawer-popup:select-none"],
 		swipeHandle: [
-			"relative z-10 shrink-0 cursor-grab select-none active:cursor-grabbing",
+			"relative z-control shrink-0 cursor-grab select-none active:cursor-grabbing",
 			"before:absolute before:content-['']",
 			"before:rounded-full before:bg-line-seam"
 		],

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

@@ -9,7 +9,7 @@ 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"],
+	positioner: ["isolate z-popup outline-none"],
 	content: [
 		"max-h-(--available-height) overflow-hidden",
 		"outline-none",

package/dist/components/file-preview/file-preview.recipe.mjs

@@ -30,7 +30,7 @@ const filePreview = tv({
 		media: ["relative h-10 w-8 overflow-hidden rounded-md ring-1", "bg-fill-muted shadow-none ring-line-hairline"]
 	},
 	variants: { placement: {
-		corner: { badge: "absolute -right-1.5 bottom-0.5 z-10" },
+		corner: { badge: "absolute -right-1.5 bottom-0.5 z-raised" },
 		inline: { badge: "inline-flex h-3.5 w-7 shrink-0 items-center justify-center px-0 py-0" }
 	} },
 	defaultVariants: { placement: "corner" }

package/dist/components/fit-toolbar/fit-toolbar.d.mts

@@ -1,6 +1,7 @@
 import { StyledProps } from "../../lib/styled-props.mjs";
 import { ButtonProps } from "../button/button.mjs";
-import { ReactNode, Ref } from "react";
+import { PickerTriggerButtonProps } from "../picker-trigger-button/picker-trigger-button.mjs";
+import { ReactElement, ReactNode, Ref } from "react";
 import { Toolbar } from "@base-ui/react/toolbar";
 //#region src/components/fit-toolbar/fit-toolbar.d.ts
 /**
@@ -8,10 +9,15 @@ import { Toolbar } from "@base-ui/react/toolbar";
  * - `label`: its label hides and its icon stays (the label stays its accessible name);
  * - `more`: it moves into More;
  * - `collapse`: a group shows its one button instead of its items (a Filter button for its filters);
- * - `wrap`: a group moves to a line of its own, only in a toolbar that allows it.
+ * - `wrap`: a group moves to a line of its own, only in a toolbar that allows it;
+ * - `plus`: a primary action shows as + alone (the label stays its accessible name).
+ */
+export type FitStep = "label" | "more" | "collapse" | "wrap" | "plus";
+/**
+ * When each of an item's steps comes, one order for the whole toolbar: lower
+ * gives way first; at the same number, the last item first, and one item's
+ * steps in the order of `FitStep`.
  */
-export type FitStep = "label" | "more" | "collapse" | "wrap";
-/** When each of an item's steps comes: lower gives way first; at the same number, the last item first. */
 export type FitSteps = Partial<Record<FitStep, number>>;
 export type FitToolbarProps = StyledProps<Toolbar.Root.Props> & {
   ref?: Ref<HTMLDivElement>;
@@ -90,12 +96,23 @@ export declare function FitToolbarGroup({ className, wrapOrder, firstLine, wrapL
   ref?: Ref<HTMLDivElement>;
 }): import("react").JSX.Element;
 export type FitToolbarButtonProps = Omit<ButtonProps, "children" | "size"> & {
-  /** Its icon, which stays when its label gives way. */
-  icon: ReactNode;
+  /** Its icon, which stays when its label gives way. A button with a `label` step needs one (or a `collapsedIcon`). */
+  icon?: ReactNode;
+  /**
+   * An icon shown only once its label has given way (the `label` step), in
+   * place of `icon`: a button that reads as text while it has room ("Clear
+   * filters") and as an icon (×) once it hasn't.
+   */
+  collapsedIcon?: ReactNode;
   /** Its label: its accessible name and, once it has given way, its tooltip. */
   children: ReactNode;
   /** When its label gives way (the `label` step). */
   labelOrder?: number;
+  /**
+   * When it shows as + alone, its icon and label gone (the `plus` step): for
+   * the primary action, after the groups have wrapped.
+   */
+  plusOrder?: number;
   /** When it moves into More (the `more` step). */
   moreOrder?: number;
   /** What it is in More's menu. */
@@ -104,7 +121,45 @@ export type FitToolbarButtonProps = Omit<ButtonProps, "children" | "size"> & {
 /**
  * A toolbar button that can give way: an `md` Button (ghost unless you say)
  * with an icon and a label, an icon square with its label as a tooltip from
- * `labelOrder` on, and hidden from `moreOrder` on.
+ * `labelOrder` on, a + square with its label as a tooltip from `plusOrder`
+ * on, and hidden from `moreOrder` on.
+ */
+export declare function FitToolbarButton({ icon, collapsedIcon, children, labelOrder, plusOrder, moreOrder, moreItem, variant, className, ...props }: FitToolbarButtonProps): import("react").JSX.Element;
+export type FitToolbarPickerProps = Omit<PickerTriggerButtonProps, "children" | "render"> & {
+  /**
+   * The picker's trigger, which opens its popup: `<PopoverTrigger />`,
+   * `<DropdownMenuTrigger />` or a Base UI `Menu.Trigger`. The picker renders
+   * it as a toolbar button, so the page nests nothing itself.
+   */
+  trigger: ReactElement<{
+    render?: unknown;
+  }>;
+  /** Its icon, which stays when its label gives way. */
+  icon: ReactNode;
+  /** Its label ("Assignee"): part of its accessible name and, once it has given way, its tooltip. */
+  children: ReactNode;
+  /**
+   * What is chosen: the value ("In progress", "Kirby") or a count (`1`). It
+   * stays in view when the label gives way, and follows the label in the
+   * accessible name. A count (a number, or a string of digits) is set in Space
+   * Mono, as machine-written text; any other value keeps the label's font.
+   */
+  value?: ReactNode;
+  /** When its label gives way (the `label` step). */
+  labelOrder?: number;
+  /** When it moves into More (the `more` step). */
+  moreOrder?: number;
+  /** What it is in More's menu. */
+  moreItem?: ReactNode;
+};
+/**
+ * A picker's trigger as one toolbar item (a filter: Assignee, Channel): a
+ * PickerTriggerButton with an icon, a label, what is chosen and a chevron,
+ * filled `info-soft` once a value is chosen, as an applied filter is
+ * (Select › Filters). From `labelOrder` on its label gives way, while its
+ * icon, what is chosen and the chevron stay ("# ⌄", "👤 1 ⌄"); its label
+ * stays its accessible name, read before the value ("Assignee 1"), and shows
+ * as its tooltip.
  */
-export declare function FitToolbarButton({ icon, children, labelOrder, moreOrder, moreItem, variant, className, ...props }: FitToolbarButtonProps): import("react").JSX.Element;
+export declare function FitToolbarPicker({ trigger, icon, children, value, labelOrder, moreOrder, moreItem, className, ...props }: FitToolbarPickerProps): import("react").JSX.Element;
 //#endregion