@oyolincc/create 0.3.0 → 0.5.0

package/templates/hono-fullstack/libs/ui/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "@repo/ui",
+  "version": "0.0.0",
+  "private": true,
+  "description": "@repo/ui",
+  "files": [
+    "dist/react",
+    "dist/panda",
+    "styled-system"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/react/src/index.d.mts",
+      "import": "./dist/react/src/index.mjs",
+      "default": "./dist/react/src/index.mjs"
+    },
+    "./tooltip": {
+      "types": "./dist/react/src/Tooltip.d.mts",
+      "import": "./dist/react/src/Tooltip.mjs",
+      "default": "./dist/react/src/Tooltip.mjs"
+    },
+    "./panda/*": "./dist/panda/*",
+    "./css": {
+      "types": "./styled-system/css/index.d.ts",
+      "default": "./styled-system/css/index.js"
+    },
+    "./css/*": {
+      "types": "./styled-system/css/*.d.ts",
+      "default": "./styled-system/css/*.js"
+    },
+    "./recipes": {
+      "types": "./styled-system/recipes/index.d.ts",
+      "default": "./styled-system/recipes/index.js"
+    },
+    "./recipes/*": {
+      "types": "./styled-system/recipes/*.d.ts",
+      "default": "./styled-system/recipes/*.js"
+    },
+    "./patterns": {
+      "types": "./styled-system/patterns/index.d.ts",
+      "default": "./styled-system/patterns/index.js"
+    },
+    "./patterns/*": {
+      "types": "./styled-system/patterns/*.d.ts",
+      "default": "./styled-system/patterns/*.js"
+    },
+    "./jsx": {
+      "types": "./styled-system/jsx/index.d.ts",
+      "default": "./styled-system/jsx/index.js"
+    },
+    "./jsx/*": {
+      "types": "./styled-system/jsx/*.d.ts",
+      "default": "./styled-system/jsx/*.js"
+    },
+    "./tokens": {
+      "types": "./styled-system/tokens/index.d.ts",
+      "default": "./styled-system/tokens/index.js"
+    },
+    "./helpers": {
+      "types": "./styled-system/helpers.d.ts",
+      "default": "./styled-system/helpers.js"
+    },
+    "./types": {
+      "types": "./styled-system/types/index.d.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "panda codegen --clean && vp pack && panda lib --files './react/**/*.{js,mjs}'",
+    "build:codegen": "panda codegen --clean",
+    "build:react": "vp pack",
+    "build:dev": "panda lib --files './react/**/*.{js,mjs}'",
+    "dev": "panda codegen && vp pack --watch",
+    "dev:codegen": "panda codegen --watch",
+    "dev:panda": "panda codegen && panda lib --watch --files './react/**/*.{js,mjs}'",
+    "test": "vp test",
+    "check": "vp check",
+    "storybook": "storybook dev --port 6006 --no-open",
+    "storybook:check": "panda codegen --config .storybook/panda.config.ts && tsc --project stories/tsconfig.json --noEmit --incremental false",
+    "storybook:build": "vp run storybook:check && storybook build --output-dir storybook-static",
+    "prepublishOnly": "vp run build"
+  },
+  "dependencies": {
+    "@ark-ui/react": "catalog:frontend",
+    "lucide-react": "catalog:frontend"
+  },
+  "devDependencies": {
+    "@oyolincc/dev-config": "catalog:",
+    "@pandacss/dev": "catalog:frontend",
+    "@pandacss/preset-base": "catalog:frontend",
+    "@pandacss/vite": "catalog:frontend",
+    "@storybook/addon-docs": "catalog:frontend",
+    "@storybook/react-vite": "catalog:frontend",
+    "@types/node": "catalog:",
+    "@types/react": "catalog:frontend",
+    "@types/react-dom": "catalog:frontend",
+    "react": "catalog:frontend",
+    "react-dom": "catalog:frontend",
+    "storybook": "catalog:frontend",
+    "typescript": "catalog:",
+    "vite-plus": "catalog:"
+  },
+  "peerDependencies": {
+    "@pandacss/dev": "^2.0.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  }
+}

