@ark-ui/solid - npm Package Compare versions

Comparing version 0.0.0-rc-20221129092858 to 0.0.0-rc-20221129093305

dist/index.cjs.js

@@ -83,2 +83,10 @@ "use strict";
   RadioLabel: () => RadioLabel,
+  Slider: () => Slider,
+  SliderControl: () => SliderControl,
+  SliderInput: () => SliderInput,
+  SliderLabel: () => SliderLabel,
+  SliderOutput: () => SliderOutput,
+  SliderRange: () => SliderRange,
+  SliderThumb: () => SliderThumb,
+  SliderTrack: () => SliderTrack,
   Tab: () => Tab,
@@ -105,2 +113,3 @@ TabIndicator: () => TabIndicator,
   useRadioGroup: () => useRadioGroup,
+  useSlider: () => useSlider,
   useTabs: () => useTabs,
@@ -925,2 +934,91 @@ useTooltip: () => useTooltip
 
+// src/slider/slider-context.ts
+var [SliderProvider, useSliderContext] = createContext({
+  hookName: "useSliderContext",
+  providerName: "<SliderProvider />"
+});
+
+// src/slider/use-slider.ts
+var slider = __toESM(require("@zag-js/slider"));
+var import_solid12 = require("@zag-js/solid");
+var import_solid_js26 = require("solid-js");
+var useSlider = (props) => {
+  const context = (0, import_solid_js26.mergeProps)({ id: (0, import_solid_js26.createUniqueId)() }, props);
+  const [state, send] = (0, import_solid12.useMachine)(slider.machine(context), { context });
+  return (0, import_solid_js26.createMemo)(() => slider.connect(state, send, import_solid12.normalizeProps));
+};
+
+// src/slider/slider.tsx
+var Slider = (props) => {
+  const [useSliderProps, divProps] = createSplitProps()(props, [
+    "aria-label",
+    "aria-labelledby",
+    "dir",
+    "disabled",
+    "focusThumbOnChange",
+    "form",
+    "getAriaValueText",
+    "getRootNode",
+    "id",
+    "ids",
+    "invalid",
+    "max",
+    "min",
+    "name",
+    "onChange",
+    "onChangeEnd",
+    "onChangeStart",
+    "orientation",
+    "origin",
+    "readOnly",
+    "step",
+    "thumbAlignment",
+    "value"
+  ]);
+  const slider2 = useSlider(useSliderProps);
+  return <SliderProvider value={slider2}><ark.div {...slider2().rootProps} {...divProps} /></SliderProvider>;
+};
+
+// src/slider/slider-control.tsx
+var SliderControl = (props) => {
+  const slider2 = useSliderContext();
+  return <ark.div {...slider2().controlProps} {...props} />;
+};
+
+// src/slider/slider-input.tsx
+var SliderInput = (props) => {
+  const slider2 = useSliderContext();
+  return <ark.input {...slider2().inputProps} {...props} />;
+};
+
+// src/slider/slider-label.tsx
+var SliderLabel = (props) => {
+  const slider2 = useSliderContext();
+  return <ark.label {...slider2().labelProps} {...props} />;
+};
+
+// src/slider/slider-output.tsx
+var SliderOutput = (props) => {
+  const slider2 = useSliderContext();
+  return <ark.output {...slider2().outputProps} {...props} />;
+};
+
+// src/slider/slider-range.tsx
+var SliderRange = (props) => {
+  const slider2 = useSliderContext();
+  return <ark.div {...slider2().rangeProps} {...props} />;
+};
+
+// src/slider/slider-thumb.tsx
+var SliderThumb = (props) => {
+  const slider2 = useSliderContext();
+  return <ark.div {...slider2().thumbProps} {...props} />;
+};
+
+// src/slider/slider-track.tsx
+var SliderTrack = (props) => {
+  const slider2 = useSliderContext();
+  return <ark.div {...slider2().trackProps} {...props} />;
+};
+
 // src/tabs/tabs-context.ts
