@ark-ui/solid 1.0.0-beta.1 → 1.0.0-beta.3

package/source/menu/menu-positioner.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuContext } from './menu-context';
+export const MenuPositioner = (props) => {
+    const menu = useMenuContext();
+    const positionerProps = mergeProps(() => menu?.().positionerProps, props);
+    return <ark.div {...positionerProps}/>;
+};

package/source/menu/menu-separator.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuContext } from './menu-context';
+export const MenuSeparator = (props) => {
+    const menu = useMenuContext();
+    const separatorProps = mergeProps(() => menu?.().separatorProps, props);
+    return <ark.hr {...separatorProps}/>;
+};

package/source/menu/menu-trigger-item.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuTriggerItemContext } from './menu-context';
+export const MenuTriggerItem = (props) => {
+    const getTriggerItemProps = useMenuTriggerItemContext();
+    const triggerProps = mergeProps(() => getTriggerItemProps?.(), props);
+    return <ark.div {...triggerProps}/>;
+};

package/source/menu/menu-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useMenuContext } from './menu-context';
+export const MenuTrigger = (props) => {
+    const menu = useMenuContext();
+    const triggerProps = mergeProps(() => menu?.().triggerProps, props);
+    return <ark.button {...triggerProps}/>;
+};

package/source/menu/menu.jsx

@@ -0,0 +1,51 @@
+import { createEffect, createMemo } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { runIfFn } from '../run-if-fn';
+import { MenuMachineProvider, MenuProvider, MenuTriggerItemProvider, useMenuContext, useMenuMachineContext, } from './menu-context';
+import { useMenu } from './use-menu';
+export const Menu = (props) => {
+    const [menuParams, restProps] = createSplitProps()(props, [
+        'anchorPoint',
+        'aria-label',
+        'closeOnSelect',
+        'dir',
+        'getRootNode',
+        'highlightedId',
+        'id',
+        'ids',
+        'loop',
+        'onFocusOutside',
+        'onInteractOutside',
+        'onOpenChange',
+        'onPointerDownOutside',
+        'onSelect',
+        'onValueChange',
+        'positioning',
+        'value',
+    ]);
+    const parentMenu = useMenuContext();
+    const parentMachine = useMenuMachineContext();
+    const menu = useMenu(menuParams);
+    createEffect(() => {
+        if (!parentMachine)
+            return;
+        parentMenu?.().setChild(menu().machine);
+        menu().api().setParent(parentMachine());
+    });
+    createEffect(() => {
+        if (!restProps.isOpen)
+            return;
+        restProps.isOpen?.() ? menu().api().open() : menu().api().close();
+    });
+    const triggerItemContext = createMemo(() => parentMenu?.().getTriggerItemProps(menu().api()));
+    const machineContext = () => menu().machine;
+    const getChildren = () => runIfFn(restProps.children, () => ({
+        isOpen: menu?.().api().isOpen,
+        onClose: menu?.().api().close,
+    }));
+    return (<MenuTriggerItemProvider value={triggerItemContext}>
+      <MenuMachineProvider value={machineContext}>
+        <MenuProvider value={menu().api}>{getChildren()}</MenuProvider>
+      </MenuMachineProvider>
+    </MenuTriggerItemProvider>);
+};

package/source/menu/use-menu.js

@@ -0,0 +1,13 @@
+import * as menu from '@zag-js/menu';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useMenu = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send, machine] = useMachine(menu.machine(context), { context });
+    return createMemo(() => ({
+        api: () => menu.connect(state, send, normalizeProps),
+        machine: machine,
+    }));
+};

package/source/merge-style.js

@@ -0,0 +1,30 @@
+export const mergeStyle = (a, b) => styleObjectToString({ ...getStyleObject(a), ...getStyleObject(b) });
+const getStyleObject = (style) => typeof style === 'object' ? style : stringStyleToObject(style);
+const stringStyleToObject = (style) => {
+    const object = {};
+    if (!style)
+        return object;
+    const extractCSSregex = /([^:; ]*):\s*([^;]*)/g;
+    let match;
+    while ((match = extractCSSregex.exec(style))) {
+        object[match[1]] = match[2];
+    }
+    return object;
+};
+const styleObjectToString = (value) => {
+    if (!value)
+        return '';
+    let result = '';
+    const k = Object.keys(value);
+    for (let i = 0; i < k.length; i++) {
+        const s = k[i];
+        // @ts-expect-error - we know this is a string
+        const v = value[s];
+        if (v != undefined) {
+            if (i)
+                result += ';';
+            result += `${s}:${v}`;
+        }
+    }
+    return result;
+};

