wip

kobaltedev · Feb 18, 2025 · d15c2cb · d15c2cb
1 parent 83111d3
commit d15c2cb
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 56 deletions.
diff --git a/apps/docs/src/routes/docs/core.tsx b/apps/docs/src/routes/docs/core.tsx
@@ -77,7 +77,7 @@ const CORE_NAV_SECTIONS: NavSection[] = [
 			{
 				title: "Color Channel Field",
 				href: "/docs/core/components/color-channel-field",
-				status: "unreleased",
+				status: "new",
 			},
 			{
 				title: "Color Field",

diff --git a/apps/docs/src/routes/docs/core/components/color-channel-field.mdx b/apps/docs/src/routes/docs/core/components/color-channel-field.mdx
@@ -355,7 +355,7 @@ The color channel field supports optional increment/decrement triggers that are
 
 | Prop            | Description                                                                                                                                                                                               |
 | :-------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| value           | `Color` <br/> The controlled formatted value of the field.                                                                                                                                                |
+| value           | `Color` <br/> The controlled value of the field.                                                                                                                                                          |
 | defaultValue    | `Color` <br/> The default value when initially rendered. Useful when you do not need to control the value.                                                                                                |
 | colorSpace      | `ColorSpace` <br/> The color space that the field operates in. The `channel` must be in this color space.                                                                                                 |
 | onChange        | `(value: Color) => void` <br/> Event handler called when the value of the field changes.                                                                                                                  |

diff --git a/packages/core/dev/App.tsx b/packages/core/dev/App.tsx
@@ -1,15 +1,6 @@
-import { ColorWheel } from "../src/color-wheel";
-
 export default function App() {
 	return (
 		<>
-			<ColorWheel class="ColorWheelRoot" thickness={30}>
-				<ColorWheel.Track class="ColorWheelTrack">
-					<ColorWheel.Thumb class="ColorWheelThumb">
-						<ColorWheel.Input />
-					</ColorWheel.Thumb>
-				</ColorWheel.Track>
-			</ColorWheel>
 		</>
 	);
 }
diff --git a/packages/core/dev/index.css b/packages/core/dev/index.css
@@ -1,37 +0,0 @@
-.ColorWheelRoot {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	user-select: none;
-	touch-action: none;
-}
-
-.ColorWheelTrack {
-	position: relative;
-	height: 160px;
-	width: 160px;
-}
-
-.ColorWheelThumb {
-	display: block;
-	width: 16px;
-	height: 16px;
-	border-radius: 9999px;
-	border: 2px solid #fff;
-	box-shadow: 0 0 0 1px #0000006b;
-}
-
-.ColorWheelThumb:focus {
-	outline: none;
-}
-
-.ColorWheelLabel {
-	display: flex;
-	justify-content: space-between;
-	width: 100%;
-}
-
-html {
-	background: hsl(240 4% 16%);
-}

diff --git a/packages/core/src/color-channel-field/color-channel-field-root.tsx b/packages/core/src/color-channel-field/color-channel-field-root.tsx
@@ -60,7 +60,9 @@ export function ColorChannelFieldRoot<T extends ValidComponent = "div">(
 	const defaultId = `colorchannelfield-${createUniqueId()}`;
 
 	const mergedProps = mergeDefaultProps(
-		{ id: defaultId },
+		{
+			id: defaultId,
+		},
 		props as ColorChannelFieldRootProps,
 	);
 
@@ -72,10 +74,6 @@ export function ColorChannelFieldRoot<T extends ValidComponent = "div">(
 		"colorSpace",
 	]);
 
-	if (!local.value && !local.defaultValue) {
-		throw new Error("ColorChannelField requires a value or defaultValue");
-	}
-
 	const [value, setValue] = createControllableSignal<Color>({
 		value: () => local.value,
 		defaultValue: () => local.defaultValue,
@@ -100,7 +98,12 @@ export function ColorChannelFieldRoot<T extends ValidComponent = "div">(
 		setValue(
 			color()!.withChannelValue(
 				local.channel,
-				!Number.isNaN(value) ? value * multiplier() : Number.NaN,
+				!Number.isNaN(value)
+					? Math.max(
+							Math.min(value * multiplier(), range().maxValue),
+							range().minValue,
+						)
+					: Number.NaN,
 			),
 		);
 	};
@@ -114,9 +117,9 @@ export function ColorChannelFieldRoot<T extends ValidComponent = "div">(
 				>
 			>
 		>
-			value={
+			rawValue={
 				Number.isNaN(color()!.getChannelValue(local.channel))
-					? ""
+					? undefined
 					: color()!.getChannelValue(local.channel) / multiplier()
 			}
 			minValue={range().minValue / multiplier()}