BaseColorPicker() — ui Function Reference

Architecture documentation for the BaseColorPicker() function in base-color-picker.tsx from the ui codebase.

Function tsx DesignEngine PreviewSystem

Entity Profile

DesignEngine→ PreviewSystem→ BaseColorPicker() — ui Function Reference

Dependency Diagram

graph TD
  abd9e38f_2013_3188_b89c_21dbb8e12689["BaseColorPicker()"]
  fd704422_fd93_1d98_3856_206449bcc032["base-color-picker.tsx"]
  abd9e38f_2013_3188_b89c_21dbb8e12689 -->|defined in| fd704422_fd93_1d98_3856_206449bcc032
  style abd9e38f_2013_3188_b89c_21dbb8e12689 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(create)/components/base-color-picker.tsx lines 21–125

export function BaseColorPicker({
  isMobile,
  anchorRef,
}: {
  isMobile: boolean
  anchorRef: React.RefObject<HTMLDivElement | null>
}) {
  const { resolvedTheme, setTheme } = useTheme()
  const mounted = useMounted()
  const [params, setParams] = useDesignSystemSearchParams()

  const currentBaseColor = React.useMemo(
    () => BASE_COLORS.find((baseColor) => baseColor.name === params.baseColor),
    [params.baseColor]
  )

  return (
    <div className="group/picker relative">
      <Picker>
        <PickerTrigger>
          <div className="flex flex-col justify-start text-left">
            <div className="text-muted-foreground text-xs">Base Color</div>
            <div className="text-foreground text-sm font-medium">
              {currentBaseColor?.title}
            </div>
          </div>
          {mounted && resolvedTheme && (
            <div
              style={
                {
                  "--color":
                    currentBaseColor?.cssVars?.[
                      resolvedTheme as "light" | "dark"
                    ]?.["muted-foreground"],
                } as React.CSSProperties
              }
              className="pointer-events-none absolute top-1/2 right-4 size-4 -translate-y-1/2 rounded-full bg-(--color) select-none"
            />
          )}
        </PickerTrigger>
        <PickerContent
          anchor={isMobile ? anchorRef : undefined}
          side={isMobile ? "top" : "right"}
          align={isMobile ? "center" : "start"}
        >
          <PickerRadioGroup
            value={currentBaseColor?.name}
            onValueChange={(value) => {
              if (value === "dark") {
                setTheme(resolvedTheme === "dark" ? "light" : "dark")
                return
              }

              setParams({ baseColor: value as BaseColorName })
            }}
          >
            <PickerGroup>
              {BASE_COLORS.map((baseColor) => (
                <PickerRadioItem key={baseColor.name} value={baseColor.name}>
                  <div className="flex items-center gap-2">
                    {mounted && resolvedTheme && (
                      <div
                        style={
                          {
                            "--color":
                              baseColor.cssVars?.[
                                resolvedTheme as "light" | "dark"
                              ]?.["muted-foreground"],
                          } as React.CSSProperties
                        }
                        className="size-4 rounded-full bg-(--color)"
                      />
                    )}
                    {baseColor.title}
                  </div>
                </PickerRadioItem>
              ))}
            </PickerGroup>
            <PickerSeparator />
            <PickerGroup>
              <PickerItem