@ark-ui/solid 4.1.0 → 4.2.0

package/dist/source/components/dialog/dialog-content.jsx

@@ -1,13 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { Show } from 'solid-js';
-import { ark } from '../factory';
-import { usePresenceContext } from '../presence';
-import { useDialogContext } from './use-dialog-context';
-export const DialogContent = (props) => {
-    const api = useDialogContext();
-    const presenceApi = usePresenceContext();
-    const mergedProps = mergeProps(() => api().getContentProps(), () => presenceApi().presenceProps, props);
-    return (<Show when={!presenceApi().unmounted}>
-      <ark.div {...mergedProps}/>
-    </Show>);
-};

package/dist/source/components/dialog/dialog-context.jsx

@@ -1,2 +0,0 @@
-import { useDialogContext } from './use-dialog-context';
-export const DialogContext = (props) => props.children(useDialogContext());

package/dist/source/components/dialog/dialog-description.jsx

@@ -1,8 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { ark } from '../factory';
-import { useDialogContext } from './use-dialog-context';
-export const DialogDescription = (props) => {
-    const dialog = useDialogContext();
-    const mergedProps = mergeProps(() => dialog().getDescriptionProps(), props);
-    return <ark.div {...mergedProps}/>;
-};

package/dist/source/components/dialog/dialog-positioner.jsx

@@ -1,13 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { Show } from 'solid-js';
-import { ark } from '../factory';
-import { usePresenceContext } from '../presence';
-import { useDialogContext } from './use-dialog-context';
-export const DialogPositioner = (props) => {
-    const api = useDialogContext();
-    const presenceApi = usePresenceContext();
-    const mergedProps = mergeProps(() => api().getPositionerProps(), props);
-    return (<Show when={!presenceApi().unmounted}>
-      <ark.div {...mergedProps}/>
-    </Show>);
-};

package/dist/source/components/dialog/dialog-root-provider.jsx

@@ -1,14 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { RenderStrategyProvider, splitRenderStrategyProps } from '../../utils/render-strategy';
-import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
-import { DialogProvider } from './use-dialog-context';
-export const DialogRootProvider = (props) => {
-    const [presenceProps, dialogProps] = splitPresenceProps(props);
-    const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
-    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: dialogProps.value().open })));
-    return (<DialogProvider value={dialogProps.value}>
-      <RenderStrategyProvider value={renderStrategyProps}>
-        <PresenceProvider value={apiPresence}>{dialogProps.children}</PresenceProvider>
-      </RenderStrategyProvider>
-    </DialogProvider>);
-};

package/dist/source/components/dialog/dialog-root.jsx

@@ -1,39 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../../utils/create-split-props';
-import { RenderStrategyProvider, splitRenderStrategyProps } from '../../utils/render-strategy';
-import { PresenceProvider, splitPresenceProps, usePresence, } from '../presence';
-import { useDialog } from './use-dialog';
-import { DialogProvider } from './use-dialog-context';
-export const DialogRoot = (props) => {
-    const [presenceProps, dialogProps] = splitPresenceProps(props);
-    const [renderStrategyProps] = splitRenderStrategyProps(presenceProps);
-    const [useDialogProps, localProps] = createSplitProps()(dialogProps, [
-        'aria-label',
-        'closeOnEscape',
-        'closeOnInteractOutside',
-        'defaultOpen',
-        'finalFocusEl',
-        'id',
-        'ids',
-        'initialFocusEl',
-        'modal',
-        'onEscapeKeyDown',
-        'onFocusOutside',
-        'onInteractOutside',
-        'onOpenChange',
-        'onPointerDownOutside',
-        'open',
-        'persistentElements',
-        'preventScroll',
-        'restoreFocus',
-        'role',
-        'trapFocus',
-    ]);
-    const api = useDialog(useDialogProps);
-    const apiPresence = usePresence(mergeProps(presenceProps, () => ({ present: api().open })));
-    return (<DialogProvider value={api}>
-      <RenderStrategyProvider value={renderStrategyProps}>
-        <PresenceProvider value={apiPresence}>{localProps.children}</PresenceProvider>
-      </RenderStrategyProvider>
-    </DialogProvider>);
-};

