@jbpark/ui-kit 9.1.1 → 10.0.1

package/dist/core/drawer.mjs

@@ -5,10 +5,10 @@ import { useConfig } from "../providers/config/context.mjs";
 import { OVERLAY_LAYER } from "../lib/z-layers.mjs";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Drawer } from "vaul";
+import { Dialog } from "@base-ui/react/dialog";
 //#region src/core/drawer.tsx
 var drawer_exports = /* @__PURE__ */ __exportAll({
-	Drawer: () => Drawer$1,
+	Drawer: () => Drawer,
 	DrawerClose: () => DrawerClose,
 	DrawerContent: () => DrawerContent,
 	DrawerDescription: () => DrawerDescription,
@@ -19,69 +19,68 @@ var drawer_exports = /* @__PURE__ */ __exportAll({
 	DrawerTitle: () => DrawerTitle,
 	DrawerTrigger: () => DrawerTrigger
 });
-function Drawer$1({ draggable, container, ...props }) {
-	const { getContainer } = useConfig();
-	return /* @__PURE__ */ jsx(Drawer.Root, {
+function Drawer({ ...props }) {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
 		"data-slot": "drawer",
-		handleOnly: !draggable,
-		container: container ?? getContainer(),
 		...props
 	});
 }
 function DrawerTrigger({ ...props }) {
-	return /* @__PURE__ */ jsx(Drawer.Trigger, {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
 		"data-slot": "drawer-trigger",
 		...props
 	});
 }
 function DrawerPortal({ ...props }) {
-	return /* @__PURE__ */ jsx(Drawer.Portal, {
-		"data-slot": "drawer-portal",
-		...props
-	});
+	return /* @__PURE__ */ jsx(Dialog.Portal, { ...props });
 }
 function DrawerClose({ ...props }) {
-	return /* @__PURE__ */ jsx(Drawer.Close, {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
 		"data-slot": "drawer-close",
 		...props
 	});
 }
 function DrawerOverlay({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Drawer.Overlay, {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
 		"data-slot": "drawer-overlay",
-		className: cn(`data-[state=open]:animate-in data-[state=closed]:animate-out
-        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0
-        bg-black/50`, OVERLAY_LAYER, className),
+		className: cn(`fixed inset-0 bg-black/50 transition-opacity duration-300
+        data-ending-style:opacity-0 data-starting-style:opacity-0`, OVERLAY_LAYER, className),
 		...props
 	});
 }
-function DrawerContent({ className, children, classNames = {}, handlebar, mask, ...props }) {
+function DrawerContent({ className, children, classNames = {}, handlebar, mask = true, direction = "bottom", container, ...props }) {
+	const { getContainer } = useConfig();
+	const resolvedContainer = container ?? getContainer();
 	return /* @__PURE__ */ jsxs(DrawerPortal, {
-		"data-slot": "drawer-portal",
-		children: [/* @__PURE__ */ jsx(DrawerOverlay, { className: cn(classNames?.mask || "", !mask && "hidden") }), /* @__PURE__ */ jsxs(Drawer.Content, {
+		container: resolvedContainer,
+		children: [mask && /* @__PURE__ */ jsx(DrawerOverlay, { className: cn(classNames?.mask) }), /* @__PURE__ */ jsxs(Dialog.Popup, {
 			"data-slot": "drawer-content",
-			className: cn("group/drawer-content bg-background fixed flex h-auto flex-col", OVERLAY_LAYER, `data-[vaul-drawer-direction=top]:inset-x-0
-          data-[vaul-drawer-direction=top]:top-0
-          data-[vaul-drawer-direction=top]:mb-24
-          data-[vaul-drawer-direction=top]:max-h-[80vh]
-          data-[vaul-drawer-direction=top]:rounded-b-lg
-          data-[vaul-drawer-direction=top]:border-b`, `data-[vaul-drawer-direction=bottom]:inset-x-0
-          data-[vaul-drawer-direction=bottom]:bottom-0
-          data-[vaul-drawer-direction=bottom]:mt-24
-          data-[vaul-drawer-direction=bottom]:max-h-[80vh]
-          data-[vaul-drawer-direction=bottom]:rounded-t-lg
-          data-[vaul-drawer-direction=bottom]:border-t`, `data-[vaul-drawer-direction=right]:inset-y-0
-          data-[vaul-drawer-direction=right]:right-0
-          data-[vaul-drawer-direction=right]:w-3/4
-          data-[vaul-drawer-direction=right]:border-l
-          data-[vaul-drawer-direction=right]:sm:max-w-sm`, `data-[vaul-drawer-direction=left]:inset-y-0
-          data-[vaul-drawer-direction=left]:left-0
-          data-[vaul-drawer-direction=left]:w-3/4
-          data-[vaul-drawer-direction=left]:border-r
-          data-[vaul-drawer-direction=left]:sm:max-w-sm`, className),
+			"data-direction": direction,
+			className: cn(`group/drawer-content bg-background fixed flex h-auto flex-col
+          transition-transform duration-300 ease-in-out`, OVERLAY_LAYER, `data-[direction=top]:inset-x-0 data-[direction=top]:top-0
+          data-[direction=top]:mb-24 data-[direction=top]:max-h-[80vh]
+          data-[direction=top]:w-full data-[direction=top]:rounded-b-lg
+          data-[direction=top]:border-b
+          data-[direction=top]:data-ending-style:-translate-y-full
+          data-[direction=top]:data-starting-style:-translate-y-full`, `data-[direction=bottom]:inset-x-0 data-[direction=bottom]:bottom-0
+          data-[direction=bottom]:mt-24 data-[direction=bottom]:max-h-[80vh]
+          data-[direction=bottom]:w-full data-[direction=bottom]:rounded-t-lg
+          data-[direction=bottom]:border-t
+          data-[direction=bottom]:data-ending-style:translate-y-full
+          data-[direction=bottom]:data-starting-style:translate-y-full`, `data-[direction=right]:inset-y-0 data-[direction=right]:right-0
+          data-[direction=right]:h-full data-[direction=right]:w-3/4
+          data-[direction=right]:border-l
+          data-[direction=right]:data-ending-style:translate-x-full
+          data-[direction=right]:data-starting-style:translate-x-full
+          data-[direction=right]:sm:max-w-sm`, `data-[direction=left]:inset-y-0 data-[direction=left]:left-0
+          data-[direction=left]:h-full data-[direction=left]:w-3/4
+          data-[direction=left]:border-r
+          data-[direction=left]:data-ending-style:-translate-x-full
+          data-[direction=left]:data-starting-style:-translate-x-full
+          data-[direction=left]:sm:max-w-sm`, className),
 			...props,
 			children: [handlebar && /* @__PURE__ */ jsx("div", { className: cn(`bg-muted mx-auto mt-4 hidden h-2 w-25 shrink-0 rounded-full
-              group-data-[vaul-drawer-direction=bottom]/drawer-content:block`, classNames?.handlebar) }), children]
+              group-data-[direction=bottom]/drawer-content:block`, classNames?.handlebar) }), children]
 		})]
 	});
 }
@@ -89,9 +88,9 @@ function DrawerHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "drawer-header",
 		className: cn(`flex flex-col gap-0.5 p-4
-        group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center
-        group-data-[vaul-drawer-direction=top]/drawer-content:text-center
-        md:gap-1.5 md:text-left`, className),
+        group-data-[direction=bottom]/drawer-content:text-center
+        group-data-[direction=top]/drawer-content:text-center md:gap-1.5
+        md:text-left`, className),
 		...props
 	});
 }
@@ -103,20 +102,20 @@ function DrawerFooter({ className, ...props }) {
 	});
 }
 function DrawerTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Drawer.Title, {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
 		"data-slot": "drawer-title",
 		className: cn("text-foreground font-semibold", className),
 		...props
 	});
 }
 function DrawerDescription({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Drawer.Description, {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
 		"data-slot": "drawer-description",
 		className: cn("text-muted-foreground text-sm", className),
 		...props
 	});
 }
 //#endregion
-export { Drawer$1 as Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, drawer_exports };
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, drawer_exports };
 
 //# sourceMappingURL=drawer.mjs.map

package/dist/core/drawer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.mjs","names":["Drawer","DrawerPrimitive"],"sources":["../../src/core/drawer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Drawer as DrawerPrimitive } from 'vaul';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { OVERLAY_LAYER } from '../lib/z-layers';\n\n/*\n * Vendored from shadcn's `new-york-v4` drawer registry entry (built on `vaul`,\n * same as upstream).\n *\n * Local patches — re-apply these after any `shadcn add drawer`:\n * 1. Imports: `cn` from `@repo/ui/utils` (upstream uses its `cn` alias). The\n *    `vaul` import is upstream-verbatim.\n * 2. `OVERLAY_LAYER` (src/lib/z-layers.ts) replaces upstream's `z-50` on\n *    `DrawerOverlay` and `DrawerContent`. Why: this package is published and\n *    can't assume it owns the app's z-index scale — see #359.\n * 3. `Drawer` root takes a `draggable` prop (`CustomProps`) → `handleOnly={!\n *    draggable}`, plus `container` defaulted to `useConfig().getContainer()`.\n *    Why: the container keeps portalled content inside the themed wrapper, or\n *    dark mode and the CSS custom properties don't reach it.\n * 4. `DrawerContent` takes `CustomContentProps` (`classNames`, `handlebar`,\n *    `mask`): `classNames.mask` + `!mask && 'hidden'` on the overlay, and the\n *    drag handlebar is gated by `handlebar` with `classNames.handlebar`.\n *\n * The rest of what `shadcn add drawer --diff` reports is Tailwind class\n * ordering and prettier line-wrapping from this repo's formatter, not a patch.\n */\ninterface CustomProps {\n  draggable?: boolean;\n}\n\nfunction Drawer({\n  draggable,\n  container,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Root> & CustomProps) {\n  const { getContainer } = useConfig();\n\n  return (\n    <DrawerPrimitive.Root\n      data-slot=\"drawer\"\n      handleOnly={!draggable}\n      container={container ?? getContainer()}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {\n  return <DrawerPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {\n  return <DrawerPrimitive.Portal data-slot=\"drawer-portal\" {...props} />;\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Close>) {\n  return <DrawerPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        `data-[state=open]:animate-in data-[state=closed]:animate-out\n        data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0\n        bg-black/50`,\n        OVERLAY_LAYER,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ninterface CustomContentProps {\n  classNames?: Record<string, string>;\n  handlebar?: boolean;\n  mask?: boolean;\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  classNames = {},\n  handlebar,\n  mask,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Content> & CustomContentProps) {\n  return (\n    <DrawerPortal data-slot=\"drawer-portal\">\n      <DrawerOverlay\n        className={cn(\n          classNames?.mask || '',\n          !mask && 'hidden',\n          //\n        )}\n      />\n      <DrawerPrimitive.Content\n        data-slot=\"drawer-content\"\n        className={cn(\n          'group/drawer-content bg-background fixed flex h-auto flex-col',\n          OVERLAY_LAYER,\n          `data-[vaul-drawer-direction=top]:inset-x-0\n          data-[vaul-drawer-direction=top]:top-0\n          data-[vaul-drawer-direction=top]:mb-24\n          data-[vaul-drawer-direction=top]:max-h-[80vh]\n          data-[vaul-drawer-direction=top]:rounded-b-lg\n          data-[vaul-drawer-direction=top]:border-b`,\n          `data-[vaul-drawer-direction=bottom]:inset-x-0\n          data-[vaul-drawer-direction=bottom]:bottom-0\n          data-[vaul-drawer-direction=bottom]:mt-24\n          data-[vaul-drawer-direction=bottom]:max-h-[80vh]\n          data-[vaul-drawer-direction=bottom]:rounded-t-lg\n          data-[vaul-drawer-direction=bottom]:border-t`,\n          `data-[vaul-drawer-direction=right]:inset-y-0\n          data-[vaul-drawer-direction=right]:right-0\n          data-[vaul-drawer-direction=right]:w-3/4\n          data-[vaul-drawer-direction=right]:border-l\n          data-[vaul-drawer-direction=right]:sm:max-w-sm`,\n          `data-[vaul-drawer-direction=left]:inset-y-0\n          data-[vaul-drawer-direction=left]:left-0\n          data-[vaul-drawer-direction=left]:w-3/4\n          data-[vaul-drawer-direction=left]:border-r\n          data-[vaul-drawer-direction=left]:sm:max-w-sm`,\n          className,\n        )}\n        {...props}\n      >\n        {handlebar && (\n          <div\n            className={cn(\n              `bg-muted mx-auto mt-4 hidden h-2 w-25 shrink-0 rounded-full\n              group-data-[vaul-drawer-direction=bottom]/drawer-content:block`,\n              classNames?.handlebar,\n            )}\n          />\n        )}\n        {/* <div\n          className=\"bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full\n            group-data-[vaul-drawer-direction=bottom]/drawer-content:block\"\n        /> */}\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        `flex flex-col gap-0.5 p-4\n        group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center\n        group-data-[vaul-drawer-direction=top]/drawer-content:text-center\n        md:gap-1.5 md:text-left`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-foreground font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoCA,SAASA,SAAO,EACd,WACA,WACA,GAAG,SAC+D;CAClE,MAAM,EAAE,iBAAiB,UAAU;CAEnC,OACE,oBAACC,OAAgB,MAAjB;EACE,aAAU;EACV,YAAY,CAAC;EACb,WAAW,aAAa,aAAa;EACrC,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,GAAG,SACoD;CACvD,OAAO,oBAACA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aAAa,EACpB,GAAG,SACmD;CACtD,OAAO,oBAACA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,YAAY,EACnB,GAAG,SACkD;CACrD,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT;;sBAGA,eACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAQA,SAAS,cAAc,EACrB,WACA,UACA,aAAa,CAAC,GACd,WACA,MACA,GAAG,SACyE;CAC5E,OACE,qBAAC,cAAD;EAAc,aAAU;EAAxB,UAAA,CACE,oBAAC,eAAD,EACE,WAAW,GACT,YAAY,QAAQ,IACpB,CAAC,QAAQ,QAEX,EACD,CAAA,GACD,qBAACA,OAAgB,SAAjB;GACE,aAAU;GACV,WAAW,GACT,iEACA,eACA;;;;;sDAMA;;;;;yDAMA;;;;2DAKA;;;;0DAKA,SACF;GACA,GAAI;GA7BN,UAAA,CA+BG,aACC,oBAAC,OAAD,EACE,WAAW,GACT;+EAEA,YAAY,SACd,EACD,CAAA,GAMF,QACsB;EACb,CAAA,CAAA;;AAElB;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT;;;kCAIA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"drawer.mjs","names":["DialogPrimitive"],"sources":["../../src/core/drawer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Dialog as DialogPrimitive } from '@base-ui/react/dialog';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { OVERLAY_LAYER } from '../lib/z-layers';\n\n/*\n * Drawer rebuilt on Base UI's Dialog primitives (ui-kit#375, Decision #2) —\n * no longer `vaul`. Base UI has no dedicated Drawer, so the side-sheet is a\n * Dialog whose popup is anchored to an edge and slides in/out.\n *\n * Consequences of dropping vaul:\n * - No drag-to-dismiss / snap points. The `handlebar` stays as a visual\n *   affordance on bottom drawers but is no longer draggable.\n * - `direction` is a local `DrawerContent` prop (top/bottom/left/right) exposed\n *   as `data-direction`, which drives both the popup's own placement/slide and\n *   the `group-data-[direction=…]` hooks the header/handlebar rely on. It\n *   replaces vaul's `data-vaul-drawer-direction`.\n * - Pointer-outside dismissal (`maskClosable`) is a root concern\n *   (`disablePointerDismissal`), and mask/modal behaviour is driven by the\n *   consumer — see `organisms/drawer`.\n *\n * Retained local patches: `OVERLAY_LAYER` (#359) over upstream's z-index, the\n * themed portal `container` (default `useConfig().getContainer()`), and the\n * `classNames`/`handlebar`/`mask` custom props.\n */\ntype Direction = 'top' | 'bottom' | 'left' | 'right';\n\nfunction Drawer({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Root>) {\n  return <DialogPrimitive.Root data-slot=\"drawer\" {...props} />;\n}\n\nfunction DrawerTrigger({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n  return <DialogPrimitive.Trigger data-slot=\"drawer-trigger\" {...props} />;\n}\n\nfunction DrawerPortal({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n  return <DialogPrimitive.Portal {...props} />;\n}\n\nfunction DrawerClose({\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Close>) {\n  return <DialogPrimitive.Close data-slot=\"drawer-close\" {...props} />;\n}\n\nfunction DrawerOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Backdrop>) {\n  return (\n    <DialogPrimitive.Backdrop\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        `fixed inset-0 bg-black/50 transition-opacity duration-300\n        data-ending-style:opacity-0 data-starting-style:opacity-0`,\n        OVERLAY_LAYER,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ninterface CustomContentProps {\n  classNames?: Record<string, string>;\n  handlebar?: boolean;\n  mask?: boolean;\n  direction?: Direction;\n  container?: HTMLElement;\n}\n\nfunction DrawerContent({\n  className,\n  children,\n  classNames = {},\n  handlebar,\n  mask = true,\n  direction = 'bottom',\n  container,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Popup> & CustomContentProps) {\n  const { getContainer } = useConfig();\n  const resolvedContainer = container ?? getContainer();\n\n  return (\n    <DrawerPortal container={resolvedContainer}>\n      {mask && <DrawerOverlay className={cn(classNames?.mask)} />}\n      <DialogPrimitive.Popup\n        data-slot=\"drawer-content\"\n        data-direction={direction}\n        className={cn(\n          `group/drawer-content bg-background fixed flex h-auto flex-col\n          transition-transform duration-300 ease-in-out`,\n          OVERLAY_LAYER,\n          `data-[direction=top]:inset-x-0 data-[direction=top]:top-0\n          data-[direction=top]:mb-24 data-[direction=top]:max-h-[80vh]\n          data-[direction=top]:w-full data-[direction=top]:rounded-b-lg\n          data-[direction=top]:border-b\n          data-[direction=top]:data-ending-style:-translate-y-full\n          data-[direction=top]:data-starting-style:-translate-y-full`,\n          `data-[direction=bottom]:inset-x-0 data-[direction=bottom]:bottom-0\n          data-[direction=bottom]:mt-24 data-[direction=bottom]:max-h-[80vh]\n          data-[direction=bottom]:w-full data-[direction=bottom]:rounded-t-lg\n          data-[direction=bottom]:border-t\n          data-[direction=bottom]:data-ending-style:translate-y-full\n          data-[direction=bottom]:data-starting-style:translate-y-full`,\n          `data-[direction=right]:inset-y-0 data-[direction=right]:right-0\n          data-[direction=right]:h-full data-[direction=right]:w-3/4\n          data-[direction=right]:border-l\n          data-[direction=right]:data-ending-style:translate-x-full\n          data-[direction=right]:data-starting-style:translate-x-full\n          data-[direction=right]:sm:max-w-sm`,\n          `data-[direction=left]:inset-y-0 data-[direction=left]:left-0\n          data-[direction=left]:h-full data-[direction=left]:w-3/4\n          data-[direction=left]:border-r\n          data-[direction=left]:data-ending-style:-translate-x-full\n          data-[direction=left]:data-starting-style:-translate-x-full\n          data-[direction=left]:sm:max-w-sm`,\n          className,\n        )}\n        {...props}\n      >\n        {handlebar && (\n          <div\n            className={cn(\n              `bg-muted mx-auto mt-4 hidden h-2 w-25 shrink-0 rounded-full\n              group-data-[direction=bottom]/drawer-content:block`,\n              classNames?.handlebar,\n            )}\n          />\n        )}\n        {children}\n      </DialogPrimitive.Popup>\n    </DrawerPortal>\n  );\n}\n\nfunction DrawerHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\n        `flex flex-col gap-0.5 p-4\n        group-data-[direction=bottom]/drawer-content:text-center\n        group-data-[direction=top]/drawer-content:text-center md:gap-1.5\n        md:text-left`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn('mt-auto flex flex-col gap-2 p-4', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Title>) {\n  return (\n    <DialogPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn('text-foreground font-semibold', className)}\n      {...props}\n    />\n  );\n}\n\nfunction DrawerDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n  return (\n    <DialogPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn('text-muted-foreground text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Drawer,\n  DrawerPortal,\n  DrawerOverlay,\n  DrawerTrigger,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerFooter,\n  DrawerTitle,\n  DrawerDescription,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAiCA,SAAS,OAAO,EACd,GAAG,SACiD;CACpD,OAAO,oBAACA,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,cAAc,EACrB,GAAG,SACoD;CACvD,OAAO,oBAACA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,aAAa,EACpB,GAAG,SACmD;CACtD,OAAO,oBAACA,OAAgB,QAAjB,EAAwB,GAAI,MAAQ,CAAA;AAC7C;AAEA,SAAS,YAAY,EACnB,GAAG,SACkD;CACrD,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT;oEAEA,eACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAUA,SAAS,cAAc,EACrB,WACA,UACA,aAAa,CAAC,GACd,WACA,OAAO,MACP,YAAY,UACZ,WACA,GAAG,SACuE;CAC1E,MAAM,EAAE,iBAAiB,UAAU;CACnC,MAAM,oBAAoB,aAAa,aAAa;CAEpD,OACE,qBAAC,cAAD;EAAc,WAAW;EAAzB,UAAA,CACG,QAAQ,oBAAC,eAAD,EAAe,WAAW,GAAG,YAAY,IAAI,EAAI,CAAA,GAC1D,qBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,kBAAgB;GAChB,WAAW,GACT;0DAEA,eACA;;;;;uEAMA;;;;;yEAMA;;;;;+CAMA;;;;;8CAMA,SACF;GACA,GAAI;GAjCN,UAAA,CAmCG,aACC,oBAAC,OAAD,EACE,WAAW,GACT;mEAEA,YAAY,SACd,EACD,CAAA,GAEF,QACoB;EACX,CAAA,CAAA;;AAElB;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT;;;uBAIA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL"}

package/dist/core/label.d.mts

@@ -1,2 +1 @@
-import "react";
-import "@radix-ui/react-label";
+import "react";

package/dist/core/label.mjs

@@ -1,13 +1,11 @@
-"use client";
 import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
-import * as LabelPrimitive from "@radix-ui/react-label";
 //#region src/core/label.tsx
 var label_exports = /* @__PURE__ */ __exportAll({ Label: () => Label });
 function Label({ className, ...props }) {
-	return /* @__PURE__ */ jsx(LabelPrimitive.Root, {
+	return /* @__PURE__ */ jsx("label", {
 		"data-slot": "label",
 		className: cn(`flex items-center gap-2 text-sm leading-none font-medium select-none
         group-data-[disabled=true]:pointer-events-none

package/dist/core/label.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"label.mjs","names":[],"sources":["../../src/core/label.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as LabelPrimitive from '@radix-ui/react-label';\n\nimport { cn } from '@repo/ui/utils';\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        `flex items-center gap-2 text-sm leading-none font-medium select-none\n        group-data-[disabled=true]:pointer-events-none\n        group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed\n        peer-disabled:opacity-50`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n"],"mappings":";;;;;;;;AAQA,SAAS,MAAM,EACb,WACA,GAAG,SACgD;CACnD,OACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GACT;;;mCAIA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"label.mjs","names":[],"sources":["../../src/core/label.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@repo/ui/utils';\n\nfunction Label({ className, ...props }: React.ComponentProps<'label'>) {\n  return (\n    <label\n      data-slot=\"label\"\n      className={cn(\n        `flex items-center gap-2 text-sm leading-none font-medium select-none\n        group-data-[disabled=true]:pointer-events-none\n        group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed\n        peer-disabled:opacity-50`,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Label };\n"],"mappings":";;;;;;AAIA,SAAS,MAAM,EAAE,WAAW,GAAG,SAAwC;CACrE,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GACT;;;mCAIA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/core/popover.d.mts

@@ -1,2 +1,2 @@
 import "react";
-import "@radix-ui/react-popover";
+import { Popover } from "@base-ui/react/popover";

package/dist/core/popover.mjs

@@ -4,55 +4,60 @@ import { cn } from "../utils.mjs";
 import { useConfig } from "../providers/config/context.mjs";
 import { OVERLAY_LAYER } from "../lib/z-layers.mjs";
 import "react";
-import { jsx } from "react/jsx-runtime";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
 //#region src/core/popover.tsx
 var popover_exports = /* @__PURE__ */ __exportAll({
-	Popover: () => Popover,
-	PopoverAnchor: () => PopoverAnchor,
+	Popover: () => Popover$1,
+	PopoverArrow: () => PopoverArrow,
 	PopoverContent: () => PopoverContent,
 	PopoverDescription: () => PopoverDescription,
 	PopoverHeader: () => PopoverHeader,
 	PopoverTitle: () => PopoverTitle,
 	PopoverTrigger: () => PopoverTrigger
 });
-function Popover({ ...props }) {
-	return /* @__PURE__ */ jsx(PopoverPrimitive.Root, {
-		"data-slot": "popover",
-		...props
-	});
-}
-function PopoverTrigger({ ...props }) {
-	return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, {
-		"data-slot": "popover-trigger",
-		...props
-	});
-}
-function PopoverContent({ className, align = "center", sideOffset = 4, container, ...props }) {
+const Popover$1 = Popover.Root;
+const PopoverTrigger = Popover.Trigger;
+function PopoverContent({ className, align = "center", side = "bottom", sideOffset = 4, container, ...props }) {
 	const { getContainer } = useConfig();
-	return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, {
+	return /* @__PURE__ */ jsx(Popover.Portal, {
 		container: container ?? getContainer(),
-		children: /* @__PURE__ */ jsx(PopoverPrimitive.Content, {
-			"data-slot": "popover-content",
+		children: /* @__PURE__ */ jsx(Popover.Positioner, {
+			side,
 			align,
 			sideOffset,
-			className: cn(`bg-popover text-popover-foreground data-[state=open]:animate-in
-          data-[state=closed]:animate-out data-[state=closed]:fade-out-0
-          data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95
-          data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2
-          data-[side=left]:slide-in-from-right-2
-          data-[side=right]:slide-in-from-left-2
-          data-[side=top]:slide-in-from-bottom-2 w-72
-          origin-(--radix-popover-content-transform-origin) rounded-md border
-          p-4 shadow-md outline-hidden`, OVERLAY_LAYER, className),
-			...props
+			arrowPadding: 16,
+			className: OVERLAY_LAYER,
+			children: /* @__PURE__ */ jsx(Popover.Popup, {
+				"data-slot": "popover-content",
+				className: cn(`bg-popover text-popover-foreground w-72 origin-(--transform-origin)
+            rounded-md border p-4 shadow-md outline-hidden
+            transition-[opacity,transform] duration-150
+            data-ending-style:scale-95 data-ending-style:opacity-0
+            data-starting-style:scale-95 data-starting-style:opacity-0`, className),
+				...props
+			})
 		})
 	});
 }
-function PopoverAnchor({ ...props }) {
-	return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, {
-		"data-slot": "popover-anchor",
-		...props
+function PopoverArrow() {
+	return /* @__PURE__ */ jsx(Popover.Arrow, {
+		"data-slot": "popover-arrow",
+		className: "data-[side=bottom]:-top-2 data-[side=left]:-right-[13px]\n        data-[side=left]:rotate-90 data-[side=right]:-left-[13px]\n        data-[side=right]:-rotate-90 data-[side=top]:-bottom-2\n        data-[side=top]:rotate-180",
+		children: /* @__PURE__ */ jsxs("svg", {
+			className: "block",
+			width: "18",
+			height: "9",
+			viewBox: "0 0 18 9",
+			fill: "none",
+			children: [/* @__PURE__ */ jsx("path", {
+				d: "M0 9 9 0 18 9",
+				className: "fill-border"
+			}), /* @__PURE__ */ jsx("path", {
+				d: "M1 9 9 1 17 9",
+				className: "fill-popover"
+			})]
+		})
 	});
 }
 function PopoverHeader({ className, ...props }) {
@@ -63,20 +68,20 @@ function PopoverHeader({ className, ...props }) {
 	});
 }
 function PopoverTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx(Popover.Title, {
 		"data-slot": "popover-title",
 		className: cn("font-medium", className),
 		...props
 	});
 }
 function PopoverDescription({ className, ...props }) {
-	return /* @__PURE__ */ jsx("p", {
+	return /* @__PURE__ */ jsx(Popover.Description, {
 		"data-slot": "popover-description",
 		className: cn("text-muted-foreground", className),
 		...props
 	});
 }
 //#endregion
-export { Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, popover_exports };
+export { Popover$1 as Popover, PopoverArrow, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, popover_exports };
 
 //# sourceMappingURL=popover.mjs.map

package/dist/core/popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.mjs","names":[],"sources":["../../src/core/popover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { OVERLAY_LAYER } from '../lib/z-layers';\n\n/*\n * Vendored from shadcn's `new-york-v4` popover registry entry.\n *\n * Local patches — re-apply these after any `shadcn add popover`:\n * 1. Imports: `PopoverPrimitive` from `@radix-ui/react-popover` (upstream uses\n *    the unified `radix-ui` package, which this repo doesn't install), `cn`\n *    from `@repo/ui/utils`.\n * 2. `OVERLAY_LAYER` (src/lib/z-layers.ts) replaces upstream's `z-50` on\n *    `PopoverContent`. Why: this package is published and can't assume it owns\n *    the app's z-index scale — see #359.\n * 3. `PopoverContent` takes a `container` prop, defaulted to\n *    `useConfig().getContainer()`, and passes it to `PopoverPrimitive.Portal`\n *    (upstream renders the portal with no `container`). Why: portalled content\n *    must stay inside the themed wrapper, or dark mode and the CSS custom\n *    properties don't reach it.\n *\n * The rest of what `shadcn add popover --diff` reports is Tailwind class\n * ordering and prettier line-wrapping from this repo's formatter, not a patch.\n */\nfunction Popover({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n  return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />;\n}\n\nfunction PopoverTrigger({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n  return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />;\n}\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  sideOffset = 4,\n  container,\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Content> & {\n  container?: HTMLElement;\n}) {\n  const { getContainer } = useConfig();\n\n  return (\n    <PopoverPrimitive.Portal container={container ?? getContainer()}>\n      <PopoverPrimitive.Content\n        data-slot=\"popover-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          `bg-popover text-popover-foreground data-[state=open]:animate-in\n          data-[state=closed]:animate-out data-[state=closed]:fade-out-0\n          data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95\n          data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2\n          data-[side=left]:slide-in-from-right-2\n          data-[side=right]:slide-in-from-left-2\n          data-[side=top]:slide-in-from-bottom-2 w-72\n          origin-(--radix-popover-content-transform-origin) rounded-md border\n          p-4 shadow-md outline-hidden`,\n          OVERLAY_LAYER,\n          className,\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n}\n\nfunction PopoverAnchor({\n  ...props\n}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n  return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />;\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn('flex flex-col gap-1 text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>) {\n  return (\n    <div\n      data-slot=\"popover-title\"\n      className={cn('font-medium', className)}\n      {...props}\n    />\n  );\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<'p'>) {\n  return (\n    <p\n      data-slot=\"popover-description\"\n      className={cn('text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverAnchor,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverDescription,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AA8BA,SAAS,QAAQ,EACf,GAAG,SACkD;CACrD,OAAO,oBAAC,iBAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA;AAChE;AAEA,SAAS,eAAe,EACtB,GAAG,SACqD;CACxD,OAAO,oBAAC,iBAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,aAAa,GACb,WACA,GAAG,SAGF;CACD,MAAM,EAAE,iBAAiB,UAAU;CAEnC,OACE,oBAAC,iBAAiB,QAAlB;EAAyB,WAAW,aAAa,aAAa;EAC5D,UAAA,oBAAC,iBAAiB,SAAlB;GACE,aAAU;GACH;GACK;GACZ,WAAW,GACT;;;;;;;;yCASA,eACA,SACF;GACA,GAAI;EACL,CAAA;CACsB,CAAA;AAE7B;AAEA,SAAS,cAAc,EACrB,GAAG,SACoD;CACvD,OAAO,oBAAC,iBAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAqC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,eAAe,SAAS;EACtC,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyB;CAC5B,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GAAG,yBAAyB,SAAS;EAChD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"popover.mjs","names":["Popover","PopoverPrimitive"],"sources":["../../src/core/popover.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { useConfig } from '@repo/ui/providers';\nimport { cn } from '@repo/ui/utils';\n\nimport { OVERLAY_LAYER } from '../lib/z-layers';\n\n// Base UI primitives with repo-owned styling; no longer vendored from shadcn.\nconst Popover = PopoverPrimitive.Root;\nconst PopoverTrigger = PopoverPrimitive.Trigger;\n\nfunction PopoverContent({\n  className,\n  align = 'center',\n  side = 'bottom',\n  sideOffset = 4,\n  container,\n  ...props\n}: Omit<React.ComponentProps<typeof PopoverPrimitive.Popup>, 'className'> & {\n  className?: string;\n  align?: PopoverPrimitive.Positioner.Props['align'];\n  side?: PopoverPrimitive.Positioner.Props['side'];\n  sideOffset?: number;\n  container?: HTMLElement;\n}) {\n  const { getContainer } = useConfig();\n\n  return (\n    <PopoverPrimitive.Portal container={container ?? getContainer()}>\n      <PopoverPrimitive.Positioner\n        side={side}\n        align={align}\n        sideOffset={sideOffset}\n        arrowPadding={16}\n        className={OVERLAY_LAYER}\n      >\n        <PopoverPrimitive.Popup\n          data-slot=\"popover-content\"\n          className={cn(\n            `bg-popover text-popover-foreground w-72 origin-(--transform-origin)\n            rounded-md border p-4 shadow-md outline-hidden\n            transition-[opacity,transform] duration-150\n            data-ending-style:scale-95 data-ending-style:opacity-0\n            data-starting-style:scale-95 data-starting-style:opacity-0`,\n            className,\n            //\n          )}\n          {...props}\n        />\n      </PopoverPrimitive.Positioner>\n    </PopoverPrimitive.Portal>\n  );\n}\n\nfunction PopoverArrow() {\n  return (\n    <PopoverPrimitive.Arrow\n      data-slot=\"popover-arrow\"\n      className=\"data-[side=bottom]:-top-2 data-[side=left]:-right-[13px]\n        data-[side=left]:rotate-90 data-[side=right]:-left-[13px]\n        data-[side=right]:-rotate-90 data-[side=top]:-bottom-2\n        data-[side=top]:rotate-180\"\n    >\n      {/* `block` keeps the arrow box exactly as tall as the SVG. Left inline,\n          the SVG sits on a text baseline and the wrapper inherits the popup's\n          line-height instead (26px, not 9px), which pushes the triangle down\n          inside the popup and rotates it about the wrong centre. */}\n      <svg\n        className=\"block\"\n        width=\"18\"\n        height=\"9\"\n        viewBox=\"0 0 18 9\"\n        fill=\"none\"\n      >\n        <path d=\"M0 9 9 0 18 9\" className=\"fill-border\" />\n        <path d=\"M1 9 9 1 17 9\" className=\"fill-popover\" />\n      </svg>\n    </PopoverPrimitive.Arrow>\n  );\n}\n\nfunction PopoverHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"popover-header\"\n      className={cn('flex flex-col gap-1 text-sm', className)}\n      {...props}\n    />\n  );\n}\n\nfunction PopoverTitle({\n  className,\n  ...props\n}: Omit<React.ComponentProps<typeof PopoverPrimitive.Title>, 'className'> & {\n  className?: string;\n}) {\n  return (\n    <PopoverPrimitive.Title\n      data-slot=\"popover-title\"\n      className={cn('font-medium', className)}\n      {...props}\n    />\n  );\n}\n\nfunction PopoverDescription({\n  className,\n  ...props\n}: React.ComponentProps<'p'>) {\n  return (\n    <PopoverPrimitive.Description\n      data-slot=\"popover-description\"\n      className={cn('text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Popover,\n  PopoverTrigger,\n  PopoverContent,\n  PopoverArrow,\n  PopoverHeader,\n  PopoverTitle,\n  PopoverDescription,\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAYA,MAAMA,YAAUC,QAAiB;AACjC,MAAM,iBAAiBA,QAAiB;AAExC,SAAS,eAAe,EACtB,WACA,QAAQ,UACR,OAAO,UACP,aAAa,GACb,WACA,GAAG,SAOF;CACD,MAAM,EAAE,iBAAiB,UAAU;CAEnC,OACE,oBAACA,QAAiB,QAAlB;EAAyB,WAAW,aAAa,aAAa;EAC5D,UAAA,oBAACA,QAAiB,YAAlB;GACQ;GACC;GACK;GACZ,cAAc;GACd,WAAW;GAEX,UAAA,oBAACA,QAAiB,OAAlB;IACE,aAAU;IACV,WAAW,GACT;;;;yEAKA,SAEF;IACA,GAAI;GACL,CAAA;EAC0B,CAAA;CACN,CAAA;AAE7B;AAEA,SAAS,eAAe;CACtB,OACE,oBAACA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAU;EASV,UAAA,qBAAC,OAAD;GACE,WAAU;GACV,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GALP,UAAA,CAOE,oBAAC,QAAD;IAAM,GAAE;IAAgB,WAAU;GAAe,CAAA,GACjD,oBAAC,QAAD;IAAM,GAAE;IAAgB,WAAU;GAAgB,CAAA,CAC/C;;CACiB,CAAA;AAE5B;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SAGF;CACD,OACE,oBAACA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GAAG,eAAe,SAAS;EACtC,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACyB;CAC5B,OACE,oBAACA,QAAiB,aAAlB;EACE,aAAU;EACV,WAAW,GAAG,yBAAyB,SAAS;EAChD,GAAI;CACL,CAAA;AAEL"}

package/dist/core/progress.d.mts

@@ -1,2 +1,2 @@
 import "react";
-import "@radix-ui/react-progress";
+import { Progress } from "@base-ui/react/progress";

package/dist/core/progress.mjs

@@ -3,25 +3,22 @@ import { __exportAll } from "../_virtual/_rolldown/runtime.mjs";
 import { cn } from "../utils.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
-import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { Progress } from "@base-ui/react/progress";
 //#region src/core/progress.tsx
-var progress_exports = /* @__PURE__ */ __exportAll({ Progress: () => Progress });
-function Progress({ className, value, barClassName, barStyle, ...props }) {
-	return /* @__PURE__ */ jsx(ProgressPrimitive.Root, {
+var progress_exports = /* @__PURE__ */ __exportAll({ Progress: () => Progress$1 });
+function Progress$1({ className, barClassName, barStyle, ...props }) {
+	return /* @__PURE__ */ jsx(Progress.Root, {
 		"data-slot": "progress",
 		className: cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className),
 		...props,
-		children: /* @__PURE__ */ jsx(ProgressPrimitive.Indicator, {
+		children: /* @__PURE__ */ jsx(Progress.Indicator, {
 			"data-slot": "progress-indicator",
 			className: cn("bg-primary h-full w-full flex-1 transition-all", barClassName),
-			style: {
-				transform: `translateX(-${100 - (value || 0)}%)`,
-				...barStyle
-			}
+			style: barStyle
 		})
 	});
 }
 //#endregion
-export { Progress, progress_exports };
+export { Progress$1 as Progress, progress_exports };
 
 //# sourceMappingURL=progress.mjs.map

package/dist/core/progress.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"progress.mjs","names":[],"sources":["../../src/core/progress.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as ProgressPrimitive from '@radix-ui/react-progress';\n\nimport { cn } from '@repo/ui/utils';\n\n/*\n * Vendored from shadcn's `new-york-v4` progress registry entry.\n *\n * Local patches — re-apply these after any `shadcn add progress`:\n * 1. Import `cn` from `@repo/ui/utils` (upstream uses its `cn` alias) and\n *    `ProgressPrimitive` from `@radix-ui/react-progress` (upstream uses the\n *    unified `radix-ui` package, which this repo doesn't install).\n * 2. `CustomProps` adds `barClassName` (merged onto the Indicator's className)\n *    and `barStyle` (merged into the Indicator's inline `style`).\n *\n * Why this stays a local patch rather than moving to `atoms/progress` (#361):\n * `atoms/progress` supports a vertical direction, which needs the Indicator\n * sized by `height %` via `barStyle` — overriding upstream's inline\n * `transform: translateX(...)`. Inline style can't be overridden through a\n * `className`, so the consumer must reach the Indicator's `style`, which a\n * verbatim primitive doesn't expose. Irreducibly structural (like #363). The\n * rest of `shadcn add progress --diff` is class ordering / prettier wrapping.\n */\ninterface CustomProps {\n  barClassName?: string;\n  barStyle?: React.CSSProperties;\n}\n\nfunction Progress({\n  className,\n  value,\n  barClassName,\n  barStyle,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root> & CustomProps) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',\n        className,\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className={cn(\n          'bg-primary h-full w-full flex-1 transition-all',\n          barClassName,\n        )}\n        style={{\n          transform: `translateX(-${100 - (value || 0)}%)`,\n          ...barStyle,\n        }}\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport { Progress };\n"],"mappings":";;;;;;;;AA+BA,SAAS,SAAS,EAChB,WACA,OACA,cACA,UACA,GAAG,SACiE;CACpE,OACE,oBAAC,kBAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,kEACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,kBAAkB,WAAnB;GACE,aAAU;GACV,WAAW,GACT,kDACA,YACF;GACA,OAAO;IACL,WAAW,eAAe,OAAO,SAAS,GAAG;IAC7C,GAAG;GACL;EACD,CAAA;CACqB,CAAA;AAE5B"}
+{"version":3,"file":"progress.mjs","names":["Progress","ProgressPrimitive"],"sources":["../../src/core/progress.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Progress as ProgressPrimitive } from '@base-ui/react/progress';\n\nimport { cn } from '@repo/ui/utils';\n\ninterface CustomProps {\n  barClassName?: string;\n  barStyle?: React.CSSProperties;\n}\n\n// Base UI primitive with repo-owned styling; no longer vendored from shadcn.\nfunction Progress({\n  className,\n  barClassName,\n  barStyle,\n  ...props\n}: React.ComponentProps<typeof ProgressPrimitive.Root> & CustomProps) {\n  return (\n    <ProgressPrimitive.Root\n      data-slot=\"progress\"\n      className={cn(\n        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',\n        className,\n      )}\n      {...props}\n    >\n      <ProgressPrimitive.Indicator\n        data-slot=\"progress-indicator\"\n        className={cn(\n          'bg-primary h-full w-full flex-1 transition-all',\n          barClassName,\n          //\n        )}\n        style={barStyle}\n      />\n    </ProgressPrimitive.Root>\n  );\n}\n\nexport { Progress };\n"],"mappings":";;;;;;;;AAcA,SAASA,WAAS,EAChB,WACA,cACA,UACA,GAAG,SACiE;CACpE,OACE,oBAACC,SAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,kEACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACA,SAAkB,WAAnB;GACE,aAAU;GACV,WAAW,GACT,kDACA,YAEF;GACA,OAAO;EACR,CAAA;CACqB,CAAA;AAE5B"}

package/dist/core/radio-group.d.mts

@@ -1,7 +1,3 @@
-import * as React$1 from "react";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-//#region src/core/radio-group.d.ts
-declare function RadioGroup({ className, ...props }: React$1.ComponentProps<typeof RadioGroupPrimitive.Root>): React$1.JSX.Element;
-//#endregion
-export { RadioGroup };
-//# sourceMappingURL=radio-group.d.mts.map
+import "react";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";

package/dist/core/radio-group.mjs

@@ -4,38 +4,39 @@ import { cn } from "../utils.mjs";
 import "react";
 import { CircleIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
-import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
 //#region src/core/radio-group.tsx
 var radio_group_exports = /* @__PURE__ */ __exportAll({
-	RadioGroup: () => RadioGroup,
+	RadioGroup: () => RadioGroup$1,
 	RadioGroupItem: () => RadioGroupItem
 });
-function RadioGroup({ className, ...props }) {
-	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, {
+function RadioGroup$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup, {
 		"data-slot": "radio-group",
 		className: cn("grid gap-3", className),
 		...props
 	});
 }
 function RadioGroupItem({ className, ...props }) {
-	return /* @__PURE__ */ jsx(RadioGroupPrimitive.Item, {
+	return /* @__PURE__ */ jsx(Radio.Root, {
 		"data-slot": "radio-group-item",
 		className: cn(`border-input text-primary focus-visible:border-ring
         focus-visible:ring-ring/50 aria-invalid:ring-destructive/20
         dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive
-        dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border
-        shadow-xs transition-[color,box-shadow] outline-none
-        focus-visible:ring-[3px] disabled:cursor-not-allowed
-        disabled:opacity-50`, className),
+        dark:bg-input/30 inline-flex aspect-square size-4 shrink-0 items-center
+        justify-center rounded-full border shadow-xs
+        transition-[color,box-shadow] outline-none focus-visible:ring-[3px]
+        data-disabled:cursor-not-allowed data-disabled:opacity-50`, className),
 		...props,
-		children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, {
+		children: /* @__PURE__ */ jsx(Radio.Indicator, {
 			"data-slot": "radio-group-indicator",
-			className: "relative flex items-center justify-center",
-			children: /* @__PURE__ */ jsx(CircleIcon, { className: "fill-primary absolute top-1/2 left-1/2 size-2\n            -translate-x-1/2 -translate-y-1/2" })
+			className: "flex items-center justify-center",
+			children: /* @__PURE__ */ jsx(CircleIcon, { className: "fill-primary size-2" })
 		})
 	});
 }
 //#endregion
-export { RadioGroup, RadioGroupItem, radio_group_exports };
+export { RadioGroup$1 as RadioGroup, RadioGroupItem, radio_group_exports };
 
 //# sourceMappingURL=radio-group.mjs.map

package/dist/core/radio-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.mjs","names":[],"sources":["../../src/core/radio-group.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport { CircleIcon } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn('grid gap-3', className)}\n      {...props}\n    />\n  );\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        `border-input text-primary focus-visible:border-ring\n        focus-visible:ring-ring/50 aria-invalid:ring-destructive/20\n        dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\n        dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border\n        shadow-xs transition-[color,box-shadow] outline-none\n        focus-visible:ring-[3px] disabled:cursor-not-allowed\n        disabled:opacity-50`,\n        className,\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"relative flex items-center justify-center\"\n      >\n        <CircleIcon\n          className=\"fill-primary absolute top-1/2 left-1/2 size-2\n            -translate-x-1/2 -translate-y-1/2\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem };\n"],"mappings":";;;;;;;;;;;;AASA,SAAS,WAAW,EAClB,WACA,GAAG,SACqD;CACxD,OACE,oBAAC,oBAAoB,MAArB;EACE,aAAU;EACV,WAAW,GAAG,cAAc,SAAS;EACrC,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EACtB,WACA,GAAG,SACqD;CACxD,OACE,oBAAC,oBAAoB,MAArB;EACE,aAAU;EACV,WAAW,GACT;;;;;;8BAOA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,oBAAoB,WAArB;GACE,aAAU;GACV,WAAU;GAEV,UAAA,oBAAC,YAAD,EACE,WAAU,+FAEX,CAAA;EAC4B,CAAA;CACP,CAAA;AAE9B"}
+{"version":3,"file":"radio-group.mjs","names":["RadioGroup","RadioGroupPrimitive","RadioPrimitive"],"sources":["../../src/core/radio-group.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { Radio as RadioPrimitive } from '@base-ui/react/radio';\nimport { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';\nimport { CircleIcon } from 'lucide-react';\n\nimport { cn } from '@repo/ui/utils';\n\n// Base UI primitives with repo-owned styling; no longer vendored from shadcn.\n// Base UI splits Radix's `RadioGroup.Item` into a standalone `Radio.Root`\n// (from `@base-ui/react/radio`) plus a `Radio.Indicator`.\n//\n// `Radio.Root` renders a `<span role=\"radio\">`, where Radix rendered a\n// `<button>`. That matters for centering: a button centers its content through\n// the UA's own anonymous box, so the indicator — which collapses to zero height\n// once its only child is taken out of flow — still landed on the centre line. A\n// span gets no such treatment, so the same markup anchored the dot to the top\n// of the control and it sat 7px high. The root therefore centers explicitly,\n// matching `core/checkbox`, and the dot stays in flow rather than being\n// absolutely positioned against a zero-height parent.\n//\n// Base UI's `RadioGroup` is generic over the item value; this library always\n// addresses items by their stringified value (see atoms/radio), so pin it to\n// `string` — otherwise `React.ComponentProps` erases the generic to `unknown`\n// and `value`/`onValueChange` stop lining up with the string callers.\nfunction RadioGroup({\n  className,\n  ...props\n}: RadioGroupPrimitive.Props<string>) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn('grid gap-3', className)}\n      {...props}\n    />\n  );\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioPrimitive.Root>) {\n  return (\n    <RadioPrimitive.Root\n      data-slot=\"radio-group-item\"\n      className={cn(\n        `border-input text-primary focus-visible:border-ring\n        focus-visible:ring-ring/50 aria-invalid:ring-destructive/20\n        dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\n        dark:bg-input/30 inline-flex aspect-square size-4 shrink-0 items-center\n        justify-center rounded-full border shadow-xs\n        transition-[color,box-shadow] outline-none focus-visible:ring-[3px]\n        data-disabled:cursor-not-allowed data-disabled:opacity-50`,\n        className,\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex items-center justify-center\"\n      >\n        <CircleIcon className=\"fill-primary size-2\" />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  );\n}\n\nexport { RadioGroup, RadioGroupItem };\n"],"mappings":";;;;;;;;;;;;;AA2BA,SAASA,aAAW,EAClB,WACA,GAAG,SACiC;CACpC,OACE,oBAACC,YAAD;EACE,aAAU;EACV,WAAW,GAAG,cAAc,SAAS;EACrC,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EACtB,WACA,GAAG,SACgD;CACnD,OACE,oBAACC,MAAe,MAAhB;EACE,aAAU;EACV,WAAW,GACT;;;;;;oEAOA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACA,MAAe,WAAhB;GACE,aAAU;GACV,WAAU;GAEV,UAAA,oBAAC,YAAD,EAAY,WAAU,sBAAuB,CAAA;EACrB,CAAA;CACP,CAAA;AAEzB"}

package/dist/core/select.d.mts

@@ -1,7 +1,11 @@
 import * as React$1 from "react";
-import * as SelectPrimitive from "@radix-ui/react-select";
+import { Select } from "@base-ui/react/select";
 //#region src/core/select.d.ts
-declare function Select({ ...props }: React$1.ComponentProps<typeof SelectPrimitive.Root>): React$1.JSX.Element;
+type SelectRootProps = Select.Root.Props<string> & {
+  /** Explicit reading direction, retained from the previous Radix API. */
+  dir?: 'ltr' | 'rtl';
+};
+declare function Select$1({ dir, ...props }: SelectRootProps): React$1.JSX.Element;
 //#endregion
-export { Select };
+export { Select$1 as Select };
 //# sourceMappingURL=select.d.mts.map

package/dist/core/select.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.mts","names":[],"sources":["../../src/core/select.tsx"],"mappings":";;;iBA+BS,YACJ,SACF,QAAM,sBAAsB,gBAAgB,QAAK,QAAA,IAAA"}
+{"version":3,"file":"select.d.mts","names":[],"sources":["../../src/core/select.tsx"],"mappings":";;;KAcK,kBAAkB,OAAgB,KAAK;;EAE1C;;iBAGO,WAAS,QAAQ,SAAS,kBAAe,QAAA,IAAA"}