package/templates/hono-fullstack/libs/ui/panda.config.ts

@@ -0,0 +1,41 @@
+import { animationStyles } from '@/theme/animation-styles'
+import { breakpoints } from '@/theme/breakpoints'
+import { textStyles } from '@/theme/text-styles'
+import { layerStyles } from '@/theme/layer-styles'
+import { keyframes } from '@/theme/keyframes'
+import { globalCss } from '@/theme/global-css'
+import { conditions } from '@/theme/conditions'
+import { slotRecipes, recipes } from '@/theme/recipes'
+import { defineConfig } from '@pandacss/dev'
+import { patterns } from './src/theme/patterns'
+import { containers } from './src/theme/containers'
+import { tokens } from '@/theme/tokens'
+import { semanticTokens } from '@/theme/semanticTokens'
+
+export default defineConfig({
+  presets: ['@pandacss/preset-base'],
+  jsxFramework: 'react',
+  separator: '-',
+  include: ['./src/**/*.{js,jsx,ts,tsx}'],
+  exclude: [],
+  // strictTokens: true,
+  // strictPropertyValues: true,
+
+  theme: {
+    tokens,
+    semanticTokens,
+    animationStyles,
+    breakpoints,
+    recipes,
+    slotRecipes,
+    keyframes,
+    layerStyles,
+    textStyles,
+    containers,
+  },
+
+  patterns: { extend: patterns },
+  outdir: 'styled-system',
+  globalCss,
+  conditions,
+})

package/templates/hono-fullstack/libs/ui/src/Tooltip.tsx

@@ -0,0 +1,47 @@
+'use client'
+import { Portal } from '@ark-ui/react/portal'
+import { forwardRef } from 'react'
+import * as TooltipParts from './components/atoms/overlays/Tooltip'
+
+export interface TooltipProps extends Omit<TooltipParts.RootProps, 'content'> {
+  showArrow?: boolean
+  portalled?: boolean
+  portalRef?: React.RefObject<HTMLElement | null>
+  children: React.ReactNode | undefined
+  content: React.ReactNode | string
+  contentProps?: TooltipParts.ContentProps
+  disabled?: boolean
+}
+
+export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(function Tooltip(props, ref) {
+  const {
+    showArrow,
+    children,
+    disabled,
+    portalled = true,
+    content,
+    contentProps,
+    portalRef,
+    ...rootProps
+  } = props
+
+  if (disabled) return children
+
+  return (
+    <TooltipParts.Root {...rootProps}>
+      <TooltipParts.Trigger asChild>{children}</TooltipParts.Trigger>
+      <Portal disabled={!portalled} container={portalRef}>
+        <TooltipParts.Positioner>
+          <TooltipParts.Content ref={ref} {...contentProps}>
+            {showArrow && (
+              <TooltipParts.Arrow>
+                <TooltipParts.ArrowTip />
+              </TooltipParts.Arrow>
+            )}
+            {content}
+          </TooltipParts.Content>
+        </TooltipParts.Positioner>
+      </Portal>
+    </TooltipParts.Root>
+  )
+})

package/templates/hono-fullstack/libs/ui/src/components/atoms/buttons/Button.tsx

