feat: support string style prop (#432)

* chore: update formatter

.github/workflows/format-files.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Setup Biome
         uses: biomejs/setup-biome@v2
         with:
-          version: 1.5.2
+          version: 1.8.1
 
       - name: Run Biome
         run: biome ci .

apps/docs/app.config.ts

@@ -2,7 +2,7 @@ import { nodeTypes } from "@mdx-js/mdx";
 import { defineConfig } from "@solidjs/start/config";
 // @ts-ignore missing types
 import pkg from "@vinxi/plugin-mdx";
-import { Options as AcornOptions, parse } from "acorn";
+import { type Options as AcornOptions, parse } from "acorn";
 // @ts-ignore
 import Slugger from "github-slugger";
 import rehypePrettyCode from "rehype-pretty-code";

apps/docs/public/site.webmanifest

@@ -2,8 +2,16 @@
 	"name": "",
 	"short_name": "",
 	"icons": [
-		{ "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
-		{ "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+		{
+			"src": "/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
 	],
 	"theme_color": "#ffffff",
 	"background_color": "#ffffff",

apps/docs/src/components/callout.tsx

@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
-import { ComponentProps, splitProps } from "solid-js";
+import { type ComponentProps, splitProps } from "solid-js";
 
 interface CalloutProps extends ComponentProps<"div"> {
 	type: "note" | "warning";

apps/docs/src/components/header.tsx

@@ -7,7 +7,7 @@ import {
 	LATEST_CORE_CHANGELOG_URL,
 	LATEST_CORE_VERSION_NAME,
 } from "../VERSIONS";
-import { NavSection } from "../model/navigation";
+import type { NavSection } from "../model/navigation";
 import { GitHubIcon } from "./icons";
 import { MobileNavigation } from "./mobile-navigation";
 import { ThemeSelector } from "./theme-selector";

apps/docs/src/components/icons.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps } from "solid-js";
+import type { ComponentProps } from "solid-js";
 
 export function GitHubIcon(props: ComponentProps<"svg">) {
 	return (

apps/docs/src/components/kbd.tsx

@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
-import { ComponentProps, splitProps } from "solid-js";
+import { type ComponentProps, splitProps } from "solid-js";
 
 export function Kbd(props: ComponentProps<"kbd">) {
 	const [local, others] = splitProps(props, ["class"]);

apps/docs/src/components/layout.tsx

@@ -1,7 +1,7 @@
 import { useLocation } from "@solidjs/router";
-import { ParentProps, Show } from "solid-js";
+import { type ParentProps, Show } from "solid-js";
 
-import { NavSection } from "../model/navigation";
+import type { NavSection } from "../model/navigation";
 import { Footer } from "./footer";
 import { Header } from "./header";
 import { Navigation } from "./navigation";

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

@@ -3,13 +3,13 @@ import { createDisclosureState } from "@kobalte/core/primitives/create-disclosur
 import { Separator } from "@kobalte/core/separator";
 import { useIsRouting, useMatch } from "@solidjs/router";
 import { clsx } from "clsx";
-import { ComponentProps, createComputed, splitProps } from "solid-js";
+import { type ComponentProps, createComputed, splitProps } from "solid-js";
 
 import {
 	LATEST_CORE_CHANGELOG_URL,
 	LATEST_CORE_VERSION_NAME,
 } from "../VERSIONS";
-import { NavSection } from "../model/navigation";
+import type { NavSection } from "../model/navigation";
 import { CrossIcon, HamburgerMenuIcon } from "./icons";
 import { Navigation } from "./navigation";
 

apps/docs/src/components/navigation.tsx

@@ -1,8 +1,8 @@
 import { useLocation } from "@solidjs/router";
 import { clsx } from "clsx";
-import { ComponentProps, For, Match, Switch, splitProps } from "solid-js";
+import { type ComponentProps, For, Match, Switch, splitProps } from "solid-js";
 
-import { NavSection } from "../model/navigation";
+import type { NavSection } from "../model/navigation";
 
 interface NavigationProps extends ComponentProps<"nav"> {
 	sections: NavSection[];

apps/docs/src/components/preview.tsx

@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
-import { ComponentProps, mergeProps, splitProps } from "solid-js";
+import { type ComponentProps, mergeProps, splitProps } from "solid-js";
 
 interface PreviewProps extends ComponentProps<"div"> {
 	isCentered?: boolean;

apps/docs/src/components/prose.tsx

@@ -1,5 +1,5 @@
 import { clsx } from "clsx";
-import { ComponentProps, splitProps } from "solid-js";
+import { type ComponentProps, splitProps } from "solid-js";
 
 export function Prose(props: ComponentProps<"div">) {
 	const [local, others] = splitProps(props, ["class"]);

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

@@ -1,9 +1,9 @@
 import { useLocation } from "@solidjs/router";
 import { clsx } from "clsx";
 import {
-	Accessor,
+	type Accessor,
 	For,
-	Setter,
+	type Setter,
 	Suspense,
 	createEffect,
 	createSignal,
@@ -28,7 +28,7 @@ function getHeadingsFromToc(tableOfContents: TocItem[]) {
 		}
 
 		const style = window.getComputedStyle(el);
-		const scrollMt = parseFloat(style.scrollMarginTop) + 1;
+		const scrollMt = Number.parseFloat(style.scrollMarginTop) + 1;
 
 		const top = window.scrollY + el.getBoundingClientRect().top - scrollMt;
 

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

@@ -1,6 +1,10 @@
-import { Tabs, TabsRootProps } from "@kobalte/core/tabs";
+import { Tabs, type TabsRootProps } from "@kobalte/core/tabs";
 import { clsx } from "clsx";
-import { ComponentProps, ParentComponent, splitProps } from "solid-js";
+import {
+	type ComponentProps,
+	type ParentComponent,
+	splitProps,
+} from "solid-js";
 
 type TabsSnippetsComposite = {
 	List: typeof Tabs.List;

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

@@ -1,10 +1,10 @@
 import {
-	ConfigColorMode,
-	MaybeConfigColorMode,
+	type ConfigColorMode,
+	type MaybeConfigColorMode,
 	useColorMode,
 } from "@kobalte/core/color-mode";
 import { Select } from "@kobalte/core/select";
-import { JSX, createSignal, onMount } from "solid-js";
+import { type JSX, createSignal, onMount } from "solid-js";
 
 import { DesktopIcon, MoonIcon, SunIcon } from "./icons";
 

apps/docs/src/examples/navigation-menu.tsx

@@ -1,4 +1,7 @@
-import { NavigationMenu, Orientation } from "@kobalte/core/navigation-menu";
+import {
+	NavigationMenu,
+	type Orientation,
+} from "@kobalte/core/navigation-menu";
 import { RadioGroup } from "@kobalte/core/radio-group";
 import { For, createSignal } from "solid-js";
 

apps/docs/src/examples/toggle-group.tsx

@@ -1,6 +1,6 @@
 import { ToggleGroup } from "@kobalte/core/toggle-group";
 
-import { JSXElement, createSignal } from "solid-js";
+import { type JSXElement, createSignal } from "solid-js";
 import style from "./toggle-group.module.css";
 
 export function BasicExample() {

apps/docs/src/mdx-components.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@kobalte/core/button";
 import { Title as MetaTitle } from "@solidjs/meta";
 import { clsx } from "clsx";
-import { ComponentProps, Show, createSignal, splitProps } from "solid-js";
+import { type ComponentProps, Show, createSignal, splitProps } from "solid-js";
 
 import { CheckIcon, CopyIcon } from "./components";
 

apps/docs/src/routes/docs/changelog.tsx

@@ -1,8 +1,8 @@
-import { RouteProps } from "@solidjs/router";
+import type { RouteProps } from "@solidjs/router";
 
 import { CORE_VERSIONS } from "../../VERSIONS";
 import { Layout } from "../../components";
-import { NavSection } from "../../model/navigation";
+import type { NavSection } from "../../model/navigation";
 
 const CHANGELOG_NAV_SECTIONS: NavSection[] = [
 	{

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

@@ -1,7 +1,7 @@
-import { RouteProps } from "@solidjs/router";
+import type { RouteProps } from "@solidjs/router";
 
 import { Layout } from "../../components";
-import { NavSection } from "../../model/navigation";
+import type { NavSection } from "../../model/navigation";
 
 const CORE_NAV_SECTIONS: NavSection[] = [
 	{

package.json

@@ -10,10 +10,7 @@
 	"license": "MIT",
 	"author": "jer3m01 <[email protected]>",
 	"contributors": ["Fabien Marie-Louise <[email protected]>"],
-	"workspaces": [
-		"apps/*",
-		"packages/*"
-	],
+	"workspaces": ["apps/*", "packages/*"],
 	"scripts": {
 		"build": "turbo run build",
 		"build:libs": "pnpm -F \\!docs -F \\!playground build && pnpm i",
@@ -24,9 +21,8 @@
 		"commit": "git-cz",
 		"dev:core": "pnpm -F @kobalte/core dev",
 		"dev:docs": "pnpm -F @kobalte/docs dev",
-		"format": "biome format . --write && prettier . --write",
-		"lint": "pnpm check --apply",
-		"check": "biome check .",
+		"format": "biome check --write && prettier . --write",
+		"check": "biome check",
 		"test": "turbo run test",
 		"typecheck": "turbo run typecheck"
 	},
@@ -38,7 +34,7 @@
 	"devDependencies": {
 		"@babel/core": "7.22.10",
 		"@babel/preset-env": "7.22.10",
-		"@biomejs/biome": "1.5.2",
+		"@biomejs/biome": "1.8.1",
 		"@changesets/cli": "2.26.2",
 		"@commitlint/cli": "17.7.1",
 		"@commitlint/config-conventional": "17.7.0",