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

package/package.json

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

package/src/command.tsx

@@ -4,8 +4,10 @@ import { Dialog as BaseDialog } from "@base-ui/react/dialog"
 import {
   createContext,
   useContext,
+  useEffect,
   useId,
   useMemo,
+  useRef,
   type ButtonHTMLAttributes,
   type ComponentProps,
   type HTMLAttributes,
@@ -108,7 +110,7 @@ export const CommandBackdrop = ({
 export const CommandPopup = ({ className, ...props }: CommandPopupProps) => (
   <BaseDialog.Popup
     className={cn(
-      "fixed top-1/2 left-1/2 z-50 flex h-[min(80vh,32rem)] w-full max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-2xl border border-border-primary bg-surface-raised shadow-xl outline-none max-sm:max-w-[calc(100vw-2rem)]",
+      "fixed top-1/2 left-1/2 z-50 flex h-[min(80vh,32rem)] w-full max-w-3xl -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-2xl bg-surface-raised shadow-ambient outline-none max-sm:max-w-[calc(100vw-2rem)]",
       motion.popupCenter,
       className,
     )}
@@ -147,7 +149,6 @@ export const CommandInput = ({
       aria-activedescendant={activeOptionId}
       className={cn(
         "h-9 min-w-0 flex-1 cursor-text rounded-md bg-transparent px-2.5 text-base text-fg-primary outline-none placeholder:text-fg-quaternary",
-        "focus-visible:bg-background-tertiary/60 focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
         "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none",
         className,
       )}
@@ -174,9 +175,9 @@ export const CommandClear = ({
   <button
     type="button"
     className={cn(
-      "cursor-pointer rounded-full px-3 py-1.5 text-sm text-fg-quaternary outline-none",
+      "inline-flex h-8 cursor-pointer items-center rounded-full border border-transparent px-3 text-sm text-fg-quaternary outline-none",
       motion.colors,
-      "hover:bg-background-tertiary hover:text-fg-primary focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20 data-[active=true]:text-fg-primary",
+      "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-[active=true]:text-fg-primary",
       className,
     )}
     {...props}
@@ -203,9 +204,9 @@ export const CommandClose = ({
 }: CommandCloseProps) => (
   <BaseDialog.Close
     className={cn(
-      "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full text-fg-primary outline-none",
+      "inline-flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-full border border-transparent text-fg-primary outline-none",
       motion.colors,
-      "hover:bg-background-tertiary focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
+      "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",
       className,
     )}
     aria-label={props["aria-label"] ?? "Close"}
@@ -223,7 +224,7 @@ export const CommandContent = ({
 }: CommandContentProps) => (
   <div
     className={cn(
-      "flex min-h-0 flex-1 flex-col gap-3 overflow-x-visible overflow-y-auto overscroll-contain px-4 pt-1 pb-5",
+      "flex min-h-0 flex-1 flex-col gap-3 overflow-hidden px-4 pt-1 pb-5",
       className,
     )}
     {...props}
@@ -256,9 +257,9 @@ export const CommandFilter = ({
       aria-pressed={selected}
       data-selected={selected || undefined}
       className={cn(
-        "cursor-pointer rounded-full px-4 py-2 text-sm text-fg-quaternary outline-none",
+        "inline-flex h-9 cursor-pointer items-center rounded-full border border-transparent px-4 text-sm text-fg-quaternary outline-none",
         motion.colors,
-        "hover:text-fg-primary focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
+        "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-selected:bg-background-tertiary data-selected:text-fg-primary",
         className,
       )}
@@ -277,7 +278,7 @@ export const CommandList = ({ className, ...props }: CommandListProps) => {
       id={listboxId}
       role="listbox"
       className={cn(
-        "grid min-h-0 flex-1 content-start gap-0 overflow-visible overscroll-contain py-0.5",
+        "grid min-h-0 flex-1 content-start gap-0 overflow-y-auto overscroll-contain py-0.5",
         className,
       )}
       {...props}
@@ -295,12 +296,21 @@ export const CommandItem = ({
   onClick,
   ...props
 }: CommandItemProps) => {
+  const ref = useRef<HTMLAnchorElement & HTMLButtonElement>(null)
+
+  // Keyboard selection moves the highlight without moving focus, so nothing
+  // scrolls the list on its own. `nearest` only acts when the row is actually
+  // out of view, which leaves hover-driven selection alone.
+  useEffect(() => {
+    if (selected) ref.current?.scrollIntoView({ block: "nearest" })
+  }, [selected])
+
   const itemClassName = cn(
-    "flex h-15 min-h-15 w-full cursor-pointer items-center justify-between gap-4 rounded-lg px-4 text-left text-sm font-medium text-fg-primary outline-none select-none",
+    "flex h-15 min-h-15 w-full cursor-pointer items-center justify-between gap-4 rounded-lg border border-transparent px-4 text-left text-sm font-medium text-fg-primary outline-none select-none",
     motion.colors,
     "hover:bg-background-tertiary data-selected:bg-background-tertiary",
     "data-disabled:cursor-not-allowed data-disabled:opacity-50",
-    "focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
+    "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-offset-1 focus-visible:ring-offset-background-primary focus-visible:ring-ring/20",
     className,
   )
 
@@ -308,6 +318,7 @@ export const CommandItem = ({
     <li role="presentation" className="m-0">
       {href ? (
         <a
+          ref={ref}
           id={id}
           href={disabled ? undefined : href}
           role="option"
@@ -323,6 +334,7 @@ export const CommandItem = ({
         </a>
       ) : (
         <button
+          ref={ref}
           id={id}
           type="button"
           role="option"

package/src/date-picker.tsx

@@ -62,11 +62,16 @@ const DatePickerTrigger = ({
     render={
       <Button
         type="button"
-        size="sm"
+        // Default md height, so the trigger lines up with every other field
+        // in a form rather than sitting 4px short of them.
+        size="md"
         variant="outline"
         disabled={disabled}
         prefix={<IconCalendar1 aria-hidden />}
-        className={cn("w-56 justify-start", className)}
+        // The outline button fills on hover, which is right for a button and
+        // wrong here: this reads as a field, and fields in the system keep
+        // their surface. The border and the popover carry the state.
+        className={cn("w-56 justify-start hover:bg-surface", className)}
       />
     }
   >

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";

package/src/kbd.tsx

@@ -0,0 +1,43 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+const kbdVariants = cva(
+  // 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 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 lifts off the surface rather than tinting it.
+        inverted: "border-white/10 bg-white/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 }