@boyernick/standard-ui-react 0.1.0

package/src/ticker.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import type { ComponentProps, CSSProperties } from "react"
+import { cn } from "./lib/cn"
+
+export type TickerProps = ComponentProps<"div"> & {
+  /** Animation duration for one full loop. */
+  duration?: number
+  /** Pause scrolling while hovered or focused. */
+  pauseOnHover?: boolean
+  /** Reverse scroll direction. */
+  reverse?: boolean
+}
+
+export type TickerItemProps = ComponentProps<"div">
+
+export const Ticker = ({
+  className,
+  children,
+  duration = 28,
+  pauseOnHover = true,
+  reverse = false,
+  style,
+  ...props
+}: TickerProps) => {
+  const mergedStyle = {
+    ...style,
+    "--ticker-duration": `${duration}s`,
+  } as CSSProperties
+
+  return (
+    <div
+      data-slot="ticker"
+      role="marquee"
+      aria-label="Scrolling updates"
+      className={cn(
+        "group relative overflow-hidden rounded-xl border border-border-primary bg-surface",
+        className,
+      )}
+      style={mergedStyle}
+      {...props}
+    >
+      <div
+        className={cn(
+          "flex w-max gap-8 py-3 whitespace-nowrap",
+          "animate-[ticker-scroll_var(--ticker-duration)_linear_infinite]",
+          "motion-reduce:animate-none",
+          reverse && "[animation-direction:reverse]",
+          pauseOnHover &&
+            "group-hover:[animation-play-state:paused] group-focus-within:[animation-play-state:paused]",
+        )}
+      >
+        <div className="flex shrink-0 items-center gap-8 px-4">{children}</div>
+        <div
+          className="flex shrink-0 items-center gap-8 px-4"
+          aria-hidden
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export const TickerItem = ({ className, ...props }: TickerItemProps) => (
+  <div
+    data-slot="ticker-item"
+    className={cn(
+      "inline-flex items-center gap-2 text-sm text-fg-secondary",
+      className,
+    )}
+    {...props}
+  />
+)

package/src/toast.tsx

@@ -0,0 +1,142 @@
+"use client"
+
+import { Toast as BaseToast } from "@base-ui/react/toast"
+import type { ComponentProps } from "react"
+import { IconCrossSmall } from "./icons"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type ToastProviderProps = ComponentProps<typeof BaseToast.Provider>
+export type ToastPortalProps = ComponentProps<typeof BaseToast.Portal>
+export type ToastViewportProps = ComponentProps<typeof BaseToast.Viewport>
+export type ToastRootProps = ComponentProps<typeof BaseToast.Root>
+export type ToastContentProps = ComponentProps<typeof BaseToast.Content>
+export type ToastTitleProps = ComponentProps<typeof BaseToast.Title>
+export type ToastDescriptionProps = ComponentProps<typeof BaseToast.Description>
+export type ToastActionProps = ComponentProps<typeof BaseToast.Action>
+export type ToastCloseProps = ComponentProps<typeof BaseToast.Close>
+export type ToastPositionerProps = ComponentProps<typeof BaseToast.Positioner>
+export type ToastArrowProps = ComponentProps<typeof BaseToast.Arrow>
+
+export const ToastProvider = (props: ToastProviderProps) => (
+  <BaseToast.Provider {...props} />
+)
+
+export const ToastPortal = (props: ToastPortalProps) => (
+  <BaseToast.Portal {...props} />
+)
+
+export const ToastViewport = ({ className, ...props }: ToastViewportProps) => (
+  <BaseToast.Viewport
+    className={cn(
+      "fixed right-4 bottom-4 z-[100] flex w-[min(100vw-2rem,24rem)] flex-col outline-none",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const ToastRoot = ({ className, ...props }: ToastRootProps) => (
+  <BaseToast.Root
+    className={cn(
+      "relative z-[calc(1000-var(--toast-index))] mb-2 box-border w-full rounded-xl border border-border-primary bg-surface p-4 shadow-lg outline-none",
+      "h-[var(--toast-frontmost-height,var(--toast-height))]",
+      "transition-[transform,opacity] duration-200 ease-out motion-reduce:transition-none",
+      "data-starting-style:opacity-0 data-starting-style:translate-y-2",
+      "data-ending-style:opacity-0 data-ending-style:translate-y-2",
+      "data-expanded:h-[var(--toast-height)] data-expanded:translate-y-[var(--toast-offset-y)]",
+      "data-[type=error]:border-destructive/40",
+      "data-[type=success]:border-border-primary",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const ToastContent = ({ className, ...props }: ToastContentProps) => (
+  <BaseToast.Content
+    className={cn(
+      "flex flex-col gap-1 overflow-hidden transition-opacity duration-150",
+      "data-behind:pointer-events-none data-behind:opacity-0 data-expanded:data-behind:opacity-100",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const ToastTitle = ({ className, ...props }: ToastTitleProps) => (
+  <BaseToast.Title
+    className={cn("text-sm-strong pr-8 text-fg-primary", className)}
+    {...props}
+  />
+)
+
+export const ToastDescription = ({
+  className,
+  ...props
+}: ToastDescriptionProps) => (
+  <BaseToast.Description
+    className={cn("text-sm leading-relaxed text-fg-secondary", className)}
+    {...props}
+  />
+)
+
+export const ToastAction = ({ className, ...props }: ToastActionProps) => (
+  <BaseToast.Action
+    className={cn(
+      "mt-2 inline-flex h-8 cursor-pointer items-center justify-center rounded-md px-2.5 text-sm text-fg-primary 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",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const ToastClose = ({
+  className,
+  children,
+  ...props
+}: ToastCloseProps) => (
+  <BaseToast.Close
+    className={cn(
+      "absolute top-3 right-3 inline-flex size-7 cursor-pointer items-center justify-center rounded-md text-fg-tertiary outline-none",
+      motion.colors,
+      "hover:bg-background-tertiary 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",
+      className,
+    )}
+    {...props}
+  >
+    {children ?? (
+      <IconCrossSmall size={14} className="size-3.5" aria-hidden />
+    )}
+  </BaseToast.Close>
+)
+
+export const ToastPositioner = ({
+  className,
+  ...props
+}: ToastPositionerProps) => (
+  <BaseToast.Positioner
+    className={cn("z-[100] outline-none", className)}
+    {...props}
+  />
+)
+
+export const ToastArrow = ({ className, ...props }: ToastArrowProps) => (
+  <BaseToast.Arrow
+    className={cn(
+      "data-[side=bottom]:top-[-6px] data-[side=left]:right-[-6px] data-[side=right]:left-[-6px] data-[side=top]:bottom-[-6px]",
+      "size-2.5 rotate-45 border border-border-primary bg-surface",
+      "data-[side=bottom]:border-r-0 data-[side=bottom]:border-b-0",
+      "data-[side=top]:border-t-0 data-[side=top]:border-l-0",
+      "data-[side=left]:border-b-0 data-[side=left]:border-l-0",
+      "data-[side=right]:border-t-0 data-[side=right]:border-r-0",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const useToastManager = BaseToast.useToastManager
+export const createToastManager = BaseToast.createToastManager

package/src/toggle.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { Toggle as BaseToggle } from "@base-ui/react/toggle"
+import { ToggleGroup as BaseToggleGroup } from "@base-ui/react/toggle-group"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type ToggleProps = ComponentProps<typeof BaseToggle>
+export type ToggleGroupProps = ComponentProps<typeof BaseToggleGroup>
+
+export const Toggle = ({ className, ...props }: ToggleProps) => (
+  <BaseToggle
+    className={cn(
+      "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md border border-transparent px-2.5 text-sm text-fg-secondary outline-none",
+      motion.colors,
+      "hover:bg-background-tertiary 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 data-pressed:bg-background-tertiary data-pressed:text-fg-primary",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const ToggleGroup = ({ className, ...props }: ToggleGroupProps) => (
+  <BaseToggleGroup
+    className={cn(
+      "inline-flex items-center gap-0.5 rounded-lg border border-border-primary bg-background-secondary p-0.5",
+      className,
+    )}
+    {...props}
+  />
+)

package/src/toolbar.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { Toolbar as BaseToolbar } from "@base-ui/react/toolbar"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type ToolbarProps = ComponentProps<typeof BaseToolbar.Root>
+export type ToolbarGroupProps = ComponentProps<typeof BaseToolbar.Group>
+export type ToolbarButtonProps = ComponentProps<typeof BaseToolbar.Button>
+export type ToolbarLinkProps = ComponentProps<typeof BaseToolbar.Link>
+export type ToolbarInputProps = ComponentProps<typeof BaseToolbar.Input>
+export type ToolbarSeparatorProps = ComponentProps<typeof BaseToolbar.Separator>
+
+export const Toolbar = ({ className, ...props }: ToolbarProps) => (
+  <BaseToolbar.Root
+    className={cn(
+      "inline-flex items-center gap-0.5 rounded-lg border border-border-primary bg-background-secondary p-0.5",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const ToolbarGroup = ({ className, ...props }: ToolbarGroupProps) => (
+  <BaseToolbar.Group
+    className={cn("flex items-center gap-0.5", className)}
+    {...props}
+  />
+)
+
+export const ToolbarButton = ({ className, ...props }: ToolbarButtonProps) => (
+  <BaseToolbar.Button
+    className={cn(
+      "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2.5 text-sm text-fg-secondary outline-none",
+      motion.colors,
+      "hover:bg-background-tertiary 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-disabled:cursor-not-allowed data-disabled:opacity-50 data-pressed:bg-background-tertiary data-pressed:text-fg-primary",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const ToolbarLink = ({ className, ...props }: ToolbarLinkProps) => (
+  <BaseToolbar.Link
+    className={cn(
+      "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-md px-2.5 text-sm text-fg-secondary outline-none",
+      motion.colors,
+      "hover:bg-background-tertiary 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",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const ToolbarInput = ({ className, ...props }: ToolbarInputProps) => (
+  <BaseToolbar.Input
+    className={cn(
+      "h-8 min-w-28 cursor-text rounded-md border border-border-secondary bg-surface px-2.5 text-sm text-fg-primary outline-none 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",
+      className,
+    )}
+    {...props}
+  />
+)
+
+export const ToolbarSeparator = ({
+  className,
+  ...props
+}: ToolbarSeparatorProps) => (
+  <BaseToolbar.Separator
+    className={cn("mx-0.5 h-5 w-px bg-border-primary", className)}
+    {...props}
+  />
+)

package/src/tooltip.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type TooltipProviderProps = ComponentProps<typeof BaseTooltip.Provider>
+export type TooltipProps = ComponentProps<typeof BaseTooltip.Root>
+export type TooltipTriggerProps = ComponentProps<typeof BaseTooltip.Trigger>
+export type TooltipPortalProps = ComponentProps<typeof BaseTooltip.Portal>
+export type TooltipPositionerProps = ComponentProps<
+  typeof BaseTooltip.Positioner
+>
+export type TooltipPopupProps = ComponentProps<typeof BaseTooltip.Popup>
+
+export const TooltipProvider = (props: TooltipProviderProps) => (
+  <BaseTooltip.Provider {...props} />
+)
+
+export const Tooltip = (props: TooltipProps) => <BaseTooltip.Root {...props} />
+
+export const TooltipTrigger = ({
+  className,
+  ...props
+}: TooltipTriggerProps) => (
+  <BaseTooltip.Trigger className={cn(className)} {...props} />
+)
+
+export const TooltipPortal = (props: TooltipPortalProps) => (
+  <BaseTooltip.Portal {...props} />
+)
+
+export const TooltipPositioner = ({
+  sideOffset = 6,
+  className,
+  ...props
+}: TooltipPositionerProps) => (
+  <BaseTooltip.Positioner
+    sideOffset={sideOffset}
+    className={cn("z-50 outline-none", className)}
+    {...props}
+  />
+)
+
+export const TooltipPopup = ({ className, ...props }: TooltipPopupProps) => (
+  <BaseTooltip.Popup
+    className={cn(
+      "z-50 max-w-xs rounded-md bg-surface-inverted px-2.5 py-1 text-xs text-fg-inverted shadow-md outline-none",
+      motion.popupAnchor,
+      className,
+    )}
+    {...props}
+  />
+)

package/src/video-player.tsx

@@ -0,0 +1,241 @@
+"use client"
+
+import {
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type ComponentProps,
+} from "react"
+import { Button } from "./button"
+import { cn } from "./lib/cn"
+
+const formatTime = (seconds: number) => {
+  if (!Number.isFinite(seconds) || seconds < 0) return "0:00"
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, "0")}`
+}
+
+export type VideoPlayerProps = ComponentProps<"div"> & {
+  src: string
+  poster?: string
+  title?: string
+  /** Accessible name for the video. Defaults to title. */
+  "aria-label"?: string
+}
+
+export const VideoPlayer = ({
+  src,
+  poster,
+  title,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}: VideoPlayerProps) => {
+  const videoRef = useRef<HTMLVideoElement>(null)
+  const seekId = useId()
+  const [playing, setPlaying] = useState(false)
+  const [muted, setMuted] = useState(false)
+  const [current, setCurrent] = useState(0)
+  const [duration, setDuration] = useState(0)
+
+  const handleTogglePlay = useCallback(() => {
+    const video = videoRef.current
+    if (!video) return
+    if (video.paused) {
+      void video.play()
+    } else {
+      video.pause()
+    }
+  }, [])
+
+  const handleToggleMute = useCallback(() => {
+    const video = videoRef.current
+    if (!video) return
+    video.muted = !video.muted
+    setMuted(video.muted)
+  }, [])
+
+  const handleSeek = useCallback((value: number) => {
+    const video = videoRef.current
+    if (!video) return
+    video.currentTime = value
+    setCurrent(value)
+  }, [])
+
+  const handleFullscreen = useCallback(() => {
+    const video = videoRef.current
+    if (!video) return
+    if (document.fullscreenElement) {
+      void document.exitFullscreen()
+      return
+    }
+    void video.requestFullscreen?.()
+  }, [])
+
+  useEffect(() => {
+    const video = videoRef.current
+    if (!video) return
+
+    const handlePlay = () => setPlaying(true)
+    const handlePause = () => setPlaying(false)
+    const handleTime = () => setCurrent(video.currentTime)
+    const handleMeta = () => setDuration(video.duration || 0)
+
+    video.addEventListener("play", handlePlay)
+    video.addEventListener("pause", handlePause)
+    video.addEventListener("timeupdate", handleTime)
+    video.addEventListener("loadedmetadata", handleMeta)
+
+    return () => {
+      video.removeEventListener("play", handlePlay)
+      video.removeEventListener("pause", handlePause)
+      video.removeEventListener("timeupdate", handleTime)
+      video.removeEventListener("loadedmetadata", handleMeta)
+    }
+  }, [])
+
+  const progress = duration > 0 ? (current / duration) * 100 : 0
+
+  return (
+    <div
+      data-slot="video-player"
+      className={cn(
+        "overflow-hidden rounded-xl border border-border-primary bg-surface",
+        className,
+      )}
+      {...props}
+    >
+      <div className="relative bg-gray-1000">
+        <video
+          ref={videoRef}
+          src={src}
+          poster={poster}
+          playsInline
+          className="aspect-video w-full cursor-pointer object-cover"
+          aria-label={ariaLabel ?? title ?? "Video"}
+          onClick={handleTogglePlay}
+        />
+        {!playing ? (
+          <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-black/20">
+            <span className="flex size-12 items-center justify-center rounded-full bg-surface/90 text-fg-primary shadow-md">
+              <PlayIcon />
+            </span>
+          </div>
+        ) : null}
+      </div>
+
+      <div className="flex flex-col gap-3 border-t border-border-primary bg-surface p-3">
+        {title ? (
+          <p className="text-sm-strong truncate text-fg-primary">{title}</p>
+        ) : null}
+
+        <div className="flex items-center gap-3">
+          <label className="sr-only" htmlFor={seekId}>
+            Seek
+          </label>
+          <input
+            id={seekId}
+            type="range"
+            min={0}
+            max={duration || 0}
+            step={0.1}
+            value={current}
+            onChange={(event) => handleSeek(Number(event.target.value))}
+            className="h-1.5 w-full cursor-pointer appearance-none rounded-full bg-background-quaternary accent-[var(--brand-primary)] [&::-webkit-slider-thumb]:size-3.5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-brand-primary"
+            style={{
+              background: `linear-gradient(to right, var(--brand-primary) ${progress}%, var(--background-quaternary) ${progress}%)`,
+            }}
+            aria-valuetext={`${formatTime(current)} of ${formatTime(duration)}`}
+          />
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            iconOnly
+            rounded
+            aria-label={playing ? "Pause" : "Play"}
+            onClick={handleTogglePlay}
+          >
+            {playing ? <PauseIcon /> : <PlayIcon />}
+          </Button>
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            iconOnly
+            rounded
+            aria-label={muted ? "Unmute" : "Mute"}
+            onClick={handleToggleMute}
+          >
+            {muted ? <MuteIcon /> : <VolumeIcon />}
+          </Button>
+          <span className="text-xs font-mono text-fg-tertiary">
+            {formatTime(current)} / {formatTime(duration)}
+          </span>
+          <div className="ml-auto">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              iconOnly
+              rounded
+              aria-label="Fullscreen"
+              onClick={handleFullscreen}
+            >
+              <FullscreenIcon />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+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>
+)
+
+const PauseIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" className="size-4" aria-hidden>
+    <path d="M8 7h3v10H8V7Zm5 0h3v10h-3V7Z" fill="currentColor" />
+  </svg>
+)
+
+const VolumeIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" className="size-4" aria-hidden>
+    <path
+      d="M4 10v4h3l4 3V7L7 10H4Zm11.5 2a2.5 2.5 0 0 0-1.5-2.3v4.6A2.5 2.5 0 0 0 15.5 12Zm0-5.5v1.6a4 4 0 0 1 0 7.8v1.6a5.5 5.5 0 0 0 0-11Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+const MuteIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" className="size-4" aria-hidden>
+    <path
+      d="M4 10v4h3l4 3V7L7 10H4Zm11.2-.8 1.4-1.4 1.4 1.4 1.4-1.4 1.4 1.4-1.4 1.4 1.4 1.4-1.4 1.4-1.4-1.4-1.4 1.4-1.4-1.4 1.4-1.4-1.4-1.4Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+const FullscreenIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" className="size-4" aria-hidden>
+    <path
+      d="M7 9V7h3v2H7Zm7 0V7h3v2h-3ZM7 17v-2h3v2H7Zm7 0v-2h3v2h-3Z"
+      fill="currentColor"
+    />
+    <path
+      d="M5 5h5v2H7v3H5V5Zm9 0h5v5h-2V7h-3V5ZM5 14h2v3h3v2H5v-5Zm12 3h-3v2h5v-5h-2v3Z"
+      fill="currentColor"
+    />
+  </svg>
+)