@ark-ui/solid 3.0.0-7 → 3.0.1

package/README.md

@@ -1,6 +1,8 @@
 # Welcome to Ark UI
 
-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.
+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.
 
 ## Supported Frameworks
 
@@ -12,37 +14,37 @@ Ark UI is available for the following JavaScript frameworks:
 
 ## Available Components
 
-- [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)
-- [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)
-- [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)
-- [Tree View](https://ark-ui.com/docs/components/tree-view)
+- [Accordion](https://ark-ui.com/solid/docs/components/accordion)
+- [Avatar](https://ark-ui.com/solid/docs/components/avatar)
+- [Carousel](https://ark-ui.com/solid/docs/components/carousel)
+- [Checkbox](https://ark-ui.com/solid/docs/components/checkbox)
+- [Color Picker](https://ark-ui.com/solid/docs/components/color-picker)
+- [Combobox](https://ark-ui.com/solid/docs/components/combobox)
+- [Date Picker](https://ark-ui.com/solid/docs/components/date-picker)
+- [Dialog](https://ark-ui.com/solid/docs/components/dialog)
+- [Editable](https://ark-ui.com/solid/docs/components/editable)
+- [File Upload](https://ark-ui.com/solid/docs/components/file-upload)
+- [Hover Card](https://ark-ui.com/solid/docs/components/hover-card)
+- [Menu](https://ark-ui.com/solid/docs/components/menu)
+- [Number Input](https://ark-ui.com/solid/docs/components/number-input)
+- [Pagination](https://ark-ui.com/solid/docs/components/pagination)
+- [Pin Input](https://ark-ui.com/solid/docs/components/pin-input)
+- [Popover](https://ark-ui.com/solid/docs/components/popover)
+- [Progress](https://ark-ui.com/solid/docs/components/progress)
+- [Radio Group](https://ark-ui.com/solid/docs/components/radio-group)
+- [Range Slider](https://ark-ui.com/solid/docs/components/slider)
+- [Rating Group](https://ark-ui.com/solid/docs/components/rating-group)
+- [Segment Group](https://ark-ui.com/solid/docs/components/segment-group)
+- [Select](https://ark-ui.com/solid/docs/components/select)
+- [Slider](https://ark-ui.com/solid/docs/components/slider)
+- [Splitter](https://ark-ui.com/solid/docs/components/splitter)
+- [Switch](https://ark-ui.com/solid/docs/components/switch)
+- [Tabs](https://ark-ui.com/solid/docs/components/tabs)
+- [Tags Input](https://ark-ui.com/solid/docs/components/tags-input)
+- [Toast](https://ark-ui.com/solid/docs/components/toast)
+- [Toggle Group](https://ark-ui.com/solid/docs/components/toggle-group)
+- [Tooltip](https://ark-ui.com/solid/docs/components/tooltip)
+- [Tree View](https://ark-ui.com/solid/docs/components/tree-view)
 
 ## Installation
 
@@ -97,7 +99,8 @@ export const MySlider = (props: SliderProps) => {
 
 ## Documentation
 
-For more detailed documentation and examples, please visit the [official documentation](https://ark-ui.com/).
+For more detailed documentation and examples, please visit the
+[official documentation](https://ark-ui.com/).
 
 ## Roadmap
 
@@ -105,8 +108,11 @@ You can request, vote for, and check upcoming features on our [roadmap](https://
 
 ## Contribution
 
-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.
+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.
 
 ## License
 
-This project is licensed under the terms of the [MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE).
+This project is licensed under the terms of the
+[MIT license](https://github.com/chakra-ui/ark/blob/main/LICENSE).

package/dist/cjs/index.js

@@ -201,7 +201,7 @@ const [EnvironmentContextProvider, useEnvironmentContext] = createContext({
   })
 });
 
-var _tmpl$$6 = /*#__PURE__*/web.template(`<span hidden>`);
+var _tmpl$$4 = /*#__PURE__*/web.template(`<span hidden>`);
 const EnvironmentProvider = props => {
   const [spanRef, setSpanRef] = solidJs.createSignal();
   const getRootNode = () => runIfFn(props.value) ?? spanRef()?.ownerDocument ?? document;
@@ -218,7 +218,7 @@ const EnvironmentProvider = props => {
           return !props.value;
         },
         get children() {
-          var _el$ = _tmpl$$6();
+          var _el$ = _tmpl$$4();
           web.use(setSpanRef, _el$);
           return _el$;
         }
@@ -1044,8 +1044,6 @@ const ColorPickerValueText = props => {
 const ColorPickerView = props => {
   const api = useColorPickerContext();
   const mergedProps = solid.mergeProps(() => anatomy.colorPickerAnatomy.build().view.attrs, props);
-
-  // TODO @segunadebayo
   return web.createComponent(solidJs.Show, {
     get when() {
       return api().format === props.format;
@@ -1337,14 +1335,14 @@ const DatePickerLabel = props => {
   return web.createComponent(ark.label, mergedProps);
 };
 
-var _tmpl$$5 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$3 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerMonthSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().monthSelectProps, props);
   return web.createComponent(ark.select, web.mergeProps(mergedProps, {
     get children() {
       return api().getMonths().map(month => (() => {
-        var _el$ = _tmpl$$5();
+        var _el$ = _tmpl$$3();
         web.insert(_el$, () => month.label);
         web.effect(() => _el$.value = month.value);
         return _el$;
@@ -1573,7 +1571,7 @@ const DatePickerViewTrigger = props => {
   return web.createComponent(ark.button, mergedProps);
 };
 
-var _tmpl$$4 = /*#__PURE__*/web.template(`<option>`);
+var _tmpl$$2 = /*#__PURE__*/web.template(`<option>`);
 const DatePickerYearSelect = props => {
   const api = useDatePickerContext();
   const mergedProps = solid.mergeProps(() => api().yearSelectProps, props);
@@ -1583,7 +1581,7 @@ const DatePickerYearSelect = props => {
         from: 1_000,
         to: 4_000
       }).map(year => (() => {
-        var _el$ = _tmpl$$4();
+        var _el$ = _tmpl$$2();
         _el$.value = year;
         web.insert(_el$, year);
         return _el$;
@@ -2578,7 +2576,7 @@ const usePagination = props => {
 };
 
 const PaginationRoot = props => {
-  const [usePaginationProps, localProps] = createSplitProps()(props, ['count', 'defaultPage', 'id', 'ids', 'onPageChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
+  const [usePaginationProps, localProps] = createSplitProps()(props, ['count', 'defaultPage', 'id', 'ids', 'onPageChange', 'onPageSizeChange', 'page', 'pageSize', 'siblingCount', 'translations', 'type']);
   const api = usePagination(usePaginationProps);
   const mergedProps = solid.mergeProps(() => api().rootProps, localProps);
   return web.createComponent(PaginationProvider, {
@@ -2955,16 +2953,18 @@ const RadioGroupItem = props => {
 
 const RadioGroupItemContext = props => props.children(useRadioGroupItemContext());
 
-var _tmpl$$3 = /*#__PURE__*/web.template(`<input>`);
 const RadioGroupItemControl = props => {
   const radioGroup = useRadioGroupContext();
   const itemProps = useRadioGroupItemPropsContext();
   const mergedProps = solid.mergeProps(() => radioGroup().getItemControlProps(itemProps), props);
-  return [web.createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$3();
-    web.spread(_el$, web.mergeProps(() => radioGroup().getItemHiddenInputProps(itemProps)), false, false);
-    return _el$;
-  })()];
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const RadioGroupItemHiddenInput = props => {
+  const radioGroup = useRadioGroupContext();
+  const itemProps = useRadioGroupItemPropsContext();
+  const mergedProps = solid.mergeProps(() => radioGroup().getItemHiddenInputProps(itemProps), props);
+  return web.createComponent(ark.input, mergedProps);
 };
 
 const RadioGroupItemText = props => {
@@ -3016,6 +3016,7 @@ var radioGroup = /*#__PURE__*/Object.freeze({
   Item: RadioGroupItem,
   ItemContext: RadioGroupItemContext,
   ItemControl: RadioGroupItemControl,
+  ItemHiddenInput: RadioGroupItemHiddenInput,
   ItemText: RadioGroupItemText,
   Label: RadioGroupLabel,
   Root: RadioGroupRoot
@@ -3149,16 +3150,18 @@ const SegmentGroupItem = props => {
 
 const SegmentGroupItemContext = props => props.children(useSegmentGroupItemContext());
 
-var _tmpl$$2 = /*#__PURE__*/web.template(`<input>`);
 const SegmentGroupItemControl = props => {
   const segmentGroup = useSegmentGroupContext();
   const itemProps = useSegmentGroupItemPropsContext();
   const mergedProps = solid.mergeProps(() => segmentGroup().getItemControlProps(itemProps), anatomy.segmentGroupAnatomy.build().itemControl.attrs, props);
-  return [web.createComponent(ark.div, mergedProps), (() => {
-    var _el$ = _tmpl$$2();
-    web.spread(_el$, web.mergeProps(() => segmentGroup().getItemHiddenInputProps(itemProps)), false, false);
-    return _el$;
-  })()];
+  return web.createComponent(ark.div, mergedProps);
+};
+
+const SegmentGroupItemHiddenInput = props => {
+  const segmentGroup = useSegmentGroupContext();
+  const itemProps = useSegmentGroupItemPropsContext();
+  const mergedProps = solid.mergeProps(() => segmentGroup().getItemHiddenInputProps(itemProps), props);
+  return web.createComponent(ark.input, mergedProps);
 };
 
 const SegmentGroupItemText = props => {
@@ -3210,6 +3213,7 @@ var segmentGroup = /*#__PURE__*/Object.freeze({
   Item: SegmentGroupItem,
   ItemContext: SegmentGroupItemContext,
   ItemControl: SegmentGroupItemControl,
+  ItemHiddenInput: SegmentGroupItemHiddenInput,
   ItemText: SegmentGroupItemText,
   Label: SegmentGroupLabel,
   Root: SegmentGroupRoot
@@ -3471,6 +3475,18 @@ const SliderControl = props => {
   return web.createComponent(ark.div, mergedProps);
 };
 
+const [SliderThumbPropsProvider, useSliderThumbPropsContext] = createContext({
+  hookName: 'useSliderThumbPropsContext',
+  providerName: '<SliderThumbPropsProvider />'
+});
+
+const SliderHiddenInput = props => {
+  const slider = useSliderContext();
+  const thumbProps = useSliderThumbPropsContext();
+  const mergedProps = solid.mergeProps(slider().getHiddenInputProps(thumbProps), props);
+  return web.createComponent(ark.input, mergedProps);
+};
+
 const SliderLabel = props => {
   const api = useSliderContext();
   const mergedProps = solid.mergeProps(() => api().labelProps, props);
@@ -3527,9 +3543,14 @@ const SliderRoot = props => {
 
 const SliderThumb = props => {
   const [thumbProps, localProps] = createSplitProps()(props, ['index', 'name']);
-  const api = useSliderContext();
-  const mergedProps = solid.mergeProps(() => api().getThumbProps(thumbProps), localProps);
-  return web.createComponent(ark.div, mergedProps);
+  const slider = useSliderContext();
+  const mergedProps = solid.mergeProps(() => slider().getThumbProps(thumbProps), localProps);
+  return web.createComponent(SliderThumbPropsProvider, {
+    value: thumbProps,
+    get children() {
+      return web.createComponent(ark.div, mergedProps);
+    }
+  });
 };
 
 const SliderTrack = props => {
@@ -3552,6 +3573,7 @@ var slider = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Context: SliderContext,
   Control: SliderControl,
+  HiddenInput: SliderHiddenInput,
   Label: SliderLabel,
   Marker: SliderMarker,
   MarkerGroup: SliderMarkerGroup,
@@ -4602,6 +4624,7 @@ exports.RadioGroupIndicator = RadioGroupIndicator;
 exports.RadioGroupItem = RadioGroupItem;
 exports.RadioGroupItemContext = RadioGroupItemContext;
 exports.RadioGroupItemControl = RadioGroupItemControl;
+exports.RadioGroupItemHiddenInput = RadioGroupItemHiddenInput;
 exports.RadioGroupItemText = RadioGroupItemText;
 exports.RadioGroupLabel = RadioGroupLabel;
 exports.RadioGroupRoot = RadioGroupRoot;
@@ -4619,6 +4642,7 @@ exports.SegmentGroupIndicator = SegmentGroupIndicator;
 exports.SegmentGroupItem = SegmentGroupItem;
 exports.SegmentGroupItemContext = SegmentGroupItemContext;
 exports.SegmentGroupItemControl = SegmentGroupItemControl;
+exports.SegmentGroupItemHiddenInput = SegmentGroupItemHiddenInput;
 exports.SegmentGroupItemText = SegmentGroupItemText;
 exports.SegmentGroupLabel = SegmentGroupLabel;
 exports.SegmentGroupRoot = SegmentGroupRoot;
@@ -4643,6 +4667,7 @@ exports.SelectValueText = SelectValueText;
 exports.Slider = slider;
 exports.SliderContext = SliderContext;
 exports.SliderControl = SliderControl;
+exports.SliderHiddenInput = SliderHiddenInput;
 exports.SliderLabel = SliderLabel;
 exports.SliderMarker = SliderMarker;
 exports.SliderMarkerGroup = SliderMarkerGroup;