shapes-ui 0.4.1 → 0.5.0

package/src/components/ui/menubar.tsx

@@ -3,31 +3,32 @@
 import { Menu as MenuPrimitive } from "@base-ui/react/menu";
 import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar";
 import { ChevronRightIcon, CheckIcon } from "lucide-react";
+import { ComponentProps } from "react";
 
 import { cn } from "@/lib/utils";
 
 function Menubar({ className, ...props }: MenubarPrimitive.Props) {
   return (
     <MenubarPrimitive
-      className={cn("flex h-9 items-center gap-0.5 border bg-background p-1", className)}
+      data-slot="menubar"
+      className={cn("flex h-8 items-center gap-0.5 rounded-lg border bg-background p-1", className)}
       {...props}
     />
   );
 }
 
 function Menu(props: MenuPrimitive.Root.Props) {
-  return <MenuPrimitive.Root {...props} />;
+  return <MenuPrimitive.Root data-slot="menu" {...props} />;
 }
 
 function MenuTrigger({ className, ...props }: MenuPrimitive.Trigger.Props) {
   return (
     <MenuPrimitive.Trigger
-      className={cn("h-full px-4 text-sm hover:bg-accent", className)}
+      className={cn("h-full rounded px-4 text-sm hover:bg-accent", className)}
       {...props}
     />
   );
 }