package/dist/source/components/dialog/dialog-title.jsx

@@ -1,8 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { ark } from '../factory';
-import { useDialogContext } from './use-dialog-context';
-export const DialogTitle = (props) => {
-    const dialog = useDialogContext();
-    const mergedProps = mergeProps(() => dialog().getTitleProps(), props);
-    return <ark.h2 {...mergedProps}/>;
-};

package/dist/source/components/dialog/dialog-trigger.jsx

@@ -1,10 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { ark } from '../factory';
-import { usePresenceContext } from '../presence';
-import { useDialogContext } from './use-dialog-context';
-export const DialogTrigger = (props) => {
-    const api = useDialogContext();
-    const presenceApi = usePresenceContext();
-    const mergedProps = mergeProps(() => api().getTriggerProps(), () => ({ 'aria-controls': presenceApi().unmounted && null }), props);
-    return <ark.button {...mergedProps}/>;
-};

package/dist/source/components/dialog/dialog.anatomy.js

@@ -1 +0,0 @@
-export { anatomy as dialogAnatomy } from '@zag-js/dialog';

package/dist/source/components/dialog/dialog.js

@@ -1,10 +0,0 @@
-export { DialogBackdrop as Backdrop, } from './dialog-backdrop';
-export { DialogCloseTrigger as CloseTrigger, } from './dialog-close-trigger';
-export { DialogContent as Content, } from './dialog-content';
-export { DialogContext as Context } from './dialog-context';
-export { DialogDescription as Description, } from './dialog-description';
-export { DialogPositioner as Positioner, } from './dialog-positioner';
-export { DialogRoot as Root, } from './dialog-root';
-export { DialogRootProvider as RootProvider, } from './dialog-root-provider';
-export { DialogTitle as Title, } from './dialog-title';
-export { DialogTrigger as Trigger, } from './dialog-trigger';

package/dist/source/components/dialog/index.js

@@ -1,14 +0,0 @@
-export { DialogBackdrop, } from './dialog-backdrop';
-export { DialogCloseTrigger, } from './dialog-close-trigger';
-export { DialogContent, } from './dialog-content';
-export { DialogContext, } from './dialog-context';
-export { DialogDescription, } from './dialog-description';
-export { DialogPositioner, } from './dialog-positioner';
-export { DialogRoot, } from './dialog-root';
-export { DialogRootProvider, } from './dialog-root-provider';
-export { DialogTitle, } from './dialog-title';
-export { DialogTrigger, } from './dialog-trigger';
-export { dialogAnatomy } from './dialog.anatomy';
-export { useDialog } from './use-dialog';
-export { useDialogContext } from './use-dialog-context';
-export * as Dialog from './dialog';

package/dist/source/components/dialog/use-dialog-context.js

@@ -1,5 +0,0 @@
-import { createContext } from '../../utils/create-context';
-export const [DialogProvider, useDialogContext] = createContext({
-    hookName: 'useDialogContext',
-    providerName: '<DialogProvider />',
-});

package/dist/source/components/dialog/use-dialog.js

@@ -1,19 +0,0 @@
-import * as dialog from '@zag-js/dialog';
-import { normalizeProps, useMachine } from '@zag-js/solid';
-import { createMemo, createUniqueId } from 'solid-js';
-import { useEnvironmentContext, useLocaleContext } from '../../providers';
-export const useDialog = (props) => {
-    const locale = useLocaleContext();
-    const environment = useEnvironmentContext();
-    const id = createUniqueId();
-    const context = createMemo(() => ({
-        id,
-        dir: locale().dir,
-        getRootNode: environment().getRootNode,
-        open: props.defaultOpen,
-        'open.controlled': props.open !== undefined,
-        ...props,
-    }));
-    const [state, send] = useMachine(dialog.machine(context()), { context });
-    return createMemo(() => dialog.connect(state, send, normalizeProps));
-};

