refactor: move new component files (#513)

apps/docs/src/examples/color-area.tsx

@@ -1,6 +1,6 @@
+import { ColorArea } from "@kobalte/core/color-area";
+import { parseColor } from "@kobalte/core/colors";
 import { createSignal } from "solid-js";
-import { ColorArea } from "../../../../packages/core/src/colors/color-area";
-import { parseColor } from "../../../../packages/core/src/colors/utils";
 import style from "./color-area.module.css";
 
 export function BasicExample() {

apps/docs/src/examples/color-channel-field.tsx

@@ -1,6 +1,6 @@
+import { ColorChannelField } from "@kobalte/core/color-channel-field";
+import { parseColor } from "@kobalte/core/colors";
 import { createSignal } from "solid-js";
-import { ColorChannelField } from "../../../../packages/core/src/colors/color-channel-field";
-import { parseColor } from "../../../../packages/core/src/colors/utils";
 import { ArrowIcon } from "../components";
 import style from "./color-channel-field.module.css";
 

apps/docs/src/examples/color-field.tsx

@@ -1,5 +1,5 @@
+import { ColorField } from "@kobalte/core/color-field";
 import { createSignal } from "solid-js";
-import { ColorField } from "../../../../packages/core/src/colors/color-field";
 
 import style from "./color-field.module.css";
 

apps/docs/src/examples/color-slider.tsx

@@ -1,6 +1,6 @@
+import { ColorSlider } from "@kobalte/core/color-slider";
+import { parseColor } from "@kobalte/core/colors";
 import { createSignal } from "solid-js";
-import { ColorSlider } from "../../../../packages/core/src/colors/color-slider";
-import { parseColor } from "../../../../packages/core/src/colors/utils";
 import style from "./color-slider.module.css";
 
 export function BasicExample() {

apps/docs/src/examples/color-swatch.tsx

@@ -1,5 +1,5 @@
-import { ColorSwatch } from "../../../../packages/core/src/colors/color-swatch";
-import { parseColor } from "../../../../packages/core/src/colors/utils";
+import { ColorSwatch } from "@kobalte/core/color-swatch";
+import { parseColor } from "@kobalte/core/colors";
 import style from "./color-swatch.module.css";
 
 export function BasicExample() {

apps/docs/src/examples/color-wheel.tsx

@@ -1,6 +1,6 @@
+import { ColorWheel } from "@kobalte/core/color-wheel";
+import { parseColor } from "@kobalte/core/colors";
 import { createSignal } from "solid-js";
-import { ColorWheel } from "../../../../packages/core/src/colors/color-wheel";
-import { parseColor } from "../../../../packages/core/src/colors/utils";
 import style from "./color-wheel.module.css";
 
 export function BasicExample() {

apps/docs/src/routes/docs/core.tsx

@@ -26,7 +26,6 @@ const CORE_NAV_SECTIONS: NavSection[] = [
 			{
 				title: "Polymorphism",
 				href: "/docs/core/overview/polymorphism",
-				status: "updated",
 			},
 			{
 				title: "Server side rendering",
@@ -140,7 +139,6 @@ const CORE_NAV_SECTIONS: NavSection[] = [
 			{
 				title: "Navigation Menu",
 				href: "/docs/core/components/navigation-menu",
-				status: "new",
 			},
 			{
 				title: "Number Field",

apps/docs/src/routes/docs/core/components/badge.mdx

@@ -11,8 +11,6 @@ A `Badge` component is used to display small pieces of information or status ind
 import { Badge } from "@kobalte/core/badge";
 // or
 import { Root } from "@kobalte/core/badge";
-// or (deprecated)
-import { Badge } from "@kobalte/core";
 ```
 
 ## Features
@@ -76,7 +74,7 @@ The badge consists of:
 
 ### Badge
 
-`Badge` is equivalent to the `Root` import from `@kobalte/core/badge` (and deprecated `Badge.Root`).
+`Badge` is equivalent to the `Root` import from `@kobalte/core/badge`.
 
 | Prop      | Description                                                                                                                                                                          |
 | :-------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

apps/docs/src/routes/docs/core/components/color-area.mdx

@@ -17,8 +17,6 @@ Allows users to adjust two channels of an RGB, HSL, or HSB color value against a
 import { ColorArea } from "@kobalte/core/color-area";
 // or
 import { Root, Background, ... } from "@kobalte/core/color-area";
-// or (deprecated)
-import { ColorArea } from "@kobalte/core";
 ```
 
 ## Features
@@ -220,7 +218,7 @@ ColorArea supports the `xName` and `yName` props for integration with HTML forms
 
 ### ColorArea
 
-`ColorArea` is equivalent to the `Root` import from `@kobalte/core/color-area` (and deprecated `ColorArea.Root`).
+`ColorArea` is equivalent to the `Root` import from `@kobalte/core/color-area`.
 
 | Prop            | Description                                                                                                                                                                            |
 | :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

apps/docs/src/routes/docs/core/components/color-channel-field.mdx

@@ -19,8 +19,6 @@ A number input that allow users to edit individual color channel value.
 import { ColorChannelField } from "@kobalte/core/color-channel-field";
 // or
 import { Root, Label, ... } from "@kobalte/core/color-channel-field";
-// or (deprecated)
-import { ColorChannelField } from "@kobalte/core";
 ```
 
 ## Features
@@ -353,7 +351,7 @@ The color channel field supports optional increment/decrement triggers that are
 
 ### ColorChannelField
 
-`ColorChannelField` is equivalent to the `Root` import from `@kobalte/core/color-channel-field` (and deprecated `ColorChannelField.Root`).
+`ColorChannelField` is equivalent to the `Root` import from `@kobalte/core/color-channel-field`.
 
 | Prop            | Description                                                                                                                                                                                               |
 | :-------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

apps/docs/src/routes/docs/core/components/color-field.mdx

@@ -18,8 +18,6 @@ Allows users to enter and adjust a hex color value.
 import { ColorField } from "@kobalte/core/color-field";
 // or
 import { Root, Label, ... } from "@kobalte/core/color-field";
-// or (deprecated)
-import { ColorField } from "@kobalte/core";
 ```
 
 ## Features
@@ -262,7 +260,7 @@ function HTMLFormExample() {
 
 ### ColorField
 
-`ColorField` is equivalent to the `Root` import from `@kobalte/core/color-field` (and deprecated `ColorField.Root`).
+`ColorField` is equivalent to the `Root` import from `@kobalte/core/color-field`.
 
 | Prop            | Description                                                                                                                                                                |
 | :-------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

apps/docs/src/routes/docs/core/components/color-slider.mdx

@@ -17,8 +17,6 @@ Adjusts an individual channel of a color value.
 import { ColorSlider } from "@kobalte/core/color-slider";
 // or
 import { Root, Track, ... } from "@kobalte/core/color-slider";
-// or (deprecated)
-import { ColorSlider } from "@kobalte/core";
 ```
 
 ## Features
@@ -464,7 +462,7 @@ This must be one of the channels included in the color value, for example, for R
 
 ### ColorSlider
 
-`ColorSlider` is equivalent to the `Root` import from `@kobalte/core/color-slider` (and deprecated `ColorSlider.Root`).
+`ColorSlider` is equivalent to the `Root` import from `@kobalte/core/color-slider`.
 
 | Prop            | Description                                                                                                                             |
 | :-------------- | :-------------------------------------------------------------------------------------------------------------------------------------- |

apps/docs/src/routes/docs/core/components/color-swatch.mdx

@@ -15,8 +15,6 @@ Displays a preview of a selected color.
 import { ColorSwatch } from "@kobalte/core/color-swatch";
 // or
 import { Root } from "@kobalte/core/color-swatch";
-// or (deprecated)
-import { ColorSwatch } from "@kobalte/core";
 ```
 
 ## Features
@@ -158,7 +156,7 @@ ColorSwatch accepts a value via the `value` prop. The value should be `Color` ob
 
 ### ColorSwatch
 
-`ColorSwatch` is equivalent to the `Root` import from `@kobalte/core/color-swatch` (and deprecated `ColorSwatch.Root`).
+`ColorSwatch` is equivalent to the `Root` import from `@kobalte/core/color-swatch`.
 
 | Prop         | Description                                                                                                                                                                                                     |
 | :----------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

apps/docs/src/routes/docs/core/components/color-wheel.mdx

@@ -18,8 +18,6 @@ Allows users to adjust the hue of an HSL or HSB color value on a circular track.
 import { ColorWheel } from "@kobalte/core/color-wheel";
 // or
 import { Root, Track, ... } from "@kobalte/core/color-wheel";
-// or (deprecated)
-import { ColorWheel } from "@kobalte/core";
 ```
 
 ## Features
@@ -261,7 +259,7 @@ function HTMLFormExample() {
 
 ### ColorWheel
 
-`ColorWheel` is equivalent to the `Root` import from `@kobalte/core/color-wheel` (and deprecated `ColorWheel.Root`).
+`ColorWheel` is equivalent to the `Root` import from `@kobalte/core/color-wheel`.
 
 | Prop            | Description                                                                                                                             |
 | :-------------- | :-------------------------------------------------------------------------------------------------------------------------------------- |

apps/docs/src/routes/docs/core/components/meter.mdx

@@ -15,8 +15,6 @@ Displays numeric value that varies within a defined range
 import { Meter } from "@kobalte/core/meter";
 // or
 import { Root, Label, ... } from "@kobalte/core/meter";
-// or (deprecated)
-import { Meter } from "@kobalte/core";
 ```
 
 ## Features
@@ -172,7 +170,7 @@ We expose a CSS custom property `--kb-meter-fill-width` which corresponds to the
 
 ### Meter
 
-`Meter` is equivalent to the `Root` import from `@kobalte/core/meter` (and deprecated `Meter.Root`).
+`Meter` is equivalent to the `Root` import from `@kobalte/core/meter`.
 
 | Prop          | Description                                                                                                                                                                                                                                                    |
 | :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

package.json

@@ -64,5 +64,5 @@
 		"vitest": "1.3.1",
 		"@vitest/ui": "^1.5.2"
 	},
-	"packageManager": "pnpm@8.14.0"
+	"packageManager": "pnpm@9.12.3"
 }

packages/core/dev/App.tsx

@@ -1,10 +1,6 @@
-import { Badge } from "../src/badge";
-
 export default function App() {
 	return (
 		<>
-			<Badge as="div" class="aaall" aria-label="qqqq" aria-checked textValue="aaaa">aaa1123</Badge>
-			<Badge textValue="10">11</Badge>
 		</>
 	);
 }

packages/core/src/colors/color-area/color-area-background.tsx → packages/core/src/color-area/color-area-background.tsx

@@ -7,19 +7,19 @@ import {
 	createSignal,
 	splitProps,
 } from "solid-js";
+import type { Color, ColorChannel } from "../colors";
+import { parseColor } from "../colors";
 import {
 	type FormControlDataSet,
 	useFormControlContext,
-} from "../../form-control";
-import { useLocale } from "../../i18n";
+} from "../form-control";
+import { useLocale } from "../i18n";
 import {
 	type ElementOf,
 	Polymorphic,
 	type PolymorphicProps,
-} from "../../polymorphic";
-import { linearScale } from "../../slider/utils";
-import type { Color, ColorChannel } from "../types";
-import { parseColor } from "../utils";
+} from "../polymorphic";
+import { linearScale } from "../slider/utils";
 import { useColorAreaContext } from "./color-area-context";
 
 export interface ColorAreaBackgroundOptions {}

packages/core/src/colors/color-area/color-area-context.tsx → packages/core/src/color-area/color-area-context.tsx

@@ -1,5 +1,5 @@
 import { type Accessor, createContext, useContext } from "solid-js";
-import type { Color } from "../types";
+import type { Color } from "../colors/types";
 import type { ColorAreaIntlTranslations } from "./color-area.intl";
 import type { ColorAreaState } from "./create-color-area-state";
 

packages/core/src/colors/color-area/color-area-hidden-input-base.tsx → packages/core/src/color-area/color-area-hidden-input-base.tsx

@@ -10,12 +10,12 @@ import {
 	createMemo,
 	splitProps,
 } from "solid-js";
+import { COLOR_INTL_TRANSLATIONS } from "../colors";
 import {
 	FORM_CONTROL_FIELD_PROP_NAMES,
 	createFormControlField,
 	useFormControlContext,
-} from "../../form-control";
-import { COLOR_INTL_TRANSLATIONS } from "../intl";
+} from "../form-control";
 import { useColorAreaContext } from "./color-area-context";
 
 export interface ColorAreaHiddenInputBaseProps extends ComponentProps<"input"> {

packages/core/src/colors/color-area/color-area-root.tsx → packages/core/src/color-area/color-area-root.tsx

@@ -13,20 +13,20 @@ import {
 	splitProps,
 } from "solid-js";
 
+import type { Color, ColorChannel, ColorSpace } from "../colors/types";
 import {
 	FORM_CONTROL_PROP_NAMES,
 	FormControlContext,
 	type FormControlDataSet,
 	createFormControl,
-} from "../../form-control";
-import { useLocale } from "../../i18n";
+} from "../form-control";
+import { useLocale } from "../i18n";
 import {
 	type ElementOf,
 	Polymorphic,
 	type PolymorphicProps,
-} from "../../polymorphic";
-import { createFormResetListener } from "../../primitives";
-import type { Color, ColorChannel, ColorSpace } from "../types";
+} from "../polymorphic";
+import { createFormResetListener } from "../primitives";
 import {
 	ColorAreaContext,
 	type ColorAreaContextValue,

packages/core/src/colors/color-area/color-area-thumb.tsx → packages/core/src/color-area/color-area-thumb.tsx

@@ -1,13 +1,13 @@
 import { callHandler, mergeRefs } from "@kobalte/utils";
 import { combineStyle } from "@solid-primitives/props";
 import { type JSX, type ValidComponent, splitProps } from "solid-js";
-import { useFormControlContext } from "../../form-control";
+import { COLOR_INTL_TRANSLATIONS } from "../colors";
+import { useFormControlContext } from "../form-control";
 import {
 	type ElementOf,
 	Polymorphic,
 	type PolymorphicProps,
-} from "../../polymorphic";
-import { COLOR_INTL_TRANSLATIONS } from "../intl";
+} from "../polymorphic";
 import { useColorAreaContext } from "./color-area-context";
 
 export interface ColorAreaThumbOptions {}

packages/core/src/colors/color-area/create-color-area-state.ts → packages/core/src/color-area/create-color-area-state.ts

@@ -1,7 +1,7 @@
 import { clamp, mergeDefaultProps, snapValueToStep } from "@kobalte/utils";
 import { type Accessor, batch, createMemo, createSignal } from "solid-js";
-import { createControllableSignal } from "../../primitives";
-import type { Color, ColorChannel, ColorSpace } from "../types";
+import type { Color, ColorChannel, ColorSpace } from "../colors";
+import { createControllableSignal } from "../primitives";
 
 export interface ColorAreaState {
 	readonly value: Accessor<Color>;

packages/core/src/colors/color-area/index.tsx → packages/core/src/color-area/index.tsx

@@ -14,7 +14,7 @@ import {
 	FormControlDescription as Description,
 	FormControlErrorMessage as ErrorMessage,
 	FormControlLabel as Label,
-} from "../../form-control";
+} from "../form-control";
 
 import {
 	ColorAreaBackground as Background,

packages/core/src/colors/color-channel-field/color-channel-field-root.tsx → packages/core/src/color-channel-field/color-channel-field-root.tsx

@@ -6,10 +6,10 @@ import {
 	createUniqueId,
 	splitProps,
 } from "solid-js";
-import * as NumberField from "../../number-field";
-import type { ElementOf, PolymorphicProps } from "../../polymorphic";
-import { createControllableSignal } from "../../primitives";
-import type { Color, ColorChannel, ColorSpace } from "../types";
+import type { Color, ColorChannel, ColorSpace } from "../colors";
+import * as NumberField from "../number-field";
+import type { ElementOf, PolymorphicProps } from "../polymorphic";
+import { createControllableSignal } from "../primitives";
 
 export interface ColorChannelFieldRootOptions
 	extends Omit<

packages/core/src/colors/color-channel-field/index.tsx → packages/core/src/color-channel-field/index.tsx

@@ -14,7 +14,7 @@ import {
 	FormControlDescription as Description,
 	FormControlErrorMessage as ErrorMessage,
 	FormControlLabel as Label,
-} from "../../form-control";
+} from "../form-control";
 
 import {
 	type NumberFieldDecrementTriggerCommonProps as ColorChannelFieldDecrementTriggerCommonProps,
@@ -34,7 +34,7 @@ import {
 	HiddenInput,
 	IncrementTrigger,
 	Input,
-} from "../../number-field";
+} from "../number-field";
 import {
 	type ColorChannelFieldRootCommonProps,
 	type ColorChannelFieldRootOptions,

packages/core/src/colors/color-field/color-field-input.tsx → packages/core/src/color-field/color-field-input.tsx

@@ -5,8 +5,8 @@ import {
 	type ValidComponent,
 	splitProps,
 } from "solid-js";
-import type { ElementOf, PolymorphicProps } from "../../polymorphic";
-import * as TextField from "../../text-field";
+import type { ElementOf, PolymorphicProps } from "../polymorphic";
+import * as TextField from "../text-field";
 import { useColorFieldContext } from "./color-field-context";
 
 export interface ColorFieldInputOptions

packages/core/src/colors/color-field/color-field-root.tsx → packages/core/src/color-field/color-field-root.tsx

@@ -9,10 +9,10 @@ import {
 	createUniqueId,
 	splitProps,
 } from "solid-js";
-import type { ElementOf, PolymorphicProps } from "../../polymorphic";
-import { createControllableSignal } from "../../primitives";
-import * as TextField from "../../text-field";
-import { parseColor } from "../utils";
+import { parseColor } from "../colors";
+import type { ElementOf, PolymorphicProps } from "../polymorphic";
+import { createControllableSignal } from "../primitives";
+import * as TextField from "../text-field";
 import {
 	ColorFieldContext,
 	type ColorFieldContextValue,