package/source/number-input/index.js

@@ -0,0 +1,18 @@
+import { NumberInput as NumberInputRoot } from './number-input';
+import { useNumberInputContext } from './number-input-context';
+import { NumberInputControl } from './number-input-control';
+import { NumberInputDecrementTrigger, } from './number-input-decrement-trigger';
+import { NumberInputInput } from './number-input-field';
+import { NumberInputIncrementTrigger, } from './number-input-increment-trigger';
+import { NumberInputLabel } from './number-input-label';
+import { NumberInputScrubber } from './number-input-scrubber';
+const NumberInput = Object.assign(NumberInputRoot, {
+    Root: NumberInputRoot,
+    Control: NumberInputControl,
+    DecrementTrigger: NumberInputDecrementTrigger,
+    Input: NumberInputInput,
+    IncrementTrigger: NumberInputIncrementTrigger,
+    Label: NumberInputLabel,
+    Scrubber: NumberInputScrubber,
+});
+export { NumberInput, NumberInputControl, NumberInputDecrementTrigger, NumberInputIncrementTrigger, NumberInputInput, NumberInputLabel, NumberInputScrubber, useNumberInputContext, };

package/source/number-input/number-input-context.js

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

package/source/number-input/number-input-control.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useNumberInputContext } from './number-input-context';
+export const NumberInputControl = (props) => {
+    const api = useNumberInputContext();
+    const controlProps = mergeProps(() => api().controlProps, props);
+    return <ark.div {...controlProps}/>;
+};

package/source/number-input/number-input-decrement-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useNumberInputContext } from './number-input-context';
+export const NumberInputDecrementTrigger = (props) => {
+    const api = useNumberInputContext();
+    const triggerProps = mergeProps(() => api().decrementTriggerProps, props);
+    return <ark.button {...triggerProps}/>;
+};

package/source/number-input/number-input-field.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useNumberInputContext } from './number-input-context';
+export const NumberInputInput = (props) => {
+    const api = useNumberInputContext();
+    const inputProps = mergeProps(() => api().inputProps, props);
+    return <ark.input {...inputProps}/>;
+};

package/source/number-input/number-input-increment-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useNumberInputContext } from './number-input-context';
+export const NumberInputIncrementTrigger = (props) => {
+    const api = useNumberInputContext();
+    const triggerProps = mergeProps(() => api().incrementTriggerProps, props);
+    return <ark.button {...triggerProps}/>;
+};

package/source/number-input/number-input-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useNumberInputContext } from './number-input-context';
+export const NumberInputLabel = (props) => {
+    const api = useNumberInputContext();
+    const labelProps = mergeProps(() => api().labelProps, props);
+    return <ark.label {...labelProps}/>;
+};

package/source/number-input/number-input-scrubber.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useNumberInputContext } from './number-input-context';
+export const NumberInputScrubber = (props) => {
+    const api = useNumberInputContext();
+    const scrubberProps = mergeProps(() => api().scrubberProps, props);
+    return <ark.div {...scrubberProps}/>;
+};

package/source/number-input/number-input.jsx

@@ -0,0 +1,40 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { NumberInputProvider } from './number-input-context';
+import { useNumberInput } from './use-number-input';
+export const NumberInput = (props) => {
+    const [useNumberInputProps, localProps] = createSplitProps()(props, [
+        'allowMouseWheel',
+        'allowOverflow',
+        'clampValueOnBlur',
+        'dir',
+        'disabled',
+        'focusInputOnChange',
+        'form',
+        'formatOptions',
+        'getRootNode',
+        'id',
+        'ids',
+        'inputMode',
+        'invalid',
+        'locale',
+        'max',
+        'min',
+        'name',
+        'onFocusChange',
+        'onValueChange',
+        'onValueInvalid',
+        'pattern',
+        'readOnly',
+        'spinOnPress',
+        'step',
+        'translations',
+        'value',
+    ]);
+    const api = useNumberInput(useNumberInputProps);
+    const rootProps = mergeProps(() => api().rootProps, localProps);
+    return (<NumberInputProvider value={api}>
+      <ark.div {...rootProps}/>
+    </NumberInputProvider>);
+};

package/source/number-input/use-number-input.js