package/dist/source/components/editable/editable-area.jsx

@@ -1,8 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { ark } from '../factory';
-import { useEditableContext } from './use-editable-context';
-export const EditableArea = (props) => {
-    const api = useEditableContext();
-    const mergedProps = mergeProps(() => api().getAreaProps(), props);
-    return <ark.div {...mergedProps}/>;
-};

package/dist/source/components/editable/editable-cancel-trigger.jsx

@@ -1,8 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { ark } from '../factory';
-import { useEditableContext } from './use-editable-context';
-export const EditableCancelTrigger = (props) => {
-    const api = useEditableContext();
-    const mergedProps = mergeProps(() => api().getCancelTriggerProps(), props);
-    return <ark.button {...mergedProps}/>;
-};

package/dist/source/components/editable/editable-context.jsx

@@ -1,2 +0,0 @@
-import { useEditableContext } from './use-editable-context';
-export const EditableContext = (props) => props.children(useEditableContext());

package/dist/source/components/editable/editable-control.jsx

@@ -1,8 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { ark } from '../factory';
-import { useEditableContext } from './use-editable-context';
-export const EditableControl = (props) => {
-    const api = useEditableContext();
-    const mergedProps = mergeProps(() => api().getControlProps(), props);
-    return <ark.div {...mergedProps}/>;
-};

package/dist/source/components/editable/editable-edit-trigger.jsx

@@ -1,8 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { ark } from '../factory';
-import { useEditableContext } from './use-editable-context';
-export const EditableEditTrigger = (props) => {
-    const api = useEditableContext();
-    const mergedProps = mergeProps(() => api().getEditTriggerProps(), props);
-    return <ark.button {...mergedProps}/>;
-};

package/dist/source/components/editable/editable-input.jsx

@@ -1,10 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { ark } from '../factory';
-import { useFieldContext } from '../field';
-import { useEditableContext } from './use-editable-context';
-export const EditableInput = (props) => {
-    const api = useEditableContext();
-    const mergedProps = mergeProps(() => api().getInputProps(), props);
-    const field = useFieldContext();
-    return <ark.input aria-describedby={field?.().ariaDescribedby} {...mergedProps}/>;
-};

package/dist/source/components/editable/editable-label.jsx

@@ -1,8 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { ark } from '../factory';
-import { useEditableContext } from './use-editable-context';
-export const EditableLabel = (props) => {
-    const api = useEditableContext();
-    const mergedProps = mergeProps(() => api().getLabelProps(), props);
-    return <ark.label {...mergedProps}/>;
-};

package/dist/source/components/editable/editable-preview.jsx

@@ -1,8 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { ark } from '../factory';
-import { useEditableContext } from './use-editable-context';
-export const EditablePreview = (props) => {
-    const api = useEditableContext();
-    const mergedProps = mergeProps(() => api().getPreviewProps(), props);
-    return <ark.span {...mergedProps}/>;
-};

package/dist/source/components/editable/editable-root-provider.jsx

@@ -1,11 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../../utils/create-split-props';
-import { ark } from '../factory';
-import { EditableProvider } from './use-editable-context';
-export const EditableRootProvider = (props) => {
-    const [{ value: editable }, localProps] = createSplitProps()(props, ['value']);
-    const mergedProps = mergeProps(() => editable().getRootProps(), localProps);
-    return (<EditableProvider value={editable}>
-      <ark.div {...mergedProps}/>
-    </EditableProvider>);
-};

package/dist/source/components/editable/editable-root.jsx

