@ark-ui/solid 1.2.0 → 1.3.0

package/esm/index.js

@@ -19,6 +19,7 @@ import * as numberInput from '@zag-js/number-input';
 import * as pagination from '@zag-js/pagination';
 import * as pinInput from '@zag-js/pin-input';
 import * as popover from '@zag-js/popover';
+import * as progress from '@zag-js/progress';
 import * as radio from '@zag-js/radio-group';
 import * as rating from '@zag-js/rating-group';
 import * as select from '@zag-js/select';
@@ -74,6 +75,7 @@ const spread = (node, props) => {
   const nodeEvents = Object.fromEntries(Object.keys(node).filter(prop => prop.startsWith('$$'))
   // @ts-expect-error - fix later
   .map(prop => [prop, node[prop]]));
+  const isSVG = node instanceof SVGElement;
   const childProps = createMemo(() => mapProps(props, (key, value) => {
     const eventKey = getEventKey(key);
 
@@ -92,14 +94,14 @@ const spread = (node, props) => {
 
     // class composition
     if (key === 'class') {
-      return [node.className, value].filter(Boolean).join(' ');
+      return [node.classList.toString(), value].filter(Boolean).join(' ');
     }
 
     // don't override existing child attributes
     if (node.hasAttribute(key)) return;
     return value;
   }));
-  spread$1(node, mergeProps(childProps));
+  spread$1(node, mergeProps(childProps), isSVG);
 };
 
 const booleans = ['allowfullscreen', 'async', 'autofocus', 'autoplay', 'checked', 'controls', 'default', 'disabled', 'formnovalidate', 'hidden', 'indeterminate', 'ismap', 'loop', 'multiple', 'muted', 'nomodule', 'novalidate', 'open', 'playsinline', 'readonly', 'required', 'reversed', 'seamless', 'selected'];
@@ -371,7 +373,7 @@ function withAsChild(Component) {
     const getChildren = children(() => ssrSpread(localProps.children, restProps));
     createEffect(() => {
       const children = getChildren();
-      if (children instanceof HTMLElement) {
+      if (children instanceof HTMLElement || children instanceof SVGElement) {
         spread(children, restProps);
       }
     });
@@ -1127,14 +1129,14 @@ const [ComboboxProvider, useComboboxContext] = createContext({
 
 const useCombobox = props => {
   const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = combobox.collection(collectionOptions);
+  const collection = () => combobox.collection(collectionOptions);
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = () => mergeProps$2({
     id: createUniqueId(),
     getRootNode,
-    collection
+    collection: collection()
   }, rest);
-  const [state, send] = useMachine(combobox.machine(context), {
+  const [state, send] = useMachine(combobox.machine(context()), {
     context
   });
   return createMemo(() => combobox.connect(state, send, normalizeProps));
@@ -2569,7 +2571,7 @@ const PopoverContent = props => {
 const PopoverDescription = props => {
   const api = usePopoverContext();
   const mergedProps = mergeProps$2(() => api().descriptionProps, props);
-  return createComponent(ark.div, mergedProps);
+  return createComponent(ark.p, mergedProps);
 };
 
 const PopoverIndicator = props => {
@@ -2623,6 +2625,106 @@ const Popover = Object.assign(Popover$1, {
   Trigger: PopoverTrigger
 });
 
+const [ProgressProvider, useProgressContext] = createContext({
+  hookName: 'useProgressContext',
+  providerName: '<ProgressProvider />'
+});
+
+const useProgress = props => {
+  const getRootNode = useEnvironmentContext();
+  const context = mergeProps$2({
+    id: createUniqueId(),
+    getRootNode
+  }, props);
+  const [state, send] = useMachine(progress.machine(context), {
+    context
+  });
+  return createMemo(() => progress.connect(state, send, normalizeProps));
+};
+
+const Progress$1 = props => {
+  const [progressProps, localProps] = createSplitProps()(props, ['dir', 'getRootNode', 'id', 'max', 'min', 'orientation', 'translations', 'value']);
+  const api = useProgress(progressProps);
+  const mergedProps = mergeProps$2(() => api().rootProps, localProps);
+  const getChildren = () => runIfFn(localProps.children, api);
+  return createComponent(ProgressProvider, {
+    value: api,
+    get children() {
+      return createComponent(ark.div, mergeProps$1(mergedProps, {
+        get children() {
+          return getChildren();
+        }
+      }));
+    }
+  });
+};
+
+const ProgressCircle = props => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps$2(() => api().circleProps, props);
+  return createComponent(ark.svg, mergedProps);
+};
+
+const ProgressCircleRange = props => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps$2(() => api().circleRangeProps, props);
+  return createComponent(ark.circle, mergedProps);
+};
+
+const ProgressCircleTrack = props => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps$2(() => api().circleTrackProps, props);
+  return createComponent(ark.circle, mergedProps);
+};
+
+const ProgressIndicator = props => {
+  const [state, localProps] = createSplitProps()(props, ['state']);
+  const api = useProgressContext();
+  const mergedProps = mergeProps$2(() => api().getIndicatorProps(state), localProps);
+  return createComponent(ark.span, mergedProps);
+};
+
+const ProgressLabel = props => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps$2(() => api().labelProps, props);
+  return createComponent(ark.label, mergedProps);
+};
+
+const ProgressRange = props => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps$2(() => api().rangeProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ProgressTrack = props => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps$2(() => api().trackProps, props);
+  return createComponent(ark.div, mergedProps);
+};
+
+const ProgressValueText = props => {
+  const api = useProgressContext();
+  const mergedProps = mergeProps$2(() => api().valueTextProps, props);
+  const getChildren = () => runIfFn(props.children, () => api().valueAsString);
+  return createComponent(ark.span, mergeProps$1(mergedProps, {
+    get children() {
+      return getChildren() || api().valueAsString;
+    }
+  }));
+};
+
+const Progress = Object.assign(Progress$1, {
+  Root: Progress$1,
+  Label: ProgressLabel,
+  Track: ProgressTrack,
+  Range: ProgressRange,
+  ValueText: ProgressValueText,
+  Indicator: ProgressIndicator,
+  Circle: ProgressCircle,
+  CircleTrack: ProgressCircleTrack,
+  CircleRange: ProgressCircleRange
+});
+
 const [RadioGroupProvider, useRadioGroupContext] = createContext({
   hookName: 'useRadioGroupContext',
   providerName: '<RadioGroupProvider />'
@@ -2896,14 +2998,14 @@ const [SelectProvider, useSelectContext] = createContext({
 
 const useSelect = props => {
   const [collectionOptions, rest] = createSplitProps()(props, ['isItemDisabled', 'itemToValue', 'itemToString', 'items']);
-  const collection = select.collection(collectionOptions);
+  const collection = () => select.collection(collectionOptions);
   const getRootNode = useEnvironmentContext();
-  const context = mergeProps$2({
+  const context = () => mergeProps$2({
     id: createUniqueId(),
     getRootNode,
-    collection
+    collection: collection()
   }, rest);
-  const [state, send] = useMachine(select.machine(context), {
+  const [state, send] = useMachine(select.machine(context()), {
     context
   });
   return createMemo(() => select.connect(state, send, normalizeProps));
@@ -3732,5 +3834,5 @@ const Tooltip = Object.assign(Tooltip$1, {
   Trigger: TooltipTrigger
 });
 
-export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, Avatar, AvatarFallback, AvatarImage, Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport, Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger, Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger, Environment, FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger, HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardTrigger, Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuSeparator, MenuTrigger, MenuTriggerItem, NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber, Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PinInput, PinInputControl, PinInputInput, PinInputLabel, Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger, Presence, PresencePropsProvider, PresenceProvider, RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText, Splitter, SplitterPanel, SplitterResizeTrigger, Switch, SwitchControl, SwitchLabel, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, Tabs, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipTrigger, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, useComboboxContext, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, useDialogContext, useEditableContext, useEnvironmentContext, useFileUploadContext, useHoverCardContext, useMenuContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, usePresence, usePresenceContext, usePresencePropsContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToggleGroupContext, useTooltipContext };
+export { Accordion, AccordionItem, AccordionItemContent, AccordionItemIndicator, AccordionItemTrigger, Avatar, AvatarFallback, AvatarImage, Carousel, CarouselControl, CarouselIndicator, CarouselIndicatorGroup, CarouselItem, CarouselItemGroup, CarouselNextTrigger, CarouselPrevTrigger, CarouselViewport, Checkbox, CheckboxControl, CheckboxIndicator, CheckboxLabel, ColorPicker, ColorPickerArea, ColorPickerAreaBackground, ColorPickerAreaThumb, ColorPickerChannelInput, ColorPickerChannelSlider, ColorPickerChannelSliderThumb, ColorPickerChannelSliderTrack, ColorPickerContent, ColorPickerControl, ColorPickerEyeDropperTrigger, ColorPickerFormatSelect, ColorPickerFormatTrigger, ColorPickerLabel, ColorPickerPositioner, ColorPickerSwatch, ColorPickerSwatchGroup, ColorPickerSwatchIndicator, ColorPickerSwatchTrigger, ColorPickerTransparencyGrid, ColorPickerTrigger, ColorPickerValueText, ColorPickerView, Combobox, ComboboxClearTrigger, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxItemGroup, ComboboxItemGroupLabel, ComboboxItemIndicator, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, DatePicker, DatePickerClearTrigger, DatePickerContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTable, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTableRow, DatePickerTrigger, DatePickerView, DatePickerViewControl, DatePickerViewTrigger, DatePickerYearSelect, Dialog, DialogBackdrop, DialogCloseTrigger, DialogContent, DialogDescription, DialogPositioner, DialogTitle, DialogTrigger, Editable, EditableArea, EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableSubmitTrigger, Environment, FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadTrigger, HoverCard, HoverCardArrow, HoverCardArrowTip, HoverCardContent, HoverCardPositioner, HoverCardTrigger, Menu, MenuArrow, MenuArrowTip, MenuContent, MenuContextTrigger, MenuItem, MenuItemGroup, MenuItemGroupLabel, MenuOptionItem, MenuPositioner, MenuSeparator, MenuTrigger, MenuTriggerItem, NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber, Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, PinInput, PinInputControl, PinInputInput, PinInputLabel, Popover, PopoverAnchor, PopoverArrow, PopoverArrowTip, PopoverCloseTrigger, PopoverContent, PopoverDescription, PopoverIndicator, PopoverPositioner, PopoverTitle, PopoverTrigger, Presence, PresencePropsProvider, PresenceProvider, Progress, ProgressCircle, ProgressCircleRange, ProgressCircleTrack, ProgressIndicator, ProgressLabel, ProgressRange, ProgressTrack, ProgressValueText, RadioGroup, RadioGroupItem, RadioGroupItemControl, RadioGroupItemText, RadioGroupLabel, RatingGroup, RatingGroupControl, RatingGroupItem, RatingGroupLabel, SegmentGroup, SegmentGroupIndicator, SegmentGroupItem, SegmentGroupItemControl, SegmentGroupItemText, SegmentGroupLabel, Select, SelectClearTrigger, SelectContent, SelectControl, SelectIndicator, SelectItem, SelectItemGroup, SelectItemGroupLabel, SelectItemIndicator, SelectItemText, SelectLabel, SelectPositioner, SelectTrigger, SelectValueText, Slider, SliderControl, SliderLabel, SliderMarker, SliderMarkerGroup, SliderRange, SliderThumb, SliderTrack, SliderValueText, Splitter, SplitterPanel, SplitterResizeTrigger, Switch, SwitchControl, SwitchLabel, SwitchThumb, TabContent, TabIndicator, TabList, TabTrigger, Tabs, TagsInput, TagsInputClearTrigger, TagsInputControl, TagsInputInput, TagsInputItem, TagsInputItemDeleteTrigger, TagsInputItemInput, TagsInputItemText, TagsInputLabel, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipTrigger, ark, createToaster, splitPresenceProps, useAccordionContext, useAccordionItemContext, useAvatarContext, useCarouselContext, useCheckboxContext, useColorPickerAreaContext, useColorPickerChannelSliderContext, useColorPickerContext, useComboboxContext, useDatePickerContext, useDatePickerTableCellContext, useDatePickerTableContext, useDatePickerViewContext, useDialogContext, useEditableContext, useEnvironmentContext, useFileUploadContext, useHoverCardContext, useMenuContext, useNumberInputContext, usePaginationContext, usePinInputContext, usePopoverContext, usePresence, usePresenceContext, usePresencePropsContext, useProgressContext, useRadioGroupContext, useRadioGroupItemContext, useRatingGroupContext, useRatingGroupItemContext, useSegmentGroupContext, useSegmentGroupItemContext, useSelectContext, useSelectItemContext, useSliderContext, useSplitterContext, useSwitchContext, useTabsContext, useTagsInputContext, useTagsInputItemContext, useToggleGroupContext, useTooltipContext };
 //# sourceMappingURL=index.js.map