@boyernick/standard-ui-react 0.1.1-canary.5 → 0.1.1-canary.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boyernick/standard-ui-react",
-  "version": "0.1.1-canary.5",
+  "version": "0.1.1-canary.7",
   "description": "React components for StandardUI",
   "license": "MIT",
   "type": "module",

package/src/autocomplete.tsx

@@ -5,6 +5,7 @@ import type { ComponentProps, ReactElement } from "react"
 import { IconChevronDownSmall, IconCrossSmall } from "./icons"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
+import { popupInset, popupItem, popupLabel, popupMessage, popupSurface } from "./lib/popup"
 
 export type AutocompleteProps = ComponentProps<typeof BaseAutocomplete.Root>
 export type AutocompleteValueProps = ComponentProps<typeof BaseAutocomplete.Value>
@@ -167,7 +168,8 @@ export const AutocompletePopup = ({
 }: AutocompletePopupProps) => (
   <BaseAutocomplete.Popup
     className={cn(
-      "z-50 max-h-[min(24rem,var(--available-height))] w-[var(--anchor-width)] overflow-hidden rounded-xl border border-border-primary-solid bg-surface shadow-lg outline-none",
+      "z-50 max-h-[min(24rem,var(--available-height))] w-[var(--anchor-width)] overflow-hidden",
+      popupSurface,
       motion.popupAnchor,
       className,
     )}
@@ -198,7 +200,7 @@ export const AutocompleteList = ({
   ...props
 }: AutocompleteListProps) => (
   <BaseAutocomplete.List
-    className={cn("max-h-[inherit] overflow-y-auto p-1.5 outline-none empty:p-0", className)}
+    className={cn("max-h-[inherit] overflow-y-auto outline-none", popupInset, className)}
     {...props}
   />
 )
@@ -209,7 +211,7 @@ export const AutocompleteItem = ({
 }: AutocompleteItemProps) => (
   <BaseAutocomplete.Item
     className={cn(
-      "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",
+      popupItem,
       motion.colors,
       "data-disabled:cursor-not-allowed data-disabled:opacity-50 data-highlighted:bg-background-tertiary data-highlighted:text-fg-primary",
       className,
@@ -223,7 +225,7 @@ export const AutocompleteEmpty = ({
   ...props
 }: AutocompleteEmptyProps) => (
   <BaseAutocomplete.Empty
-    className={cn("px-3 py-2 text-sm text-fg-tertiary empty:hidden", className)}
+    className={cn(cn(popupMessage, "empty:hidden"), className)}
     {...props}
   />
 )
@@ -233,7 +235,7 @@ export const AutocompleteStatus = ({
   ...props
 }: AutocompleteStatusProps) => (
   <BaseAutocomplete.Status
-    className={cn("px-3 py-2 text-sm text-fg-tertiary", className)}
+    className={cn(popupMessage, className)}
     {...props}
   />
 )
@@ -250,7 +252,7 @@ export const AutocompleteGroupLabel = ({
   ...props
 }: AutocompleteGroupLabelProps) => (
   <BaseAutocomplete.GroupLabel
-    className={cn("px-3 py-1.5 text-xs text-fg-tertiary", className)}
+    className={cn(popupLabel, className)}
     {...props}
   />
 )

package/src/collapsible.tsx

@@ -25,7 +25,7 @@ export const CollapsibleTrigger = ({
     className={cn(
       "group flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-border-secondary bg-surface px-3 text-sm text-fg-primary inset-shadow-outline-top outline-none",
       motion.colors,
-      "hover:bg-background-tertiary outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      "outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-disabled:cursor-not-allowed data-disabled:opacity-50",
       className,
     )}
     {...props}
@@ -56,6 +56,8 @@ export const CollapsiblePanel = ({
     )}
     {...props}
   >
-    <div className="pt-2 leading-relaxed">{children}</div>
+    {/* px-3 matches the trigger's own padding, so the panel copy lines up
+        under the trigger's label instead of starting at the panel edge. */}
+    <div className="px-3 pt-2 leading-relaxed">{children}</div>
   </BaseCollapsible.Panel>
 )

package/src/combobox.tsx

@@ -5,6 +5,7 @@ import type { ComponentProps, ReactElement } from "react"
 import { IconChevronDownSmall, IconCrossSmall } from "./icons"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
+import { popupInset, popupItem, popupLabel, popupMessage, popupSurface } from "./lib/popup"
 
 export type ComboboxProps<
   Value,
@@ -77,7 +78,6 @@ export const ComboboxInputGroup = ({
   <BaseCombobox.InputGroup
     className={cn(
       "relative flex min-h-9 w-full items-center rounded-md border border-border-secondary bg-surface inset-shadow-outline-top outline-none transition-[color,box-shadow]",
-      "has-[[data-popup-open]]:bg-background-tertiary/60",
       "focus-within:border-ring focus-within:ring-[3px] focus-within:ring-offset-1 focus-within:ring-offset-background-primary focus-within:ring-ring/20",
       "aria-invalid:border-destructive aria-invalid:focus-within:border-destructive aria-invalid:focus-within:ring-destructive/20",
       "has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:focus-within:border-destructive has-[[aria-invalid=true]]:focus-within:ring-destructive/20",
@@ -139,7 +139,7 @@ export const ComboboxClear = ({
     {...props}
   >
     {children ?? (
-      <IconCrossSmall size={14} className="size-3.5" aria-hidden />
+      <IconCrossSmall size={16} className="size-4" aria-hidden />
     )}
   </BaseCombobox.Clear>
 )
@@ -160,7 +160,7 @@ export const ComboboxBackdrop = ({
 )
 
 export const ComboboxPositioner = ({
-  sideOffset = 4,
+  sideOffset = 6,
   className,
   ...props
 }: ComboboxPositionerProps) => (
@@ -174,7 +174,8 @@ export const ComboboxPositioner = ({
 export const ComboboxPopup = ({ className, ...props }: ComboboxPopupProps) => (
   <BaseCombobox.Popup
     className={cn(
-      "z-50 max-h-[min(24rem,var(--available-height))] w-[var(--anchor-width)] overflow-hidden rounded-md border border-border-primary bg-surface shadow-md outline-none",
+      "z-50 max-h-[min(24rem,var(--available-height))] w-[var(--anchor-width)] overflow-hidden",
+      popupSurface,
       motion.popupAnchor,
       className,
     )}
@@ -199,7 +200,7 @@ export const ComboboxArrow = ({ className, ...props }: ComboboxArrowProps) => (
 
 export const ComboboxList = ({ className, ...props }: ComboboxListProps) => (
   <BaseCombobox.List
-    className={cn("max-h-[inherit] overflow-y-auto p-1 outline-none", className)}
+    className={cn("max-h-[inherit] overflow-y-auto outline-none", popupInset, className)}
     {...props}
   />
 )
@@ -207,7 +208,7 @@ export const ComboboxList = ({ className, ...props }: ComboboxListProps) => (
 export const ComboboxItem = ({ className, ...props }: ComboboxItemProps) => (
   <BaseCombobox.Item
     className={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 data-highlighted:text-fg-primary",
       className,
@@ -238,14 +239,14 @@ export const ComboboxItemIndicator = ({
 
 export const ComboboxEmpty = ({ className, ...props }: ComboboxEmptyProps) => (
   <BaseCombobox.Empty
-    className={cn("px-2.5 py-2 text-sm text-fg-tertiary empty:hidden", className)}
+    className={cn(cn(popupMessage, "empty:hidden"), className)}
     {...props}
   />
 )
 
 export const ComboboxStatus = ({ className, ...props }: ComboboxStatusProps) => (
   <BaseCombobox.Status
-    className={cn("px-2.5 py-2 text-sm text-fg-tertiary", className)}
+    className={cn(popupMessage, className)}
     {...props}
   />
 )
@@ -259,7 +260,7 @@ export const ComboboxGroupLabel = ({
   ...props
 }: ComboboxGroupLabelProps) => (
   <BaseCombobox.GroupLabel
-    className={cn("px-2.5 py-1.5 text-xs text-fg-tertiary", className)}
+    className={cn(popupLabel, className)}
     {...props}
   />
 )
@@ -291,7 +292,7 @@ export const ComboboxChips = ({ className, ...props }: ComboboxChipsProps) => (
 export const ComboboxChip = ({ className, ...props }: ComboboxChipProps) => (
   <BaseCombobox.Chip
     className={cn(
-      "inline-flex h-6 items-center gap-1 rounded-xs bg-background-tertiary px-1.5 text-xs text-fg-primary",
+      "inline-flex h-6 items-center gap-1 rounded-xs bg-background-tertiary px-1.5 text-xs-strong text-fg-primary",
       className,
     )}
     {...props}
@@ -305,13 +306,13 @@ export const ComboboxChipRemove = ({
 }: ComboboxChipRemoveProps) => (
   <BaseCombobox.ChipRemove
     className={cn(
-      "inline-flex size-3.5 cursor-pointer items-center justify-center text-fg-tertiary outline-none hover:text-fg-primary focus-visible:outline-none",
+      "inline-flex size-3.5 cursor-pointer items-center justify-center text-fg-primary outline-none focus-visible:outline-none",
       className,
     )}
     {...props}
   >
     {children ?? (
-      <IconCrossSmall size={12} className="size-3" aria-hidden />
+      <IconCrossSmall size={14} className="size-3.5" aria-hidden />
     )}
   </BaseCombobox.ChipRemove>
 )

package/src/context-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 ContextMenuProps = ComponentProps<typeof BaseContextMenu.Root>
 export type ContextMenuTriggerProps = ComponentProps<
@@ -53,7 +54,7 @@ export type ContextMenuSubmenuTriggerProps = ComponentProps<
 >
 
 const itemClassName = 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",
 )
@@ -100,7 +101,9 @@ export const ContextMenuPopup = ({
 }: ContextMenuPopupProps) => (
   <BaseContextMenu.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,
     )}
@@ -165,7 +168,7 @@ export const ContextMenuGroupLabel = ({
   ...props
 }: ContextMenuGroupLabelProps) => (
   <BaseContextMenu.GroupLabel
-    className={cn("px-2.5 py-1.5 text-xs text-fg-tertiary", className)}
+    className={cn(popupLabel, className)}
     {...props}
   />
 )

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 h-8 cursor-default items-center gap-2 rounded-sm 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",
 )
@@ -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-xl border border-[var(--border-faint)] bg-surface p-1.5 shadow-lg 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}
   />
 )

package/src/navigation-menu.tsx

@@ -5,6 +5,7 @@ import type { ComponentProps } from "react"
 import { IconChevronDownSmall } from "./icons"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
+import { popupSurface } from "./lib/popup"
 
 export type NavigationMenuProps = ComponentProps<typeof BaseNavigationMenu.Root>
 export type NavigationMenuListProps = ComponentProps<
@@ -177,7 +178,8 @@ export const NavigationMenuPopup = ({
 }: NavigationMenuPopupProps) => (
   <BaseNavigationMenu.Popup
     className={cn(
-      "relative z-50 w-[var(--popup-width)] overflow-hidden rounded-xl border border-border-primary bg-surface shadow-md outline-none",
+      "relative z-50 w-[var(--popup-width)] overflow-hidden",
+      popupSurface,
       "h-[var(--popup-height)] transition-[width,height,opacity] duration-[var(--duration-md)] ease-enter motion-reduce:transition-none",
       "data-starting-style:opacity-0 data-ending-style:opacity-0",
       className,

package/src/popover.tsx

@@ -4,6 +4,7 @@ import { Popover as BasePopover } from "@base-ui/react/popover"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
+import { popupSurface } from "./lib/popup"
 
 export type PopoverProps = ComponentProps<typeof BasePopover.Root>
 export type PopoverTriggerProps = ComponentProps<typeof BasePopover.Trigger>
@@ -47,7 +48,8 @@ export const PopoverPositioner = ({
 export const PopoverPopup = ({ className, ...props }: PopoverPopupProps) => (
   <BasePopover.Popup
     className={cn(
-      "z-50 flex w-72 flex-col gap-1 rounded-xl border border-border-primary bg-surface p-4 shadow-md outline-none",
+      "z-50 flex w-72 flex-col gap-1 p-4",
+      popupSurface,
       motion.popupAnchor,
       className,
     )}

package/src/preview-card.tsx

@@ -4,6 +4,7 @@ import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
+import { popupSurface } from "./lib/popup"
 
 export type PreviewCardProps = ComponentProps<typeof BasePreviewCard.Root>
 export type PreviewCardTriggerProps = ComponentProps<
@@ -67,7 +68,8 @@ export const PreviewCardPopup = ({
 }: PreviewCardPopupProps) => (
   <BasePreviewCard.Popup
     className={cn(
-      "z-50 w-72 overflow-hidden rounded-xl border border-border-primary bg-surface p-4 shadow-md outline-none",
+      "z-50 w-72 overflow-hidden p-4",
+      popupSurface,
       motion.popupAnchor,
       className,
     )}

package/src/select.tsx

@@ -5,6 +5,7 @@ import type { ComponentProps } from "react"
 import { IconChevronDownSmall } from "./icons"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
+import { popupInset, popupItem, popupLabel, popupSurface } from "./lib/popup"
 
 export type SelectProps = ComponentProps<typeof BaseSelect.Root>
 export type SelectTriggerProps = ComponentProps<typeof BaseSelect.Trigger>
@@ -33,7 +34,7 @@ export const SelectTrigger = ({
     className={cn(
       "flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-border-secondary bg-surface px-3 text-sm text-fg-primary inset-shadow-outline-top outline-none",
       motion.all,
-      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-placeholder:text-fg-quaternary data-popup-open:border-border-secondary data-popup-open:bg-background-tertiary/60",
+      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-placeholder:text-fg-quaternary data-popup-open:border-border-secondary",
       className,
     )}
     {...props}
@@ -71,7 +72,7 @@ export const SelectPortal = (props: SelectPortalProps) => (
 
 export const SelectPositioner = ({
   alignItemWithTrigger = false,
-  sideOffset = 4,
+  sideOffset = 6,
   className,
   ...props
 }: SelectPositionerProps) => (
@@ -86,7 +87,8 @@ export const SelectPositioner = ({
 export const SelectPopup = ({ className, ...props }: SelectPopupProps) => (
   <BaseSelect.Popup
     className={cn(
-      "z-50 max-h-[min(24rem,var(--available-height))] w-[var(--anchor-width)] overflow-hidden rounded-md border border-border-primary bg-surface shadow-md outline-none",
+      "z-50 max-h-[min(24rem,var(--available-height))] w-[var(--anchor-width)] overflow-hidden",
+      popupSurface,
       motion.popupAnchor,
       className,
     )}
@@ -96,7 +98,7 @@ export const SelectPopup = ({ className, ...props }: SelectPopupProps) => (
 
 export const SelectList = ({ className, ...props }: SelectListProps) => (
   <BaseSelect.List
-    className={cn("max-h-[inherit] overflow-y-auto p-1 outline-none", className)}
+    className={cn("max-h-[inherit] overflow-y-auto outline-none", popupInset, className)}
     {...props}
   />
 )
@@ -104,7 +106,7 @@ export const SelectList = ({ className, ...props }: SelectListProps) => (
 export const SelectItem = ({ className, ...props }: SelectItemProps) => (
   <BaseSelect.Item
     className={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 data-selected:text-fg-primary",
       className,
@@ -145,7 +147,7 @@ export const SelectGroupLabel = ({
   ...props
 }: SelectGroupLabelProps) => (
   <BaseSelect.GroupLabel
-    className={cn("px-2.5 py-1.5 text-xs text-fg-tertiary", className)}
+    className={cn(popupLabel, className)}
     {...props}
   />
 )