@@ -0,0 +1,80 @@
+'use client'
+import { ark } from '@ark-ui/react/factory'
+import { createContext, mergeProps } from '@ark-ui/react/utils'
+import { type ComponentProps, forwardRef, useMemo } from 'react'
+import { styled } from 'styled-system/jsx'
+import { type ButtonVariantProps, button } from 'styled-system/recipes'
+import { Group, type GroupProps } from '@/components/atoms/layout/Group'
+import { Loader } from '@/components/atoms/internal/Loader'
+
+interface ButtonLoadingProps {
+  /**
+   * If `true`, the button will show a loading spinner.
+   * @default false
+   */
+  loading?: boolean | undefined
+  /**
+   * The text to show while loading.
+   */
+  loadingText?: React.ReactNode | undefined
+  /**
+   * The spinner to show while loading.
+   */
+  spinner?: React.ReactNode | undefined
+  /**
+   * The placement of the spinner
+   * @default "start"
+   */
+  spinnerPlacement?: 'start' | 'end' | undefined
+}
+
+type BaseButtonProps = ComponentProps<typeof BaseButton>
+const BaseButton = styled(ark.button, button)
+
+export interface ButtonProps extends BaseButtonProps, ButtonLoadingProps {}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {
+  const propsContext = useButtonPropsContext()
+  const buttonProps = useMemo(
+    () => mergeProps<ButtonProps>(propsContext, props),
+    [propsContext, props],
+  )
+
+  const { loading, loadingText, children, spinner, spinnerPlacement, ...rest } = buttonProps
+  return (
+    <BaseButton
+      type="button"
+      ref={ref}
+      {...rest}
+      data-loading={loading ? '' : undefined}
+      disabled={loading || rest.disabled}>
+      {!props.asChild && loading ? (
+        <Loader spinner={spinner} text={loadingText} spinnerPlacement={spinnerPlacement}>
+          {children}
+        </Loader>
+      ) : (
+        children
+      )}
+    </BaseButton>
+  )
+})
+
+export interface ButtonGroupProps extends GroupProps, ButtonVariantProps {}
+
+export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  function ButtonGroup(props, ref) {
+    const [variantProps, otherProps] = useMemo(() => button.splitVariantProps(props), [props])
+    return (
+      <ButtonPropsProvider value={variantProps}>
+        <Group ref={ref} {...otherProps} />
+      </ButtonPropsProvider>
+    )
+  },
+)
+
+const [ButtonPropsProvider, useButtonPropsContext] = createContext<ButtonVariantProps>({
+  name: 'ButtonPropsContext',
+  hookName: 'useButtonPropsContext',
+  providerName: '<PropsProvider />',
+  strict: false,
+})

package/templates/hono-fullstack/libs/ui/src/components/atoms/buttons/CloseButton.tsx

@@ -0,0 +1,15 @@
+import { XIcon } from 'lucide-react'
+import { forwardRef } from 'react'
+import { IconButton, type IconButtonProps } from './IconButton'
+
+export type CloseButtonProps = IconButtonProps
+
+export const CloseButton = forwardRef<HTMLButtonElement, CloseButtonProps>(
+  function CloseButton(props, ref) {
+    return (
+      <IconButton variant="plain" colorPalette="gray" aria-label="Close" ref={ref} {...props}>
+        {props.children ?? <XIcon />}
+      </IconButton>
+    )
+  },
+)

package/templates/hono-fullstack/libs/ui/src/components/atoms/buttons/IconButton.tsx

@@ -0,0 +1,10 @@
+import { forwardRef } from 'react'
+import { Button, type ButtonProps } from './Button'
+
+export interface IconButtonProps extends ButtonProps {}
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  function IconButton(props, ref) {
+    return <Button px="0" py="0" ref={ref} {...props} />
+  },
+)

package/templates/hono-fullstack/libs/ui/src/components/atoms/collections/Combobox.tsx

