@ark-ui/solid - npm Package Compare versions

Comparing version 0.0.0-rc-20221129135205 to 0.0.0-rc-20221129180638

dist/index.cjs.js

@@ -91,2 +91,6 @@ "use strict";
   RadioLabel: () => RadioLabel,
+  Rating: () => Rating,
+  RatingGroup: () => RatingGroup,
+  RatingItem: () => RatingItem,
+  RatingLabel: () => RatingLabel,
   Slider: () => Slider,
@@ -129,2 +133,3 @@ SliderControl: () => SliderControl,
   useRadioGroup: () => useRadioGroup,
+  useRating: () => useRating,
   useSlider: () => useSlider,
@@ -400,5 +405,5 @@ useTabs: () => useTabs,
   (0, import_solid_js10.createEffect)(() => {
-    const children12 = getChildren();
-    if (children12 instanceof Element) {
-      (0, import_web2.spread)(children12, dialog2().triggerProps);
+    const children14 = getChildren();
+    if (children14 instanceof Element) {
+      (0, import_web2.spread)(children14, dialog2().triggerProps);
     }
@@ -580,5 +585,5 @@ });
   (0, import_solid_js15.createEffect)(() => {
-    const children12 = getChildren();
-    if (children12 instanceof Element) {
-      (0, import_web4.spread)(children12, hoverCard2().triggerProps);
+    const children14 = getChildren();
+    if (children14 instanceof Element) {
+      (0, import_web4.spread)(children14, hoverCard2().triggerProps);
     }
@@ -702,4 +707,3 @@ });
   const view = () => (0, import_solid_js18.children)(() => runIfFn(local.children, pagination2()));
-  const mergedProps = (0, import_solid_js18.mergeProps)(pagination2().rootProps, navProps);
-  return <PaginationProvider value={pagination2}><ark.nav {...mergedProps}>{view()}</ark.nav></PaginationProvider>;
+  return <PaginationProvider value={pagination2}><ark.nav {...pagination2().rootProps} {...navProps}>{view()}</ark.nav></PaginationProvider>;
 };
@@ -724,6 +728,6 @@
   (0, import_solid_js19.createEffect)(() => {
-    const children12 = getChildren();
-    if (children12 instanceof Element) {
+    const children14 = getChildren();
+    if (children14 instanceof Element) {
       (0, import_web5.spread)(
-        children12,
+        children14,
         pagination2().getItemProps({
@@ -749,5 +753,5 @@ type: "page",
   (0, import_solid_js20.createEffect)(() => {
-    const children12 = getChildren();
-    if (children12 instanceof Element) {
-      (0, import_web6.spread)(children12, pagination2().nextItemProps);
+    const children14 = getChildren();
+    if (children14 instanceof Element) {
+      (0, import_web6.spread)(children14, pagination2().nextItemProps);
     }
@@ -765,5 +769,5 @@ });
   (0, import_solid_js21.createEffect)(() => {
-    const children12 = getChildren();
-    if (children12 instanceof Element) {
-      (0, import_web7.spread)(children12, pagination2().prevItemProps);
+    const children14 = getChildren();
+    if (children14 instanceof Element) {
+      (0, import_web7.spread)(children14, pagination2().prevItemProps);
     }
@@ -924,5 +928,5 @@ });
   (0, import_solid_js25.createEffect)(() => {
-    const children12 = getChildren();
-    if (children12 instanceof Element) {
-      (0, import_web8.spread)(children12, popover2().triggerProps);
+    const children14 = getChildren();
+    if (children14 instanceof Element) {
+      (0, import_web8.spread)(children14, popover2().triggerProps);
     }
@@ -1053,2 +1057,82 @@ });
 
+// src/rating/rating.tsx
+var import_solid_js29 = require("solid-js");
+
+// src/rating/rating-context.ts
+var [RatingProvider, useRatingContext] = createContext({
+  hookName: "useRatingContext",
+  providerName: "<RatingProvider />"
+});
+
+// src/rating/use-rating.tsx
+var rating = __toESM(require("@zag-js/rating"));
+var import_solid13 = require("@zag-js/solid");
+var import_solid_js28 = require("solid-js");
+var useRating = (props) => {
+  const initialContext = (0, import_solid_js28.mergeProps)({ id: (0, import_solid_js28.createUniqueId)(), value: props.defaultValue }, props);
+  const context = (0, import_solid_js28.mergeProps)(initialContext, { value: props.value });
+  const [state, send] = (0, import_solid13.useMachine)(rating.machine(initialContext), { context });
+  return (0, import_solid_js28.createMemo)(() => rating.connect(state, send, import_solid13.normalizeProps));
+};
+
+// src/rating/rating.tsx
+var Rating = (props) => {
+  const [useRatingProps, inputProps] = (0, import_solid_js29.splitProps)(props, [
+    "allowHalf",
+    "autoFocus",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "form",
+    "getRootNode",
+    "id",
+    "ids",
+    "max",
+    "name",
+    "onChange",
+    "onHover",
+    "readOnly",
+    "translations",
+    "value"
+  ]);
+  const rating2 = useRating(useRatingProps);
+  return <RatingProvider value={rating2}><ark.div {...rating2().rootProps}>
+    {props.children}
+    <ark.input {...rating2().inputProps} {...inputProps} />
+  </ark.div></RatingProvider>;
+};
+
+// src/rating/rating-group.tsx
+var import_solid_js30 = require("solid-js");
+var RatingGroup = (props) => {
+  const [localProps, divProps] = createSplitProps()(props, ["renderIcon", "children"]);
+  const rating2 = useRatingContext();
+  const view = (0, import_solid_js30.children)(() => runIfFn(localProps.children, rating2));
+  return <ark.div {...rating2().itemGroupProps} {...divProps}>{view()}</ark.div>;
+};
+
+// src/rating/rating-item.tsx
+var import_solid_js31 = require("solid-js");
+
+// src/rating/rating-item-context.ts
+var [RatingItemProvider, useRatingItemContext] = createContext({
+  hookName: "useRatingItemContext",
+  providerName: "<RatingItemProvider />"
+});
+
+// src/rating/rating-item.tsx
+var RatingItem = (props) => {
+  const [localProps, spanProps] = createSplitProps()(props, ["index", "children"]);
+  const rating2 = useRatingContext();
+  const ratingState = rating2().getRatingState(localProps.index);
+  const icon = (0, import_solid_js31.children)(() => runIfFn(localProps.children, ratingState));
+  return <ark.span {...rating2().getItemProps({ index: localProps.index })} {...spanProps}><RatingItemProvider value={ratingState}>{icon()}</RatingItemProvider></ark.span>;
+};
+
+// src/rating/rating-label.tsx
+var RatingLabel = (props) => {
+  const rating2 = useRatingContext();
+  return <ark.label {...rating2().labelProps} {...props} />;
+};
+
 // src/slider/slider-context.ts
@@ -1062,8 +1146,8 @@ var [SliderProvider, useSliderContext] = createContext({
 var slider = __toESM(require("@zag-js/slider"));
-var import_solid13 = require("@zag-js/solid");
-var import_solid_js28 = require("solid-js");
+var import_solid14 = require("@zag-js/solid");
+var import_solid_js32 = require("solid-js");
 var useSlider = (props) => {
-  const context = (0, import_solid_js28.mergeProps)({ id: (0, import_solid_js28.createUniqueId)() }, props);
-  const [state, send] = (0, import_solid13.useMachine)(slider.machine(context), { context });
-  return (0, import_solid_js28.createMemo)(() => slider.connect(state, send, import_solid13.normalizeProps));
+  const context = (0, import_solid_js32.mergeProps)({ id: (0, import_solid_js32.createUniqueId)() }, props);
+  const [state, send] = (0, import_solid14.useMachine)(slider.machine(context), { context });
+  return (0, import_solid_js32.createMemo)(() => slider.connect(state, send, import_solid14.normalizeProps));
 };
@@ -1186,10 +1270,10 @@
 // src/tabs/use-tabs.ts
-var import_solid14 = require("@zag-js/solid");
+var import_solid15 = require("@zag-js/solid");
 var tabs = __toESM(require("@zag-js/tabs"));
-var import_solid_js29 = require("solid-js");
+var import_solid_js33 = require("solid-js");
 var useTabs = (props) => {
-  const initialContext = (0, import_solid_js29.mergeProps)({ id: (0, import_solid_js29.createUniqueId)(), value: props.defaultValue }, props);
-  const context = (0, import_solid_js29.mergeProps)(initialContext, { value: props.value });
-  const [state, send] = (0, import_solid14.useMachine)(tabs.machine(initialContext), { context });
-  return (0, import_solid_js29.createMemo)(() => tabs.connect(state, send, import_solid14.normalizeProps));
+  const initialContext = (0, import_solid_js33.mergeProps)({ id: (0, import_solid_js33.createUniqueId)(), value: props.defaultValue }, props);
+  const context = (0, import_solid_js33.mergeProps)(initialContext, { value: props.value });
+  const [state, send] = (0, import_solid15.useMachine)(tabs.machine(initialContext), { context });
+  return (0, import_solid_js33.createMemo)(() => tabs.connect(state, send, import_solid15.normalizeProps));
 };
@@ -1226,8 +1310,8 @@
 // src/toast/use-toast-item.ts
-var import_solid15 = require("@zag-js/solid");
+var import_solid16 = require("@zag-js/solid");
 var toast = __toESM(require("@zag-js/toast"));
-var import_solid_js30 = require("solid-js");
+var import_solid_js34 = require("solid-js");
 var useToastItem = (props) => {
-  const [state, send] = (0, import_solid15.useActor)(props.toast);
-  return (0, import_solid_js30.createMemo)(() => toast.connect(state, send, import_solid15.normalizeProps));
+  const [state, send] = (0, import_solid16.useActor)(props.toast);
+  return (0, import_solid_js34.createMemo)(() => toast.connect(state, send, import_solid16.normalizeProps));
 };
@@ -1255,8 +1339,8 @@
 // src/toast/toast-group.tsx
-var import_solid_js32 = require("solid-js");
+var import_solid_js36 = require("solid-js");
 
 // src/toast/toast-provider.tsx
-var import_solid16 = require("@zag-js/solid");
+var import_solid17 = require("@zag-js/solid");
 var toast2 = __toESM(require("@zag-js/toast"));
-var import_solid_js31 = require("solid-js");
+var import_solid_js35 = require("solid-js");
 var [ToastContextProvider, useToast] = createContext();
@@ -1267,5 +1351,5 @@ var ToastProvider = (props) => {
   ]);
-  const context = (0, import_solid_js31.mergeProps)({ id: (0, import_solid_js31.createUniqueId)() }, machineProps);
-  const [state, send] = (0, import_solid16.useMachine)(toast2.group.machine(context));
-  const api = (0, import_solid_js31.createMemo)(() => toast2.group.connect(state, send, import_solid16.normalizeProps));
+  const context = (0, import_solid_js35.mergeProps)({ id: (0, import_solid_js35.createUniqueId)() }, machineProps);
+  const [state, send] = (0, import_solid17.useMachine)(toast2.group.machine(context));
+  const api = (0, import_solid_js35.createMemo)(() => toast2.group.connect(state, send, import_solid17.normalizeProps));
   return <ToastContextProvider value={api}>{toastProviderParams.children}</ToastContextProvider>;
@@ -1281,3 +1365,3 @@ };
   const toast3 = useToast();
-  const view = () => (0, import_solid_js32.children)(
+  const view = () => (0, import_solid_js36.children)(
     () => runIfFn(
@@ -1292,6 +1376,6 @@ toastGroupParams.children,
 // src/toast/toast-placements.tsx
-var import_solid_js33 = require("solid-js");
+var import_solid_js37 = require("solid-js");
 var ToastPlacements = (props) => {
   const toast3 = useToast();
-  const view = () => (0, import_solid_js33.children)(() => runIfFn(props.children, Object.keys(toast3().toastsByPlacement)));
+  const view = () => (0, import_solid_js37.children)(() => runIfFn(props.children, Object.keys(toast3().toastsByPlacement)));
   return <>{view}</>;
@@ -1313,9 +1397,9 @@ };
 // src/tooltip/use-tooltip.ts
-var import_solid17 = require("@zag-js/solid");
+var import_solid18 = require("@zag-js/solid");
 var tooltip = __toESM(require("@zag-js/tooltip"));
-var import_solid_js34 = require("solid-js");
+var import_solid_js38 = require("solid-js");
 var useTooltip = (props) => {
-  const context = (0, import_solid_js34.mergeProps)({ id: (0, import_solid_js34.createUniqueId)() }, props);
-  const [state, send] = (0, import_solid17.useMachine)(tooltip.machine(context), { context });
-  return (0, import_solid_js34.createMemo)(() => tooltip.connect(state, send, import_solid17.normalizeProps));
+  const context = (0, import_solid_js38.mergeProps)({ id: (0, import_solid_js38.createUniqueId)() }, props);
+  const [state, send] = (0, import_solid18.useMachine)(tooltip.machine(context), { context });
+  return (0, import_solid_js38.createMemo)(() => tooltip.connect(state, send, import_solid18.normalizeProps));
 };
@@ -1363,18 +1447,18 @@
 // src/tooltip/tooltip-positioner.tsx
-var import_solid_js35 = require("solid-js");
+var import_solid_js39 = require("solid-js");
 var TooltipPositioner = (props) => {
   const tooltip2 = useTooltipContext();
-  return <import_solid_js35.Show when={tooltip2().isOpen}><ark.div {...tooltip2().positionerProps} {...props} /></import_solid_js35.Show>;
+  return <import_solid_js39.Show when={tooltip2().isOpen}><ark.div {...tooltip2().positionerProps} {...props} /></import_solid_js39.Show>;
 };
 
 // src/tooltip/tooltip-trigger.tsx
-var import_solid_js36 = require("solid-js");
+var import_solid_js40 = require("solid-js");
 var import_web9 = require("solid-js/web");
 var TooltipTrigger = (props) => {
   const tooltip2 = useTooltipContext();
-  const getChildren = (0, import_solid_js36.children)(() => props.children);
-  (0, import_solid_js36.createEffect)(() => {
-    const children12 = getChildren();
-    if (children12 instanceof Element) {
-      (0, import_web9.spread)(children12, tooltip2().triggerProps);
+  const getChildren = (0, import_solid_js40.children)(() => props.children);
+  (0, import_solid_js40.createEffect)(() => {
+    const children14 = getChildren();
+    if (children14 instanceof Element) {
+      (0, import_web9.spread)(children14, tooltip2().triggerProps);
     }
@@ -1448,2 +1532,6 @@ });
   RadioLabel,
+  Rating,
+  RatingGroup,
+  RatingItem,
+  RatingLabel,
   Slider,
@@ -1486,2 +1574,3 @@ SliderControl,
   useRadioGroup,
+  useRating,
   useSlider,
@@ -1488,0 +1577,0 @@ useTabs,

dist/index.d.ts

@@ -18,8 +18,10 @@ import * as solid_js from 'solid-js';
 import { connect } from '@zag-js/radio';
+import * as rating from '@zag-js/rating';
+import { connect as connect$1 } from '@zag-js/rating';
+import { JSX as JSX$1 } from 'solid-js/jsx-runtime';
 import * as slider from '@zag-js/slider';
 import * as tabs from '@zag-js/tabs';
-import { connect as connect$1 } from '@zag-js/tabs';
+import { connect as connect$2 } from '@zag-js/tabs';
 import * as toast from '@zag-js/toast';
 import { Placement, Service } from '@zag-js/toast';
-import { JSX as JSX$1 } from 'solid-js/jsx-runtime';
 import * as tooltip from '@zag-js/tooltip';
@@ -525,2 +527,51 @@
 
+type UseRatingProps = Optional<rating.Context, 'id'> & {
+    defaultValue?: rating.Context['value'];
+};
+type UseRatingReturn = ReturnType<typeof useRating>;
+declare const useRating: (props: UseRatingProps) => solid_js.Accessor<{
+    isHovering: boolean;
+    value: number;
+    hoveredValue: number;
+    size: number;
+    sizeArray: number[];
+    getRatingState(index: number): {
+        isEqual: boolean;
+        isValueEmpty: boolean;
+        isHighlighted: boolean;
+        isHalf: boolean;
+        isChecked: boolean;
+    };
+    rootProps: solid_js.JSX.HTMLAttributes<any>;
+    inputProps: solid_js.JSX.InputHTMLAttributes<HTMLInputElement>;
+    labelProps: solid_js.JSX.HTMLAttributes<any>;
+    itemGroupProps: solid_js.JSX.HTMLAttributes<any>;
+    getItemProps({ index }: {
+        index: number;
+    }): solid_js.JSX.HTMLAttributes<any>;
+}>;
+
+type RatingProps = Assign<HTMLArkProps<'input'>, UseRatingProps>;
+declare const Rating: (props: RatingProps) => solid_js.JSX.Element;
+
+type RatingContext = UseRatingReturn;
+
+type RatingGroupProps = Omit<HTMLArkProps<'div'>, 'children'> & {
+    children: JSX$1.Element | ((context: RatingContext) => JSX$1.Element);
+    renderIcon?: never;
+};
+declare const RatingGroup: (props: RatingGroupProps) => JSX$1.Element;
+
+type RatingItemContext = ReturnType<ReturnType<typeof connect$1>['getRatingState']>;
+
+type RenderIconFn = (state: RatingItemContext) => JSX$1.Element;
+type RatingItemProps = Omit<HTMLArkProps<'span'>, 'children'> & {
+    index: number;
+    children: JSX$1.Element | RenderIconFn;
+};
+declare const RatingItem: (props: RatingItemProps) => JSX$1.Element;
+
+type RatingLabelProps = HTMLArkProps<'label'>;
+declare const RatingLabel: (props: RatingLabelProps) => solid_js.JSX.Element;
+
 type UseSliderProps = Optional<slider.Context, 'id'>;
@@ -576,3 +627,3 @@ type UseSliderReturn = ReturnType<typeof useSlider>;
 
-type GetTriggerPropsArgs = Parameters<ReturnType<typeof connect$1>['getTriggerProps']>[0];
+type GetTriggerPropsArgs = Parameters<ReturnType<typeof connect$2>['getTriggerProps']>[0];
 type TabProps = Assign<HTMLArkProps<'button'>, GetTriggerPropsArgs>;
@@ -587,3 +638,3 @@ declare const Tab: (props: TabProps) => solid_js.JSX.Element;
 
-type GetContentPropsArgs = Parameters<ReturnType<typeof connect$1>['getContentProps']>[0];
+type GetContentPropsArgs = Parameters<ReturnType<typeof connect$2>['getContentProps']>[0];
 type TabPanelProps = Assign<HTMLArkProps<'div'>, GetContentPropsArgs>;
@@ -702,2 +753,2 @@ declare const TabPanel: (props: TabPanelProps) => solid_js.JSX.Element;
 
-export { Accordion, AccordionButton, AccordionButtonProps, AccordionIcon, AccordionIconProps, AccordionItem, AccordionItemContext, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, Checkbox, CheckboxControl, CheckboxControlProps, CheckboxInput, CheckboxInputProps, CheckboxLabel, CheckboxLabelProps, CheckboxProps, Dialog, DialogBackdrop, DialogBackdropProps, DialogCloseButton, DialogCloseButtonProps, DialogContainer, DialogContainerProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogPortal, DialogPortalProps, DialogProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps, Editable, EditableArea, EditableAreaProps, EditableCancelButton, EditableCancelButtonProps, EditableControls, EditableControlsProps, EditableEditButton, EditableEditButtonProps, EditableInput, EditableInputProps, EditablePreview, EditablePreviewProps, EditableProps, EditableSubmitButton, EditableSubmitButtonProps, HoverCard, HoverCardArrow, HoverCardArrowProps, HoverCardContent, HoverCardContentProps, HoverCardInnerArrow, HoverCardInnerArrowProps, HoverCardPortal, HoverCardPortalProps, HoverCardPositioner, HoverCardPositionerProps, HoverCardProps, HoverCardTrigger, HoverCardTriggerProps, NumberInput, NumberInputDecrementButton, NumberInputDecrementButtonProps, NumberInputField, NumberInputFieldProps, NumberInputIncrementButton, NumberInputIncrementButtonProps, NumberInputProps, Pagination, PaginationContext, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationItemProps, PaginationList, PaginationListProps, PaginationNextItem, PaginationNextItemProps, PaginationPrevItem, PaginationPrevItemProps, PaginationProps, PaginationProvider, PinInput, PinInputField, PinInputFieldProps, PinInputProps, Popover, PopoverArrow, PopoverArrowProps, PopoverCloseButton, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverInnerArrow, PopoverInnerArrowProps, PopoverPositioner, PopoverPositionerProps, PopoverProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps, Pressable, PressableProps, Radio, RadioControl, RadioControlProps, RadioGroup, RadioGroupLabel, RadioGroupLabelProps, RadioGroupProps, RadioInput, RadioInputProps, RadioLabel, RadioLabelProps, RadioProps, Slider, SliderControl, SliderControlProps, SliderInput, SliderInputProps, SliderLabel, SliderLabelProps, SliderOutput, SliderOutputProps, SliderProps, SliderRange, SliderRangeProps, SliderThumb, SliderThumbProps, SliderTrack, SliderTrackProps, Tab, TabIndicator, TabIndicatorProps, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, Tabs, TabsProps, Toast, ToastCloseButton, ToastCloseButtonProps, ToastDescription, ToastDescriptionProps, ToastGroup, ToastGroupProps, ToastPlacements, ToastPlacementsProps, ToastProps, ToastProvider, ToastProviderProps, ToastTitle, ToastTitleProps, Tooltip, TooltipArrow, TooltipArrowProps, TooltipContent, TooltipContentProps, TooltipInnerArrow, TooltipInnerArrowProps, TooltipPositioner, TooltipPositionerProps, TooltipProps, TooltipTrigger, TooltipTriggerProps, UseAccordionProps, UseAccordionReturn, UseCheckboxProps, UseCheckboxReturn, UseEditableProps, UseEditableReturn, UsePaginationProps, UsePinInputProps, UsePinInputReturn, UsePopoverProps, UsePopoverReturn, UsePressableProps, UsePressableReturn, UseRadioGroupProps, UseRadioGroupReturn, UseSliderProps, UseSliderReturn, UseTabsProps, UseTabsReturn, UseTooltipProps, UseTooltipReturn, useAccordion, useAccordionItemContext, useCheckbox, useEditable, usePagination, usePaginationContext, usePinInput, usePopover, usePressable, useRadioGroup, useSlider, useTabs, useToast, useTooltip };
+export { Accordion, AccordionButton, AccordionButtonProps, AccordionIcon, AccordionIconProps, AccordionItem, AccordionItemContext, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, Checkbox, CheckboxControl, CheckboxControlProps, CheckboxInput, CheckboxInputProps, CheckboxLabel, CheckboxLabelProps, CheckboxProps, Dialog, DialogBackdrop, DialogBackdropProps, DialogCloseButton, DialogCloseButtonProps, DialogContainer, DialogContainerProps, DialogContent, DialogContentProps, DialogDescription, DialogDescriptionProps, DialogPortal, DialogPortalProps, DialogProps, DialogTitle, DialogTitleProps, DialogTrigger, DialogTriggerProps, Editable, EditableArea, EditableAreaProps, EditableCancelButton, EditableCancelButtonProps, EditableControls, EditableControlsProps, EditableEditButton, EditableEditButtonProps, EditableInput, EditableInputProps, EditablePreview, EditablePreviewProps, EditableProps, EditableSubmitButton, EditableSubmitButtonProps, HoverCard, HoverCardArrow, HoverCardArrowProps, HoverCardContent, HoverCardContentProps, HoverCardInnerArrow, HoverCardInnerArrowProps, HoverCardPortal, HoverCardPortalProps, HoverCardPositioner, HoverCardPositionerProps, HoverCardProps, HoverCardTrigger, HoverCardTriggerProps, NumberInput, NumberInputDecrementButton, NumberInputDecrementButtonProps, NumberInputField, NumberInputFieldProps, NumberInputIncrementButton, NumberInputIncrementButtonProps, NumberInputProps, Pagination, PaginationContext, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationItemProps, PaginationList, PaginationListProps, PaginationNextItem, PaginationNextItemProps, PaginationPrevItem, PaginationPrevItemProps, PaginationProps, PaginationProvider, PinInput, PinInputField, PinInputFieldProps, PinInputProps, Popover, PopoverArrow, PopoverArrowProps, PopoverCloseButton, PopoverCloseButtonProps, PopoverContent, PopoverContentProps, PopoverDescription, PopoverDescriptionProps, PopoverInnerArrow, PopoverInnerArrowProps, PopoverPositioner, PopoverPositionerProps, PopoverProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps, Pressable, PressableProps, Radio, RadioControl, RadioControlProps, RadioGroup, RadioGroupLabel, RadioGroupLabelProps, RadioGroupProps, RadioInput, RadioInputProps, RadioLabel, RadioLabelProps, RadioProps, Rating, RatingGroup, RatingGroupProps, RatingItem, RatingItemProps, RatingLabel, RatingLabelProps, RatingProps, RenderIconFn, Slider, SliderControl, SliderControlProps, SliderInput, SliderInputProps, SliderLabel, SliderLabelProps, SliderOutput, SliderOutputProps, SliderProps, SliderRange, SliderRangeProps, SliderThumb, SliderThumbProps, SliderTrack, SliderTrackProps, Tab, TabIndicator, TabIndicatorProps, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, Tabs, TabsProps, Toast, ToastCloseButton, ToastCloseButtonProps, ToastDescription, ToastDescriptionProps, ToastGroup, ToastGroupProps, ToastPlacements, ToastPlacementsProps, ToastProps, ToastProvider, ToastProviderProps, ToastTitle, ToastTitleProps, Tooltip, TooltipArrow, TooltipArrowProps, TooltipContent, TooltipContentProps, TooltipInnerArrow, TooltipInnerArrowProps, TooltipPositioner, TooltipPositionerProps, TooltipProps, TooltipTrigger, TooltipTriggerProps, UseAccordionProps, UseAccordionReturn, UseCheckboxProps, UseCheckboxReturn, UseEditableProps, UseEditableReturn, UsePaginationProps, UsePinInputProps, UsePinInputReturn, UsePopoverProps, UsePopoverReturn, UsePressableProps, UsePressableReturn, UseRadioGroupProps, UseRadioGroupReturn, UseRatingProps, UseRatingReturn, UseSliderProps, UseSliderReturn, UseTabsProps, UseTabsReturn, UseTooltipProps, UseTooltipReturn, useAccordion, useAccordionItemContext, useCheckbox, useEditable, usePagination, usePaginationContext, usePinInput, usePopover, usePressable, useRadioGroup, useRating, useSlider, useTabs, useToast, useTooltip };

dist/index.esm.js

@@ -269,5 +269,5 @@ // src/accordion/accordion.tsx
   createEffect(() => {
-    const children12 = getChildren();
-    if (children12 instanceof Element) {
-      spread(children12, dialog2().triggerProps);
+    const children14 = getChildren();
+    if (children14 instanceof Element) {
+      spread(children14, dialog2().triggerProps);
     }
@@ -449,5 +449,5 @@ });
   createEffect2(() => {
-    const children12 = getChildren();
-    if (children12 instanceof Element) {
-      spread2(children12, hoverCard2().triggerProps);
+    const children14 = getChildren();
+    if (children14 instanceof Element) {
+      spread2(children14, hoverCard2().triggerProps);
     }
@@ -533,3 +533,3 @@ });
 // src/pagination/pagination.tsx
-import { children as children4, mergeProps as mergeProps8, splitProps as splitProps4 } from "solid-js";
+import { children as children4, splitProps as splitProps4 } from "solid-js";
 
@@ -572,4 +572,3 @@ // src/pagination/pagination-context.ts
   const view = () => children4(() => runIfFn(local.children, pagination2()));
-  const mergedProps = mergeProps8(pagination2().rootProps, navProps);
-  return <PaginationProvider value={pagination2}><ark.nav {...mergedProps}>{view()}</ark.nav></PaginationProvider>;
+  return <PaginationProvider value={pagination2}><ark.nav {...pagination2().rootProps} {...navProps}>{view()}</ark.nav></PaginationProvider>;
 };
@@ -594,6 +593,6 @@
   createEffect3(() => {
-    const children12 = getChildren();
-    if (children12 instanceof Element) {
+    const children14 = getChildren();
+    if (children14 instanceof Element) {
       spread3(
-        children12,
+        children14,
         pagination2().getItemProps({
@@ -619,5 +618,5 @@ type: "page",
   createEffect4(() => {
-    const children12 = getChildren();
-    if (children12 instanceof Element) {
-      spread4(children12, pagination2().nextItemProps);
+    const children14 = getChildren();
+    if (children14 instanceof Element) {
+      spread4(children14, pagination2().nextItemProps);
     }
@@ -635,5 +634,5 @@ });
   createEffect5(() => {
-    const children12 = getChildren();
-    if (children12 instanceof Element) {
-      spread5(children12, pagination2().prevItemProps);
+    const children14 = getChildren();
+    if (children14 instanceof Element) {
+      spread5(children14, pagination2().prevItemProps);
     }
@@ -713,5 +712,5 @@ });
 import { normalizeProps as normalizeProps9, useMachine as useMachine9 } from "@zag-js/solid";
-import { createMemo as createMemo9, createUniqueId as createUniqueId9, mergeProps as mergeProps9 } from "solid-js";
+import { createMemo as createMemo9, createUniqueId as createUniqueId9, mergeProps as mergeProps8 } from "solid-js";
 var usePopover = (props) => {
-  const context = mergeProps9({ id: createUniqueId9() }, props);
+  const context = mergeProps8({ id: createUniqueId9() }, props);
   const [state, send] = useMachine9(popover.machine(context), { context });
@@ -795,5 +794,5 @@ return createMemo9(() => popover.connect(state, send, normalizeProps9));
   createEffect6(() => {
-    const children12 = getChildren();
-    if (children12 instanceof Element) {
-      spread6(children12, popover2().triggerProps);
+    const children14 = getChildren();
+    if (children14 instanceof Element) {
+      spread6(children14, popover2().triggerProps);
     }
@@ -874,6 +873,6 @@ });
 import { normalizeProps as normalizeProps11, useMachine as useMachine11 } from "@zag-js/solid";
-import { createMemo as createMemo10, createUniqueId as createUniqueId11, mergeProps as mergeProps10 } from "solid-js";
+import { createMemo as createMemo10, createUniqueId as createUniqueId11, mergeProps as mergeProps9 } from "solid-js";
 var useRadioGroup = (props) => {
-  const initialContext = mergeProps10({ id: createUniqueId11(), value: props.defaultValue }, props);
-  const context = mergeProps10(initialContext, { value: props.value });
+  const initialContext = mergeProps9({ id: createUniqueId11(), value: props.defaultValue }, props);
+  const context = mergeProps9(initialContext, { value: props.value });
   const [state, send] = useMachine11(radio.machine(initialContext), {
@@ -925,2 +924,82 @@ context
 
+// src/rating/rating.tsx
+import { splitProps as splitProps6 } from "solid-js";
+
+// src/rating/rating-context.ts
+var [RatingProvider, useRatingContext] = createContext({
+  hookName: "useRatingContext",
+  providerName: "<RatingProvider />"
+});
+
+// src/rating/use-rating.tsx
+import * as rating from "@zag-js/rating";
+import { normalizeProps as normalizeProps12, useMachine as useMachine12 } from "@zag-js/solid";
+import { createMemo as createMemo11, createUniqueId as createUniqueId12, mergeProps as mergeProps10 } from "solid-js";
+var useRating = (props) => {
+  const initialContext = mergeProps10({ id: createUniqueId12(), value: props.defaultValue }, props);
+  const context = mergeProps10(initialContext, { value: props.value });
+  const [state, send] = useMachine12(rating.machine(initialContext), { context });
+  return createMemo11(() => rating.connect(state, send, normalizeProps12));
+};
+
+// src/rating/rating.tsx
+var Rating = (props) => {
+  const [useRatingProps, inputProps] = splitProps6(props, [
+    "allowHalf",
+    "autoFocus",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "form",
+    "getRootNode",
+    "id",
+    "ids",
+    "max",
+    "name",
+    "onChange",
+    "onHover",
+    "readOnly",
+    "translations",
+    "value"
+  ]);
+  const rating2 = useRating(useRatingProps);
+  return <RatingProvider value={rating2}><ark.div {...rating2().rootProps}>
+    {props.children}
+    <ark.input {...rating2().inputProps} {...inputProps} />
+  </ark.div></RatingProvider>;
+};
+
+// src/rating/rating-group.tsx
+import { children as children9 } from "solid-js";
+var RatingGroup = (props) => {
+  const [localProps, divProps] = createSplitProps()(props, ["renderIcon", "children"]);
+  const rating2 = useRatingContext();
+  const view = children9(() => runIfFn(localProps.children, rating2));
+  return <ark.div {...rating2().itemGroupProps} {...divProps}>{view()}</ark.div>;
+};
+
+// src/rating/rating-item.tsx
+import { children as children10 } from "solid-js";
+
+// src/rating/rating-item-context.ts
+var [RatingItemProvider, useRatingItemContext] = createContext({
+  hookName: "useRatingItemContext",
+  providerName: "<RatingItemProvider />"
+});
+
+// src/rating/rating-item.tsx
+var RatingItem = (props) => {
+  const [localProps, spanProps] = createSplitProps()(props, ["index", "children"]);
+  const rating2 = useRatingContext();
+  const ratingState = rating2().getRatingState(localProps.index);
+  const icon = children10(() => runIfFn(localProps.children, ratingState));
+  return <ark.span {...rating2().getItemProps({ index: localProps.index })} {...spanProps}><RatingItemProvider value={ratingState}>{icon()}</RatingItemProvider></ark.span>;
+};
+
+// src/rating/rating-label.tsx
+var RatingLabel = (props) => {
+  const rating2 = useRatingContext();
+  return <ark.label {...rating2().labelProps} {...props} />;
+};
+
 // src/slider/slider-context.ts
@@ -934,8 +1013,8 @@ var [SliderProvider, useSliderContext] = createContext({
 import * as slider from "@zag-js/slider";
-import { normalizeProps as normalizeProps12, useMachine as useMachine12 } from "@zag-js/solid";
-import { createMemo as createMemo11, createUniqueId as createUniqueId12, mergeProps as mergeProps11 } from "solid-js";
+import { normalizeProps as normalizeProps13, useMachine as useMachine13 } from "@zag-js/solid";
+import { createMemo as createMemo12, createUniqueId as createUniqueId13, mergeProps as mergeProps11 } from "solid-js";
 var useSlider = (props) => {
-  const context = mergeProps11({ id: createUniqueId12() }, props);
-  const [state, send] = useMachine12(slider.machine(context), { context });
-  return createMemo11(() => slider.connect(state, send, normalizeProps12));
+  const context = mergeProps11({ id: createUniqueId13() }, props);
+  const [state, send] = useMachine13(slider.machine(context), { context });
+  return createMemo12(() => slider.connect(state, send, normalizeProps13));
 };
@@ -1058,10 +1137,10 @@
 // src/tabs/use-tabs.ts
-import { normalizeProps as normalizeProps13, useMachine as useMachine13 } from "@zag-js/solid";
+import { normalizeProps as normalizeProps14, useMachine as useMachine14 } from "@zag-js/solid";
 import * as tabs from "@zag-js/tabs";
-import { createMemo as createMemo12, createUniqueId as createUniqueId13, mergeProps as mergeProps12 } from "solid-js";
+import { createMemo as createMemo13, createUniqueId as createUniqueId14, mergeProps as mergeProps12 } from "solid-js";
 var useTabs = (props) => {
-  const initialContext = mergeProps12({ id: createUniqueId13(), value: props.defaultValue }, props);
+  const initialContext = mergeProps12({ id: createUniqueId14(), value: props.defaultValue }, props);
   const context = mergeProps12(initialContext, { value: props.value });
-  const [state, send] = useMachine13(tabs.machine(initialContext), { context });
-  return createMemo12(() => tabs.connect(state, send, normalizeProps13));
+  const [state, send] = useMachine14(tabs.machine(initialContext), { context });
+  return createMemo13(() => tabs.connect(state, send, normalizeProps14));
 };
@@ -1098,8 +1177,8 @@
 // src/toast/use-toast-item.ts
-import { normalizeProps as normalizeProps14, useActor } from "@zag-js/solid";
+import { normalizeProps as normalizeProps15, useActor } from "@zag-js/solid";
 import * as toast from "@zag-js/toast";
-import { createMemo as createMemo13 } from "solid-js";
+import { createMemo as createMemo14 } from "solid-js";
 var useToastItem = (props) => {
   const [state, send] = useActor(props.toast);
-  return createMemo13(() => toast.connect(state, send, normalizeProps14));
+  return createMemo14(() => toast.connect(state, send, normalizeProps15));
 };
@@ -1127,8 +1206,8 @@
 // src/toast/toast-group.tsx
-import { children as children9 } from "solid-js";
+import { children as children11 } from "solid-js";
 
 // src/toast/toast-provider.tsx
-import { normalizeProps as normalizeProps15, useMachine as useMachine14 } from "@zag-js/solid";
+import { normalizeProps as normalizeProps16, useMachine as useMachine15 } from "@zag-js/solid";
 import * as toast2 from "@zag-js/toast";
-import { createMemo as createMemo14, createUniqueId as createUniqueId14, mergeProps as mergeProps13 } from "solid-js";
+import { createMemo as createMemo15, createUniqueId as createUniqueId15, mergeProps as mergeProps13 } from "solid-js";
 var [ToastContextProvider, useToast] = createContext();
@@ -1139,5 +1218,5 @@ var ToastProvider = (props) => {
   ]);
-  const context = mergeProps13({ id: createUniqueId14() }, machineProps);
-  const [state, send] = useMachine14(toast2.group.machine(context));
-  const api = createMemo14(() => toast2.group.connect(state, send, normalizeProps15));
+  const context = mergeProps13({ id: createUniqueId15() }, machineProps);
+  const [state, send] = useMachine15(toast2.group.machine(context));
+  const api = createMemo15(() => toast2.group.connect(state, send, normalizeProps16));
   return <ToastContextProvider value={api}>{toastProviderParams.children}</ToastContextProvider>;
@@ -1153,3 +1232,3 @@ };
   const toast3 = useToast();
-  const view = () => children9(
+  const view = () => children11(
     () => runIfFn(
@@ -1164,6 +1243,6 @@ toastGroupParams.children,
 // src/toast/toast-placements.tsx
-import { children as children10 } from "solid-js";
+import { children as children12 } from "solid-js";
 var ToastPlacements = (props) => {
   const toast3 = useToast();
-  const view = () => children10(() => runIfFn(props.children, Object.keys(toast3().toastsByPlacement)));
+  const view = () => children12(() => runIfFn(props.children, Object.keys(toast3().toastsByPlacement)));
   return <>{view}</>;
@@ -1185,9 +1264,9 @@ };
 // src/tooltip/use-tooltip.ts
-import { normalizeProps as normalizeProps16, useMachine as useMachine15 } from "@zag-js/solid";
+import { normalizeProps as normalizeProps17, useMachine as useMachine16 } from "@zag-js/solid";
 import * as tooltip from "@zag-js/tooltip";
-import { createMemo as createMemo15, createUniqueId as createUniqueId15, mergeProps as mergeProps14 } from "solid-js";
+import { createMemo as createMemo16, createUniqueId as createUniqueId16, mergeProps as mergeProps14 } from "solid-js";
 var useTooltip = (props) => {
-  const context = mergeProps14({ id: createUniqueId15() }, props);
-  const [state, send] = useMachine15(tooltip.machine(context), { context });
-  return createMemo15(() => tooltip.connect(state, send, normalizeProps16));
+  const context = mergeProps14({ id: createUniqueId16() }, props);
+  const [state, send] = useMachine16(tooltip.machine(context), { context });
+  return createMemo16(() => tooltip.connect(state, send, normalizeProps17));
 };
@@ -1242,11 +1321,11 @@
 // src/tooltip/tooltip-trigger.tsx
-import { children as children11, createEffect as createEffect7 } from "solid-js";
+import { children as children13, createEffect as createEffect7 } from "solid-js";
 import { spread as spread7 } from "solid-js/web";
 var TooltipTrigger = (props) => {
   const tooltip2 = useTooltipContext();
-  const getChildren = children11(() => props.children);
+  const getChildren = children13(() => props.children);
   createEffect7(() => {
-    const children12 = getChildren();
-    if (children12 instanceof Element) {
-      spread7(children12, tooltip2().triggerProps);
+    const children14 = getChildren();
+    if (children14 instanceof Element) {
+      spread7(children14, tooltip2().triggerProps);
     }
@@ -1319,2 +1398,6 @@ });
   RadioLabel,
+  Rating,
+  RatingGroup,
+  RatingItem,
+  RatingLabel,
   Slider,
@@ -1357,2 +1440,3 @@ SliderControl,
   useRadioGroup,
+  useRating,
   useSlider,
@@ -1359,0 +1443,0 @@ useTabs,

package.json

 {
   "name": "@ark-ui/solid",
-  "version": "0.0.0-rc-20221129135205",
+  "version": "0.0.0-rc-20221129180638",
   "description": "",
@@ -5,0 +5,0 @@ "keywords": [],

No alert changes

Improved metrics

Total package byte prevSize

128507

increased by6.48%

Lines of code

3355

increased by6.34%

No dependency changes