diff --git a/.github/workflows/format-files.yml b/.github/workflows/format-files.yml index 9f93fdccd..b2d1d9230 100644 --- a/.github/workflows/format-files.yml +++ b/.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 . diff --git a/apps/docs/app.config.ts b/apps/docs/app.config.ts index 15e7725e7..675133f02 100644 --- a/apps/docs/app.config.ts +++ b/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"; diff --git a/apps/docs/public/site.webmanifest b/apps/docs/public/site.webmanifest index 52a2fe3f6..959115040 100644 --- a/apps/docs/public/site.webmanifest +++ b/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", diff --git a/apps/docs/src/components/callout.tsx b/apps/docs/src/components/callout.tsx index 4775b9b2e..9a732fadc 100644 --- a/apps/docs/src/components/callout.tsx +++ b/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"; diff --git a/apps/docs/src/components/header.tsx b/apps/docs/src/components/header.tsx index 5b520e66b..9b9e7a2e2 100644 --- a/apps/docs/src/components/header.tsx +++ b/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"; diff --git a/apps/docs/src/components/icons.tsx b/apps/docs/src/components/icons.tsx index c2c2bbc95..f38bb1a86 100644 --- a/apps/docs/src/components/icons.tsx +++ b/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 ( diff --git a/apps/docs/src/components/kbd.tsx b/apps/docs/src/components/kbd.tsx index 316f6e8b2..bf1cfcc73 100644 --- a/apps/docs/src/components/kbd.tsx +++ b/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"]); diff --git a/apps/docs/src/components/layout.tsx b/apps/docs/src/components/layout.tsx index 53d64f764..cc52a66a0 100644 --- a/apps/docs/src/components/layout.tsx +++ b/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"; diff --git a/apps/docs/src/components/mobile-navigation.tsx b/apps/docs/src/components/mobile-navigation.tsx index 64ae2d19a..2a67d43c6 100644 --- a/apps/docs/src/components/mobile-navigation.tsx +++ b/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"; diff --git a/apps/docs/src/components/navigation.tsx b/apps/docs/src/components/navigation.tsx index aa3f31d2c..f84ff24c9 100644 --- a/apps/docs/src/components/navigation.tsx +++ b/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[]; diff --git a/apps/docs/src/components/preview.tsx b/apps/docs/src/components/preview.tsx index 22dc4f2df..f552501d3 100644 --- a/apps/docs/src/components/preview.tsx +++ b/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; diff --git a/apps/docs/src/components/prose.tsx b/apps/docs/src/components/prose.tsx index 328255400..8bbdd2c0b 100644 --- a/apps/docs/src/components/prose.tsx +++ b/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"]); diff --git a/apps/docs/src/components/table-of-contents.tsx b/apps/docs/src/components/table-of-contents.tsx index 4d6fe72ac..517fde0b1 100644 --- a/apps/docs/src/components/table-of-contents.tsx +++ b/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; diff --git a/apps/docs/src/components/tabs-snippets.tsx b/apps/docs/src/components/tabs-snippets.tsx index 49a88f8c6..e988c2135 100644 --- a/apps/docs/src/components/tabs-snippets.tsx +++ b/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; diff --git a/apps/docs/src/components/theme-selector.tsx b/apps/docs/src/components/theme-selector.tsx index abdec2b22..e8169cdfe 100644 --- a/apps/docs/src/components/theme-selector.tsx +++ b/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"; diff --git a/apps/docs/src/examples/navigation-menu.tsx b/apps/docs/src/examples/navigation-menu.tsx index 8d753b45a..76a85be4d 100644 --- a/apps/docs/src/examples/navigation-menu.tsx +++ b/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"; diff --git a/apps/docs/src/examples/toggle-group.tsx b/apps/docs/src/examples/toggle-group.tsx index 7003da658..40d36c65d 100644 --- a/apps/docs/src/examples/toggle-group.tsx +++ b/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() { diff --git a/apps/docs/src/mdx-components.tsx b/apps/docs/src/mdx-components.tsx index b37cb5b16..0836a0a0a 100644 --- a/apps/docs/src/mdx-components.tsx +++ b/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"; diff --git a/apps/docs/src/routes/docs/changelog.tsx b/apps/docs/src/routes/docs/changelog.tsx index 2827e04a6..667462dfc 100644 --- a/apps/docs/src/routes/docs/changelog.tsx +++ b/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[] = [ { diff --git a/apps/docs/src/routes/docs/core.tsx b/apps/docs/src/routes/docs/core.tsx index 8def8ee5c..d4b1efb21 100644 --- a/apps/docs/src/routes/docs/core.tsx +++ b/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[] = [ { diff --git a/package.json b/package.json index ff9655c6d..9865f40d9 100644 --- a/package.json +++ b/package.json @@ -10,10 +10,7 @@ "license": "MIT", "author": "jer3m01 ", "contributors": ["Fabien Marie-Louise "], - "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", diff --git a/packages/core/package.json b/packages/core/package.json index 62f65b791..6de712d42 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,91 +1,83 @@ { - "name": "@kobalte/core", - "version": "0.13.3", - "private": false, - "description": "Unstyled components and primitives for building accessible web apps and design systems with SolidJS.", - "keywords": [ - "solid", - "solidjs", - "ui", - "library", - "design-system", - "components", - "headless", - "unstyled", - "aria" - ], - "homepage": "https://github.com/kobaltedev/kobalte/tree/main/packages/core#readme", - "bugs": { - "url": "https://github.com/kobaltedev/kobalte/issues" - }, - "repository": { - "type": "git", - "url": "git+https://github.com/kobaltedev/kobalte.git" - }, - "license": "MIT", - "author": "jer3m01 ", - "contributors": [ - "Fabien Marie-Louise " - ], - "sideEffects": false, - "type": "module", - "exports": { - ".": { - "types": "./dist/index.d.ts", - "solid": "./dist/index.jsx", - "default": "./dist/index.js" - }, - "./*": { - "types": "./dist/*/index.d.ts", - "solid": "./dist/*/index.jsx", - "default": "./dist/*/index.js" - }, - "./src/*": "./src/*" - }, - "main": "dist/index.js", - "module": "dist/index.js", - "types": "dist/index.d.ts", - "typesVersions": { - "*": { - "*": [ - "./dist/*/index.d.ts", - "./dist/index.d.ts" - ] - } - }, - "source": "src/index.tsx", - "files": [ - "dist", - "src", - "NOTICE.txt" - ], - "scripts": { - "build": "pnpm build:cp && pnpm build:tsup", - "build:cp": "cp ../../NOTICE.txt .", - "build:tsup": "NODE_OPTIONS=\"--max-old-space-size=8192\" tsup", - "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm NOTICE.txt", - "dev": "vite serve dev --host", - "test-old": "jest --passWithNoTests", - "test": "vitest run", - "typecheck": "tsc --noEmit" - }, - "dependencies": { - "@floating-ui/dom": "^1.5.1", - "@internationalized/date": "^3.4.0", - "@internationalized/number": "^3.2.1", - "@kobalte/utils": "^0.9.0", - "solid-presence": "^0.1.6", - "solid-prevent-scroll": "^0.1.4" - }, - "devDependencies": { - "@kobalte/tests": "^0.6.0", - "esbuild-plugin-solid": "^0.5.0", - "tsup": "7.2.0" - }, - "peerDependencies": { - "solid-js": "^1.8.15" - }, - "publishConfig": { - "access": "public" - } + "name": "@kobalte/core", + "version": "0.13.3", + "private": false, + "description": "Unstyled components and primitives for building accessible web apps and design systems with SolidJS.", + "keywords": [ + "solid", + "solidjs", + "ui", + "library", + "design-system", + "components", + "headless", + "unstyled", + "aria" + ], + "homepage": "https://github.com/kobaltedev/kobalte/tree/main/packages/core#readme", + "bugs": { + "url": "https://github.com/kobaltedev/kobalte/issues" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/kobaltedev/kobalte.git" + }, + "license": "MIT", + "author": "jer3m01 ", + "contributors": ["Fabien Marie-Louise "], + "sideEffects": false, + "type": "module", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "solid": "./dist/index.jsx", + "default": "./dist/index.js" + }, + "./*": { + "types": "./dist/*/index.d.ts", + "solid": "./dist/*/index.jsx", + "default": "./dist/*/index.js" + }, + "./src/*": "./src/*" + }, + "main": "dist/index.js", + "module": "dist/index.js", + "types": "dist/index.d.ts", + "typesVersions": { + "*": { + "*": ["./dist/*/index.d.ts", "./dist/index.d.ts"] + } + }, + "source": "src/index.tsx", + "files": ["dist", "src", "NOTICE.txt"], + "scripts": { + "build": "pnpm build:cp && pnpm build:tsup", + "build:cp": "cp ../../NOTICE.txt .", + "build:tsup": "NODE_OPTIONS=\"--max-old-space-size=8192\" tsup", + "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist && rm NOTICE.txt", + "dev": "vite serve dev --host", + "test-old": "jest --passWithNoTests", + "test": "vitest run", + "typecheck": "tsc --noEmit" + }, + "dependencies": { + "@floating-ui/dom": "^1.5.1", + "@internationalized/date": "^3.4.0", + "@internationalized/number": "^3.2.1", + "@kobalte/utils": "^0.9.0", + "@solid-primitives/props": "^3.1.8", + "solid-presence": "^0.1.6", + "solid-prevent-scroll": "^0.1.4" + }, + "devDependencies": { + "@kobalte/tests": "^0.6.0", + "esbuild-plugin-solid": "^0.5.0", + "tsup": "7.2.0" + }, + "peerDependencies": { + "solid-js": "^1.8.15" + }, + "publishConfig": { + "access": "public" + } } diff --git a/packages/core/src/accordion/accordion-content.tsx b/packages/core/src/accordion/accordion-content.tsx index f06bd993b..f57fb099f 100644 --- a/packages/core/src/accordion/accordion-content.tsx +++ b/packages/core/src/accordion/accordion-content.tsx @@ -8,15 +8,16 @@ import { mergeDefaultProps } from "@kobalte/utils"; import { - Component, - ValidComponent, + type Component, + type ValidComponent, createEffect, onCleanup, splitProps, } from "solid-js"; +import { combineStyle } from "@solid-primitives/props"; import * as Collapsible from "../collapsible"; -import { ElementOf, PolymorphicProps } from "../polymorphic"; +import type { ElementOf, PolymorphicProps } from "../polymorphic"; import { useAccordionItemContext } from "./accordion-item-context"; export interface AccordionContentOptions {} @@ -69,11 +70,14 @@ export function AccordionContent( > role="region" aria-labelledby={itemContext.triggerId()} - style={{ - "--kb-accordion-content-height": "var(--kb-collapsible-content-height)", - "--kb-accordion-content-width": "var(--kb-collapsible-content-width)", - ...local.style, - }} + style={combineStyle( + { + "--kb-accordion-content-height": + "var(--kb-collapsible-content-height)", + "--kb-accordion-content-width": "var(--kb-collapsible-content-width)", + }, + local.style, + )} {...others} /> ); diff --git a/packages/core/src/accordion/accordion-context.tsx b/packages/core/src/accordion/accordion-context.tsx index 5b383fe8c..169935fa0 100644 --- a/packages/core/src/accordion/accordion-context.tsx +++ b/packages/core/src/accordion/accordion-context.tsx @@ -1,6 +1,6 @@ -import { Accessor, createContext, useContext } from "solid-js"; +import { type Accessor, createContext, useContext } from "solid-js"; -import { ListState } from "../list"; +import type { ListState } from "../list"; export interface AccordionContextValue { listState: Accessor; diff --git a/packages/core/src/accordion/accordion-header.tsx b/packages/core/src/accordion/accordion-header.tsx index 481d8f523..af182f105 100644 --- a/packages/core/src/accordion/accordion-header.tsx +++ b/packages/core/src/accordion/accordion-header.tsx @@ -1,11 +1,15 @@ import { OverrideComponentProps } from "@kobalte/utils"; -import { ValidComponent } from "solid-js"; +import type { ValidComponent } from "solid-js"; import { - CollapsibleDataSet, + type CollapsibleDataSet, useCollapsibleContext, } from "../collapsible/collapsible-context"; -import { ElementOf, Polymorphic, PolymorphicProps } from "../polymorphic"; +import { + type ElementOf, + Polymorphic, + type PolymorphicProps, +} from "../polymorphic"; export interface AccordionHeaderOptions {} diff --git a/packages/core/src/accordion/accordion-item-context.tsx b/packages/core/src/accordion/accordion-item-context.tsx index 0796dbe82..176d57af2 100644 --- a/packages/core/src/accordion/accordion-item-context.tsx +++ b/packages/core/src/accordion/accordion-item-context.tsx @@ -1,4 +1,4 @@ -import { Accessor, createContext, useContext } from "solid-js"; +import { type Accessor, createContext, useContext } from "solid-js"; export interface AccordionItemContextValue { value: Accessor; diff --git a/packages/core/src/accordion/accordion-item.tsx b/packages/core/src/accordion/accordion-item.tsx index 46dcaae48..6206d71c7 100644 --- a/packages/core/src/accordion/accordion-item.tsx +++ b/packages/core/src/accordion/accordion-item.tsx @@ -8,21 +8,21 @@ import { createGenerateId, mergeDefaultProps } from "@kobalte/utils"; import { - Component, + type Component, JSX, - ValidComponent, + type ValidComponent, createSignal, createUniqueId, splitProps, } from "solid-js"; import * as Collapsible from "../collapsible"; -import { ElementOf, PolymorphicProps } from "../polymorphic"; +import { ElementOf, type PolymorphicProps } from "../polymorphic"; import { createRegisterId } from "../primitives"; import { useAccordionContext } from "./accordion-context"; import { AccordionItemContext, - AccordionItemContextValue, + type AccordionItemContextValue, } from "./accordion-item-context"; export interface AccordionItemOptions { diff --git a/packages/core/src/accordion/accordion-root.tsx b/packages/core/src/accordion/accordion-root.tsx index c90d701ed..86482dad9 100644 --- a/packages/core/src/accordion/accordion-root.tsx +++ b/packages/core/src/accordion/accordion-root.tsx @@ -13,18 +13,25 @@ import { mergeRefs, } from "@kobalte/utils"; import { - JSX, - ValidComponent, + type JSX, + type ValidComponent, createSignal, createUniqueId, splitProps, } from "solid-js"; import { createListState, createSelectableList } from "../list"; -import { ElementOf, Polymorphic, PolymorphicProps } from "../polymorphic"; -import { CollectionItemWithRef } from "../primitives"; +import { + type ElementOf, + Polymorphic, + type PolymorphicProps, +} from "../polymorphic"; +import type { CollectionItemWithRef } from "../primitives"; import { createDomCollection } from "../primitives/create-dom-collection"; -import { AccordionContext, AccordionContextValue } from "./accordion-context"; +import { + AccordionContext, + type AccordionContextValue, +} from "./accordion-context"; export interface AccordionRootOptions { /** The controlled value of the accordion item(s) to expand. */ diff --git a/packages/core/src/accordion/accordion-trigger.tsx b/packages/core/src/accordion/accordion-trigger.tsx index 81a57844d..681e0ca06 100644 --- a/packages/core/src/accordion/accordion-trigger.tsx +++ b/packages/core/src/accordion/accordion-trigger.tsx @@ -13,9 +13,9 @@ import { mergeRefs, } from "@kobalte/utils"; import { - Component, - JSX, - ValidComponent, + type Component, + type JSX, + type ValidComponent, createEffect, onCleanup, splitProps, @@ -23,8 +23,8 @@ import { import * as Collapsible from "../collapsible"; import { useCollapsibleContext } from "../collapsible/collapsible-context"; -import { ElementOf, PolymorphicProps } from "../polymorphic"; -import { CollectionItemWithRef } from "../primitives"; +import type { ElementOf, PolymorphicProps } from "../polymorphic"; +import type { CollectionItemWithRef } from "../primitives"; import { createDomCollectionItem } from "../primitives/create-dom-collection"; import { createSelectableItem } from "../selection"; import { useAccordionContext } from "./accordion-context"; diff --git a/packages/core/src/accordion/accordion.test.tsx b/packages/core/src/accordion/accordion.test.tsx index e41c96fa4..ff487ad71 100644 --- a/packages/core/src/accordion/accordion.test.tsx +++ b/packages/core/src/accordion/accordion.test.tsx @@ -9,7 +9,7 @@ import { installPointerEvent } from "@kobalte/tests"; import { fireEvent, render, within } from "@solidjs/testing-library"; import userEvent from "@testing-library/user-event"; -import { ComponentProps, For } from "solid-js"; +import { type ComponentProps, For } from "solid-js"; import { vi } from "vitest"; import * as Accordion from "."; diff --git a/packages/core/src/accordion/index.tsx b/packages/core/src/accordion/index.tsx index 553337c10..6813b4a01 100644 --- a/packages/core/src/accordion/index.tsx +++ b/packages/core/src/accordion/index.tsx @@ -1,37 +1,37 @@ import { - AccordionContent as Content, type AccordionContentCommonProps, type AccordionContentOptions, type AccordionContentProps, type AccordionContentRenderProps, + AccordionContent as Content, } from "./accordion-content"; import { - AccordionHeader as Header, type AccordionHeaderCommonProps, type AccordionHeaderOptions, type AccordionHeaderProps, type AccordionHeaderRenderProps, + AccordionHeader as Header, } from "./accordion-header"; import { - AccordionItem as Item, type AccordionItemCommonProps, type AccordionItemOptions, type AccordionItemProps, type AccordionItemRenderProps, + AccordionItem as Item, } from "./accordion-item"; import { - AccordionRoot as Root, type AccordionRootCommonProps, type AccordionRootOptions, type AccordionRootProps, type AccordionRootRenderProps, + AccordionRoot as Root, } from "./accordion-root"; import { - AccordionTrigger as Trigger, type AccordionTriggerCommonProps, type AccordionTriggerOptions, type AccordionTriggerProps, type AccordionTriggerRenderProps, + AccordionTrigger as Trigger, } from "./accordion-trigger"; export type { diff --git a/packages/core/src/alert-dialog/alert-dialog-content.tsx b/packages/core/src/alert-dialog/alert-dialog-content.tsx index a9d4f65fa..644c4915a 100644 --- a/packages/core/src/alert-dialog/alert-dialog-content.tsx +++ b/packages/core/src/alert-dialog/alert-dialog-content.tsx @@ -1,11 +1,11 @@ -import { Component, ValidComponent } from "solid-js"; +import type { Component, ValidComponent } from "solid-js"; import { DialogContent, - DialogContentCommonProps, - DialogContentOptions, - DialogContentRenderProps, + type DialogContentCommonProps, + type DialogContentOptions, + type DialogContentRenderProps, } from "../dialog/dialog-content"; -import { ElementOf, PolymorphicProps } from "../polymorphic"; +import type { ElementOf, PolymorphicProps } from "../polymorphic"; export interface AlertDialogContentOptions extends DialogContentOptions {} diff --git a/packages/core/src/alert-dialog/index.tsx b/packages/core/src/alert-dialog/index.tsx index 1b6120225..090f8d7ef 100644 --- a/packages/core/src/alert-dialog/index.tsx +++ b/packages/core/src/alert-dialog/index.tsx @@ -1,6 +1,4 @@ import { - CloseButton, - Description, type DialogCloseButtonCommonProps as AlertDialogCloseButtonCommonProps, type DialogCloseButtonOptions as AlertDialogCloseButtonOptions, type DialogCloseButtonProps as AlertDialogCloseButtonProps, @@ -24,6 +22,8 @@ import { type DialogTriggerOptions as AlertDialogTriggerOptions, type DialogTriggerProps as AlertDialogTriggerProps, type DialogTriggerRenderProps as AlertDialogTriggerRenderProps, + CloseButton, + Description, Overlay, Portal, Root, @@ -31,11 +31,11 @@ import { Trigger, } from "../dialog"; import { + type AlertDialogContentCommonProps, + type AlertDialogContentOptions, + type AlertDialogContentProps, + type AlertDialogContentRenderProps, AlertDialogContent as Content, - AlertDialogContentCommonProps, - AlertDialogContentOptions, - AlertDialogContentProps, - AlertDialogContentRenderProps, } from "./alert-dialog-content"; export type { diff --git a/packages/core/src/alert/alert-root.tsx b/packages/core/src/alert/alert-root.tsx index eb5fe2e56..07d266ead 100644 --- a/packages/core/src/alert/alert-root.tsx +++ b/packages/core/src/alert/alert-root.tsx @@ -1,6 +1,10 @@ -import { ValidComponent } from "solid-js"; +import type { ValidComponent } from "solid-js"; -import { ElementOf, Polymorphic, PolymorphicProps } from "../polymorphic"; +import { + type ElementOf, + Polymorphic, + type PolymorphicProps, +} from "../polymorphic"; export interface AlertRootOptions {} diff --git a/packages/core/src/alert/index.tsx b/packages/core/src/alert/index.tsx index 66699a906..983b87a8f 100644 --- a/packages/core/src/alert/index.tsx +++ b/packages/core/src/alert/index.tsx @@ -1,9 +1,9 @@ import { - AlertRoot as Root, type AlertRootCommonProps, type AlertRootOptions, type AlertRootProps, type AlertRootRenderProps, + AlertRoot as Root, } from "./alert-root"; export type { diff --git a/packages/core/src/breadcrumbs/breadcrumbs-context.tsx b/packages/core/src/breadcrumbs/breadcrumbs-context.tsx index 495ea30b4..5a9936c66 100644 --- a/packages/core/src/breadcrumbs/breadcrumbs-context.tsx +++ b/packages/core/src/breadcrumbs/breadcrumbs-context.tsx @@ -1,4 +1,4 @@ -import { JSX, createContext, useContext } from "solid-js"; +import { type JSX, createContext, useContext } from "solid-js"; export interface BreadcrumbsContextValue { separator: () => string | JSX.Element; diff --git a/packages/core/src/breadcrumbs/breadcrumbs-link.tsx b/packages/core/src/breadcrumbs/breadcrumbs-link.tsx index 58b5b2ce7..42d514b24 100644 --- a/packages/core/src/breadcrumbs/breadcrumbs-link.tsx +++ b/packages/core/src/breadcrumbs/breadcrumbs-link.tsx @@ -6,10 +6,10 @@ * https://github.com/adobe/react-spectrum/blob/38a57d3360268fb0cb55c6b42b9a5f6f13bb57d6/packages/@react-aria/breadcrumbs/src/useBreadcrumbItem.ts */ -import { Component, ValidComponent, splitProps } from "solid-js"; +import { type Component, type ValidComponent, splitProps } from "solid-js"; import * as Link from "../link"; -import { ElementOf, PolymorphicProps } from "../polymorphic"; +import type { ElementOf, PolymorphicProps } from "../polymorphic"; export interface BreadcrumbsLinkOptions { /** Whether the breadcrumb link represents the current page. */ diff --git a/packages/core/src/breadcrumbs/breadcrumbs-root.tsx b/packages/core/src/breadcrumbs/breadcrumbs-root.tsx index f1b827e7e..db7a86978 100644 --- a/packages/core/src/breadcrumbs/breadcrumbs-root.tsx +++ b/packages/core/src/breadcrumbs/breadcrumbs-root.tsx @@ -7,16 +7,20 @@ */ import { mergeDefaultProps } from "@kobalte/utils"; -import { JSX, ValidComponent, splitProps } from "solid-js"; +import { type JSX, type ValidComponent, splitProps } from "solid-js"; -import { ElementOf, Polymorphic, PolymorphicProps } from "../polymorphic"; +import { + type ElementOf, + Polymorphic, + type PolymorphicProps, +} from "../polymorphic"; import { BreadcrumbsContext, - BreadcrumbsContextValue, + type BreadcrumbsContextValue, } from "./breadcrumbs-context"; import { BREADCRUMBS_INTL_TRANSLATIONS, - BreadcrumbsIntlTranslations, + type BreadcrumbsIntlTranslations, } from "./breadcrumbs.intl"; export interface BreadcrumbsRootOptions { diff --git a/packages/core/src/breadcrumbs/breadcrumbs-separator.tsx b/packages/core/src/breadcrumbs/breadcrumbs-separator.tsx index 35edffee7..d9326061f 100644 --- a/packages/core/src/breadcrumbs/breadcrumbs-separator.tsx +++ b/packages/core/src/breadcrumbs/breadcrumbs-separator.tsx @@ -1,7 +1,11 @@ import { OverrideComponentProps } from "@kobalte/utils"; -import { JSX, ValidComponent } from "solid-js"; -import { ElementOf, Polymorphic, PolymorphicProps } from "../polymorphic"; +import type { JSX, ValidComponent } from "solid-js"; +import { + type ElementOf, + Polymorphic, + type PolymorphicProps, +} from "../polymorphic"; import { useBreadcrumbsContext } from "./breadcrumbs-context"; export interface BreadcrumbsSeparatorOptions {} @@ -33,9 +37,10 @@ export function BreadcrumbsSeparator( return ( as="span" - children={context.separator()} aria-hidden="true" {...(props as BreadcrumbsSeparatorProps)} - /> + > + {context.separator()} + ); } diff --git a/packages/core/src/breadcrumbs/index.tsx b/packages/core/src/breadcrumbs/index.tsx index e40ead45f..84ff38396 100644 --- a/packages/core/src/breadcrumbs/index.tsx +++ b/packages/core/src/breadcrumbs/index.tsx @@ -1,21 +1,21 @@ import { - BreadcrumbsLink as Link, type BreadcrumbsLinkCommonProps, type BreadcrumbsLinkOptions, type BreadcrumbsLinkProps, type BreadcrumbsLinkRenderProps, + BreadcrumbsLink as Link, } from "./breadcrumbs-link"; import { - BreadcrumbsRoot as Root, type BreadcrumbsRootOptions, type BreadcrumbsRootProps, + BreadcrumbsRoot as Root, } from "./breadcrumbs-root"; import { - BreadcrumbsSeparator as Separator, type BreadcrumbsSeparatorCommonProps, type BreadcrumbsSeparatorOptions, type BreadcrumbsSeparatorProps, type BreadcrumbsSeparatorRenderProps, + BreadcrumbsSeparator as Separator, } from "./breadcrumbs-separator"; export type { diff --git a/packages/core/src/button/button-root.tsx b/packages/core/src/button/button-root.tsx index 7f18b4fab..e1a4be1c2 100644 --- a/packages/core/src/button/button-root.tsx +++ b/packages/core/src/button/button-root.tsx @@ -13,9 +13,13 @@ */ import { mergeDefaultProps, mergeRefs } from "@kobalte/utils"; -import { ValidComponent, createMemo, splitProps } from "solid-js"; +import { type ValidComponent, createMemo, splitProps } from "solid-js"; -import { ElementOf, Polymorphic, PolymorphicProps } from "../polymorphic"; +import { + type ElementOf, + Polymorphic, + type PolymorphicProps, +} from "../polymorphic"; import { createTagName } from "../primitives"; import { isButton } from "./is-button"; diff --git a/packages/core/src/button/index.tsx b/packages/core/src/button/index.tsx index 9f2013b6b..2a356eb6f 100644 --- a/packages/core/src/button/index.tsx +++ b/packages/core/src/button/index.tsx @@ -1,9 +1,9 @@ import { - ButtonRoot as Root, type ButtonRootCommonProps, type ButtonRootOptions, type ButtonRootProps, type ButtonRootRenderProps, + ButtonRoot as Root, } from "./button-root"; export type { diff --git a/packages/core/src/checkbox/checkbox-context.tsx b/packages/core/src/checkbox/checkbox-context.tsx index 1f80e364c..4cedfc4a4 100644 --- a/packages/core/src/checkbox/checkbox-context.tsx +++ b/packages/core/src/checkbox/checkbox-context.tsx @@ -1,4 +1,4 @@ -import { Accessor, createContext, useContext } from "solid-js"; +import { type Accessor, createContext, useContext } from "solid-js"; export interface CheckboxDataSet { "data-checked": string | undefined; diff --git a/packages/core/src/checkbox/checkbox-control.tsx b/packages/core/src/checkbox/checkbox-control.tsx index ff9f327b7..0ced4cd1d 100644 --- a/packages/core/src/checkbox/checkbox-control.tsx +++ b/packages/core/src/checkbox/checkbox-control.tsx @@ -1,9 +1,16 @@ import { EventKey, callHandler, mergeDefaultProps } from "@kobalte/utils"; -import { JSX, ValidComponent, splitProps } from "solid-js"; +import { type JSX, type ValidComponent, splitProps } from "solid-js"; -import { FormControlDataSet, useFormControlContext } from "../form-control"; -import { ElementOf, Polymorphic, PolymorphicProps } from "../polymorphic"; -import { CheckboxDataSet, useCheckboxContext } from "./checkbox-context"; +import { + type FormControlDataSet, + useFormControlContext, +} from "../form-control"; +import { + type ElementOf, + Polymorphic, + type PolymorphicProps, +} from "../polymorphic"; +import { type CheckboxDataSet, useCheckboxContext } from "./checkbox-context"; export interface CheckboxControlOptions {} diff --git a/packages/core/src/checkbox/checkbox-description.tsx b/packages/core/src/checkbox/checkbox-description.tsx index 888ff4637..185f05d0d 100644 --- a/packages/core/src/checkbox/checkbox-description.tsx +++ b/packages/core/src/checkbox/checkbox-description.tsx @@ -1,12 +1,12 @@ -import { Component, ValidComponent } from "solid-js"; +import type { Component, ValidComponent } from "solid-js"; import { FormControlDescription, - FormControlDescriptionCommonProps, - FormControlDescriptionProps, - FormControlDescriptionRenderProps, + type FormControlDescriptionCommonProps, + type FormControlDescriptionProps, + type FormControlDescriptionRenderProps, } from "../form-control"; -import { ElementOf, PolymorphicProps } from "../polymorphic"; -import { CheckboxDataSet, useCheckboxContext } from "./checkbox-context"; +import type { ElementOf, PolymorphicProps } from "../polymorphic"; +import { type CheckboxDataSet, useCheckboxContext } from "./checkbox-context"; export interface CheckboxDescriptionOptions extends FormControlDescriptionProps {} diff --git a/packages/core/src/checkbox/checkbox-error-message.tsx b/packages/core/src/checkbox/checkbox-error-message.tsx index e2a32acc6..a96dc1cac 100644 --- a/packages/core/src/checkbox/checkbox-error-message.tsx +++ b/packages/core/src/checkbox/checkbox-error-message.tsx @@ -1,12 +1,12 @@ -import { Component, ValidComponent } from "solid-js"; +import type { Component, ValidComponent } from "solid-js"; import { FormControlErrorMessage, - FormControlErrorMessageCommonProps, - FormControlErrorMessageProps, - FormControlErrorMessageRenderProps, + type FormControlErrorMessageCommonProps, + type FormControlErrorMessageProps, + type FormControlErrorMessageRenderProps, } from "../form-control"; -import { ElementOf, PolymorphicProps } from "../polymorphic"; -import { CheckboxDataSet, useCheckboxContext } from "./checkbox-context"; +import type { ElementOf, PolymorphicProps } from "../polymorphic"; +import { type CheckboxDataSet, useCheckboxContext } from "./checkbox-context"; export interface CheckboxErrorMessageOptions extends FormControlErrorMessageProps {} diff --git a/packages/core/src/checkbox/checkbox-indicator.tsx b/packages/core/src/checkbox/checkbox-indicator.tsx index 485bf79b9..6b15e561c 100644 --- a/packages/core/src/checkbox/checkbox-indicator.tsx +++ b/packages/core/src/checkbox/checkbox-indicator.tsx @@ -1,16 +1,23 @@ import { mergeDefaultProps, mergeRefs } from "@kobalte/utils"; import { Show, - ValidComponent, + type ValidComponent, createEffect, createSignal, splitProps, } from "solid-js"; import createPresence from "solid-presence"; -import { FormControlDataSet, useFormControlContext } from "../form-control"; -import { ElementOf, Polymorphic, PolymorphicProps } from "../polymorphic"; -import { CheckboxDataSet, useCheckboxContext } from "./checkbox-context"; +import { + type FormControlDataSet, + useFormControlContext, +} from "../form-control"; +import { + type ElementOf, + Polymorphic, + type PolymorphicProps, +} from "../polymorphic"; +import { type CheckboxDataSet, useCheckboxContext } from "./checkbox-context"; export interface CheckboxIndicatorOptions { /** diff --git a/packages/core/src/checkbox/checkbox-input.tsx b/packages/core/src/checkbox/checkbox-input.tsx index 7548cfa9d..6b530b3d3 100644 --- a/packages/core/src/checkbox/checkbox-input.tsx +++ b/packages/core/src/checkbox/checkbox-input.tsx @@ -13,9 +13,10 @@ import { mergeRefs, visuallyHiddenStyles, } from "@kobalte/utils"; +import { combineStyle } from "@solid-primitives/props"; import { - JSX, - ValidComponent, + type JSX, + type ValidComponent, createEffect, createSignal, on, @@ -24,12 +25,16 @@ import { import { FORM_CONTROL_FIELD_PROP_NAMES, - FormControlDataSet, + type FormControlDataSet, createFormControlField, useFormControlContext, } from "../form-control"; -import { ElementOf, Polymorphic, PolymorphicProps } from "../polymorphic"; -import { CheckboxDataSet, useCheckboxContext } from "./checkbox-context"; +import { + type ElementOf, + Polymorphic, + type PolymorphicProps, +} from "../polymorphic"; +import { type CheckboxDataSet, useCheckboxContext } from "./checkbox-context"; export interface CheckboxInputOptions {} @@ -38,8 +43,7 @@ export interface CheckboxInputCommonProps< > { id: string; ref: T | ((el: T) => void); - /** The HTML styles attribute (object form only). */ - style: JSX.CSSProperties; + style: JSX.CSSProperties | string; onChange: JSX.EventHandlerUnion; onFocus: JSX.FocusEventHandlerUnion; onBlur: JSX.FocusEventHandlerUnion; @@ -183,7 +187,7 @@ export function CheckboxInput( required={formControlContext.isRequired()} disabled={formControlContext.isDisabled()} readonly={formControlContext.isReadOnly()} - style={{ ...visuallyHiddenStyles, ...local.style }} + style={combineStyle(visuallyHiddenStyles, local.style)} aria-label={fieldProps.ariaLabel()} aria-labelledby={fieldProps.ariaLabelledBy()} aria-describedby={fieldProps.ariaDescribedBy()} diff --git a/packages/core/src/checkbox/checkbox-label.tsx b/packages/core/src/checkbox/checkbox-label.tsx index 842b24ff8..cb30749df 100644 --- a/packages/core/src/checkbox/checkbox-label.tsx +++ b/packages/core/src/checkbox/checkbox-label.tsx @@ -1,12 +1,12 @@ -import { Component, ValidComponent } from "solid-js"; +import type { Component, ValidComponent } from "solid-js"; import { FormControlLabel, - FormControlLabelCommonProps, - FormControlLabelOptions, - FormControlLabelRenderProps, + type FormControlLabelCommonProps, + type FormControlLabelOptions, + type FormControlLabelRenderProps, } from "../form-control"; -import { ElementOf, PolymorphicProps } from "../polymorphic"; -import { CheckboxDataSet, useCheckboxContext } from "./checkbox-context"; +import type { ElementOf, PolymorphicProps } from "../polymorphic"; +import { type CheckboxDataSet, useCheckboxContext } from "./checkbox-context"; export interface CheckboxLabelOptions extends FormControlLabelOptions {} diff --git a/packages/core/src/checkbox/checkbox-root.tsx b/packages/core/src/checkbox/checkbox-root.tsx index c23825b66..eeb8d17ba 100644 --- a/packages/core/src/checkbox/checkbox-root.tsx +++ b/packages/core/src/checkbox/checkbox-root.tsx @@ -8,7 +8,7 @@ import { OverrideComponentProps, - ValidationState, + type ValidationState, access, callHandler, createGenerateId, @@ -17,9 +17,9 @@ import { mergeRefs, } from "@kobalte/utils"; import { - Accessor, - JSX, - ValidComponent, + type Accessor, + type JSX, + type ValidComponent, children, createMemo, createSignal, @@ -30,15 +30,19 @@ import { import { FORM_CONTROL_PROP_NAMES, FormControlContext, - FormControlDataSet, + type FormControlDataSet, createFormControl, } from "../form-control"; -import { ElementOf, Polymorphic, PolymorphicProps } from "../polymorphic"; +import { + type ElementOf, + Polymorphic, + type PolymorphicProps, +} from "../polymorphic"; import { createFormResetListener, createToggleState } from "../primitives"; import { CheckboxContext, - CheckboxContextValue, - CheckboxDataSet, + type CheckboxContextValue, + type CheckboxDataSet, } from "./checkbox-context"; interface CheckboxRootState { diff --git a/packages/core/src/checkbox/index.tsx b/packages/core/src/checkbox/index.tsx index 67a0c74a6..59effd3f8 100644 --- a/packages/core/src/checkbox/index.tsx +++ b/packages/core/src/checkbox/index.tsx @@ -1,51 +1,51 @@ import { - CheckboxControl as Control, type CheckboxControlCommonProps, type CheckboxControlOptions, type CheckboxControlProps, type CheckboxControlRenderProps, + CheckboxControl as Control, } from "./checkbox-control"; import { - CheckboxDescription as Description, type CheckboxDescriptionCommonProps, type CheckboxDescriptionOptions, type CheckboxDescriptionProps, type CheckboxDescriptionRenderProps, + CheckboxDescription as Description, } from "./checkbox-description"; import { - CheckboxErrorMessage as ErrorMessage, type CheckboxErrorMessageCommonProps, type CheckboxErrorMessageOptions, type CheckboxErrorMessageProps, type CheckboxErrorMessageRenderProps, + CheckboxErrorMessage as ErrorMessage, } from "./checkbox-error-message"; import { - CheckboxIndicator as Indicator, type CheckboxIndicatorCommonProps, type CheckboxIndicatorOptions, type CheckboxIndicatorProps, type CheckboxIndicatorRenderProps, + CheckboxIndicator as Indicator, } from "./checkbox-indicator"; import { - CheckboxInput as Input, type CheckboxInputCommonProps, type CheckboxInputOptions, type CheckboxInputProps, type CheckboxInputRenderProps, + CheckboxInput as Input, } from "./checkbox-input"; import { - CheckboxLabel as Label, type CheckboxLabelCommonProps, type CheckboxLabelOptions, type CheckboxLabelProps, type CheckboxLabelRenderProps, + CheckboxLabel as Label, } from "./checkbox-label"; import { - CheckboxRoot as Root, type CheckboxRootCommonProps, type CheckboxRootOptions, type CheckboxRootProps, type CheckboxRootRenderProps, + CheckboxRoot as Root, } from "./checkbox-root"; export type { diff --git a/packages/core/src/collapsible/collapsible-content.tsx b/packages/core/src/collapsible/collapsible-content.tsx index e7d69f319..acb732654 100644 --- a/packages/core/src/collapsible/collapsible-content.tsx +++ b/packages/core/src/collapsible/collapsible-content.tsx @@ -8,9 +8,9 @@ import { mergeDefaultProps, mergeRefs } from "@kobalte/utils"; import { - JSX, + type JSX, Show, - ValidComponent, + type ValidComponent, createEffect, createSignal, on, @@ -19,10 +19,15 @@ import { splitProps, } from "solid-js"; +import { combineStyle } from "@solid-primitives/props"; import createPresence from "solid-presence"; -import { ElementOf, Polymorphic, PolymorphicProps } from "../polymorphic"; import { - CollapsibleDataSet, + type ElementOf, + Polymorphic, + type PolymorphicProps, +} from "../polymorphic"; +import { + type CollapsibleDataSet, useCollapsibleContext, } from "./collapsible-context"; @@ -33,7 +38,7 @@ export interface CollapsibleContentCommonProps< > { id: string; ref: T | ((el: T) => void); - style: JSX.CSSProperties; + style: JSX.CSSProperties | string; } export interface CollapsibleContentRenderProps @@ -131,15 +136,17 @@ export function CollapsibleContent( as="div" ref={mergeRefs(setRef, local.ref)} id={local.id} - style={{ - "--kb-collapsible-content-height": height() - ? `${height()}px` - : undefined, - "--kb-collapsible-content-width": width() - ? `${width()}px` - : undefined, - ...local.style, - }} + style={combineStyle( + { + "--kb-collapsible-content-height": height() + ? `${height()}px` + : undefined, + "--kb-collapsible-content-width": width() + ? `${width()}px` + : undefined, + }, + local.style, + )} {...context.dataset()} {...others} /> diff --git a/packages/core/src/collapsible/collapsible-context.tsx b/packages/core/src/collapsible/collapsible-context.tsx index 1e3ac5a73..d3b49c66e 100644 --- a/packages/core/src/collapsible/collapsible-context.tsx +++ b/packages/core/src/collapsible/collapsible-context.tsx @@ -1,4 +1,4 @@ -import { Accessor, createContext, useContext } from "solid-js"; +import { type Accessor, createContext, useContext } from "solid-js"; export interface CollapsibleDataSet { "data-expanded": string | undefined; diff --git a/packages/core/src/collapsible/collapsible-root.tsx b/packages/core/src/collapsible/collapsible-root.tsx index 37bd6d5e1..95848d97d 100644 --- a/packages/core/src/collapsible/collapsible-root.tsx +++ b/packages/core/src/collapsible/collapsible-root.tsx @@ -12,20 +12,24 @@ import { mergeDefaultProps, } from "@kobalte/utils"; import { - Accessor, - ValidComponent, + type Accessor, + type ValidComponent, createMemo, createSignal, createUniqueId, splitProps, } from "solid-js"; -import { ElementOf, Polymorphic, PolymorphicProps } from "../polymorphic"; +import { + type ElementOf, + Polymorphic, + type PolymorphicProps, +} from "../polymorphic"; import { createDisclosureState, createRegisterId } from "../primitives"; import { CollapsibleContext, - CollapsibleContextValue, - CollapsibleDataSet, + type CollapsibleContextValue, + type CollapsibleDataSet, } from "./collapsible-context"; export interface CollapsibleRootOptions { diff --git a/packages/core/src/collapsible/collapsible-trigger.tsx b/packages/core/src/collapsible/collapsible-trigger.tsx index f09f6a5c5..918e066df 100644 --- a/packages/core/src/collapsible/collapsible-trigger.tsx +++ b/packages/core/src/collapsible/collapsible-trigger.tsx @@ -7,10 +7,15 @@ */ import { callHandler } from "@kobalte/utils"; -import { Component, JSX, ValidComponent, splitProps } from "solid-js"; +import { + type Component, + type JSX, + type ValidComponent, + splitProps, +} from "solid-js"; import * as Button from "../button"; -import { ElementOf, PolymorphicProps } from "../polymorphic"; +import type { ElementOf, PolymorphicProps } from "../polymorphic"; import { useCollapsibleContext } from "./collapsible-context"; export interface CollapsibleTriggerOptions {} diff --git a/packages/core/src/collapsible/collapsible.test.tsx b/packages/core/src/collapsible/collapsible.test.tsx index c0e7de3a7..27c3f78a8 100644 --- a/packages/core/src/collapsible/collapsible.test.tsx +++ b/packages/core/src/collapsible/collapsible.test.tsx @@ -8,7 +8,7 @@ import { installPointerEvent } from "@kobalte/tests"; import { fireEvent, render } from "@solidjs/testing-library"; -import { ComponentProps } from "solid-js"; +import type { ComponentProps } from "solid-js"; import { vi } from "vitest"; import * as Collapsible from "."; diff --git a/packages/core/src/collapsible/index.tsx b/packages/core/src/collapsible/index.tsx index 73c2b271e..bc4a9361e 100644 --- a/packages/core/src/collapsible/index.tsx +++ b/packages/core/src/collapsible/index.tsx @@ -1,23 +1,23 @@ import { - CollapsibleContent as Content, type CollapsibleContentCommonProps, type CollapsibleContentOptions, type CollapsibleContentProps, type CollapsibleContentRenderProps, + CollapsibleContent as Content, } from "./collapsible-content"; import { - CollapsibleRoot as Root, type CollapsibleRootCommonProps, type CollapsibleRootOptions, type CollapsibleRootProps, type CollapsibleRootRenderProps, + CollapsibleRoot as Root, } from "./collapsible-root"; import { - CollapsibleTrigger as Trigger, type CollapsibleTriggerCommonProps, type CollapsibleTriggerOptions, type CollapsibleTriggerProps, type CollapsibleTriggerRenderProps, + CollapsibleTrigger as Trigger, } from "./collapsible-trigger"; export type { diff --git a/packages/core/src/color-mode/color-mode-context.tsx b/packages/core/src/color-mode/color-mode-context.tsx index d6319ba2d..073ab650e 100644 --- a/packages/core/src/color-mode/color-mode-context.tsx +++ b/packages/core/src/color-mode/color-mode-context.tsx @@ -8,7 +8,7 @@ import { createContext, createMemo, useContext } from "solid-js"; -import { ColorModeContextType } from "./types"; +import type { ColorModeContextType } from "./types"; export const ColorModeContext = createContext(); diff --git a/packages/core/src/color-mode/color-mode-provider.tsx b/packages/core/src/color-mode/color-mode-provider.tsx index 245703966..590e2f3f4 100644 --- a/packages/core/src/color-mode/color-mode-provider.tsx +++ b/packages/core/src/color-mode/color-mode-provider.tsx @@ -10,7 +10,7 @@ import { createEffect, createSignal, onCleanup } from "solid-js"; import { ColorModeContext } from "./color-mode-context"; import { localStorageManager } from "./storage-manager"; -import { +import type { ColorMode, ColorModeContextType, ColorModeProviderProps, diff --git a/packages/core/src/color-mode/color-mode-script.tsx b/packages/core/src/color-mode/color-mode-script.tsx index f5031caaa..3003b8266 100644 --- a/packages/core/src/color-mode/color-mode-script.tsx +++ b/packages/core/src/color-mode/color-mode-script.tsx @@ -9,7 +9,7 @@ import { createMemo, mergeProps } from "solid-js"; import { COLOR_MODE_STORAGE_KEY } from "./storage-manager"; -import { ColorModeScriptProps, ConfigColorMode } from "./types"; +import type { ColorModeScriptProps, ConfigColorMode } from "./types"; import { FALLBACK_COLOR_MODE_VALUE } from "./utils"; const VALID_VALUES = new Set(["light", "dark", "system"]); diff --git a/packages/core/src/color-mode/storage-manager.ts b/packages/core/src/color-mode/storage-manager.ts index 866bba040..b4c3cc35a 100644 --- a/packages/core/src/color-mode/storage-manager.ts +++ b/packages/core/src/color-mode/storage-manager.ts @@ -8,7 +8,7 @@ import { isServer } from "solid-js/web"; -import { +import type { ColorModeStorageManager, ConfigColorMode, MaybeConfigColorMode, diff --git a/packages/core/src/color-mode/types.ts b/packages/core/src/color-mode/types.ts index c3c55ea6f..c036212b5 100644 --- a/packages/core/src/color-mode/types.ts +++ b/packages/core/src/color-mode/types.ts @@ -6,7 +6,7 @@ * https://github.com/chakra-ui/chakra-ui/blob/main/packages/color-mode/src/color-mode-types.ts */ -import { Accessor, ParentProps } from "solid-js"; +import type { Accessor, ParentProps } from "solid-js"; export type ColorMode = "light" | "dark"; diff --git a/packages/core/src/color-mode/utils.ts b/packages/core/src/color-mode/utils.ts index 768251bb3..72b6820e1 100644 --- a/packages/core/src/color-mode/utils.ts +++ b/packages/core/src/color-mode/utils.ts @@ -8,7 +8,11 @@ import { isServer } from "solid-js/web"; -import { ColorMode, ColorModeStorageManager, ConfigColorMode } from "./types"; +import type { + ColorMode, + ColorModeStorageManager, + ConfigColorMode, +} from "./types"; export const FALLBACK_COLOR_MODE_VALUE: ConfigColorMode = "system"; diff --git a/packages/core/src/combobox/combobox-base.tsx b/packages/core/src/combobox/combobox-base.tsx index 0d1377a91..bb10503c9 100644 --- a/packages/core/src/combobox/combobox-base.tsx +++ b/packages/core/src/combobox/combobox-base.tsx @@ -8,7 +8,7 @@ */ import { - ValidationState, + type ValidationState, access, createGenerateId, focusWithoutScrolling, @@ -17,10 +17,10 @@ import { mergeDefaultProps, } from "@kobalte/utils"; import { - Accessor, - Component, - JSX, - ValidComponent, + type Accessor, + type Component, + type JSX, + type ValidComponent, createEffect, createMemo, createSignal, @@ -33,16 +33,20 @@ import createPresence from "solid-presence"; import { FORM_CONTROL_PROP_NAMES, FormControlContext, - FormControlDataSet, + type FormControlDataSet, createFormControl, } from "../form-control"; import { createFilter } from "../i18n"; import { ListKeyboardDelegate, createListState } from "../list"; import { announce } from "../live-announcer"; -import { ElementOf, Polymorphic, PolymorphicProps } from "../polymorphic"; -import { Popper, PopperRootOptions } from "../popper"; import { - CollectionNode, + type ElementOf, + Polymorphic, + type PolymorphicProps, +} from "../polymorphic"; +import { Popper, type PopperRootOptions } from "../popper"; +import { + type CollectionNode, createControllableSignal, createDisclosureState, createFormResetListener, @@ -50,23 +54,23 @@ import { getItemCount, } from "../primitives"; import { - FocusStrategy, - KeyboardDelegate, + type FocusStrategy, + type KeyboardDelegate, Selection, - SelectionBehavior, - SelectionMode, + type SelectionBehavior, + type SelectionMode, createSelectableCollection, } from "../selection"; import { ComboboxContext, - ComboboxContextValue, - ComboboxDataSet, + type ComboboxContextValue, + type ComboboxDataSet, } from "./combobox-context"; import { COMBOBOX_INTL_TRANSLATIONS, - ComboboxIntlTranslations, + type ComboboxIntlTranslations, } from "./combobox.intl"; -import { ComboboxTriggerMode } from "./types"; +import type { ComboboxTriggerMode } from "./types"; export interface ComboboxBaseItemComponentProps