@basementstudio/shader-lab 0.1.0

package/src/components/ui/slider/index.tsx

@@ -0,0 +1,192 @@
+"use client"
+
+import { Slider as BaseSlider } from "@base-ui/react/slider"
+import {
+  type CSSProperties,
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+  useEffect,
+  useEffectEvent,
+  useRef,
+  useState,
+} from "react"
+import { cn } from "@/lib/cn"
+
+type SliderProps = Omit<BaseSlider.Root.Props<number>, "children" | "className"> & {
+  className?: string
+  label?: ReactNode
+  valueFormatOptions?: Intl.NumberFormatOptions
+  valuePrefix?: string
+  valueSuffix?: string
+}
+
+const MAX_PULL = 8
+const PULL_DAMPING = 0.22
+function clampPullOffset(value: number) {
+  return Math.max(-MAX_PULL, Math.min(MAX_PULL, value * PULL_DAMPING))
+}
+
+export function Slider({
+  className,
+  defaultValue,
+  label,
+  locale,
+  max = 100,
+  min = 0,
+  onValueChange,
+  style,
+  value,
+  valueFormatOptions,
+  valuePrefix,
+  valueSuffix,
+  ...props
+}: SliderProps) {
+  const controlRef = useRef<HTMLDivElement | null>(null)
+  const [isVisualDragging, setIsVisualDragging] = useState(false)
+  const [pullOffset, setPullOffset] = useState(0)
+  let initialValue = min
+
+  if (typeof defaultValue === "number") {
+    initialValue = defaultValue
+  }
+
+  if (typeof value === "number") {
+    initialValue = value
+  }
+  const [, setCurrentValueState] = useState(initialValue)
+
+  useEffect(() => {
+    if (typeof value === "number") {
+      setCurrentValueState(value)
+    }
+  }, [value])
+
+  const updatePullOffset = useEffectEvent((clientX: number) => {
+    const control = controlRef.current
+
+    if (!control) {
+      return
+    }
+
+    const rect = control.getBoundingClientRect()
+
+    if (clientX < rect.left) {
+      setPullOffset(clampPullOffset(clientX - rect.left))
+      return
+    }
+
+    if (clientX > rect.right) {
+      setPullOffset(clampPullOffset(clientX - rect.right))
+      return
+    }
+
+    setPullOffset(0)
+  })
+
+  const handlePointerMove = useEffectEvent((event: PointerEvent) => {
+    updatePullOffset(event.clientX)
+  })
+
+  const resetPull = useEffectEvent(() => {
+    setIsVisualDragging(false)
+    setPullOffset(0)
+  })
+
+  useEffect(() => {
+    if (!isVisualDragging) {
+      return
+    }
+
+    window.addEventListener("pointermove", handlePointerMove)
+    window.addEventListener("pointerup", resetPull)
+    window.addEventListener("pointercancel", resetPull)
+
+    return () => {
+      window.removeEventListener("pointermove", handlePointerMove)
+      window.removeEventListener("pointerup", resetPull)
+      window.removeEventListener("pointercancel", resetPull)
+    }
+  }, [isVisualDragging])
+
+  const handlePointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
+    setIsVisualDragging(true)
+    updatePullOffset(event.clientX)
+  }
+
+  const pullIntensity = Math.min(Math.abs(pullOffset) / MAX_PULL, 1)
+  const thumbScaleX = 1 + pullIntensity * 0.08
+  const thumbScaleY = 1 - pullIntensity * 0.05
+  const sliderStyle = {
+    ...(style ?? {}),
+    "--slider-pull-scale-x": thumbScaleX.toString(),
+    "--slider-pull-scale-y": thumbScaleY.toString(),
+    "--slider-pull-x": `${pullOffset}px`,
+  } as CSSProperties
+
+  const handleValueChange = (
+    nextValue: number,
+    eventDetails: BaseSlider.Root.ChangeEventDetails
+  ) => {
+    if (typeof value !== "number") {
+      setCurrentValueState(nextValue)
+    }
+
+    onValueChange?.(nextValue, eventDetails)
+  }
+
+  return (
+    <BaseSlider.Root
+      className={cn("flex w-full flex-col gap-[var(--ds-space-2)]", className)}
+      data-visual-dragging={isVisualDragging ? "" : undefined}
+      defaultValue={defaultValue}
+      locale={locale}
+      max={max}
+      min={min}
+      onValueChange={handleValueChange}
+      style={sliderStyle}
+      value={value}
+      {...props}
+    >
+      <div className="flex items-center justify-between gap-[var(--ds-space-3)]">
+        {label ? (
+          <BaseSlider.Label className="text-[11px] leading-[14px] font-normal text-white/45">
+            {label}
+          </BaseSlider.Label>
+        ) : (
+          <span />
+        )}
+        <BaseSlider.Value className="shrink-0 text-right font-[var(--ds-font-mono)] text-[11px] leading-[14px] text-[var(--ds-color-text-secondary)]">
+          {(formattedValues, values) => {
+            const rawValue = values[0] ?? 0
+            const formattedValue =
+              valueFormatOptions
+                ? new Intl.NumberFormat(locale, valueFormatOptions).format(rawValue)
+                : (formattedValues[0] ?? rawValue.toString())
+
+            return `${valuePrefix ?? ""}${formattedValue}${valueSuffix ?? ""}`
+          }}
+        </BaseSlider.Value>
+      </div>
+
+      <BaseSlider.Control
+        className="relative flex min-h-5 w-full cursor-pointer items-center touch-none data-[disabled]:cursor-not-allowed"
+        onPointerDownCapture={handlePointerDown}
+        ref={controlRef}
+      >
+        <BaseSlider.Track className="relative h-1 flex-1 rounded-[2px] bg-white/10">
+          <BaseSlider.Indicator className="h-full rounded-[2px] bg-white/25" />
+        </BaseSlider.Track>
+        <BaseSlider.Thumb className="relative h-3 w-4 overflow-visible transition-[transform,outline-offset] duration-120 ease-[var(--ease-out-cubic)] active:scale-[0.96] data-[dragging]:scale-[0.96] focus-visible:outline-none data-[disabled]:opacity-45">
+          <span
+            className="block h-full w-full rounded-[var(--ds-radius-thumb)] border-2 border-white/15 bg-white/85 shadow-[var(--ds-shadow-knob)] transition-[background-color,box-shadow,transform] duration-[160ms,160ms,260ms] ease-[var(--ease-out-cubic),var(--ease-out-cubic),cubic-bezier(0.34,1.56,0.64,1)] will-change-transform hover:bg-white/92 focus-visible:shadow-[var(--ds-shadow-knob),0_0_0_3px_rgb(255_255_255_/_0.12)]"
+            style={{
+              transform:
+                "translateX(var(--slider-pull-x)) scaleX(var(--slider-pull-scale-x)) scaleY(var(--slider-pull-scale-y))",
+              transformOrigin: "center",
+            }}
+          />
+        </BaseSlider.Thumb>
+      </BaseSlider.Control>
+    </BaseSlider.Root>
+  )
+}

