🐛 Fix invalid NumberInput styling

package.json

@@ -15,7 +15,7 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@ark-ui/solid": "4.1.0",
+    "@ark-ui/solid": "4.5.1",
     "@solid-primitives/mutation-observer": "1.1.17",
     "@solidjs/meta": "0.29.4",
     "@solidjs/router": "0.15.1",
@@ -28,7 +28,7 @@
   "devDependencies": {
     "@eslint/js": "9.10.0",
     "@pandacss/dev": "0.48.0",
-    "@park-ui/panda-preset": "0.42.0",
+    "@park-ui/panda-preset": "0.43.1",
     "dprint": "0.47.5",
     "eslint": "9.12.0",
     "eslint-plugin-solid": "0.14.4",

panda.config.ts

@@ -1,14 +1,17 @@
 import { defineConfig } from "@pandacss/dev";
 import { createPreset } from "@park-ui/panda-preset";
+import mauve from "@park-ui/panda-preset/colors/mauve";
+import plum from "@park-ui/panda-preset/colors/plum";
 
 export default defineConfig({
   preflight: true,
   jsxFramework: "solid",
   outdir: "styled-system",
   presets: [
     createPreset({
-      accentColor: "plum",
-      grayColor: "mauve",
+      accentColor: plum,
+      grayColor: mauve,
+      radius: "sm",
     }),
   ],
   include: ["./park-ui/**/*.{js,jsx,ts,tsx}", "./src/**/*.{ts,tsx}"],

park-ui/button.tsx

@@ -32,6 +32,12 @@ export const Button = (props: ButtonProps) => {
 
 const ButtonSpinner = () => (
   <Center inline position="absolute" transform="translate(-50%, -50%)" top="50%" insetStart="50%">
-    <Spinner borderColor="currentColor" />
+    <Spinner
+      width="1.1em"
+      height="1.1em"
+      borderWidth="1.5px"
+      borderTopColor="fg.disabled"
+      borderRightColor="fg.disabled"
+    />
   </Center>
 )

park-ui/combobox.tsx

@@ -1 +1,2 @@
+export { createListCollection } from '@ark-ui/solid/combobox'
 export * as Combobox from './styled/combobox'

park-ui/select.tsx

@@ -1 +1,2 @@
+export { createListCollection } from '@ark-ui/solid/select'
 export * as Select from './styled/select'

park-ui/styled/drawer.tsx

@@ -1,6 +1,6 @@
 import { type Assign, Dialog, type PolymorphicProps, ark } from '@ark-ui/solid'
 import type { ComponentProps } from 'solid-js'
-import { drawer, DrawerVariantProps } from 'styled-system/recipes'
+import { type DrawerVariantProps, drawer } from 'styled-system/recipes'
 import type { HTMLStyledProps } from 'styled-system/types'
 import { createStyleContext } from './utils/create-style-context'
 

park-ui/styled/tree-view.tsx

@@ -1,4 +1,5 @@
-import { type Assign, TreeView } from '@ark-ui/solid'
+import type { Assign } from '@ark-ui/solid'
+import { type TreeNode, TreeView } from '@ark-ui/solid/tree-view'
 import type { ComponentProps } from 'solid-js'
 import { type TreeViewVariantProps, treeView } from 'styled-system/recipes'
 import type { HTMLStyledProps } from 'styled-system/types'
@@ -8,16 +9,19 @@ const { withProvider, withContext } = createStyleContext(treeView)
 
 export type RootProviderProps = ComponentProps<typeof RootProvider>
 export const RootProvider = withProvider<
-  Assign<Assign<HTMLStyledProps<'div'>, TreeView.RootProviderBaseProps>, TreeViewVariantProps>
+  Assign<
+    Assign<HTMLStyledProps<'div'>, TreeView.RootProviderBaseProps<TreeNode>>,
+    TreeViewVariantProps
+  >
 >(TreeView.RootProvider, 'root')
 
 export type RootProps = ComponentProps<typeof Root>
 export const Root = withProvider<
-  Assign<Assign<HTMLStyledProps<'div'>, TreeView.RootBaseProps>, TreeViewVariantProps>
+  Assign<Assign<HTMLStyledProps<'div'>, TreeView.RootBaseProps<TreeNode>>, TreeViewVariantProps>
 >(TreeView.Root, 'root')
 
 export const BranchContent = withContext<
-  Assign<HTMLStyledProps<'ul'>, TreeView.BranchContentBaseProps>
+  Assign<HTMLStyledProps<'div'>, TreeView.BranchContentBaseProps>
 >(TreeView.BranchContent, 'branchContent')
 
 export const BranchControl = withContext<
@@ -28,11 +32,15 @@ export const BranchIndicator = withContext<
   Assign<HTMLStyledProps<'div'>, TreeView.BranchIndicatorBaseProps>
 >(TreeView.BranchIndicator, 'branchIndicator')
 
-export const Branch = withContext<Assign<HTMLStyledProps<'li'>, TreeView.BranchBaseProps>>(
+export const Branch = withContext<Assign<HTMLStyledProps<'div'>, TreeView.BranchBaseProps>>(
   TreeView.Branch,
   'branch',
 )
 
+export const BranchIndentGuide = withContext<
+  Assign<HTMLStyledProps<'div'>, TreeView.BranchIndentGuideBaseProps>
+>(TreeView.BranchIndentGuide, 'branchIndentGuide')
+
 export const BranchText = withContext<
   Assign<HTMLStyledProps<'span'>, TreeView.BranchTextBaseProps>
 >(TreeView.BranchText, 'branchText')
@@ -45,7 +53,7 @@ export const ItemIndicator = withContext<
   Assign<HTMLStyledProps<'div'>, TreeView.ItemIndicatorBaseProps>
 >(TreeView.ItemIndicator, 'itemIndicator')
 
-export const Item = withContext<Assign<HTMLStyledProps<'li'>, TreeView.ItemBaseProps>>(
+export const Item = withContext<Assign<HTMLStyledProps<'div'>, TreeView.ItemBaseProps>>(
   TreeView.Item,
   'item',
 )
@@ -60,9 +68,12 @@ export const Label = withContext<Assign<HTMLStyledProps<'label'>, TreeView.Label
   'label',
 )
 
-export const Tree = withContext<Assign<HTMLStyledProps<'ul'>, TreeView.TreeBaseProps>>(
+export const Tree = withContext<Assign<HTMLStyledProps<'div'>, TreeView.TreeBaseProps>>(
   TreeView.Tree,
   'tree',
 )
 
+export type NodeProviderProps = TreeView.NodeProviderProps<TreeNode>
+export const NodeProvider = TreeView.NodeProvider
+
 export { TreeViewContext as Context } from '@ark-ui/solid'

park-ui/tree-view.tsx

@@ -1,65 +1,54 @@
-import { For, Show, splitProps } from 'solid-js'
+import { CheckSquareIcon, ChevronRightIcon, FileIcon, FolderIcon } from 'lucide-solid'
+import { For, Show } from 'solid-js'
 import * as StyledTreeView from './styled/tree-view'
 
-interface Child {
-  value: string
-  name: string
-  children?: Child[]
-}
-
-export interface TreeViewData {
-  label: string
-  children: Child[]
-}
-
-export interface TreeViewProps extends StyledTreeView.RootProps {
-  data: TreeViewData
-}
-export const TreeView = (props: TreeViewProps) => {
-  const [localProps, rootProps] = splitProps(props, ['data'])
-
-  const renderChild = (child: Child) => (
-    <Show
-      when={child.children}
-      fallback={
-        <StyledTreeView.Item value={child.value}>
-          <StyledTreeView.ItemText>{child.name}</StyledTreeView.ItemText>
-        </StyledTreeView.Item>
-      }
-    >
-      <StyledTreeView.Branch value={child.value}>
-        <StyledTreeView.BranchControl>
-          <StyledTreeView.BranchIndicator>
-            <ChevronRightIcon />
-          </StyledTreeView.BranchIndicator>
-          <StyledTreeView.BranchText>{child.name}</StyledTreeView.BranchText>
-        </StyledTreeView.BranchControl>
-        <StyledTreeView.BranchContent>
-          <For each={child.children}>{(child) => renderChild(child)}</For>
-        </StyledTreeView.BranchContent>
-      </StyledTreeView.Branch>
-    </Show>
-  )
-
+export const TreeView = (props: StyledTreeView.RootProps) => {
   return (
-    <StyledTreeView.Root aria-label={localProps.data.label} {...rootProps}>
+    <StyledTreeView.Root {...props}>
       <StyledTreeView.Tree>
-        <For each={localProps.data.children}>{(child) => renderChild(child)}</For>
+        <For each={props.collection.rootNode.children}>
+          {(node, index) => <TreeNode node={node} indexPath={[index()]} />}
+        </For>
       </StyledTreeView.Tree>
     </StyledTreeView.Root>
   )
 }
 
-const ChevronRightIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    <title>Chevron Right Icon</title>
-    <path
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      d="m9 18l6-6l-6-6"
-    />
-  </svg>
-)
+const TreeNode = (props: StyledTreeView.NodeProviderProps) => {
+  const { node, indexPath } = props
+  return (
+    <StyledTreeView.NodeProvider node={node} indexPath={indexPath}>
+      <Show
+        when={node.children}
+        fallback={
+          <StyledTreeView.Item>
+            <StyledTreeView.ItemIndicator>
+              <CheckSquareIcon />
+            </StyledTreeView.ItemIndicator>
+            <StyledTreeView.ItemText>
+              <FileIcon />
+              {node.name}
+            </StyledTreeView.ItemText>
+          </StyledTreeView.Item>
+        }
+      >
+        <StyledTreeView.Branch>
+          <StyledTreeView.BranchControl>
+            <StyledTreeView.BranchText>
+              <FolderIcon /> {node.name}
+            </StyledTreeView.BranchText>
+            <StyledTreeView.BranchIndicator>
+              <ChevronRightIcon />
+            </StyledTreeView.BranchIndicator>
+          </StyledTreeView.BranchControl>
+          <StyledTreeView.BranchContent>
+            <StyledTreeView.BranchIndentGuide />
+            <For each={node.children}>
+              {(child, index) => <TreeNode node={child} indexPath={[...indexPath, index()]} />}
+            </For>
+          </StyledTreeView.BranchContent>
+        </StyledTreeView.Branch>
+      </Show>
+    </StyledTreeView.NodeProvider>
+  )
+}