@park-ui/[email protected]

Fixed

• NumberInput: Fixed an issue where the grid layout was not applied correctly.

@park-ui/[email protected]

Changed

• Color Tokens: The accent color concept has been removed. Components now rely on the built-in
  colorPalette prop for color customization. This change aligns with how Panda CSS envisions the
  use of its virtual color system..

Previously, color tokens were organized like this:

colorPalette.1  
 └── accent.1  
 └── amber.1  
 ├── amber.light.1  
 └── amber.dark.1

The accent layer was unnecessary and has been removed:

colorPalette.1  
 └── amber.1  
 ├── amber.light.1  
 └── amber.dark.1

Here's how this change impacts usage:

- <Box color="accent.default" />
+ <Box color="colorPalette.default" />

• Improved consistency and scalability by refining the Park UI Preset setup in the Panda
  configuration. Learn more in the docs.

 import { defineConfig } from '@pandacss/dev'

```diff
 import { defineConfig } from '@pandacss/dev'
 import { createPreset } from '@park-ui/panda-preset'
+import amber from '@park-ui/panda-preset/colors/amber'
+import sand from '@park-ui/panda-preset/colors/sand'

 export default defineConfig({
   preflight: true,
   presets: [
-    '@pandacss/preset-base',
     createPreset({
-      accentColor: 'amber',
-      grayColor: 'sand',
-      borderRadius: 'sm',
+      accentColor: amber,
+      grayColor: sand,
+      radius: 'sm',
     }),
   ],
   include: ['./src/**/*.{js,jsx,ts,tsx,vue}'],
   jsxFramework: 'react', // or 'solid' or 'vue'
   outdir: 'styled-system',
 })

@park-ui/[email protected]

Added

• Input, Textarea: Now support usage within the Field component.

Changed

• CLI: Installation of components using the CLI no longer requires a tsconfig.json file.
  This is particularly beneficial for setups like nx workspaces that do not include a tsconfig.json file.

The CLI now prompts the following:

➜ Which JS framework do you use? [React / Solid / Vue]
➜ Where would you like to store your components? [./src/components/ui]

Adding a component will create the following folder structure:

➜ /src/components/ui/
  |-- styled/
  |   |-- utils/
  |   |   `-- create-style-context.ts
  |   `-- button.tsx
  `-- button.tsx

Fixed

• Textarea: Fixed an issue where the invalid state was not rendered correctly.
• Tooltip: Set a proper z-index value to ensure the tooltip is displayed above other elements.
• Input: Fixed an issue where the horizontal padding was not applied correctly.
• Resolved a warning related to the undefined usage of colors.red.9.

@park-ui/[email protected]

Added

• Added new semantic tokens: fg.error and border.error for styling error states.
• Added support for invalid state in the Input component.
• Added _invalid condition to the list of supported conditions.

Changed

• Updated the Button component to support loading states.

Fixed

• Resolved an issue where Panda sometimes did not recognize style props on IconButton components.

@park-ui/[email protected]

Added

• Added Spinner component.

Fixed

• Fixed an issue where forcing a color mode on a component sometimes did not work as expected.

Removed

• Removed the icon-button recipe in favor of reusing the button recipe.

@park-ui/[email protected]

Added

• Added support for forcing all components to render in either dark or light mode.

export const App = () => {
  return (
    <Box className="dark">
      {/* Renders a Popover component always in dark mode */}
      <Popover />
    </Box>
  )
}

@park-ui/[email protected]

Fixed

• Prepared recipes for QrCode, SignaturePad and Field components.

@park-ui/[email protected]

We are excited to announce that in this release, we have migrated all components to the new Ark UI 3.0 API.
This update includes several breaking changes, so please make sure to update your code snippets accordingly.

Changed

• Optimized type checking for Heading, Icon and Text components for faster performance.

Fixed

• Resolved an issue with the Avatar component where the image did not display as round after loading.

@park-ui/[email protected]

Fixed

• Set white-space: pre for the Code and Kb component to prevent text wrapping.

@park-ui/[email protected]

Added

• Added on and off to the list of supported conditions.

Changed

• Improved the hover conditions to only activate on non-touch devices.

Fixed

• Fixed an issue where the NumberInput component rendered a border incorrectly.
• Fixed an issue where the ToggleGroup component did not appear to work correctly on touch devices.