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

package/src/tabs.tsx

@@ -1,62 +1,213 @@
 "use client"
 
 import { Tabs as BaseTabs } from "@base-ui/react/tabs"
-import type { ComponentProps } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { createContext, type ComponentProps, useContext } from "react"
 import { cn } from "./lib/cn"
+import { focusRing, focusRingBorder } from "./lib/focus"
 import { motion } from "./lib/motion"
 
-export type TabsProps = ComponentProps<typeof BaseTabs.Root>
-export type TabsListProps = ComponentProps<typeof BaseTabs.List>
-export type TabsTabProps = ComponentProps<typeof BaseTabs.Tab>
-export type TabsIndicatorProps = ComponentProps<typeof BaseTabs.Indicator>
-export type TabsPanelProps = ComponentProps<typeof BaseTabs.Panel>
+const tabsListVariants = cva("relative flex items-center", {
+  variants: {
+    variant: {
+      underline:
+        "w-full gap-0.5 border-b border-border-primary data-[orientation=vertical]:w-40 data-[orientation=vertical]:shrink-0 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[orientation=vertical]:gap-0 data-[orientation=vertical]:border-r data-[orientation=vertical]:border-b-0",
+      segmented:
+        "w-fit rounded-lg bg-background-tertiary p-0.5 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
+      pill: "w-fit gap-1 data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch",
+    },
+  },
+  defaultVariants: {
+    variant: "underline",
+  },
+})
 
