Changelog
All notable changes will be documented in this file.
[Unreleased]
[0.42.0] - 2024-08-01
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 likenx
workspaces that do not include atsconfig.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
.
[0.41.0] - 2024-07-28
Added
- Added new semantic tokens:
fg.error
andborder.error
for styling error states. - Added support for
invalid
state in theInput
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.
[0.40.0] - 2024-07-27
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 thebutton
recipe.
[0.39.0] - 2024-07-15
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>
)
}
[0.38.1] - 2024-06-25
Fixed
- Prepared recipes for
QrCode
,SignaturePad
andField
components.
[0.38.0] - 2024-06-06
We are excited to announce that in this release, we have migrated all components to the new Ark UI 3.0.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
andText
components for faster performance.
Fixed
- Resolved an issue with the
Avatar
component where the image did not display as round after loading.
[0.37.1] - 2024-05-19
Fixed
- Set
white-space: pre
for theCode
andKb
component to prevent text wrapping.
[0.37.0] - 2024-04-10
Added
- Added
on
andoff
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.
[0.36.1] - 2024-03-06
Changed
- Replaced
start
withflex-start
due to mixed support in some browsers.
[0.36.0] - 2024-02-27
Added
- Introduced the
Collapsible
component.
Changed
- Updated the
Accordion
to leverage the newCollapsible
component from Ark UI (version 2.20+).
[0.35.2] - 2024-02-19
Fixed
- Fixed an issue with the
Switch
not being rendered correctly when a size was specified.
[0.35.1] - 2024-02-16
Fixed
- Replaced
{colors.white}
and{colors.black}
withblack
andwhite
in color references to prevent false positive error messages.
[0.35.0] - 2024-02-16
Added
- Added
TreeView
component. - Added
Clipboard
component.
[0.34.1] - 2024-02-12
Fixed
- Resolved an issue that you had to add the
accent
andgray
colors to theadditionalColors
option in thecreatePreset
function to make them available in the CSS bundle.
[0.34.0] - 2024-02-08
Added
Introduced a new additionalColors
option in the createPreset
function to decrease the CSS bundle size effectively. By default, the preset includes only the gray
and accent
colors.
This maybe a breaking change for some users, so please update your configuration accordingly.
Example configuration:
import { defineConfig } from '@pandacss/dev';
import { createPreset } from '@park-ui/panda-preset';
export default defineConfig({
presets: [
'@pandacss/preset-base',
createPreset({
accentColor: 'amber',
grayColor: 'sand',
additionalColors: ['red', 'green'],
}),
],
// Additional configuration...
})
To add all available colors, use this wildcard:
createPreset({
additionalColors: ['*'],
}),
[0.33.0] - 2024-02-01
Changed
- Replaced
heading
recipe in favor oftext
recipe. Please update your code snippets accordingly.
[0.32.0] - 2024-01-31
This release marks an important milestone for Park UI as we have upgraded to the new major version 2.0 of Ark UI. Please update your dependencies accordingly.
Changed
- Updated all code snippets to match the new Ark UI 2.0.0 API.
- Updated the
TagsInput
recipe to use the newItemPreview
part.
Fixed
- Fixed an issue that the initials in
Avatar
were not centered correctly.
[0.31.0] - 2024-01-26
Added
- Added new
Skeleton
component.
Fixed
- Resolved an issue with
SegmentControl
that theindicator
was sometimes not rendered correctly.
[0.30.1] - 2024-01-23
Fixed
- Fixed a problem where the
enclosed
variant of theTabs
component was rendered slightly too big
[0.30.0] - 2024-01-22
Added
- Added new
enclosed
variant to theTabs
component.
Fixed
- Resolved an issue with the
Card
component where the content would overflow the card.
[0.29.0] - 2024-01-19
We are excited to announce that in this release, we have revised several components to feature a closed Component API:
Avatar
Checkbox
Number Input
Pagination
Pin Input
Rating Group
Slider
Switch
For more information on the reasoning behind this change, please refer to the GitHub Issue.
Added
- Introduced styles for the
Progress
component (Preview). - Implemented support to render the
RatingGroup
in various colors. - Added a hover color to the items in
SegmentControl
. - Launched Storybooks for all components across each framework.
Changed
- Enhanced typings for all components, aiming for an improved TypeScript experience.
Fixed
- Fixed an issue in the
PinInput
component where the input width was incorrect. - Addressed a bug in the
Select
component where a disabled item incorrectly displayed a hover color.
[0.28.0] - 2024-01-01
Changed
- Renamed
placement
prop tovariant
inDrawer
component for better consistency with other CSS frameworks. - Renamed
Label
toFormLabel
- Revised
Avatar
component. Check out the docs for more details.
Fixed
- Resolved an issue that
Avatar
did not render correctly when no image was provided.
[0.27.0] - 2023-12-19
Added
- Added new
Button
variantsubtle
.
Fixed
- Fixed an issue with
RatingGroup
where the rating icons were not resized correctly.
[0.26.2] - 2023-12-15
Fixed
- Declared
@pandacss/dev
and@pandacss/types
as peer dependencies to avoid TypeScript errors.
Changed
- Updated import paths for more precise module referencing to help with tree-shaking.
// before
import { Avatar as ArkAvatar } from '@ark-ui/react'
// after
import { Avatar as ArkAvatar } from '@ark-ui/react/avatar'
[0.26.1] - 2023-12-14
Fixed
- Resolved an issue with ruby color values in semantic tokens
[0.26.0] - 2023-12-13
Changed
- Integrated latest version of Ark UI 1.2.0
- Due to an issue with Next.js and React Server Components, we've revised the export method for multi-part components.
// before
import { Avatar } from '~/components/ui/avatar'
// after
import * as Avatar from '~/components/ui/avatar'
function MyAvatar() {
return (
<Avatar.Root {...props}>
<Avatar.Fallback>PA</Avatar.Fallback>
<Avatar.Image src="https://i.pravatar.cc/300" alt="avatar" />
</Avatar.Root>
)
}
Fixed
- Resolved an issue where the exported component props were not typed correctly
// before
export type ButtonProps = typeof Button
// after
export type ButtonProps = HTMLStyledProps<typeof Button>
[0.25.0] - 2023-12-01
Added
- Added
Kbd
component. - Added
accent.text
to the list of semantic tokens. This token is used do display text in interactive elements like buttons and links. - Added support to render components with different colors. Pass the
colorPalette
prop to the component to change its visual style. See the example below for more details.
<Button colorPalette="red">Danger</Button>
Changed
- Resolved an issue with
Table
markup where thethead
element was not rendered correctly.
Fixed
- Resolved an issue that caused the
Dialog
to show up in the wrong position when the page was scrolled.
Removed
- Removed
border.accent
from the list of semantic tokens. Useaccent.default
orcolorPalette.default
instead.
[0.24.0] - 2023-11-21
Added
- Added
FileUpload
component.
Fixed
- Resolved an issue with the
Dialog
component where the scrollbar would cause a layout shift.
[0.23.0] - 2023-11-17
Added
- Added
focusVisible
styles to theCheckbox
component. - Added
disabled
styles to theAccordion
component.
[0.22.0] - 2023-11-09
With the introduction of Ark UI 1.0 support, this version implements significant changes, resulting in several breaking updates. Key component revisions include:
Accordion
, ColorPicker
, DatePicker
, Dialog
, RadioGroup
, SegmentGroup
, TagsInput
, Toast
, and ToggleGroup
.
Added
- Added
indeterminate
styles to theCheckbox
component.
Changed
- Revised
Slider
component.
Removed
RangeSlider
component has been removed in favor of theSlider
component.
[0.21.0] - 2023-11-05
Added
- Added
Link
component.
Changed
- Changed the background color of text that is selected by the user to match the
accent
color. - Revised
IconButton
component. - Revised
Code
component.
[0.20.0] - 2023-10-22
Added
- Added a default export to
@park-ui/panda-preset
for easier configuration. This will useneutral
as accent and gray color withborderRadius
ofsm
.
import { defineConfig } from '@pandacss/dev'
export default defineConfig({
presets: ['@pandacss/preset-base', '@park-ui/panda-preset'],
// ...
})
To customize the Park UI preset, use the createPreset
function as shown below:
import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@park-ui/panda-preset'
export default defineConfig({
presets: [
'@pandacss/preset-base',
createPreset({
accentColor: 'amber',
grayColor: 'sand',
borderRadius: 'none',
}),
],
// ...
})
Changed
- Tweaked semantic color tokens for a more consistent look and feel.
[0.19.0] - 2023-10-19
This is one of the biggest releases of Park UI so far. We've introduced a new way to configure presets, which will make
it easier to customize the theme to your needs. We've also replaced the default colors from @pandacss/preset-base
with
Radix Colors.
The overall look and feel of Park UI has been improved as well. We've revised the Card
and Drawer
components and
tweaked many of the existing components to make them more consistent.
We've also started to work on a Taildwind CSS plugin that will allow you to use Park UI as a plugin in your Tailwind CSS project. This is still a work in progress, but we're excited to share it with you soon.
In the light of these changes, we've renamed the @park-ui/presets
package to @park-ui/panda-preset
. We will continue
to support the old package name for the time being, but we recommend that you update your configuration to use the new
package name.
Added
createPreset
function introduced for more convenient and flexible preset configuration. See the examples below for more details.- Replaced default colors from
@pandacss/preset-base
with Radix Colors. This will allow us to provide more consistent colors when switching between light and dark mode.
Changed
- Revised
Card
component. - Revised
Drawer
component.
Examples
Before: Extending Theme
import { defineConfig } from '@pandacss/dev'
export default defineConfig({
presets: ['@pandacss/preset-base', '@park-ui/panda-preset'],
theme: {
extend: {
tokens: {
colors: {
grayPalette: {
25: { value: '#fcfcfc' },
// etc ..
},
},
},
semanticTokens: {
colors: {
accent: {
default: { value: { base: '{colors.indigo.500}', _dark: '{colors.indigo.200}' } },
// etc ..
},
},
},
},
},
// ...
})
After: Using createPreset
import { defineConfig } from '@pandacss/dev'
import { createPreset } from '@park-ui/panda-preset'
export default defineConfig({
presets: [
'@pandacss/preset-base',
createPreset({
accentColor: 'amber',
grayColor: 'sand',
borderRadius: 'md',
}),
],
// ...
})
[0.18.0] - 2023-10-12
Added
- Added support for component dot notation, e.g.,
<Accordion.Content />
alongside<AccordionContent />
.
Changed
- BREAKING: Use
@pandacss/preset-base
as preset instead of@pandacss/dev/presets
.
[0.17.0] - 2023-10-04
Added
- Added support for icons in the
Badge
component.
Changed
- Revised
Alert
component.
[0.16.0] - 2023-09-27
Added
- Added open and close animation to the
Tooltip
component. - Added
outline
variant andlg
size to theTabs
component.
Changed
- Improved
horizontal
andvertical
orientation inTabs
.
[0.15.0] - 2023-09-21
Added
- Added
ghost
variant to theCode
component.
Changed
- BREAKING: Renamed
button
variants to match their visual style:primary
tosolid
,secondary
tooutline
andtertiary
toghost
.
[0.14.0] - 2023-09-21
Added
- Added
Table
component.
[0.13.0] - 2023-09-19
Added
- Added
Icon
component. - Added
ghost
variant to theSelect
component.
Changed
- Revised
Menu
component.
[0.12.0] - 2023-09-14
Added
- Added open and close animations to the
Menu
component. - Added
ToggleGroup
component.
Changed
- Revised
NumberInput
component. - Revised
Select
component. - Revised
Combobox
component.
[0.11.0] - 2023-09-08
Changed
- Revised
PinInput
component.
[0.10.0] - 2023-09-03
Added
- Added support for the
disabled
state in theRadioGroup
,SegmentGroup
andTabs
components.
Changed
- Improved responsiveness of the
Tabs
component by usingoverflow: auto
[0.9.0] - 2023-08-29
Added
- Added
Card
component. - Added a
2xs
size token with a value of16rem
or256px
. - Added new variant
outline
to theRadioButtonGroup
component.
Changed
- Revised
Select
component to match the visual style of theInput
component.
Fixed
- Resolved an issue with the
Textarea
recipe where the resize handle would be hidden. - Resolved an issue with the
RadioButtonGroup
component where the radio buttons would be misaligned when the text was longer than the specified width.
[0.8.1] - 2023-08-17
Fixed
- Resolved a bug in the
Article
component where the font size didn't adjust appropriately in responsive modes.
[0.8.0] - 2023-08-17
Added
- Introduced a new
4.5
and14
token for enhancedspacing
andsizes
. - Added
Article
component to effortlessly style Markdown or CMS-generated HTML.
Changed
- Replaced
fontSize
withheight
andwidth
to set icon sizing inButton
for a greater compatibility with other icon libraries.
[0.7.1] - 2023-08-16
Changed
- Provided a dedicated recipe for the
RangeSlider
component instead of using theSlider
recipe.
[0.7.0] - 2023-08-15
Added
25
hue levels added for all grays palettes.- Added
none
and2xs
border radius tokens. - Added
{radii.l1}
,{radii.l2}
and{radii.l3}
to the semantic tokens border radii.
[0.6.0] - 2023-08-13
Added
- Added
Code
component to display inline code snippets. - Input elements like
Input
,Textarea
,NumberInput
etc. useaccent
color when focused.
Changed
- Renamed box shadow token
outline
toaccent
. - Renamed
tablist
part tolist
inTabs
recipe. - Changed the color of the column header in
DatePicker
tofg.subtle
.
Removed
- The
icon
prop has been removed fromIconButton
as it would affect compatibility with the Ark UIasChild
prop. Code snippets have been updated accordingly.
[0.5.0] - 2023-08-10
Added
- Added
DatePicker
component.
[0.4.0] - 2023-08-10
Added
- Added
label
styles forSelect
component.
Changed
- All relevant recipes now use the new defineSlotRecipe in Panda CSS to help organize the styles.
0.3.1 - 2023-08-09
Fixed
- Resolved an issue with bundling the
@park-ui/panda-preset
package.
[0.3.0] - 2023-08-09
Added
- Added
accent.default
,accent.emphasized
andaccent.fg
to the list of semantic tokens. Interative elements like buttons and links will use these colors for their background and foreground colors.
Changed
- All recipes now use semantic tokens for their colors.
- Changed
outline
fromneutral.500
toneutral.700
in light mode andneutral.500
toneutral.300
in dark mode to improve contrast.
Removed
- Removed
bg.accent
andfg.accent
from the list of semantic tokens.
0.2.0 - 2023-08-06
Added
- Added
Drawer
component. - Added new
easings
options:easings.default
,easings.emphasized-in
,easings.emphasized-out
.
Changed
- Changed animation for
Modal
components. - Changed
transitionTimingFunction
for all relevant components to the neweasings.default
. - Tweaked
bg.canvas
to be slightly darker inlight
mode.
0.1.0 - 2023-08-02
Added
- Initial Release of Park UI