package/src/components/ui/toggle/index.tsx

@@ -0,0 +1,34 @@
+"use client"
+
+import { Switch as BaseSwitch } from "@base-ui/react/switch"
+import { type ReactNode, useId } from "react"
+import { cn } from "@/lib/cn"
+
+type ToggleProps = Omit<BaseSwitch.Root.Props, "children" | "className"> & {
+  className?: string
+  label?: ReactNode
+}
+
+export function Toggle({ className, label, ...props }: ToggleProps) {
+  const labelId = useId()
+
+  return (
+    <div className={cn("inline-flex items-center gap-[10px] cursor-pointer", className)}>
+      <BaseSwitch.Root
+        aria-labelledby={label ? labelId : undefined}
+        className="inline-flex h-5 w-[34px] shrink-0 items-center justify-start rounded-[var(--ds-radius-icon)] bg-white/10 p-[3px] transition-[background-color,transform] duration-160 ease-[var(--ease-out-cubic)] data-[checked]:bg-white/35 active:not-data-disabled:scale-[0.98] focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-border-active)] data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45"
+        {...props}
+      >
+        <BaseSwitch.Thumb className="h-3 w-4 rounded-[var(--ds-radius-thumb)] bg-white/50 shadow-[var(--ds-shadow-toggle-knob-off)] transition-[background-color,box-shadow,transform] duration-160 ease-[var(--ease-out-cubic)] data-[checked]:translate-x-3 data-[checked]:bg-white/95 data-[checked]:shadow-[var(--ds-shadow-toggle-knob-on)]" />
+      </BaseSwitch.Root>
+      {label ? (
+        <span
+          className="text-[11px] leading-[14px] text-[var(--ds-color-text-secondary)]"
+          id={labelId}
+        >
+          {label}
+        </span>
+      ) : null}
+    </div>
+  )
+}

package/src/components/ui/typography/index.tsx