@@ -0,0 +1,10 @@
+import * as numberInput from '@zag-js/number-input';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const useNumberInput = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send] = useMachine(numberInput.machine(context), { context });
+    return createMemo(() => numberInput.connect(state, send, normalizeProps));
+};

package/source/pagination/index.js

@@ -0,0 +1,14 @@
+import { Pagination as PaginationRoot } from './pagination';
+import { usePaginationContext } from './pagination-context';
+import { PaginationEllipsis } from './pagination-ellipsis';
+import { PaginationItem } from './pagination-item';
+import { PaginationNextTrigger } from './pagination-next-trigger';
+import { PaginationPrevTrigger } from './pagination-prev-trigger';
+const Pagination = Object.assign(PaginationRoot, {
+    Root: PaginationRoot,
+    Ellipsis: PaginationEllipsis,
+    Item: PaginationItem,
+    NextTrigger: PaginationNextTrigger,
+    PrevTrigger: PaginationPrevTrigger,
+});
+export { Pagination, PaginationEllipsis, PaginationItem, PaginationNextTrigger, PaginationPrevTrigger, usePaginationContext, };

package/source/pagination/pagination-context.js

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

package/source/pagination/pagination-ellipsis.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { usePaginationContext } from './pagination-context';
+export const PaginationEllipsis = (props) => {
+    const [ellipsisProps, restProps] = createSplitProps()(props, ['index']);
+    const api = usePaginationContext();
+    const mergedProps = mergeProps(() => api().getEllipsisProps(ellipsisProps), restProps);
+    return <ark.div {...mergedProps}/>;
+};

package/source/pagination/pagination-item.jsx

@@ -0,0 +1,10 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { usePaginationContext } from './pagination-context';
+export const PaginationItem = (props) => {
+    const [itemProps, localProps] = createSplitProps()(props, ['value', 'type']);
+    const api = usePaginationContext();
+    const mergedProps = mergeProps(() => api().getItemProps(itemProps), localProps);
+    return <ark.button {...mergedProps}/>;
+};

