@boyernick/standard-ui-react 0.1.1-canary.2 → 0.1.1-canary.22

package/src/index.ts

@@ -1,5 +1,12 @@
 export { Button, buttonVariants, type ButtonProps } from "./button";
 export { Input, inputVariants, type InputProps } from "./input";
+export {
+  Kbd,
+  KbdGroup,
+  kbdVariants,
+  type KbdGroupProps,
+  type KbdProps,
+} from "./kbd";
 export { Badge, badgeVariants, type BadgeProps } from "./badge";
 export { Switch, type SwitchProps } from "./switch";
 export { Checkbox, type CheckboxProps } from "./checkbox";
@@ -92,17 +99,27 @@ export {
   type AvatarFallbackProps,
 } from "./avatar";
 export { Calendar, type CalendarProps } from "./calendar";
+export {
+  DatePicker,
+  type DatePickerProps,
+  type DatePickerSingleProps,
+  type DatePickerRangeProps,
+} from "./date-picker";
+export type { DateRange } from "react-day-picker";
 export {
   Card,
   CardHeader,
   CardTitle,
   CardDescription,
+  CardAction,
   CardContent,
   CardFooter,
+  cardVariants,
   type CardProps,
   type CardHeaderProps,
   type CardTitleProps,
   type CardDescriptionProps,
+  type CardActionProps,
   type CardContentProps,
   type CardFooterProps,
 } from "./card";
