HUGE UPDATE

Author: stefan-karger

.changeset/hip-ways-hide.md

@@ -0,0 +1,6 @@
+---
+"solidui-cli": minor
+"docs": minor
+---
+
+tailwind preset moved back into config & dark-mode fix for root.css

apps/docs/vite.config.ts renamed to apps/docs/app.config.ts

@@ -1,24 +1,27 @@
-import { defineConfig } from "vite"
-
-import solid from "solid-start/vite"
-
-import mdx from "@mdx-js/rollup"
+import { defineConfig } from "@solidjs/start/config"
+/* @ts-ignore */
+import pkg from "@vinxi/plugin-mdx"
 import rehypePrettyCode from "rehype-pretty-code"
 import rehypeSlug from "rehype-slug"
 import remarkFrontmatter from "remark-frontmatter"
 import remarkGfm from "remark-gfm"
 import { getHighlighter } from "shiki"
-import vercel from "solid-start-vercel"
 
 import rehypeComponent from "./src/lib/mdx/component"
 import remarkSolidFrontmatter from "./src/lib/mdx/frontmatter"
 import rehypeHeadings from "./src/lib/mdx/headings"
-import path from "path"
+
+const { default: mdx } = pkg
 
 export default defineConfig({
-  plugins: [
-    {
-      ...mdx({
+  ssr: true,
+  server: {
+    preset: "vercel"
+  },
+  extensions: ["mdx", "md"],
+  vite: {
+    plugins: [
+      mdx.withImports({})({
         jsx: true,
         jsxImportSource: "solid-js",
         providerImportSource: "solid-mdx",
@@ -27,8 +30,8 @@ export default defineConfig({
           rehypeSlug,
           rehypeHeadings,
           rehypeComponent,
+          //[rehypePrettyCode, { theme: "nord" }],
           [
-            //@ts-expect-error
             rehypePrettyCode,
             {
               getHighlighter: async () => {
@@ -37,17 +40,7 @@ export default defineConfig({
             }
           ]
         ]
-      }),
-      enforce: "pre"
-    },
-    solid({ ssr: true, adapter: vercel({}), extensions: [".mdx"] })
-  ],
-  ssr: {
-    noExternal: ["@kobalte/core", "@internationalized/message"]
-  },
-  resolve: {
-    alias: {
-      "@": path.resolve(__dirname, "./src")
-    }
+      })
+    ]
   }
 })

apps/docs/package.json

@@ -4,58 +4,56 @@
   "version": "0.3.0",
   "private": true,
   "scripts": {
-    "dev": "solid-start dev",
-    "build": "solid-start build",
+    "dev": "vinxi dev",
+    "build": "vinxi build",
     "build:registry": "tsx ./src/scripts/build-registry.ts",
-    "start": "solid-start start",
+    "start": "vinxi start",
     "release": "changeset version",
     "lint": "eslint --fix \"**/*.{ts,tsx,js,jsx}\""
   },
   "dependencies": {
-    "@fontsource/inter": "^5.0.16",
-    "@kobalte/core": "^0.12.4",
+    "@fontsource/inter": "^5.0.17",
+    "@kobalte/core": "^0.12.6",
+    "@mdx-js/mdx": "^2.3.0",
     "@modular-forms/solid": "^0.20.0",
-    "@solid-primitives/keyboard": "^1.2.5",
-    "@solid-primitives/refs": "^1.0.6",
-    "@solidjs/meta": "^0.28.6",
-    "@solidjs/router": "^0.8.3",
-    "@tanstack/solid-table": "^8.9.3",
-    "@vercel/analytics": "^1.1.1",
-    "chart.js": "^4.4.1",
+    "@solid-primitives/keyboard": "^1.2.8",
+    "@solid-primitives/refs": "^1.0.8",
+    "@solidjs/meta": "^0.29.3",
+    "@solidjs/router": "^0.13.1",
+    "@solidjs/start": "^0.7.7",
+    "@vinxi/plugin-mdx": "^3.7.1",
+    "chart.js": "^4.4.2",
     "class-variance-authority": "^0.7.0",
-    "clsx": "^2.0.0",
-    "corvu": "^0.4.0",
+    "clsx": "^2.1.0",
+    "corvu": "^0.4.8",
     "embla-carousel-autoplay": "^8.0.0",
     "embla-carousel-solid": "^8.0.0",
     "shosho": "^1.4.3",
-    "solid-icons": "^1.0.12",
-    "solid-js": "1.7.12",
+    "solid-icons": "^1.1.0",
+    "solid-js": "1.8.16",
     "solid-mdx": "^0.0.7",
-    "solid-start": "0.3.6",
-    "tailwind-merge": "^1.14.0",
+    "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
-    "undici": "^5.26.4"
+    "undici": "^5.28.3",
+    "vinxi": "^0.3.11"
   },
   "devDependencies": {
-    "@mdx-js/rollup": "^2.3.0",
-    "@types/node": "^18.17.3",
-    "@types/unist": "^3.0.1",
-    "autoprefixer": "^10.4.15",
-    "eslint": "^8.56.0",
+    "@types/node": "^18.19.26",
+    "@types/unist": "^3.0.2",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
     "estree-util-value-to-estree": "^3.0.1",
-    "postcss": "^8.4.30",
-    "rehype-pretty-code": "^0.10.1",
+    "postcss": "^8.4.38",
+    "rehype-pretty-code": "0.10.1",
     "rehype-slug": "^6.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^3.0.1",
-    "shiki": "^0.14.5",
-    "solid-start-node": "0.3.6",
-    "solid-start-vercel": "0.3.6",
-    "tailwindcss": "^3.3.3",
-    "tsx": "^3.13.0",
+    "shiki": "0.14.5",
+    "tailwindcss": "^3.4.1",
+    "tsx": "^4.7.1",
     "unist-builder": "^4.0.0",
     "unist-util-visit": "^5.0.0",
-    "vite": "^4.5.0",
-    "yaml": "^2.3.3"
+    "vite": "^5.2.6",
+    "yaml": "^2.4.1"
   }
 }

apps/docs/postcss.config.js

@@ -1,6 +1,6 @@
 export default {
   plugins: {
     tailwindcss: {},
-    autoprefixer: {},
-  },
+    autoprefixer: {}
+  }
 }

apps/docs/public/registry/ui/command.json

@@ -10,7 +10,7 @@
   "files": [
     {
       "name": "command.tsx",
-      "content": "import type { ComponentProps, VoidComponent, VoidProps } from \"solid-js\"\nimport { splitProps, type ParentComponent } from \"solid-js\"\n\nimport type { Dialog as DialogPrimitive } from \"@kobalte/core\"\nimport { Combobox as ComboboxPrimitive } from \"@kobalte/core\"\nimport { TbSearch } from \"solid-icons/tb\"\n\nimport { cn } from \"~/lib/utils\"\nimport { Dialog, DialogContent } from \"~/registry/ui/dialog\"\n\ntype CommandProps<Option, OptGroup> = Omit<\n  ComboboxPrimitive.ComboboxRootProps<Option, OptGroup>,\n  | \"open\"\n  | \"defaultOpen\"\n  | \"multiple\"\n  | \"value\"\n  | \"defaultValue\"\n  | \"removeOnBackspace\"\n  | \"readOnly\"\n  | \"allowsEmptyCollection\"\n>\n\nconst Command = <Option, OptGroup>(props: CommandProps<Option, OptGroup>) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <ComboboxPrimitive.Root\n      // force render list\n      open\n      // @ts-ignore -- prevent select\n      value=\"\"\n      allowsEmptyCollection\n      class={cn(\n        \"flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst CommandInput: VoidComponent<ComboboxPrimitive.ComboboxInputProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <ComboboxPrimitive.Control class=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n      <TbSearch class=\"mr-2 size-4 shrink-0 opacity-50\" />\n      <ComboboxPrimitive.Input\n        cmdk-input=\"\"\n        class={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          local.class\n        )}\n        {...rest}\n      />\n    </ComboboxPrimitive.Control>\n  )\n}\n\nconst CommandList = <Option, OptGroup>(\n  props: VoidProps<ComboboxPrimitive.ComboboxListboxProps<Option, OptGroup>>\n) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <ComboboxPrimitive.Listbox\n      cmdk-list=\"\"\n      class={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden p-1\", local.class)}\n      {...rest}\n    />\n  )\n}\n\nconst CommandItem: ParentComponent<ComboboxPrimitive.ComboboxItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"item\"])\n\n  return (\n    <ComboboxPrimitive.Item\n      item={local.item}\n      cmdk-item=\"\"\n      class={cn(\n        \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50\",\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst CommandItemLabel = ComboboxPrimitive.ItemLabel\n\nconst CommandHeading: ParentComponent<ComboboxPrimitive.ComboboxSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <ComboboxPrimitive.Section\n      cmdk-heading=\"\"\n      class={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground [&:not(&:first-of-type)]:mt-2\",\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst CommandItemShortcut: ParentComponent<ComponentProps<\"span\">> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <span\n      class={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", local.class)}\n      {...rest}\n    />\n  )\n}\n\ntype CommandDialogProps<Option, OptGroup> = DialogPrimitive.DialogRootProps &\n  CommandProps<Option, OptGroup>\n\nconst CommandDialog = <Option, OptGroup>(props: CommandDialogProps<Option, OptGroup>) => {\n  const [local, rest] = splitProps(props, [\"children\"])\n\n  return (\n    <Dialog {...rest}>\n      <DialogContent class=\"overflow-hidden p-0\">\n        <Command\n          class=\"[&_[cmdk-heading]]:px-2 [&_[cmdk-heading]]:font-medium [&_[cmdk-heading]]:text-muted-foreground [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list]:not([hidden])_~[cmdk-list]]:pt-0 [&_[cmdk-list]]:px-2\"\n          {...rest}\n        >\n          {local.children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport {\n  Command,\n  CommandInput,\n  CommandList,\n  CommandItem,\n  CommandItemLabel,\n  CommandItemShortcut,\n  CommandHeading,\n  CommandDialog\n}\n"
+      "content": "import type { ComponentProps, VoidComponent, VoidProps } from \"solid-js\"\nimport { splitProps, type ParentComponent } from \"solid-js\"\n\nimport type { Dialog as DialogPrimitive } from \"@kobalte/core\"\nimport { Combobox as ComboboxPrimitive } from \"@kobalte/core\"\nimport { TbSearch } from \"solid-icons/tb\"\n\nimport { cn } from \"~/lib/utils\"\nimport { Dialog, DialogContent } from \"~/registry/ui/dialog\"\n\ntype CommandProps<Option, OptGroup> = Omit<\n  ComboboxPrimitive.ComboboxRootProps<Option, OptGroup>,\n  | \"open\"\n  | \"defaultOpen\"\n  | \"multiple\"\n  | \"value\"\n  | \"defaultValue\"\n  | \"removeOnBackspace\"\n  | \"readOnly\"\n  | \"allowsEmptyCollection\"\n>\n\nconst Command = <Option, OptGroup>(props: CommandProps<Option, OptGroup>) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <ComboboxPrimitive.Root\n      // force render list\n      open\n      // @ts-expect-error -- prevent select\n      value=\"\"\n      allowsEmptyCollection\n      class={cn(\n        \"flex size-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground\",\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst CommandInput: VoidComponent<ComboboxPrimitive.ComboboxInputProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <ComboboxPrimitive.Control class=\"flex items-center border-b px-3\" cmdk-input-wrapper=\"\">\n      <TbSearch class=\"mr-2 size-4 shrink-0 opacity-50\" />\n      <ComboboxPrimitive.Input\n        cmdk-input=\"\"\n        class={cn(\n          \"flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50\",\n          local.class\n        )}\n        {...rest}\n      />\n    </ComboboxPrimitive.Control>\n  )\n}\n\nconst CommandList = <Option, OptGroup>(\n  props: VoidProps<ComboboxPrimitive.ComboboxListboxProps<Option, OptGroup>>\n) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <ComboboxPrimitive.Listbox\n      cmdk-list=\"\"\n      class={cn(\"max-h-[300px] overflow-y-auto overflow-x-hidden p-1\", local.class)}\n      {...rest}\n    />\n  )\n}\n\nconst CommandItem: ParentComponent<ComboboxPrimitive.ComboboxItemProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\", \"item\"])\n\n  return (\n    <ComboboxPrimitive.Item\n      item={local.item}\n      cmdk-item=\"\"\n      class={cn(\n        \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50\",\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst CommandItemLabel = ComboboxPrimitive.ItemLabel\n\nconst CommandHeading: ParentComponent<ComboboxPrimitive.ComboboxSectionProps> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <ComboboxPrimitive.Section\n      cmdk-heading=\"\"\n      class={cn(\n        \"px-2 py-1.5 text-xs font-medium text-muted-foreground [&:not(&:first-of-type)]:mt-2\",\n        local.class\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst CommandItemShortcut: ParentComponent<ComponentProps<\"span\">> = (props) => {\n  const [local, rest] = splitProps(props, [\"class\"])\n\n  return (\n    <span\n      class={cn(\"ml-auto text-xs tracking-widest text-muted-foreground\", local.class)}\n      {...rest}\n    />\n  )\n}\n\ntype CommandDialogProps<Option, OptGroup> = DialogPrimitive.DialogRootProps &\n  CommandProps<Option, OptGroup>\n\nconst CommandDialog = <Option, OptGroup>(props: CommandDialogProps<Option, OptGroup>) => {\n  const [local, rest] = splitProps(props, [\"children\"])\n\n  return (\n    <Dialog {...rest}>\n      <DialogContent class=\"overflow-hidden p-0\">\n        <Command\n          class=\"[&_[cmdk-heading]]:px-2 [&_[cmdk-heading]]:font-medium [&_[cmdk-heading]]:text-muted-foreground [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5 [&_[cmdk-list]:not([hidden])_~[cmdk-list]]:pt-0 [&_[cmdk-list]]:px-2\"\n          {...rest}\n        >\n          {local.children}\n        </Command>\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nexport {\n  Command,\n  CommandInput,\n  CommandList,\n  CommandItem,\n  CommandItemLabel,\n  CommandItemShortcut,\n  CommandHeading,\n  CommandDialog\n}\n"
     }
   ],
   "type": "ui"

apps/docs/public/registry/ui/delta-bar.json

@@ -3,7 +3,7 @@
   "files": [
     {
       "name": "delta-bar.tsx",
-      "content": "import { mergeProps, Show, splitProps, type Component, type ComponentProps } from \"solid-js\"\n\nimport { cn } from \"~/lib/utils\"\n\nexport interface DeltaBarProps extends ComponentProps<\"div\"> {\n  value: number\n  isIncreasePositive?: boolean\n}\n\nconst DeltaBar: Component<DeltaBarProps> = (rawProps) => {\n  const props = mergeProps(\n    {\n      isIncreasePositive: true\n    },\n    rawProps\n  )\n  const [, rest] = splitProps(props, [\"value\", \"isIncreasePositive\", \"class\"])\n\n  const barColor =\n    (props.value > 0 && props.isIncreasePositive) || (props.value < 0 && !props.isIncreasePositive)\n      ? \"bg-success-foreground\"\n      : \"bg-error-foreground\"\n\n  const barWidth = `${Math.abs(props.value)}%`\n\n  return (\n    <div\n      class={cn(\"relative flex h-2 w-full items-center rounded-full bg-secondary\", props.class)}\n      {...rest}\n    >\n      <div class=\"flex h-full w-1/2 justify-end\">\n        <Show when={props.value < 0}>\n          <div class={cn(\"rounded-l-full\", barColor)} style={{ width: barWidth }} />\n        </Show>\n      </div>\n      <div class={cn(\"z-10 h-4 w-1 rounded-full bg-primary ring-2 ring-background\")} />\n      <div class=\"flex h-full w-1/2 justify-start\">\n        <Show when={props.value > 0}>\n          <div class={cn(\"rounded-r-full\", barColor)} style={{ width: barWidth }} />\n        </Show>\n      </div>\n    </div>\n  )\n}\n\nexport { DeltaBar }\n"
+      "content": "import { mergeProps, Show, splitProps, type Component, type ComponentProps } from \"solid-js\"\n\nimport { cn } from \"~/lib/utils\"\n\nexport interface DeltaBarProps extends ComponentProps<\"div\"> {\n  value: number\n  isIncreasePositive?: boolean\n}\n\nconst DeltaBar: Component<DeltaBarProps> = (rawProps) => {\n  const props = mergeProps(\n    {\n      isIncreasePositive: true\n    },\n    rawProps\n  )\n  const [, rest] = splitProps(props, [\"value\", \"isIncreasePositive\", \"class\"])\n\n  return (\n    <div\n      class={cn(\"relative flex h-2 w-full items-center rounded-full bg-secondary\", props.class)}\n      {...rest}\n    >\n      <div class=\"flex h-full w-1/2 justify-end\">\n        <Show when={props.value < 0}>\n          <div\n            class={cn(\n              \"rounded-l-full\",\n              (props.value > 0 && props.isIncreasePositive) ||\n                (props.value < 0 && !props.isIncreasePositive)\n                ? \"bg-success-foreground\"\n                : \"bg-error-foreground\"\n            )}\n            style={{ width: `${Math.abs(props.value)}%` }}\n          />\n        </Show>\n      </div>\n      <div class={cn(\"z-10 h-4 w-1 rounded-full bg-primary ring-2 ring-background\")} />\n      <div class=\"flex h-full w-1/2 justify-start\">\n        <Show when={props.value > 0}>\n          <div\n            class={cn(\n              \"rounded-r-full\",\n              (props.value > 0 && props.isIncreasePositive) ||\n                (props.value < 0 && !props.isIncreasePositive)\n                ? \"bg-success-foreground\"\n                : \"bg-error-foreground\"\n            )}\n            style={{ width: `${Math.abs(props.value)}%` }}\n          />\n        </Show>\n      </div>\n    </div>\n  )\n}\n\nexport { DeltaBar }\n"
     }
   ],
   "type": "ui"