@arcfusionz/arc-primitive-ui 0.3.8 → 0.3.10

package/dist/components/AlertDialog/AlertDialog.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/cn.js";
+import { Box } from "../Box/Box.js";
 import { dialogPopupVariants } from "../Dialog/Dialog.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -67,6 +68,11 @@ const AlertDialogPopup = forwardRef(({ size = "sm", scrollBehavior = "inside", k
 		className: cn(viewportBaseClasses, scrollBehavior === "inside" ? viewportInsideClasses : viewportOutsideClasses),
 		children: /* @__PURE__ */ jsx(AlertDialog.Popup, {
 			ref,
+			render: /* @__PURE__ */ jsx(Box, {
+				padding: "lg",
+				radius: "lg",
+				shadow: "lg"
+			}),
 			className: cn(alertDialogPopupVariants({
 				size,
 				scrollBehavior

package/dist/components/Box/Box.d.ts

@@ -3,14 +3,14 @@ import { useRender } from "@base-ui/react/use-render";
 //#region src/components/Box/Box.d.ts
 type BoxBackground = "background" | "surface" | "muted" | "transparent" | "primary" | "secondary" | "hero";
 type BoxShadow = "none" | "sm" | "md" | "lg";
-type BoxRadius = "none" | "md" | "full";
+type BoxRadius = "none" | "md" | "lg" | "full";
 type BoxPadding = "none" | "sm" | "md" | "lg";
 interface BoxVariantsOptions {
   /** Semantic fill and its contrast-safe foreground color. */
   background?: BoxBackground;
   /** Elevation depth with a soft, diffused blur. All levels use Slate 400 at no more than 30% opacity. */
   shadow?: BoxShadow;
-  /** Corner treatment. `md` uses the ArcFusion 6px radius token. */
+  /** Corner treatment. Defaults to the 12px `lg` container radius. */
   radius?: BoxRadius;
   /** Inset spacing around the content. */
   padding?: BoxPadding;
@@ -26,7 +26,7 @@ interface BoxProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
   background?: BoxBackground;
   /** Elevation depth with a soft, diffused blur. Levels `sm`/`md`/`lg` use Slate 400 at 10%/20%/30% opacity and 8px/14px/22px blur; use `none` for flat layout containers. */
   shadow?: BoxShadow;
-  /** Corner treatment. `md` (default) is the ArcFusion 6px radius; `none` and `full` are structural alternatives. */
+  /** Corner treatment. `lg` (default) is the ArcFusion 12px container radius; `md` is the 6px control radius. */
   radius?: BoxRadius;
   /** Inset spacing around the content: `none` (0), `sm` (12px), `md` (16px), or `lg` (24px). */
   padding?: BoxPadding;

package/dist/components/Box/Box.js

@@ -21,6 +21,7 @@ const shadowClasses = {
 const radiusClasses = {
 	none: "rounded-none",
 	md: "rounded-md",
+	lg: "rounded-lg",
 	full: "rounded-full"
 };
 const paddingClasses = {
@@ -30,10 +31,10 @@ const paddingClasses = {
 	lg: "p-6"
 };
 /** Class list for an element styled as an ArcFusion Box frame. */
-function boxVariants({ background = "background", shadow = "md", radius = "md", padding = "md", border = true, className } = {}) {
+function boxVariants({ background = "background", shadow = "md", radius = "lg", padding = "md", border = true, className } = {}) {
 	return cn(baseClasses, backgroundClasses[background], shadowClasses[shadow], radiusClasses[radius], paddingClasses[padding], border && "border border-slate-200", className);
 }
-const Box = forwardRef(({ background = "background", shadow = "md", radius = "md", padding = "md", border = true, render, className, ...rest }, ref) => useRender({
+const Box = forwardRef(({ background = "background", shadow = "md", radius = "lg", padding = "md", border = true, render, className, ...rest }, ref) => useRender({
 	defaultTagName: "div",
 	render,
 	ref,

package/dist/components/Combobox/Combobox.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/cn.js";
+import { Box, boxVariants } from "../Box/Box.js";
 import { inputVariants } from "../Input/Input.js";
 import { selectTriggerVariants } from "../Select/Select.js";
 import { createContext, forwardRef, useContext } from "react";
@@ -225,7 +226,12 @@ ComboboxTrigger.displayName = "ComboboxTrigger";
 * renders no element of its own; the trigger styles the text.
 */
 const ComboboxValue = Combobox.Value;
-const popupSurfaceClasses = "relative overflow-clip rounded-md border border-border bg-background font-sans text-sm text-foreground shadow-md outline-none";
+const popupSurfaceClasses = boxVariants({
+	padding: "none",
+	radius: "md",
+	shadow: "lg",
+	className: "relative overflow-clip text-sm outline-none"
+});
 const popupBehaviorClasses = "flex max-h-[min(var(--combobox-max-height,9999px),var(--available-height))] flex-col min-w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] motion-safe:transition-[scale,opacity] motion-safe:duration-150 motion-safe:ease-out data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
 const listClasses = "min-h-0 scroll-py-1 overflow-y-auto overscroll-contain p-1 outline-none data-empty:p-0";
 const statusClasses = "flex shrink-0 items-center gap-2 px-3 py-2 font-sans text-xs text-muted-foreground empty:p-0";
@@ -254,6 +260,11 @@ const ComboboxPopup = forwardRef(({ align = "center", sideOffset = 4, alignOffse
 			style: maxHeight != null ? { "--combobox-max-height": typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
 			children: /* @__PURE__ */ jsxs(Combobox.Popup, {
 				ref,
+				render: /* @__PURE__ */ jsx(Box, {
+					padding: "none",
+					radius: "md",
+					shadow: "lg"
+				}),
 				className: cn(popupSurfaceClasses, popupBehaviorClasses, className),
 				...rest,
 				children: [

package/dist/components/ContextMenu/ContextMenu.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/cn.js";
+import { Box } from "../Box/Box.js";
 import { MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuLinkItem, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSubmenuRoot, MenuSubmenuTrigger, popupBehaviorClasses, popupSurfaceClasses } from "../Menu/Menu.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -60,6 +61,11 @@ const ContextMenuPopup = forwardRef(({ side, align, sideOffset = side === void 0
 		className: "z-50 select-none outline-none",
 		children: /* @__PURE__ */ jsx(ContextMenu.Popup, {
 			ref,
+			render: /* @__PURE__ */ jsx(Box, {
+				padding: "none",
+				radius: "md",
+				shadow: "lg"
+			}),
 			className: cn(popupSurfaceClasses, popupBehaviorClasses, className),
 			...rest,
 			children

package/dist/components/Dialog/Dialog.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/cn.js";
+import { Box, boxVariants } from "../Box/Box.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
@@ -43,7 +44,12 @@ const viewportSizeClasses = {
 	full: "p-0"
 };
 const viewportOutsideClasses = "overflow-y-auto overscroll-contain py-12";
-const popupBaseClasses = "relative m-auto flex w-full flex-col gap-4 rounded-md border border-border bg-background p-6 font-sans text-foreground shadow-lg outline-none pointer-events-auto data-closed:pointer-events-none scale-[calc(1-0.05*var(--nested-dialogs))] after:pointer-events-none after:absolute after:inset-0 after:rounded-md after:bg-slate-950/5 after:opacity-0 data-nested-dialog-open:after:opacity-100 motion-safe:transition-[opacity,scale] motion-safe:duration-150 motion-safe:ease-out motion-safe:after:transition-opacity motion-safe:after:duration-150 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
+const popupBaseClasses = boxVariants({
+	padding: "lg",
+	radius: "lg",
+	shadow: "lg",
+	className: "relative m-auto flex w-full flex-col gap-4 outline-none pointer-events-auto data-closed:pointer-events-none scale-[calc(1-0.05*var(--nested-dialogs))] after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-slate-950/5 after:opacity-0 data-nested-dialog-open:after:opacity-100 motion-safe:transition-[opacity,scale] motion-safe:duration-150 motion-safe:ease-out motion-safe:after:transition-opacity motion-safe:after:duration-150 data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0"
+});
 const popupSizeClasses = {
 	sm: "max-w-sm",
 	md: "max-w-lg",
@@ -88,6 +94,11 @@ const DialogPopup = forwardRef(({ size = "md", scrollBehavior = "inside", showCl
 			className: cn(viewportBaseClasses, viewportSizeClasses[size], scroll === "inside" ? viewportInsideClasses : viewportOutsideClasses),
 			children: /* @__PURE__ */ jsxs(Dialog.Popup, {
 				ref,
+				render: /* @__PURE__ */ jsx(Box, {
+					padding: "lg",
+					radius: "lg",
+					shadow: "lg"
+				}),
 				className: cn(dialogPopupVariants({
 					size,
 					scrollBehavior: scroll

package/dist/components/Drawer/Drawer.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/cn.js";
+import { Box, boxVariants } from "../Box/Box.js";
 import { createContext, forwardRef, useContext, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Drawer } from "@base-ui/react/drawer";
@@ -67,7 +68,13 @@ const viewportSideClasses = {
 	bottom: "items-end justify-center",
 	left: "justify-start"
 };
-const popupBaseClasses = "pointer-events-auto relative flex flex-col border-border bg-background font-sans text-foreground shadow-lg outline-none touch-none will-change-transform data-closed:pointer-events-none scale-[calc(1_-_0.05*var(--nested-drawers,0))] before:pointer-events-none before:absolute before:bg-inherit after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-slate-950/5 after:opacity-0 data-nested-drawer-open:after:opacity-100 motion-safe:transition-[transform,scale] motion-safe:duration-[450ms] motion-safe:ease-[cubic-bezier(0.32,0.72,0,1)] motion-safe:after:transition-opacity motion-safe:after:duration-[450ms] data-swiping:select-none data-swiping:duration-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)]";
+const popupBaseClasses = boxVariants({
+	border: false,
+	padding: "none",
+	radius: "none",
+	shadow: "lg",
+	className: "pointer-events-auto relative flex flex-col border-border outline-none touch-none will-change-transform data-closed:pointer-events-none scale-[calc(1_-_0.05*var(--nested-drawers,0))] before:pointer-events-none before:absolute before:bg-inherit after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:bg-slate-950/5 after:opacity-0 data-nested-drawer-open:after:opacity-100 motion-safe:transition-[transform,scale] motion-safe:duration-[450ms] motion-safe:ease-[cubic-bezier(0.32,0.72,0,1)] motion-safe:after:transition-opacity motion-safe:after:duration-[450ms] data-swiping:select-none data-swiping:duration-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength,1)*400ms)]"
+});
 const popupSideClasses = {
 	top: "w-full origin-top rounded-b-md border-b before:inset-x-0 before:bottom-full before:h-12 [transform:translateY(calc(var(--drawer-snap-point-offset,0px)_+_var(--drawer-swipe-movement-y,0px)))] data-starting-style:[transform:translateY(calc(-100%_-_2px))] data-ending-style:[transform:translateY(calc(-100%_-_2px))]",
 	right: "h-full origin-right border-l before:inset-y-0 before:left-full before:w-12 [transform:translateX(var(--drawer-swipe-movement-x,0px))] data-starting-style:[transform:translateX(calc(100%_+_2px))] data-ending-style:[transform:translateX(calc(100%_+_2px))]",
@@ -136,6 +143,12 @@ const DrawerPopup = forwardRef(({ size = "md", showCloseButton = true, closeLabe
 			className: cn(viewportBaseClasses, viewportSideClasses[side]),
 			children: /* @__PURE__ */ jsxs(Drawer.Popup, {
 				ref,
+				render: /* @__PURE__ */ jsx(Box, {
+					border: false,
+					padding: "none",
+					radius: "none",
+					shadow: "lg"
+				}),
 				className: cn(drawerPopupVariants({
 					side,
 					size

package/dist/components/Menu/Menu.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/cn.js";
+import { Box, boxVariants } from "../Box/Box.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu } from "@base-ui/react/menu";
@@ -83,7 +84,12 @@ const MenuTrigger = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */
 	...rest
 }));
 MenuTrigger.displayName = "MenuTrigger";
-const popupSurfaceClasses = "rounded-md border border-border bg-background p-1 font-sans text-sm text-foreground shadow-md outline-none";
+const popupSurfaceClasses = boxVariants({
+	padding: "none",
+	radius: "md",
+	shadow: "lg",
+	className: "p-1 text-sm outline-none"
+});
 const popupBehaviorClasses = "min-w-32 max-h-[var(--available-height)] max-w-[var(--available-width)] overflow-y-auto scroll-py-1 origin-[var(--transform-origin)] motion-safe:transition-[scale,opacity] motion-safe:duration-150 motion-safe:ease-out data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 data-instant:transition-none!";
 const adaptiveSideOffset = ({ side }) => side === "top" || side === "bottom" ? 4 : -4;
 const adaptiveAlignOffset = ({ side }) => side === "top" || side === "bottom" ? 0 : -4;
@@ -107,6 +113,11 @@ const MenuPopup = forwardRef(({ side, align, sideOffset = side === void 0 ? adap
 		className: "z-50 select-none outline-none",
 		children: /* @__PURE__ */ jsx(Menu.Popup, {
 			ref,
+			render: /* @__PURE__ */ jsx(Box, {
+				padding: "none",
+				radius: "md",
+				shadow: "lg"
+			}),
 			className: cn(popupSurfaceClasses, popupBehaviorClasses, className),
 			...rest,
 			children

package/dist/components/Popover/Popover.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/cn.js";
+import { Box, boxVariants } from "../Box/Box.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
@@ -33,7 +34,12 @@ const PopoverTrigger = forwardRef(({ className, ...rest }, ref) => /* @__PURE__
 	...rest
 }));
 PopoverTrigger.displayName = "PopoverTrigger";
-const popupSurfaceClasses = "rounded-md border border-border bg-background p-4 font-sans text-sm text-foreground shadow-md outline-none";
+const popupSurfaceClasses = boxVariants({
+	padding: "md",
+	radius: "md",
+	shadow: "lg",
+	className: "text-sm outline-none"
+});
 const popupBehaviorClasses = "origin-[var(--transform-origin)] max-w-[min(20rem,var(--available-width))] motion-safe:transition-[scale,opacity] motion-safe:duration-150 motion-safe:ease-out data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
 const arrowClasses = "relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:border before:border-border before:bg-background before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)]";
 const ARROW_PADDING = 8;
@@ -65,6 +71,11 @@ const PopoverPopup = forwardRef(({ side = "bottom", align = "center", sideOffset
 		className: "z-50",
 		children: /* @__PURE__ */ jsxs(Popover.Popup, {
 			ref,
+			render: /* @__PURE__ */ jsx(Box, {
+				padding: "md",
+				radius: "md",
+				shadow: "lg"
+			}),
 			className: cn(popupSurfaceClasses, popupBehaviorClasses, className),
 			...rest,
 			children: [arrow && /* @__PURE__ */ jsx(Popover.Arrow, { className: arrowClasses }), children]

package/dist/components/Select/Select.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/cn.js";
+import { Box, boxVariants } from "../Box/Box.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select } from "@base-ui/react/select";
@@ -134,7 +135,12 @@ const SelectValue = forwardRef(({ className, ...rest }, ref) => /* @__PURE__ */
 	...rest
 }));
 SelectValue.displayName = "SelectValue";
-const popupSurfaceClasses = "relative overflow-clip rounded-md border border-border bg-background font-sans text-sm text-foreground shadow-md outline-none";
+const popupSurfaceClasses = boxVariants({
+	padding: "none",
+	radius: "md",
+	shadow: "lg",
+	className: "relative overflow-clip text-sm outline-none"
+});
 const popupBehaviorClasses = "flex max-h-[min(var(--select-max-height,9999px),var(--available-height))] flex-col min-w-[var(--anchor-width)] max-w-[var(--available-width)] origin-[var(--transform-origin)] motion-safe:transition-[scale,opacity] motion-safe:duration-150 motion-safe:ease-out data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0";
 const listClasses = "min-h-0 scroll-py-6 overflow-y-auto p-1";
 const scrollArrowBaseClasses = "z-[1] flex h-6 w-full cursor-default items-center justify-center bg-background text-muted-foreground";
@@ -163,6 +169,11 @@ const SelectPopup = forwardRef(({ align = "center", sideOffset = 4, alignOffset
 		style: maxHeight != null ? { "--select-max-height": typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight } : void 0,
 		children: /* @__PURE__ */ jsxs(Select.Popup, {
 			ref,
+			render: /* @__PURE__ */ jsx(Box, {
+				padding: "none",
+				radius: "md",
+				shadow: "lg"
+			}),
 			className: cn(popupSurfaceClasses, popupBehaviorClasses, className),
 			...rest,
 			children: [

package/dist/components/Table/Table.d.ts

@@ -34,7 +34,7 @@ interface TableRowRenderState extends Record<string, unknown> {
   selected: boolean;
 }
 interface TableContainerProps extends Omit<ComponentPropsWithoutRef<"div">, "className"> {
-  /** Surface around the responsive scroll area. `elevated` is the rich card default, `outline` removes depth, and `plain` keeps only overflow behavior. */
+  /** Box surface around the responsive scroll area. `elevated` is the rich card default, `outline` removes depth, and `plain` keeps only overflow behavior. */
   variant?: TableContainerVariant;
   /** Replace the rendered `div` or inspect `{ variant }` in a render callback. Preserve a suitable grouping element. */
   render?: useRender.RenderProp<TableContainerRenderState>;

package/dist/components/Table/Table.js

@@ -1,12 +1,32 @@
 import { cn } from "../../lib/cn.js";
+import { Box } from "../Box/Box.js";
 import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/Table/Table.tsx
 const containerClasses = "relative w-full overflow-auto overscroll-x-contain";
-const containerVariantClasses = {
-	plain: "",
-	outline: "rounded-md border border-border bg-background",
-	elevated: "rounded-md border border-border bg-background shadow-md"
+const containerVariantBoxProps = {
+	plain: {
+		background: "transparent",
+		border: false,
+		padding: "none",
+		radius: "none",
+		shadow: "none"
+	},
+	outline: {
+		background: "background",
+		border: true,
+		padding: "none",
+		radius: "lg",
+		shadow: "none"
+	},
+	elevated: {
+		background: "background",
+		border: true,
+		padding: "none",
+		radius: "lg",
+		shadow: "md"
+	}
 };
 const tableClasses = "w-full min-w-full border-collapse bg-background font-sans text-sm text-foreground";
 const tableSizeClasses = {
@@ -31,15 +51,15 @@ const captionSideClasses = {
 	bottom: "caption-bottom border-t border-border"
 };
 const TableContainer = forwardRef(({ variant = "elevated", render, className, ...rest }, ref) => {
-	return useRender({
-		defaultTagName: "div",
-		render,
+	const state = { variant };
+	const boxRender = typeof render === "function" ? (props) => render(props, state) : render;
+	return /* @__PURE__ */ jsx(Box, {
 		ref,
-		state: { variant },
-		props: {
-			...rest,
-			className: cn(containerClasses, containerVariantClasses[variant], className)
-		}
+		...containerVariantBoxProps[variant],
+		render: boxRender,
+		"data-variant": variant,
+		...rest,
+		className: cn(containerClasses, className)
 	});
 });
 TableContainer.displayName = "TableContainer";

package/dist/components/Toast/Toast.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/cn.js";
+import { Box, boxVariants } from "../Box/Box.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toast } from "@base-ui/react/toast";
@@ -28,7 +29,12 @@ const swipeDirections = {
 	"bottom-center": ["down"],
 	"bottom-right": ["down", "right"]
 };
-const rootBaseClasses = "[--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))] absolute right-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full select-none h-[var(--height)] data-expanded:h-[var(--toast-height)] rounded-md border border-border bg-background text-foreground shadow-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-ending-style:opacity-0 data-limited:opacity-0 after:absolute after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] motion-safe:[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s] data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]";
+const rootBaseClasses = boxVariants({
+	padding: "none",
+	radius: "md",
+	shadow: "lg",
+	className: "[--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))] absolute right-0 left-0 z-[calc(1000-var(--toast-index))] mx-auto w-full select-none h-[var(--height)] data-expanded:h-[var(--toast-height)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-ending-style:opacity-0 data-limited:opacity-0 after:absolute after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-[''] motion-safe:[transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s] data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]"
+});
 const rootBottomClasses = "bottom-0 origin-bottom after:top-full [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] data-starting-style:[transform:translateY(150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]";
 const rootTopClasses = "top-0 origin-top after:bottom-full [--offset-y:calc(var(--toast-offset-y)+(var(--toast-index)*var(--gap))+var(--toast-swipe-movement-y))] [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)+(var(--toast-index)*var(--peek))+(var(--shrink)*var(--height))))_scale(var(--scale))] data-starting-style:[transform:translateY(-150%)] [&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(-150%)]";
 const contentClasses = "flex h-full items-start gap-3 overflow-hidden p-4 motion-safe:[transition:opacity_250ms_cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100";
@@ -258,6 +264,11 @@ function ToastList({ position, closeLabel }) {
 	return toasts.map((toastObject) => /* @__PURE__ */ jsx(Toast.Root, {
 		toast: toastObject,
 		swipeDirection: swipeDirections[position],
+		render: /* @__PURE__ */ jsx(Box, {
+			padding: "none",
+			radius: "md",
+			shadow: "lg"
+		}),
 		className: cn(rootBaseClasses, position.startsWith("top") ? rootTopClasses : rootBottomClasses),
 		children: /* @__PURE__ */ jsxs(Toast.Content, {
 			className: contentClasses,

package/dist/components/Tooltip/Tooltip.js

@@ -1,4 +1,5 @@
 import { cn } from "../../lib/cn.js";
+import { Box, boxVariants } from "../Box/Box.js";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip } from "@base-ui/react/tooltip";
@@ -49,7 +50,14 @@ const TooltipTrigger = forwardRef(({ className, ...rest }, ref) => /* @__PURE__
 	...rest
 }));
 TooltipTrigger.displayName = "TooltipTrigger";
-const popupSurfaceClasses = "rounded-md bg-foreground px-3 py-1.5 font-sans text-xs text-balance text-background shadow-sm";
+const popupSurfaceClasses = boxVariants({
+	background: "transparent",
+	border: false,
+	padding: "none",
+	radius: "md",
+	shadow: "lg",
+	className: "bg-foreground px-3 py-1.5 text-xs text-balance text-background"
+});
 const popupBehaviorClasses = "origin-[var(--transform-origin)] max-w-[min(17.5rem,var(--available-width))] motion-safe:transition-[scale,opacity] motion-safe:duration-100 motion-safe:ease-out data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0 data-instant:transition-none!";
 const arrowClasses = "relative block h-1.5 w-3 overflow-clip data-[side=bottom]:top-[-6px] data-[side=top]:bottom-[-6px] data-[side=top]:rotate-180 data-[side=left]:right-[-9px] data-[side=left]:rotate-90 data-[side=right]:left-[-9px] data-[side=right]:-rotate-90 before:absolute before:bottom-0 before:left-1/2 before:h-[calc(6px*sqrt(2))] before:w-[calc(6px*sqrt(2))] before:bg-foreground before:content-[''] before:[transform:translate(-50%,50%)_rotate(45deg)]";
 const ARROW_PADDING = 8;
@@ -84,6 +92,13 @@ const TooltipPopup = forwardRef(({ side = "top", align = "center", sideOffset =
 		className: "z-50",
 		children: /* @__PURE__ */ jsxs(Tooltip.Popup, {
 			ref,
+			render: /* @__PURE__ */ jsx(Box, {
+				background: "transparent",
+				border: false,
+				padding: "none",
+				radius: "md",
+				shadow: "lg"
+			}),
 			className: cn(popupSurfaceClasses, popupBehaviorClasses, className),
 			...rest,
 			children: [arrow && /* @__PURE__ */ jsx(Tooltip.Arrow, { className: arrowClasses }), children]

package/dist/index.js

@@ -2,11 +2,11 @@ import { cn } from "./lib/cn.js";
 import { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionTrigger } from "./components/Accordion/Accordion.js";
 import { AILoader } from "./components/AILoader/AILoader.js";
 import { Alert, alertVariants } from "./components/Alert/Alert.js";
+import { Box, boxVariants } from "./components/Box/Box.js";
 import { Dialog, DialogClose, DialogDescription, DialogFooter, DialogHeader, DialogPopup, DialogTitle, DialogTrigger, dialogPopupVariants } from "./components/Dialog/Dialog.js";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogPopup, AlertDialogTitle, AlertDialogTrigger, alertDialogPopupVariants, createAlertDialogHandle } from "./components/AlertDialog/AlertDialog.js";
 import { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarImage, avatarVariants } from "./components/Avatar/Avatar.js";
 import { Badge, badgeVariants } from "./components/Badge/Badge.js";
-import { Box, boxVariants } from "./components/Box/Box.js";
 import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, breadcrumbLinkVariants } from "./components/Breadcrumb/Breadcrumb.js";
 import { Button, buttonVariants } from "./components/Button/Button.js";
 import { Calendar } from "./components/Calendar/Calendar.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcfusionz/arc-primitive-ui",
-  "version": "0.3.8",
+  "version": "0.3.10",
   "description": "ArcFusion primitive UI components",
   "license": "MIT",
   "type": "module",

package/src/styles/theme.css

@@ -38,12 +38,14 @@
 
   /* ---------------------------------------------------------------------
    * Radius
-   * The system uses a single 6px radius. Tailwind's default radius scale
-   * is removed so `rounded-md` is the only sized option (`rounded-none`
-   * and `rounded-full` stay available for structural cases).
+   * The system uses a 6px control radius and a 12px container radius.
+   * Tailwind's default radius scale is removed so only `rounded-md` and
+   * `rounded-lg` are sized options (`rounded-none` and `rounded-full` stay
+   * available for structural cases).
    * ------------------------------------------------------------------- */
   --radius-*: initial;
   --radius-md: 6px;
+  --radius-lg: 12px;
 
   /* ---------------------------------------------------------------------
    * Motion