@@ -0,0 +1,91 @@
+'use client'
+import type { Assign } from '@ark-ui/react'
+import type { CollectionItem } from '@ark-ui/react/collection'
+import {
+  Combobox,
+  type ComboboxRootProps,
+  type ComboboxRootProviderProps,
+} from '@ark-ui/react/combobox'
+import { ark } from '@ark-ui/react/factory'
+import { CheckIcon, ChevronsUpDownIcon, XIcon } from 'lucide-react'
+import { type ComponentProps, type RefAttributes } from 'react'
+import { createSlotRecipeContext, type HTMLStyledProps } from 'styled-system/jsx'
+import { type ComboboxVariantProps, combobox } from 'styled-system/recipes'
+
+const { withProvider, withContext } = createSlotRecipeContext(combobox)
+
+type StyleProps = HTMLStyledProps<'div'> & ComboboxVariantProps
+
+export type RootProps<T extends CollectionItem = CollectionItem> = Assign<
+  ComboboxRootProps<T>,
+  StyleProps
+> &
+  RefAttributes<HTMLDivElement>
+export type RootProviderProps<T extends CollectionItem = CollectionItem> = Assign<
+  ComboboxRootProviderProps<T>,
+  StyleProps
+> &
+  RefAttributes<HTMLDivElement>
+
+export const Root = withProvider(Combobox.Root, 'root', {
+  defaultProps: { positioning: { sameWidth: false } },
+}) as Combobox.RootComponent<StyleProps>
+
+export const RootProvider = withProvider(
+  Combobox.RootProvider,
+  'root',
+) as Combobox.RootProviderComponent<StyleProps>
+
+export const ClearTrigger = withContext(Combobox.ClearTrigger, 'clearTrigger', {
+  defaultProps: { children: <XIcon /> },
+})
+export const Content = withContext(Combobox.Content, 'content')
+export const Control = withContext(Combobox.Control, 'control')
+export const Empty = withContext(Combobox.Empty, 'empty')
+export const IndicatorGroup = withContext(ark.div, 'indicatorGroup')
+export const Input = withContext(Combobox.Input, 'input')
+export const Item = withContext(Combobox.Item, 'item')
+export const ItemGroup = withContext(Combobox.ItemGroup, 'itemGroup')
+export const ItemGroupLabel = withContext(Combobox.ItemGroupLabel, 'itemGroupLabel')
+export const ItemText = withContext(Combobox.ItemText, 'itemText')
+export const Label = withContext(Combobox.Label, 'label')
+export const List = withContext(Combobox.List, 'list')
+export const Positioner = withContext(Combobox.Positioner, 'positioner')
+export const Trigger = withContext(Combobox.Trigger, 'trigger', {
+  defaultProps: { children: <ChevronsUpDownIcon /> },
+})
+
+export { ComboboxContext as Context } from '@ark-ui/react/combobox'
+
+export const ItemIndicator = withContext(Combobox.ItemIndicator, 'itemIndicator', {
+  defaultProps: { children: <CheckIcon /> },
+})
+
+export type ClearTriggerProps = ComponentProps<typeof ClearTrigger>
+export type ContentProps = ComponentProps<typeof Content>
+export type ControlProps = ComponentProps<typeof Control>
+export type EmptyProps = ComponentProps<typeof Empty>
+export type IndicatorGroupProps = ComponentProps<typeof IndicatorGroup>
+export type InputProps = ComponentProps<typeof Input>
+export type ItemProps = ComponentProps<typeof Item>
+export type ItemGroupProps = ComponentProps<typeof ItemGroup>
+export type ItemGroupLabelProps = ComponentProps<typeof ItemGroupLabel>
+export type ItemTextProps = ComponentProps<typeof ItemText>
+export type LabelProps = ComponentProps<typeof Label>
+export type ListProps = ComponentProps<typeof List>
+export type PositionerProps = ComponentProps<typeof Positioner>
+export type TriggerProps = ComponentProps<typeof Trigger>
+export type ItemIndicatorProps = ComponentProps<typeof ItemIndicator>
+
+export {
+  useCombobox,
+  useComboboxContext,
+  useComboboxItemContext,
+  type UseComboboxProps,
+  type UseComboboxReturn,
+  type ComboboxHighlightChangeDetails as HighlightChangeDetails,
+  type ComboboxInputValueChangeDetails as InputValueChangeDetails,
+  type ComboboxOpenChangeDetails as OpenChangeDetails,
+  type ComboboxSelectionDetails as SelectionDetails,
+  type ComboboxValueChangeDetails as ValueChangeDetails,
+} from '@ark-ui/react/combobox'

package/templates/hono-fullstack/libs/ui/src/components/atoms/collections/Select.tsx

