devnonla-ui 0.2.0 → 0.4.0

package/src/colorpicker/color.ts

@@ -0,0 +1,246 @@
+export type ColorFormat = "hex" | "rgb" | "hsb";
+
+export type HsbaColor = {
+  h: number;
+  s: number;
+  b: number;
+  a: number;
+};
+
+export type RgbaColor = {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+};
+
+export type ColorType = string | Color;
+
+const HEX = /^#?([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+const RGB = /^rgba?\(\s*([0-9.]+%?)\s*[, ]\s*([0-9.]+%?)\s*[, ]\s*([0-9.]+%?)(?:\s*[,/]\s*([0-9.]+%?))?\s*\)$/i;
+const HSL = /^hsla?\(\s*([0-9.]+)\s*[, ]\s*([0-9.]+)%\s*[, ]\s*([0-9.]+)%(?:\s*[,/]\s*([0-9.]+%?))?\s*\)$/i;
+const HSB = /^hsba?\(\s*([0-9.]+)\s*[, ]\s*([0-9.]+)%\s*[, ]\s*([0-9.]+)%(?:\s*[,/]\s*([0-9.]+%?))?\s*\)$/i;
+const HSV = /^hsva?\(\s*([0-9.]+)\s*[, ]\s*([0-9.]+)%\s*[, ]\s*([0-9.]+)%(?:\s*[,/]\s*([0-9.]+%?))?\s*\)$/i;
+
+export function clamp(n: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, n));
+}
+
+function round(n: number, digits = 0) {
+  const f = 10 ** digits;
+  return Math.round(n * f) / f;
+}
+
+function wrapHue(h: number) {
+  const n = ((h % 360) + 360) % 360;
+  return n;
+}
+
+function hexByte(n: number) {
+  return clamp(Math.round(n), 0, 255).toString(16).padStart(2, "0");
+}
+
+function parseChannel(raw: string, max: number) {
+  const t = raw.trim();
+  if (t.endsWith("%")) return clamp((parseFloat(t) / 100) * max, 0, max);
+  return clamp(parseFloat(t), 0, max);
+}
+
+function parseAlpha(raw: string | undefined) {
+  if (raw == null || raw === "") return 1;
+  const t = raw.trim();
+  if (t.endsWith("%")) return clamp(parseFloat(t) / 100, 0, 1);
+  const n = parseFloat(t);
+  return n > 1 ? clamp(n / 255, 0, 1) : clamp(n, 0, 1);
+}
+
+export function hsbaToRgba({ h, s, b, a }: HsbaColor): RgbaColor {
+  const hue = wrapHue(h);
+  const sat = clamp(s, 0, 1);
+  const val = clamp(b, 0, 1);
+  const c = val * sat;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = val - c;
+  let r = 0;
+  let g = 0;
+  let bl = 0;
+  if (hue < 60) [r, g, bl] = [c, x, 0];
+  else if (hue < 120) [r, g, bl] = [x, c, 0];
+  else if (hue < 180) [r, g, bl] = [0, c, x];
+  else if (hue < 240) [r, g, bl] = [0, x, c];
+  else if (hue < 300) [r, g, bl] = [x, 0, c];
+  else [r, g, bl] = [c, 0, x];
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((bl + m) * 255),
+    a: clamp(a, 0, 1),
+  };
+}
+
+export function rgbaToHsba({ r, g, b, a }: RgbaColor): HsbaColor {
+  const R = clamp(r, 0, 255) / 255;
+  const G = clamp(g, 0, 255) / 255;
+  const B = clamp(b, 0, 255) / 255;
+  const max = Math.max(R, G, B);
+  const min = Math.min(R, G, B);
+  const d = max - min;
+  let h = 0;
+  if (d !== 0) {
+    if (max === R) h = ((G - B) / d) % 6;
+    else if (max === G) h = (B - R) / d + 2;
+    else h = (R - G) / d + 4;
+    h *= 60;
+    if (h < 0) h += 360;
+  }
+  return { h, s: max === 0 ? 0 : d / max, b: max, a: clamp(a, 0, 1) };
+}
+
+function hslToHsba(h: number, s: number, l: number, a: number): HsbaColor {
+  const sat = clamp(s, 0, 1);
+  const lit = clamp(l, 0, 1);
+  const v = lit + sat * Math.min(lit, 1 - lit);
+  const sv = v === 0 ? 0 : 2 * (1 - lit / v);
+  return { h: wrapHue(h), s: sv, b: v, a: clamp(a, 0, 1) };
+}
+
+function expandHex(hex: string) {
+  if (hex.length === 3 || hex.length === 4) {
+    return hex
+      .split("")
+      .map((c) => c + c)
+      .join("");
+  }
+  return hex;
+}
+
+function parseHex(raw: string): HsbaColor | null {
+  const m = HEX.exec(raw.trim());
+  if (!m) return null;
+  const hex = expandHex(m[1]!.toLowerCase());
+  const r = parseInt(hex.slice(0, 2), 16);
+  const g = parseInt(hex.slice(2, 4), 16);
+  const b = parseInt(hex.slice(4, 6), 16);
+  const a = hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1;
+  return rgbaToHsba({ r, g, b, a });
+}
+
+function parseCss(raw: string): HsbaColor | null {
+  const t = raw.trim();
+  if (!t) return null;
+  if (t.toLowerCase() === "transparent") return { h: 0, s: 0, b: 0, a: 0 };
+  const hex = parseHex(t);
+  if (hex) return hex;
+  const rgb = RGB.exec(t);
+  if (rgb) {
+    return rgbaToHsba({
+      r: parseChannel(rgb[1]!, 255),
+      g: parseChannel(rgb[2]!, 255),
+      b: parseChannel(rgb[3]!, 255),
+      a: parseAlpha(rgb[4]),
+    });
+  }
+  const hsl = HSL.exec(t);
+  if (hsl) return hslToHsba(parseFloat(hsl[1]!), parseFloat(hsl[2]!) / 100, parseFloat(hsl[3]!) / 100, parseAlpha(hsl[4]));
+  const hsb = HSB.exec(t) ?? HSV.exec(t);
+  if (hsb) {
+    return {
+      h: wrapHue(parseFloat(hsb[1]!)),
+      s: clamp(parseFloat(hsb[2]!) / 100, 0, 1),
+      b: clamp(parseFloat(hsb[3]!) / 100, 0, 1),
+      a: parseAlpha(hsb[4]),
+    };
+  }
+  return null;
+}
+
+export function isColor(value: unknown): value is Color {
+  return value instanceof Color;
+}
+
+export class Color {
+  private readonly meta: HsbaColor;
+
+  constructor(input?: ColorType | HsbaColor | RgbaColor | null) {
+    this.meta = toHsba(input);
+  }
+
+  toHsb(): HsbaColor {
+    return { h: this.meta.h, s: this.meta.s, b: this.meta.b, a: this.meta.a };
+  }
+
+  toRgb(): RgbaColor {
+    return hsbaToRgba(this.meta);
+  }
+
+  toHex(ignoreAlpha = false): string {
+    const { r, g, b, a } = this.toRgb();
+    const hex = `${hexByte(r)}${hexByte(g)}${hexByte(b)}`;
+    if (ignoreAlpha || a >= 1) return hex;
+    return `${hex}${hexByte(a * 255)}`;
+  }
+
+  toHexString(ignoreAlpha = false): string {
+    return `#${this.toHex(ignoreAlpha)}`;
+  }
+
+  toRgbString(): string {
+    const { r, g, b, a } = this.toRgb();
+    if (a < 1) return `rgba(${r}, ${g}, ${b}, ${round(a, 2)})`;
+    return `rgb(${r}, ${g}, ${b})`;
+  }
+
+  toHsbString(): string {
+    const { h, s, b, a } = this.meta;
+    const H = Math.round(wrapHue(h));
+    const S = Math.round(s * 100);
+    const B = Math.round(b * 100);
+    if (a < 1) return `hsba(${H}, ${S}%, ${B}%, ${round(a, 2)})`;
+    return `hsb(${H}, ${S}%, ${B}%)`;
+  }
+
+  toCssString(): string {
+    return this.toRgbString();
+  }
+
+  toString(format: ColorFormat = "hex"): string {
+    if (format === "rgb") return this.toRgbString();
+    if (format === "hsb") return this.toHsbString();
+    return this.toHexString();
+  }
+
+  static fromHsba(hsba: HsbaColor): Color {
+    return new Color(hsba);
+  }
+}
+
+function isHsbaLike(value: object): value is HsbaColor {
+  return "h" in value && "s" in value && "b" in value;
+}
+
+function isRgbaLike(value: object): value is RgbaColor {
+  return "r" in value && "g" in value && "b" in value;
+}
+
+function toHsba(input?: ColorType | HsbaColor | RgbaColor | null): HsbaColor {
+  if (input == null || input === "") return { h: 215, s: 0.91, b: 1, a: 1 };
+  if (isColor(input)) return input.toHsb();
+  if (typeof input === "string") return parseCss(input) ?? { h: 215, s: 0.91, b: 1, a: 1 };
+  if (isHsbaLike(input)) {
+    return { h: wrapHue(input.h), s: clamp(input.s, 0, 1), b: clamp(input.b, 0, 1), a: clamp(input.a ?? 1, 0, 1) };
+  }
+  if (isRgbaLike(input)) return rgbaToHsba({ r: input.r, g: input.g, b: input.b, a: input.a ?? 1 });
+  return { h: 215, s: 0.91, b: 1, a: 1 };
+}
+
+export function parseColor(input?: ColorType | null): Color | null {
+  if (input == null || input === "") return null;
+  if (isColor(input)) return input;
+  if (typeof input === "string") {
+    const parsed = parseCss(input);
+    return parsed ? Color.fromHsba(parsed) : null;
+  }
+  return new Color(input);
+}
+
+export const DEFAULT_COLOR = new Color("#1677ff");

