@boyernick/standard-ui-react 0.1.0

package/src/carousel.tsx

@@ -0,0 +1,253 @@
+"use client"
+
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react"
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+  type ComponentProps,
+  type KeyboardEvent,
+} from "react"
+import { Button } from "./button"
+import { IconChevronRightSmall } from "./icons"
+import { cn } from "./lib/cn"
+
+type CarouselApi = UseEmblaCarouselType[1]
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type CarouselOptions = UseCarouselParameters[0]
+type CarouselPlugin = UseCarouselParameters[1]
+
+type CarouselContextValue = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  api: CarouselApi
+  scrollPrev: () => void
+  scrollNext: () => void
+  canScrollPrev: boolean
+  canScrollNext: boolean
+  orientation: "horizontal" | "vertical"
+}
+
+const CarouselContext = createContext<CarouselContextValue | null>(null)
+
+const useCarousel = () => {
+  const context = useContext(CarouselContext)
+  if (!context) {
+    throw new Error("Carousel components must be used within <Carousel>")
+  }
+  return context
+}
+
+export type CarouselProps = ComponentProps<"div"> & {
+  opts?: CarouselOptions
+  plugins?: CarouselPlugin
+  orientation?: "horizontal" | "vertical"
+  setApi?: (api: CarouselApi) => void
+}
+
+export type CarouselContentProps = ComponentProps<"div">
+export type CarouselItemProps = ComponentProps<"div">
+export type CarouselPreviousProps = ComponentProps<typeof Button>
+export type CarouselNextProps = ComponentProps<typeof Button>
+
+export const Carousel = ({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  onKeyDownCapture,
+  ...props
+}: CarouselProps) => {
+  const [carouselRef, api] = useEmblaCarousel(
+    {
+      ...opts,
+      axis: orientation === "horizontal" ? "x" : "y",
+    },
+    plugins,
+  )
+  const [canScrollPrev, setCanScrollPrev] = useState(false)
+  const [canScrollNext, setCanScrollNext] = useState(false)
+
+  const handleSelect = useCallback((instance: CarouselApi) => {
+    if (!instance) return
+    setCanScrollPrev(instance.canScrollPrev())
+    setCanScrollNext(instance.canScrollNext())
+  }, [])
+
+  const scrollPrev = useCallback(() => {
+    api?.scrollPrev()
+  }, [api])
+
+  const scrollNext = useCallback(() => {
+    api?.scrollNext()
+  }, [api])
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      onKeyDownCapture?.(event)
+      if (event.defaultPrevented) return
+      if (event.key === "ArrowLeft") {
+        event.preventDefault()
+        scrollPrev()
+      } else if (event.key === "ArrowRight") {
+        event.preventDefault()
+        scrollNext()
+      }
+    },
+    [onKeyDownCapture, scrollNext, scrollPrev],
+  )
+
+  useEffect(() => {
+    if (!api || !setApi) return
+    setApi(api)
+  }, [api, setApi])
+
+  useEffect(() => {
+    if (!api) return
+    handleSelect(api)
+    api.on("reInit", handleSelect)
+    api.on("select", handleSelect)
+    return () => {
+      api.off("reInit", handleSelect)
+      api.off("select", handleSelect)
+    }
+  }, [api, handleSelect])
+
+  return (
+    <CarouselContext.Provider
+      value={{
+        carouselRef,
+        api,
+        scrollPrev,
+        scrollNext,
+        canScrollPrev,
+        canScrollNext,
+        orientation,
+      }}
+    >
+      <div
+        role="region"
+        aria-roledescription="carousel"
+        data-slot="carousel"
+        className={cn("relative", className)}
+        onKeyDownCapture={handleKeyDown}
+        {...props}
+      >
+        {children}
+      </div>
+    </CarouselContext.Provider>
+  )
+}
+
+export const CarouselContent = ({
+  className,
+  ...props
+}: CarouselContentProps) => {
+  const { carouselRef, orientation } = useCarousel()
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden" data-slot="carousel-viewport">
+      <div
+        data-slot="carousel-content"
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export const CarouselItem = ({ className, ...props }: CarouselItemProps) => {
+  const { orientation } = useCarousel()
+
+  return (
+    <div
+      role="group"
+      aria-roledescription="slide"
+      data-slot="carousel-item"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export const CarouselPrevious = ({
+  className,
+  variant = "outline",
+  size = "md",
+  ...props
+}: CarouselPreviousProps) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
+
+  return (
+    <Button
+      type="button"
+      variant={variant}
+      size={size}
+      iconOnly
+      rounded
+      disabled={!canScrollPrev}
+      aria-label="Previous slide"
+      data-slot="carousel-previous"
+      className={cn(
+        "absolute size-9",
+        orientation === "horizontal"
+          ? "top-1/2 -left-12 -translate-y-1/2 active:!-translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90 active:!-translate-x-1/2 active:!translate-y-0",
+        className,
+      )}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <IconChevronRightSmall className="rotate-180" aria-hidden />
+    </Button>
+  )
+}
+
+export const CarouselNext = ({
+  className,
+  variant = "outline",
+  size = "md",
+  ...props
+}: CarouselNextProps) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel()
+
+  return (
+    <Button
+      type="button"
+      variant={variant}
+      size={size}
+      iconOnly
+      rounded
+      disabled={!canScrollNext}
+      aria-label="Next slide"
+      data-slot="carousel-next"
+      className={cn(
+        "absolute size-9",
+        orientation === "horizontal"
+          ? "top-1/2 -right-12 -translate-y-1/2 active:!-translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90 active:!-translate-x-1/2 active:!translate-y-0",
+        className,
+      )}
+      onClick={scrollNext}
+      {...props}
+    >
+      <IconChevronRightSmall aria-hidden />
+    </Button>
+  )
+}
+
+export type { CarouselApi }
+export { useCarousel }

package/src/chart.tsx

@@ -0,0 +1,185 @@
+"use client"
+
+import type { ComponentProps, CSSProperties, ReactElement } from "react"
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Legend as RechartsLegend,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  Tooltip as RechartsTooltip,
+  XAxis,
+  YAxis,
+} from "recharts"
+import { cn } from "./lib/cn"
+
+const chartColorVars = {
+  "--color-chart-1": "rgb(var(--chart-1))",
+  "--color-chart-2": "rgb(var(--chart-2))",
+  "--color-chart-3": "rgb(var(--chart-3))",
+  "--color-chart-4": "rgb(var(--chart-4))",
+  "--color-chart-5": "rgb(var(--chart-5))",
+  "--color-chart-neutral": "rgb(var(--chart-neutral))",
+} as CSSProperties
+
+export type ChartContainerProps = ComponentProps<"div"> & {
+  children: ReactElement
+}
+
+export const ChartContainer = ({
+  className,
+  children,
+  style,
+  ...props
+}: ChartContainerProps) => (
+  <div
+    className={cn(
+      "relative flex w-full min-h-[200px] justify-center text-xs text-fg-secondary [&_.recharts-cartesian-axis-tick_text]:fill-fg-tertiary [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border-primary/40 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border-primary [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-background-tertiary/50 [&_.recharts-layer]:outline-none [&_.recharts-surface]:outline-none",
+      className,
+    )}
+    style={{ ...chartColorVars, ...style }}
+    {...props}
+  >
+    <ResponsiveContainer width="100%" height="100%" minHeight={200}>
+      {children}
+    </ResponsiveContainer>
+  </div>
+)
+
+type ChartTooltipPayloadItem = {
+  name?: string | number
+  value?: string | number
+  color?: string
+  dataKey?: string | number
+}
+
+export type ChartTooltipContentProps = {
+  active?: boolean
+  label?: string | number
+  payload?: ChartTooltipPayloadItem[]
+  className?: string
+  indicator?: "dot" | "line"
+}
+
+export const ChartTooltipContent = ({
+  active,
+  label,
+  payload,
+  className,
+  indicator = "dot",
+}: ChartTooltipContentProps) => {
+  if (!active || !payload?.length) return null
+
+  return (
+    <div
+      className={cn(
+        "rounded-md border border-border-primary bg-surface px-2.5 py-1.5 shadow-md",
+        className,
+      )}
+    >
+      {label != null ? (
+        <p className="text-xs mb-1 text-fg-tertiary">{label}</p>
+      ) : null}
+      <div className="flex flex-col gap-0.5">
+        {payload.map((item, index) => (
+          <div
+            key={`${item.dataKey ?? item.name ?? index}`}
+            className="flex items-center gap-2 text-xs text-fg-secondary"
+          >
+            <span
+              className={cn(
+                "shrink-0 rounded-full",
+                indicator === "line" ? "h-0.5 w-3" : "size-2",
+              )}
+              style={{ backgroundColor: item.color }}
+            />
+            <span className="truncate">{item.name}</span>
+            <span className="ml-auto tabular-nums text-fg-primary">
+              {item.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export type ChartTooltipProps = ComponentProps<typeof RechartsTooltip>
+
+export const ChartTooltip = ({
+  content,
+  cursor = { stroke: "var(--border-primary)", strokeWidth: 1 },
+  animationDuration = 150,
+  ...props
+}: ChartTooltipProps) => (
+  <RechartsTooltip
+    cursor={cursor}
+    animationDuration={animationDuration}
+    content={content ?? <ChartTooltipContent />}
+    {...props}
+  />
+)
+
+export type ChartLegendContentProps = {
+  payload?: Array<{
+    value?: string
+    color?: string
+    dataKey?: string | number
+  }>
+  className?: string
+}
+
+export const ChartLegendContent = ({
+  payload,
+  className,
+}: ChartLegendContentProps) => {
+  if (!payload?.length) return null
+
+  return (
+    <div
+      className={cn(
+        "flex flex-wrap items-center justify-center gap-3 pt-3",
+        className,
+      )}
+    >
+      {payload.map((item, index) => (
+        <div
+          key={`${item.dataKey ?? item.value ?? index}`}
+          className="flex items-center gap-1.5 text-xs text-fg-secondary"
+        >
+          <span
+            className="size-2 shrink-0 rounded-full"
+            style={{ backgroundColor: item.color }}
+          />
+          <span>{item.value}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export type ChartLegendProps = ComponentProps<typeof RechartsLegend>
+
+export const ChartLegend = ({
+  content,
+  ...props
+}: ChartLegendProps) => (
+  <RechartsLegend content={content ?? <ChartLegendContent />} {...props} />
+)
+
+export {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+}

package/src/checkbox-group.tsx

@@ -0,0 +1,14 @@
+"use client"
+
+import { CheckboxGroup as BaseCheckboxGroup } from "@base-ui/react/checkbox-group"
+import type { ComponentProps } from "react"
+import { cn } from "./lib/cn"
+
+export type CheckboxGroupProps = ComponentProps<typeof BaseCheckboxGroup>
+
+export const CheckboxGroup = ({ className, ...props }: CheckboxGroupProps) => (
+  <BaseCheckboxGroup
+    className={cn("flex flex-col gap-2", className)}
+    {...props}
+  />
+)

package/src/checkbox.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import { Checkbox as BaseCheckbox } from "@base-ui/react/checkbox"
+import type { ComponentProps } from "react"
+import { IconCheckmark1, IconMinus } from "./icons"
+import { cn } from "./lib/cn"
+
+export type CheckboxProps = ComponentProps<typeof BaseCheckbox.Root>
+
+export const Checkbox = ({ className, ...props }: CheckboxProps) => (
+  <BaseCheckbox.Root
+    className={cn(
+      "group flex size-4 shrink-0 items-center justify-center rounded-sm border border-border-secondary bg-surface 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:border-brand-primary data-checked:bg-brand-primary data-indeterminate:border-brand-primary data-indeterminate:bg-brand-primary data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <BaseCheckbox.Indicator className="flex text-brand-foreground data-unchecked:hidden">
+      <IconCheckmark1
+        size={12}
+        className="size-3 group-data-indeterminate:hidden"
+        aria-hidden
+      />
+      <IconMinus
+        size={12}
+        className="hidden size-3 group-data-indeterminate:block"
+        aria-hidden
+      />
+    </BaseCheckbox.Indicator>
+  </BaseCheckbox.Root>
+)

package/src/code-block.tsx

@@ -0,0 +1,124 @@
+"use client"
+
+import { useState } from "react"
+import { highlight, type LanguageName } from "sugar-high"
+import { Button } from "./button"
+import { IconCheckmark1, IconSquareBehindSquare6 } from "./icons"
+
+export type CodeBlockProps = {
+  code: string
+  /** Label shown in the header (for example, tsx). TSX uses TypeScript highlighting. */
+  lang?: string
+  size?: "sm" | "md"
+  showHeader?: boolean
+  /** Removes border and radius chrome for nesting inside another frame. */
+  bare?: boolean
+  className?: string
+}
+
+const sizeClass = {
+  sm: "text-2xs p-3",
+  md: "text-xs p-4",
+} as const
+
+const languages = new Set<LanguageName>([
+  "javascript",
+  "typescript",
+  "css",
+  "python",
+  "c",
+  "go",
+  "java",
+  "rust",
+  "json",
+  "diff",
+  "shell",
+  "cpp",
+  "csharp",
+  "sql",
+  "html",
+  "yaml",
+  "markdown",
+  "kotlin",
+  "swift",
+  "php",
+  "toml",
+  "powershell",
+  "dockerfile",
+  "graphql",
+  "hcl",
+])
+
+const getHighlightLanguage = (lang: string): LanguageName => {
+  const key = lang.toLowerCase()
+
+  if (key === "tsx" || key === "ts") return "typescript"
+  if (key === "jsx" || key === "js") return "javascript"
+  if (languages.has(key as LanguageName)) return key as LanguageName
+
+  return "typescript"
+}
+
+export const CodeBlock = ({
+  code: rawCode,
+  lang = "tsx",
+  size = "md",
+  showHeader = true,
+  bare = false,
+  className = "",
+}: CodeBlockProps) => {
+  const [copied, setCopied] = useState(false)
+  const code = rawCode.replace(/^\n/, "").replace(/\n$/, "")
+  const html = highlight(code, { lang: getHighlightLanguage(lang) })
+  const frameClass =
+    !showHeader && !bare
+      ? "rounded-lg border border-border-primary bg-surface"
+      : ""
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(code)
+      setCopied(true)
+      window.setTimeout(() => setCopied(false), 1200)
+    } catch {
+      setCopied(false)
+    }
+  }
+
+  const codeContent = (
+    <pre
+      className={`sh-code overflow-x-auto font-mono ${sizeClass[size]} ${frameClass}`}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  )
+
+  if (!showHeader) {
+    return <div className={className}>{codeContent}</div>
+  }
+
+  return (
+    <div
+      className={`overflow-hidden rounded-xl border border-border-primary bg-surface ${className}`}
+    >
+      <div className="flex items-center justify-between border-b border-border-primary bg-background-secondary px-3 py-1.5 pl-4">
+        <p className="text-xs font-mono text-fg-quaternary">{lang}</p>
+        <Button
+          type="button"
+          variant="ghost"
+          iconOnly
+          size="sm"
+          className="size-6 cursor-copy text-fg-quaternary hover:text-fg-primary"
+          aria-label={copied ? "Copied" : "Copy code"}
+          onClick={handleCopy}
+        >
+          {copied ? (
+            <IconCheckmark1 size={14} aria-hidden />
+          ) : (
+            <IconSquareBehindSquare6 size={14} aria-hidden />
+          )}
+        </Button>
+      </div>
+      {codeContent}
+    </div>
+  )
+}

package/src/collapsible.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible"
+import type { ComponentProps } from "react"
+import { IconChevronDownSmall } from "./icons"
+import { cn } from "./lib/cn"
+import { motion } from "./lib/motion"
+
+export type CollapsibleProps = ComponentProps<typeof BaseCollapsible.Root>
+export type CollapsibleTriggerProps = ComponentProps<
+  typeof BaseCollapsible.Trigger
+>
+export type CollapsiblePanelProps = ComponentProps<typeof BaseCollapsible.Panel>
+
+export const Collapsible = (props: CollapsibleProps) => (
+  <BaseCollapsible.Root {...props} />
+)
+
+export const CollapsibleTrigger = ({
+  className,
+  children,
+  ...props
+}: CollapsibleTriggerProps) => (
+  <BaseCollapsible.Trigger
+    className={cn(
+      "group flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-border-secondary bg-surface px-3 text-sm text-fg-primary inset-shadow-outline-top 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 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <span className="min-w-0 flex-1 text-left">{children}</span>
+    <IconChevronDownSmall
+      size={16}
+      className={cn(
+        "size-4 shrink-0 text-fg-tertiary",
+        motion.transform,
+        "group-data-panel-open:rotate-180",
+      )}
+      aria-hidden
+    />
+  </BaseCollapsible.Trigger>
+)
+
+export const CollapsiblePanel = ({
+  className,
+  children,
+  ...props
+}: CollapsiblePanelProps) => (
+  <BaseCollapsible.Panel
+    className={cn(
+      "h-[var(--collapsible-panel-height)] overflow-hidden text-sm text-fg-secondary",
+      motion.accordionPanel,
+      className,
+    )}
+    {...props}
+  >
+    <div className="pt-2 leading-relaxed">{children}</div>
+  </BaseCollapsible.Panel>
+)