@@ -0,0 +1,88 @@
+'use client'
+import type { Assign } from '@ark-ui/react'
+import type { CollectionItem } from '@ark-ui/react/collection'
+import { ark } from '@ark-ui/react/factory'
+import { Select, type SelectRootProps, type SelectRootProviderProps } from '@ark-ui/react/select'
+import { CheckIcon, ChevronsUpDownIcon } from 'lucide-react'
+import { type ComponentProps, type RefAttributes } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { type SelectVariantProps, select } from 'styled-system/recipes'
+import type { HTMLStyledProps } from 'styled-system/types'
+
+const { withProvider, withContext } = createSlotRecipeContext(select)
+
+type StyleProps = SelectVariantProps & HTMLStyledProps<'div'>
+
+export type RootProps<T extends CollectionItem = CollectionItem> = Assign<
+  SelectRootProps<T>,
+  StyleProps
+> &
+  RefAttributes<HTMLDivElement>
+export type RootProviderProps<T extends CollectionItem = CollectionItem> = Assign<
+  SelectRootProviderProps<T>,
+  StyleProps
+> &
+  RefAttributes<HTMLDivElement>
+
+export const Root = withProvider(Select.Root, 'root') as Select.RootComponent<StyleProps>
+export const RootProvider = withProvider(
+  Select.RootProvider,
+  'root',
+) as Select.RootProviderComponent<StyleProps>
+
+export const ClearTrigger = withContext(Select.ClearTrigger, 'clearTrigger')
+export const Content = withContext(Select.Content, 'content')
+export const Control = withContext(Select.Control, 'control')
+export const IndicatorGroup = withContext(ark.div, 'indicatorGroup')
+export const Item = withContext(Select.Item, 'item')
+export const ItemGroup = withContext(Select.ItemGroup, 'itemGroup')
+export const ItemGroupLabel = withContext(Select.ItemGroupLabel, 'itemGroupLabel')
+export const ItemText = withContext(Select.ItemText, 'itemText')
+export const Label = withContext(Select.Label, 'label')
+export const List = withContext(Select.List, 'list')
+export const Positioner = withContext(Select.Positioner, 'positioner')
+export const Trigger = withContext(Select.Trigger, 'trigger')
+export const ValueText = withContext(Select.ValueText, 'valueText')
+export const Indicator = withContext(Select.Indicator, 'indicator', {
+  defaultProps: { children: <ChevronsUpDownIcon /> },
+})
+export const HiddenSelect = Select.HiddenSelect
+
+export {
+  SelectContext as Context,
+  SelectItemContext as ItemContext,
+  type SelectValueChangeDetails as ValueChangeDetails,
+} from '@ark-ui/react/select'
+
+export const ItemIndicator = withContext(Select.ItemIndicator, 'itemIndicator', {
+  defaultProps: { children: <CheckIcon /> },
+})
+
+export type ClearTriggerProps = ComponentProps<typeof ClearTrigger>
+export type ContentProps = ComponentProps<typeof Content>
+export type ControlProps = ComponentProps<typeof Control>
+export type IndicatorGroupProps = ComponentProps<typeof IndicatorGroup>
+export type ItemProps = ComponentProps<typeof Item>
+export type ItemGroupProps = ComponentProps<typeof ItemGroup>
+export type ItemGroupLabelProps = ComponentProps<typeof ItemGroupLabel>
+export type ItemTextProps = ComponentProps<typeof ItemText>
+export type LabelProps = ComponentProps<typeof Label>
+export type ListProps = ComponentProps<typeof List>
+export type PositionerProps = ComponentProps<typeof Positioner>
+export type TriggerProps = ComponentProps<typeof Trigger>
+export type ValueTextProps = ComponentProps<typeof ValueText>
+export type IndicatorProps = ComponentProps<typeof Indicator>
+export type HiddenSelectProps = ComponentProps<typeof HiddenSelect>
+export type ItemIndicatorProps = ComponentProps<typeof ItemIndicator>
+
+export {
+  useSelect,
+  useSelectContext,
+  useSelectItemContext,
+  type UseSelectProps,
+  type UseSelectReturn,
+  type SelectHighlightChangeDetails as HighlightChangeDetails,
+  type SelectOpenChangeDetails as OpenChangeDetails,
+  type SelectScrollToIndexDetails as ScrollToIndexDetails,
+  type SelectSelectionDetails as SelectionDetails,
+} from '@ark-ui/react/select'

