@proyecto-viviana/solid-stately 0.5.1 → 0.6.0-rc.0

package/src/collections/createMenuState.ts

@@ -1,9 +1,28 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/menu/useMenuTriggerState.ts
+
 /**
  * State management for menu components.
- * Based on @react-stately/menu.
+ *
+ * createMenuTriggerState is ported from
+ * packages/react-stately/src/menu/useMenuTriggerState.ts.
+ * createMenuState is a local composition of the separately attributed list state.
  */
 
-import { access, type MaybeAccessor } from "../utils";
+import { access, createInternalSignal, type MaybeAccessor } from "../utils";
+
+import { createOverlayTriggerState, type OverlayTriggerProps } from "../overlays";
 import { createListState, type ListState, type ListStateProps } from "./createListState";
 import type { Key } from "./types";
 
@@ -84,32 +103,58 @@ export function createMenuState<T = unknown>(
   };
 }
 
-export interface MenuTriggerStateProps {
-  /** Whether the menu is open (controlled). */
-  isOpen?: boolean;
-  /** Default open state (uncontrolled). */
-  defaultOpen?: boolean;
-  /** Handler called when the open state changes. */
-  onOpenChange?: (isOpen: boolean) => void;
+export type MenuTriggerType = "press" | "longPress" | "contextMenu";
+
+export interface MenuTriggerProps extends OverlayTriggerProps {
+  /** How the menu is triggered. */
+  trigger?: MenuTriggerType;
 }
 
+/** @deprecated Use `MenuTriggerProps`. */
+export interface MenuTriggerStateProps extends MenuTriggerProps {}
+
 export interface MenuTriggerState {
   /** Whether the menu is open. */
   readonly isOpen: () => boolean;
+  /** Sets whether the menu is open. */
+  setOpen(isOpen: boolean): void;
   /** Open the menu. */
-  open(): void;
+  open(focusStrategy?: "first" | "last" | null): void;
   /** Close the menu. */
   close(): void;
   /** Toggle the menu. */
-  toggle(): void;
+  toggle(focusStrategy?: "first" | "last" | null): void;
   /** Focus strategy for when the menu opens. */
   readonly focusStrategy: () => "first" | "last" | null;
   /** Set the focus strategy. */
   setFocusStrategy(strategy: "first" | "last" | null): void;
+  /** Cursor position relative to the window viewport. */
+  readonly point: () => { x: number; y: number } | null;
+  /** Sets the cursor position relative to the window viewport. */
+  setPoint(point: { x: number; y: number }): void;
 }
 
 /**
- * Creates state for a menu trigger (button that opens a menu).
- * This is essentially the same as overlay trigger state but with focus strategy.
+ * Creates state for a menu trigger. Mirrors `@react-stately/menu` `useMenuTriggerState`:
+ * overlay open state plus the focus strategy passed through to `createMenu`.
  */
-export { createOverlayTriggerState as createMenuTriggerState } from "../overlays";
+export function createMenuTriggerState(
+  props: MaybeAccessor<MenuTriggerProps> = {},
+): MenuTriggerState {
+  const overlay = createOverlayTriggerState(props);
+  const [focusStrategy, setFocusStrategy] = createInternalSignal<"first" | "last" | null>(null);
+
+  return {
+    ...overlay,
+    focusStrategy,
+    setFocusStrategy,
+    open(strategy: "first" | "last" | null = null) {
+      setFocusStrategy(strategy);
+      overlay.open();
+    },
+    toggle(strategy: "first" | "last" | null = null) {
+      setFocusStrategy(strategy);
+      overlay.toggle();
+    },
+  };
+}

package/src/collections/createSelectionState.ts

@@ -1,14 +1,31 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/selection/SelectionManager.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/selection/useMultipleSelectionState.ts
+
 /**
  * Selection state management for collections.
- * Based on @react-stately/selection.
+ * Ported from:
+ * - packages/react-stately/src/selection/useMultipleSelectionState.ts
+ * - packages/react-stately/src/selection/SelectionManager.ts
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
-import { access, type MaybeAccessor } from "../utils";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
+import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
 import type {
   Collection,
   DisabledBehavior,
-  FocusStrategy,
   Key,
   Selection,
   SelectionBehavior,
@@ -103,15 +120,15 @@ export function createSelectionState(
   const getProps = () => access(props);
 
   // Selection behavior state
-  const [internalBehavior, setInternalBehavior] = createSignal<SelectionBehavior>("toggle");
+  const [internalBehavior, setInternalBehavior] = createInternalSignal<SelectionBehavior>("toggle");
 
   // Internal selection state
-  const [internalSelectedKeys, setInternalSelectedKeys] = createSignal<Selection>(
+  const [internalSelectedKeys, setInternalSelectedKeys] = createInternalSignal<Selection>(
     getInitialSelection(getProps().defaultSelectedKeys),
   );
 
   // Track anchor for range selection
-  const [anchorKey, setAnchorKey] = createSignal<Key | null>(null);
+  const [anchorKey, setAnchorKey] = createInternalSignal<Key | null>(null);
 
   // Computed values
   const selectionMode: Accessor<SelectionMode> = () => getProps().selectionMode ?? "none";
@@ -124,13 +141,13 @@ export function createSelectionState(
     return getProps().disallowEmptySelection ?? false;
   };
 
-  const selectedKeys: Accessor<Selection> = createMemo(() => {
+  const selectedKeys: Accessor<Selection> = () => {
     const p = getProps();
     if (p.selectedKeys !== undefined) {
       return normalizeSelection(p.selectedKeys);
     }
     return internalSelectedKeys();
-  });
+  };
 
   const disabledKeys: Accessor<Set<Key>> = createMemo(() => {
     const keys = getProps().disabledKeys;
@@ -151,8 +168,11 @@ export function createSelectionState(
   };
 
   // Methods
+  const liveSelectedKeys = (): Selection =>
+    getProps().selectedKeys !== undefined ? selectedKeys() : readNow(internalSelectedKeys);
+
   const isSelected = (key: Key): boolean => {
-    const keys = selectedKeys();
+    const keys = liveSelectedKeys();
     if (keys === "all") return true;
     return keys.has(key);
   };
@@ -171,7 +191,7 @@ export function createSelectionState(
     }
 
     // Uncontrolled mode
-    const current = internalSelectedKeys();
+    const current = readNow(internalSelectedKeys);
     const isDifferent =
       current === "all" ||
       newSelection === "all" ||
@@ -188,7 +208,7 @@ export function createSelectionState(
     if (isDisabled(key)) return;
     if (selectionMode() === "none") return;
 
-    const current = selectedKeys();
+    const current = liveSelectedKeys();
 
     if (selectionMode() === "single") {
       if (isSelected(key) && !disallowEmptySelection()) {

package/src/collections/getChildNodes.ts

@@ -1,7 +1,24 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/collections/getChildNodes.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/collections/getItemCount.ts
+
 /**
  * Helpers for traversing collection nodes and comparing their document order.
  *
- * Based on @react-stately/collections.
+ * Ported from:
+ * - packages/react-stately/src/collections/getChildNodes.ts
+ * - packages/react-stately/src/collections/getItemCount.ts
  */
 
 import type { Collection, CollectionNode } from "./types";
@@ -51,8 +68,8 @@ const itemCountCache = new WeakMap<Collection<unknown>, number>();
 
 /**
  * Counts the item nodes (recursing into sections, ignoring section headers and
- * other non-item nodes) in a collection. Faithful port of
- * @react-stately/collections `getItemCount`; used by createOption to populate
+ * other non-item nodes) in a collection. Ported from
+ * packages/react-stately/src/collections/getItemCount.ts; used by createOption to populate
  * `aria-setsize` when the listbox is virtualized. Cached per (immutable)
  * collection identity, exactly like upstream.
  */

package/src/collections/index.ts

@@ -48,6 +48,8 @@ export {
   createMenuTriggerState,
   type MenuStateProps,
   type MenuState,
+  type MenuTriggerType,
+  type MenuTriggerProps,
   type MenuTriggerStateProps,
   type MenuTriggerState,
 } from "./createMenuState";

package/src/collections/types.ts

@@ -1,9 +1,42 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-types/shared/src/collections.d.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-types/shared/src/selection.d.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/collections/BaseCollection.ts
+
 /**
  * Core types for collection state management.
- * Simplified from @react-stately/collections for SolidJS.
+ * Collection state types for SolidJS.
+ *
+ * Ported from:
+ * - packages/@react-types/shared/src/collections.d.ts
+ * - packages/@react-types/shared/src/selection.d.ts
+ * - packages/react-aria/src/collections/BaseCollection.ts
  */
 
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
 
 /** A unique identifier for an item in a collection. */
 export type Key = string | number;

package/src/color/Color.ts

@@ -1,6 +1,20 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/color/Color.ts
+
 /**
  * Color class implementation.
- * Based on @react-stately/color.
+ * Ported from packages/react-stately/src/color/Color.ts.
  *
  * Provides color manipulation, conversion, and formatting.
  */
@@ -12,9 +26,6 @@ import type {
   ColorChannel,
   ColorChannelRange,
   ColorAxes,
-  RGBColor,
-  HSLColor,
-  HSBColor,
 } from "./types";
 import { getColorStringForLocale, formatColorMessage, type ColorStringKey } from "./intl";
 
@@ -73,6 +84,17 @@ function clamp(value: number, min: number, max: number): number {
   return Math.min(Math.max(value, min), max);
 }
 
+/**
+ * Normalizes a hue value to [0, 360).
+ * Preserves 360 so linear hue sliders can reach the end of their track.
+ */
+export function normalizeHue(hue: number): number {
+  if (hue === 360) {
+    return hue;
+  }
+  return ((hue % 360) + 360) % 360;
+}
+
 /**
  * Round to fixed decimal places.
  */
@@ -563,7 +585,7 @@ class HSLColorImpl implements Color {
   constructor(hue: number, saturation: number, lightness: number, alpha: number = 1) {
     // Store raw like upstream HSLColor's constructor — precision comes from the
     // conversion (toFixed(_, 2)); rounding to integers here diverged from S2.
-    this.hue = clamp(hue % 360, 0, 360);
+    this.hue = clamp(normalizeHue(hue), 0, 360);
     this.saturation = clamp(saturation, 0, 100);
     this.lightness = clamp(lightness, 0, 100);
     this.alpha = clamp(toFixed(alpha, 2), 0, 1);
@@ -583,9 +605,16 @@ class HSLColorImpl implements Color {
       }
       case "hsb":
       case "hsba": {
-        const { r, g, b } = hslToRgb(this.hue, this.saturation, this.lightness);
-        const hsb = rgbToHsb(r, g, b);
-        return new HSBColorImpl(hsb.h, hsb.s, hsb.b, this.alpha);
+        const saturation = this.saturation / 100;
+        const lightness = this.lightness / 100;
+        const brightness = lightness + saturation * Math.min(lightness, 1 - lightness);
+        const hsbSaturation = brightness === 0 ? 0 : 2 * (1 - lightness / brightness);
+        return new HSBColorImpl(
+          toFixed(this.hue, 2),
+          toFixed(hsbSaturation * 100, 2),
+          toFixed(brightness * 100, 2),
+          this.alpha,
+        );
       }
       default:
         throw new Error(`Unsupported format: ${format}`);
@@ -688,7 +717,7 @@ class HSLColorImpl implements Color {
       return { style: "percent" };
     }
     if (channel === "hue") {
-      return { style: "unit", unit: "degree", unitDisplay: "narrow", maximumFractionDigits: 0 };
+      return { style: "unit", unit: "degree", unitDisplay: "narrow" };
     }
     return { style: "percent", maximumFractionDigits: 0 };
   }
@@ -738,7 +767,7 @@ class HSBColorImpl implements Color {
 
   constructor(hue: number, saturation: number, brightness: number, alpha: number = 1) {
     // Store raw like upstream HSBColor's constructor (see HSLColorImpl).
-    this.hue = clamp(hue % 360, 0, 360);
+    this.hue = clamp(normalizeHue(hue), 0, 360);
     this.saturation = clamp(saturation, 0, 100);
     this.brightness = clamp(brightness, 0, 100);
     this.alpha = clamp(toFixed(alpha, 2), 0, 1);
@@ -758,9 +787,19 @@ class HSBColorImpl implements Color {
       }
       case "hsl":
       case "hsla": {
-        const { r, g, b } = hsbToRgb(this.hue, this.saturation, this.brightness);
-        const hsl = rgbToHsl(r, g, b);
-        return new HSLColorImpl(hsl.h, hsl.s, hsl.l, this.alpha);
+        const saturation = this.saturation / 100;
+        const brightness = this.brightness / 100;
+        const lightness = brightness * (1 - saturation / 2);
+        const hslSaturation =
+          lightness === 0 || lightness === 1
+            ? 0
+            : (brightness - lightness) / Math.min(lightness, 1 - lightness);
+        return new HSLColorImpl(
+          toFixed(this.hue, 2),
+          toFixed(hslSaturation * 100, 2),
+          toFixed(lightness * 100, 2),
+          this.alpha,
+        );
       }
       default:
         throw new Error(`Unsupported format: ${format}`);
@@ -862,7 +901,7 @@ class HSBColorImpl implements Color {
       return { style: "percent" };
     }
     if (channel === "hue") {
-      return { style: "unit", unit: "degree", unitDisplay: "narrow", maximumFractionDigits: 0 };
+      return { style: "unit", unit: "degree", unitDisplay: "narrow" };
     }
     return { style: "percent", maximumFractionDigits: 0 };
   }
@@ -956,24 +995,24 @@ export function parseColor(value: string): Color {
 
   // HSL/HSLA format
   const hslMatch = trimmed.match(
-    /^hsla?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+))?\s*\)$/,
+    /^hsla?\(\s*([-+]?\d+(?:\.\d+)?)\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*(?:,\s*([-+]?\d+(?:\.\d+)?))?\s*\)$/,
   );
   if (hslMatch) {
-    const h = parseInt(hslMatch[1], 10);
-    const s = parseInt(hslMatch[2], 10);
-    const l = parseInt(hslMatch[3], 10);
+    const h = parseFloat(hslMatch[1]);
+    const s = parseFloat(hslMatch[2]);
+    const l = parseFloat(hslMatch[3]);
     const a = hslMatch[4] !== undefined ? parseFloat(hslMatch[4]) : 1;
     return new HSLColorImpl(h, s, l, a);
   }
 
   // HSB/HSBA format
   const hsbMatch = trimmed.match(
-    /^hsba?\(\s*(\d+)\s*,\s*(\d+)%\s*,\s*(\d+)%\s*(?:,\s*([\d.]+))?\s*\)$/,
+    /^hsba?\(\s*([-+]?\d+(?:\.\d+)?)\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*,\s*([-+]?\d+(?:\.\d+)?)%\s*(?:,\s*([-+]?\d+(?:\.\d+)?))?\s*\)$/,
   );
   if (hsbMatch) {
-    const h = parseInt(hsbMatch[1], 10);
-    const s = parseInt(hsbMatch[2], 10);
-    const b = parseInt(hsbMatch[3], 10);
+    const h = parseFloat(hsbMatch[1]);
+    const s = parseFloat(hsbMatch[2]);
+    const b = parseFloat(hsbMatch[3]);
     const a = hsbMatch[4] !== undefined ? parseFloat(hsbMatch[4]) : 1;
     return new HSBColorImpl(h, s, b, a);
   }

package/src/color/createColorAreaState.ts

@@ -1,11 +1,27 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/color/useColorAreaState.ts
+
 /**
  * ColorArea state management.
  * Based on @react-stately/color useColorAreaState.
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
 import type { Color, ColorChannel, ColorAxes, ColorSpace } from "./types";
 import { normalizeColor } from "./Color";
+import { createInternalSignal } from "../utils";
 
 export interface ColorAreaStateOptions {
   /** The current color value (controlled). */
@@ -87,8 +103,8 @@ export function createColorAreaState(options: Accessor<ColorAreaStateOptions>):
   };
 
   // Internal value state
