@ark-ui/solid - npm Package Compare versions

Comparing version 0.0.0-rc-20221128131722 to 0.0.0-rc-20221128132237

dist/index.cjs.js

@@ -34,2 +34,6 @@ "use strict";
   AccordionPanel: () => AccordionPanel,
+  Checkbox: () => Checkbox,
+  CheckboxControl: () => CheckboxControl,
+  CheckboxInput: () => CheckboxInput,
+  CheckboxLabel: () => CheckboxLabel,
   NumberInput: () => NumberInput,
@@ -55,2 +59,3 @@ NumberInputDecrementButton: () => NumberInputDecrementButton,
   useAccordionItemContext: () => useAccordionItemContext,
+  useCheckbox: () => useCheckbox,
   usePinInput: () => usePinInput,
@@ -169,2 +174,65 @@ useTabs: () => useTabs,
 
+// src/checkbox/checkbox-context.tsx
+var [CheckboxProvider, useCheckboxContext] = createContext({
+  hookName: "useCheckboxContext",
+  providerName: "<CheckboxProvider />"
+});
+
+// src/checkbox/use-checkbox.ts
+var checkbox = __toESM(require("@zag-js/checkbox"));
+var import_solid3 = require("@zag-js/solid");
+var import_solid_js7 = require("solid-js");
+var useCheckbox = (props) => {
+  const initialContext = (0, import_solid_js7.mergeProps)({ id: (0, import_solid_js7.createUniqueId)(), value: props.defaultValue }, props);
+  const context = (0, import_solid_js7.mergeProps)(initialContext, { value: props.value });
+  const [state, send] = (0, import_solid3.useMachine)(checkbox.machine(initialContext), { context });
+  return (0, import_solid_js7.createMemo)(() => checkbox.connect(state, send, import_solid3.normalizeProps));
+};
+
+// src/checkbox/checkbox.tsx
+var Checkbox = (props) => {
+  const [useCheckboxProps, labelprops] = createSplitProps()(props, [
+    "aria-describedby",
+    "aria-invalid",
+    "aria-label",
+    "aria-labelledby",
+    "defaultChecked",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "focusable",
+    "form",
+    "getRootNode",
+    "id",
+    "ids",
+    "indeterminate",
+    "invalid",
+    "name",
+    "onChange",
+    "readOnly",
+    "required",
+    "value"
+  ]);
+  const checkbox2 = useCheckbox(useCheckboxProps);
+  return <CheckboxProvider value={checkbox2}><ark.label {...checkbox2().rootProps} {...labelprops} /></CheckboxProvider>;
+};
+
+// src/checkbox/checkbox-control.tsx
+var CheckboxControl = (props) => {
+  const checkbox2 = useCheckboxContext();
+  return <ark.div {...checkbox2().controlProps} {...props} />;
+};
+
+// src/checkbox/checkbox-input.tsx
+var CheckboxInput = (props) => {
+  const checkbox2 = useCheckboxContext();
+  return <ark.input {...checkbox2().inputProps} {...props} />;
+};
+
+// src/checkbox/checkbox-label.tsx
+var CheckboxLabel = (props) => {
+  const checkbox2 = useCheckboxContext();
+  return <ark.label {...checkbox2().labelProps} {...props} />;
+};
+
 // src/number-input/number-input-context.ts