package/templates/hono-fullstack/libs/ui/src/components/atoms/collections/TreeView.tsx

@@ -0,0 +1,142 @@
+'use client'
+import { TreeView, useTreeViewContext } from '@ark-ui/react/tree-view'
+import type { TreeNode } from '@ark-ui/react/collection'
+import { CheckIcon, ChevronRightIcon, MinusIcon } from 'lucide-react'
+import type { ComponentProps, JSX, Provider, ReactElement, ReactNode, RefAttributes } from 'react'
+import { createSlotRecipeContext } from 'styled-system/jsx'
+import { treeView, type TreeViewVariantProps } from 'styled-system/recipes'
+import type { AsProps, JsxHTMLProps, JsxStyleProps, UnstyledProps } from 'styled-system/types'
+
+const {
+  withProvider,
+  withContext,
+  PropsProvider: TreePropsProvider,
+} = createSlotRecipeContext(treeView)
+
+export type RootProps<T extends TreeNode = TreeNode> = JsxHTMLProps<
+  TreeView.RootProps<T> & RefAttributes<HTMLDivElement> & AsProps & UnstyledProps,
+  JsxStyleProps & TreeViewVariantProps
+>
+export type RootProviderProps<T extends TreeNode = TreeNode> = JsxHTMLProps<
+  TreeView.RootProviderProps<T> & RefAttributes<HTMLDivElement> & AsProps & UnstyledProps,
+  JsxStyleProps & TreeViewVariantProps
+>
+export const Root = withProvider(TreeView.Root, 'root') as <T extends TreeNode>(
+  props: RootProps<T>,
+) => JSX.Element
+export const RootProvider = withProvider(TreeView.RootProvider, 'root') as <T extends TreeNode>(
+  props: RootProviderProps<T>,
+) => JSX.Element
+export const PropsProvider = TreePropsProvider as Provider<Partial<RootProps>>
+export const Branch = withContext(TreeView.Branch, 'branch')
+export const BranchContent = withContext(TreeView.BranchContent, 'branchContent')
+export const BranchControl = withContext(TreeView.BranchControl, 'branchControl')
+export const BranchTrigger = withContext(TreeView.BranchTrigger, 'branchTrigger')
+export const BranchText = withContext(TreeView.BranchText, 'branchText')
+export const BranchIndentGuide = withContext(TreeView.BranchIndentGuide, 'branchIndentGuide')
+export const Item = withContext(TreeView.Item, 'item')
+export const ItemText = withContext(TreeView.ItemText, 'itemText')
+export const Label = withContext(TreeView.Label, 'label')
+export const Tree = withContext(TreeView.Tree, 'tree')
+export const NodeRenameInput = withContext(TreeView.NodeRenameInput, 'nodeRenameInput')
+export const BranchIndicator = withContext(TreeView.BranchIndicator, 'branchIndicator', {
+  defaultProps: { children: <ChevronRightIcon /> },
+})
+export const ItemIndicator = withContext(TreeView.ItemIndicator, 'itemIndicator', {
+  defaultProps: { children: <CheckIcon /> },
+})
+export const NodeCheckbox = withContext(TreeView.NodeCheckbox, 'nodeCheckbox', {
+  defaultProps: {
+    children: (
+      <TreeView.NodeCheckboxIndicator indeterminate={<MinusIcon />}>
+        <CheckIcon />
+      </TreeView.NodeCheckboxIndicator>
+    ),
+  },
+})
+
+export interface NodeRenderProps<T = TreeNode> {
+  node: T
+  indexPath: number[]
+  nodeState: TreeView.NodeState
+}
+export interface NodeProps<T = TreeNode> {
+  render: (props: NodeRenderProps<T>) => ReactNode
+  renderBranch?: (props: NodeRenderProps<T>) => ReactNode
+  indentGuide?: ReactElement
+  branchProps?: BranchProps
+  branchContentProps?: BranchContentProps
+}
+export function Node<T extends TreeNode = TreeNode>({
+  render,
+  renderBranch,
+  indentGuide,
+  branchProps,
+  branchContentProps,
+}: NodeProps<T>): ReactNode {
+  const tree = useTreeViewContext()
+  const renderNode = (node: T, indexPath: number[]): ReactNode => (
+    <TreeView.NodeProvider
+      key={tree.collection.getNodeValue(node)}
+      node={node}
+      indexPath={indexPath}>
+      <TreeView.NodeContext>
+        {(nodeState) => {
+          const props = { node, indexPath, nodeState }
+          if (!nodeState.isBranch) return render(props)
+          return (
+            <Branch {...branchProps}>
+              {(renderBranch || render)(props)}
+              <BranchContent {...branchContentProps}>
+                {indentGuide}
+                {tree.collection
+                  .getNodeChildren(node)
+                  .map((child: T, index: number) => renderNode(child, [...indexPath, index]))}
+              </BranchContent>
+            </Branch>
+          )
+        }}
+      </TreeView.NodeContext>
+    </TreeView.NodeProvider>
+  )
+  return tree.collection
+    .getNodeChildren(tree.collection.rootNode)
+    .map((node: T, index: number) => renderNode(node, [index]))
+}
+export type BranchProps = ComponentProps<typeof Branch>
+export type BranchContentProps = ComponentProps<typeof BranchContent>
+export type BranchControlProps = ComponentProps<typeof BranchControl>
+export type BranchTriggerProps = ComponentProps<typeof BranchTrigger>
+export type BranchTextProps = ComponentProps<typeof BranchText>
+export type BranchIndentGuideProps = ComponentProps<typeof BranchIndentGuide>
+export type ItemProps = ComponentProps<typeof Item>
+export type ItemTextProps = ComponentProps<typeof ItemText>
+export type LabelProps = ComponentProps<typeof Label>
+export type TreeProps = ComponentProps<typeof Tree>
+export type NodeRenameInputProps = ComponentProps<typeof NodeRenameInput>
+export type BranchIndicatorProps = ComponentProps<typeof BranchIndicator>
+export type ItemIndicatorProps = ComponentProps<typeof ItemIndicator>
+export type NodeCheckboxProps = ComponentProps<typeof NodeCheckbox>
+export {
+  TreeViewContext as Context,
+  TreeViewNodeContext as NodeContext,
+  TreeViewNodeProvider as NodeProvider,
+  TreeViewNodeCheckboxIndicator as NodeCheckboxIndicator,
+  useTreeView,
+  useTreeViewContext,
+  useTreeViewNodeContext,
+  type UseTreeViewProps,
+  type UseTreeViewReturn,
+} from '@ark-ui/react/tree-view'
+export type {
+  TreeViewExpandedChangeDetails as ExpandedChangeDetails,
+  TreeViewSelectionChangeDetails as SelectionChangeDetails,
+  TreeViewCheckedChangeDetails as CheckedChangeDetails,
+  TreeViewFocusChangeDetails as FocusChangeDetails,
+  TreeViewLoadChildrenDetails as LoadChildrenDetails,
+  TreeViewLoadChildrenCompleteDetails as LoadChildrenCompleteDetails,
+  TreeViewLoadChildrenErrorDetails as LoadChildrenErrorDetails,
+  TreeViewRenameStartDetails as RenameStartDetails,
+  TreeViewRenameCompleteDetails as RenameCompleteDetails,
+  TreeViewNodeState as NodeState,
+} from '@ark-ui/react/tree-view'