feat: allow importing individual components

apps/docs/src/app.tsx

@@ -2,19 +2,19 @@
 import "@docsearch/css";
 import "./root.css";
 
-import {
-	ColorModeProvider,
-	ColorModeScript,
-	Toast,
-	cookieStorageManagerSSR,
-} from "@kobalte/core";
 import { MetaProvider, Title } from "@solidjs/meta";
 import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start";
 import { Suspense } from "solid-js";
 import { Portal, isServer } from "solid-js/web";
 import { MDXProvider } from "solid-mdx";
 
+import {
+	ColorModeProvider,
+	ColorModeScript,
+	cookieStorageManagerSSR,
+} from "@kobalte/core/color-mode";
+import { Toast } from "@kobalte/core/toast";
 import { getCookie } from "vinxi/server";
 import toastStyles from "./examples/toast.module.css";
 import { mdxComponents } from "./mdx-components";

apps/docs/src/components/mobile-navigation.tsx

@@ -1,4 +1,6 @@
-import { Dialog, Separator, createDisclosureState } from "@kobalte/core";
+import { Dialog } from "@kobalte/core/dialog";
+import { createDisclosureState } from "@kobalte/core/primitives/create-disclosure-state";
+import { Separator } from "@kobalte/core/separator";
 import { useIsRouting, useMatch } from "@solidjs/router";
 import { clsx } from "clsx";
 import { ComponentProps, createComputed, splitProps } from "solid-js";
@@ -36,11 +38,7 @@ export function MobileNavigation(props: MobileNavigationProps) {
 			>
 				<HamburgerMenuIcon class="h-6 w-6 text-zinc-500" />
 			</button>
-			<Dialog.Root
-				open={isOpen()}
-				onOpenChange={setIsOpen}
-				aria-label="Navigation"
-			>
+			<Dialog open={isOpen()} onOpenChange={setIsOpen} aria-label="Navigation">
 				<Dialog.Portal>
 					<Dialog.Overlay class="fixed inset-0 z-50 flex items-start overflow-y-auto bg-zinc-900/50 pr-10 backdrop-blur lg:hidden" />
 
@@ -91,11 +89,11 @@ export function MobileNavigation(props: MobileNavigationProps) {
 								Changelog
 							</a>
 						</div>
-						<Separator.Root class="lg:hidden" />
+						<Separator class="lg:hidden" />
 						<Navigation sections={local.sections} class="mt-5 px-1" />
 					</Dialog.Content>
 				</Dialog.Portal>
-			</Dialog.Root>
+			</Dialog>
 		</>
 	);
 }

apps/docs/src/components/table-of-contents.tsx

@@ -1,16 +1,17 @@
-import { cache, createAsync, useLocation } from "@solidjs/router";
+import { useLocation } from "@solidjs/router";
 import { clsx } from "clsx";
 import {
 	Accessor,
 	For,
+	Setter,
 	Suspense,
 	createEffect,
 	createSignal,
 	on,
 	onCleanup,
 } from "solid-js";
 import { isServer } from "solid-js/web";