@@ -178,9 +246,9 @@ var [NumberInputProvider, useNumberInputContext] = createContext({
 var numberInput = __toESM(require("@zag-js/number-input"));
-var import_solid3 = require("@zag-js/solid");
-var import_solid_js7 = require("solid-js");
+var import_solid4 = require("@zag-js/solid");
+var import_solid_js8 = require("solid-js");
 var useNumberInput = (props) => {
-  const initialContext = (0, import_solid_js7.mergeProps)({ id: (0, import_solid_js7.createUniqueId)(), value: props.defaultValue }, props);
-  const context = (0, import_solid_js7.mergeProps)(initialContext, { value: props.value });
-  const [state, send] = (0, import_solid3.useMachine)(numberInput.machine(initialContext), { context });
-  return (0, import_solid_js7.createMemo)(() => numberInput.connect(state, send, import_solid3.normalizeProps));
+  const initialContext = (0, import_solid_js8.mergeProps)({ id: (0, import_solid_js8.createUniqueId)(), value: props.defaultValue }, props);
+  const context = (0, import_solid_js8.mergeProps)(initialContext, { value: props.value });
+  const [state, send] = (0, import_solid4.useMachine)(numberInput.machine(initialContext), { context });
+  return (0, import_solid_js8.createMemo)(() => numberInput.connect(state, send, import_solid4.normalizeProps));
 };
@@ -246,3 +314,3 @@
 // src/pin-input/pin-input.tsx
-var import_solid_js9 = require("solid-js");
+var import_solid_js10 = require("solid-js");
 
@@ -257,8 +325,8 @@ // src/pin-input/pin-input-context.ts
 var pinInput = __toESM(require("@zag-js/pin-input"));
-var import_solid4 = require("@zag-js/solid");
-var import_solid_js8 = require("solid-js");
+var import_solid5 = require("@zag-js/solid");
+var import_solid_js9 = require("solid-js");
 var usePinInput = (props) => {
-  const [state, send] = (0, import_solid4.useMachine)(
+  const [state, send] = (0, import_solid5.useMachine)(
     pinInput.machine({
-      id: (0, import_solid_js8.createUniqueId)(),
+      id: (0, import_solid_js9.createUniqueId)(),
       ...props,
@@ -268,3 +336,3 @@ value: props.defaultValue ?? props.value ?? []
   );
-  return (0, import_solid_js8.createMemo)(() => pinInput.connect(state, send, import_solid4.normalizeProps));
+  return (0, import_solid_js9.createMemo)(() => pinInput.connect(state, send, import_solid5.normalizeProps));
 };
@@ -274,3 +342,3 @@
 var PinInput = (props) => {
-  const [pinInputProps, htmlProps] = (0, import_solid_js9.splitProps)(props, [
+  const [pinInputProps, htmlProps] = (0, import_solid_js10.splitProps)(props, [
     "autoFocus",
@@ -351,10 +419,10 @@ "blurOnComplete",
 // src/tabs/use-tabs.ts
-var import_solid5 = require("@zag-js/solid");
+var import_solid6 = require("@zag-js/solid");
 var tabs = __toESM(require("@zag-js/tabs"));
-var import_solid_js10 = require("solid-js");
+var import_solid_js11 = require("solid-js");
 var useTabs = (props) => {
-  const initialContext = (0, import_solid_js10.mergeProps)({ id: (0, import_solid_js10.createUniqueId)(), value: props.defaultValue }, props);
-  const context = (0, import_solid_js10.mergeProps)(initialContext, { value: props.value });
-  const [state, send] = (0, import_solid5.useMachine)(tabs.machine(initialContext), { context });
-  return (0, import_solid_js10.createMemo)(() => tabs.connect(state, send, import_solid5.normalizeProps));
+  const initialContext = (0, import_solid_js11.mergeProps)({ id: (0, import_solid_js11.createUniqueId)(), value: props.defaultValue }, props);
+  const context = (0, import_solid_js11.mergeProps)(initialContext, { value: props.value });
+  const [state, send] = (0, import_solid6.useMachine)(tabs.machine(initialContext), { context });
+  return (0, import_solid_js11.createMemo)(() => tabs.connect(state, send, import_solid6.normalizeProps));
 };
@@ -391,9 +459,9 @@
 // src/tooltip/use-tooltip.ts
-var import_solid6 = require("@zag-js/solid");
+var import_solid7 = require("@zag-js/solid");
 var tooltip = __toESM(require("@zag-js/tooltip"));
-var import_solid_js11 = require("solid-js");
+var import_solid_js12 = require("solid-js");
 var useTooltip = (props) => {
-  const context = (0, import_solid_js11.mergeProps)({ id: (0, import_solid_js11.createUniqueId)() }, props);
-  const [state, send] = (0, import_solid6.useMachine)(tooltip.machine(context), { context });
-  return (0, import_solid_js11.createMemo)(() => tooltip.connect(state, send, import_solid6.normalizeProps));
+  const context = (0, import_solid_js12.mergeProps)({ id: (0, import_solid_js12.createUniqueId)() }, props);
+  const [state, send] = (0, import_solid7.useMachine)(tooltip.machine(context), { context });
+  return (0, import_solid_js12.createMemo)(() => tooltip.connect(state, send, import_solid7.normalizeProps));
 };
@@ -441,15 +509,15 @@
 // src/tooltip/tooltip-positioner.tsx
-var import_solid_js12 = require("solid-js");
+var import_solid_js13 = require("solid-js");
 var TooltipPositioner = (props) => {
   const tooltip2 = useTooltipContext();
-  return <import_solid_js12.Show when={tooltip2().isOpen}><ark.div {...tooltip2().positionerProps} {...props} /></import_solid_js12.Show>;
+  return <import_solid_js13.Show when={tooltip2().isOpen}><ark.div {...tooltip2().positionerProps} {...props} /></import_solid_js13.Show>;
 };
 
 // src/tooltip/tooltip-trigger.tsx
-var import_solid_js13 = require("solid-js");
+var import_solid_js14 = require("solid-js");
 var import_web = require("solid-js/web");
 var TooltipTrigger = (props) => {
   const tooltip2 = useTooltipContext();
-  const getChildren = (0, import_solid_js13.children)(() => props.children);
-  (0, import_solid_js13.createEffect)(() => {
+  const getChildren = (0, import_solid_js14.children)(() => props.children);
+  (0, import_solid_js14.createEffect)(() => {
     const children2 = getChildren();
@@ -469,2 +537,6 @@ if (children2 instanceof Element) {
   AccordionPanel,
+  Checkbox,
+  CheckboxControl,
+  CheckboxInput,
+  CheckboxLabel,
   NumberInput,
@@ -490,2 +562,3 @@ NumberInputDecrementButton,
   useAccordionItemContext,
+  useCheckbox,
   usePinInput,
@@ -492,0 +565,0 @@ useTabs,

dist/index.d.ts

@@ -5,2 +5,3 @@ import * as solid_js from 'solid-js';
 import * as accordion from '@zag-js/accordion';
+import * as checkbox from '@zag-js/checkbox';
 import * as numberInput from '@zag-js/number-input';
@@ -75,2 +76,33 @@ import * as pinInput from '@zag-js/pin-input';
 
+type UseCheckboxProps = Optional<checkbox.Context, 'id'> & {
+    defaultValue?: checkbox.Context['value'];
+};
+type UseCheckboxReturn = ReturnType<typeof useCheckbox>;
+declare const useCheckbox: (props: UseCheckboxProps) => solid_js.Accessor<{
+    isChecked: boolean;
+    isDisabled: boolean | undefined;
+    isIndeterminate: boolean | undefined;
+    isFocused: boolean;
+    isReadOnly: boolean | undefined;
+    view: string;
+    setChecked(checked: boolean): void;
+    setIndeterminate(indeterminate: boolean): void;
+    rootProps: solid_js.JSX.HTMLAttributes<any>;
+    labelProps: solid_js.JSX.LabelHTMLAttributes<HTMLLabelElement>;
+    controlProps: solid_js.JSX.HTMLAttributes<any>;
+    inputProps: solid_js.JSX.InputHTMLAttributes<HTMLInputElement>;
+}>;
+
+type CheckboxProps = Assign<HTMLArkProps<'label'>, UseCheckboxProps>;
+declare const Checkbox: (props: CheckboxProps) => solid_js.JSX.Element;
+
+type CheckboxControlProps = HTMLArkProps<'div'>;
+declare const CheckboxControl: (props: CheckboxControlProps) => solid_js.JSX.Element;
+
+type CheckboxInputProps = HTMLArkProps<'input'>;
+declare const CheckboxInput: (props: CheckboxInputProps) => solid_js.JSX.Element;
+
+type CheckboxLabelProps = HTMLArkProps<'label'>;
+declare const CheckboxLabel: (props: CheckboxLabelProps) => solid_js.JSX.Element;
+
 type UseNumberInputProps = Optional<numberInput.Context, 'id'> & {
@@ -208,2 +240,2 @@ defaultValue?: numberInput.Context['value'];
 
-export { Accordion, AccordionButton, AccordionButtonProps, AccordionIcon, AccordionIconProps, AccordionItem, AccordionItemContext, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, NumberInput, NumberInputDecrementButton, NumberInputDecrementButtonProps, NumberInputField, NumberInputFieldProps, NumberInputIncrementButton, NumberInputIncrementButtonProps, NumberInputProps, PinInput, PinInputField, PinInputFieldProps, PinInputProps, 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, UsePinInputProps, UsePinInputReturn, UseTabsProps, UseTabsReturn, UseTooltipProps, UseTooltipReturn, useAccordion, useAccordionItemContext, usePinInput, useTabs, useTooltip };
+export { Accordion, AccordionButton, AccordionButtonProps, AccordionIcon, AccordionIconProps, AccordionItem, AccordionItemContext, AccordionItemProps, AccordionPanel, AccordionPanelProps, AccordionProps, Checkbox, CheckboxControl, CheckboxControlProps, CheckboxInput, CheckboxInputProps, CheckboxLabel, CheckboxLabelProps, CheckboxProps, NumberInput, NumberInputDecrementButton, NumberInputDecrementButtonProps, NumberInputField, NumberInputFieldProps, NumberInputIncrementButton, NumberInputIncrementButtonProps, NumberInputProps, PinInput, PinInputField, PinInputFieldProps, PinInputProps, 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, UsePinInputProps, UsePinInputReturn, UseTabsProps, UseTabsReturn, UseTooltipProps, UseTooltipReturn, useAccordion, useAccordionItemContext, useCheckbox, usePinInput, useTabs, useTooltip };

dist/index.esm.js

@@ -113,2 +113,65 @@ // src/accordion/accordion.tsx
 
+// src/checkbox/checkbox-context.tsx
+var [CheckboxProvider, useCheckboxContext] = createContext({
+  hookName: "useCheckboxContext",
+  providerName: "<CheckboxProvider />"
+});
+
+// src/checkbox/use-checkbox.ts
+import * as checkbox from "@zag-js/checkbox";
+import { normalizeProps as normalizeProps2, useMachine as useMachine2 } from "@zag-js/solid";
+import { createMemo as createMemo2, createUniqueId as createUniqueId2, mergeProps as mergeProps3 } from "solid-js";
+var useCheckbox = (props) => {
+  const initialContext = mergeProps3({ id: createUniqueId2(), value: props.defaultValue }, props);
+  const context = mergeProps3(initialContext, { value: props.value });
+  const [state, send] = useMachine2(checkbox.machine(initialContext), { context });
+  return createMemo2(() => checkbox.connect(state, send, normalizeProps2));
+};
+
+// src/checkbox/checkbox.tsx
+var Checkbox = (props) => {
+  const [useCheckboxProps, labelprops] = createSplitProps()(props, [
+    "aria-describedby",
+    "aria-invalid",
+    "aria-label",
+    "aria-labelledby",
+    "defaultChecked",
+    "defaultValue",
+    "dir",
+    "disabled",
+    "focusable",
+    "form",
+    "getRootNode",
+    "id",
+    "ids",
+    "indeterminate",
+    "invalid",
+    "name",
+    "onChange",
+    "readOnly",
+    "required",
+    "value"
+  ]);
+  const checkbox2 = useCheckbox(useCheckboxProps);
+  return <CheckboxProvider value={checkbox2}><ark.label {...checkbox2().rootProps} {...labelprops} /></CheckboxProvider>;
+};
+
+// src/checkbox/checkbox-control.tsx
+var CheckboxControl = (props) => {
+  const checkbox2 = useCheckboxContext();
+  return <ark.div {...checkbox2().controlProps} {...props} />;
+};
+
+// src/checkbox/checkbox-input.tsx
+var CheckboxInput = (props) => {
+  const checkbox2 = useCheckboxContext();
+  return <ark.input {...checkbox2().inputProps} {...props} />;
+};
+
+// src/checkbox/checkbox-label.tsx
+var CheckboxLabel = (props) => {
+  const checkbox2 = useCheckboxContext();
+  return <ark.label {...checkbox2().labelProps} {...props} />;
+};
+
 // src/number-input/number-input-context.ts
@@ -122,9 +185,9 @@ var [NumberInputProvider, useNumberInputContext] = createContext({
 import * as numberInput from "@zag-js/number-input";
-import { normalizeProps as normalizeProps2, useMachine as useMachine2 } from "@zag-js/solid";
-import { createMemo as createMemo2, createUniqueId as createUniqueId2, mergeProps as mergeProps3 } from "solid-js";
+import { normalizeProps as normalizeProps3, useMachine as useMachine3 } from "@zag-js/solid";
+import { createMemo as createMemo3, createUniqueId as createUniqueId3, mergeProps as mergeProps4 } from "solid-js";
 var useNumberInput = (props) => {
-  const initialContext = mergeProps3({ id: createUniqueId2(), value: props.defaultValue }, props);
-  const context = mergeProps3(initialContext, { value: props.value });
-  const [state, send] = useMachine2(numberInput.machine(initialContext), { context });
-  return createMemo2(() => numberInput.connect(state, send, normalizeProps2));
+  const initialContext = mergeProps4({ id: createUniqueId3(), value: props.defaultValue }, props);
+  const context = mergeProps4(initialContext, { value: props.value });
+  const [state, send] = useMachine3(numberInput.machine(initialContext), { context });
+  return createMemo3(() => numberInput.connect(state, send, normalizeProps3));
 };
@@ -200,8 +263,8 @@
 import * as pinInput from "@zag-js/pin-input";
-import { normalizeProps as normalizeProps3, useMachine as useMachine3 } from "@zag-js/solid";
-import { createMemo as createMemo3, createUniqueId as createUniqueId3 } from "solid-js";
+import { normalizeProps as normalizeProps4, useMachine as useMachine4 } from "@zag-js/solid";
+import { createMemo as createMemo4, createUniqueId as createUniqueId4 } from "solid-js";
 var usePinInput = (props) => {
-  const [state, send] = useMachine3(
+  const [state, send] = useMachine4(
     pinInput.machine({
-      id: createUniqueId3(),
+      id: createUniqueId4(),
       ...props,
@@ -211,3 +274,3 @@ value: props.defaultValue ?? props.value ?? []
   );
-  return createMemo3(() => pinInput.connect(state, send, normalizeProps3));
+  return createMemo4(() => pinInput.connect(state, send, normalizeProps4));
 };
@@ -293,10 +356,10 @@
 // src/tabs/use-tabs.ts
-import { normalizeProps as normalizeProps4, useMachine as useMachine4 } from "@zag-js/solid";
+import { normalizeProps as normalizeProps5, useMachine as useMachine5 } from "@zag-js/solid";
 import * as tabs from "@zag-js/tabs";
-import { createMemo as createMemo4, createUniqueId as createUniqueId4, mergeProps as mergeProps4 } from "solid-js";
+import { createMemo as createMemo5, createUniqueId as createUniqueId5, mergeProps as mergeProps5 } from "solid-js";
 var useTabs = (props) => {
-  const initialContext = mergeProps4({ id: createUniqueId4(), value: props.defaultValue }, props);
-  const context = mergeProps4(initialContext, { value: props.value });
-  const [state, send] = useMachine4(tabs.machine(initialContext), { context });
-  return createMemo4(() => tabs.connect(state, send, normalizeProps4));
+  const initialContext = mergeProps5({ id: createUniqueId5(), value: props.defaultValue }, props);
+  const context = mergeProps5(initialContext, { value: props.value });
+  const [state, send] = useMachine5(tabs.machine(initialContext), { context });
+  return createMemo5(() => tabs.connect(state, send, normalizeProps5));
 };
@@ -333,9 +396,9 @@
 // src/tooltip/use-tooltip.ts
-import { normalizeProps as normalizeProps5, useMachine as useMachine5 } from "@zag-js/solid";
+import { normalizeProps as normalizeProps6, useMachine as useMachine6 } from "@zag-js/solid";
 import * as tooltip from "@zag-js/tooltip";
-import { createMemo as createMemo5, createUniqueId as createUniqueId5, mergeProps as mergeProps5 } from "solid-js";
+import { createMemo as createMemo6, createUniqueId as createUniqueId6, mergeProps as mergeProps6 } from "solid-js";
 var useTooltip = (props) => {
-  const context = mergeProps5({ id: createUniqueId5() }, props);
-  const [state, send] = useMachine5(tooltip.machine(context), { context });
-  return createMemo5(() => tooltip.connect(state, send, normalizeProps5));
+  const context = mergeProps6({ id: createUniqueId6() }, props);
+  const [state, send] = useMachine6(tooltip.machine(context), { context });
+  return createMemo6(() => tooltip.connect(state, send, normalizeProps6));
 };
@@ -409,2 +472,6 @@
   AccordionPanel,
+  Checkbox,
+  CheckboxControl,
+  CheckboxInput,
+  CheckboxLabel,
   NumberInput,
@@ -430,2 +497,3 @@ NumberInputDecrementButton,
   useAccordionItemContext,
+  useCheckbox,
   usePinInput,
@@ -432,0 +500,0 @@ useTabs,

package.json

 {
   "name": "@ark-ui/solid",
-  "version": "0.0.0-rc-20221128131722",
+  "version": "0.0.0-rc-20221128132237",
   "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

45190

increased by14.97%

Lines of code

1163

increased by15.61%

No dependency changes