raft-ui 0.0.13 → 0.0.14

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## [0.0.14](https://github.com/botiverse/rui/compare/v0.0.13...v0.0.14) (2026-07-06)
+
+### Bug Fixes
+
+- **toast:** refine anchored and stacked behavior ([cc53edb](https://github.com/botiverse/rui/commit/cc53edbb7365ee452a27ec04ffbf6f306fe8bb47))
+
 ## [0.0.13](https://github.com/botiverse/rui/compare/v0.0.12...v0.0.13) (2026-07-06)
 
 ### Features

package/dist/index.d.mts

@@ -3381,6 +3381,7 @@ declare const notificationCenter: import("tailwind-variants/lite").TVReturnType<
       actionButton: never[];
     };
     elegant: {
+      trigger: string[];
       popup: string[];
       header: string[];
       title: string[];
@@ -3431,6 +3432,7 @@ declare const notificationCenter: import("tailwind-variants/lite").TVReturnType<
     secondary: {};
   };
 }, {
+  trigger: never[];
   popup: string[];
   header: string[];
   title: string[];
@@ -3459,6 +3461,7 @@ declare const notificationCenter: import("tailwind-variants/lite").TVReturnType<
       actionButton: never[];
     };
     elegant: {
+      trigger: string[];
       popup: string[];
       header: string[];
       title: string[];
@@ -3509,6 +3512,7 @@ declare const notificationCenter: import("tailwind-variants/lite").TVReturnType<
     secondary: {};
   };
 }, {
+  trigger: never[];
   popup: string[];
   header: string[];
   title: string[];
@@ -3537,6 +3541,7 @@ declare const notificationCenter: import("tailwind-variants/lite").TVReturnType<
       actionButton: never[];
     };
     elegant: {
+      trigger: string[];
       popup: string[];
       header: string[];
       title: string[];
@@ -3587,6 +3592,7 @@ declare const notificationCenter: import("tailwind-variants/lite").TVReturnType<
     secondary: {};
   };
 }, {
+  trigger: never[];
   popup: string[];
   header: string[];
   title: string[];
@@ -3607,8 +3613,11 @@ declare function NotificationCenter({
   modal,
   ...props
 }: NotificationCenterProps): import("react").JSX.Element;
-type NotificationCenterTriggerProps = Popover$1.Trigger.Props;
-declare function NotificationCenterTrigger(props: NotificationCenterTriggerProps): import("react").JSX.Element;
+type NotificationCenterTriggerProps = StyledProps<Popover$1.Trigger.Props>;
+declare function NotificationCenterTrigger({
+  className,
+  ...props
+}: NotificationCenterTriggerProps): import("react").JSX.Element;
 type NotificationCenterPortalProps = Popover$1.Portal.Props;
 type NotificationCenterPopupProps = StyledProps<Popover$1.Popup.Props> & Pick<VariantProps<typeof notificationCenter>, "size" | "viewport"> & Pick<Popover$1.Positioner.Props, "align" | "alignOffset" | "anchor" | "arrowPadding" | "collisionAvoidance" | "collisionBoundary" | "collisionPadding" | "disableAnchorTracking" | "positionMethod" | "side" | "sideOffset" | "sticky"> & {
   portalProps?: NotificationCenterPortalProps;
@@ -4068,7 +4077,7 @@ type ToastArrowProps = StyledProps<Toast.Arrow.Props>;
 declare function ToastArrow({
   className,
   ...props
-}: ToastArrowProps): import("react").JSX.Element;
+}: ToastArrowProps): import("react").JSX.Element | null;
 //#endregion
 //#region src/components/tabs/tabs.d.ts
 declare const tabs: import("tailwind-variants/lite").TVReturnType<{

package/dist/index.mjs

@@ -5878,6 +5878,7 @@ function EmptyStateActions({ render, className, ...props }) {
 //#region src/components/notification-center/notification-center.tsx
 const notificationCenter = tv({
 	slots: {
+		trigger: [],
 		popup: ["flex flex-col overflow-hidden bg-layer-panel"],
 		header: ["flex items-center gap-2 px-4 py-2"],
 		title: ["text-xs"],
@@ -5907,6 +5908,12 @@ const notificationCenter = tv({
 				actionButton: []
 			},
 			elegant: {
+				trigger: [
+					"relative inline-flex size-9 items-center justify-center overflow-visible border-0 bg-transparent p-0",
+					"select-none text-foreground-muted transition-colors hover:text-foreground-strong",
+					"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-400/35",
+					"[&>svg]:size-5 [&>svg]:shrink-0"
+				],
 				popup: ["rounded-md bg-layer-popover", "shadow-lg"],
 				header: ["border-b border-line-muted bg-white pt-2.5"],
 				title: ["text-sm font-medium normal-case tracking-normal text-foreground-strong"],
@@ -6004,9 +6011,11 @@ function NotificationCenter({ modal = false, ...props }) {
 		...props
 	});
 }
-function NotificationCenterTrigger(props) {
+function NotificationCenterTrigger({ className, ...props }) {
+	const { trigger } = notificationCenter({ theme: useThemeFamily() });
 	return /* @__PURE__ */ jsx(Popover$1.Trigger, {
 		"data-slot": "notification-center-trigger",
+		className: trigger({ className }),
 		...props
 	});
 }
@@ -6207,7 +6216,7 @@ function NotificationCenterEmptyState(props) {
 const toastStyles = tv({
 	slots: {
 		viewport: ["pointer-events-none isolate z-[70] w-[min(24rem,calc(100vw-2rem))]", "outline-none"],
-		positioner: ["isolate z-[70] outline-none"],
+		positioner: ["isolate z-[calc(70-var(--toast-index))] outline-none"],
 		root: [
 			"group/toast pointer-events-auto",
 			"select-text overflow-hidden text-foreground-strong",
@@ -6232,7 +6241,6 @@ const toastStyles = tv({
 			"[&:not(:has([data-slot=toast-icon])):not(:has([data-slot=toast-actions])):not(:has([data-slot=toast-description]))]:py-[var(--toast-title-only-py,0.5rem)]",
 			"[&:not(:has([data-slot=toast-description]))>[data-slot=toast-body]:only-child]:justify-self-center [&:not(:has([data-slot=toast-description]))>[data-slot=toast-body]:only-child]:text-center",
 			"transition-opacity duration-200 ease-[cubic-bezier(0.22,1,0.36,1)]",
-			"data-[behind]:opacity-0 data-[expanded]:opacity-100",
 			"motion-reduce:transition-none"
 		],
 		icon: ["flex size-5 shrink-0 items-center justify-center", "[&_svg]:size-3.5 [&_svg]:shrink-0"],
@@ -6250,12 +6258,12 @@ const toastStyles = tv({
 		],
 		arrow: [
 			"pointer-events-none flex",
-			"data-[side=top]:bottom-[-6px]",
-			"data-[side=bottom]:top-[-6px] data-[side=bottom]:rotate-180",
-			"data-[side=left]:right-[-8px] data-[side=left]:-rotate-90",
-			"data-[side=right]:left-[-8px] data-[side=right]:rotate-90",
-			"data-[side=inline-start]:right-[-8px] data-[side=inline-start]:-rotate-90",
-			"data-[side=inline-end]:left-[-8px] data-[side=inline-end]:rotate-90"
+			"data-[side=top]:bottom-[-5px]",
+			"data-[side=bottom]:top-[-5px] data-[side=bottom]:rotate-180",
+			"data-[side=left]:right-[-7px] data-[side=left]:-rotate-90",
+			"data-[side=right]:left-[-7px] data-[side=right]:rotate-90",
+			"data-[side=inline-start]:right-[-7px] data-[side=inline-start]:-rotate-90",
+			"data-[side=inline-end]:left-[-7px] data-[side=inline-end]:rotate-90"
 		]
 	},
 	variants: {
@@ -6289,6 +6297,7 @@ const toastStyles = tv({
 					"[&:has([data-slot=toast-actions])]:min-h-14",
 					"[&:has([data-slot=toast-actions])]:py-3",
 					"[&:has([data-slot=toast-actions])]:pl-3.5",
+					"[&:has([data-slot=toast-actions])]:pr-3",
 					"[&:has([data-slot=toast-description]):has([data-slot=toast-title])]:min-h-14",
 					"[&:has([data-slot=toast-description]):has([data-slot=toast-title])]:min-w-[18rem]",
 					"[&:has([data-slot=toast-description]):has([data-slot=toast-title])]:py-3",
@@ -6342,13 +6351,15 @@ const toastStyles = tv({
 				"data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+120%))_translateY(var(--toast-y))]",
 				"data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-120%))_translateY(var(--toast-y))]",
 				"data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+120%))]",
-				"data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-120%))]"
+				"data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-120%))]",
+				"[&_[data-slot=toast-content][data-behind]]:opacity-0 [&_[data-slot=toast-content][data-expanded]]:opacity-100"
 			] },
 			inline: { root: [
 				"relative mx-auto w-max max-w-[min(24rem,var(--available-width,calc(100vw-2rem)))] overflow-visible",
 				"origin-[var(--transform-origin)]",
 				"data-[starting-style]:[transform:scale(0.97)]",
-				"data-[ending-style]:[transform:scale(0.99)]"
+				"data-[ending-style]:[transform:scale(0.99)]",
+				"[&_[data-slot=toast-content]]:opacity-100"
 			] }
 		},
 		tone: {
@@ -6383,6 +6394,16 @@ const toastStyles = tv({
 			theme: "brutal",
 			layout: "stacked",
 			class: { root: "w-max max-w-full" }
+		},
+		{
+			theme: "elegant",
+			layout: "stacked",
+			class: { root: "w-max max-w-full" }
+		},
+		{
+			theme: "elegant",
+			layout: "inline",
+			class: { root: "bg-[oklch(0.263_0.009_294.9_/_0.62)] after:hidden dark:bg-[oklch(0.230_0.010_294.8_/_0.62)]" }
 		}
 	]
 });
@@ -6611,6 +6632,7 @@ function ToastClose({ className, children, ...props }) {
 function ToastArrow({ className, ...props }) {
 	const theme = useThemeFamily();
 	const { arrow } = toastStyles({ theme });
+	if (theme === "elegant") return null;
 	return /* @__PURE__ */ jsx(Toast.Arrow, {
 		"data-slot": "toast-arrow",
 		className: arrow({ className }),
@@ -6640,7 +6662,6 @@ function DefaultToastItem({ toast: toastObject }) {
 	const showIcon = toastObject.data?.hasIcon !== false;
 	return /* @__PURE__ */ jsx(ToastRoot, {
 		toast: toastObject,
-		layout: !showIcon && !showDescription && !showAction && !showClose ? "inline" : "stacked",
 		children: /* @__PURE__ */ jsxs(ToastContent, {
 			className: toastObject.data?.contentClassName,
 			children: [
@@ -6665,9 +6686,9 @@ function ToastArrowSvg({ theme, ...props }) {
 		children: [/* @__PURE__ */ jsx("path", {
 			d: "M1 0H11L6 5.25Z",
 			className: theme === "elegant" ? "fill-[oklch(0.263_0.009_294.9_/_0.50)] dark:fill-[oklch(0.230_0.010_294.8_/_0.50)]" : "fill-soft-signal"
-		}), /* @__PURE__ */ jsx("path", {
+		}), theme === "elegant" ? null : /* @__PURE__ */ jsx("path", {
 			d: "M1 0.5L6 5.25L11 0.5",
-			className: theme === "elegant" ? "stroke-white/28" : "stroke-line-strong",
+			className: "stroke-line-strong",
 			strokeLinecap: "round",
 			strokeLinejoin: "round",
 			vectorEffect: "non-scaling-stroke"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "raft-ui",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "React UI components for Raft.",
   "license": "MIT",
   "repository": {