@hyperframes/studio 0.8.50 → 0.8.52

package/src/components/ui/Button.tsx

@@ -1,159 +1,122 @@
 /**
- * Button & IconButton — The most important primitive.
+ * Button — a native `<button>` wearing Studio's tokens.
  *
- * Absorbs: active state (scale 0.98), hit target (min 32px),
- * shadow anatomy (primary), focus ring, disabled state,
- * loading state, reduced motion, proper timing tokens.
+ * Everything visual comes from `theme.css`: the three control heights, the
+ * radius scale, the semantic colours, the motion durations. No value is decided
+ * here, so a button cannot drift from the rest of the system.
  *
- * Rules applied:
- * - physics-active-state: scale(0.98) on :active
- * - ux-fitts-target-size: min 32px hit target
- * - visual-button-shadow-anatomy: 6-layer shadow on primary
- * - duration-press-hover: 120ms press, 150ms hover
+ * Two conventions: classes merge through `cn`, so a caller's `className`
+ * always wins within its group; and every interactive look is written twice,
+ * once as the real state and once as `data-[preview-state=…]` (CSS-only, for
+ * screenshots). `Button.test.tsx` asserts the two stay in sync.
  */
 
 import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from "react";
+import { cn } from "./cn";
 
-// -- Button --
+export type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
+export type ButtonSize = "sm" | "md" | "lg";
 
-type ButtonVariant = "primary" | "secondary" | "danger" | "ghost";
-type ButtonSize = "sm" | "md" | "lg";
+/** Forces one interactive look for a gallery shot. CSS-only; see the header. */
+export type PreviewState = "hover" | "active" | "focus";
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+export interface ButtonBaseProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: ButtonVariant;
   size?: ButtonSize;
+  "data-preview-state"?: PreviewState;
+}
+
+interface ButtonProps extends ButtonBaseProps {
   loading?: boolean;
   icon?: ReactNode;
 }
 
-const variantStyles: Record<ButtonVariant, string> = {
-  primary: [
-    "bg-white text-neutral-950 font-medium",
-    "shadow-btn-primary",
-    "enabled:hover:bg-neutral-200",
-    "enabled:active:scale-[0.97]",
-  ].join(" "),
-  secondary: [
-    "bg-transparent text-neutral-300 font-medium",
-    "border border-border",
-    "enabled:hover:bg-surface-hover enabled:hover:text-white enabled:hover:border-border-strong",
-    "enabled:active:scale-[0.98]",
-  ].join(" "),
-  danger: [
-    "bg-accent-red text-white font-medium",
-    "enabled:hover:bg-red-600",
-    "enabled:active:scale-[0.97]",
-  ].join(" "),
-  ghost: [
-    "bg-transparent text-neutral-400",
-    "enabled:hover:bg-surface-hover enabled:hover:text-white",
-    "enabled:active:scale-[0.98]",
-  ].join(" "),
+/**
+ * Shared by Button and IconButton. `disabled:` keeps pointer events alive so a
+ * wrapping Tooltip can still explain why the control is disabled.
+ */
+export const buttonBase = cn(
+  "inline-flex items-center justify-center select-none cursor-pointer whitespace-nowrap",
+  "transition-[background-color,border-color,color,filter,transform] ease-out-quint duration-press",
+  "disabled:opacity-40 disabled:cursor-not-allowed",
+  "outline-hidden",
+  "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent",
+  "data-[preview-state=focus]:outline-solid data-[preview-state=focus]:outline-2 data-[preview-state=focus]:outline-offset-1 data-[preview-state=focus]:outline-accent",
+);
+
+/**
+ * One entry per variant. The `data-[preview-state=…]` half of each string
+ * repeats the `hover:` and `active:` half exactly; the test pairs them.
+ */
+export const buttonVariants: Record<ButtonVariant, string> = {
+  primary: cn(
+    "bg-accent text-bg-0 font-semibold",
+    "enabled:hover:brightness-110 data-[preview-state=hover]:brightness-110",
+    "enabled:active:scale-[0.98] data-[preview-state=active]:scale-[0.98]",
+  ),
+  secondary: cn(
+    "bg-transparent text-text-1 font-medium border border-border-strong",
+    "enabled:hover:bg-hover enabled:hover:text-text-0 data-[preview-state=hover]:bg-hover data-[preview-state=hover]:text-text-0",
+    "enabled:active:scale-[0.98] data-[preview-state=active]:scale-[0.98]",
+  ),
+  danger: cn(
+    "bg-danger text-text-0 font-medium",
+    "enabled:hover:brightness-110 data-[preview-state=hover]:brightness-110",
+    "enabled:active:scale-[0.98] data-[preview-state=active]:scale-[0.98]",
+  ),
+  ghost: cn(
+    "bg-transparent text-text-2 font-medium",
+    "enabled:hover:bg-hover enabled:hover:text-text-0 data-[preview-state=hover]:bg-hover data-[preview-state=hover]:text-text-0",
+    "enabled:active:scale-[0.98] data-[preview-state=active]:scale-[0.98]",
+  ),
 };
 
-const sizeStyles: Record<ButtonSize, string> = {
-  sm: "h-7 px-2.5 text-xs gap-1.5 rounded-button",
-  md: "h-8 px-3 text-sm gap-1.5 rounded-button",
-  lg: "h-9 px-4 text-base gap-2 rounded-button",
+/**
+ * The three control heights, 24 / 28 / 32 px, from `--spacing-ctl-*`.
+ * Exported so the Capture download `<a href>` can wear the same recipe as a Button.
+ */
+export const buttonSizes: Record<ButtonSize, string> = {
+  sm: "h-ctl-sm px-2 gap-1 rounded-sm text-step-11",
+  md: "h-ctl px-3 gap-1.5 rounded-md text-step-12",
+  lg: "h-ctl-lg px-4 gap-2 rounded-md text-step-13",
 };
 
-// Imported by the shell/renders PRs later in this stack.
-// fallow-ignore-next-line unused-export
+function Spinner() {
+  return (
+    <svg className="animate-spin size-3.5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
+      <path
+        className="opacity-75"
+        fill="currentColor"
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+      />
+    </svg>
+  );
+}
+
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (
-    {
-      variant = "secondary",
-      size = "md",
-      loading,
-      icon,
-      children,
-      className = "",
-      disabled,
-      ...props
-    },
+    { variant = "secondary", size = "md", loading, icon, children, className, disabled, ...props },
     ref,
   ) => {
+    const isDisabled = disabled || loading;
+    let leading: ReactNode = null;
+    if (loading) leading = <Spinner />;
+    else if (icon) leading = <span className="shrink-0">{icon}</span>;
     return (
       <button
         ref={ref}
-        disabled={disabled || loading}
-        className={[
-          "inline-flex items-center justify-center",
-          "transition-all duration-press ease-standard",
-          // No pointer-events-none: disabled buttons must still receive hover
-          // so a wrapping Tooltip can explain WHY they're disabled (A5).
-          "disabled:opacity-40 disabled:cursor-not-allowed",
-          "select-none cursor-pointer",
-          "outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-studio-accent",
-          variantStyles[variant],
-          sizeStyles[size],
-          className,
-        ].join(" ")}
+        disabled={isDisabled}
+        // `aria-disabled` as well as `disabled`: assistive tech announces the
+        // state even where the native attribute is filtered out of the tree.
+        aria-disabled={isDisabled || undefined}
+        className={cn(buttonBase, buttonVariants[variant], buttonSizes[size], className)}
         {...props}
       >
-        {loading ? (
-          <svg className="animate-spin h-3.5 w-3.5" viewBox="0 0 24 24" fill="none">
-            <circle
-              className="opacity-25"
-              cx="12"
-              cy="12"
-              r="10"
-              stroke="currentColor"
-              strokeWidth="4"
-            />
-            <path
-              className="opacity-75"
-              fill="currentColor"
-              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-            />
-          </svg>
-        ) : icon ? (
-          <span className="flex-shrink-0">{icon}</span>
-        ) : null}
-        {children && <span>{children}</span>}
+        {leading}
+        {children}
       </button>
     );
   },
 );
 Button.displayName = "Button";
-
-// -- IconButton --
-// For icon-only buttons. Enforces min 32px hit target.
-
-interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  icon: ReactNode;
-  size?: ButtonSize;
-  variant?: ButtonVariant;
-  "aria-label": string; // REQUIRED for accessibility
-}
-
-const iconSizeStyles: Record<ButtonSize, string> = {
-  sm: "min-w-7 min-h-7 rounded-button", // 28px
-  md: "min-w-8 min-h-8 rounded-button", // 32px — minimum recommended
-  lg: "min-w-9 min-h-9 rounded-button", // 36px
-};
-
-// fallow-ignore-next-line unused-export
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ icon, size = "md", variant = "ghost", className = "", ...props }, ref) => {
-    return (
-      <button
-        ref={ref}
-        className={[
-          "inline-flex items-center justify-center",
-          "transition-all duration-press ease-standard",
-          "disabled:opacity-40 disabled:cursor-not-allowed",
-          "select-none cursor-pointer",
-          "outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-studio-accent",
-          variantStyles[variant],
-          iconSizeStyles[size],
-          className,
-        ].join(" ")}
-        {...props}
-      >
-        {icon}
-      </button>
-    );
-  },
-);
-IconButton.displayName = "IconButton";

package/src/components/ui/IconButton.tsx

@@ -0,0 +1,38 @@
+/**
+ * IconButton — Button's square sibling; shares its base/variant classes so
+ * the two never drift. `aria-label` is required for screen readers.
+ */
+
+import { forwardRef } from "react";
+import type { ReactNode } from "react";
+import { buttonBase, buttonVariants, type ButtonBaseProps, type ButtonSize } from "./Button";
+import { cn } from "./cn";
+
+interface IconButtonProps extends ButtonBaseProps {
+  icon: ReactNode;
+  "aria-label": string;
+}
+
+/** Square boxes on the same 24 / 28 / 32 px control heights as Button. */
+const iconSizeStyles: Record<ButtonSize, string> = {
+  sm: "size-ctl-sm rounded-sm",
+  md: "size-ctl rounded-md",
+  lg: "size-ctl-lg rounded-md",
+};
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ icon, size = "md", variant = "ghost", className, disabled, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        disabled={disabled}
+        aria-disabled={disabled || undefined}
+        className={cn(buttonBase, buttonVariants[variant], iconSizeStyles[size], className)}
+        {...props}
+      >
+        {icon}
+      </button>
+    );
+  },
+);
+IconButton.displayName = "IconButton";

package/src/components/ui/Input.tsx

@@ -0,0 +1,115 @@
+/**
+ * Input: a boxed text field. Typing edits a local draft; Enter and blur commit it,
+ * Escape abandons it. `onTrack` fires once per commit, never per keystroke.
+ */
+
+import { Input as BaseInput } from "@base-ui/react/input";
+import { useEffect, useRef, useState, type ComponentPropsWithoutRef } from "react";
+import { cn } from "./cn";
+import type { PreviewState } from "./Button";
+
+/**
+ * Shared field look (also used by NumberField and Select). Each interactive state is written
+ * twice, real and `data-[preview-state=...]`; `valueControls.test.tsx` asserts the lists match.
+ */
+export const fieldBase = cn(
+  "flex min-w-0 items-center gap-1.5 h-ctl px-2 rounded-md",
+  "bg-input border border-border-input text-step-11 font-medium text-text-1",
+  "transition-[border-color,background-color] ease-standard duration-focus",
+  "hover:border-border-strong data-[preview-state=hover]:border-border-strong",
+  "outline-hidden",
+  "focus-within:outline-solid focus-within:outline-2 focus-within:outline-offset-1 focus-within:outline-accent",
+  "data-[preview-state=focus]:outline-solid data-[preview-state=focus]:outline-2 data-[preview-state=focus]:outline-offset-1 data-[preview-state=focus]:outline-accent",
+  // `aria-invalid` is not one of Tailwind's built-in aria variants, so the
+  // arbitrary form is the one that compiles. The token gate would have caught
+  // the bare `aria-invalid:` spelling as a class that resolves to nothing.
+  "aria-[invalid]:border-danger",
+  "has-[:disabled]:opacity-40 has-[:disabled]:cursor-not-allowed",
+);
+
+/** The text itself, inside the box. The box owns the border and the ring. */
+export const fieldText = cn(
+  "min-w-0 w-full bg-transparent text-inherit outline-hidden",
+  "placeholder:text-text-5 disabled:cursor-not-allowed",
+);
+
+export interface InputProps extends Omit<
+  ComponentPropsWithoutRef<"input">,
+  "value" | "onChange" | "className"
+> {
+  /** The committed value. A draft lives inside until Enter or blur. */
+  value: string;
+  /** Called with the draft on Enter and on blur, only when it really changed. */
+  onCommit: (next: string) => void;
+  /** Called once per committed change, for design-input telemetry. */
+  onTrack?: () => void;
+  /** Marks the field invalid: red boundary and `aria-invalid`. */
+  invalid?: boolean;
+  className?: string;
+  "data-preview-state"?: PreviewState;
+}
+
+export function Input({
+  value,
+  onCommit,
+  onTrack,
+  invalid,
+  disabled,
+  className,
+  "data-preview-state": previewState,
+  ...props
+}: InputProps) {
+  const [draft, setDraft] = useState(value);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+  const dirtyRef = useRef(false);
+
+  // An external write (a seek, an undo, another panel) is authoritative, but it
+  // must not eat what the user is halfway through typing.
+  useEffect(() => {
+    if (!dirtyRef.current) setDraft(value);
+  }, [value]);
+
+  const commit = (next: string) => {
+    dirtyRef.current = false;
+    if (next === valueRef.current) return;
+    onCommit(next);
+    onTrack?.();
+  };
+
+  return (
+    <div
+      className={cn(fieldBase, className)}
+      aria-invalid={invalid || undefined}
+      data-preview-state={previewState}
+    >
+      <BaseInput
+        value={draft}
+        disabled={disabled}
+        aria-invalid={invalid || undefined}
+        className={fieldText}
+        onValueChange={(next) => {
+          dirtyRef.current = true;
+          setDraft(next);
+        }}
+        onBlur={() => commit(draft)}
+        onKeyDown={(event) => {
+          if (event.key === "Enter") {
+            event.preventDefault();
+            commit(draft);
+            return;
+          }
+          if (event.key === "Escape") {
+            // Abandon the draft rather than leave it for the blur commit.
+            event.preventDefault();
+            event.stopPropagation();
+            dirtyRef.current = false;
+            setDraft(valueRef.current);
+            event.currentTarget.blur();
+          }
+        }}
+        {...props}
+      />
+    </div>
+  );
+}