raft-ui 0.0.12 → 0.0.14

package/CHANGELOG.md

@@ -1,51 +1,16 @@
-## [0.0.12](https://github.com/botiverse/rui/compare/v0.0.11...v0.0.12) (2026-07-03)
-
-### Features
-
-- **dropdown-menu:** refine trigger defaults ([d6d3745](https://github.com/botiverse/rui/commit/d6d3745b90b5d5a3ea56cc19fcffce09077df56e))
-
-## [0.0.10](https://github.com/botiverse/rui/compare/v0.0.9...v0.0.10) (2026-07-03)
-
-### Features
-
-- **lightbox:** add navigation and info slots ([84b273d](https://github.com/botiverse/rui/commit/84b273ddac4b0e3bec94ce19c311dbd9562ec2cb))
-- **lightbox:** refine preview chrome styling ([d441ace](https://github.com/botiverse/rui/commit/d441ace1740f3010cfbb5aa8b1c54e94fdb3f8ec))
-- **preview-card:** add hover preview card docs ([e91545c](https://github.com/botiverse/rui/commit/e91545c32a594dc4e7c10e6e6113914dea6f6063))
-- **separator:** support labeled content ([3d3509b](https://github.com/botiverse/rui/commit/3d3509bf1b5098788c99276401c6f553aa269f14))
-- **skeleton:** add skeleton primitive ([a64471b](https://github.com/botiverse/rui/commit/a64471be70cf00457a4376fd37dd308034f378f8))
-- **toast:** add ToastActions slot and refine theme layouts ([c4e06c0](https://github.com/botiverse/rui/commit/c4e06c0464e399fc2cf0b6e9165f5823b841bf81))
-- **toast:** add wip toast docs and primitives ([894ea03](https://github.com/botiverse/rui/commit/894ea031527801716cb75105a5be9ba5d4ba9574))
-- **toast:** polish toast component and docs ([fa70814](https://github.com/botiverse/rui/commit/fa7081441205283af80d1a89f859cbf8645c3636))
-- **toast:** promote toast api ([c2701db](https://github.com/botiverse/rui/commit/c2701db58409115e985c83adc8cb94c33e55e11b))
-- **toast:** refine composition previews ([5177704](https://github.com/botiverse/rui/commit/51777044ec4950dc10639960bc917027da4d513d))
-- **toast:** refine elegant glass styling ([e047a66](https://github.com/botiverse/rui/commit/e047a66ae8dfc0eb0f1f1cf4fc1fa86ff55265ff))
-- **ui:** add Progress component ([135ec9c](https://github.com/botiverse/rui/commit/135ec9c19493d139f352ecf7d0811a5281d53ba1))
+## [0.0.14](https://github.com/botiverse/rui/compare/v0.0.13...v0.0.14) (2026-07-06)
 
 ### Bug Fixes
 
-- **home:** improve dialog gallery previews ([6da45e8](https://github.com/botiverse/rui/commit/6da45e8af605680f73dc5943c32f98720273c3b4))
-- **preview-card:** point mention links to docs route ([50ea8c3](https://github.com/botiverse/rui/commit/50ea8c389c1255a7cc3b45415f0c357a4eedae03))
-- **toast:** align source comparison variants ([041820c](https://github.com/botiverse/rui/commit/041820c3277a25ca548672ea696bb73d65733b96))
-- **toast:** refine layout variants ([88f443f](https://github.com/botiverse/rui/commit/88f443f281480c9515b669f107dce22324f35f67))
-- **tooltip:** loosen elegant trigger offset ([4955a67](https://github.com/botiverse/rui/commit/4955a67ad50944e3f804f312ee1eaf8aff76236e))
-- **tooltip:** refine elegant tooltip styling ([750a9d3](https://github.com/botiverse/rui/commit/750a9d38db802b2b51125d1d621b5983db4af712))
-- **ui:** preserve separator semantics ([78c3096](https://github.com/botiverse/rui/commit/78c3096ced4506292fdfe3a5c72f1fdeb7029983))
+- **toast:** refine anchored and stacked behavior ([cc53edb](https://github.com/botiverse/rui/commit/cc53edbb7365ee452a27ec04ffbf6f306fe8bb47))
 
-## [0.0.9](https://github.com/botiverse/rui/compare/v0.0.8...v0.0.9) (2026-06-30)
+## [0.0.13](https://github.com/botiverse/rui/compare/v0.0.12...v0.0.13) (2026-07-06)
 
 ### Features
 
-- **bottom-sheet:** rebuild sheet with vaul ([86f626a](https://github.com/botiverse/rui/commit/86f626a59225c8b1b972c793776d1536cd98ad06))
-- **bottom-sheet:** refine sheet composition and previews ([01db061](https://github.com/botiverse/rui/commit/01db06136c6de020d347f83bda177f9a53cc2b2f))
-- **overlays:** refine elegant modal surfaces ([09d4cd3](https://github.com/botiverse/rui/commit/09d4cd33a65c8fcd2cd38be2e92a3f7191f1d090))
+- **message-item:** add wip composition docs ([e122875](https://github.com/botiverse/rui/commit/e1228758f553d343bb9ff0212d996b9caca19e08))
 
 ### Bug Fixes
 
-- **bottom-sheet:** align themed action order ([56d4a00](https://github.com/botiverse/rui/commit/56d4a00aef12324aef495765409908d72af46599))
-- **button:** align elegant button sizing ([95ef82a](https://github.com/botiverse/rui/commit/95ef82aa29484b9ac63cc30cf56e97489f6c1080))
-- **button:** align elegant outline visual height ([2f82b41](https://github.com/botiverse/rui/commit/2f82b412e0aa7859365a5bce316520aa29557559))
-- **button:** tighten inline icon padding ([50c4d20](https://github.com/botiverse/rui/commit/50c4d2061757a65560e632e1dba3715acefd3585))
-- **dialog:** align source comparison previews ([fc7da30](https://github.com/botiverse/rui/commit/fc7da30adad1bc96e299d662af0e9a7df092fd5c))
-- **dialog:** smooth modal transitions ([7ca0707](https://github.com/botiverse/rui/commit/7ca0707ddd83a84850430ff6d29d21320ae88b33))
-- **docs:** stabilize hydration and font imports ([45b272b](https://github.com/botiverse/rui/commit/45b272b520381d8ce6e818cb692c4240cb3a778c))
-- **overlays:** use themed backdrop tokens ([de06dd7](https://github.com/botiverse/rui/commit/de06dd7fd5552db56f847e0c1eb6542505760a6e))
+- **segmented-control:** make selection updates immediate ([87e1d05](https://github.com/botiverse/rui/commit/87e1d05e6b6a0c2e9a911898d18d0d9f9fcde91d))
+- **tooltip:** tighten content padding ([ce37fde](https://github.com/botiverse/rui/commit/ce37fde21b8be7adab49e81723b331e01a87c2df))

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

@@ -2924,7 +2924,7 @@ const tooltip = tv({
 		trigger: ["select-none"],
 		positioner: ["isolate z-50 outline-none"],
 		content: [
-			"relative inline-block max-w-[min(20rem,var(--available-width,20rem))] min-w-0 px-3 py-2",
+			"relative inline-block max-w-[min(20rem,var(--available-width,20rem))] min-w-0 px-2.5 py-1",
 			"text-[13px] leading-[18px] whitespace-normal break-words",
 			"origin-[var(--transform-origin)] outline-none",
 			"transition-[opacity,transform] duration-150 ease-[cubic-bezier(0.22,1,0.36,1)]",
@@ -4614,7 +4614,7 @@ const segmentedControl = tv({
 		root: ["inline-flex max-w-full flex-wrap items-center gap-1"],
 		item: [
 			"inline-flex min-w-0 shrink-0 items-center gap-1.5",
-			"text-xs leading-4 transition-colors",
+			"text-xs leading-4",
 			"outline-none disabled:pointer-events-none",
 			"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5"
 		],
@@ -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"