-  const [internalValue, setInternalValue] = createSignal<Color | null>(null);
-  const [isDragging, setIsDragging] = createSignal(false);
+  const [internalValue, setInternalValue] = createInternalSignal<Color | null>(null);
+  const [isDragging, setIsDragging] = createInternalSignal(false);
 
   // Initialize internal value
   const initValue = () => {
@@ -141,10 +157,13 @@ export function createColorAreaState(options: Accessor<ColorAreaStateOptions>):
   const xChannelPageStep = createMemo(() => xRange().pageSize);
   const yChannelPageStep = createMemo(() => yRange().pageSize);
 
+  let lastValue: Color | null = internalValue();
+
   // Update value
   const updateValue = (newColor: Color) => {
     const opts = getOptions();
     const nextColor = opts.colorSpace ? newColor.toFormat(opts.colorSpace) : newColor;
+    lastValue = nextColor;
 
     // Controlled mode
     if (opts.value !== undefined) {
@@ -245,7 +264,13 @@ export function createColorAreaState(options: Accessor<ColorAreaStateOptions>):
 
     // Call onChangeEnd when dragging ends
     if (wasDragging && !dragging) {
-      getOptions().onChangeEnd?.(value());
+      const opts = getOptions();
+      const current =
+        lastValue ??
+        (opts.value !== undefined ? normalizeValue(opts.value) : null) ??
+        internalValue() ??
+        value();
+      opts.onChangeEnd?.(current);
     }
   };
 

package/src/color/createColorFieldState.ts

@@ -1,11 +1,28 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/color/useColorChannelFieldState.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/color/useColorFieldState.ts
+
 /**
  * ColorField state management.
  * Based on @react-stately/color useColorFieldState and useColorChannelFieldState.
  */
 
-import { createEffect, createMemo, createSignal, type Accessor } from "solid-js";
+import { createEffect, createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
 import type { Color, ColorChannel, ColorChannelRange, ColorFormat, ColorSpace } from "./types";
 import { createRGBColor, normalizeColor, parseColor } from "./Color";
+import { createInternalSignal, readNow } from "../utils";
 
 const HEX_COLOR_MAX = 0xffffff;
 const PARTIAL_HEX_PATTERN = /^#?[0-9a-f]{0,6}$/i;
@@ -145,7 +162,13 @@ function formatColorValue(
     return displayColor.formatChannelValue(channel, locale);
   }
 
-  return displayColor.toString(format ?? "hex");
+  const formatted = displayColor.toString(format ?? "hex");
+  const resolvedFormat = format ?? "hex";
+  if (resolvedFormat === "hex" || resolvedFormat === "hexa") {
+    return formatted.toUpperCase();
+  }
+
+  return formatted;
 }
 
 function normalizeHexInput(value: string): string {
@@ -190,8 +213,8 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
   const initialOptions = getOptions();
   const initialValue = getDefaultValue(initialOptions);
 
-  const [internalValue, setInternalValue] = createSignal<Color | null>(initialValue);
-  const [inputValue, setInputValueInternal] = createSignal(
+  const [internalValue, setInternalValue] = createInternalSignal<Color | null>(initialValue);
+  const [inputValue, setInputValueInternal] = createInternalSignal(
     formatColorValue(
       initialValue,
       initialOptions.channel,
@@ -200,7 +223,7 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
       initialOptions.locale ?? "en-US",
     ),
   );
-  const [invalidInput, setInvalidInput] = createSignal(false);
+  const [invalidInput, setInvalidInput] = createInternalSignal(false);
 
   const channel = createMemo(() => getOptions().channel);
   const colorSpace = createMemo(() => getOptions().colorSpace);
@@ -223,10 +246,13 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
   const formatCurrentValue = (color: Color | null = value()) =>
     formatColorValue(color, channel(), colorSpace(), getOptions().colorFormat, locale());
 
-  createEffect(() => {
-    setInputValueInternal(formatCurrentValue());
-    setInvalidInput(false);
-  });
+  createEffect(
+    () => formatCurrentValue(),
+    (formatted) => {
+      setInputValueInternal(formatted);
+      setInvalidInput(false);
+    },
+  );
 
   const updateValue = (newColor: Color | null) => {
     const opts = getOptions();
@@ -250,7 +276,7 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
   };
 
   const commit = () => {
-    const text = inputValue().trim();
+    const text = readNow(inputValue).trim();
     const opts = getOptions();
     const chan = channel();
 
@@ -350,7 +376,7 @@ export function createColorFieldState(options: Accessor<ColorFieldStateOptions>)
   };
 
   const validate = (candidate?: string) => {
-    const text = (candidate ?? inputValue()).trim();
+    const text = (candidate ?? readNow(inputValue)).trim();
     const chan = channel();
 
     if (!text) {