@@ -0,0 +1,61 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import type { ComponentPropsWithoutRef, ElementType } from "react"
+import { cn } from "@/lib/cn"
+
+const typographyVariants = cva("m-0", {
+  variants: {
+    variant: {
+      display: "type-display",
+      heading: "type-heading",
+      title: "type-title",
+      body: "type-body",
+      label: "type-label",
+      caption: "type-caption",
+      overline: "type-overline",
+      monoMd: "type-mono-md",
+      monoSm: "type-mono-sm",
+      monoXs: "type-mono-xs",
+    },
+    tone: {
+      primary: "text-[var(--ds-color-text-primary)]",
+      secondary: "text-[var(--ds-color-text-secondary)]",
+      tertiary: "text-[var(--ds-color-text-tertiary)]",
+      muted: "text-[var(--ds-color-text-muted)]",
+      disabled: "text-[var(--ds-color-text-disabled)]",
+      onLight: "text-[var(--ds-color-text-on-light)]",
+    },
+    align: {
+      left: "text-left",
+      center: "text-center",
+      right: "text-right",
+    },
+  },
+  defaultVariants: {
+    variant: "body",
+    tone: "primary",
+    align: "left",
+  },
+})
+
+type TypographyProps<T extends ElementType> = {
+  as?: T
+} & VariantProps<typeof typographyVariants> &
+  Omit<ComponentPropsWithoutRef<T>, "as" | "color">
+
+export function Typography<T extends ElementType = "p">({
+  as,
+  className,
+  variant,
+  tone,
+  align,
+  ...props
+}: TypographyProps<T>) {
+  const Component = as ?? "p"
+
+  return (
+    <Component
+      className={cn(typographyVariants({ variant, tone, align }), className)}
+      {...props}
+    />
+  )
+}

package/src/components/ui/xy-pad/index.tsx

