@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/ui/toast.js

@@ -3,36 +3,104 @@ import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
+import { PopupCloseButton } from "../popup-parts.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleCheckIcon, CircleXIcon, InfoIcon, TriangleAlertIcon } from "lucide-react";
 import { Toast } from "@base-ui/react/toast";
 //#region src/ui/toast.tsx
 const toastManager = Toast.createToastManager();
-function withType(type) {
-	return (title, options) => toastManager.add({
+const errorDefaults = {
+	timeout: 0,
+	priority: "high"
+};
+function persistenceDefaults(options) {
+	if (options.type === "error") return errorDefaults;
+	return options.actionProps ? { timeout: 0 } : void 0;
+}
+function show(title, options = {}) {
+	return toastManager.add({
 		title,
+		...persistenceDefaults(options),
+		...options
+	});
+}
+function withType(type) {
+	return (title, options) => show(title, {
 		type,
 		...options
 	});
 }
-const toast = Object.assign((title, options) => toastManager.add({
-	title,
-	...options
-}), {
+function persistentError(update) {
+	return typeof update === "string" ? {
+		...errorDefaults,
+		description: update
+	} : {
+		...errorDefaults,
+		...update
+	};
+}
+const toast = Object.assign(show, {
 	success: withType("success"),
 	error: withType("error"),
 	warning: withType("warning"),
 	info: withType("info"),
-	message: (title, options) => toastManager.add({
-		title,
-		...options
+	message: (title, options) => show(title, options),
+	promise: (promise, options) => toastManager.promise(promise, {
+		...options,
+		error: (reason) => persistentError(typeof options.error === "function" ? options.error(reason) : options.error)
 	}),
-	promise: (...args) => toastManager.promise(...args),
 	dismiss: (id) => toastManager.close(id)
 });
+const statusIcons = {
+	success: CircleCheckIcon,
+	error: CircleXIcon,
+	warning: TriangleAlertIcon,
+	info: InfoIcon
+};
+function isToastStatus(type) {
+	return type !== void 0 && Object.hasOwn(statusIcons, type);
+}
 const useToast = Toast.useToastManager;
-function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
+function ToastIndicator({ status, style }) {
+	if (!status) return null;
+	const StatusIcon = statusIcons[status];
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-control-ui": "toast",
+		"data-control-family": "popup",
+		"data-popup-kind": "toast",
+		"data-slot": "indicator",
+		style,
+		className: "shrink-0",
+		children: /* @__PURE__ */ jsx(StatusIcon, { className: "size-4" })
+	});
+}
+function ToastText({ entry, statusPrefix }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex min-w-0 flex-1 flex-col",
+		children: [entry.title ? /* @__PURE__ */ jsxs(Toast.Title, {
+			"data-control-ui": "toast",
+			"data-control-family": "popup",
+			"data-popup-kind": "toast",
+			"data-slot": "title",
+			children: [statusPrefix, entry.title]
+		}) : null, entry.description ? /* @__PURE__ */ jsxs(Toast.Description, {
+			"data-control-ui": "toast",
+			"data-control-family": "popup",
+			"data-popup-kind": "toast",
+			"data-slot": "description",
+			children: [entry.title ? null : statusPrefix, entry.description]
+		}) : null]
+	});
+}
+function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle, closeLabel, statusLabels }) {
 	const { toasts } = Toast.useToastManager();
 	return toasts.map((entry) => {
+		const status = isToastStatus(entry.type) ? entry.type : void 0;
+		const statusPrefix = status ? /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: `${statusLabels[status]}: `
+		}) : null;
 		return /* @__PURE__ */ jsx(Toast.Root, {
 			toast: entry,
 			"data-control-ui": "toast",
@@ -43,7 +111,7 @@ function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
 			style: rootStyle,
 			"data-slot": "root",
 			"data-surface": "floating",
-			className: cn("[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]", "absolute right-0 bottom-0 left-auto z-[calc(var(--z-toast)-var(--toast-index))] h-[var(--height)] w-full select-none data-[expanded]:h-[var(--toast-height)]", "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']"),
+			className: cn("[--gap:0.75rem] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))]", "absolute end-0 bottom-0 z-[calc(var(--z-toast)-var(--toast-index))] h-[var(--height)] w-full select-none data-[expanded]:h-[var(--toast-height)]", "after:absolute after:top-full after:start-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']"),
 			children: /* @__PURE__ */ jsxs(Toast.Content, {
 				"data-control-ui": "toast",
 				"data-control-family": "popup",
@@ -51,28 +119,13 @@ function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
 				"data-slot": "content",
 				className: "flex items-start",
 				children: [
-					entry.type && entry.type !== "message" ? /* @__PURE__ */ jsx("span", {
-						"aria-hidden": "true",
-						"data-control-ui": "toast",
-						"data-control-family": "popup",
-						"data-popup-kind": "toast",
-						"data-slot": "indicator",
-						style: indicatorStyle,
-						className: "shrink-0"
-					}) : null,
-					/* @__PURE__ */ jsxs("div", {
-						className: "flex min-w-0 flex-1 flex-col",
-						children: [entry.title ? /* @__PURE__ */ jsx(Toast.Title, {
-							"data-control-ui": "toast",
-							"data-control-family": "popup",
-							"data-popup-kind": "toast",
-							"data-slot": "title"
-						}) : null, entry.description ? /* @__PURE__ */ jsx(Toast.Description, {
-							"data-control-ui": "toast",
-							"data-control-family": "popup",
-							"data-popup-kind": "toast",
-							"data-slot": "description"
-						}) : null]
+					/* @__PURE__ */ jsx(ToastIndicator, {
+						status,
+						style: indicatorStyle
+					}),
+					/* @__PURE__ */ jsx(ToastText, {
+						entry,
+						statusPrefix
 					}),
 					entry.actionProps ? /* @__PURE__ */ jsx(Toast.Action, {
 						style: actionStyle,
@@ -86,25 +139,11 @@ function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
 					}) : null,
 					/* @__PURE__ */ jsx(Toast.Close, {
 						style: closeStyle,
-						"aria-label": "Close",
-						render: (renderProps) => /* @__PURE__ */ jsx(Button, {
+						render: (renderProps) => /* @__PURE__ */ jsx(PopupCloseButton, {
 							...renderProps,
 							"data-popup-kind": "toast",
-							"data-popup-part": "close",
-							variant: "quiet",
-							size: "xs",
-							iconOnly: true
-						}),
-						children: /* @__PURE__ */ jsx("svg", {
-							viewBox: "0 0 16 16",
-							"aria-hidden": "true",
-							fill: "none",
-							children: /* @__PURE__ */ jsx("path", {
-								d: "M4 4 12 12M12 4 4 12",
-								stroke: "currentColor",
-								strokeWidth: "1.4",
-								strokeLinecap: "round"
-							})
+							label: closeLabel,
+							variant: "quiet"
 						})
 					})
 				]
@@ -112,7 +151,7 @@ function ToastList({ rootStyle, indicatorStyle, actionStyle, closeStyle }) {
 		}, entry.id);
 	});
 }
-function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionStyle, closeStyle }) {
+function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionStyle, closeStyle, closeLabel = "Dismiss notification", successLabel = "Success", errorLabel = "Error", warningLabel = "Warning", infoLabel = "Info" }) {
 	const skin = useSkin();
 	return /* @__PURE__ */ jsx(Toast.Provider, {
 		toastManager,
@@ -125,12 +164,19 @@ function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionS
 			"data-slot": "viewport",
 			"data-skin": skin.id,
 			"data-effects": controlEffectsAttribute(skin.effects),
-			className: cn("fixed right-4 bottom-4 z-(--z-toast) mx-auto w-[calc(100vw-2rem)] sm:right-6 sm:bottom-6 sm:w-[22.5rem]", className),
+			className: cn("fixed end-4 bottom-4 z-(--z-toast) mx-auto w-[calc(100vw-2rem)] sm:end-6 sm:bottom-6 sm:w-[22.5rem]", className),
 			children: /* @__PURE__ */ jsx(ToastList, {
 				rootStyle,
 				indicatorStyle,
 				actionStyle,
-				closeStyle
+				closeStyle,
+				closeLabel,
+				statusLabels: {
+					success: successLabel,
+					error: errorLabel,
+					warning: warningLabel,
+					info: infoLabel
+				}
 			})
 		}) })
 	});

