@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.
- package/README.md +1 -0
- package/dist/accordion/accordion-context.d.ts +3 -11
- package/dist/accordion/index.d.ts +0 -1
- package/dist/accordion/use-accordion.cjs +1 -1
- package/dist/accordion/use-accordion.d.ts +4 -9
- package/dist/accordion/use-accordion.mjs +2 -2
- package/dist/carousel/use-carousel.cjs +1 -1
- package/dist/carousel/use-carousel.mjs +2 -2
- package/dist/checkbox/checkbox-context.d.ts +11 -12
- package/dist/checkbox/checkbox.cjs +1 -1
- package/dist/checkbox/checkbox.mjs +1 -1
- package/dist/checkbox/index.d.ts +1 -0
- package/dist/checkbox/use-checkbox.cjs +1 -1
- package/dist/checkbox/use-checkbox.d.ts +6 -6
- package/dist/checkbox/use-checkbox.mjs +2 -2
- package/dist/combobox/use-combobox.cjs +1 -1
- package/dist/combobox/use-combobox.d.ts +4 -4
- package/dist/combobox/use-combobox.mjs +2 -2
- package/dist/dialog/use-dialog.cjs +1 -1
- package/dist/dialog/use-dialog.mjs +2 -2
- package/dist/editable/editable-edit-trigger.cjs +2 -2
- package/dist/editable/editable-edit-trigger.mjs +1 -1
- package/dist/editable/editable-preview.cjs +2 -2
- package/dist/editable/editable-preview.mjs +1 -1
- package/dist/editable/editable-submit-trigger.cjs +2 -2
- package/dist/editable/editable-submit-trigger.mjs +1 -1
- package/dist/editable/use-editable.cjs +1 -1
- package/dist/editable/use-editable.mjs +2 -2
- package/dist/hover-card/hover-card.cjs +6 -4
- package/dist/hover-card/hover-card.d.ts +2 -2
- package/dist/hover-card/hover-card.mjs +6 -4
- package/dist/hover-card/use-hover-card.cjs +1 -1
- package/dist/hover-card/use-hover-card.mjs +2 -2
- package/dist/index.cjs +15 -2
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +6 -1
- package/dist/menu/use-menu.cjs +1 -1
- package/dist/menu/use-menu.mjs +2 -2
- package/dist/number-input/use-number-input.cjs +1 -1
- package/dist/number-input/use-number-input.mjs +2 -2
- package/dist/pagination/use-pagination.cjs +1 -1
- package/dist/pagination/use-pagination.mjs +2 -2
- package/dist/pin-input/use-pin-input.cjs +1 -1
- package/dist/pin-input/use-pin-input.mjs +2 -2
- package/dist/popover/use-popover.cjs +1 -1
- package/dist/popover/use-popover.mjs +2 -2
- package/dist/pressable/use-pressable.cjs +1 -1
- package/dist/pressable/use-pressable.d.ts +1 -1
- package/dist/pressable/use-pressable.mjs +2 -2
- package/dist/radio-group/radio-group-context.d.ts +2 -0
- package/dist/radio-group/use-radio-group.cjs +1 -1
- package/dist/radio-group/use-radio-group.d.ts +1 -0
- package/dist/radio-group/use-radio-group.mjs +2 -2
- package/dist/range-slider/use-range-slider.cjs +1 -1
- package/dist/range-slider/use-range-slider.mjs +2 -2
- package/dist/rating-group/rating-context.d.ts +2 -13
- package/dist/rating-group/rating-group-context.d.ts +5 -20
- package/dist/rating-group/rating.cjs +1 -1
- package/dist/rating-group/rating.d.ts +2 -2
- package/dist/rating-group/rating.mjs +1 -1
- package/dist/rating-group/use-rating-group.cjs +1 -1
- package/dist/rating-group/use-rating-group.d.ts +2 -10
- package/dist/rating-group/use-rating-group.mjs +2 -2
- package/dist/select/use-select.cjs +1 -1
- package/dist/select/use-select.mjs +2 -2
- package/dist/slider/use-slider.cjs +1 -1
- package/dist/slider/use-slider.mjs +2 -2
- package/dist/splitter/use-splitter.cjs +1 -1
- package/dist/splitter/use-splitter.mjs +2 -2
- package/dist/switch/index.d.ts +6 -0
- package/dist/switch/switch-context.cjs +13 -0
- package/dist/switch/switch-context.d.ts +27 -0
- package/dist/switch/switch-context.mjs +8 -0
- package/dist/switch/switch-control.cjs +16 -0
- package/dist/switch/switch-control.d.ts +4 -0
- package/dist/switch/switch-control.mjs +12 -0
- package/dist/switch/switch-input.cjs +16 -0
- package/dist/switch/switch-input.d.ts +4 -0
- package/dist/switch/switch-input.mjs +12 -0
- package/dist/switch/switch-label.cjs +16 -0
- package/dist/switch/switch-label.d.ts +4 -0
- package/dist/switch/switch-label.mjs +12 -0
- package/dist/switch/switch-thumb.cjs +16 -0
- package/dist/switch/switch-thumb.d.ts +4 -0
- package/dist/switch/switch-thumb.mjs +12 -0
- package/dist/switch/switch.anatomy.d.ts +1 -0
- package/dist/switch/switch.cjs +30 -0
- package/dist/switch/switch.d.ts +9 -0
- package/dist/switch/switch.mjs +26 -0
- package/dist/switch/use-switch.cjs +36 -0
- package/dist/switch/use-switch.d.ts +17 -0
- package/dist/switch/use-switch.mjs +13 -0
- package/dist/tabs/tab-trigger.d.ts +2 -4
- package/dist/tabs/tabs-context.d.ts +7 -9
- package/dist/tabs/use-tabs.cjs +1 -1
- package/dist/tabs/use-tabs.d.ts +3 -5
- package/dist/tabs/use-tabs.mjs +2 -2
- package/dist/tags-input/use-tags-input.cjs +1 -1
- package/dist/tags-input/use-tags-input.mjs +2 -2
- package/dist/tooltip/use-tooltip.cjs +1 -1
- package/dist/tooltip/use-tooltip.mjs +2 -2
- package/package.json +46 -44
- package/dist/accordion/accordion-icon.cjs +0 -10
- package/dist/accordion/accordion-icon.d.ts +0 -4
- 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 =
|
|
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 {
|
|
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 =
|
|
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 {
|
|
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
|
|
9
|
-
isFocused: boolean;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
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
|
|
22
|
-
isFocused: boolean;
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
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, ['
|
|
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, ['
|
|
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);
|
package/dist/checkbox/index.d.ts
CHANGED
|
@@ -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 =
|
|
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
|
|
10
|
-
isFocused: boolean;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
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 {
|
|
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 =
|
|
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
|
|
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 {
|
|
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 =
|
|
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 {
|
|
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
|
|
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 =
|
|
12
|
+
const triggerProps = solid.mergeProps(() => editable().editTriggerProps, props);
|
|
13
13
|
return web.createComponent(factory.ark.button, triggerProps);
|
|
14
14
|
};
|
|
15
15
|
|
|
@@ -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
|
|
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 =
|
|
12
|
+
const previewProps = solid.mergeProps(() => editable().previewProps, props);
|
|
13
13
|
return web.createComponent(factory.ark.span, previewProps);
|
|
14
14
|
};
|
|
15
15
|
|
|
@@ -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
|
|
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 =
|
|
12
|
+
const triggerProps = solid.mergeProps(() => dialog().submitTriggerProps, props);
|
|
13
13
|
return web.createComponent(factory.ark.button, triggerProps);
|
|
14
14
|
};
|
|
15
15
|
|
|
@@ -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 =
|
|
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 {
|
|
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 [
|
|
12
|
-
const
|
|
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:
|
|
16
|
+
value: api,
|
|
15
17
|
get children() {
|
|
16
|
-
return
|
|
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 [
|
|
8
|
-
const
|
|
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:
|
|
12
|
+
value: api,
|
|
11
13
|
get children() {
|
|
12
|
-
return
|
|
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 =
|
|
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 {
|
|
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
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';
|
package/dist/menu/use-menu.cjs
CHANGED
|
@@ -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 =
|
|
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),
|
package/dist/menu/use-menu.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as menu from '@zag-js/menu';
|
|
2
|
-
import { useMachine, normalizeProps } from '@zag-js/solid';
|
|
3
|
-
import {
|
|
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 =
|
|
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 {
|
|
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 =
|
|
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 {
|
|
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 =
|
|
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
|
};
|