@ark-ui/solid 0.3.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/README.md +1 -0
  2. package/dist/accordion/accordion-context.d.ts +3 -11
  3. package/dist/accordion/index.d.ts +0 -1
  4. package/dist/accordion/use-accordion.cjs +1 -1
  5. package/dist/accordion/use-accordion.d.ts +4 -9
  6. package/dist/accordion/use-accordion.mjs +2 -2
  7. package/dist/carousel/use-carousel.cjs +1 -1
  8. package/dist/carousel/use-carousel.mjs +2 -2
  9. package/dist/checkbox/checkbox-context.d.ts +11 -12
  10. package/dist/checkbox/checkbox.cjs +1 -1
  11. package/dist/checkbox/checkbox.mjs +1 -1
  12. package/dist/checkbox/index.d.ts +1 -0
  13. package/dist/checkbox/use-checkbox.cjs +1 -1
  14. package/dist/checkbox/use-checkbox.d.ts +6 -6
  15. package/dist/checkbox/use-checkbox.mjs +2 -2
  16. package/dist/combobox/use-combobox.cjs +1 -1
  17. package/dist/combobox/use-combobox.d.ts +4 -4
  18. package/dist/combobox/use-combobox.mjs +2 -2
  19. package/dist/dialog/use-dialog.cjs +1 -1
  20. package/dist/dialog/use-dialog.mjs +2 -2
  21. package/dist/editable/editable-edit-trigger.cjs +2 -2
  22. package/dist/editable/editable-edit-trigger.mjs +1 -1
  23. package/dist/editable/editable-preview.cjs +2 -2
  24. package/dist/editable/editable-preview.mjs +1 -1
  25. package/dist/editable/editable-submit-trigger.cjs +2 -2
  26. package/dist/editable/editable-submit-trigger.mjs +1 -1
  27. package/dist/editable/use-editable.cjs +1 -1
  28. package/dist/editable/use-editable.mjs +2 -2
  29. package/dist/hover-card/hover-card.cjs +6 -4
  30. package/dist/hover-card/hover-card.d.ts +2 -2
  31. package/dist/hover-card/hover-card.mjs +6 -4
  32. package/dist/hover-card/use-hover-card.cjs +1 -1
  33. package/dist/hover-card/use-hover-card.mjs +2 -2
  34. package/dist/index.cjs +15 -2
  35. package/dist/index.d.ts +1 -0
  36. package/dist/index.mjs +6 -1
  37. package/dist/menu/use-menu.cjs +1 -1
  38. package/dist/menu/use-menu.mjs +2 -2
  39. package/dist/number-input/use-number-input.cjs +1 -1
  40. package/dist/number-input/use-number-input.mjs +2 -2
  41. package/dist/pagination/use-pagination.cjs +1 -1
  42. package/dist/pagination/use-pagination.mjs +2 -2
  43. package/dist/pin-input/use-pin-input.cjs +1 -1
  44. package/dist/pin-input/use-pin-input.mjs +2 -2
  45. package/dist/popover/use-popover.cjs +1 -1
  46. package/dist/popover/use-popover.mjs +2 -2
  47. package/dist/pressable/use-pressable.cjs +1 -1
  48. package/dist/pressable/use-pressable.d.ts +1 -1
  49. package/dist/pressable/use-pressable.mjs +2 -2
  50. package/dist/radio-group/radio-group-context.d.ts +2 -0
  51. package/dist/radio-group/use-radio-group.cjs +1 -1
  52. package/dist/radio-group/use-radio-group.d.ts +1 -0
  53. package/dist/radio-group/use-radio-group.mjs +2 -2
  54. package/dist/range-slider/use-range-slider.cjs +1 -1
  55. package/dist/range-slider/use-range-slider.mjs +2 -2
  56. package/dist/rating-group/rating-context.d.ts +2 -13
  57. package/dist/rating-group/rating-group-context.d.ts +5 -20
  58. package/dist/rating-group/rating.cjs +1 -1
  59. package/dist/rating-group/rating.d.ts +2 -2
  60. package/dist/rating-group/rating.mjs +1 -1
  61. package/dist/rating-group/use-rating-group.cjs +1 -1
  62. package/dist/rating-group/use-rating-group.d.ts +2 -10
  63. package/dist/rating-group/use-rating-group.mjs +2 -2
  64. package/dist/select/use-select.cjs +1 -1
  65. package/dist/select/use-select.mjs +2 -2
  66. package/dist/slider/use-slider.cjs +1 -1
  67. package/dist/slider/use-slider.mjs +2 -2
  68. package/dist/splitter/use-splitter.cjs +1 -1
  69. package/dist/splitter/use-splitter.mjs +2 -2
  70. package/dist/switch/index.d.ts +6 -0
  71. package/dist/switch/switch-context.cjs +13 -0
  72. package/dist/switch/switch-context.d.ts +27 -0
  73. package/dist/switch/switch-context.mjs +8 -0
  74. package/dist/switch/switch-control.cjs +16 -0
  75. package/dist/switch/switch-control.d.ts +4 -0
  76. package/dist/switch/switch-control.mjs +12 -0
  77. package/dist/switch/switch-input.cjs +16 -0
  78. package/dist/switch/switch-input.d.ts +4 -0
  79. package/dist/switch/switch-input.mjs +12 -0
  80. package/dist/switch/switch-label.cjs +16 -0
  81. package/dist/switch/switch-label.d.ts +4 -0
  82. package/dist/switch/switch-label.mjs +12 -0
  83. package/dist/switch/switch-thumb.cjs +16 -0
  84. package/dist/switch/switch-thumb.d.ts +4 -0
  85. package/dist/switch/switch-thumb.mjs +12 -0
  86. package/dist/switch/switch.anatomy.d.ts +1 -0
  87. package/dist/switch/switch.cjs +30 -0
  88. package/dist/switch/switch.d.ts +9 -0
  89. package/dist/switch/switch.mjs +26 -0
  90. package/dist/switch/use-switch.cjs +36 -0
  91. package/dist/switch/use-switch.d.ts +17 -0
  92. package/dist/switch/use-switch.mjs +13 -0
  93. package/dist/tabs/tab-trigger.d.ts +2 -4
  94. package/dist/tabs/tabs-context.d.ts +7 -9
  95. package/dist/tabs/use-tabs.cjs +1 -1
  96. package/dist/tabs/use-tabs.d.ts +3 -5
  97. package/dist/tabs/use-tabs.mjs +2 -2
  98. package/dist/tags-input/use-tags-input.cjs +1 -1
  99. package/dist/tags-input/use-tags-input.mjs +2 -2
  100. package/dist/tooltip/use-tooltip.cjs +1 -1
  101. package/dist/tooltip/use-tooltip.mjs +2 -2
  102. package/package.json +46 -44
  103. package/dist/accordion/accordion-icon.cjs +0 -10
  104. package/dist/accordion/accordion-icon.d.ts +0 -4
  105. package/dist/accordion/accordion-icon.mjs +0 -6
package/README.md CHANGED
@@ -34,6 +34,7 @@ At the moment, `@ark-ui/solid`offers the following components:
34
34
  - [Select](https://ark-ui.com/docs/solid/components/select)
35
35
  - [Slider](https://ark-ui.com/docs/solid/components/slider)
36
36
  - [Splitter](https://ark-ui.com/docs/solid/components/splitter)
37
+ - [Switch](https://ark-ui.com/docs/solid/components/switch)
37
38
  - [Tabs](https://ark-ui.com/docs/solid/components/tabs)
38
39
  - [Tags Input](https://ark-ui.com/docs/solid/components/tags-input)
39
40
  - [Toast](https://ark-ui.com/docs/solid/components/toast)
@@ -1,4 +1,4 @@
1
- import type { ItemProps } from '@zag-js/accordion/dist/accordion.types';
1
+ import type { ItemProps, ItemState } from '@zag-js/accordion/dist/accordion.types';
2
2
  import type { Accessor, JSX } from 'solid-js';
3
3
  import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
4
4
  import { type UseAccordionReturn } from './use-accordion';
@@ -11,11 +11,7 @@ export declare const AccordionProvider: ContextProviderComponent<Accessor<{
11
11
  focusedValue: string | null;
12
12
  value: string | string[] | null;
13
13
  setValue: (value: string | string[]) => void;
14
- getItemState: (props: ItemProps) => {
15
- isOpen: boolean;
16
- isFocused: boolean;
17
- isDisabled: boolean;
18
- };
14
+ getItemState: (props: ItemProps) => ItemState;
19
15
  }>>, useAccordionContext: () => Accessor<{
20
16
  rootProps: JSX.HTMLAttributes<any>;
21
17
  getItemProps(props: ItemProps): JSX.HTMLAttributes<any>;
@@ -24,9 +20,5 @@ export declare const AccordionProvider: ContextProviderComponent<Accessor<{
24
20
  focusedValue: string | null;
25
21
  value: string | string[] | null;
26
22
  setValue: (value: string | string[]) => void;
27
- getItemState: (props: ItemProps) => {
28
- isOpen: boolean;
29
- isFocused: boolean;
30
- isDisabled: boolean;
31
- };
23
+ getItemState: (props: ItemProps) => ItemState;
32
24
  }>;
@@ -1,6 +1,5 @@
1
1
  export { Accordion, type AccordionProps } from './accordion';
2
2
  export { AccordionContent, type AccordionContentProps } from './accordion-content';
3
- export { AccordionIcon, type AccordionIconProps } from './accordion-icon';
4
3
  export { AccordionItem, type AccordionItemProps } from './accordion-item';
5
4
  export { AccordionTrigger, type AccordionTriggerProps } from './accordion-trigger';
6
5
  export { accordionAnatomy } from './accordion.anatomy';
@@ -28,7 +28,7 @@ const accordion__namespace = /*#__PURE__*/_interopNamespaceDefault(accordion);
28
28
 
29
29
  const useAccordion = (props) => {
30
30
  const getRootNode = environmentContext.useEnvironmentContext();
31
- const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
31
+ const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
32
32
  const [state, send] = solid.useMachine(accordion__namespace.machine(context), { context });
33
33
  return solidJs.createMemo(() => accordion__namespace.connect(state, send, solid.normalizeProps));
34
34
  };
@@ -1,4 +1,3 @@
1
- import type { ItemProps } from '@zag-js/accordion/dist/accordion.types';
2
1
  import type { Accessor, JSX } from 'solid-js';
3
2
  import * as accordion from '@zag-js/accordion';
4
3
  import { type Optional } from '../types';
@@ -6,15 +5,11 @@ export type UseAccordionProps = Optional<accordion.Context, 'id'>;
6
5
  export type UseAccordionReturn = ReturnType<typeof useAccordion>;
7
6
  export declare const useAccordion: (props: UseAccordionProps) => Accessor<{
8
7
  rootProps: JSX.HTMLAttributes<any>;
9
- getItemProps(props: ItemProps): JSX.HTMLAttributes<any>;
10
- getContentProps(props: ItemProps): JSX.HTMLAttributes<any>;
11
- getTriggerProps(props: ItemProps): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
8
+ getItemProps(props: accordion.ItemProps): JSX.HTMLAttributes<any>;
9
+ getContentProps(props: accordion.ItemProps): JSX.HTMLAttributes<any>;
10
+ getTriggerProps(props: accordion.ItemProps): JSX.ButtonHTMLAttributes<HTMLButtonElement>;
12
11
  focusedValue: string | null;
13
12
  value: string | string[] | null;
14
13
  setValue: (value: string | string[]) => void;
15
- getItemState: (props: ItemProps) => {
16
- isOpen: boolean;
17
- isFocused: boolean;
18
- isDisabled: boolean;
19
- };
14
+ getItemState: (props: accordion.ItemProps) => accordion.ItemState;
20
15
  }>;
@@ -1,6 +1,6 @@
1
1
  import * as accordion from '@zag-js/accordion';
2
- import { useMachine, normalizeProps } from '@zag-js/solid';
3
- import { mergeProps, createUniqueId, createMemo } from 'solid-js';
2
+ import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
3
+ import { createUniqueId, createMemo } from 'solid-js';
4
4
  import { useEnvironmentContext } from '../environment/environment-context.mjs';
5
5
 
6
6
  const useAccordion = (props) => {
@@ -28,7 +28,7 @@ const carousel__namespace = /*#__PURE__*/_interopNamespaceDefault(carousel);
28
28
 
29
29
  const useCarousel = (props) => {
30
30
  const getRootNode = environmentContext.useEnvironmentContext();
31
- const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
31
+ const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
32
32
  const [state, send] = solid.useMachine(carousel__namespace.machine(context), { context });
33
33
  return solidJs.createMemo(() => carousel__namespace.connect(state, send, solid.normalizeProps));
34
34
  };
@@ -1,6 +1,6 @@
1
1
  import * as carousel from '@zag-js/carousel';
2
- import { useMachine, normalizeProps } from '@zag-js/solid';
3
- import { mergeProps, createUniqueId, createMemo } from 'solid-js';
2
+ import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
3
+ import { createUniqueId, createMemo } from 'solid-js';
4
4
  import { useEnvironmentContext } from '../environment/environment-context.mjs';
5
5
 
6
6
  const useCarousel = (props) => {
@@ -1,3 +1,4 @@
1
+ import type { CheckedState } from '@zag-js/checkbox/dist/checkbox.types';
1
2
  import type { Accessor, JSX } from 'solid-js';
2
3
  import type { ContextProviderComponent } from 'solid-js/types/reactive/signal';
3
4
  import { type UseCheckboxReturn } from './use-checkbox';
@@ -5,12 +6,11 @@ export type CheckboxContext = UseCheckboxReturn;
5
6
  export declare const CheckboxProvider: ContextProviderComponent<Accessor<{
6
7
  isChecked: boolean;
7
8
  isDisabled: boolean | undefined;
8
- isIndeterminate: boolean | undefined;
9
- isFocused: boolean;
10
- isReadOnly: boolean | undefined;
11
- view: string;
12
- setChecked(checked: boolean): void;
13
- setIndeterminate(indeterminate: boolean): void;
9
+ isIndeterminate: boolean;
10
+ isFocused: boolean | undefined;
11
+ checkedState: CheckedState;
12
+ setChecked(checked: CheckedState): void;
13
+ toggleChecked(): void;
14
14
  rootProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
15
15
  labelProps: JSX.HTMLAttributes<any>;
16
16
  controlProps: JSX.HTMLAttributes<any>;
@@ -18,12 +18,11 @@ export declare const CheckboxProvider: ContextProviderComponent<Accessor<{
18
18
  }>>, useCheckboxContext: () => Accessor<{
19
19
  isChecked: boolean;
20
20
  isDisabled: boolean | undefined;
21
- isIndeterminate: boolean | undefined;
22
- isFocused: boolean;
23
- isReadOnly: boolean | undefined;
24
- view: string;
25
- setChecked(checked: boolean): void;
26
- setIndeterminate(indeterminate: boolean): void;
21
+ isIndeterminate: boolean;
22
+ isFocused: boolean | undefined;
23
+ checkedState: CheckedState;
24
+ setChecked(checked: CheckedState): void;
25
+ toggleChecked(): void;
27
26
  rootProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
28
27
  labelProps: JSX.HTMLAttributes<any>;
29
28
  controlProps: JSX.HTMLAttributes<any>;
@@ -11,7 +11,7 @@ const checkboxContext = require('./checkbox-context.cjs');
11
11
  const useCheckbox = require('./use-checkbox.cjs');
12
12
 
13
13
  const Checkbox = props => {
14
- const [useCheckboxProps, labelprops] = createSplitProps.createSplitProps()(props, ['aria-describedby', 'aria-label', 'aria-labelledby', 'checked', 'dir', 'disabled', 'focusable', 'form', 'getRootNode', 'id', 'ids', 'indeterminate', 'invalid', 'name', 'onChange', 'readOnly', 'required', 'value']);
14
+ const [useCheckboxProps, labelprops] = createSplitProps.createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'name', 'onChange', 'required', 'value']);
15
15
  const api = useCheckbox.useCheckbox(useCheckboxProps);
16
16
  const rootProps = solid.mergeProps(() => api().rootProps, labelprops);
17
17
  const getChildren = () => runIfFn.runIfFn(props.children, api);
@@ -7,7 +7,7 @@ import { CheckboxProvider } from './checkbox-context.mjs';
7
7
  import { useCheckbox } from './use-checkbox.mjs';
8
8
 
9
9
  const Checkbox = props => {
10
- const [useCheckboxProps, labelprops] = createSplitProps()(props, ['aria-describedby', 'aria-label', 'aria-labelledby', 'checked', 'dir', 'disabled', 'focusable', 'form', 'getRootNode', 'id', 'ids', 'indeterminate', 'invalid', 'name', 'onChange', 'readOnly', 'required', 'value']);
10
+ const [useCheckboxProps, labelprops] = createSplitProps()(props, ['checked', 'dir', 'disabled', 'form', 'getRootNode', 'id', 'ids', 'invalid', 'name', 'onChange', 'required', 'value']);
11
11
  const api = useCheckbox(useCheckboxProps);
12
12
  const rootProps = mergeProps(() => api().rootProps, labelprops);
13
13
  const getChildren = () => runIfFn(props.children, api);
@@ -1,3 +1,4 @@
1
+ export type { CheckedState } from '@zag-js/checkbox/dist/checkbox.types';
1
2
  export { Checkbox, type CheckboxProps } from './checkbox';
2
3
  export { CheckboxControl, type CheckboxControlProps } from './checkbox-control';
3
4
  export { CheckboxInput, type CheckboxInputProps } from './checkbox-input';
@@ -28,7 +28,7 @@ const checkbox__namespace = /*#__PURE__*/_interopNamespaceDefault(checkbox);
28
28
 
29
29
  const useCheckbox = (props) => {
30
30
  const getRootNode = environmentContext.useEnvironmentContext();
31
- const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
31
+ const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
32
32
  const [state, send] = solid.useMachine(checkbox__namespace.machine(context), { context });
33
33
  return solidJs.createMemo(() => checkbox__namespace.connect(state, send, solid.normalizeProps));
34
34
  };
@@ -1,3 +1,4 @@
1
+ import type { CheckedState } from '@zag-js/checkbox/dist/checkbox.types';
1
2
  import type { Accessor, JSX } from 'solid-js';
2
3
  import * as checkbox from '@zag-js/checkbox';
3
4
  import { type Optional } from '../types';
@@ -6,12 +7,11 @@ export type UseCheckboxReturn = ReturnType<typeof useCheckbox>;
6
7
  export declare const useCheckbox: (props: UseCheckboxProps) => Accessor<{
7
8
  isChecked: boolean;
8
9
  isDisabled: boolean | undefined;
9
- isIndeterminate: boolean | undefined;
10
- isFocused: boolean;
11
- isReadOnly: boolean | undefined;
12
- view: string;
13
- setChecked(checked: boolean): void;
14
- setIndeterminate(indeterminate: boolean): void;
10
+ isIndeterminate: boolean;
11
+ isFocused: boolean | undefined;
12
+ checkedState: CheckedState;
13
+ setChecked(checked: CheckedState): void;
14
+ toggleChecked(): void;
15
15
  rootProps: JSX.LabelHTMLAttributes<HTMLLabelElement>;
16
16
  labelProps: JSX.HTMLAttributes<any>;
17
17
  controlProps: JSX.HTMLAttributes<any>;
@@ -1,6 +1,6 @@
1
1
  import * as checkbox from '@zag-js/checkbox';
2
- import { useMachine, normalizeProps } from '@zag-js/solid';
3
- import { mergeProps, createUniqueId, createMemo } from 'solid-js';
2
+ import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
3
+ import { createUniqueId, createMemo } from 'solid-js';
4
4
  import { useEnvironmentContext } from '../environment/environment-context.mjs';
5
5
 
6
6
  const useCheckbox = (props) => {
@@ -28,7 +28,7 @@ const combobox__namespace = /*#__PURE__*/_interopNamespaceDefault(combobox);
28
28
 
29
29
  const useCombobox = (props) => {
30
30
  const getRootNode = environmentContext.useEnvironmentContext();
31
- const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
31
+ const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
32
32
  const [state, send] = solid.useMachine(combobox__namespace.machine(context), { context });
33
33
  return solidJs.createMemo(() => combobox__namespace.connect(state, send, solid.normalizeProps));
34
34
  };
@@ -1,4 +1,4 @@
1
- import type { OptionData, OptionProps, OptionGroupProps } from '@zag-js/combobox/dist/combobox.types';
1
+ import type { OptionData } from '@zag-js/combobox/dist/combobox.types';
2
2
  import type { Accessor, JSX } from 'solid-js';
3
3
  import * as combobox from '@zag-js/combobox';
4
4
  import { type Optional } from '../types';
@@ -23,11 +23,11 @@ export declare const useCombobox: (props: UseComboboxProps) => Accessor<{
23
23
  triggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
24
24
  contentProps: JSX.HTMLAttributes<any>;
25
25
  clearTriggerProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
26
- getOptionState(props: OptionProps): {
26
+ getOptionState(props: combobox.OptionProps): {
27
27
  disabled: boolean | undefined;
28
28
  focused: boolean;
29
29
  checked: boolean;
30
30
  };
31
- getOptionProps(props: OptionProps): JSX.HTMLAttributes<any>;
32
- getOptionGroupProps(props: OptionGroupProps): JSX.HTMLAttributes<any>;
31
+ getOptionProps(props: combobox.OptionProps): JSX.HTMLAttributes<any>;
32
+ getOptionGroupProps(props: combobox.OptionGroupProps): JSX.HTMLAttributes<any>;
33
33
  }>;
@@ -1,6 +1,6 @@
1
1
  import * as combobox from '@zag-js/combobox';
2
- import { useMachine, normalizeProps } from '@zag-js/solid';
3
- import { mergeProps, createUniqueId, createMemo } from 'solid-js';
2
+ import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
3
+ import { createUniqueId, createMemo } from 'solid-js';
4
4
  import { useEnvironmentContext } from '../environment/environment-context.mjs';
5
5
 
6
6
  const useCombobox = (props) => {
@@ -28,7 +28,7 @@ const dialog__namespace = /*#__PURE__*/_interopNamespaceDefault(dialog);
28
28
 
29
29
  const useDialog = (props) => {
30
30
  const getRootNode = environmentContext.useEnvironmentContext();
31
- const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
31
+ const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
32
32
  const [state, send] = solid.useMachine(dialog__namespace.machine(context), { context });
33
33
  return solidJs.createMemo(() => dialog__namespace.connect(state, send, solid.normalizeProps));
34
34
  };
@@ -1,6 +1,6 @@
1
1
  import * as dialog from '@zag-js/dialog';
2
- import { useMachine, normalizeProps } from '@zag-js/solid';
3
- import { mergeProps, createUniqueId, createMemo } from 'solid-js';
2
+ import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
3
+ import { createUniqueId, createMemo } from 'solid-js';
4
4
  import { useEnvironmentContext } from '../environment/environment-context.mjs';
5
5
 
6
6
  const useDialog = (props) => {
@@ -3,13 +3,13 @@
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
5
  const web = require('solid-js/web');
6
- const solidJs = require('solid-js');
6
+ const solid = require('@zag-js/solid');
7
7
  const factory = require('../factory.cjs');
8
8
  const editableContext = require('./editable-context.cjs');
9
9
 
10
10
  const EditableEditTrigger = props => {
11
11
  const editable = editableContext.useEditableContext();
12
- const triggerProps = solidJs.mergeProps(() => editable().editTriggerProps, props);
12
+ const triggerProps = solid.mergeProps(() => editable().editTriggerProps, props);
13
13
  return web.createComponent(factory.ark.button, triggerProps);
14
14
  };
15
15
 
@@ -1,5 +1,5 @@
1
1
  import { createComponent } from 'solid-js/web';
2
- import { mergeProps } from 'solid-js';
2
+ import { mergeProps } from '@zag-js/solid';
3
3
  import { ark } from '../factory.mjs';
4
4
  import { useEditableContext } from './editable-context.mjs';
5
5
 
@@ -3,13 +3,13 @@
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
5
  const web = require('solid-js/web');
6
- const solidJs = require('solid-js');
6
+ const solid = require('@zag-js/solid');
7
7
  const factory = require('../factory.cjs');
8
8
  const editableContext = require('./editable-context.cjs');
9
9
 
10
10
  const EditablePreview = props => {
11
11
  const editable = editableContext.useEditableContext();
12
- const previewProps = solidJs.mergeProps(() => editable().previewProps, props);
12
+ const previewProps = solid.mergeProps(() => editable().previewProps, props);
13
13
  return web.createComponent(factory.ark.span, previewProps);
14
14
  };
15
15
 
@@ -1,5 +1,5 @@
1
1
  import { createComponent } from 'solid-js/web';
2
- import { mergeProps } from 'solid-js';
2
+ import { mergeProps } from '@zag-js/solid';
3
3
  import { ark } from '../factory.mjs';
4
4
  import { useEditableContext } from './editable-context.mjs';
5
5
 
@@ -3,13 +3,13 @@
3
3
  Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
5
  const web = require('solid-js/web');
6
- const solidJs = require('solid-js');
6
+ const solid = require('@zag-js/solid');
7
7
  const factory = require('../factory.cjs');
8
8
  const editableContext = require('./editable-context.cjs');
9
9
 
10
10
  const EditableSubmitTrigger = props => {
11
11
  const dialog = editableContext.useEditableContext();
12
- const triggerProps = solidJs.mergeProps(() => dialog().submitTriggerProps, props);
12
+ const triggerProps = solid.mergeProps(() => dialog().submitTriggerProps, props);
13
13
  return web.createComponent(factory.ark.button, triggerProps);
14
14
  };
15
15
 
@@ -1,5 +1,5 @@
1
1
  import { createComponent } from 'solid-js/web';
2
- import { mergeProps } from 'solid-js';
2
+ import { mergeProps } from '@zag-js/solid';
3
3
  import { ark } from '../factory.mjs';
4
4
  import { useEditableContext } from './editable-context.mjs';
5
5
 
@@ -28,7 +28,7 @@ const editable__namespace = /*#__PURE__*/_interopNamespaceDefault(editable);
28
28
 
29
29
  const useEditable = (props) => {
30
30
  const getRootNode = environmentContext.useEnvironmentContext();
31
- const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
31
+ const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
32
32
  const [state, send] = solid.useMachine(editable__namespace.machine(context), { context });
33
33
  return solidJs.createMemo(() => editable__namespace.connect(state, send, solid.normalizeProps));
34
34
  };
@@ -1,6 +1,6 @@
1
1
  import * as editable from '@zag-js/editable';
2
- import { useMachine, normalizeProps } from '@zag-js/solid';
3
- import { mergeProps, createUniqueId, createMemo } from 'solid-js';
2
+ import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
3
+ import { createUniqueId, createMemo } from 'solid-js';
4
4
  import { useEnvironmentContext } from '../environment/environment-context.mjs';
5
5
 
6
6
  const useEditable = (props) => {
@@ -4,16 +4,18 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
4
 
5
5
  const web = require('solid-js/web');
6
6
  const createSplitProps = require('../create-split-props.cjs');
7
+ const runIfFn = require('../run-if-fn.cjs');
7
8
  const hoverCardContext = require('./hover-card-context.cjs');
8
9
  const useHoverCard = require('./use-hover-card.cjs');
9
10
 
10
11
  const HoverCard = props => {
11
- const [useHoverCardProps, restProps] = createSplitProps.createSplitProps()(props, ['closeDelay', 'dir', 'getRootNode', 'id', 'ids', 'onClose', 'onOpen', 'open', 'openDelay', 'positioning']);
12
- const hoverCard = useHoverCard.useHoverCard(useHoverCardProps);
12
+ const [hoverCardProps, localProps] = createSplitProps.createSplitProps()(props, ['closeDelay', 'dir', 'getRootNode', 'id', 'ids', 'onClose', 'onOpen', 'open', 'openDelay', 'positioning']);
13
+ const api = useHoverCard.useHoverCard(hoverCardProps);
14
+ const getChildren = () => runIfFn.runIfFn(localProps.children, api);
13
15
  return web.createComponent(hoverCardContext.HoverCardProvider, {
14
- value: hoverCard,
16
+ value: api,
15
17
  get children() {
16
- return restProps.children;
18
+ return getChildren();
17
19
  }
18
20
  });
19
21
  };
@@ -1,6 +1,6 @@
1
1
  import { type JSX } from 'solid-js';
2
- import { type UseHoverCardProps } from './use-hover-card';
2
+ import { type UseHoverCardProps, type UseHoverCardReturn } from './use-hover-card';
3
3
  export type HoverCardProps = UseHoverCardProps & {
4
- children: JSX.Element;
4
+ children?: JSX.Element | ((state: UseHoverCardReturn) => JSX.Element);
5
5
  };
6
6
  export declare const HoverCard: (props: HoverCardProps) => JSX.Element;
@@ -1,15 +1,17 @@
1
1
  import { createComponent } from 'solid-js/web';
2
2
  import { createSplitProps } from '../create-split-props.mjs';
3
+ import { runIfFn } from '../run-if-fn.mjs';
3
4
  import { HoverCardProvider } from './hover-card-context.mjs';
4
5
  import { useHoverCard } from './use-hover-card.mjs';
5
6
 
6
7
  const HoverCard = props => {
7
- const [useHoverCardProps, restProps] = createSplitProps()(props, ['closeDelay', 'dir', 'getRootNode', 'id', 'ids', 'onClose', 'onOpen', 'open', 'openDelay', 'positioning']);
8
- const hoverCard = useHoverCard(useHoverCardProps);
8
+ const [hoverCardProps, localProps] = createSplitProps()(props, ['closeDelay', 'dir', 'getRootNode', 'id', 'ids', 'onClose', 'onOpen', 'open', 'openDelay', 'positioning']);
9
+ const api = useHoverCard(hoverCardProps);
10
+ const getChildren = () => runIfFn(localProps.children, api);
9
11
  return createComponent(HoverCardProvider, {
10
- value: hoverCard,
12
+ value: api,
11
13
  get children() {
12
- return restProps.children;
14
+ return getChildren();
13
15
  }
14
16
  });
15
17
  };
@@ -28,7 +28,7 @@ const hoverCard__namespace = /*#__PURE__*/_interopNamespaceDefault(hoverCard);
28
28
 
29
29
  const useHoverCard = (props) => {
30
30
  const getRootNode = environmentContext.useEnvironmentContext();
31
- const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
31
+ const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
32
32
  const [state, send] = solid.useMachine(hoverCard__namespace.machine(context), { context });
33
33
  return solidJs.createMemo(() => hoverCard__namespace.connect(state, send, solid.normalizeProps));
34
34
  };
@@ -1,6 +1,6 @@
1
1
  import * as hoverCard from '@zag-js/hover-card';
2
- import { useMachine, normalizeProps } from '@zag-js/solid';
3
- import { mergeProps, createUniqueId, createMemo } from 'solid-js';
2
+ import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
3
+ import { createUniqueId, createMemo } from 'solid-js';
4
4
  import { useEnvironmentContext } from '../environment/environment-context.mjs';
5
5
 
6
6
  const useHoverCard = (props) => {
package/dist/index.cjs CHANGED
@@ -5,7 +5,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
5
5
  const anatomy = require('@zag-js/anatomy');
6
6
  const accordion = require('./accordion/accordion.cjs');
7
7
  const accordionContent = require('./accordion/accordion-content.cjs');
8
- const accordionIcon = require('./accordion/accordion-icon.cjs');
9
8
  const accordionItem = require('./accordion/accordion-item.cjs');
10
9
  const accordionTrigger = require('./accordion/accordion-trigger.cjs');
11
10
  const accordion$1 = require('@zag-js/accordion');
@@ -152,6 +151,12 @@ const splitter = require('./splitter/splitter.cjs');
152
151
  const splitterPanel = require('./splitter/splitter-panel.cjs');
153
152
  const splitterResizeTrigger = require('./splitter/splitter-resize-trigger.cjs');
154
153
  const splitter$1 = require('@zag-js/splitter');
154
+ const _switch = require('./switch/switch.cjs');
155
+ const switchControl = require('./switch/switch-control.cjs');
156
+ const switchInput = require('./switch/switch-input.cjs');
157
+ const switchLabel = require('./switch/switch-label.cjs');
158
+ const switchThumb = require('./switch/switch-thumb.cjs');
159
+ const zagSwitch = require('@zag-js/switch');
155
160
  const tabContent = require('./tabs/tab-content.cjs');
156
161
  const tabIndicator = require('./tabs/tab-indicator.cjs');
157
162
  const tabList = require('./tabs/tab-list.cjs');
@@ -191,7 +196,6 @@ Object.defineProperty(exports, 'createAnatomy', {
191
196
  });
192
197
  exports.Accordion = accordion.Accordion;
193
198
  exports.AccordionContent = accordionContent.AccordionContent;
194
- exports.AccordionIcon = accordionIcon.AccordionIcon;
195
199
  exports.AccordionItem = accordionItem.AccordionItem;
196
200
  exports.AccordionTrigger = accordionTrigger.AccordionTrigger;
197
201
  Object.defineProperty(exports, 'accordionAnatomy', {
@@ -386,6 +390,15 @@ Object.defineProperty(exports, 'splitterAnatomy', {
386
390
  enumerable: true,
387
391
  get: () => splitter$1.anatomy
388
392
  });
393
+ exports.Switch = _switch.Switch;
394
+ exports.SwitchControl = switchControl.SwitchControl;
395
+ exports.SwitchInput = switchInput.SwitchInput;
396
+ exports.SwitchLabel = switchLabel.SwitchLabel;
397
+ exports.SwitchThumb = switchThumb.SwitchThumb;
398
+ Object.defineProperty(exports, 'switchAnatomy', {
399
+ enumerable: true,
400
+ get: () => zagSwitch.anatomy
401
+ });
389
402
  exports.TabContent = tabContent.TabContent;
390
403
  exports.TabIndicator = tabIndicator.TabIndicator;
391
404
  exports.TabList = tabList.TabList;
package/dist/index.d.ts CHANGED
@@ -19,6 +19,7 @@ export * from './rating-group';
19
19
  export * from './select';
20
20
  export * from './slider';
21
21
  export * from './splitter';
22
+ export * from './switch';
22
23
  export * from './tabs';
23
24
  export * from './tags-input';
24
25
  export * from './toast';
package/dist/index.mjs CHANGED
@@ -1,7 +1,6 @@
1
1
  export { createAnatomy } from '@zag-js/anatomy';
2
2
  export { Accordion } from './accordion/accordion.mjs';
3
3
  export { AccordionContent } from './accordion/accordion-content.mjs';
4
- export { AccordionIcon } from './accordion/accordion-icon.mjs';
5
4
  export { AccordionItem } from './accordion/accordion-item.mjs';
6
5
  export { AccordionTrigger } from './accordion/accordion-trigger.mjs';
7
6
  export { anatomy as accordionAnatomy } from '@zag-js/accordion';
@@ -148,6 +147,12 @@ export { Splitter } from './splitter/splitter.mjs';
148
147
  export { SplitterPanel } from './splitter/splitter-panel.mjs';
149
148
  export { SplitterResizeTrigger } from './splitter/splitter-resize-trigger.mjs';
150
149
  export { anatomy as splitterAnatomy } from '@zag-js/splitter';
150
+ export { Switch } from './switch/switch.mjs';
151
+ export { SwitchControl } from './switch/switch-control.mjs';
152
+ export { SwitchInput } from './switch/switch-input.mjs';
153
+ export { SwitchLabel } from './switch/switch-label.mjs';
154
+ export { SwitchThumb } from './switch/switch-thumb.mjs';
155
+ export { anatomy as switchAnatomy } from '@zag-js/switch';
151
156
  export { TabContent } from './tabs/tab-content.mjs';
152
157
  export { TabIndicator } from './tabs/tab-indicator.mjs';
153
158
  export { TabList } from './tabs/tab-list.mjs';
@@ -28,7 +28,7 @@ const menu__namespace = /*#__PURE__*/_interopNamespaceDefault(menu);
28
28
 
29
29
  const useMenu = (props) => {
30
30
  const getRootNode = environmentContext.useEnvironmentContext();
31
- const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
31
+ const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
32
32
  const [state, send, machine] = solid.useMachine(menu__namespace.machine(context), { context });
33
33
  return solidJs.createMemo(() => ({
34
34
  api: () => menu__namespace.connect(state, send, solid.normalizeProps),
@@ -1,6 +1,6 @@
1
1
  import * as menu from '@zag-js/menu';
2
- import { useMachine, normalizeProps } from '@zag-js/solid';
3
- import { mergeProps, createUniqueId, createMemo } from 'solid-js';
2
+ import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
3
+ import { createUniqueId, createMemo } from 'solid-js';
4
4
  import { useEnvironmentContext } from '../environment/environment-context.mjs';
5
5
 
6
6
  const useMenu = (props) => {
@@ -28,7 +28,7 @@ const numberInput__namespace = /*#__PURE__*/_interopNamespaceDefault(numberInput
28
28
 
29
29
  const useNumberInput = (props) => {
30
30
  const getRootNode = environmentContext.useEnvironmentContext();
31
- const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
31
+ const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
32
32
  const [state, send] = solid.useMachine(numberInput__namespace.machine(context), { context });
33
33
  return solidJs.createMemo(() => numberInput__namespace.connect(state, send, solid.normalizeProps));
34
34
  };
@@ -1,6 +1,6 @@
1
1
  import * as numberInput from '@zag-js/number-input';
2
- import { useMachine, normalizeProps } from '@zag-js/solid';
3
- import { mergeProps, createUniqueId, createMemo } from 'solid-js';
2
+ import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
3
+ import { createUniqueId, createMemo } from 'solid-js';
4
4
  import { useEnvironmentContext } from '../environment/environment-context.mjs';
5
5
 
6
6
  const useNumberInput = (props) => {
@@ -28,7 +28,7 @@ const pagination__namespace = /*#__PURE__*/_interopNamespaceDefault(pagination);
28
28
 
29
29
  const usePagination = (props) => {
30
30
  const getRootNode = environmentContext.useEnvironmentContext();
31
- const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
31
+ const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
32
32
  const [state, send] = solid.useMachine(pagination__namespace.machine(context), { context });
33
33
  return solidJs.createMemo(() => pagination__namespace.connect(state, send, solid.normalizeProps));
34
34
  };
@@ -1,6 +1,6 @@
1
1
  import * as pagination from '@zag-js/pagination';
2
- import { useMachine, normalizeProps } from '@zag-js/solid';
3
- import { mergeProps, createUniqueId, createMemo } from 'solid-js';
2
+ import { mergeProps, useMachine, normalizeProps } from '@zag-js/solid';
3
+ import { createUniqueId, createMemo } from 'solid-js';
4
4
  import { useEnvironmentContext } from '../environment/environment-context.mjs';
5
5
 
6
6
  const usePagination = (props) => {
@@ -28,7 +28,7 @@ const pinInput__namespace = /*#__PURE__*/_interopNamespaceDefault(pinInput);
28
28
 
29
29
  const usePinInput = (props) => {
30
30
  const getRootNode = environmentContext.useEnvironmentContext();
31
- const context = solidJs.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
31
+ const context = solid.mergeProps({ id: solidJs.createUniqueId(), getRootNode }, props);
32
32
  const [state, send] = solid.useMachine(pinInput__namespace.machine(context), { context });
33
33
  return solidJs.createMemo(() => pinInput__namespace.connect(state, send, solid.normalizeProps));
34
34
  };