package/dist/ui/toggle.d.ts

@@ -15,6 +15,6 @@ export type ToggleGroupProps<TValue extends string = string> = Omit<ComponentPro
   orientation?: "horizontal" | "vertical";
   indicator?: HoverIndicator;
 };
-export declare function Toggle({ variant, size, tone, active, showCheck, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }: ToggleProps): import("react").JSX.Element;
+export declare function Toggle({ variant, size, tone, active, iconOnly, showCheck, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }: ToggleProps): import("react").JSX.Element;
 export declare function ToggleGroup<TValue extends string = string>({ className, orientation, indicator, children, ...props }: ToggleGroupProps<TValue>): import("react").JSX.Element;
 //#endregion

package/dist/ui/toggle.js

@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 //#region src/ui/toggle.tsx
-function Toggle({ variant = "surface", size = "sm", tone = "neutral", active, showCheck = false, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }) {
+function Toggle({ variant = "surface", size = "sm", tone = "neutral", active, iconOnly = false, showCheck = false, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }) {
 	const tracksHover = useContext(ButtonTrackContext);
 	return /* @__PURE__ */ jsx(Toggle$1, {
 		"data-track-item": tracksHover ? "" : void 0,
@@ -30,6 +30,7 @@ function Toggle({ variant = "surface", size = "sm", tone = "neutral", active, sh
 				"data-variant": variant,
 				"data-tone": tone,
 				"data-size": size,
+				"data-icon-only": iconOnly ? "true" : void 0,
 				className: cn(buttonStructureClasses, renderProps.className, className),
 				children: /* @__PURE__ */ jsxs("span", {
 					"data-control-ui": "toggle",

package/dist/ui/toolbar.d.ts

@@ -1,6 +1,6 @@
 import { ToolbarKnobStyle } from "../knob-contracts/toolbar-knobs.js";
-import { CSSProperties, ComponentProps } from "react";
 import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
+import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/toolbar.d.ts
 export type ToolbarVariant = "default" | "inverse" | "floating";
 export type ToolbarLinkVariant = "default" | "track";
@@ -15,6 +15,7 @@ export type ToolbarButtonProps = Omit<ComponentProps<"button">, "style"> & {
 };
 export type ToolbarLinkProps = Omit<ComponentProps<"a">, "style"> & {
   variant?: ToolbarLinkVariant;
+  active?: boolean;
   style?: CSSProperties & ToolbarKnobStyle;
 };
 export type ToolbarGroupProps = ComponentProps<"div"> & {
@@ -31,7 +32,7 @@ export declare function Toolbar({ orientation, variant, className, children, ...
 type RefinedToolbarButtonProps = ToolbarButtonProps & Pick<ComponentProps<typeof Toolbar$1.Button>, "render">;
 export declare function ToolbarButton({ iconOnly, className, ...props }: RefinedToolbarButtonProps): import("react").JSX.Element;
 type RefinedToolbarLinkProps = ToolbarLinkProps & Pick<ComponentProps<typeof Toolbar$1.Link>, "render">;
-export declare function ToolbarLink({ variant, className, ...props }: RefinedToolbarLinkProps): import("react").JSX.Element;
+export declare function ToolbarLink({ variant, active, className, ...props }: RefinedToolbarLinkProps): import("react").JSX.Element;
 export declare function ToolbarGroup({ className, ...props }: ToolbarGroupProps): import("react").JSX.Element;
 export declare function ToolbarSeparator({ orientation, className, ...props }: ToolbarSeparatorProps): import("react").JSX.Element;
 type RefinedToolbarInputProps = ToolbarInputProps & Pick<ComponentProps<typeof Toolbar$1.Input>, "render">;

package/dist/ui/toolbar.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Toolbar as Toolbar$1 } from "@base-ui/react/toolbar";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/toolbar.tsx
 function Toolbar({ orientation = "horizontal", variant = "default", className, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Toolbar$1.Root, {
@@ -37,7 +37,7 @@ function ToolbarButton({ iconOnly = false, className, ...props }) {
 		...props
 	});
 }
-function ToolbarLink({ variant = "default", className, ...props }) {
+function ToolbarLink({ variant = "default", active = false, className, ...props }) {
 	return /* @__PURE__ */ jsx(Toolbar$1.Link, {
 		"data-control-ui": "toolbar",
 		"data-control-family": "toolbar",
@@ -45,6 +45,8 @@ function ToolbarLink({ variant = "default", className, ...props }) {
 		"data-control": "true",
 		"data-size": "sm",
 		"data-variant": variant,
+		"data-active": active || void 0,
+		"aria-current": active ? "page" : void 0,
 		className: cn("inline-flex shrink-0 items-center justify-center [&_svg]:block [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", variant === "track" && "relative z-[2]", className),
 		...props
 	});

package/dist/ui/tooltip.js

@@ -2,6 +2,7 @@
 import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
+import { PopupArrowShape } from "../popup-parts.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 //#region src/ui/tooltip.tsx
@@ -64,29 +65,11 @@ function TooltipContent({ className, children, side = "top", sideOffset = 8, ali
 				"data-control-family": "popup",
 				"data-popup-kind": "tooltip",
 				"data-slot": "arrow",
-				className: cn("flex", "data-[side=top]:-bottom-[8px]", "data-[side=bottom]:-top-[8px]", "data-[side=left]:-right-[10px]", "data-[side=right]:-left-[10px]"),
-				children: /* @__PURE__ */ jsx(TooltipArrowSvg, {})
+				className: "flex",
+				children: /* @__PURE__ */ jsx(PopupArrowShape, {})
 			}) : null]
 		})
 	}) });
 }
-function TooltipArrowSvg() {
-	return /* @__PURE__ */ jsx("svg", {
-		"aria-hidden": "true",
-		focusable: "false",
-		width: "12",
-		height: "8",
-		viewBox: "0 0 12 8",
-		fill: "none",
-		overflow: "visible",
-		children: /* @__PURE__ */ jsx("path", {
-			"data-control-ui": "tooltip",
-			"data-popup-kind": "tooltip",
-			"data-control-family": "popup",
-			"data-slot": "arrow-shape",
-			d: "M0 7L4 2Q6 0 8 2L12 7L12 8L0 8Z"
-		})
-	});
-}
 //#endregion
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };