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

package/src/text-animate.tsx

@@ -8,12 +8,18 @@ import {
 } from "react"
 import { cn } from "./lib/cn"
 
+/** How many glyphs are scrambling at once. The window travels the line; behind
+ *  it the text is settled, ahead of it nothing is drawn yet. 8 is the reference
+ *  default from baffle.js, which this effect follows. */
+const DECODE_WINDOW = 8
+
 const DECODE_GLYPHS =
   "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789#@$%&*"
 
 export type TextAnimateEffect =
   | "typewriter"
   | "decode"
+  | "shimmer"
   | "fade"
   | "blur"
 
@@ -32,20 +38,25 @@ export type TextAnimateProps = HTMLAttributes<HTMLSpanElement> & {
 export const TextAnimate = ({
   text,
   effect = "typewriter",
-  speed = 40,
+  speed = 60,
   delay = 0,
   replay = true,
   as: Tag = "span",
   className,
   ...props
 }: TextAnimateProps) => {
-  const [output, setOutput] = useState(effect === "typewriter" || effect === "decode" ? "" : text)
-  const [done, setDone] = useState(effect === "fade" || effect === "blur")
+  const [output, setOutput] = useState(
+    effect === "typewriter" || effect === "decode" ? "" : text,
+  )
+  const [done, setDone] = useState(
+    effect === "fade" || effect === "blur" || effect === "shimmer",
+  )
   const chars = useMemo(() => [...text], [text])
 
   useEffect(() => {
     let cancelled = false
     let timeoutId: ReturnType<typeof setTimeout> | undefined
+    let frameId: number | undefined
 
     const start = () => {
       if (
@@ -57,7 +68,7 @@ export const TextAnimate = ({
         return
       }
 
-      if (effect === "fade" || effect === "blur") {
+      if (effect === "fade" || effect === "blur" || effect === "shimmer") {
         setOutput(text)
         setDone(true)
         return
@@ -82,30 +93,59 @@ export const TextAnimate = ({
         return
       }
 
-      // decode
-      setOutput(
-        chars.map(() => DECODE_GLYPHS[Math.floor(Math.random() * DECODE_GLYPHS.length)]).join(""),
-      )
-      let revealed = 0
-      const tick = () => {
+      // Decode follows baffle.js's `reveal`, which is the reference for this
+      // effect: a fixed-width window of scrambled glyphs travels left to
+      // right, the real text sits behind it, and nothing at all is drawn ahead
+      // of it — so the line grows in with a churning leading edge rather than
+      // resolving out of a full-width block of noise.
+      //
+      // It runs on rAF with a time accumulator rather than `setTimeout(speed)`.
+      // A 28ms timer does not divide into a ~16.7ms frame, so steps land on
+      // uneven frames and the text visibly stutters; accumulating elapsed time
+      // keeps the reference's cadence while landing each step on a real frame.
+      const slots = chars.reduce<number[]>((acc, char, index) => {
+        if (char !== " ") acc.push(index)
+        return acc
+      }, [])
+
+      // The window starts off the front of the line so the first glyph is
+      // already scrambling as it arrives.
+      let position = -DECODE_WINDOW
+      let previousStep = -Infinity
+      const startedAt = performance.now()
+
+      const frame = (now: number) => {
         if (cancelled) return
-        revealed += 1
-        const next = chars
-          .map((char, index) => {
-            if (char === " ") return " "
-            if (index < revealed) return char
-            return DECODE_GLYPHS[Math.floor(Math.random() * DECODE_GLYPHS.length)]
-          })
-          .join("")
-        setOutput(next)
-        if (revealed < chars.length) {
-          timeoutId = setTimeout(tick, speed)
-        } else {
-          setOutput(text)
-          setDone(true)
+
+        const step = Math.floor((now - startedAt) / speed) - DECODE_WINDOW
+        if (step !== previousStep) {
+          previousStep = step
+          position = step
+
+          if (position > slots.length) {
+            setOutput(text)
+            setDone(true)
+            return
+          }
+
+          const next = [...chars]
+          for (let p = Math.max(position, 0); p < slots.length; p += 1) {
+            next[slots[p]] =
+              p < position + DECODE_WINDOW
+                ? DECODE_GLYPHS[
+                    Math.floor(Math.random() * DECODE_GLYPHS.length)
+                  ]
+                : ""
+          }
+          setOutput(next.join(""))
         }
+
+        frameId = requestAnimationFrame(frame)
       }
-      timeoutId = setTimeout(tick, speed)
+
+      setOutput("")
+      frameId = requestAnimationFrame(frame)
+      return
     }
 
     timeoutId = setTimeout(start, delay)
@@ -113,18 +153,21 @@ export const TextAnimate = ({
     return () => {
       cancelled = true
       if (timeoutId) clearTimeout(timeoutId)
+      if (frameId) cancelAnimationFrame(frameId)
     }
   }, [chars, delay, effect, replay, speed, text])
 
-  if (effect === "fade" || effect === "blur") {
+  if (effect === "fade" || effect === "blur" || effect === "shimmer") {
     return (
       <Tag
         className={cn(
           "inline-block text-fg-primary",
           effect === "fade" &&
-            "animate-[text-fade-in_0.6s_var(--ease-enter)_both] motion-reduce:animate-none",
+            "animate-[text-fade-in_0.9s_var(--ease-enter)_both] motion-reduce:animate-none",
           effect === "blur" &&
-            "animate-[text-blur-in_0.7s_var(--ease-enter)_both] motion-reduce:animate-none",
+            "animate-[text-blur-in_1s_var(--ease-enter)_both] motion-reduce:animate-none",
+          effect === "shimmer" &&
+            "bg-[linear-gradient(110deg,var(--color-fg-tertiary)_35%,var(--color-fg-primary)_50%,var(--color-fg-tertiary)_65%)] bg-[length:250%_100%] bg-clip-text text-transparent animate-[text-shimmer_3s_linear_infinite] motion-reduce:animate-none motion-reduce:bg-none motion-reduce:text-fg-primary",
           className,
         )}
         style={{ animationDelay: `${delay}ms` }}

package/src/textarea.tsx

@@ -1,9 +1,14 @@
 import { cva, type VariantProps } from "class-variance-authority"
 import type { TextareaHTMLAttributes } from "react"
 import { cn } from "./lib/cn"
+import { focusRing, focusRingInvalid } from "./lib/focus"
 
 const textareaVariants = cva(
-  "flex min-h-20 w-full cursor-text resize-y rounded-md px-3 py-2 text-sm text-fg-primary transition-[color,box-shadow] duration-[var(--duration-sm)] ease-enter 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 aria-invalid:border-destructive aria-invalid:focus-visible:border-destructive aria-invalid:focus-visible:ring-destructive/20 disabled:cursor-not-allowed disabled:opacity-50",
+  cn(
+    "flex min-h-20 w-full cursor-text resize-y rounded-md px-3 py-2 text-sm text-fg-primary transition-[color,box-shadow] duration-[var(--duration-sm)] ease-enter placeholder:text-fg-quaternary disabled:cursor-not-allowed disabled:opacity-50",
+    focusRing,
+    focusRingInvalid,
+  ),
   {
     variants: {
       variant: {

package/src/timeline.tsx

@@ -0,0 +1,378 @@
+"use client"
+
+import { cva, type VariantProps } from "class-variance-authority"
+import {
+  createContext,
+  type ComponentProps,
+  type KeyboardEvent,
+  type WheelEvent,
+  useContext,
+} from "react"
+import { cn } from "./lib/cn"
+import { focusRing, focusRingBorder } from "./lib/focus"
+import { motion } from "./lib/motion"
+
+const timelineVariants = cva("group/timeline relative text-fg-primary", {
+  variants: {
+    orientation: {
+      vertical: "w-full",
+      horizontal: cn(
+        "w-full min-h-0 overflow-x-auto overscroll-x-contain scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden focus-visible:rounded-md",
+        focusRingBorder,
+        focusRing,
+      ),
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+const timelineTrackVariants = cva("relative m-0 list-none p-0", {
+  variants: {
+    orientation: {
+      vertical:
+        "before:pointer-events-none before:absolute before:top-0 before:bottom-0 before:left-[calc(4.5rem+0.75rem+0.5rem)] before:w-px before:-translate-x-1/2 before:border-l before:border-dashed before:border-border-primary before:content-['']",
+      horizontal:
+        "flex w-max items-start before:pointer-events-none before:absolute before:inset-x-0 before:top-[var(--timeline-rail)] before:border-t before:border-dashed before:border-border-primary before:content-['']",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+const timelineItemVariants = cva("group/timeline-item relative", {
+  variants: {
+    orientation: {
+      vertical: "grid grid-cols-[4.5rem_1rem_minmax(0,1fr)] gap-x-3 pb-8 last:pb-0",
+      horizontal:
+        "w-[min(18rem,70vw)] shrink-0 pr-10 last:pr-0 [--timeline-rail:2.75rem]",
+    },
+  },
+  defaultVariants: {
+    orientation: "vertical",
+  },
+})
+
+const timelineMarkerVariants = cva("z-[1] shrink-0", {
+  variants: {
+    orientation: {
+      vertical: "col-start-2 row-start-1 mt-2 justify-self-center",
+      horizontal:
+        "absolute top-[var(--timeline-rail)] left-0 -translate-y-1/2",
+    },
+    shape: {
+      tick: "bg-fg-quaternary group-hover/timeline-item:bg-fg-tertiary",
+      dot: "size-2.5 rounded-full border-2 border-background-primary shadow-hairline",
+    },
+    tone: {
+      neutral: "",
+      accent: "",
+      info: "",
+      success: "",
+      warning: "",
+      critical: "",
+    },
+  },
+  compoundVariants: [
+    {
+      shape: "tick",
+      orientation: "vertical",
+      class: "h-px w-2.5",
+    },
+    {
+      shape: "tick",
+      orientation: "horizontal",
+      class: "h-2.5 w-px",
+    },
+    { shape: "tick", tone: "neutral", class: "bg-fg-quaternary" },
+    { shape: "tick", tone: "accent", class: "bg-brand-primary" },
+    { shape: "tick", tone: "info", class: "bg-status-info" },
+    { shape: "tick", tone: "success", class: "bg-status-success" },
+    { shape: "tick", tone: "warning", class: "bg-status-warning" },
+    { shape: "tick", tone: "critical", class: "bg-status-critical" },
+    { shape: "dot", tone: "neutral", class: "bg-fg-tertiary" },
+    { shape: "dot", tone: "accent", class: "bg-brand-primary" },
+    { shape: "dot", tone: "info", class: "bg-status-info" },
+    { shape: "dot", tone: "success", class: "bg-status-success" },
+    { shape: "dot", tone: "warning", class: "bg-status-warning" },
+    { shape: "dot", tone: "critical", class: "bg-status-critical" },
+  ],
+  defaultVariants: {
+    orientation: "vertical",
+    shape: "tick",
+    tone: "neutral",
+  },
+})
+
+const timelineTimeVariants = cva(
+  cn(
+    "text-sm-strong block tabular-nums text-fg-secondary",
+    motion.colors,
+    "group-hover/timeline-item:text-fg-primary",
+  ),
+  {
+    variants: {
+      orientation: {
+        vertical: "col-start-1 row-start-1 pt-0.5 text-right leading-5",
+        horizontal: "mb-6 h-5 leading-5",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  },
+)
+
+type TimelineOrientation = "horizontal" | "vertical"
+
+const TimelineContext = createContext<TimelineOrientation>("vertical")
+
+export type TimelineProps = ComponentProps<"div"> &
+  VariantProps<typeof timelineVariants> & {
+    /** Distance moved by the horizontal timeline's arrow keys. */
+    scrollStep?: number
+  }
+
+export type TimelineTrackProps = ComponentProps<"ol">
+export type TimelineItemProps = ComponentProps<"li">
+export type TimelineMarkerProps = ComponentProps<"span"> &
+  VariantProps<typeof timelineMarkerVariants>
+export type TimelineTimeProps = ComponentProps<"time">
+export type TimelineContentProps = ComponentProps<"div">
+export type TimelineTitleProps = ComponentProps<"h3">
+export type TimelineDescriptionProps = ComponentProps<"p">
+export type TimelineMediaProps = ComponentProps<"div">
+
+export const Timeline = ({
+  orientation = "vertical",
+  scrollStep = 256,
+  className,
+  children,
+  tabIndex,
+  onKeyDown,
+  onWheel,
+  "aria-label": ariaLabel = "Timeline",
+  ...props
+}: TimelineProps) => {
+  const resolvedOrientation = orientation ?? "vertical"
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    onKeyDown?.(event)
+    if (
+      event.defaultPrevented ||
+      resolvedOrientation !== "horizontal" ||
+      event.target !== event.currentTarget
+    ) {
+      return
+    }
+
+    const node = event.currentTarget
+    const prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)",
+    ).matches
+    const behavior = prefersReducedMotion ? "auto" : "smooth"
+
+    if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+      event.preventDefault()
+      node.scrollBy({
+        left: event.key === "ArrowRight" ? scrollStep : -scrollStep,
+        behavior,
+      })
+    }
+
+    if (event.key === "Home" || event.key === "End") {
+      event.preventDefault()
+      node.scrollTo({
+        left: event.key === "Home" ? 0 : node.scrollWidth,
+        behavior,
+      })
+    }
+  }
+
+  const handleWheel = (event: WheelEvent<HTMLDivElement>) => {
+    onWheel?.(event)
+    if (
+      event.defaultPrevented ||
+      resolvedOrientation !== "horizontal" ||
+      Math.abs(event.deltaX) >= Math.abs(event.deltaY)
+    ) {
+      return
+    }
+
+    const node = event.currentTarget
+    const maxScrollLeft = node.scrollWidth - node.clientWidth
+    const canScroll =
+      event.deltaY > 0 ? node.scrollLeft < maxScrollLeft : node.scrollLeft > 0
+
+    if (canScroll) {
+      event.preventDefault()
+      node.scrollLeft += event.deltaY
+    }
+  }
+
+  return (
+    <TimelineContext.Provider value={resolvedOrientation}>
+      <div
+        data-slot="timeline"
+        data-orientation={resolvedOrientation}
+        role="region"
+        aria-label={ariaLabel}
+        tabIndex={
+          tabIndex ?? (resolvedOrientation === "horizontal" ? 0 : undefined)
+        }
+        className={cn(
+          timelineVariants({ orientation: resolvedOrientation }),
+          className,
+        )}
+        onKeyDown={handleKeyDown}
+        onWheel={handleWheel}
+        {...props}
+      >
+        {children}
+      </div>
+    </TimelineContext.Provider>
+  )
+}
+
+export const TimelineTrack = ({
+  className,
+  ...props
+}: TimelineTrackProps) => {
+  const orientation = useContext(TimelineContext)
+
+  return (
+    <ol
+      data-slot="timeline-track"
+      data-orientation={orientation}
+      className={cn(
+        timelineTrackVariants({ orientation }),
+        orientation === "horizontal" && "[--timeline-rail:2.75rem]",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export const TimelineItem = ({
+  className,
+  ...props
+}: TimelineItemProps) => {
+  const orientation = useContext(TimelineContext)
+
+  return (
+    <li
+      data-slot="timeline-item"
+      data-orientation={orientation}
+      className={cn(timelineItemVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+export const TimelineMarker = ({
+  className,
+  tone,
+  shape,
+  ...props
+}: TimelineMarkerProps) => {
+  const orientation = useContext(TimelineContext)
+
+  return (
+    <span
+      data-slot="timeline-marker"
+      aria-hidden
+      className={cn(
+        timelineMarkerVariants({ orientation, shape, tone }),
+        motion.colors,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export const TimelineTime = ({
+  className,
+  ...props
+}: TimelineTimeProps) => {
+  const orientation = useContext(TimelineContext)
+
+  return (
+    <time
+      data-slot="timeline-time"
+      className={cn(timelineTimeVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+export const TimelineContent = ({
+  className,
+  ...props
+}: TimelineContentProps) => {
+  const orientation = useContext(TimelineContext)
+
+  return (
+    <div
+      data-slot="timeline-content"
+      className={cn(
+        "min-w-0",
+        orientation === "vertical" && "col-start-3 row-start-1",
+        orientation === "horizontal" && "pt-6",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export const TimelineTitle = ({
+  className,
+  ...props
+}: TimelineTitleProps) => (
+  <h3
+    data-slot="timeline-title"
+    className={cn(
+      "text-sm-strong text-fg-primary",
+      motion.colors,
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const TimelineDescription = ({
+  className,
+  ...props
+}: TimelineDescriptionProps) => (
+  <p
+    data-slot="timeline-description"
+    className={cn("text-sm mt-1 leading-relaxed text-fg-secondary", className)}
+    {...props}
+  />
+)
+
+export const TimelineMedia = ({
+  className,
+  ...props
+}: TimelineMediaProps) => (
+  <div
+    data-slot="timeline-media"
+    className={cn(
+      "mt-4 overflow-hidden rounded-xl ring-1 ring-border-primary [&>img]:block [&>img]:aspect-4/3 [&>img]:w-full [&>img]:object-cover",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export {
+  timelineVariants,
+  timelineItemVariants,
+  timelineMarkerVariants,
+  timelineTimeVariants,
+  timelineTrackVariants,
+}