@@ -1,41 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../../utils/create-split-props';
-import { ark } from '../factory';
-import { useEditable } from './use-editable';
-import { EditableProvider } from './use-editable-context';
-export const EditableRoot = (props) => {
-    const [useEditableProps, localProps] = createSplitProps()(props, [
-        'activationMode',
-        'autoResize',
-        'defaultEdit',
-        'defaultValue',
-        'disabled',
-        'edit',
-        'finalFocusEl',
-        'form',
-        'id',
-        'ids',
-        'invalid',
-        'maxLength',
-        'name',
-        'onEditChange',
-        'onFocusOutside',
-        'onInteractOutside',
-        'onPointerDownOutside',
-        'onValueChange',
-        'onValueCommit',
-        'onValueRevert',
-        'placeholder',
-        'readOnly',
-        'required',
-        'selectOnFocus',
-        'submitMode',
-        'translations',
-        'value',
-    ]);
-    const api = useEditable(useEditableProps);
-    const mergedProps = mergeProps(() => api().getRootProps(), localProps);
-    return (<EditableProvider value={api}>
-      <ark.div {...mergedProps}/>
-    </EditableProvider>);
-};

package/dist/source/components/editable/editable-submit-trigger.jsx

@@ -1,8 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { ark } from '../factory';
-import { useEditableContext } from './use-editable-context';
-export const EditableSubmitTrigger = (props) => {
-    const api = useEditableContext();
-    const mergedProps = mergeProps(() => api().getSubmitTriggerProps(), props);
-    return <ark.button {...mergedProps}/>;
-};

package/dist/source/components/editable/editable.anatomy.js

@@ -1 +0,0 @@
-export { anatomy as editableAnatomy } from '@zag-js/editable';

package/dist/source/components/editable/editable.js

@@ -1,11 +0,0 @@
-export { EditableArea as Area, } from './editable-area';
-export { EditableCancelTrigger as CancelTrigger, } from './editable-cancel-trigger';
-export { EditableContext as Context, } from './editable-context';
-export { EditableControl as Control, } from './editable-control';
-export { EditableEditTrigger as EditTrigger, } from './editable-edit-trigger';
-export { EditableInput as Input, } from './editable-input';
-export { EditableLabel as Label, } from './editable-label';
-export { EditablePreview as Preview, } from './editable-preview';
-export { EditableRoot as Root, } from './editable-root';
-export { EditableRootProvider as RootProvider, } from './editable-root-provider';
-export { EditableSubmitTrigger as SubmitTrigger, } from './editable-submit-trigger';

package/dist/source/components/editable/index.js

@@ -1,15 +0,0 @@
-export { EditableArea, } from './editable-area';
-export { EditableCancelTrigger, } from './editable-cancel-trigger';
-export { EditableContext, } from './editable-context';
-export { EditableControl, } from './editable-control';
-export { EditableEditTrigger, } from './editable-edit-trigger';
-export { EditableInput, } from './editable-input';
-export { EditableLabel, } from './editable-label';
-export { EditablePreview, } from './editable-preview';
-export { EditableRoot, } from './editable-root';
-export { EditableRootProvider, } from './editable-root-provider';
-export { EditableSubmitTrigger, } from './editable-submit-trigger';
-export { editableAnatomy } from './editable.anatomy';
-export { useEditable } from './use-editable';
-export { useEditableContext } from './use-editable-context';
-export * as Editable from './editable';

package/dist/source/components/editable/use-editable-context.js

@@ -1,5 +0,0 @@
-import { createContext } from '../../utils/create-context';
-export const [EditableProvider, useEditableContext] = createContext({
-    hookName: 'useEditableContext',
-    providerName: '<EditableProvider />',
-});

package/dist/source/components/editable/use-editable.js

