@boyernick/standard-ui-react 0.1.0

package/src/sounds.tsx

@@ -0,0 +1,270 @@
+"use client"
+
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  type ComponentProps,
+  type ReactNode,
+} from "react"
+import { Button } from "./button"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type SoundId = "click" | "success" | "error" | "notify"
+
+type SoundPreset = {
+  id: SoundId
+  label: string
+  description: string
+  play: (ctx: AudioContext, when: number, destination: AudioNode) => void
+}
+
+const SOUND_PRESETS: SoundPreset[] = [
+  {
+    id: "click",
+    label: "Click",
+    description: "Light confirmation for toggles and secondary actions.",
+    play: (ctx, when, destination) => {
+      const osc = ctx.createOscillator()
+      const gain = ctx.createGain()
+      osc.type = "triangle"
+      osc.frequency.setValueAtTime(880, when)
+      gain.gain.setValueAtTime(0.0001, when)
+      gain.gain.exponentialRampToValueAtTime(0.08, when + 0.01)
+      gain.gain.exponentialRampToValueAtTime(0.0001, when + 0.08)
+      osc.connect(gain)
+      gain.connect(destination)
+      osc.start(when)
+      osc.stop(when + 0.09)
+    },
+  },
+  {
+    id: "success",
+    label: "Success",
+    description: "Positive completion for saves and confirmations.",
+    play: (ctx, when, destination) => {
+      const notes = [523.25, 659.25, 783.99]
+      notes.forEach((frequency, index) => {
+        const osc = ctx.createOscillator()
+        const gain = ctx.createGain()
+        const start = when + index * 0.08
+        osc.type = "sine"
+        osc.frequency.setValueAtTime(frequency, start)
+        gain.gain.setValueAtTime(0.0001, start)
+        gain.gain.exponentialRampToValueAtTime(0.09, start + 0.02)
+        gain.gain.exponentialRampToValueAtTime(0.0001, start + 0.22)
+        osc.connect(gain)
+        gain.connect(destination)
+        osc.start(start)
+        osc.stop(start + 0.24)
+      })
+    },
+  },
+  {
+    id: "error",
+    label: "Error",
+    description: "Attention for failed actions and validation.",
+    play: (ctx, when, destination) => {
+      const osc = ctx.createOscillator()
+      const gain = ctx.createGain()
+      osc.type = "sawtooth"
+      osc.frequency.setValueAtTime(220, when)
+      osc.frequency.exponentialRampToValueAtTime(140, when + 0.18)
+      gain.gain.setValueAtTime(0.0001, when)
+      gain.gain.exponentialRampToValueAtTime(0.07, when + 0.02)
+      gain.gain.exponentialRampToValueAtTime(0.0001, when + 0.22)
+      osc.connect(gain)
+      gain.connect(destination)
+      osc.start(when)
+      osc.stop(when + 0.24)
+    },
+  },
+  {
+    id: "notify",
+    label: "Notify",
+    description: "Soft cue for toasts and background updates.",
+    play: (ctx, when, destination) => {
+      const osc = ctx.createOscillator()
+      const gain = ctx.createGain()
+      osc.type = "sine"
+      osc.frequency.setValueAtTime(660, when)
+      osc.frequency.setValueAtTime(880, when + 0.12)
+      gain.gain.setValueAtTime(0.0001, when)
+      gain.gain.exponentialRampToValueAtTime(0.06, when + 0.02)
+      gain.gain.exponentialRampToValueAtTime(0.0001, when + 0.28)
+      osc.connect(gain)
+      gain.connect(destination)
+      osc.start(when)
+      osc.stop(when + 0.3)
+    },
+  },
+]
+
+type SoundsContextValue = {
+  muted: boolean
+  setMuted: (muted: boolean) => void
+  volume: number
+  setVolume: (volume: number) => void
+  play: (id: SoundId) => void
+  presets: SoundPreset[]
+}
+
+const SoundsContext = createContext<SoundsContextValue | null>(null)
+
+export type SoundsProviderProps = {
+  children: ReactNode
+  defaultMuted?: boolean
+  defaultVolume?: number
+}
+
+export const SoundsProvider = ({
+  children,
+  defaultMuted = false,
+  defaultVolume = 0.8,
+}: SoundsProviderProps) => {
+  const [muted, setMuted] = useState(defaultMuted)
+  const [volume, setVolume] = useState(defaultVolume)
+  const audioContextRef = useRef<AudioContext | null>(null)
+
+  const getContext = useCallback(() => {
+    if (typeof window === "undefined") return null
+    if (!audioContextRef.current) {
+      audioContextRef.current = new AudioContext()
+    }
+    return audioContextRef.current
+  }, [])
+
+  useEffect(() => {
+    return () => {
+      void audioContextRef.current?.close()
+    }
+  }, [])
+
+  const play = useCallback(
+    (id: SoundId) => {
+      if (muted) return
+      const preset = SOUND_PRESETS.find((item) => item.id === id)
+      if (!preset) return
+      const ctx = getContext()
+      if (!ctx) return
+      void ctx.resume()
+      const master = ctx.createGain()
+      master.gain.value = Math.min(1, Math.max(0, volume))
+      master.connect(ctx.destination)
+      preset.play(ctx, ctx.currentTime, master)
+    },
+    [getContext, muted, volume],
+  )
+
+  const value = useMemo(
+    () => ({
+      muted,
+      setMuted,
+      volume,
+      setVolume,
+      play,
+      presets: SOUND_PRESETS,
+    }),
+    [muted, play, volume],
+  )
+
+  return (
+    <SoundsContext.Provider value={value}>{children}</SoundsContext.Provider>
+  )
+}
+
+export const useSounds = () => {
+  const context = useContext(SoundsContext)
+  if (!context) {
+    throw new Error("useSounds must be used within <SoundsProvider>")
+  }
+  return context
+}
+
+export type SoundProps = ComponentProps<"div"> & {
+  id: SoundId
+  label?: string
+  description?: string
+}
+
+export const Sound = ({
+  id,
+  label,
+  description,
+  className,
+  ...props
+}: SoundProps) => {
+  const { play, presets } = useSounds()
+  const preset = presets.find((item) => item.id === id)
+  const resolvedLabel = label ?? preset?.label ?? id
+  const resolvedDescription = description ?? preset?.description
+
+  const handlePlay = () => {
+    play(id)
+  }
+
+  return (
+    <div
+      data-slot="sound"
+      className={cn(
+        "flex items-center gap-3 rounded-xl border border-border-primary bg-surface p-3",
+        className,
+      )}
+      {...props}
+    >
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        iconOnly
+        rounded
+        aria-label={`Play ${resolvedLabel}`}
+        onClick={handlePlay}
+      >
+        <PlayIcon />
+      </Button>
+      <div className="min-w-0 flex-1">
+        <p className="text-sm-strong text-fg-primary">{resolvedLabel}</p>
+        {resolvedDescription ? (
+          <p className="text-sm mt-0.5 text-fg-tertiary">{resolvedDescription}</p>
+        ) : null}
+      </div>
+      <span className="text-xs font-mono text-fg-quaternary">{id}</span>
+    </div>
+  )
+}
+
+export type SoundToggleProps = ComponentProps<typeof Button>
+
+export const SoundToggle = ({
+  className,
+  children,
+  ...props
+}: SoundToggleProps) => {
+  const { muted, setMuted } = useSounds()
+
+  return (
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      aria-pressed={!muted}
+      className={cn(motion.colors, className)}
+      onClick={() => setMuted(!muted)}
+      {...props}
+    >
+      {children ?? (muted ? "Unmute sounds" : "Mute sounds")}
+    </Button>
+  )
+}
+
+const PlayIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" className="size-4" aria-hidden>
+    <path d="M9 7.5v9l8-4.5-8-4.5Z" fill="currentColor" />
+  </svg>
+)

