@boyernick/standard-ui-react 0.1.1-canary.10 → 0.1.1-canary.11

package/package.json

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

package/src/index.ts

@@ -791,6 +791,7 @@ export {
   TooltipPortal,
   TooltipPositioner,
   TooltipPopup,
+  tooltipPopupVariants,
   type TooltipProviderProps,
   type TooltipProps,
   type TooltipTriggerProps,

package/src/kbd.tsx

@@ -11,9 +11,12 @@ const kbdVariants = cva(
     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 lifts off the surface rather than tinting it.
-        inverted: "border-white/10 bg-white/10 text-fg-inverted",
+        // 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",

package/src/menubar.tsx

@@ -10,6 +10,11 @@ export const Menubar = ({ className, ...props }: MenubarProps) => (
   <BaseMenubar
     className={cn(
       "inline-flex items-center gap-0.5 rounded-lg border border-border-primary bg-background-secondary p-0.5",
+      // Base UI sets data-orientation and handles the arrow keys, but the
+      // layout is ours: without this a vertical menubar still renders as a
+      // row, so the prop looks supported and does nothing.
+      "data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
+      "data-[orientation=vertical]:[&_button]:justify-start",
       "[&_button]:inline-flex [&_button]:h-8 [&_button]:cursor-pointer [&_button]:items-center [&_button]:justify-center [&_button]:gap-1.5 [&_button]:rounded-md [&_button]:px-2.5 [&_button]:text-sm [&_button]:text-fg-secondary [&_button]:outline-none",
       "[&_button]:hover:bg-background-tertiary [&_button]:hover:text-fg-primary",
       "[&_button]:focus-visible:border-ring [&_button]:focus-visible:ring-[3px] [&_button]:focus-visible:ring-offset-1 [&_button]:focus-visible:ring-offset-background-primary [&_button]:focus-visible:ring-ring/20",

package/src/navigation-menu.tsx

@@ -46,7 +46,12 @@ export type NavigationMenuIconProps = ComponentProps<
 >
 
 const navigationMenuTriggerClassName = cn(
-  "inline-flex h-9 cursor-pointer items-center gap-1 rounded-md px-3 text-sm text-fg-secondary outline-none",
+  // flex-row and py-0 are here for the link case. This class is exported so
+  // a plain link can sit in the bar beside real triggers, but Link's own
+  // base is flex-col with p-2.5 — without overriding the direction and the
+  // vertical padding, tailwind-merge leaves both, and the link renders as a
+  // top-padded column whose text sits below the triggers next to it.
+  "inline-flex h-9 cursor-pointer flex-row items-center gap-1 rounded-md px-3 py-0 text-sm text-fg-secondary outline-none",
   motion.colors,
   "hover:bg-background-tertiary hover:text-fg-primary 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-popup-open:bg-background-tertiary data-popup-open:text-fg-primary",
 )

package/src/progress.tsx

@@ -53,6 +53,11 @@ export const ProgressIndicator = ({
   <BaseProgress.Indicator
     className={cn(
       "h-full rounded-full bg-brand-primary transition-[width] duration-[var(--duration-lg)] ease-enter motion-reduce:transition-none",
+      // Base UI flags a null value with data-indeterminate and leaves the
+      // indicator full width, so without this the bar reads as complete.
+      // A quarter-width stripe crossing the track on the passive curve —
+      // ambient, system-initiated movement.
+      "data-indeterminate:w-1/4 data-indeterminate:animate-[progress-indeterminate_1.4s_var(--ease-passive)_infinite] motion-reduce:animate-none",
       className,
     )}
     {...props}

package/src/tooltip.tsx

@@ -1,6 +1,7 @@
 "use client"
 
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip"
+import { cva, type VariantProps } from "class-variance-authority"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
 import { motion } from "./lib/motion"
@@ -12,7 +13,8 @@ export type TooltipPortalProps = ComponentProps<typeof BaseTooltip.Portal>
 export type TooltipPositionerProps = ComponentProps<
   typeof BaseTooltip.Positioner
 >
-export type TooltipPopupProps = ComponentProps<typeof BaseTooltip.Popup>
+export type TooltipPopupProps = ComponentProps<typeof BaseTooltip.Popup> &
+  VariantProps<typeof tooltipPopupVariants>
 
 export const TooltipProvider = (props: TooltipProviderProps) => (
   <BaseTooltip.Provider {...props} />
@@ -43,13 +45,34 @@ export const TooltipPositioner = ({
   />
 )
 
-export const TooltipPopup = ({ className, ...props }: TooltipPopupProps) => (
+// `shadow-md` already composes `--elevation-hairline`, so neither variant
+// needs a border — the light one would otherwise stack a second edge.
+const tooltipPopupVariants = cva(
+  "z-50 max-w-xs rounded-md px-2.5 py-1 text-xs shadow-md outline-none",
+  {
+    variants: {
+      variant: {
+        // Dark on light is the conventional tooltip, and stays the default so
+        // existing consumers are unaffected.
+        inverted: "bg-surface-inverted text-fg-inverted",
+        // For tooltips over dark or busy surfaces, where an inverted popup
+        // would sink into its background instead of lifting off it.
+        light: "bg-surface text-fg-primary",
+      },
+    },
+    defaultVariants: { variant: "inverted" },
+  },
+)
+
+export const TooltipPopup = ({
+  className,
+  variant,
+  ...props
+}: TooltipPopupProps) => (
   <BaseTooltip.Popup
-    className={cn(
-      "z-50 max-w-xs rounded-md bg-surface-inverted px-2.5 py-1 text-xs text-fg-inverted shadow-md outline-none",
-      motion.popupAnchor,
-      className,
-    )}
+    className={cn(tooltipPopupVariants({ variant }), motion.popupAnchor, className)}
     {...props}
   />
 )
+
+export { tooltipPopupVariants }