@@ -968,10 +1066,10 @@ var [TabsProvider, useTabsContext] = createContext({
 // src/tabs/use-tabs.ts
-var import_solid12 = require("@zag-js/solid");
+var import_solid13 = require("@zag-js/solid");
 var tabs = __toESM(require("@zag-js/tabs"));
-var import_solid_js26 = require("solid-js");
+var import_solid_js27 = require("solid-js");
 var useTabs = (props) => {
-  const initialContext = (0, import_solid_js26.mergeProps)({ id: (0, import_solid_js26.createUniqueId)(), value: props.defaultValue }, props);
-  const context = (0, import_solid_js26.mergeProps)(initialContext, { value: props.value });
-  const [state, send] = (0, import_solid12.useMachine)(tabs.machine(initialContext), { context });
-  return (0, import_solid_js26.createMemo)(() => tabs.connect(state, send, import_solid12.normalizeProps));
+  const initialContext = (0, import_solid_js27.mergeProps)({ id: (0, import_solid_js27.createUniqueId)(), value: props.defaultValue }, props);
+  const context = (0, import_solid_js27.mergeProps)(initialContext, { value: props.value });
+  const [state, send] = (0, import_solid13.useMachine)(tabs.machine(initialContext), { context });
+  return (0, import_solid_js27.createMemo)(() => tabs.connect(state, send, import_solid13.normalizeProps));
 };
@@ -1008,9 +1106,9 @@
 // src/tooltip/use-tooltip.ts
-var import_solid13 = require("@zag-js/solid");
+var import_solid14 = require("@zag-js/solid");
 var tooltip = __toESM(require("@zag-js/tooltip"));
-var import_solid_js27 = require("solid-js");
+var import_solid_js28 = require("solid-js");
 var useTooltip = (props) => {
-  const context = (0, import_solid_js27.mergeProps)({ id: (0, import_solid_js27.createUniqueId)() }, props);
-  const [state, send] = (0, import_solid13.useMachine)(tooltip.machine(context), { context });
-  return (0, import_solid_js27.createMemo)(() => tooltip.connect(state, send, import_solid13.normalizeProps));
+  const context = (0, import_solid_js28.mergeProps)({ id: (0, import_solid_js28.createUniqueId)() }, props);
+  const [state, send] = (0, import_solid14.useMachine)(tooltip.machine(context), { context });
+  return (0, import_solid_js28.createMemo)(() => tooltip.connect(state, send, import_solid14.normalizeProps));
 };
@@ -1058,15 +1156,15 @@
 // src/tooltip/tooltip-positioner.tsx
-var import_solid_js28 = require("solid-js");
+var import_solid_js29 = require("solid-js");
 var TooltipPositioner = (props) => {
   const tooltip2 = useTooltipContext();
-  return <import_solid_js28.Show when={tooltip2().isOpen}><ark.div {...tooltip2().positionerProps} {...props} /></import_solid_js28.Show>;
+  return <import_solid_js29.Show when={tooltip2().isOpen}><ark.div {...tooltip2().positionerProps} {...props} /></import_solid_js29.Show>;
 };
 
 // src/tooltip/tooltip-trigger.tsx
-var import_solid_js29 = require("solid-js");
+var import_solid_js30 = require("solid-js");
 var import_web9 = require("solid-js/web");
 var TooltipTrigger = (props) => {
   const tooltip2 = useTooltipContext();
-  const getChildren = (0, import_solid_js29.children)(() => props.children);
-  (0, import_solid_js29.createEffect)(() => {
+  const getChildren = (0, import_solid_js30.children)(() => props.children);
+  (0, import_solid_js30.createEffect)(() => {
     const children9 = getChildren();
@@ -1135,2 +1233,10 @@ if (children9 instanceof Element) {
   RadioLabel,
+  Slider,
+  SliderControl,
+  SliderInput,
+  SliderLabel,
+  SliderOutput,
+  SliderRange,
+  SliderThumb,
+  SliderTrack,
   Tab,
@@ -1157,4 +1263,5 @@ TabIndicator,
   useRadioGroup,
+  useSlider,
   useTabs,
   useTooltip
 });

dist/index.d.ts

@@ -17,2 +17,3 @@ import * as solid_js from 'solid-js';
 import { connect } from '@zag-js/radio';
+import * as slider from '@zag-js/slider';
 import * as tabs from '@zag-js/tabs';
@@ -468,2 +469,52 @@ import { connect as connect$1 } from '@zag-js/tabs';
 
+type UseSliderProps = Optional<slider.Context, 'id'>;
+type UseSliderReturn = ReturnType<typeof useSlider>;
+declare const useSlider: (props: UseSliderProps) => solid_js.Accessor<{
+    isFocused: boolean;
+    isDragging: boolean;
+    value: number;
+    percent: number;
+    setValue(value: number): void;
+    getPercentValue(percent: number): number;
+    focus(): void;
+    increment(): void;
+    decrement(): void;
+    rootProps: solid_js.JSX.HTMLAttributes<any>;
+    labelProps: solid_js.JSX.LabelHTMLAttributes<HTMLLabelElement>;
+    thumbProps: solid_js.JSX.HTMLAttributes<any>;
+    inputProps: solid_js.JSX.InputHTMLAttributes<HTMLInputElement>;
+    outputProps: solid_js.JSX.OutputHTMLAttributes<HTMLElement>;
+    trackProps: solid_js.JSX.HTMLAttributes<any>;
+    rangeProps: solid_js.JSX.HTMLAttributes<any>;
+    controlProps: solid_js.JSX.HTMLAttributes<any>;
+    markerGroupProps: solid_js.JSX.HTMLAttributes<any>;
+    getMarkerProps({ value }: {
+        value: number;
+    }): solid_js.JSX.HTMLAttributes<any>;
+}>;
+
+type SliderProps = Assign<HTMLArkProps<'div'>, UseSliderProps>;
+declare const Slider: (props: SliderProps) => solid_js.JSX.Element;
+
+type SliderControlProps = HTMLArkProps<'div'>;
+declare const SliderControl: (props: SliderControlProps) => solid_js.JSX.Element;
+
+type SliderInputProps = HTMLArkProps<'input'>;
+declare const SliderInput: (props: SliderInputProps) => solid_js.JSX.Element;
+
+type SliderLabelProps = HTMLArkProps<'label'>;
+declare const SliderLabel: (props: SliderLabelProps) => solid_js.JSX.Element;
+
+type SliderOutputProps = HTMLArkProps<'output'>;
+declare const SliderOutput: (props: SliderOutputProps) => solid_js.JSX.Element;
+
+type SliderRangeProps = HTMLArkProps<'div'>;
+declare const SliderRange: (props: SliderRangeProps) => solid_js.JSX.Element;
+
+type SliderThumbProps = HTMLArkProps<'div'>;
+declare const SliderThumb: (props: SliderThumbProps) => solid_js.JSX.Element;
+
+type SliderTrackProps = HTMLArkProps<'div'>;
+declare const SliderTrack: (props: SliderTrackProps) => solid_js.JSX.Element;
+
 type GetTriggerPropsArgs = Parameters<ReturnType<typeof connect$1>['getTriggerProps']>[0];
@@ -557,2 +608,2 @@ type TabProps = Assign<HTMLArkProps<'button'>, GetTriggerPropsArgs>;
 
-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, 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, Tab, TabIndicator, TabIndicatorProps, TabList, TabListProps, TabPanel, TabPanelProps, TabPanels, TabPanelsProps, TabProps, Tabs, TabsProps, Tooltip, TooltipArrow, TooltipArrowProps, TooltipContent, TooltipContentProps, TooltipInnerArrow, TooltipInnerArrowProps, TooltipPositioner, TooltipPositionerProps, TooltipProps, TooltipTrigger, TooltipTriggerProps, UseAccordionProps, UseAccordionReturn, UseCheckboxProps, UseCheckboxReturn, UsePaginationProps, UsePinInputProps, UsePinInputReturn, UsePopoverProps, UsePopoverReturn, UsePressableProps, UsePressableReturn, UseRadioGroupProps, UseRadioGroupReturn, UseTabsProps, UseTabsReturn, UseTooltipProps, UseTooltipReturn, useAccordion, useAccordionItemContext, useCheckbox, usePagination, usePaginationContext, usePinInput, usePopover, usePressable, useRadioGroup, useTabs, 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, 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, Tooltip, TooltipArrow, TooltipArrowProps, TooltipContent, TooltipContentProps, TooltipInnerArrow, TooltipInnerArrowProps, TooltipPositioner, TooltipPositionerProps, TooltipProps, TooltipTrigger, TooltipTriggerProps, UseAccordionProps, UseAccordionReturn, UseCheckboxProps, UseCheckboxReturn, UsePaginationProps, UsePinInputProps, UsePinInputReturn, UsePopoverProps, UsePopoverReturn, UsePressableProps, UsePressableReturn, UseRadioGroupProps, UseRadioGroupReturn, UseSliderProps, UseSliderReturn, UseTabsProps, UseTabsReturn, UseTooltipProps, UseTooltipReturn, useAccordion, useAccordionItemContext, useCheckbox, usePagination, usePaginationContext, usePinInput, usePopover, usePressable, useRadioGroup, useSlider, useTabs, useTooltip };

dist/index.esm.js

@@ -820,2 +820,91 @@ // src/accordion/accordion.tsx
 
+// src/slider/slider-context.ts
+var [SliderProvider, useSliderContext] = createContext({
+  hookName: "useSliderContext",
+  providerName: "<SliderProvider />"
+});
+
+// src/slider/use-slider.ts
+import * as slider from "@zag-js/slider";
+import { normalizeProps as normalizeProps11, useMachine as useMachine11 } from "@zag-js/solid";
+import { createMemo as createMemo10, createUniqueId as createUniqueId11, mergeProps as mergeProps10 } from "solid-js";
+var useSlider = (props) => {
+  const context = mergeProps10({ id: createUniqueId11() }, props);
+  const [state, send] = useMachine11(slider.machine(context), { context });
+  return createMemo10(() => slider.connect(state, send, normalizeProps11));
+};
+
+// src/slider/slider.tsx
+var Slider = (props) => {
+  const [useSliderProps, divProps] = createSplitProps()(props, [
+    "aria-label",
+    "aria-labelledby",
+    "dir",
+    "disabled",
+    "focusThumbOnChange",
+    "form",
+    "getAriaValueText",
+    "getRootNode",
+    "id",
+    "ids",
+    "invalid",
+    "max",
+    "min",
+    "name",
+    "onChange",
+    "onChangeEnd",
+    "onChangeStart",
+    "orientation",
+    "origin",
+    "readOnly",
+    "step",
+    "thumbAlignment",
+    "value"
+  ]);
+  const slider2 = useSlider(useSliderProps);
+  return <SliderProvider value={slider2}><ark.div {...slider2().rootProps} {...divProps} /></SliderProvider>;
+};
+
+// src/slider/slider-control.tsx
+var SliderControl = (props) => {
+  const slider2 = useSliderContext();
+  return <ark.div {...slider2().controlProps} {...props} />;
+};
+
+// src/slider/slider-input.tsx
+var SliderInput = (props) => {
+  const slider2 = useSliderContext();
+  return <ark.input {...slider2().inputProps} {...props} />;
+};
+
+// src/slider/slider-label.tsx
+var SliderLabel = (props) => {
+  const slider2 = useSliderContext();
+  return <ark.label {...slider2().labelProps} {...props} />;
+};
+
+// src/slider/slider-output.tsx
+var SliderOutput = (props) => {
+  const slider2 = useSliderContext();
+  return <ark.output {...slider2().outputProps} {...props} />;
+};
+
+// src/slider/slider-range.tsx
+var SliderRange = (props) => {
+  const slider2 = useSliderContext();
+  return <ark.div {...slider2().rangeProps} {...props} />;
+};
+
+// src/slider/slider-thumb.tsx
+var SliderThumb = (props) => {
+  const slider2 = useSliderContext();
+  return <ark.div {...slider2().thumbProps} {...props} />;
+};
+
+// src/slider/slider-track.tsx
+var SliderTrack = (props) => {
+  const slider2 = useSliderContext();
+  return <ark.div {...slider2().trackProps} {...props} />;
+};
+
 // src/tabs/tabs-context.ts
@@ -863,10 +952,10 @@ var [TabsProvider, useTabsContext] = createContext({
 // src/tabs/use-tabs.ts
-import { normalizeProps as normalizeProps11, useMachine as useMachine11 } from "@zag-js/solid";
+import { normalizeProps as normalizeProps12, useMachine as useMachine12 } from "@zag-js/solid";
 import * as tabs from "@zag-js/tabs";
-import { createMemo as createMemo10, createUniqueId as createUniqueId11, mergeProps as mergeProps10 } from "solid-js";
+import { createMemo as createMemo11, createUniqueId as createUniqueId12, mergeProps as mergeProps11 } from "solid-js";
 var useTabs = (props) => {
-  const initialContext = mergeProps10({ id: createUniqueId11(), value: props.defaultValue }, props);
-  const context = mergeProps10(initialContext, { value: props.value });
-  const [state, send] = useMachine11(tabs.machine(initialContext), { context });
-  return createMemo10(() => tabs.connect(state, send, normalizeProps11));
+  const initialContext = mergeProps11({ id: createUniqueId12(), value: props.defaultValue }, props);
+  const context = mergeProps11(initialContext, { value: props.value });
+  const [state, send] = useMachine12(tabs.machine(initialContext), { context });
+  return createMemo11(() => tabs.connect(state, send, normalizeProps12));
 };
@@ -903,9 +992,9 @@
 // src/tooltip/use-tooltip.ts
-import { normalizeProps as normalizeProps12, useMachine as useMachine12 } from "@zag-js/solid";
+import { normalizeProps as normalizeProps13, useMachine as useMachine13 } from "@zag-js/solid";
 import * as tooltip from "@zag-js/tooltip";
-import { createMemo as createMemo11, createUniqueId as createUniqueId12, mergeProps as mergeProps11 } from "solid-js";
+import { createMemo as createMemo12, createUniqueId as createUniqueId13, mergeProps as mergeProps12 } from "solid-js";
 var useTooltip = (props) => {
-  const context = mergeProps11({ id: createUniqueId12() }, props);
-  const [state, send] = useMachine12(tooltip.machine(context), { context });
-  return createMemo11(() => tooltip.connect(state, send, normalizeProps12));
+  const context = mergeProps12({ id: createUniqueId13() }, props);
+  const [state, send] = useMachine13(tooltip.machine(context), { context });
+  return createMemo12(() => tooltip.connect(state, send, normalizeProps13));
 };
@@ -1028,2 +1117,10 @@
   RadioLabel,
+  Slider,
+  SliderControl,
+  SliderInput,
+  SliderLabel,
+  SliderOutput,
+  SliderRange,
+  SliderThumb,
+  SliderTrack,
   Tab,
@@ -1050,4 +1147,5 @@ TabIndicator,
   useRadioGroup,
+  useSlider,
   useTabs,
   useTooltip
 };

package.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

102692

increased by8.36%

Lines of code

2716

increased by9.16%

No dependency changes