@ark-ui/solid 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -6,6 +6,45 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [1.3.0] - 2024-01-17
+
+### Added
+
+- Added the `Progress` component.
+- Added `valueAsString` to `onValueChange` in `DatePicker` callback details
+- Exported change details typings, for example `AccordionValueChangeDetails` or `DialogOpenChangeDetails`
+
+### Changed
+
+- Changed `Popover.Description` tag from `div` to `p`
+- Changed `PopoverDescriptionProps` type from `div` to `p`
+- Replaced the styling props for indicator with CSS variables in `RadioGroup`, `SegmentGroup`, and `Tabs`.
+
+### Fixed
+
+- Fixed multiple rerenders on `Select` component using search params
+- Fixed reactivity with collection in `Select` and `Combobox` components
+- Fixed the issue where setting `disabled` on `Combobox` does not reflect in combobox item
+- Fix an issue that breaks the `Combobox` when clicking on the input while the menu is open
+- Fixed the issue where `DatePicker` initial value isn't set when using controlled context
+- Resolved an issue that `asChild` did not work properly with `svg` elements.
+- Resolved an issue that `Menu` option item could not be activated by keyboard
+
+## [1.2.0] - 2023-12-13
+
+### Added
+
+- Added the `ToastGroup` component.
+
+### Changed
+
+- Revised the `FileUpload` component. Check out the [documentation](https://ark-ui.com/docs/components/file-upload) for more information.
+
+### Fixed
+
+- Resolved a problem where `Select.Indicator` was assigned to the wrong `data-part`.
+- Fixed an issue where keyboard interactions within a submenu would bubble up to the parent `Menu`.
+
 ## [1.1.0] - 2023-11-21
 
 ### Added
@@ -13,7 +52,7 @@ description: All notable changes to this project will be documented in this file
 - Added render function to the `NumberInput` component
 - Added `FileUpload` component
 
-## Changed
+### Changed
 
 - Revised the `ColorPicker` component. Check out the [documentation](https://ark-ui.com/docs/components/color-picker) for more information.
 

package/README.md

@@ -28,6 +28,7 @@ Ark UI is available for the following JavaScript frameworks:
 - [Pagination](https://ark-ui.com/docs/components/pagination)
 - [Pin Input](https://ark-ui.com/docs/components/pin-input)
 - [Popover](https://ark-ui.com/docs/components/popover)
+- [Progress](https://ark-ui.com/docs/components/progress)
 - [Radio Group](https://ark-ui.com/docs/components/radio-group)
 - [Range Slider](https://ark-ui.com/docs/components/slider)
 - [Rating Group](https://ark-ui.com/docs/components/rating-group)
@@ -61,31 +62,34 @@ yarn add @ark-ui/solid
 To use a component from `@ark-ui/solid`, import it and include it in your application:
 
 ```tsx
-import {
-  Slider,
-  SliderControl,
-  SliderLabel,
-  SliderOutput,
-  SliderRange,
-  SliderThumb,
-  SliderTrack,
-} from '@ark-ui/solid'
+import { Slider, type SliderProps } from '@ark-ui/solid'
 import { createSignal } from 'solid-js'
 
-export const MySlider = () => {
-  const [value, setValue] = createSignal(30)
+export const MySlider = (props: SliderProps) => {
+  const [value, setValue] = createSignal([42])
 
   return (
-    <Slider min={-50} max={50} value={value()} onChange={(e) => setValue(e.value)}>
-      <SliderLabel>Label</SliderLabel>
-      <SliderOutput>{value}</SliderOutput>
-      <SliderControl>
-        <SliderTrack>
-          <SliderRange />
-        </SliderTrack>
-        <SliderThumb />
-      </SliderControl>
-    </Slider>
+    <Slider.Root
+      min={0}
+      max={100}
+      value={value()}
+      onValueChange={(e) => setValue(e.value)}
+      {...props}
+    >
+      <Slider.Label>Label</Slider.Label>
+      <Slider.ValueText />
+      <Slider.Control>
+        <Slider.Track>
+          <Slider.Range />
+        </Slider.Track>
+        <Slider.Thumb index={0} />
+      </Slider.Control>
+      <Slider.MarkerGroup>
+        <Slider.Marker value={25}>25</Slider.Marker>
+        <Slider.Marker value={50}>50</Slider.Marker>
+        <Slider.Marker value={75}>75</Slider.Marker>
+      </Slider.MarkerGroup>
+    </Slider.Root>
   )
 }
 ```