package/src/spinner.tsx

@@ -0,0 +1,45 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { ComponentProps } from "react";
+import { cn } from "./lib/cn";
+
+const spinnerVariants = cva(
+  "animate-spin text-current motion-reduce:animate-none",
+  {  variants: {
+    size: {
+      sm: "size-3.5",
+      md: "size-4",
+      lg: "size-5",
+    },
+  },
+  defaultVariants: {
+    size: "md",
+  },
+});
+
+export type SpinnerProps = ComponentProps<"svg"> &
+  VariantProps<typeof spinnerVariants>;
+
+export const Spinner = ({ className, size, ...props }: SpinnerProps) => (
+  <svg
+    role="status"
+    aria-label="Loading"
+    className={cn(spinnerVariants({ size }), className)}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
+      stroke="currentColor"
+      strokeOpacity="0.3"
+      strokeWidth="2"
+    />
+    <path
+      d="M21 12C21 16.9706 16.9706 21 12 21"
+      stroke="currentColor"
+      strokeWidth="2"
+    />
+  </svg>
+);
+
+export { spinnerVariants };

package/src/switch.tsx

@@ -0,0 +1,19 @@
+"use client"
+
+import { Switch as BaseSwitch } from "@base-ui/react/switch"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+export type SwitchProps = ComponentProps<typeof BaseSwitch.Root>
+
+export const Switch = ({ className, ...props }: SwitchProps) => (
+  <BaseSwitch.Root
+    className={cn(
+      "relative inline-flex h-6 w-10 shrink-0 items-center rounded-full bg-background-quaternary transition-colors duration-150 ease-out 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:bg-brand-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <BaseSwitch.Thumb className="pointer-events-none block size-5 translate-x-0.5 rounded-full bg-surface shadow-sm transition-transform duration-150 ease-out motion-reduce:transition-none data-checked:translate-x-[1.125rem]" />
+  </BaseSwitch.Root>
+)

package/src/table.tsx

@@ -0,0 +1,81 @@
+import type { ComponentProps } from "react";
+import { cn } from "./lib/cn";
+
+export type TableProps = ComponentProps<"table">;
+export type TableHeaderProps = ComponentProps<"thead">;
+export type TableBodyProps = ComponentProps<"tbody">;
+export type TableFooterProps = ComponentProps<"tfoot">;
+export type TableRowProps = ComponentProps<"tr">;
+export type TableHeadProps = ComponentProps<"th">;
+export type TableCellProps = ComponentProps<"td">;
+export type TableCaptionProps = ComponentProps<"caption">;
+
+export const Table = ({ className, ...props }: TableProps) => (
+  <div className="w-full overflow-x-auto rounded-lg border border-border-primary bg-surface">
+    <table
+      className={cn(
+        "w-full border-collapse text-sm text-fg-primary",
+        className,
+      )}
+      {...props}
+    />
+  </div>
+);
+
+export const TableHeader = ({ className, ...props }: TableHeaderProps) => (
+  <thead
+    className={cn(
+      "bg-background-secondary [&_tr]:border-b [&_tr]:border-border-primary",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const TableBody = ({ className, ...props }: TableBodyProps) => (
+  <tbody className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+);
+
+export const TableFooter = ({ className, ...props }: TableFooterProps) => (
+  <tfoot
+    className={cn(
+      "border-t border-border-primary bg-background-secondary font-medium",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const TableRow = ({ className, ...props }: TableRowProps) => (
+  <tr
+    className={cn(
+      "border-b border-border-primary hover:bg-background-secondary",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const TableHead = ({ className, ...props }: TableHeadProps) => (
+  <th
+    className={cn(
+      "h-10 px-4 text-left text-xs-strong text-fg-secondary",
+      className,
+    )}
+    {...props}
+  />
+);
+
+export const TableCell = ({ className, ...props }: TableCellProps) => (
+  <td className={cn("px-4 py-3 align-middle", className)} {...props} />
+);
+
+export const TableCaption = ({ className, ...props }: TableCaptionProps) => (
+  <caption
+    className={cn(
+      "caption-bottom px-4 py-3 text-sm text-fg-secondary",
+      className,
+    )}
+    {...props}
+  />
+);

package/src/tabs.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { Tabs as BaseTabs } from "@base-ui/react/tabs"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+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>
+
+export const Tabs = ({ className, ...props }: TabsProps) => (
+  <BaseTabs.Root className={cn("flex w-full flex-col", className)} {...props} />
+)
+
+export const TabsList = ({ className, ...props }: TabsListProps) => (
+  <BaseTabs.List
+    className={cn(
+      "relative flex gap-0.5 border-b border-border-primary",
+      className,
+    )}
+    {...props}
+  />
+)
+
+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 const TabsIndicator = ({
+  className,
+  ...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}
+  />
+)
+
+export const TabsPanel = ({ className, ...props }: TabsPanelProps) => (
+  <BaseTabs.Panel
+    className={cn(
+      "pt-4 text-sm leading-relaxed text-fg-secondary outline-none focus-visible:outline-none",
+      className,
+    )}
+    {...props}
+  />
+)

package/src/text-animate.tsx

@@ -0,0 +1,155 @@
+"use client"
+
+import {
+  useEffect,
+  useMemo,
+  useState,
+  type HTMLAttributes,
+} from "react"
+import { cn } from "./lib/cn"
+
+const DECODE_GLYPHS =
+  "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789#@$%&*"
+
+export type TextAnimateEffect =
+  | "typewriter"
+  | "decode"
+  | "fade"
+  | "blur"
+
+export type TextAnimateProps = HTMLAttributes<HTMLSpanElement> & {
+  text: string
+  effect?: TextAnimateEffect
+  /** Milliseconds per character (typewriter / decode). */
+  speed?: number
+  /** Delay before animation starts. */
+  delay?: number
+  /** Replay when `text` changes. Default true. */
+  replay?: boolean
+  as?: "span" | "p" | "h1" | "h2" | "h3"
+}
+
+export const TextAnimate = ({
+  text,
+  effect = "typewriter",
+  speed = 40,
+  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 chars = useMemo(() => [...text], [text])
+
+  useEffect(() => {
+    let cancelled = false
+    let frame = 0
+    let timeoutId: ReturnType<typeof setTimeout> | undefined
+
+    const start = () => {
+      if (
+        typeof window !== "undefined" &&
+        window.matchMedia("(prefers-reduced-motion: reduce)").matches
+      ) {
+        setOutput(text)
+        setDone(true)
+        return
+      }
+
+      if (effect === "fade" || effect === "blur") {
+        setOutput(text)
+        setDone(true)
+        return
+      }
+
+      setDone(false)
+
+      if (effect === "typewriter") {
+        setOutput("")
+        let i = 0
+        const tick = () => {
+          if (cancelled) return
+          i += 1
+          setOutput(text.slice(0, i))
+          if (i < text.length) {
+            timeoutId = setTimeout(tick, speed)
+          } else {
+            setDone(true)
+          }
+        }
+        timeoutId = setTimeout(tick, speed)
+        return
+      }
+
+      // decode
+      setOutput(
+        chars.map(() => DECODE_GLYPHS[Math.floor(Math.random() * DECODE_GLYPHS.length)]).join(""),
+      )
+      let revealed = 0
+      const tick = () => {
+        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)
+        }
+      }
+      timeoutId = setTimeout(tick, speed)
+    }
+
+    timeoutId = setTimeout(start, delay)
+
+    return () => {
+      cancelled = true
+      if (timeoutId) clearTimeout(timeoutId)
+      cancelAnimationFrame(frame)
+    }
+  }, [chars, delay, effect, replay, speed, text])
+
+  if (effect === "fade" || effect === "blur") {
+    return (
+      <Tag
+        className={cn(
+          "inline-block text-fg-primary",
+          effect === "fade" &&
+            "animate-[text-fade-in_0.6s_ease-out_both] motion-reduce:animate-none",
+          effect === "blur" &&
+            "animate-[text-blur-in_0.7s_ease-out_both] motion-reduce:animate-none",
+          className,
+        )}
+        style={{ animationDelay: `${delay}ms` }}
+        data-done={done || undefined}
+        {...props}
+      >
+        {text}
+      </Tag>
+    )
+  }
+
+  return (
+    <Tag
+      className={cn(
+        "inline-block text-fg-primary",
+        effect === "typewriter" && !done && "after:ml-0.5 after:inline-block after:h-[1em] after:w-px after:translate-y-[0.1em] after:bg-current after:align-baseline after:content-[''] after:animate-pulse motion-reduce:after:animate-none",
+        className,
+      )}
+      aria-label={text}
+      data-done={done || undefined}
+      {...props}
+    >
+      <span aria-hidden>{output || "\u00A0"}</span>
+    </Tag>
+  )
+}

package/src/textarea.tsx

@@ -0,0 +1,58 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import type { TextareaHTMLAttributes } from "react"
+import { cn } from "./lib/cn"
+
+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-150 ease-out 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",
+  {
+    variants: {
+      variant: {
+        default: "border bg-surface inset-shadow-outline-top",
+        ghost: "border border-transparent bg-transparent",
+      },
+      invalid: {
+        true: "",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "default",
+        invalid: false,
+        class: "border-border-secondary",
+      },
+      {
+        variant: "default",
+        invalid: true,
+        class: "border-destructive",
+      },
+      {
+        variant: "ghost",
+        invalid: true,
+        class: "border-destructive",
+      },
+    ],
+    defaultVariants: {
+      variant: "default",
+      invalid: false,
+    },
+  },
+)
+
+export type TextareaProps = TextareaHTMLAttributes<HTMLTextAreaElement> &
+  VariantProps<typeof textareaVariants>
+
+export const Textarea = ({
+  className,
+  variant,
+  invalid,
+  ...props
+}: TextareaProps) => (
+  <textarea
+    className={cn(textareaVariants({ variant, invalid }), className)}
+    aria-invalid={invalid || undefined}
+    {...props}
+  />
+)
+
+export { textareaVariants }