@@ -0,0 +1,160 @@
+"use client"
+
+import { type CSSProperties, type KeyboardEvent, type PointerEvent, type ReactNode, useMemo, useRef } from "react"
+import { cn } from "@/lib/cn"
+
+type XYPadProps = {
+  className?: string
+  label?: ReactNode
+  max?: number
+  min?: number
+  onValueChange: (value: [number, number]) => void
+  step?: number
+  value: [number, number]
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value))
+}
+
+function roundToStep(value: number, step: number, min: number): number {
+  if (!(Number.isFinite(step) && step > 0)) {
+    return value
+  }
+
+  return Math.round((value - min) / step) * step + min
+}
+
+function formatValue(value: number): string {
+  return value.toFixed(2)
+}
+
+export function XYPad({
+  className,
+  label,
+  max = 1,
+  min = -1,
+  onValueChange,
+  step = 0.01,
+  value,
+}: XYPadProps) {
+  const surfaceRef = useRef<HTMLButtonElement | null>(null)
+  const range = Math.max(max - min, Number.EPSILON)
+
+  const style = useMemo(
+    () =>
+      ({
+        "--xy-pad-display-x":
+          "clamp(var(--xy-pad-handle-margin), var(--xy-pad-x), calc(100% - var(--xy-pad-handle-margin)))",
+        "--xy-pad-display-y":
+          "clamp(var(--xy-pad-handle-margin), var(--xy-pad-y), calc(100% - var(--xy-pad-handle-margin)))",
+        "--xy-pad-handle-margin": "14px",
+        "--xy-pad-x": `${((clamp(value[0], min, max) - min) / range) * 100}%`,
+        "--xy-pad-y": `${(1 - (clamp(value[1], min, max) - min) / range) * 100}%`,
+      }) as CSSProperties,
+    [max, min, range, value],
+  )
+
+  const commitPosition = (clientX: number, clientY: number) => {
+    const surface = surfaceRef.current
+
+    if (!surface) {
+      return
+    }
+
+    const rect = surface.getBoundingClientRect()
+    const normalizedX = clamp((clientX - rect.left) / rect.width, 0, 1)
+    const normalizedY = clamp((clientY - rect.top) / rect.height, 0, 1)
+    const nextX = clamp(roundToStep(min + normalizedX * range, step, min), min, max)
+    const nextY = clamp(roundToStep(min + (1 - normalizedY) * range, step, min), min, max)
+
+    onValueChange([nextX, nextY])
+  }
+
+  const handlePointerDown = (event: PointerEvent<HTMLButtonElement>) => {
+    event.currentTarget.setPointerCapture(event.pointerId)
+    commitPosition(event.clientX, event.clientY)
+  }
+
+  const handlePointerMove = (event: PointerEvent<HTMLButtonElement>) => {
+    if (!(event.buttons & 1)) {
+      return
+    }
+
+    commitPosition(event.clientX, event.clientY)
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+    let nextX = value[0]
+    let nextY = value[1]
+
+    switch (event.key) {
+      case "ArrowLeft":
+        nextX -= step
+        break
+      case "ArrowRight":
+        nextX += step
+        break
+      case "ArrowDown":
+        nextY -= step
+        break
+      case "ArrowUp":
+        nextY += step
+        break
+      default:
+        return
+    }
+
+    event.preventDefault()
+    onValueChange([
+      clamp(roundToStep(nextX, step, min), min, max),
+      clamp(roundToStep(nextY, step, min), min, max),
+    ])
+  }
+
+  return (
+    <div className={cn("flex w-full flex-col gap-[var(--ds-space-2)]", className)}>
+      <div className="flex items-center justify-between gap-[var(--ds-space-3)]">
+        <div className="inline-flex min-w-0 items-center gap-2">
+          {label ? <span className="text-[11px] leading-[14px] font-normal text-white/45">{label}</span> : <span />}
+          <span className="inline-flex min-h-[18px] items-center rounded-full border border-white/8 bg-white/6 px-1.5 font-[var(--ds-font-mono)] text-[10px] leading-3 text-[var(--ds-color-text-muted)]">
+            X/Y
+          </span>
+        </div>
+        <span className="shrink-0 text-right font-[var(--ds-font-mono)] text-[11px] leading-[14px] text-[var(--ds-color-text-secondary)]">
+          {formatValue(value[0])}, {formatValue(value[1])}
+        </span>
+      </div>
+
+      <button
+        aria-label={typeof label === "string" ? label : "XY pad"}
+        className="relative h-[156px] w-full cursor-crosshair overflow-hidden rounded-[calc(var(--ds-radius-control)+2px)] border border-white/8 bg-[radial-gradient(circle_at_center,rgb(255_255_255_/_0.05),transparent_58%),linear-gradient(180deg,rgb(255_255_255_/_0.04),rgb(255_255_255_/_0.01))] shadow-[inset_0_1px_0_rgb(255_255_255_/_0.04)] touch-none focus-visible:outline-none focus-visible:shadow-[inset_0_1px_0_rgb(255_255_255_/_0.04),0_0_0_3px_rgb(255_255_255_/_0.12)] active:[&_.xy-handle]:scale-90"
+        onKeyDown={handleKeyDown}
+        onPointerDown={handlePointerDown}
+        onPointerMove={handlePointerMove}
+        ref={surfaceRef}
+        style={style}
+        type="button"
+      >
+        <div className="absolute inset-0 bg-[linear-gradient(rgb(255_255_255_/_0.06)_1px,transparent_1px),linear-gradient(90deg,rgb(255_255_255_/_0.06)_1px,transparent_1px)] bg-center bg-[length:25%_25%]" />
+        <div
+          className="pointer-events-none absolute inset-x-0 h-px bg-[linear-gradient(90deg,transparent,rgb(255_255_255_/_0.28),transparent)] transition-[top] duration-[220ms] ease-[cubic-bezier(0.34,1.56,0.64,1)]"
+          style={{ top: "var(--xy-pad-display-y)" }}
+        />
+        <div
+          className="pointer-events-none absolute top-0 bottom-0 w-px bg-[linear-gradient(180deg,transparent,rgb(255_255_255_/_0.28),transparent)] transition-[left] duration-[220ms] ease-[cubic-bezier(0.34,1.56,0.64,1)]"
+          style={{ left: "var(--xy-pad-display-x)" }}
+        />
+        <div
+          className="xy-handle pointer-events-none absolute h-[22px] w-[22px] -translate-x-1/2 -translate-y-1/2 transition-[left,top,transform] duration-[260ms,260ms,120ms] ease-[cubic-bezier(0.34,1.56,0.64,1),cubic-bezier(0.34,1.56,0.64,1),var(--ease-out-cubic)] will-change-[left,top,transform]"
+          style={{
+            left: "var(--xy-pad-display-x)",
+            top: "var(--xy-pad-display-y)",
+          }}
+        >
+          <span className="block h-full w-full rounded-full border-2 border-white/14 bg-[radial-gradient(circle_at_30%_30%,rgb(255_255_255_/_0.95),rgb(255_255_255_/_0.76)),linear-gradient(180deg,rgb(255_255_255_/_0.2),rgb(255_255_255_/_0.06))] shadow-[0_10px_20px_rgb(0_0_0_/_0.26),0_0_0_6px_rgb(255_255_255_/_0.05)] transition-[background-color,box-shadow] duration-160 ease-[var(--ease-out-cubic)]" />
+        </div>
+      </button>
+    </div>
+  )
+}