@@ -155,6 +172,7 @@ export {
   CommandItem,
   CommandEmpty,
   CommandTitle,
+  CommandMeta,
   CommandDialogTitle,
   type CommandProps,
   type CommandTriggerProps,
@@ -174,6 +192,7 @@ export {
   type CommandItemProps,
   type CommandEmptyProps,
   type CommandTitleProps,
+  type CommandMetaProps,
   type CommandDialogTitleProps,
 } from "./command";
 export {
@@ -347,6 +366,18 @@ export {
   type FieldsetProps,
   type FieldsetLegendProps,
 } from "./fieldset";
+export {
+  FilterGroup,
+  FilterItem,
+  FilterCount,
+  filterGroupVariants,
+  filterItemVariants,
+  type FilterGroupProps,
+  type FilterItemProps,
+  type FilterCountProps,
+  type FilterGroupVariant,
+  type FilterGroupSize,
+} from "./filter-group";
 export { Form, type FormProps } from "./form";
 export {
   Meter,
@@ -403,19 +434,38 @@ export {
   type MenuViewportProps,
 } from "./menu";
 export { Menubar, type MenubarProps } from "./menubar";
+export {
+  Minimap,
+  minimapVariants,
+  type MinimapProps,
+  type MinimapSection,
+} from "./minimap";
 export {
   NumberField,
   NumberFieldGroup,
   NumberFieldInput,
   NumberFieldIncrement,
   NumberFieldDecrement,
+  NumberFieldStepper,
+  NumberFieldPrefix,
+  NumberFieldSuffix,
   NumberFieldScrubArea,
   NumberFieldScrubAreaCursor,
+  numberFieldAffixVariants,
+  numberFieldControlVariants,
+  numberFieldGroupVariants,
+  numberFieldInputVariants,
+  numberFieldStepperVariants,
+  type NumberFieldSize,
+  type NumberFieldAlign,
   type NumberFieldProps,
   type NumberFieldGroupProps,
   type NumberFieldInputProps,
   type NumberFieldIncrementProps,
   type NumberFieldDecrementProps,
+  type NumberFieldStepperProps,
+  type NumberFieldPrefixProps,
+  type NumberFieldSuffixProps,
   type NumberFieldScrubAreaProps,
   type NumberFieldScrubAreaCursorProps,
 } from "./number-field";
@@ -432,8 +482,18 @@ export {
   NavigationMenuPopup,
   NavigationMenuArrow,
   NavigationMenuLink,
+  NavigationMenuBarLink,
+  NavigationMenuLinkIcon,
+  NavigationMenuLinkTitle,
+  NavigationMenuLinkDescription,
   NavigationMenuIcon,
+  navigationMenuBarItemVariants,
+  navigationMenuLinkVariants,
+  navigationMenuListVariants,
+  navigationMenuRootVariants,
   navigationMenuTriggerClassName,
+  type NavigationMenuVariant,
+  type NavigationMenuSize,
   type NavigationMenuProps,
   type NavigationMenuListProps,
   type NavigationMenuItemProps,
@@ -446,6 +506,10 @@ export {
   type NavigationMenuPopupProps,
   type NavigationMenuArrowProps,
   type NavigationMenuLinkProps,
+  type NavigationMenuBarLinkProps,
+  type NavigationMenuLinkIconProps,
+  type NavigationMenuLinkTitleProps,
+  type NavigationMenuLinkDescriptionProps,
   type NavigationMenuIconProps,
 } from "./navigation-menu";
 export {
@@ -507,6 +571,47 @@ export {
   type ProgressTrackProps,
   type ProgressIndicatorProps,
 } from "./progress";
+export {
+  Questionnaire,
+  QuestionnaireProgress,
+  QuestionnaireItem,
+  QuestionnaireTitle,
+  QuestionnaireDescription,
+  QuestionnaireChoices,
+  QuestionnaireChoice,
+  QuestionnaireChoiceInput,
+  QuestionnaireChoiceLabel,
+  QuestionnaireChoiceShortcut,
+  QuestionnaireInput,
+  QuestionnaireError,
+  QuestionnaireActions,
+  QuestionnairePrevious,
+  QuestionnaireSkip,
+  QuestionnaireNext,
+  QuestionnaireSubmit,
+  type QuestionnaireProps,
+  type QuestionnaireProgressProps,
+  type QuestionnaireItemProps,
+  type QuestionnaireTitleProps,
+  type QuestionnaireDescriptionProps,
+  type QuestionnaireChoicesProps,
+  type QuestionnaireChoiceProps,
+  type QuestionnaireChoiceInputProps,
+  type QuestionnaireChoiceLabelProps,
+  type QuestionnaireChoiceShortcutProps,
+  type QuestionnaireInputProps,
+  type QuestionnaireErrorProps,
+  type QuestionnaireActionsProps,
+  type QuestionnairePreviousProps,
+  type QuestionnaireSkipProps,
+  type QuestionnaireNextProps,
+  type QuestionnaireSubmitProps,
+  type QuestionnaireChoiceDefinition,
+  type QuestionnaireInputType,
+  type QuestionnaireItemDefinition,
+  type QuestionnaireItemStatus,
+  type QuestionnaireShortcutMode,
+} from "./questionnaire";
 export {
   RadioGroup,
   Radio,
@@ -564,11 +669,14 @@ export {
   SliderTrack,
   SliderIndicator,
   SliderThumb,
+  SliderTicks,
+  sliderVariants,
   type SliderProps,
   type SliderControlProps,
   type SliderTrackProps,
   type SliderIndicatorProps,
   type SliderThumbProps,
+  type SliderTicksProps,
 } from "./slider";
 export {
   Tabs,
@@ -576,7 +684,12 @@ export {
   TabsTab,
   TabsIndicator,
   TabsPanel,
+  tabsListVariants,
+  tabsTabVariants,
+  tabsIndicatorVariants,
   type TabsProps,
+  type TabsVariant,
+  type TabsSize,
   type TabsListProps,
   type TabsTabProps,
   type TabsIndicatorProps,
@@ -589,6 +702,8 @@ export {
   ToastViewport,
   ToastRoot,
   ToastContent,
+  ToastIcon,
+  toastRootVariants,
   ToastTitle,
   ToastDescription,
   ToastAction,
@@ -602,6 +717,8 @@ export {
   type ToastViewportProps,
   type ToastRootProps,
   type ToastContentProps,
+  type ToastIconProps,
+  type ToastType,
   type ToastTitleProps,
   type ToastDescriptionProps,
   type ToastActionProps,
@@ -650,6 +767,7 @@ export {
   BreadcrumbLink,
   BreadcrumbPage,
   BreadcrumbSeparator,
+  breadcrumbSeparatorVariants,
   type BreadcrumbProps,
   type BreadcrumbListProps,
   type BreadcrumbItemProps,
@@ -677,14 +795,27 @@ export {
   PaginationLink,
   PaginationPrevious,
   PaginationNext,
+  PaginationFirst,
+  PaginationLast,
   PaginationEllipsis,
+  PaginationStatus,
+  PaginationRange,
+  paginationLinkVariants,
+  paginationDirectionVariants,
   type PaginationProps,
   type PaginationContentProps,
   type PaginationItemProps,
   type PaginationLinkProps,
+  type PaginationButtonProps,
+  type PaginationAnchorProps,
   type PaginationPreviousProps,
   type PaginationNextProps,
+  type PaginationFirstProps,
+  type PaginationLastProps,
   type PaginationEllipsisProps,
+  type PaginationStatusProps,
+  type PaginationRangeProps,
+  type PaginationSize,
 } from "./pagination";
 export {
   Sidebar,
@@ -693,14 +824,20 @@ export {
   SidebarFooter,
   SidebarNav,
   SidebarNavItem,
+  SidebarNavItemLabel,
+  SidebarNavBadge,
   SidebarGroup,
   SidebarGroupLabel,
+  sidebarVariants,
+  sidebarNavItemVariants,
   type SidebarProps,
   type SidebarHeaderProps,
   type SidebarContentProps,
   type SidebarFooterProps,
   type SidebarNavProps,
   type SidebarNavItemProps,
+  type SidebarNavItemLabelProps,
+  type SidebarNavBadgeProps,
   type SidebarGroupProps,
   type SidebarGroupLabelProps,
 } from "./sidebar";
@@ -738,9 +875,15 @@ export {
   ImageModal,
   ImageModalTrigger,
   ImageModalContent,
+  ImageModalGallery,
+  ImageModalGalleryTrigger,
+  imageModalContentVariants,
   type ImageModalProps,
   type ImageModalTriggerProps,
   type ImageModalContentProps,
+  type ImageModalGalleryProps,
+  type ImageModalGalleryTriggerProps,
+  type ImageModalItem,
 } from "./image-modal";
 export {
   Ticker,
@@ -748,6 +891,31 @@ export {
   type TickerProps,
   type TickerItemProps,
 } from "./ticker";
+export {
+  Timeline,
+  TimelineTrack,
+  TimelineItem,
+  TimelineMarker,
+  TimelineTime,
+  TimelineContent,
+  TimelineTitle,
+  TimelineDescription,
+  TimelineMedia,
+  timelineVariants,
+  timelineTrackVariants,
+  timelineItemVariants,
+  timelineMarkerVariants,
+  timelineTimeVariants,
+  type TimelineProps,
+  type TimelineTrackProps,
+  type TimelineItemProps,
+  type TimelineMarkerProps,
+  type TimelineTimeProps,
+  type TimelineContentProps,
+  type TimelineTitleProps,
+  type TimelineDescriptionProps,
+  type TimelineMediaProps,
+} from "./timeline";
 export {
   Table,
   TableHeader,
@@ -757,6 +925,8 @@ export {
   TableHead,
   TableCell,
   TableCaption,
+  tableHeaderVariants,
+  tableVariants,
   type TableProps,
   type TableHeaderProps,
   type TableBodyProps,
@@ -773,6 +943,7 @@ export {
   TooltipPortal,
   TooltipPositioner,
   TooltipPopup,
+  tooltipPopupVariants,
   type TooltipProviderProps,
   type TooltipProps,
   type TooltipTriggerProps,
@@ -784,23 +955,36 @@ export {
   CENTRAL_ICON_SIZE,
   withCentralIconDefaults,
   iconGallery,
+  IconArrowDown,
   IconBell,
+  IconCalendar1,
   IconChainLink1,
   IconCheckmark1,
   IconChevronBottom,
   IconChevronDownSmall,
   IconChevronRightSmall,
+  IconCircleCheck,
+  IconCircleInfo,
   IconClipboard,
   IconCrossSmall,
+  IconDotGrid1x3Horizontal,
+  IconExclamationCircle,
+  IconExclamationTriangle,
+  IconFullScreen,
   IconHome,
   IconMagnifyingGlass,
   IconMinus,
   IconMoon,
+  IconPause,
   IconPeople,
+  IconPlay,
   IconPlus,
   IconSettingsGear1,
   IconSquareBehindSquare6,
+  IconStar,
   IconSun,
+  IconVolumeFull,
+  IconVolumeOff,
   IconX,
   type CentralIconProps,
   type CentralIconComponent,
@@ -821,7 +1005,11 @@ export {
   IllustrationError,
   IllustrationSuccess,
   IllustrationSearch,
+  IllustrationUpload,
+  IllustrationFile,
   type IllustrationProps,
+  type IllustrationFileProps,
+  type FileIllustrationType,
 } from "./illustrations"
 export { BrandMark, BrandWordmark, type BrandMarkProps, type BrandWordmarkProps } from "./brand"
 export {

package/src/input.tsx

@@ -5,7 +5,7 @@ import { forwardRef, type InputHTMLAttributes } from "react"
 import { cn } from "./lib/cn"
 
 const inputVariants = cva(
-  "text-sm flex w-full cursor-text rounded-md text-fg-primary transition-[color,box-shadow] duration-150 ease-out placeholder:text-fg-quaternary outline-none aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50",
+  "text-sm flex w-full cursor-text rounded-md text-fg-primary transition-[color,box-shadow] duration-[var(--duration-sm)] ease-enter placeholder:text-fg-quaternary outline-none aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {

package/src/kbd.tsx

@@ -0,0 +1,49 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+const kbdVariants = cva(
+  // `text-xs` carries the size, line-height and tracking; the weight is set
+  // separately because 600 sits above the 400/500 the type scale defines, so
+  // there is no `-strong` utility to reach for.
+  // The border is bottom-only on purpose: it reads as the lip of a physical
+  // key without boxing the glyph in on all four sides, which at 12px turns a
+  // keycap into a cramped badge.
+  "inline-flex shrink-0 items-center justify-center border-b px-1 font-sans text-xs font-semibold whitespace-nowrap select-none",
+  {
+    variants: {
+      variant: {
+        default: "border-border-primary bg-background-tertiary text-fg-secondary",
+        // The default fill is a light grey that vanishes on a dark surface, so
+        // an inverted keycap tints with the inverted foreground instead. It has
+        // to be that token rather than a literal `white`: the grey ramp flips
+        // under `.dark`, so a hardcoded white wash would sit invisibly on the
+        // now-light inverted surface.
+        inverted: "border-fg-inverted/10 bg-fg-inverted/10 text-fg-inverted",
+      },
+      size: {
+        sm: "h-4 min-w-3.5 rounded-2xs",
+        md: "h-5 min-w-4 rounded-xs",
+      },
+    },
+    defaultVariants: { variant: "default", size: "md" },
+  },
+)
+
+export type KbdProps = ComponentProps<"kbd"> & VariantProps<typeof kbdVariants>
+export type KbdGroupProps = ComponentProps<"span">
+
+/** A single keycap. Presentational — map "cmd" to ⌘ before it gets here. */
+export const Kbd = ({ className, variant, size, ...props }: KbdProps) => (
+  <kbd className={cn(kbdVariants({ variant, size }), className)} {...props} />
+)
+
+/** A full shortcut. Keeps the caps on one line at a consistent gap. */
+export const KbdGroup = ({ className, ...props }: KbdGroupProps) => (
+  <span
+    className={cn("inline-flex items-center gap-1 align-middle", className)}
+    {...props}
+  />
+)
+
+export { kbdVariants }

package/src/lib/motion.ts

@@ -1,23 +1,133 @@
 /**
  * Shared motion classes for StandardUI.
- * Prefer CSS `scale` on centered modals so `translate` centering stays intact.
- * Anchored popups use `transform-origin` from Base UI.
+ *
+ * Every value resolves to a token in `@boyernick/standard-ui-tokens` — the
+ * `--ease-*` ladder and the `--duration-*` scale. Nothing here hardcodes a
+ * curve or a millisecond count.
+ *
+ * The easing ladder is ordered by *onset* — how quickly a transition commits:
+ *
+ *   passive  ambient, system-initiated       (slowest onset)
+ *   enter    surfaces arriving
+ *   move     things travelling across a surface
+ *   snap     direct response to a pointer    (sharpest onset)
+ *
+ * Two kinds of token live here, and they behave differently:
+ *
+ *   Mount tokens  — backdrop, popupCenter, popupAnchor, accordionPanel,
+ *     checkIndicator.
+ *     These carry separate enter and exit behaviour. Base UI flags the exit
+ *     with `data-ending-style`, and the `data-ending-style:` variants below
+ *     re-declare duration and easing for that direction. Exits always run at
+ *     `--duration-exit`, so dismissing anything costs the same no matter how
+ *     long the entrance took.
+ *
+ *   State tokens — tabsIndicator, colors, transform, all.
+ *     These animate between states on a mounted element, so there is no enter
+ *     or exit to distinguish; they take a single curve.
+ *
+ * Fades are linear on purpose. Perceived brightness is already non-linear, so
+ * easing an opacity change makes it look like it sticks at the end.
  */
+
+const DURATION = {
+  xs: "duration-[var(--duration-xs)]",
+  sm: "duration-[var(--duration-sm)]",
+  md: "duration-[var(--duration-md)]",
+  lg: "duration-[var(--duration-lg)]",
+} as const
+
+/** Every exit runs at the same length — see `--duration-exit`. */
+const EXIT_DURATION = "data-ending-style:duration-[var(--duration-exit)]"
+
+const REDUCED = "motion-reduce:transition-none"
+
 export const motion = {
-  backdrop:
-    "transition-opacity duration-150 ease-out motion-reduce:transition-none data-starting-style:opacity-0 data-ending-style:opacity-0",
-  /** Centered dialog / alert — scale property, not transform */
-  popupCenter:
-    "transition-[scale,opacity] duration-150 ease-out motion-reduce:transition-none data-starting-style:scale-[0.96] data-starting-style:opacity-0 data-ending-style:scale-[0.96] data-ending-style:opacity-0",
-  /** Select, tooltip, menus — transform-origin from Base UI */
-  popupAnchor:
-    "origin-[var(--transform-origin)] transition-[transform,scale,opacity] duration-150 ease-out motion-reduce:transition-none data-starting-style:scale-[0.96] data-starting-style:opacity-0 data-ending-style:scale-[0.96] data-ending-style:opacity-0",
-  accordionPanel:
-    "transition-[height] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none data-starting-style:h-0 data-ending-style:h-0",
-  tabsIndicator:
-    "transition-[translate,width] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none",
-  colors: "transition-colors duration-150 ease-out motion-reduce:transition-none",
-  transform:
-    "transition-transform duration-150 ease-out motion-reduce:transition-none",
-  all: "transition-all duration-150 ease-out motion-reduce:transition-none",
+  /** Overlay scrims. Linear both ways — see the note on fades above. */
+  backdrop: [
+    "transition-opacity",
+    DURATION.sm,
+    "ease-linear",
+    REDUCED,
+    "data-starting-style:opacity-0",
+    "data-ending-style:opacity-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-linear",
+  ].join(" "),
+
+  /** Centred dialog / alert — animates `scale`, so translate centring holds. */
+  popupCenter: [
+    "transition-[scale,opacity]",
+    DURATION.md,
+    "ease-enter",
+    REDUCED,
+    "data-starting-style:scale-[0.96] data-starting-style:opacity-0",
+    "data-ending-style:scale-[0.96] data-ending-style:opacity-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-move",
+  ].join(" "),
+
+  /** Select, tooltip, menus — transform-origin comes from Base UI. */
+  popupAnchor: [
+    "origin-[var(--transform-origin)]",
+    "transition-[transform,scale,opacity]",
+    DURATION.sm,
+    "ease-enter",
+    REDUCED,
+    "data-starting-style:scale-[0.96] data-starting-style:opacity-0",
+    "data-ending-style:scale-[0.96] data-ending-style:opacity-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-move",
+  ].join(" "),
+
+  /** Height expand and collapse. */
+  accordionPanel: [
+    "transition-[height]",
+    DURATION.md,
+    "ease-move",
+    REDUCED,
+    "data-starting-style:h-0",
+    "data-ending-style:h-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-move",
+  ].join(" "),
+
+  /** Check and minus glyphs mounting inside a small control. Snaps, because
+   *  it answers a click directly, and scales from the centre so the mark
+   *  reads as landing in the box rather than fading onto it. */
+  checkIndicator: [
+    "transition-[scale,opacity]",
+    DURATION.sm,
+    "ease-snap",
+    REDUCED,
+    "data-starting-style:scale-50 data-starting-style:opacity-0",
+    "data-ending-style:scale-50 data-ending-style:opacity-0",
+    EXIT_DURATION,
+    "data-ending-style:ease-move",
+  ].join(" "),
+
+  /** Sliding tab underline or pill — follows a pointer, so it snaps. */
+  tabsIndicator: [
+    "transition-[translate,width]",
+    DURATION.md,
+    "ease-snap",
+    REDUCED,
+  ].join(" "),
+
+  /** Hover and pressed colour changes. */
+  colors: ["transition-colors", DURATION.sm, "ease-enter", REDUCED].join(" "),
+
+  /** Icon rotates and simple transforms. */
+  transform: [
+    "transition-transform",
+    DURATION.sm,
+    "ease-move",
+    REDUCED,
+  ].join(" "),
+
+  /** Every property. Reach for a narrower token first. */
+  all: ["transition-all", DURATION.sm, "ease-enter", REDUCED].join(" "),
+
+  /** Long, ambient movement — progress fills, meters, background shifts. */
+  passive: ["transition-all", DURATION.lg, "ease-passive", REDUCED].join(" "),
 } as const

package/src/lib/popup.ts

@@ -0,0 +1,45 @@
+/**
+ * Shared surface classes for anchored popups — autocomplete, combobox, select,
+ * menu, context menu, and anything else that floats a panel next to a trigger.
+ *
+ * These live in one place because they have to agree. A popup that picks its
+ * own radius or hairline reads as a different component to the one beside it,
+ * and the drift is invisible until two of them sit on the same page.
+ *
+ * The radii are related, not independent. `item` is nested inside `inset`, so
+ * it follows the nested-radius rule:
+ *
+ *   inner = outer − padding      6px = 12px − 6px
+ *
+ * Change `surface`'s radius or `inset`'s padding and `item` has to move with
+ * it, or the corners stop being concentric. See `.cursor/rules/nested-radius`.
+ */
+
+/** Radius, hairline and elevation. Add `overflow-hidden` where items can reach
+ *  the corners; leave it off panels that nest their own popups.
+ *
+ *  No `border` here on purpose. Every shadow token composes
+ *  `--elevation-hairline`, so `shadow-lg` already draws the edge — and that
+ *  hairline flips colour with the theme (black on light, white on dark) and
+ *  thins to 0.5px on hi-dpi displays. A border on top stacks a second edge
+ *  just outside the first, which reads as one muddy line darker than either,
+ *  and none of that tracking comes with it. Leaving it off also keeps the
+ *  edge out of the box model, so `popupInset` is the whole inset. */
+export const popupSurface = "rounded-xl bg-surface shadow-lg outline-none"
+
+/** Padding around a list of items. Collapses when there is nothing to pad, so
+ *  a sibling empty state is not pushed off-centre by a list of zero items.
+ *
+ *  6px is the whole inset — `popupSurface` carries no border to add to it —
+ *  which is what keeps 12 − 6 = 6 landing exactly on `popupItem`'s radius. */
+export const popupInset = "p-1.5 empty:p-0"
+
+/** One selectable row. */
+export const popupItem =
+  "flex min-h-9 cursor-default items-center gap-2 rounded-sm px-3 py-2 text-sm text-fg-primary outline-none select-none"
+
+/** A group heading. Shares the item's left edge. */
+export const popupLabel = "px-3 py-1.5 text-xs text-fg-tertiary"
+
+/** Empty and status text. Shares the item's left edge. */
+export const popupMessage = "px-3 py-2 text-sm text-fg-tertiary"

package/src/menu.tsx

@@ -5,6 +5,7 @@ import type { ComponentProps } from "react"
 import { IconCheckmark1, IconChevronRightSmall } from "./icons"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
+import { popupInset, popupItem, popupLabel, popupSurface } from "./lib/popup"
 
 export type MenuProps = ComponentProps<typeof BaseMenu.Root>
 export type MenuTriggerProps = ComponentProps<typeof BaseMenu.Trigger>
@@ -34,7 +35,7 @@ export type MenuSubmenuTriggerProps = ComponentProps<
 export type MenuViewportProps = ComponentProps<typeof BaseMenu.Viewport>
 
 const menuItemClassName = cn(
-  "flex min-h-8 cursor-default items-center gap-2 rounded-xs px-2.5 py-1.5 text-sm text-fg-primary outline-none select-none",
+  popupItem,
   motion.colors,
   "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-background-tertiary",
 )
@@ -59,7 +60,7 @@ export const MenuBackdrop = ({ className, ...props }: MenuBackdropProps) => (
 )
 
 export const MenuPositioner = ({
-  sideOffset = 4,
+  sideOffset = 8,
   className,
   ...props
 }: MenuPositionerProps) => (
@@ -73,7 +74,9 @@ export const MenuPositioner = ({
 export const MenuPopup = ({ className, ...props }: MenuPopupProps) => (
   <BaseMenu.Popup
     className={cn(
-      "z-50 min-w-40 overflow-hidden rounded-md border border-border-primary bg-surface p-1 shadow-md outline-none",
+      "z-50 min-w-40 overflow-hidden",
+      popupSurface,
+      popupInset,
       motion.popupAnchor,
       className,
     )}
@@ -123,7 +126,7 @@ export const MenuGroupLabel = ({
   ...props
 }: MenuGroupLabelProps) => (
   <BaseMenu.GroupLabel
-    className={cn("px-2.5 py-1.5 text-xs text-fg-tertiary", className)}
+    className={cn(popupLabel, className)}
     {...props}
   />
 )