package/source/pagination/pagination-next-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { usePaginationContext } from './pagination-context';
+export const PaginationNextTrigger = (props) => {
+    const api = usePaginationContext();
+    const mergedProps = mergeProps(() => api().nextTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/pagination/pagination-prev-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { usePaginationContext } from './pagination-context';
+export const PaginationPrevTrigger = (props) => {
+    const api = usePaginationContext();
+    const mergedProps = mergeProps(() => api().prevTriggerProps, props);
+    return <ark.button {...mergedProps}/>;
+};

package/source/pagination/pagination.jsx

@@ -0,0 +1,29 @@
+import { mergeProps } from '@zag-js/solid';
+import { splitProps } from 'solid-js';
+import { createSplitProps } from '../create-split-props';
+import { ark } from '../factory';
+import { runIfFn } from '../run-if-fn';
+import { PaginationProvider } from './pagination-context';
+import { usePagination } from './use-pagination';
+export const Pagination = (props) => {
+    const [paginationParams, restProps] = createSplitProps()(props, [
+        'count',
+        'dir',
+        'getRootNode',
+        'id',
+        'ids',
+        'onPageChange',
+        'page',
+        'pageSize',
+        'siblingCount',
+        'translations',
+        'type',
+    ]);
+    const [childrenProps, localProps] = splitProps(restProps, ['children']);
+    const api = usePagination(paginationParams);
+    const getChildren = () => runIfFn(childrenProps.children, api);
+    const rootProps = mergeProps(() => api().rootProps, localProps);
+    return (<PaginationProvider value={api}>
+      <ark.nav {...rootProps}>{getChildren()}</ark.nav>
+    </PaginationProvider>);
+};

package/source/pagination/use-pagination.js

@@ -0,0 +1,10 @@
+import * as pagination from '@zag-js/pagination';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext } from '../environment';
+export const usePagination = (props) => {
+    const getRootNode = useEnvironmentContext();
+    const context = mergeProps({ id: createUniqueId(), getRootNode }, props);
+    const [state, send] = useMachine(pagination.machine(context), { context });
+    return createMemo(() => pagination.connect(state, send, normalizeProps));
+};

package/source/parse-template.js

@@ -0,0 +1,248 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// Forked from https://github.com/natemoo-re/ultrahtml.git under MIT license
+const DOCUMENT_NODE = 0;
+const ELEMENT_NODE = 1;
+const TEXT_NODE = 2;
+const COMMENT_NODE = 3;
+const DOCTYPE_NODE = 4;
+const Fragment = Symbol('Fragment');
+const VOID_TAGS = new Set([
+    'area',
+    'base',
+    'br',
+    'col',
+    'embed',
+    'hr',
+    'img',
+    'input',
+    'keygen',
+    'link',
+    'meta',
+    'param',
+    'source',
+    'track',
+    'wbr',
+]);
+const RAW_TAGS = new Set(['script', 'style']);
+const SPLIT_ATTRS_RE = /([@.a-z0-9_:-]*)\s*?=?\s*?(['"]?)([\s\S]*?)\2\s+/gim;
+const DOM_PARSER_RE = /(?:<(\/?)([a-zA-Z][a-zA-Z0-9:-]*)(?:\s([^>]*?))?((?:\s*\/)?)>|(<!--)([\s\S]*?)(-->)|(<!)([\s\S]*?)(>))/gm;
+function splitAttrs(str) {
+    const obj = {};
+    let token;
+    if (str) {
+        SPLIT_ATTRS_RE.lastIndex = 0;
+        str = ' ' + (str || '') + ' ';
+        while ((token = SPLIT_ATTRS_RE.exec(str))) {
+            if (token[0] === ' ')
+                continue;
+            obj[token[1]] = token[3];
+        }
+    }
+    return obj;
+}
+export function parse(str) {
+    let doc, parent, token, text, i, bStart, bText, bEnd, tag;
+    const tags = [];
+    DOM_PARSER_RE.lastIndex = 0;
+    parent = doc = {
+        type: DOCUMENT_NODE,
+        children: [],
+    };
+    let lastIndex = 0;
+    function commitTextNode() {
+        text = str.substring(lastIndex, DOM_PARSER_RE.lastIndex - token[0].length);
+        if (text) {
+            // eslint-disable-next-line
+            ;
+            parent.children.push({
+                type: TEXT_NODE,
+                value: text,
+                parent,
+            });
+        }
+    }
+    while ((token = DOM_PARSER_RE.exec(str))) {
+        bStart = token[5] || token[8];
+        bText = token[6] || token[9];
+        bEnd = token[7] || token[10];
+        if (RAW_TAGS.has(parent.name) && token[2] !== parent.name) {
+            i = DOM_PARSER_RE.lastIndex - token[0].length;
+            if (parent.children.length > 0) {
+                parent.children[0].value += token[0];
+            }
+            continue;
+        }
+        else if (bStart === '<!--') {
+            i = DOM_PARSER_RE.lastIndex - token[0].length;
+            if (RAW_TAGS.has(parent.name)) {
+                continue;
+            }
+            tag = {
+                type: COMMENT_NODE,
+                value: bText,
+                parent: parent,
+                loc: [
+                    {
+                        start: i,
+                        end: i + bStart.length,
+                    },
+                    {
+                        start: DOM_PARSER_RE.lastIndex - bEnd.length,
+                        end: DOM_PARSER_RE.lastIndex,
+                    },
+                ],
+            };
+            tags.push(tag);
+            tag.parent.children.push(tag);
+        }
+        else if (bStart === '<!') {
+            i = DOM_PARSER_RE.lastIndex - token[0].length;
+            tag = {
+                type: DOCTYPE_NODE,
+                value: bText,
+                parent: parent,
+                loc: [
+                    {
+                        start: i,
+                        end: i + bStart.length,
+                    },
+                    {
+                        start: DOM_PARSER_RE.lastIndex - bEnd.length,
+                        end: DOM_PARSER_RE.lastIndex,
+                    },
+                ],
+            };
+            // commitTextNode();
+            tags.push(tag);
+            tag.parent.children.push(tag);
+        }
+        else if (token[1] !== '/') {
+            commitTextNode();
+            if (RAW_TAGS.has(parent.name)) {
+                lastIndex = DOM_PARSER_RE.lastIndex;
+                commitTextNode();
+                continue;
+            }
+            else {
+                tag = {
+                    type: ELEMENT_NODE,
+                    name: token[2] + '',
+                    attributes: splitAttrs(token[3]),
+                    parent,
+                    children: [],
+                    loc: [
+                        {
+                            start: DOM_PARSER_RE.lastIndex - token[0].length,
+                            end: DOM_PARSER_RE.lastIndex,
+                        },
+                    ],
+                };
+                tags.push(tag);
+                tag.parent.children.push(tag);
+                if ((token[4] && token[4].indexOf('/') > -1) || VOID_TAGS.has(tag.name)) {
+                    tag.loc[1] = tag.loc[0];
+                    tag.isSelfClosingTag = true;
+                }
+                else {
+                    parent = tag;
+                }
+            }
+        }
+        else {
+            commitTextNode();
+            // Close parent node if end-tag matches
+            if (token[2] + '' === parent.name) {
+                tag = parent;
+                parent = tag.parent;
+                tag.loc.push({
+                    start: DOM_PARSER_RE.lastIndex - token[0].length,
+                    end: DOM_PARSER_RE.lastIndex,
+                });
+                text = str.substring(tag.loc[0].end, tag.loc[1].start);
+                if (tag.children.length === 0) {
+                    tag.children.push({
+                        type: TEXT_NODE,
+                        value: text,
+                        parent,
+                    });
+                }
+            }
+            // account for abuse of self-closing tags when an end-tag is also provided:
+            else if (token[2] + '' === tags[tags.length - 1].name &&
+                tags[tags.length - 1].isSelfClosingTag === true) {
+                tag = tags[tags.length - 1];
+                tag.loc.push({
+                    start: DOM_PARSER_RE.lastIndex - token[0].length,
+                    end: DOM_PARSER_RE.lastIndex,
+                });
+            }
+        }
+        lastIndex = DOM_PARSER_RE.lastIndex;
+    }
+    text = str.slice(lastIndex);
+    parent.children.push({
+        type: TEXT_NODE,
+        value: text,
+        parent,
+    });
+    return doc;
+}
+const HTMLString = Symbol('HTMLString');
+const AttrString = Symbol('AttrString');
+const RenderFn = Symbol('RenderFn');
+function mark(str, tags = [HTMLString]) {
+    const v = { value: str };
+    for (const tag of tags) {
+        Object.defineProperty(v, tag, {
+            value: true,
+            enumerable: false,
+            writable: false,
+        });
+    }
+    return v;
+}
+const ESCAPE_CHARS = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+};
+function escapeHTML(str) {
+    return str.replace(/[&<>]/g, (c) => ESCAPE_CHARS[c] || c);
+}
+function attrs(attributes) {
+    let attrStr = '';
+    for (const [key, value] of Object.entries(attributes)) {
+        attrStr += ` ${key}="${value}"`;
+    }
+    return mark(attrStr, [HTMLString, AttrString]);
+}
+function renderElement(node) {
+    const { name, attributes = {} } = node;
+    const children = node.children.map((child) => render(child)).join('');
+    if (RenderFn in node) {
+        const value = node[RenderFn](attributes, mark(children));
+        if (value && value[HTMLString])
+            return value.value;
+        return escapeHTML(String(value));
+    }
+    if (name === Fragment)
+        return children;
+    if (VOID_TAGS.has(name)) {
+        return `<${node.name}${attrs(attributes).value}>`;
+    }
+    return `<${node.name}${attrs(attributes).value}>${children}</${node.name}>`;
+}
+export function render(node) {
+    switch (node.type) {
+        case DOCUMENT_NODE:
+            return node.children.map((child) => render(child)).join('');
+        case ELEMENT_NODE:
+            return renderElement(node);
+        case TEXT_NODE:
+            return `${node.value}`;
+        case COMMENT_NODE:
+            return `<!--${node.value}-->`;
+        case DOCTYPE_NODE:
+            return `<!${node.value}>`;
+    }
+}

package/source/pin-input/index.js

@@ -0,0 +1,12 @@
+import { PinInput as PinInputRoot } from './pin-input';
+import { usePinInputContext } from './pin-input-context';
+import { PinInputControl } from './pin-input-control';
+import { PinInputInput } from './pin-input-field';
+import { PinInputLabel } from './pin-input-label';
+const PinInput = Object.assign(PinInputRoot, {
+    Root: PinInputRoot,
+    Control: PinInputControl,
+    Input: PinInputInput,
+    Label: PinInputLabel,
+});
+export { PinInput, PinInputControl, PinInputInput, PinInputLabel, usePinInputContext };

package/source/pin-input/pin-input-context.js

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

package/source/pin-input/pin-input-control.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { usePinInputContext } from './pin-input-context';
+export const PinInputControl = (props) => {
+    const api = usePinInputContext();
+    const mergedProps = mergeProps(() => api().controlProps, props);
+    return <ark.div {...mergedProps}/>;
+};