@@ -1,30 +0,0 @@
-import * as editable from '@zag-js/editable';
-import { normalizeProps, useMachine } from '@zag-js/solid';
-import { createMemo, createUniqueId } from 'solid-js';
-import { useEnvironmentContext, useLocaleContext } from '../../providers';
-import { useFieldContext } from '../field';
-export const useEditable = (props) => {
-    const locale = useLocaleContext();
-    const environment = useEnvironmentContext();
-    const id = createUniqueId();
-    const field = useFieldContext();
-    const context = createMemo(() => ({
-        id,
-        ids: {
-            label: field?.().ids.label,
-            input: field?.().ids.control,
-        },
-        dir: locale().dir,
-        disabled: field?.().disabled,
-        invalid: field?.().invalid,
-        readOnly: field?.().readOnly,
-        required: field?.().required,
-        getRootNode: environment().getRootNode,
-        edit: props.defaultEdit,
-        value: props.defaultValue,
-        'edit.controlled': props.edit !== undefined,
-        ...props,
-    }));
-    const [state, send] = useMachine(editable.machine(context()), { context });
-    return createMemo(() => editable.connect(state, send, normalizeProps));
-};

package/dist/source/components/factory.jsx

@@ -1,35 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { splitProps } from 'solid-js';
-import { Dynamic } from 'solid-js/web';
-const withAsProp = (Component) => {
-    const ArkComponent = (props) => {
-        const [localProps, parentProps] = splitProps(props, ['asChild']);
-        if (localProps.asChild) {
-            // @ts-expect-error
-            const propsFn = (userProps) => {
-                const [, restProps] = splitProps(parentProps, ['ref']);
-                return mergeProps(restProps, userProps);
-            };
-            return localProps.asChild(propsFn);
-        }
-        // @ts-expect-error
-        return <Dynamic component={Component} {...parentProps}/>;
-    };
-    return ArkComponent;
-};
-function jsxFactory() {
-    const cache = new Map();
-    return new Proxy(withAsProp, {
-        apply(_target, _thisArg, argArray) {
-            return withAsProp(argArray[0]);
-        },
-        get(_, element) {
-            const asElement = element;
-            if (!cache.has(asElement)) {
-                cache.set(asElement, withAsProp(asElement));
-            }
-            return cache.get(asElement);
-        },
-    });
-}
-export const ark = jsxFactory();

package/dist/source/components/field/field-context.jsx

@@ -1,2 +0,0 @@
-import { useFieldContext } from './use-field-context';
-export const FieldContext = (props) => props.children(useFieldContext());

package/dist/source/components/field/field-error-text.jsx

@@ -1,11 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { Show } from 'solid-js';
-import { ark } from '../factory';
-import { useFieldContext } from './use-field-context';
-export const FieldErrorText = (props) => {
-    const field = useFieldContext();
-    const mergedProps = mergeProps(() => field().getErrorTextProps(), props);
-    return (<Show when={field?.().invalid}>
-      <ark.span {...mergedProps}/>
-    </Show>);
-};

package/dist/source/components/field/field-helper-text.jsx

@@ -1,8 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { ark } from '../factory';
-import { useFieldContext } from './use-field-context';
-export const FieldHelperText = (props) => {
-    const field = useFieldContext();
-    const mergedProps = mergeProps(() => field().getHelperTextProps(), props);
-    return <ark.span {...mergedProps}/>;
-};

package/dist/source/components/field/field-input.jsx

@@ -1,8 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { ark } from '../factory';
-import { useFieldContext } from './use-field-context';
-export const FieldInput = (props) => {
-    const field = useFieldContext();
-    const mergedProps = mergeProps(() => field?.().getInputProps(), props);
-    return <ark.input {...mergedProps}/>;
-};

package/dist/source/components/field/field-label.jsx

@@ -1,8 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { ark } from '../factory';
-import { useFieldContext } from './use-field-context';
-export const FieldLabel = (props) => {
-    const field = useFieldContext();
-    const mergedProps = mergeProps(() => field?.().getLabelProps(), props);
-    return <ark.label {...mergedProps}/>;
-};

package/dist/source/components/field/field-root-provider.jsx

