Some Panda Recipes Depend on @ark-ui/react when using SolidJS

[only-cliches]

Thanks so much for this amazing library!

I was recently trying to update to the newest ParkUI version and ran into an issue. It seems like even when components.json is set to "framework": "solid" the @park-ui/cli command will sometimes generate recipes that depend on @ark-ui/react.

Steps to reproduce:

1. Clone https://github.com/cschroeter/park-ui-solid-start
2. npm install
3. npx @park-ui/cli add --all to install all available components
4. npm run prepare

Output:

> prepare
> panda codegen

✘ [ERROR] Could not resolve "@ark-ui/react/tags-input"

    src/theme/recipes/tags-input.ts:1:33:
      1 │ import { tagsInputAnatomy } from '@ark-ui/react/tags-input'
        ╵                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/tags-input" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/splitter"

    src/theme/recipes/splitter.ts:1:32:
      1 │ import { splitterAnatomy } from '@ark-ui/react/splitter'
        ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/splitter" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/pagination"

    src/theme/recipes/pagination.ts:1:34:
      1 │ import { paginationAnatomy } from '@ark-ui/react/pagination'
        ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/pagination" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/segment-group"

    src/theme/recipes/segment-group.ts:1:36:
      1 │ import { segmentGroupAnatomy } from '@ark-ui/react/segment-group'
        ╵                                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/segment-group" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/pin-input"

    src/theme/recipes/pin-input.ts:1:32:
      1 │ import { pinInputAnatomy } from '@ark-ui/react/pin-input'
        ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/pin-input" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/popover"

    src/theme/recipes/popover.ts:1:31:
      1 │ import { popoverAnatomy } from '@ark-ui/react/popover'
        ╵                                ~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/popover" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/rating-group/"

    src/theme/recipes/rating-group.ts:1:35:
      1 │ import { ratingGroupAnatomy } from '@ark-ui/react/rating-group/'
        ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/rating-group/" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/switch"

    src/theme/recipes/switch.ts:1:30:
      1 │ import { switchAnatomy } from '@ark-ui/react/switch'
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/switch" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/toggle-group"

    src/theme/recipes/toggle-group.ts:1:35:
      1 │ import { toggleGroupAnatomy } from '@ark-ui/react/toggle-group'
        ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/toggle-group" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/number-input"

    src/theme/recipes/number-input.ts:1:35:
      1 │ import { numberInputAnatomy } from '@ark-ui/react/number-input'
        ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/number-input" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/toast"

    src/theme/recipes/toast.ts:1:29:
      1 │ import { toastAnatomy } from '@ark-ui/react/toast'
        ╵                              ~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/toast" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/collapsible"

    src/theme/recipes/collapsible.ts:1:35:
      1 │ import { collapsibleAnatomy } from '@ark-ui/react/collapsible'
        ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/collapsible" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/menu"

    src/theme/recipes/menu.ts:1:28:
      1 │ import { menuAnatomy } from '@ark-ui/react/menu'
        ╵                             ~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/menu" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/radio-group"

    src/theme/recipes/radio-card-group.ts:1:34:
      1 │ import { radioGroupAnatomy } from '@ark-ui/react/radio-group'
        ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/radio-group" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/editable"

    src/theme/recipes/editable.ts:1:32:
      1 │ import { editableAnatomy } from '@ark-ui/react/editable'
        ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/editable" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/fieldset"

    src/theme/recipes/fieldset.ts:1:32:
      1 │ import { fieldsetAnatomy } from '@ark-ui/react/fieldset'
        ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/fieldset" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/field"

    src/theme/recipes/field.ts:1:29:
      1 │ import { fieldAnatomy } from '@ark-ui/react/field'
        ╵                              ~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/field" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/date-picker"

    src/theme/recipes/date-picker.ts:1:34:
      1 │ import { datePickerAnatomy } from '@ark-ui/react/date-picker'
        ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/date-picker" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/tooltip"

    src/theme/recipes/tooltip.ts:1:31:
      1 │ import { tooltipAnatomy } from '@ark-ui/react/tooltip'
        ╵                                ~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/tooltip" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/tabs"

    src/theme/recipes/tabs.ts:1:28:
      1 │ import { tabsAnatomy } from '@ark-ui/react/tabs'
        ╵                             ~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/tabs" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/slider"

    src/theme/recipes/slider.ts:1:30:
      1 │ import { sliderAnatomy } from '@ark-ui/react/slider'
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/slider" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/radio-group"

    src/theme/recipes/radio-group.ts:1:34:
      1 │ import { radioGroupAnatomy } from '@ark-ui/react/radio-group'
        ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/radio-group" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/select"

    src/theme/recipes/select.ts:1:30:
      1 │ import { selectAnatomy } from '@ark-ui/react/select'
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/select" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/dialog"

    src/theme/recipes/dialog.ts:1:30:
      1 │ import { dialogAnatomy } from '@ark-ui/react/dialog'
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/dialog" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/avatar"

    src/theme/recipes/avatar.ts:1:30:
      1 │ import { avatarAnatomy } from '@ark-ui/react/avatar'
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/avatar" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/progress"

    src/theme/recipes/progress.ts:1:32:
      1 │ import { progressAnatomy } from '@ark-ui/react/progress'
        ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/progress" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/clipboard"

    src/theme/recipes/clipboard.ts:1:33:
      1 │ import { clipboardAnatomy } from '@ark-ui/react/clipboard'
        ╵                                  ~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/clipboard" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/combobox"

    src/theme/recipes/combobox.ts:1:32:
      1 │ import { comboboxAnatomy } from '@ark-ui/react/combobox'
        ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/combobox" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/color-picker"

    src/theme/recipes/color-picker.ts:1:35:
      1 │ import { colorPickerAnatomy } from '@ark-ui/react/color-picker'
        ╵                                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/color-picker" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/checkbox"

    src/theme/recipes/checkbox.ts:1:32:
      1 │ import { checkboxAnatomy } from '@ark-ui/react/checkbox'
        ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/checkbox" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/hover-card"

    src/theme/recipes/hover-card.ts:1:33:
      1 │ import { hoverCardAnatomy } from '@ark-ui/react/hover-card'
        ╵                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/hover-card" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/dialog"

    src/theme/recipes/drawer.ts:1:30:
      1 │ import { dialogAnatomy } from '@ark-ui/react/dialog'
        ╵                               ~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/dialog" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/carousel"

    src/theme/recipes/carousel.ts:1:32:
      1 │ import { carouselAnatomy } from '@ark-ui/react/carousel'
        ╵                                 ~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/carousel" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/file-upload"

    src/theme/recipes/file-upload.ts:1:34:
      1 │ import { fileUploadAnatomy } from '@ark-ui/react/file-upload'
        ╵                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/file-upload" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

✘ [ERROR] Could not resolve "@ark-ui/react/accordion"

    src/theme/recipes/accordion.ts:1:33:
      1 │ import { accordionAnatomy } from '@ark-ui/react/accordion'
        ╵                                  ~~~~~~~~~~~~~~~~~~~~~~~~~

  You can mark the path "@ark-ui/react/accordion" as external to exclude it from the bundle, which will remove this error and leave the unresolved path in the bundle.

Build failed with 35 errors:
src/theme/recipes/accordion.ts:1:33: ERROR: Could not resolve "@ark-ui/react/accordion"
src/theme/recipes/avatar.ts:1:30: ERROR: Could not resolve "@ark-ui/react/avatar"
src/theme/recipes/carousel.ts:1:32: ERROR: Could not resolve "@ark-ui/react/carousel"
src/theme/recipes/checkbox.ts:1:32: ERROR: Could not resolve "@ark-ui/react/checkbox"
src/theme/recipes/clipboard.ts:1:33: ERROR: Could not resolve "@ark-ui/react/clipboard"
...