-
 function MenuPopup({
   className,
   align = "start",
@@ -46,8 +47,9 @@ function MenuPopup({
         alignOffset={alignOffset}
       >
         <MenuPrimitive.Popup
+          data-slot="menu-popup"
           className={cn(
-            "text-popover-foreground z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto bg-popup p-1 shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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",
+            "text-popover-foreground z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-xl bg-popup p-1 shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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",
             className,
           )}
           {...props}
@@ -61,7 +63,7 @@ function MenuGroup({ ...props }: MenuPrimitive.Group.Props) {
   return <MenuPrimitive.Group data-slot="-menu-group" {...props} />;
 }
 
-function MenuGroupLabel({
+function MenuLabel({
   className,
   inset,
   ...props
@@ -70,10 +72,10 @@ function MenuGroupLabel({
 }) {
   return (
     <MenuPrimitive.GroupLabel
-      data-slot="-menu-label"
+      data-slot="menu-label"
       data-inset={inset}
       className={cn(
-        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-[inset]:pl-8",
+        "px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-8",
         className,
       )}
       {...props}
@@ -88,15 +90,15 @@ function MenuItem({
   ...props
 }: MenuPrimitive.Item.Props & {
   inset?: boolean;
-  variant?: "default" | "destructive";
+  variant?: "default" | "destructive" | "success" | "warning";
 }) {
   return (
     <MenuPrimitive.Item
-      data-slot="-menu-item"
+      data-slot="menu-item"
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/-menu-item relative flex cursor-default items-center gap-1.5 px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/-menu-item relative  flex cursor-default items-center gap-1.5 rounded px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-[variant=success]:text-success data-[variant=success]:focus:bg-success/10 data-[variant=success]:focus:text-success data-[variant=warning]:text-warning data-[variant=warning]:focus:bg-warning/10 data-[variant=warning]:focus:text-warning dark:data-[variant=destructive]:focus:bg-destructive/20 dark:data-[variant=success]:focus:bg-success/20 dark:data-[variant=warning]:focus:bg-warning/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
         className,
       )}
       {...props}
@@ -108,6 +110,30 @@ function MenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {
   return <MenuPrimitive.SubmenuRoot data-slot="-menu-sub" {...props} />;
 }
 
+function MenuSubPopup({
+  align = "start",
+  alignOffset = -3,
+  side = "right",
+  sideOffset = 0,
+  className,
+  ...props
+}: React.ComponentProps<typeof MenuPopup>) {
+  return (
+    <MenuPopup
+      data-slot="menu-sub-content"
+      className={cn(
+        "text-popover-foreground w-auto min-w-24 rounded-md bg-popup p-1 shadow-lg ring-1 ring-foreground/10 duration-100 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-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",
+        className,
+      )}
+      align={align}
+      alignOffset={alignOffset}
+      side={side}
+      sideOffset={sideOffset}
+      {...props}
+    />
+  );
+}
+
 function MenuSubTrigger({
   className,
   inset,
@@ -118,7 +144,7 @@ function MenuSubTrigger({
 }) {
   return (
     <MenuPrimitive.SubmenuTrigger
-      data-slot="-menu-sub-trigger"
+      data-slot="menu-sub-trigger"
       data-inset={inset}
       className={cn(
         "flex cursor-default items-center gap-1.5 px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -140,7 +166,7 @@ function MenuCheckboxItem({
 }: MenuPrimitive.CheckboxItem.Props) {
   return (
     <MenuPrimitive.CheckboxItem
-      data-slot="-menu-checkbox-item"
+      data-slot="menu-checkbox-item"
       className={cn(
         "relative flex cursor-default items-center gap-1.5 py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
@@ -159,13 +185,13 @@ function MenuCheckboxItem({
 }
 
 function MenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
-  return <MenuPrimitive.RadioGroup data-slot="-menu-radio-group" {...props} />;
+  return <MenuPrimitive.RadioGroup data-slot="menu-radio-group" {...props} />;
 }
 
 function MenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioItem.Props) {
   return (
     <MenuPrimitive.RadioItem
-      data-slot="-menu-radio-item"
+      data-slot="menu-radio-item"
       className={cn(
         "relative flex cursor-default items-center gap-1.5 py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
@@ -185,25 +211,33 @@ function MenuRadioItem({ className, children, ...props }: MenuPrimitive.RadioIte
 function MenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props) {
   return (
     <MenuPrimitive.Separator
-      data-slot="-menu-separator"
-      className={cn("-mx-1 my-1 h-full w-px bg-border", className)}
+      data-slot="menu-separator"
+      className={cn("-mx-1 my-1 h-px bg-border", className)}
       {...props}
     />
   );
 }
 
+function MenuShortcut({ className, ...props }: ComponentProps<"span">) {
+  return (
+    <span className={cn("ml-auto text-xs font-thin text-muted-foreground", className)} {...props} />
+  );
+}
+
 export {
   Menubar,
   Menu,
   MenuTrigger,
   MenuPopup,
   MenuGroup,
-  MenuGroupLabel,
+  MenuLabel,
   MenuItem,
   MenuSub,
+  MenuSubPopup,
   MenuSubTrigger,
   MenuCheckboxItem,
   MenuRadioGroup,
   MenuRadioItem,
   MenuSeparator,
+  MenuShortcut,
 };

package/src/components/ui/meter.tsx

@@ -4,44 +4,32 @@ import { Meter as MeterPrimitive } from "@base-ui/react/meter";
 
 import { cn } from "@/lib/utils";
 
-function Meter({
-  label,
-  showLabel,
-  showValue,
-  className,
-  ...props
-}: MeterPrimitive.Root.Props & {
-  showValue?: boolean;
-  showLabel?: boolean;
-  label?: string;
-}) {
-  return (
-    <MeterPrimitive.Root className={cn("grid w-80 grid-cols-2 gap-1", className)} {...props}>
-      {showLabel && label && <MeterLabel>{label}</MeterLabel>}
-      {showValue && <MeterValue />}
-      <MeterTrack>
-        <MeterIndicator />
-      </MeterTrack>
-    </MeterPrimitive.Root>
-  );
+function Meter({ className, ...props }: MeterPrimitive.Root.Props) {
+  return <MeterPrimitive.Root className={cn("grid grid-cols-2 gap-1", className)} {...props} />;
 }
 
 function MeterLabel({ className, ...props }: MeterPrimitive.Label.Props) {
   return (
-    <MeterPrimitive.Label className={cn("text-xs font-bold text-primary", className)} {...props} />
+    <MeterPrimitive.Label
+      className={cn("col-span-1 text-xs font-bold text-primary", className)}
+      {...props}
+    />
   );
 }
 
 function MeterValue({ className, ...props }: MeterPrimitive.Value.Props) {
   return (
-    <MeterPrimitive.Value className={cn("text-right text-xs text-primary", className)} {...props} />
+    <MeterPrimitive.Value
+      className={cn("col-span-1 text-right text-xs text-primary", className)}
+      {...props}
+    />
   );
 }
 
 function MeterTrack({ className, ...props }: MeterPrimitive.Track.Props) {
   return (
     <MeterPrimitive.Track
-      className={cn("col-span-2 block h-2 overflow-hidden bg-primary/20", className)}
+      className={cn("col-span-2 h-2 w-full overflow-hidden rounded-full bg-primary/20", className)}
       {...props}
     />
   );
@@ -50,7 +38,7 @@ function MeterTrack({ className, ...props }: MeterPrimitive.Track.Props) {
 function MeterIndicator({ className, ...props }: MeterPrimitive.Indicator.Props) {
   return (
     <MeterPrimitive.Indicator
-      className={cn("block rounded-r-xl bg-primary", className)}
+      className={cn("block rounded-full bg-primary", className)}
       {...props}
     />
   );

package/src/components/ui/navigation-menu.tsx

@@ -2,31 +2,49 @@
 
 import { NavigationMenu as NavigationMenuPrimitive } from "@base-ui/react/navigation-menu";
 import { ChevronDownIcon } from "lucide-react";
-import type React from "react";
 
 import { cn } from "@/lib/utils";
 
-function NavigationMenu(props: NavigationMenuPrimitive.Root.Props) {
-  return <NavigationMenuPrimitive.Root {...props} />;
-}
-
-function NavigationMenuList({
+function NavigationMenu({
   className,
+  delay = 50,
+  closeDelay = 50,
+  orientation = "horizontal",
   ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+}: NavigationMenuPrimitive.Root.Props) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      delay={delay}
+      closeDelay={closeDelay}
+      orientation={orientation}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuList({ className, ...props }: NavigationMenuPrimitive.List.Props) {
   return (
     <NavigationMenuPrimitive.List
-      className={cn("flex items-center gap-0.5", className)}
+      data-slot="navigation-menu-list"
+      className={cn("group flex flex-1 list-none items-center justify-center gap-1", className)}
       {...props}
     />
   );
 }
 
-function NavigationMenuItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
-  return <NavigationMenuPrimitive.Item className={cn(className)} {...props} />;
+function NavigationMenuItem({ className, ...props }: NavigationMenuPrimitive.Item.Props) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  );
 }
 
 function NavigationMenuTrigger({
@@ -36,61 +54,125 @@ function NavigationMenuTrigger({
 }: NavigationMenuPrimitive.Trigger.Props) {
   return (
     <NavigationMenuPrimitive.Trigger
-      className={cn("group h-full px-3 py-1.5 text-sm font-medium hover:bg-accent/60", className)}
+      data-slot="navigation-menu-trigger"
+      className={cn(
+        "group/navigation-menu-trigger relative inline-flex h-9 w-max items-center justify-center rounded-lg bg-background px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[popup-open]:bg-muted/50 data-[popup-open]:hover:bg-muted",
+        className,
+      )}
       {...props}
     >
       {children}
-      <ChevronDownIcon className="ml-1 inline-block size-3 transition-all ease-in group-data-popup-open:rotate-180" />
+      <NavigationMenuPrimitive.Icon
+        render={
+          <ChevronDownIcon
+            className="relative top-px ml-1 size-3 transition-transform duration-300 group-data-[popup-open]/navigation-menu-trigger:rotate-180"
+            aria-hidden="true"
+          />
+        }
+      />
     </NavigationMenuPrimitive.Trigger>
   );
 }
 
-function NavigationMenuContent(props: NavigationMenuPrimitive.Content.Props) {
-  return <NavigationMenuPrimitive.Content {...props} />;
-}
-
-function NavigationMenuLink(props: NavigationMenuPrimitive.Link.Props) {
-  return <NavigationMenuPrimitive.Link {...props} />;
+function NavigationMenuContent({ className, ...props }: NavigationMenuPrimitive.Content.Props) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "flex h-full w-auto p-1 transition-[opacity,transform,translate] duration-[350ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[ending-style]:opacity-0 data-[ending-style]:data-[activation-direction=left]:translate-x-1/2 data-[ending-style]:data-[activation-direction=right]:-translate-x-1/2 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none data-[starting-style]:opacity-0 data-[starting-style]:data-[activation-direction=left]:-translate-x-1/2 data-[starting-style]:data-[activation-direction=right]:translate-x-1/2",
+        className,
+      )}
+      {...props}
+    />
+  );
 }
 
 function NavigationMenuPopup({
+  className,
+  sideOffset = 10,
   align = "start",
-  alignOffset,
+  collisionPadding = 10,
   side = "bottom",
-  sideOffset = 8,
-  className,
-  renderViewport = true,
+  anchor,
   children,
   ...props
 }: NavigationMenuPrimitive.Popup.Props &
   Pick<
     NavigationMenuPrimitive.Positioner.Props,
-    "sideOffset" | "alignOffset" | "align" | "side"
-  > & {
-    renderViewport?: boolean;
-  }) {
+    "sideOffset" | "align" | "collisionPadding" | "side" | "anchor"
+  >) {
   return (
-    <NavigationMenuPrimitive.Portal keepMounted>
+    <NavigationMenuPrimitive.Portal>
       <NavigationMenuPrimitive.Positioner
-        align={align}
-        alignOffset={alignOffset}
         side={side}
         sideOffset={sideOffset}
+        align={align}
+        collisionPadding={collisionPadding}
+        anchor={anchor}
+        className={
+          "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[350ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[instant]:transition-none"
+        }
       >
         <NavigationMenuPrimitive.Popup
-          className={cn("bg-popup p-2 shadow outline outline-border", className)}
           {...props}
+          data-slot="navigation-menu-popup"
+          className={cn(
+            "relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) overflow-hidden rounded-lg bg-popup text-popup-foreground shadow ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[350ms] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-in data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+            className,
+          )}
         >
-          {children}
-          {renderViewport && <NavigationMenuViewPort />}
+          {children || <NavigationMenuViewport />}
         </NavigationMenuPrimitive.Popup>
       </NavigationMenuPrimitive.Positioner>
     </NavigationMenuPrimitive.Portal>
   );
 }
 
-function NavigationMenuViewPort(props: NavigationMenuPrimitive.Viewport.Props) {
-  return <NavigationMenuPrimitive.Viewport {...props} />;
+function NavigationMenuViewport({ className, ...props }: NavigationMenuPrimitive.Viewport.Props) {
+  return (
+    <NavigationMenuPrimitive.Viewport
+      data-slot="navigation-menu-viewport"
+      className={cn("relative size-full overflow-hidden", className)}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuLink({ className, ...props }: NavigationMenuPrimitive.Link.Props) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "flex flex-col items-start gap-1 rounded-md p-2 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 data-[active]:bg-muted/50 data-[active]:hover:bg-muted data-[active]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuArrow({ className, ...props }: NavigationMenuPrimitive.Arrow.Props) {
+  return (
+    <NavigationMenuPrimitive.Arrow
+      data-slot="navigation-menu-arrow"
+      className={cn(
+        "transition-transform duration-[350ms] ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      <svg width="20" height="10" viewBox="0 0 20 10" fill="none">
+        <path
+          d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
+          className="fill-popup"
+        />
+        <path
+          d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
+          className="fill-foreground/10"
+        />
+      </svg>
+    </NavigationMenuPrimitive.Arrow>
+  );
 }
 
 export {
@@ -101,5 +183,6 @@ export {
   NavigationMenuContent,
   NavigationMenuLink,
   NavigationMenuPopup,
-  NavigationMenuViewPort,
+  NavigationMenuViewport,
+  NavigationMenuArrow,
 };

package/src/components/ui/number-field.tsx

@@ -1,44 +1,11 @@
 "use client";
 
 import { NumberField as NumberFieldPrimitive } from "@base-ui/react/number-field";
-import { ChevronsLeftRightEllipsis, MinusIcon, PlusIcon } from "lucide-react";
+import { MinusIcon, PlusIcon } from "lucide-react";
 
 import { cn } from "@/lib/utils";
 
-function NumberField({
-  label,
-  hasScrubber = false,
-  className,
-  ...props
-}: NumberFieldPrimitive.Root.Props & {
-  label?: string;
-  hasScrubber?: boolean;
-}) {
-  return (
-    <NumberFieldPrimitive.Root
-      className={cn("flex w-fit flex-col bg-transparent text-foreground", className)}
-      {...props}
-    >
-      {hasScrubber && (
-        <NumberFieldScrubArea>
-          {label && (
-            <label htmlFor={props.id} className="text-sm font-medium">
-              {label}
-            </label>
-          )}
-          <NumberFieldScrubAreaCursor>
-            <ChevronsLeftRightEllipsis className="size-4" />
-          </NumberFieldScrubAreaCursor>
-        </NumberFieldScrubArea>
-      )}
-      <NumberFieldGroup>
-        <NumberFieldDecrement />
-        <NumberFieldInput />
-        <NumberFieldIncrement />
-      </NumberFieldGroup>
-    </NumberFieldPrimitive.Root>
-  );
-}
+import { Input } from "./input";
 
 function NumberFieldScrubArea({ className, ...props }: NumberFieldPrimitive.ScrubArea.Props) {
   return <NumberFieldPrimitive.ScrubArea className={cn("", className)} {...props} />;
@@ -53,36 +20,66 @@ function NumberFieldScrubAreaCursor({
   );
 }
 
+function NumberField({ className, ...props }: NumberFieldPrimitive.Root.Props) {
+  return (
+    <NumberFieldPrimitive.Root
+      data-slot="number-field"
+      className={cn("group/number-field flex flex-col gap-1.5", className)}
+      {...props}
+    />
+  );
+}
+
 function NumberFieldGroup({ className, ...props }: NumberFieldPrimitive.Group.Props) {
   return (
     <NumberFieldPrimitive.Group
-      className={cn("flex overflow-hidden border bg-transparent", className)}
+      data-slot="number-field-group"
+      className={cn(
+        "relative inline-flex h-9 w-full items-stretch overflow-hidden rounded-lg border border-input focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:rounded-none has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:border-0 has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:outline-none has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:focus:ring-0 has-[>[data-slot=number-field-decrement]]:*:data-[slot=number-field-input]:focus:outline-none",
+        "has-[>[data-slot=number-field-decrement][data-align=end]]:*:data-[slot=number-field-decrement]:border-l has-[>[data-slot=number-field-decrement][data-align=start]]:*:data-[slot=number-field-decrement]:border-r has-[>[data-slot=number-field-increment][data-align=end]]:*:data-[slot=number-field-increment]:border-l ",
+        className,
+      )}
       {...props}
     />
   );
 }
 
-function NumberFieldDecrement({ className, ...props }: NumberFieldPrimitive.Decrement.Props) {
+function NumberFieldDecrement({
+  className,
+  align,
+  ...props
+}: NumberFieldPrimitive.Decrement.Props & { align?: "start" | "end" }) {
   return (
     <NumberFieldPrimitive.Decrement
+      data-slot="number-field-decrement"
+      data-align={align}
       className={cn(
-        "flex size-9 items-center justify-center rounded-l-lg border-r hover:bg-accent",
+        "px-2.5 transition-colors hover:bg-muted active:bg-accent disabled:opacity-50",
         className,
       )}
       {...props}
     >
-      <MinusIcon className="inline-flex size-4" />
+      <MinusIcon className="size-4" />
     </NumberFieldPrimitive.Decrement>
   );
 }
 
-function NumberFieldIncrement({ className, ...props }: NumberFieldPrimitive.Increment.Props) {
+function NumberFieldIncrement({
+  className,
+  align,
+  ...props
+}: NumberFieldPrimitive.Increment.Props & { align?: "start" | "end" }) {
   return (
     <NumberFieldPrimitive.Increment
-      className={cn("flex size-9 items-center justify-center border-l hover:bg-accent", className)}
+      data-slot="number-field-increment"
+      data-align={align}
+      className={cn(
+        "px-2.5 transition-colors hover:bg-muted active:bg-accent disabled:opacity-50",
+        className,
+      )}
       {...props}
     >
-      <PlusIcon className="inline-flex size-4" />
+      <PlusIcon className="size-4" />
     </NumberFieldPrimitive.Increment>
   );
 }
@@ -90,10 +87,9 @@ function NumberFieldIncrement({ className, ...props }: NumberFieldPrimitive.Incr
 function NumberFieldInput({ className, ...props }: NumberFieldPrimitive.Input.Props) {
   return (
     <NumberFieldPrimitive.Input
-      className={cn(
-        "h-9 rounded-none text-center text-sm ring-accent outline-0 data-scrubbing:border-0 data-scrubbing:outline-0",
-        className,
-      )}
+      data-slot="number-field-input"
+      className={cn("text-center", className)}
+      render={<Input />}
       {...props}
     />
   );

package/src/components/ui/popover.tsx

@@ -18,9 +18,13 @@ function PopoverPopup({
   alignOffset = 0,
   side = "bottom",
   sideOffset = 8,
+  anchor,
   ...props
 }: PopoverPrimitive.Popup.Props &
-  Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+  Pick<
+    PopoverPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset" | "anchor"
+  >) {
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Positioner
@@ -28,11 +32,12 @@ function PopoverPopup({
         alignOffset={alignOffset}
         side={side}
         sideOffset={sideOffset}
+        anchor={anchor}
         className="isolate z-50"
       >
         <PopoverPrimitive.Popup
           className={cn(
-            "text-popover-foreground z-50 flex w-72 flex-col gap-2.5 bg-popup p-4 text-sm ring-1 ring-foreground/10 outline-hidden duration-100 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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",
+            "text-popover-foreground z-50 flex w-72 flex-col gap-2.5 rounded-lg bg-popup p-4 text-sm ring-1 ring-foreground/10 outline-hidden duration-100 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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",
             className,
           )}
           {...props}

package/src/components/ui/preview-card.tsx

@@ -26,9 +26,10 @@ function PreviewCardPopup({
   side = "bottom",
   sideOffset = 6,
   alignOffset,
+  anchor,
   ...props
 }: PreviewCardPrimitive.Popup.Props &
-  Pick<PreviewCardPrimitive.Positioner.Props, "align" | "sideOffset" | "side" | "alignOffset">) {
+  Pick<PreviewCardPrimitive.Positioner.Props, "align" | "sideOffset" | "side" | "alignOffset" | "anchor">) {
   return (
     <PreviewCardPrimitive.Portal>
       <PreviewCardPrimitive.Positioner
@@ -36,10 +37,11 @@ function PreviewCardPopup({
         sideOffset={sideOffset}
         side={side}
         alignOffset={alignOffset}
+        anchor={anchor}
       >
         <PreviewCardPrimitive.Popup
           className={cn(
-            "text-popover-foreground overflow-hidden border bg-popup p-1 text-sm outline-hidden duration-25 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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",
+            "text-popover-foreground overflow-hidden rounded-xl border bg-popup p-1 text-sm outline-hidden duration-25 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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",
             className,
           )}
           {...props}