@@ -1,11 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../../utils/create-split-props';
-import { ark } from '../factory';
-import { FieldProvider } from './use-field-context';
-export const FieldRootProvider = (props) => {
-    const [{ value: field }, localProps] = createSplitProps()(props, ['value']);
-    const mergedProps = mergeProps(() => field().getRootProps(), localProps);
-    return (<FieldProvider value={field}>
-      <ark.div {...mergedProps}/>
-    </FieldProvider>);
-};

package/dist/source/components/field/field-root.jsx

@@ -1,20 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { createSplitProps } from '../../utils/create-split-props';
-import { ark } from '../factory';
-import { useField } from './use-field';
-import { FieldProvider } from './use-field-context';
-export const FieldRoot = (props) => {
-    const [useFieldProps, localProps] = createSplitProps()(props, [
-        'id',
-        'ids',
-        'disabled',
-        'invalid',
-        'readOnly',
-        'required',
-    ]);
-    const field = useField(useFieldProps);
-    const mergedProps = mergeProps(() => field().getRootProps(), localProps);
-    return (<FieldProvider value={field}>
-      <ark.div {...mergedProps}/>
-    </FieldProvider>);
-};

package/dist/source/components/field/field-select.jsx

@@ -1,8 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { ark } from '../factory';
-import { useFieldContext } from './use-field-context';
-export const FieldSelect = (props) => {
-    const field = useFieldContext();
-    const mergedProps = mergeProps(() => field?.().getSelectProps(), props);
-    return <ark.select {...mergedProps}/>;
-};

package/dist/source/components/field/field-textarea.jsx

@@ -1,8 +0,0 @@
-import { mergeProps } from '@zag-js/solid';
-import { ark } from '../factory';
-import { useFieldContext } from './use-field-context';
-export const FieldTextarea = (props) => {
-    const field = useFieldContext();
-    const mergedProps = mergeProps(() => field?.().getTextareaProps(), props);
-    return <ark.textarea {...mergedProps}/>;
-};

package/dist/source/components/field/field.anatomy.js

@@ -1,3 +0,0 @@
-import { createAnatomy } from '@zag-js/anatomy';
-export const fieldAnatomy = createAnatomy('field').parts('root', 'errorText', 'helperText', 'input', 'label', 'select', 'textarea');
-export const parts = fieldAnatomy.build();

package/dist/source/components/field/field.js

@@ -1,9 +0,0 @@
-export { FieldRoot as Root, } from './field-root';
-export { FieldRootProvider as RootProvider, } from './field-root-provider';
-export { FieldLabel as Label, } from './field-label';
-export { FieldInput as Input, } from './field-input';
-export { FieldTextarea as Textarea, } from './field-textarea';
-export { FieldSelect as Select, } from './field-select';
-export { FieldHelperText as HelperText, } from './field-helper-text';
-export { FieldErrorText as ErrorText, } from './field-error-text';
-export { FieldContext as Context } from './field-context';

package/dist/source/components/field/index.js

@@ -1,12 +0,0 @@
-export { FieldContext } from './field-context';
-export { FieldErrorText, } from './field-error-text';
-export { FieldHelperText, } from './field-helper-text';
-export { FieldInput } from './field-input';
-export { FieldLabel } from './field-label';
-export { FieldRoot } from './field-root';
-export { FieldRootProvider, } from './field-root-provider';
-export { FieldSelect } from './field-select';
-export { FieldTextarea, } from './field-textarea';
-export { fieldAnatomy } from './field.anatomy';
-export { useFieldContext } from './use-field-context';
-export * as Field from './field';

package/dist/source/components/field/use-field-context.js

@@ -1,6 +0,0 @@
-import { createContext } from '../../utils/create-context';
-export const [FieldProvider, useFieldContext] = createContext({
-    hookName: 'useFieldContext',
-    providerName: '<FieldProvider />',
-    strict: false,
-});