@basementstudio/shader-lab 0.1.0 → 1.0.2

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

@@ -1,192 +0,0 @@
-"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

@@ -1,34 +0,0 @@
-"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

@@ -1,61 +0,0 @@
-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

@@ -1,160 +0,0 @@
-"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>
-  )
-}