-export const Tabs = ({ className, ...props }: TabsProps) => (
-  <BaseTabs.Root className={cn("flex w-full flex-col", className)} {...props} />
+const tabsTabVariants = cva(
+  cn(
+    "relative z-10 inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap text-fg-tertiary select-none hover:text-fg-primary data-active:text-fg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    focusRingBorder,
+    focusRing,
+  ),
+  {
+    variants: {
+      variant: {
+        underline:
+          "data-[orientation=horizontal]:pb-1 data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start",
+        segmented: "rounded-md",
+        pill: "rounded-full bg-background-tertiary data-active:bg-transparent",
+      },
+      size: {
+        sm: "text-xs [&_svg]:size-3.5",
+        md: "text-sm [&_svg]:size-4",
+        lg: "text-md [&_svg]:size-4",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "underline",
+        size: "sm",
+        class: "h-8 px-2.5 data-[orientation=horizontal]:h-9",
+      },
+      {
+        variant: "underline",
+        size: "md",
+        class: "h-10 px-3 data-[orientation=horizontal]:h-11",
+      },
+      {
+        variant: "underline",
+        size: "lg",
+        class: "h-12 px-3.5 data-[orientation=horizontal]:h-13",
+      },
+      { variant: "segmented", size: "sm", class: "h-7 px-2.5" },
+      { variant: "segmented", size: "md", class: "h-8 px-3" },
+      { variant: "segmented", size: "lg", class: "h-9 px-3.5" },
+      { variant: "pill", size: "sm", class: "h-7 px-2.5" },
+      { variant: "pill", size: "md", class: "h-8 px-3" },
+      { variant: "pill", size: "lg", class: "h-9 px-3.5" },
+    ],
+    defaultVariants: {
+      variant: "underline",
+      size: "md",
+    },
+  },
 )
 
-export const TabsList = ({ className, ...props }: TabsListProps) => (
-  <BaseTabs.List
-    className={cn(
-      "relative flex gap-0.5 border-b border-border-primary",
-      className,
-    )}
-    {...props}
-  />
-)
+const tabsIndicatorVariants = cva("absolute z-0", {
+  variants: {
+    variant: {
+      underline:
+        "bottom-0 left-0 h-0.5 w-(--active-tab-width) translate-x-(--active-tab-left) rounded-full bg-brand-primary data-[orientation=vertical]:top-0 data-[orientation=vertical]:right-0 data-[orientation=vertical]:bottom-auto data-[orientation=vertical]:left-auto data-[orientation=vertical]:h-(--active-tab-height) data-[orientation=vertical]:w-0.5 data-[orientation=vertical]:translate-x-0 data-[orientation=vertical]:translate-y-(--active-tab-top)",
+      segmented:
+        "inset-y-0.5 left-0 w-(--active-tab-width) translate-x-(--active-tab-left) rounded-md bg-surface-raised shadow-hairline data-[orientation=vertical]:inset-x-0.5 data-[orientation=vertical]:top-0 data-[orientation=vertical]:bottom-auto data-[orientation=vertical]:h-(--active-tab-height) data-[orientation=vertical]:w-auto data-[orientation=vertical]:translate-x-0 data-[orientation=vertical]:translate-y-(--active-tab-top)",
+      pill: "inset-y-0 left-0 w-(--active-tab-width) translate-x-(--active-tab-left) rounded-full bg-surface-raised shadow-hairline data-[orientation=vertical]:inset-x-0 data-[orientation=vertical]:top-0 data-[orientation=vertical]:bottom-auto data-[orientation=vertical]:h-(--active-tab-height) data-[orientation=vertical]:w-auto data-[orientation=vertical]:translate-x-0 data-[orientation=vertical]:translate-y-(--active-tab-top)",
+    },
+  },
+  defaultVariants: {
+    variant: "underline",
+  },
+})
 
-export const TabsTab = ({ className, ...props }: TabsTabProps) => (
-  <BaseTabs.Tab
-    className={cn(
-      "relative cursor-pointer px-3 py-2.5 text-sm text-fg-tertiary outline-none select-none",
-      motion.colors,
-      "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-active:text-fg-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  />
+export type TabsVariant = NonNullable<
+  VariantProps<typeof tabsListVariants>["variant"]
+>
+export type TabsSize = NonNullable<
+  VariantProps<typeof tabsTabVariants>["size"]
+>
+
+type TabsStyleContextValue = {
+  variant: TabsVariant
+  size: TabsSize
+}
+
+const TabsStyleContext = createContext<TabsStyleContextValue>({
+  variant: "underline",
+  size: "md",
+})
+
+export type TabsProps = ComponentProps<typeof BaseTabs.Root> & {
+  /** Visual treatment shared by the list, tabs, and indicator. */
+  variant?: TabsVariant
+  /** Height and typography shared by every tab. */
+  size?: TabsSize
+}
+export type TabsListProps = ComponentProps<typeof BaseTabs.List> &
+  VariantProps<typeof tabsListVariants>
+export type TabsTabProps = ComponentProps<typeof BaseTabs.Tab> &
+  VariantProps<typeof tabsTabVariants>
+export type TabsIndicatorProps = ComponentProps<typeof BaseTabs.Indicator> &
+  VariantProps<typeof tabsIndicatorVariants>
+export type TabsPanelProps = ComponentProps<typeof BaseTabs.Panel>
+
+export const Tabs = ({
+  className,
+  variant = "underline",
+  size = "md",
+  ...props
+}: TabsProps) => (
+  <TabsStyleContext.Provider value={{ variant, size }}>
+    <BaseTabs.Root
+      data-slot="tabs"
+      className={cn(
+        "flex w-full flex-col data-[orientation=vertical]:flex-row data-[orientation=vertical]:gap-6",
+        className,
+      )}
+      {...props}
+    />
+  </TabsStyleContext.Provider>
 )
 
+export const TabsList = ({
+  className,
+  variant,
+  ...props
+}: TabsListProps) => {
+  const styles = useContext(TabsStyleContext)
+
+  return (
+    <BaseTabs.List
+      data-slot="tabs-list"
+      className={cn(
+        tabsListVariants({ variant: variant ?? styles.variant }),
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export const TabsTab = ({
+  className,
+  variant,
+  size,
+  ...props
+}: TabsTabProps) => {
+  const styles = useContext(TabsStyleContext)
+
+  return (
+    <BaseTabs.Tab
+      data-slot="tabs-tab"
+      className={cn(
+        tabsTabVariants({
+          variant: variant ?? styles.variant,
+          size: size ?? styles.size,
+        }),
+        motion.colors,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
 export const TabsIndicator = ({
   className,
+  variant,
   ...props
-}: TabsIndicatorProps) => (
-  <BaseTabs.Indicator
-    className={cn(
-      "absolute bottom-0 left-0 z-10 h-0.5 w-(--active-tab-width) translate-x-(--active-tab-left) rounded-full bg-brand-primary",
-      motion.tabsIndicator,
-      className,
-    )}
-    {...props}
-  />
-)
+}: TabsIndicatorProps) => {
+  const styles = useContext(TabsStyleContext)
+
+  return (
+    <BaseTabs.Indicator
+      data-slot="tabs-indicator"
+      className={cn(
+        tabsIndicatorVariants({ variant: variant ?? styles.variant }),
+        motion.tabsIndicator,
+        className,
+      )}
+      {...props}
+    />
+  )
+}
 
 export const TabsPanel = ({ className, ...props }: TabsPanelProps) => (
   <BaseTabs.Panel
+    data-slot="tabs-panel"
     className={cn(
-      "pt-4 text-sm leading-relaxed text-fg-secondary outline-none focus-visible:outline-none",
+      "pt-4 text-sm leading-relaxed text-fg-secondary outline-none focus-visible:outline-none data-[orientation=vertical]:pt-0",
       className,
     )}
     {...props}
   />
 )
+
+export { tabsIndicatorVariants, tabsListVariants, tabsTabVariants }

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: {