@boyernick/standard-ui-react 0.1.1-canary.4 → 0.1.1-canary.6

package/package.json

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

package/src/checkbox.tsx

@@ -4,28 +4,50 @@ import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox"
 import type { ComponentProps } from "react"
 import { IconCheckmark1, IconMinus } from "./icons"
 import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
 
 export type CheckboxProps = ComponentProps<typeof BaseCheckbox.Root>
 
 export const Checkbox = ({ className, ...props }: CheckboxProps) => (
   <BaseCheckbox.Root
     className={cn(
-      "group flex size-4 shrink-0 items-center justify-center rounded-sm border border-border-secondary bg-surface transition-colors duration-[var(--duration-sm)] ease-enter motion-reduce:transition-none 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-checked:border-brand-primary data-checked:bg-brand-primary data-indeterminate:border-brand-primary data-indeterminate:bg-brand-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      "group flex size-4 shrink-0 items-center justify-center rounded-sm border border-border-secondary bg-surface outline-none",
+      // motion.all, not motion.colors: the filled state brings a box shadow
+      // with it, which has to fade in alongside the background.
+      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",
+      // Ticked and mixed are both filled controls, so they carry the primary
+      // button's treatment: brand fill, the border token that pairs with it,
+      // and the top-edge highlight that makes a solid control read as raised.
+      "data-checked:border-brand-primary-border data-checked:bg-brand-primary data-checked:inset-shadow-solid-top",
+      "data-indeterminate:border-brand-primary-border data-indeterminate:bg-brand-primary data-indeterminate:inset-shadow-solid-top",
+      "data-checked:hover:bg-brand-primary-hover data-indeterminate:hover:bg-brand-primary-hover",
+      "data-checked:active:bg-brand-primary-active data-indeterminate:active:bg-brand-primary-active",
+      "data-disabled:cursor-not-allowed data-disabled:opacity-50",
       className,
     )}
     {...props}
   >
-    <BaseCheckbox.Indicator className="flex text-brand-foreground data-unchecked:hidden">
-      <IconCheckmark1
-        size={12}
-        className="size-3 group-data-indeterminate:hidden"
-        aria-hidden
-      />
-      <IconMinus
-        size={12}
-        className="hidden size-3 group-data-indeterminate:block"
-        aria-hidden
-      />
-    </BaseCheckbox.Indicator>
+    {/* Only the active glyph is mounted. Central Icons give every instance of
+        an icon the same mask id, so a CSS-hidden twin would claim that id for
+        the whole document; a `display: none` subtree renders no mask, leaving
+        the visible instance to paint its backing rect unmasked as a solid
+        block. Mounting one icon keeps every id in the document resolvable. */}
+    {/* No `data-unchecked:hidden` here. Base UI keeps the indicator mounted
+        through its exit and flags it with both `data-unchecked` and
+        `data-ending-style`; hiding on the former would cut the latter's
+        transition short and the mark would vanish instantly. */}
+    <BaseCheckbox.Indicator
+      className={cn("flex text-brand-foreground", motion.checkIndicator)}
+      render={(props, state) => (
+        <span {...props}>
+          {state.indeterminate ? (
+            <IconMinus size={12} className="size-3" aria-hidden />
+          ) : (
+            <IconCheckmark1 size={12} className="size-3" aria-hidden />
+          )}
+        </span>
+      )}
+    />
   </BaseCheckbox.Root>
 )

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

@@ -77,7 +77,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",

package/src/lib/motion.ts

@@ -14,7 +14,8 @@
  *
  * Two kinds of token live here, and they behave differently:
  *
- *   Mount tokens  — backdrop, popupCenter, popupAnchor, accordionPanel.
+ *   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
@@ -91,6 +92,20 @@ export const motion = {
     "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]",

package/src/select.tsx

@@ -33,7 +33,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}