chore: format

kobaltedev · Nov 2, 2024 · 57d2e87 · 57d2e87
1 parent 99bd0e2
commit 57d2e87
Show file tree

Hide file tree

Showing 12 changed files with 230 additions and 70 deletions.
diff --git a/apps/docs/src/examples/color-field.tsx b/apps/docs/src/examples/color-field.tsx
@@ -6,7 +6,9 @@ import style from "./color-field.module.css";
 export function BasicExample() {
 	return (
 		<ColorField class={style["color-field"]}>
-			<ColorField.Label class={style["color-field__label"]}>Favorite color</ColorField.Label>
+			<ColorField.Label class={style["color-field__label"]}>
+				Favorite color
+			</ColorField.Label>
 			<ColorField.Input class={style["color-field__input"]} />
 		</ColorField>
 	);
@@ -15,7 +17,9 @@ export function BasicExample() {
 export function DefaultValueExample() {
 	return (
 		<ColorField class={style["color-field"]} defaultValue="#7f007f">
-			<ColorField.Label class={style["color-field__label"]}>Favorite color</ColorField.Label>
+			<ColorField.Label class={style["color-field__label"]}>
+				Favorite color
+			</ColorField.Label>
 			<ColorField.Input class={style["color-field__input"]} />
 		</ColorField>
 	);
@@ -26,8 +30,14 @@ export function ControlledExample() {
 
 	return (
 		<>
-			<ColorField class={style["color-field"]} value={value()} onChange={setValue}>
-				<ColorField.Label class={style["color-field__label"]}>Favorite color</ColorField.Label>
+			<ColorField
+				class={style["color-field"]}
+				value={value()}
+				onChange={setValue}
+			>
+				<ColorField.Label class={style["color-field__label"]}>
+					Favorite color
+				</ColorField.Label>
 				<ColorField.Input class={style["color-field__input"]} />
 			</ColorField>
 			<p class="not-prose text-sm mt-4">Your favorite color is: {value()}</p>
@@ -38,7 +48,9 @@ export function ControlledExample() {
 export function DescriptionExample() {
 	return (
 		<ColorField class={style["color-field"]}>
-			<ColorField.Label class={style["color-field__label"]}>Favorite color</ColorField.Label>
+			<ColorField.Label class={style["color-field__label"]}>
+				Favorite color
+			</ColorField.Label>
 			<ColorField.Input class={style["color-field__input"]} />
 			<ColorField.Description class={style["color-field__description"]}>
 				Choose the color you like the most.
@@ -57,7 +69,9 @@ export function ErrorMessageExample() {
 			onChange={setValue}
 			validationState={value() !== "#000000" ? "invalid" : "valid"}
 		>
-			<ColorField.Label class={style["color-field__label"]}>Favorite color</ColorField.Label>
+			<ColorField.Label class={style["color-field__label"]}>
+				Favorite color
+			</ColorField.Label>
 			<ColorField.Input class={style["color-field__input"]} />
 			<ColorField.ErrorMessage class={style["color-field__error-message"]}>
 				Hmm, I prefer black.
@@ -79,9 +93,15 @@ export function HTMLFormExample() {
 	};
 
 	return (
-		<form ref={formRef} onSubmit={onSubmit} class="flex flex-col items-center space-y-6">
+		<form
+			ref={formRef}
+			onSubmit={onSubmit}
+			class="flex flex-col items-center space-y-6"
+		>
 			<ColorField class={style["color-field"]} name="favorite-color">
-				<ColorField.Label class={style["color-field__label"]}>Favorite color</ColorField.Label>
+				<ColorField.Label class={style["color-field__label"]}>
+					Favorite color
+				</ColorField.Label>
 				<ColorField.Input class={style["color-field__input"]} />
 			</ColorField>
 			<div class="flex space-x-2">

diff --git a/apps/docs/src/examples/color-wheel.tsx b/apps/docs/src/examples/color-wheel.tsx
@@ -48,14 +48,21 @@ export function ControlledValueExample() {
 
 	return (
 		<>
-			<ColorWheel class={style.ColorWheelRoot} value={value()} onChange={setValue} thickness={24}>
+			<ColorWheel
+				class={style.ColorWheelRoot}
+				value={value()}
+				onChange={setValue}
+				thickness={24}
+			>
 				<ColorWheel.Track class={style.ColorWheelTrack}>
 					<ColorWheel.Thumb class={style.ColorWheelThumb}>
 						<ColorWheel.Input />
 					</ColorWheel.Thumb>
 				</ColorWheel.Track>
 			</ColorWheel>
-			<p class="not-prose text-sm mt-4">Current color value: {value().toString("hsl")}</p>
+			<p class="not-prose text-sm mt-4">
+				Current color value: {value().toString("hsl")}
+			</p>
 		</>
 	);
 }
@@ -65,7 +72,7 @@ export function CustomValueLabelExample() {
 		<ColorWheel
 			class={style.ColorWheelRoot}
 			thickness={24}
-			getValueLabel={color =>
+			getValueLabel={(color) =>
 				color
 					.toFormat("hsl")
 					.withChannelValue("saturation", 100)
@@ -99,7 +106,11 @@ export function HTMLFormExample() {
 	};
 
 	return (
-		<form ref={formRef} onSubmit={onSubmit} class="flex flex-col items-center space-y-6">
+		<form
+			ref={formRef}
+			onSubmit={onSubmit}
+			class="flex flex-col items-center space-y-6"
+		>
 			<ColorWheel class={style.ColorWheelRoot} name="hue" thickness={24}>
 				<ColorWheel.Track class={style.ColorWheelTrack}>
 					<ColorWheel.Thumb class={style.ColorWheelThumb}>

diff --git a/packages/core/src/colors/color-field/color-field-input.tsx b/packages/core/src/colors/color-field/color-field-input.tsx
@@ -1,12 +1,20 @@
 import { composeEventHandlers } from "@kobalte/utils";
-import { type Component, type JSX, type ValidComponent, splitProps } from "solid-js";
+import {
+	type Component,
+	type JSX,
+	type ValidComponent,
+	splitProps,
+} from "solid-js";
 import type { ElementOf, PolymorphicProps } from "../../polymorphic";
 import * as TextField from "../../text-field";
 import { useColorFieldContext } from "./color-field-context";
 
-export interface ColorFieldInputOptions extends TextField.TextFieldInputOptions {}
+export interface ColorFieldInputOptions
+	extends TextField.TextFieldInputOptions {}
 
-export interface ColorFieldInputCommonProps<T extends HTMLElement = HTMLInputElement> {
+export interface ColorFieldInputCommonProps<
+	T extends HTMLElement = HTMLInputElement,
+> {
 	onBlur: JSX.FocusEventHandlerUnion<T, FocusEvent>;
 }
 
@@ -18,8 +26,9 @@ export interface ColorFieldInputRenderProps
 	spellCheck: "false";
 }
 
-export type ColorFieldInputProps<T extends ValidComponent | HTMLElement = HTMLElement> =
-	ColorFieldInputOptions & Partial<ColorFieldInputCommonProps<ElementOf<T>>>;
+export type ColorFieldInputProps<
+	T extends ValidComponent | HTMLElement = HTMLElement,
+> = ColorFieldInputOptions & Partial<ColorFieldInputCommonProps<ElementOf<T>>>;
 
 export function ColorFieldInput<T extends ValidComponent = "input">(
 	props: PolymorphicProps<T, ColorFieldInputProps<T>>,
@@ -30,7 +39,12 @@ export function ColorFieldInput<T extends ValidComponent = "input">(
 
 	return (
 		<TextField.Input<
-			Component<Omit<ColorFieldInputRenderProps, keyof TextField.TextFieldInputRenderProps>>
+			Component<
+				Omit<
+					ColorFieldInputRenderProps,
+					keyof TextField.TextFieldInputRenderProps
+				>
+			>
 		>
 			autoComplete="off"
 			autoCorrect="off"

diff --git a/packages/core/src/colors/color-field/color-field-root.tsx b/packages/core/src/colors/color-field/color-field-root.tsx
@@ -13,29 +13,42 @@ import type { ElementOf, PolymorphicProps } from "../../polymorphic";
 import { createControllableSignal } from "../../primitives";
 import * as TextField from "../../text-field";
 import { parseColor } from "../utils";
-import { ColorFieldContext, type ColorFieldContextValue } from "./color-field-context";
+import {
+	ColorFieldContext,
+	type ColorFieldContextValue,
+} from "./color-field-context";
 
 export interface ColorFieldRootOptions extends TextField.TextFieldRootOptions {}
 
-export interface ColorFieldRootCommonProps<T extends HTMLElement = HTMLElement> {
+export interface ColorFieldRootCommonProps<
+	T extends HTMLElement = HTMLElement,
+> {
 	id: string;
 }
 
 export interface ColorFieldRootRenderProps
 	extends ColorFieldRootCommonProps,
 		TextField.TextFieldRootRenderProps {}
 
-export type ColorFieldRootProps<T extends ValidComponent | HTMLElement = HTMLElement> =
-	ColorFieldRootOptions & Partial<ColorFieldRootCommonProps<ElementOf<T>>>;
+export type ColorFieldRootProps<
+	T extends ValidComponent | HTMLElement = HTMLElement,
+> = ColorFieldRootOptions & Partial<ColorFieldRootCommonProps<ElementOf<T>>>;
 
 export function ColorFieldRoot<T extends ValidComponent = "div">(
 	props: PolymorphicProps<T, ColorFieldRootProps<T>>,
 ) {
 	const defaultId = `colorfield-${createUniqueId()}`;
 
-	const mergedProps = mergeDefaultProps({ id: defaultId }, props as ColorFieldRootProps);
+	const mergedProps = mergeDefaultProps(
+		{ id: defaultId },
+		props as ColorFieldRootProps,
+	);
 
-	const [local, others] = splitProps(mergedProps, ["value", "defaultValue", "onChange"]);
+	const [local, others] = splitProps(mergedProps, [
+		"value",
+		"defaultValue",
+		"onChange",
+	]);
 
 	const defaultValue = createMemo(() => {
 		let defaultValue = local.defaultValue;
@@ -52,7 +65,7 @@ export function ColorFieldRoot<T extends ValidComponent = "div">(
 	const [value, setValue] = createControllableSignal<string>({
 		value: () => local.value,
 		defaultValue,
-		onChange: value => local.onChange?.(value),
+		onChange: (value) => local.onChange?.(value),
 	});
 
 	const [prevValue, setPrevValue] = createSignal(value());
@@ -63,14 +76,18 @@ export function ColorFieldRoot<T extends ValidComponent = "div">(
 		}
 	};
 
-	const onBlur: JSX.FocusEventHandlerUnion<HTMLInputElement, FocusEvent> = e => {
+	const onBlur: JSX.FocusEventHandlerUnion<HTMLInputElement, FocusEvent> = (
+		e,
+	) => {
 		if (!value()!.length) {
 			setPrevValue("");
 			return;
 		}
 		let newValue: string;
 		try {
-			newValue = parseColor(value()!.startsWith("#") ? value()! : `#${value()}`).toString("hex");
+			newValue = parseColor(
+				value()!.startsWith("#") ? value()! : `#${value()}`,
+			).toString("hex");
 		} catch {
 			if (prevValue()) {
 				setValue(prevValue()!);
@@ -92,7 +109,12 @@ export function ColorFieldRoot<T extends ValidComponent = "div">(
 	return (
 		<ColorFieldContext.Provider value={context}>
 			<TextField.Root<
-				Component<Omit<ColorFieldRootRenderProps, keyof TextField.TextFieldRootRenderProps>>
+				Component<
+					Omit<
+						ColorFieldRootRenderProps,
+						keyof TextField.TextFieldRootRenderProps
+					>
+				>
 			>
 				value={value()}
 				defaultValue={defaultValue()}

diff --git a/packages/core/src/colors/color-wheel/color-wheel-input.tsx b/packages/core/src/colors/color-wheel/color-wheel-input.tsx
@@ -1,4 +1,8 @@
-import { callHandler, mergeDefaultProps, visuallyHiddenStyles } from "@kobalte/utils";
+import {
+	callHandler,
+	mergeDefaultProps,
+	visuallyHiddenStyles,
+} from "@kobalte/utils";
 import { type ComponentProps, type JSX, splitProps } from "solid-js";
 
 import { combineStyle } from "@solid-primitives/props";
@@ -32,7 +36,9 @@ export function ColorWheelInput(props: ColorWheelInputProps) {
 
 	const { fieldProps } = createFormControlField(formControlFieldProps);
 
-	const onChange: JSX.ChangeEventHandlerUnion<HTMLInputElement, Event> = e => {
+	const onChange: JSX.ChangeEventHandlerUnion<HTMLInputElement, Event> = (
+		e,
+	) => {
 		callHandler(e, local.onChange);
 
 		const target = e.target as HTMLInputElement;
@@ -65,7 +71,9 @@ export function ColorWheelInput(props: ColorWheelInputProps) {
 			aria-label={fieldProps.ariaLabel()}
 			aria-labelledby={fieldProps.ariaLabelledBy()}
 			aria-describedby={fieldProps.ariaDescribedBy()}
-			aria-invalid={formControlContext.validationState() === "invalid" || undefined}
+			aria-invalid={
+				formControlContext.validationState() === "invalid" || undefined
+			}
 			aria-required={formControlContext.isRequired() || undefined}
 			aria-disabled={formControlContext.isDisabled() || undefined}
 			aria-readonly={formControlContext.isReadOnly() || undefined}

diff --git a/packages/core/src/colors/color-wheel/color-wheel-root.tsx b/packages/core/src/colors/color-wheel/color-wheel-root.tsx
@@ -20,11 +20,18 @@ import {
 	createFormControl,
 } from "../../form-control";
 import { useLocale } from "../../i18n";
-import { type ElementOf, Polymorphic, type PolymorphicProps } from "../../polymorphic";
+import {
+	type ElementOf,
+	Polymorphic,
+	type PolymorphicProps,
+} from "../../polymorphic";
 import { createFormResetListener } from "../../primitives";
 import { COLOR_INTL_TRANSLATIONS, type ColorIntlTranslations } from "../intl";
 import type { Color } from "../types";
-import { ColorWheelContext, type ColorWheelContextValue } from "./color-wheel-context";
+import {
+	ColorWheelContext,
+	type ColorWheelContextValue,
+} from "./color-wheel-context";
 import { createColorWheelState } from "./create-color-wheel-state";
 
 export interface ColorWheelRootOptions {
@@ -77,17 +84,22 @@ export interface ColorWheelRootOptions {
 	readOnly?: boolean;
 }
 
-export interface ColorWheelRootCommonProps<T extends HTMLElement = HTMLElement> {
+export interface ColorWheelRootCommonProps<
+	T extends HTMLElement = HTMLElement,
+> {
 	id: string;
 	ref: T | ((el: T) => void);
 }
 
-export interface ColorWheelRootRenderProps extends ColorWheelRootCommonProps, FormControlDataSet {
+export interface ColorWheelRootRenderProps
+	extends ColorWheelRootCommonProps,
+		FormControlDataSet {
 	role: "group";
 }
 
-export type ColorWheelRootProps<T extends ValidComponent | HTMLElement = HTMLElement> =
-	ColorWheelRootOptions & Partial<ColorWheelRootCommonProps<ElementOf<T>>>;
+export type ColorWheelRootProps<
+	T extends ValidComponent | HTMLElement = HTMLElement,
+> = ColorWheelRootOptions & Partial<ColorWheelRootCommonProps<ElementOf<T>>>;
 
 export function ColorWheelRoot<T extends ValidComponent = "div">(
 	props: PolymorphicProps<T, ColorWheelRootProps<T>>,
@@ -99,7 +111,7 @@ export function ColorWheelRoot<T extends ValidComponent = "div">(
 	const mergedProps = mergeDefaultProps(
 		{
 			id: defaultId,
-			getValueLabel: param => param.formatChannelValue("hue"),
+			getValueLabel: (param) => param.formatChannelValue("hue"),
 			translations: COLOR_INTL_TRANSLATIONS,
 			disabled: false,
 		},
@@ -155,7 +167,11 @@ export function ColorWheelRoot<T extends ValidComponent = "div">(
 	let currentPosition: { x: number; y: number } | null = null;
 	const onDragStart = (value: number[]) => {
 		state.setIsDragging(true);
-		state.setThumbValue(value[0], value[1], Math.sqrt(value[0] * value[0] + value[1] * value[1]));
+		state.setThumbValue(
+			value[0],
+			value[1],
+			Math.sqrt(value[0] * value[0] + value[1] * value[1]),
+		);
 		currentPosition = null;
 	};
 
@@ -270,7 +286,7 @@ export function ColorWheelRoot<T extends ValidComponent = "div">(
 			<ColorWheelContext.Provider value={context}>
 				<Polymorphic<ColorWheelRootRenderProps>
 					as="div"
-					ref={mergeRefs(el => (ref = el), local.ref)}
+					ref={mergeRefs((el) => (ref = el), local.ref)}
 					role="group"
 					id={access(formControlProps.id)!}
 					{...formControlContext.dataset()}