@boyernick/standard-ui-react 0.1.1-canary.3 → 0.1.1-canary.34

package/src/toggle.tsx

@@ -4,6 +4,7 @@ import { Toggle as BaseToggle } from "@base-ui/react/toggle"
 import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
+import { focusRing } from "./lib/focus"
 import { motion } from "./lib/motion"
 
 export type ToggleProps = ComponentProps<typeof BaseToggle>
@@ -12,9 +13,10 @@ export type ToggleGroupProps = ComponentProps<typeof BaseToggleGroup>
 export const Toggle = ({ className, ...props }: ToggleProps) => (
   <BaseToggle
     className={cn(
-      "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2.5 text-sm text-fg-secondary outline-none",
+      "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2.5 text-sm text-fg-secondary",
       motion.colors,
-      "hover:bg-background-tertiary 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 data-pressed:bg-background-tertiary data-pressed:text-fg-primary",
+      focusRing,
+      "hover:bg-background-tertiary data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:bg-background-tertiary data-pressed:text-fg-primary",
       className,
     )}
     {...props}

package/src/toolbar.tsx

@@ -3,6 +3,7 @@
 import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar"
 import type { ComponentProps } from "react"
 import { cn } from "./lib/cn"
+import { focusRing, focusRingBorder } from "./lib/focus"
 import { motion } from "./lib/motion"
 
 export type ToolbarProps = ComponentProps<typeof BaseToolbar.Root>
@@ -15,7 +16,7 @@ export type ToolbarSeparatorProps = ComponentProps<typeof BaseToolbar.Separator>
 export const Toolbar = ({ className, ...props }: ToolbarProps) => (
   <BaseToolbar.Root
     className={cn(
-      "inline-flex items-center gap-0.5 rounded-lg border border-border-primary bg-background-secondary p-0.5",
+      "inline-flex items-center gap-0.5 rounded-lg py-0.5 pr-1.5 pl-0.5 shadow-lg",
       className,
     )}
     {...props}
@@ -32,9 +33,11 @@ export const ToolbarGroup = ({ className, ...props }: ToolbarGroupProps) => (
 export const ToolbarButton = ({ className, ...props }: ToolbarButtonProps) => (
   <BaseToolbar.Button
     className={cn(
-      "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2.5 text-sm text-fg-secondary outline-none",
+      "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2.5 text-sm text-fg-secondary",
+      focusRingBorder,
       motion.colors,
-      "hover:bg-background-tertiary hover:text-fg-primary 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 data-pressed:bg-background-tertiary data-pressed:text-fg-primary",
+      focusRing,
+      "hover:bg-background-tertiary hover:text-fg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:bg-background-tertiary data-pressed:text-fg-primary",
       className,
     )}
     {...props}
@@ -44,9 +47,11 @@ export const ToolbarButton = ({ className, ...props }: ToolbarButtonProps) => (
 export const ToolbarLink = ({ className, ...props }: ToolbarLinkProps) => (
   <BaseToolbar.Link
     className={cn(
-      "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2.5 text-sm text-fg-secondary outline-none",
+      "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2.5 text-sm text-fg-secondary",
+      focusRingBorder,
       motion.colors,
-      "hover:bg-background-tertiary hover:text-fg-primary 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",
+      focusRing,
+      "hover:bg-background-tertiary hover:text-fg-primary",
       className,
     )}
     {...props}
@@ -56,8 +61,8 @@ export const ToolbarLink = ({ className, ...props }: ToolbarLinkProps) => (
 export const ToolbarInput = ({ className, ...props }: ToolbarInputProps) => (
   <BaseToolbar.Input
     className={cn(
-      "h-8 min-w-28 cursor-text rounded-md border border-border-secondary bg-surface px-2.5 text-sm text-fg-primary outline-none placeholder:text-fg-quaternary",
-      "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",
+      "h-8 min-w-28 cursor-text rounded-md border border-border-secondary bg-surface px-2.5 text-sm text-fg-primary placeholder:text-fg-quaternary",
+      focusRing,
       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,51 @@ export const TooltipPositioner = ({
   />
 )
 
-export const TooltipPopup = ({ className, ...props }: TooltipPopupProps) => (
+// Neither variant carries a border — `shadow-md` already composes
+// `--elevation-hairline`, so one would stack a second edge. That hairline is
+// what gives the default popup its edge against a same-coloured page.
+const tooltipPopupVariants = cva(
+  cn(
+    "z-50 max-w-xs rounded-md px-2.5 py-1 text-xs shadow-md outline-none",
+    // A trailing keycap already carries its own inset, so the full 10px beside
+    // it reads as a gap rather than padding — but sitting flush on the vertical
+    // inset crowds the corner, so it gets a touch more than that.
+    //
+    // Laying the row out as flex is what centres it. On a text line the keycap
+    // is an inline-flex aligned `middle`, which sets its centre against the
+    // baseline plus half an x-height rather than the line's centre — at 16px it
+    // hung 1.18px low, leaving 6.36px above and 4px below. Scoped to `has-[kbd]`
+    // because making every popup a flex container would turn a multi-child
+    // tooltip from stacked blocks into a row.
+    "has-[kbd]:flex has-[kbd]:items-center has-[kbd]:pr-1.5",
+  ),
+  {
+    variants: {
+      variant: {
+        // Sits on the page's own surface: white in light mode, dark in dark.
+        default: "bg-surface text-fg-primary",
+        // Flipped against the page — dark in light mode, light in dark — for
+        // a hint that should read as separate from what it floats over.
+        inverted: "bg-surface-inverted text-fg-inverted",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+)
+
+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",
+      tooltipPopupVariants({ variant }),
       motion.popupAnchor,
       className,
     )}
     {...props}
   />
 )
+
+export { tooltipPopupVariants }