@ark-ui/solid 1.0.1 → 1.2.0

package/CHANGELOG.md

@@ -6,6 +6,67 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+## [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
+
+- Added render function to the `NumberInput` component
+- Added `FileUpload` component
+
+### Changed
+
+- Revised the `ColorPicker` component. Check out the [documentation](https://ark-ui.com/docs/components/color-picker) for more information.
+
+### Fixed
+
+- Resolved a problem where the `Dialog.CloseTrigger` was assigned to the wrong `data-part`.
+- Fixed various issues for the `Toast` component that were caused by the API not being wrapped in an `Accessor`.
+
+```jsx
+// before
+const [Toaster, toast] = createToaster({
+  placement: 'top-end',
+  render(toast) {
+    return (
+      <Toast.Root>
+        <Toast.Title>{toast.title}</Toast.Title>
+        <Toast.Description>{toast.description}</Toast.Description>
+        <Toast.CloseTrigger>Close</Toast.CloseTrigger>
+      </Toast.Root>
+    )
+  },
+})
+
+// after
+const [Toaster, toast] = createToaster({
+  placement: 'top-end',
+  render(toast) {
+    return (
+      <Toast.Root>
+        <Toast.Title>{toast().title}</Toast.Title>
+        <Toast.Description>{toast().description}</Toast.Description>
+        <Toast.CloseTrigger>Close</Toast.CloseTrigger>
+      </Toast.Root>
+    )
+  },
+})
+```
+
 ## [1.0.1] - 2023-11-10
 
 ### Fixed
@@ -200,3 +261,7 @@ With the release of version 1.0.0, we are moving towards a more stable version o
 [0.10.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.10.0
 [0.10.1]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.10.1
 [0.11.0]: https://github.com/chakra-ui/ark/releases/tag/@ark-ui/solid@0.11.0
+
+```
+
+```

package/README.md

@@ -1,47 +1,46 @@
-# @ark-ui/solid
+# Welcome to Ark UI
 
-`@ark-ui/solid` is an open-source UI component library designed to make building high-quality, accessible web applications easier. The library focuses on providing low-level UI components with an emphasis on accessibility, customization, and developer experience.
+Ark UI is a headless, open-source UI library with over 30+ components designed for building reusable, scalable Design Systems. It supports a wide range of JavaScript frameworks, offering dedciated packages for each supported framework.
 
-## Key Features
+## Supported Frameworks
 
-- **Accessible**: Components in Ark UI are designed with accessibility in mind, adhering to WAI-ARIA design patterns and handling implementation details such as aria and role attributes, focus management, and keyboard navigation.
-- **Headless**: Components are shipped without styles, giving developers full control over styling.
-- **Customizable**: The open component architecture allows for customization and customization, providing granular access to each component part.
-- **Powered by state machines**: Predictable, simplified, and robust component behavior.
-- **Developer Experience**: The library provides a fully-typed API with a consistent and predictable experience.
+Ark UI is available for the following JavaScript frameworks:
+
+- **React**: `@ark-ui/react`
+- **Solid**: `@ark-ui/solid`
+- **Vue**: `@ark-ui/vue`
 
 ## Available Components
 
-At the moment, `@ark-ui/solid`offers the following components:
-
-- [Accordion](https://ark-ui.com/docs/solid/components/accordion)
-- [Avatar](https://ark-ui.com/docs/solid/components/avatar)
-- [Carousel](https://ark-ui.com/docs/solid/components/carousel)
-- [Checkbox](https://ark-ui.com/docs/solid/components/checkbox)
-- [Color Picker](https://ark-ui.com/docs/solid/components/color-picker)
-- [Combobox](https://ark-ui.com/docs/solid/components/combobox)
-- [Date Picker](https://ark-ui.com/docs/solid/components/date-picker)
-- [Dialog](https://ark-ui.com/docs/solid/components/dialog)
-- [Editable](https://ark-ui.com/docs/solid/components/editable)
-- [Hover Card](https://ark-ui.com/docs/solid/components/hover-card)
-- [Menu](https://ark-ui.com/docs/solid/components/menu)
-- [Number Input](https://ark-ui.com/docs/solid/components/number-input)
-- [Pagination](https://ark-ui.com/docs/solid/components/pagination)
-- [Pin Input](https://ark-ui.com/docs/solid/components/pin-input)
-- [Popover](https://ark-ui.com/docs/solid/components/popover)
-- [Pressable](https://ark-ui.com/docs/solid/components/pressable)
-- [Radio Group](https://ark-ui.com/docs/solid/components/radio-group)
-- [Range Slider](https://ark-ui.com/docs/solid/components/range-slider)
-- [Rating Group](https://ark-ui.com/docs/solid/components/rating-group)
-- [Segment Group](https://ark-ui.com/docs/solid/components/segment-group)
-- [Select](https://ark-ui.com/docs/solid/components/select)
-- [Slider](https://ark-ui.com/docs/solid/components/slider)
-- [Splitter](https://ark-ui.com/docs/solid/components/splitter)
-- [Switch](https://ark-ui.com/docs/solid/components/switch)
-- [Tabs](https://ark-ui.com/docs/solid/components/tabs)
-- [Tags Input](https://ark-ui.com/docs/solid/components/tags-input)
-- [Toast](https://ark-ui.com/docs/solid/components/toast)
-- [Tooltip](https://ark-ui.com/docs/solid/components/tooltip)
+- [Accordion](https://ark-ui.com/docs/components/accordion)
+- [Avatar](https://ark-ui.com/docs/components/avatar)
+- [Carousel](https://ark-ui.com/docs/components/carousel)
+- [Checkbox](https://ark-ui.com/docs/components/checkbox)
+- [Color Picker](https://ark-ui.com/docs/components/color-picker)
+- [Combobox](https://ark-ui.com/docs/components/combobox)
+- [Date Picker](https://ark-ui.com/docs/components/date-picker)
+- [Dialog](https://ark-ui.com/docs/components/dialog)
+- [Editable](https://ark-ui.com/docs/components/editable)
+- [File Upload](https://ark-ui.com/docs/components/file-upload)
+- [Hover Card](https://ark-ui.com/docs/components/hover-card)
+- [Menu](https://ark-ui.com/docs/components/menu)
+- [Number Input](https://ark-ui.com/docs/components/number-input)
+- [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)
+- [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)
+- [Segment Group](https://ark-ui.com/docs/components/segment-group)
+- [Select](https://ark-ui.com/docs/components/select)
+- [Slider](https://ark-ui.com/docs/components/slider)
+- [Splitter](https://ark-ui.com/docs/components/splitter)
+- [Switch](https://ark-ui.com/docs/components/switch)
+- [Tabs](https://ark-ui.com/docs/components/tabs)
+- [Tags Input](https://ark-ui.com/docs/components/tags-input)
+- [Toast](https://ark-ui.com/docs/components/toast)
+- [Toggle Group](https://ark-ui.com/docs/components/toggle-group)
+- [Tooltip](https://ark-ui.com/docs/components/tooltip)
 
 ## Installation
 
@@ -62,31 +61,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>
   )
 }
 ```
@@ -95,10 +97,14 @@ export const MySlider = () => {
 
 For more detailed documentation and examples, please visit the [official documentation](https://ark-ui.com/).
 
+## Roadmap
+
+You can request, vote for, and check upcoming features on our [roadmap](https://ark-ui.canny.io/).
+
 ## Contribution
 
-We welcome contributions to `@ark-ui/solid`. Please read our [contributing guidelines](https://github.com/chakra-ui/ark/blob/main/CONTRIBUTING.md) for more information on how to contribute.
+We welcome contributions to Ark UI. Please read our [contributing guidelines](https://github.com/chakra-ui/ark/blob/main/CONTRIBUTING.md) for more information on how to contribute.
 
-## Licence
+## License
 
 This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE).