Color Function

1"use client"
2 
3import { useEffect, useRef, useState } from "react"
4import { Button } from "@/components/ui/button"
5import {
6  Popover,
7  PopoverContent,
8  PopoverTrigger,
9} from "@/components/ui/popover"
10import { cn } from "@/lib/utils"
11import {
12  defaultState,
13  formatColorFunction,
14  parseColorFunction,
15} from "./color-function.helpers"
16import type {
17  ColorFunctionMode,
18  ColorFunctionState,
19  ColorFunctionStringMap,
20} from "./color-function.types"
21import { ColorFunctionPreview } from "./color-function-preview"
22import { ColorMixEditor } from "./color-mix-editor"
23import { FamilySelect } from "./family-select"
24import { LightDarkEditor } from "./light-dark-editor"
25import { LiveString } from "./live-string"
26import { RelativeColorEditor } from "./relative-color-editor"
27 
28export type { ColorFunctionPreviewProps } from "./color-function-preview"
29// Re-export the public sub-components so consumers (and tests) can import them
30// either from this entry or from the package index — the split is invisible.
31export { ColorFunctionPreview } from "./color-function-preview"
32export type { ColorMixEditorProps } from "./color-mix-editor"
33export { ColorMixEditor } from "./color-mix-editor"
34export type { LightDarkEditorProps } from "./light-dark-editor"
35export { LightDarkEditor } from "./light-dark-editor"
36export type { RelativeColorEditorProps } from "./relative-color-editor"
37export { RelativeColorEditor } from "./relative-color-editor"
38 
39// ---------------------------------------------------------------------------
40// Props
41// ---------------------------------------------------------------------------
42 
43export interface ColorFunctionPanelProps<
44  TMode extends ColorFunctionMode = "color-mix",
45> {
46  /**
47   * Which family to edit. When omitted, the panel shows a family selector
48   * and edits any of the three at runtime; the `onChange` string type then
49   * defaults to the `color-mix` suggestion shape for typing purposes.
50   */
51  mode?: TMode
52  value: ColorFunctionStringMap[TMode] | (string & {})
53  onChange: (value: ColorFunctionStringMap[TMode]) => void
54  className?: string
55  "aria-label"?: string
56}
57 
58export interface ColorFunctionProps<
59  TMode extends ColorFunctionMode = "color-mix",
60> extends ColorFunctionPanelProps<TMode> {}
61 
62// ---------------------------------------------------------------------------
63// ColorFunction — popover-wrapped
64// ---------------------------------------------------------------------------
65 
66// … truncated