-import { mods } from "../app";
+//import { mods } from "../app";
 
 interface TocItem {
 	depth: number;

apps/docs/src/components/tabs-snippets.tsx

@@ -1,4 +1,4 @@
-import { Tabs } from "@kobalte/core";
+import { Tabs, TabsRootProps } from "@kobalte/core/tabs";
 import { clsx } from "clsx";
 import { ComponentProps, ParentComponent, splitProps } from "solid-js";
 
@@ -8,12 +8,12 @@ type TabsSnippetsComposite = {
 	Content: typeof Tabs.Content;
 };
 
-export const TabsSnippets: ParentComponent<ComponentProps<typeof Tabs.Root>> &
+export const TabsSnippets: ParentComponent<TabsRootProps & { class: string }> &
 	TabsSnippetsComposite = (props) => {
 	const [local, others] = splitProps(props, ["class"]);
 
 	return (
-		<Tabs.Root
+		<Tabs
 			class={clsx(
 				"kb-tabs-snippets not-prose my-6 overflow-y-auto rounded-lg border border-solid border-zinc-200 bg-[#fafafa] dark:bg-[#27272a] dark:border-[#3f3f46]",
 				local.class,

apps/docs/src/components/theme-selector.tsx

@@ -1,4 +1,9 @@
-import { ConfigColorMode, Select, useColorMode } from "@kobalte/core";
+import {
+	ConfigColorMode,
+	MaybeConfigColorMode,
+	useColorMode,
+} from "@kobalte/core/color-mode";
+import { Select } from "@kobalte/core/select";
 import { JSX, createSignal, onMount } from "solid-js";
 
 import { DesktopIcon, MoonIcon, SunIcon } from "./icons";
@@ -43,7 +48,7 @@ export function ThemeSelector() {
 	});
 
 	return (
-		<Select.Root<ThemeOption>
+		<Select<ThemeOption>
 			options={THEME_OPTIONS}
 			optionValue="value"
 			optionTextValue="label"
@@ -78,6 +83,6 @@ export function ThemeSelector() {
 					<Select.Listbox />
 				</Select.Content>
 			</Select.Portal>
-		</Select.Root>
+		</Select>
 	);
 }

apps/docs/src/entry-client.tsx

@@ -1,3 +1,3 @@
 import { StartClient, mount } from "@solidjs/start/client";
 
-mount(() => <StartClient />, document.getElementById("app"));
+mount(() => <StartClient />, document.getElementById("app")!);

apps/docs/src/examples/accordion.tsx

@@ -1,12 +1,12 @@
-import { Accordion } from "@kobalte/core";
+import { Accordion } from "@kobalte/core/accordion";
 import { createSignal } from "solid-js";
 
 import { ChevronDownIcon } from "../components";
 import style from "./accordion.module.css";
 
 export function BasicExample() {
 	return (
-		<Accordion.Root class={style.accordion} defaultValue={["item-1"]}>
+		<Accordion class={style.accordion} defaultValue={["item-1"]}>
 			<Accordion.Item class={style.accordion__item} value="item-1">
 				<Accordion.Header class={style["accordion__item-header"]}>
 					<Accordion.Trigger class={style["accordion__item-trigger"]}>
@@ -58,13 +58,13 @@ export function BasicExample() {
 					</p>
 				</Accordion.Content>
 			</Accordion.Item>
-		</Accordion.Root>
+		</Accordion>
 	);
 }
 
 export function DefaultValueExample() {
 	return (
-		<Accordion.Root class={style.accordion} defaultValue={["item-2"]}>
+		<Accordion class={style.accordion} defaultValue={["item-2"]}>
 			<Accordion.Item class={style.accordion__item} value="item-1">
 				<Accordion.Header class={style["accordion__item-header"]}>
 					<Accordion.Trigger class={style["accordion__item-trigger"]}>
@@ -116,7 +116,7 @@ export function DefaultValueExample() {
 					</p>
 				</Accordion.Content>
 			</Accordion.Item>
-		</Accordion.Root>
+		</Accordion>
 	);
 }
 
@@ -125,7 +125,7 @@ export function ControlledExample() {
 
 	return (
 		<>
-			<Accordion.Root
+			<Accordion
 				class={style.accordion}
 				value={expandedItem()}
 				onChange={setExpandedItem}
@@ -181,7 +181,7 @@ export function ControlledExample() {
 						</p>
 					</Accordion.Content>
 				</Accordion.Item>
-			</Accordion.Root>
+			</Accordion>
 			<p class="not-prose text-sm mt-2">
 				Expanded item: {expandedItem().join(",")}
 			</p>
@@ -191,7 +191,7 @@ export function ControlledExample() {
 
 export function CollapsibleExample() {
 	return (
-		<Accordion.Root class={style.accordion} collapsible>
+		<Accordion class={style.accordion} collapsible>
 			<Accordion.Item class={style.accordion__item} value="item-1">
 				<Accordion.Header class={style["accordion__item-header"]}>
 					<Accordion.Trigger class={style["accordion__item-trigger"]}>
@@ -243,13 +243,13 @@ export function CollapsibleExample() {
 					</p>
 				</Accordion.Content>
 			</Accordion.Item>
-		</Accordion.Root>
+		</Accordion>
 	);
 }
 
 export function AllowMultipleExample() {
 	return (
-		<Accordion.Root class={style.accordion} multiple>
+		<Accordion class={style.accordion} multiple>
 			<Accordion.Item class={style.accordion__item} value="item-1">
 				<Accordion.Header class={style["accordion__item-header"]}>
 					<Accordion.Trigger class={style["accordion__item-trigger"]}>
@@ -301,6 +301,6 @@ export function AllowMultipleExample() {
 					</p>
 				</Accordion.Content>
 			</Accordion.Item>
-		</Accordion.Root>
+		</Accordion>
 	);
 }

apps/docs/src/examples/alert-dialog.tsx

@@ -1,11 +1,11 @@
-import { AlertDialog } from "@kobalte/core";
+import { AlertDialog } from "@kobalte/core/alert-dialog";
 
 import { CrossIcon } from "../components";
 import style from "./alert-dialog.module.css";
 
 export function BasicExample() {
 	return (
-		<AlertDialog.Root modal={false} preventScroll>
+		<AlertDialog modal={false} preventScroll>
 			<AlertDialog.Trigger class={style["alert-dialog__trigger"]}>
 				Open
 			</AlertDialog.Trigger>
@@ -32,6 +32,6 @@ export function BasicExample() {
 					</AlertDialog.Content>
 				</div>
 			</AlertDialog.Portal>
-		</AlertDialog.Root>
+		</AlertDialog>
 	);
 }

apps/docs/src/examples/alert.tsx

@@ -1,11 +1,9 @@
-import { Alert } from "@kobalte/core";
+import { Alert } from "@kobalte/core/alert";
 
 import style from "./alert.module.css";
 
 export function BasicExample() {
 	return (
-		<Alert.Root class={style.alert}>
-			Kobalte is going live soon, get ready!
-		</Alert.Root>
+		<Alert class={style.alert}>Kobalte is going live soon, get ready!</Alert>
 	);
 }

apps/docs/src/examples/breadcrumbs.tsx

@@ -1,11 +1,11 @@
-import { Breadcrumbs } from "@kobalte/core";
+import { Breadcrumbs } from "@kobalte/core/breadcrumbs";
 
 import { ChevronRightIcon } from "../components";
 import style from "./breadcrumbs.module.css";
 
 export function BasicExample() {
 	return (
-		<Breadcrumbs.Root>
+		<Breadcrumbs>
 			<ol class={style.breadcrumbs__list}>
 				<li class={style.breadcrumbs__item}>
 					<Breadcrumbs.Link href="/" class={style.breadcrumbs__link}>
@@ -25,13 +25,13 @@ export function BasicExample() {
 					</Breadcrumbs.Link>
 				</li>
 			</ol>
-		</Breadcrumbs.Root>
+		</Breadcrumbs>
 	);
 }
 
 export function CustomSeparatorExample() {
 	return (
-		<Breadcrumbs.Root separator={<ChevronRightIcon width={20} height={20} />}>
+		<Breadcrumbs separator={<ChevronRightIcon width={20} height={20} />}>
 			<ol class={style.breadcrumbs__list}>
 				<li class={style.breadcrumbs__item}>
 					<Breadcrumbs.Link href="/" class={style.breadcrumbs__link}>
@@ -51,6 +51,6 @@ export function CustomSeparatorExample() {
 					</Breadcrumbs.Link>
 				</li>
 			</ol>
-		</Breadcrumbs.Root>
+		</Breadcrumbs>
 	);
 }

apps/docs/src/examples/button.tsx

@@ -1,7 +1,7 @@
-import { Button } from "@kobalte/core";
+import { Button } from "@kobalte/core/button";
 
 import style from "./button.module.css";
 
 export function BasicExample() {
-	return <Button.Root class={style.button}>Click me</Button.Root>;
+	return <Button class={style.button}>Click me</Button>;
 }