package/src/datepicker/DatePicker.tsx

@@ -4,19 +4,19 @@ import {
   type ButtonHTMLAttributes,
   type CSSProperties,
   type ForwardRefExoticComponent,
+  forwardRef,
   type MouseEvent,
   type ReactElement,
   type ReactNode,
   type RefAttributes,
-  forwardRef,
   useEffect,
   useMemo,
   useState,
 } from "react";
 import type { DateRange } from "react-day-picker";
-import { Calendar } from "../calendar/Calendar";
-import { Button } from "../button/Button";
 import { usePopupContainer } from "../app/context";
+import { Button } from "../button/Button";
+import { Calendar } from "../calendar/Calendar";
 import { cn } from "../lib/cn";
 import { type ControlSize, controlFieldFocusBorder, controlFieldStyle, controlFieldSurface, controlFieldTransition, controlStatusClass, getSizeTokens, useControlSize } from "../lib/sizes";
 import { glassOverlayClass } from "../lib/surface";

package/src/desktop/DesktopHeader.tsx

@@ -66,27 +66,22 @@ export function DesktopBarDivider({ className }: { className?: string }) {
   return <span className={cn("mx-2 h-4 w-px bg-ink-line", className)} aria-hidden />;
 }
 
-export function DesktopHeader({
-  logo,
-  leading,
-  trailing,
-  profile,
-}: {
-  logo?: ReactNode;
-  leading?: ReactNode;
-  trailing?: ReactNode;
-  profile?: ReactNode;
-}) {
+export type DesktopHeaderProps = {
+  left?: ReactNode;
+  right?: ReactNode;
+  className?: string;
+};
+
+export function DesktopHeader({ left, right, className }: DesktopHeaderProps) {
   return (
-    <header className="nonla-header-layer fixed inset-x-0 top-0 flex h-desktop-bar items-center justify-between gap-3 border-0 bg-glass-bar px-3 backdrop-blur-lg">
-      <div className="flex min-w-0 items-center">
-        {logo}
-        {leading}
-      </div>
-      <div className="flex min-w-0 shrink-0 items-center">
-        {trailing}
-        {profile}
-      </div>
+    <header
+      className={cn(
+        "nonla-header-layer fixed inset-x-0 top-0 flex h-desktop-bar items-center justify-between gap-3 border-0 bg-glass-bar px-3 backdrop-blur-lg",
+        className,
+      )}
+    >
+      <div className="flex min-w-0 items-center">{left}</div>
+      <div className="flex min-w-0 shrink-0 items-center">{right}</div>
     </header>
   );
 }

package/src/desktop/DesktopIcon.tsx

@@ -1,4 +1,4 @@
-import { type ReactNode, forwardRef } from "react";
+import { forwardRef, type ReactNode } from "react";
 import { FluentIcon } from "../icon/FluentIcon";
 
 const iconButtonClass =

package/src/desktop/DesktopWindow.tsx

@@ -1,8 +1,8 @@
-import { type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode, createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createContext, type MouseEvent as ReactMouseEvent, type ReactNode, type PointerEvent as ReactPointerEvent, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "../lib/cn";
-import { OverlayScroll, type OverlayScrollVisibility } from "../scroll/OverlayScroll";
 import { glassSurfaceClass } from "../lib/surface";
+import { OverlayScroll, type OverlayScrollVisibility } from "../scroll/OverlayScroll";
 
 type Phase = "open" | "leaving";
 type Size = { w: number; h: number };
@@ -37,6 +37,10 @@ function isEditableTarget(target: EventTarget | null) {
   return Boolean(target.closest(".monaco-editor"));
 }
 
+function hasOpenDialog() {
+  return Boolean(document.querySelector('[role="dialog"][data-state="open"], .nonla-modal-content'));
+}
+
 function originFromActiveIcon(overlay: HTMLElement, frame: HTMLElement) {
   const source = document.querySelector('[aria-current="true"]');
   if (!(source instanceof HTMLElement)) return "50% 50%";
@@ -190,33 +194,33 @@ function TrafficLight({
 }
 
 type WindowHeaderSlot = {
-  slot: HTMLElement | null;
-  setCustom: (on: boolean) => void;
+  left: HTMLElement | null;
+  right: HTMLElement | null;
 };
 
 const WindowHeaderSlotContext = createContext<WindowHeaderSlot | null>(null);
 
-export function WindowHeader({ children }: { children: ReactNode }) {
+export type WindowHeaderProps = {
+  left?: ReactNode;
+  right?: ReactNode;
+};
+
+/** Injects into the window title bar from a child. Prefer `DesktopWindow` `left` / `right` when the parent can pass them. */
+export function WindowHeader({ left, right }: WindowHeaderProps) {
   const ctx = useContext(WindowHeaderSlotContext);
-  useLayoutEffect(() => {
-    if (!ctx) return;
-    ctx.setCustom(true);
-    return () => ctx.setCustom(false);
-  }, [ctx]);
-  if (!ctx?.slot) return null;
-  return createPortal(children, ctx.slot);
+  if (!ctx) return null;
+  return (
+    <>
+      {ctx.left && left != null ? createPortal(left, ctx.left) : null}
+      {ctx.right && right != null ? createPortal(right, ctx.right) : null}
+    </>
+  );
 }
 
-export function DesktopWindow({
-  title,
-  expanded,
-  onClose,
-  onToggleExpand,
-  scroll = true,
-  scrollbar = "hover",
-  children,
-}: {
+export type DesktopWindowProps = {
   title?: ReactNode;
+  left?: ReactNode;
+  right?: ReactNode;
   expanded: boolean;
   onClose: () => void;
   onToggleExpand: () => void;
@@ -224,7 +228,19 @@ export function DesktopWindow({
   scroll?: boolean;
   scrollbar?: OverlayScrollVisibility;
   children: ReactNode;
-}) {
+};
+
+export function DesktopWindow({
+  title,
+  left,
+  right,
+  expanded,
+  onClose,
+  onToggleExpand,
+  scroll = true,
+  scrollbar = "hover",
+  children,
+}: DesktopWindowProps) {
   const overlayRef = useRef<HTMLDivElement>(null);
   const frameRef = useRef<HTMLElement>(null);
   const closedRef = useRef(false);
@@ -253,9 +269,9 @@ export function DesktopWindow({
     w: window.innerWidth,
     h: Math.max(0, window.innerHeight - 42),
   }));
-  const [headerSlot, setHeaderSlot] = useState<HTMLDivElement | null>(null);
-  const [customHeader, setCustomHeader] = useState(false);
-  const headerChrome = useMemo(() => ({ slot: headerSlot, setCustom: setCustomHeader }), [headerSlot]);
+  const [leftSlot, setLeftSlot] = useState<HTMLDivElement | null>(null);
+  const [rightSlot, setRightSlot] = useState<HTMLDivElement | null>(null);
+  const headerChrome = useMemo(() => ({ left: leftSlot, right: rightSlot }), [leftSlot, rightSlot]);
   const requestCloseRef = useRef<() => void>(() => {});
   const viewRef = useRef(view);
   const offsetRef = useRef(offset);
@@ -325,7 +341,7 @@ export function DesktopWindow({
 
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
-      if (e.key !== "Escape" || isEditableTarget(e.target)) return;
+      if (e.key !== "Escape" || e.defaultPrevented || isEditableTarget(e.target) || hasOpenDialog()) return;
       e.preventDefault();
       requestCloseRef.current();
     };
@@ -475,10 +491,8 @@ export function DesktopWindow({
           className={cn("absolute flex flex-col rounded-xl pointer-events-auto transform-gpu", glassSurfaceClass, "nonla-window-glass", leaving && "pointer-events-none")}
         >
           <div className="flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl">
-            {/* biome-ignore lint/a11y/noStaticElementInteractions: title bar is a pointer drag surface */}
             <header
               onPointerDown={startDrag}
-              onDoubleClick={onTitleBarDoubleClick}
               className="flex h-8 shrink-0 cursor-default items-center gap-4 border-0 border-b border-solid border-ink-line px-3 select-none touch-none"
             >
               <div className="group/traffic flex shrink-0 items-center gap-2">
@@ -490,8 +504,18 @@ export function DesktopWindow({
                 </TrafficLight>
               </div>
               <div className="flex min-w-0 flex-1 items-center">
-                {customHeader ? null : typeof title === "string" ? <span className="min-w-0 truncate text-xs font-semibold leading-none text-foreground/90">{title}</span> : title}
-                <div ref={setHeaderSlot} className="contents" />
+                <div className="flex min-w-0 items-center">
+                  {left}
+                  <div ref={setLeftSlot} className="contents" />
+                </div>
+                {/* biome-ignore lint/a11y/noStaticElementInteractions: middle strip double-clicks to expand */}
+                <div onDoubleClick={onTitleBarDoubleClick} className="flex min-w-8 flex-1 items-center self-stretch px-2">
+                  {typeof title === "string" ? <span className="min-w-0 truncate text-xs font-semibold leading-none text-foreground/90">{title}</span> : title}
+                </div>
+                <div className="flex shrink-0 items-center">
+                  {right}
+                  <div ref={setRightSlot} className="contents" />
+                </div>
               </div>
             </header>
 

package/src/form/Form.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef } from "react";
-import { FormProvider, type FieldValues, type UseFormReturn, useWatch } from "react-hook-form";
+import { type FieldValues, FormProvider, type UseFormReturn, useWatch } from "react-hook-form";
 import { cn } from "../lib/cn";
 import { FormExtraContext, type FormFetcher } from "./common/context";
 import { fieldNameOf } from "./common/rules";

package/src/form/FormItem.tsx

@@ -1,5 +1,5 @@
-import { useState, type ComponentType } from "react";
-import { Controller, type Control, type FieldValues } from "react-hook-form";
+import { type ComponentType, useState } from "react";
+import { type Control, Controller, type FieldValues } from "react-hook-form";
 import { cn } from "../lib/cn";
 import { EFormItemType } from "./common/enum";
 import { fieldNameOf, hydrateRules, isRuleRequired } from "./common/rules";

package/src/form/index.ts

@@ -1,35 +1,34 @@
 /** Schema-driven form (react-hook-form). Prefer this name over layout `Form`. */
-export { Form as SchemaForm } from "./Form";
-export type { FormProps as SchemaFormProps } from "./Form";
-/** @deprecated use SchemaForm — kept so existing demo imports keep typechecking during migrate */
-export { Form as FormSchema } from "./Form";
-export { FormItem } from "./FormItem";
-export type { FormItemProps } from "./FormItem";
-export { EFormItemType } from "./common/enum";
-export { hydrateRules, fieldNameOf, isRuleRequired } from "./common/rules";
+
 export type { FormFetcher } from "./common/context";
+export { EFormItemType } from "./common/enum";
+export { fieldNameOf, hydrateRules, isRuleRequired } from "./common/rules";
 export type {
-  TForm,
-  TFormItemProps,
-  TFormRule,
-  TRuleValueMessage,
-  ISelectItemProps,
   IFormItemHelpProps,
+  ISelectItemProps,
+  TForm,
+  TFormItemCheckbox,
+  TFormItemColor,
+  TFormItemCustom,
+  TFormItemDateTime,
+  TFormItemHidden,
   TFormItemInput,
-  TFormItemTextarea,
   TFormItemNumber,
+  TFormItemObject,
+  TFormItemProps,
+  TFormItemRadio,
+  TFormItemRenderCtx,
+  TFormItemRepeater,
   TFormItemSelect,
   TFormItemSelectMultiple,
   TFormItemSelectRemote,
-  TFormItemDateTime,
-  TFormItemTime,
-  TFormItemRepeater,
-  TFormItemObject,
-  TFormItemRadio,
-  TFormItemColor,
-  TFormItemHidden,
   TFormItemSwitch,
-  TFormItemCheckbox,
-  TFormItemCustom,
-  TFormItemRenderCtx,
+  TFormItemTextarea,
+  TFormItemTime,
+  TFormRule,
+  TRuleValueMessage,
 } from "./common/types";
+export type { FormProps as SchemaFormProps } from "./Form";
+export { Form as SchemaForm, Form as FormSchema } from "./Form";
+export type { FormItemProps } from "./FormItem";
+export { FormItem } from "./FormItem";

package/src/form/variants/FieldColor.tsx

@@ -1,7 +1,6 @@
-import { useState } from "react";
 import type { ControllerRenderProps, FieldValues } from "react-hook-form";
-import { Input } from "../../input/Input";
-import { Popover } from "../../popover/Popover";
+import { ColorPicker, type PresetColorType } from "../../colorpicker/ColorPicker";
+import type { ControlSize } from "../../lib/sizes";
 
 type Props = {
   field: ControllerRenderProps<FieldValues, string>;
@@ -9,55 +8,21 @@ type Props = {
   status?: "error" | "warning";
 };
 
-const FALLBACK = "#000000";
-
 export function FieldColor({ field, options, status }: Props) {
-  const raw = typeof field.value === "string" ? field.value : field.value ? String(field.value) : "";
-  const hex = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(raw) ? raw : FALLBACK;
-  const [open, setOpen] = useState(false);
-
+  const opts = options ?? {};
+  const raw = typeof field.value === "string" ? field.value : field.value != null ? String(field.value) : "";
   return (
-    <div className="flex items-center gap-2">
-      <Popover
-        open={open}
-        onOpenChange={setOpen}
-        trigger="click"
-        placement="bottom"
-        content={
-          <div className="flex flex-col gap-2 p-1 min-w-45">
-            <input
-              type="color"
-              value={hex}
-              onChange={(e) => field.onChange(e.target.value)}
-              className="h-24 w-full cursor-pointer border-0 bg-transparent p-0"
-              aria-label="Pick color"
-            />
-            <Input
-              value={raw || hex}
-              onChange={(e) => field.onChange(e.target.value)}
-              placeholder="#000000"
-              status={status}
-              className="font-mono text-sm"
-              {...(options as object)}
-            />
-          </div>
-        }
-      >
-        <button
-          type="button"
-          className="size-9 shrink-0 cursor-pointer rounded border border-input p-0"
-          style={{ backgroundColor: raw || hex }}
-          aria-label="Color picker"
-        />
-      </Popover>
-      <Input
-        className="flex-1 font-mono text-sm"
-        value={raw}
-        onChange={(e) => field.onChange(e.target.value)}
-        onBlur={field.onBlur}
-        placeholder="#000000"
-        status={status}
-      />
-    </div>
+    <ColorPicker
+      value={raw || null}
+      onChange={(color) => field.onChange(color.toHexString())}
+      onClear={() => field.onChange("")}
+      showText
+      allowClear={opts.allowClear !== false}
+      disabled={opts.disabled as boolean | undefined}
+      disabledAlpha={opts.disabledAlpha as boolean | undefined}
+      size={opts.size as ControlSize | undefined}
+      status={status}
+      presets={opts.presets as PresetColorType[] | undefined}
+    />
   );
 }