@ark-ui/solid 3.2.2 → 3.3.0

package/dist/source/components/checkbox/checkbox-group.jsx

@@ -0,0 +1,18 @@
+import { checkboxAnatomy } from '@ark-ui/anatomy';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useCheckboxGroup } from './use-checkbox-group';
+import { CheckboxGroupContextProvider } from './use-checkbox-group-context';
+export const CheckboxGroup = (props) => {
+    const [checkboxGroupProps, localProps] = createSplitProps()(props, [
+        'defaultValue',
+        'value',
+        'onValueChange',
+        'disabled',
+        'readOnly',
+    ]);
+    const checkboxGroup = useCheckboxGroup(checkboxGroupProps);
+    return (<CheckboxGroupContextProvider value={checkboxGroup}>
+      <ark.div {...localProps} {...checkboxAnatomy.build().group.attrs}/>
+    </CheckboxGroupContextProvider>);
+};

package/dist/source/components/checkbox/checkbox.js

@@ -1,5 +1,6 @@
 export { CheckboxContext as Context, } from './checkbox-context';
 export { CheckboxControl as Control, } from './checkbox-control';
+export { CheckboxGroup as Group } from './checkbox-group';
 export { CheckboxHiddenInput as HiddenInput, } from './checkbox-hidden-input';
 export { CheckboxIndicator as Indicator, } from './checkbox-indicator';
 export { CheckboxLabel as Label } from './checkbox-label';

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

@@ -1,5 +1,6 @@
 export { CheckboxContext } from './checkbox-context';
 export { CheckboxControl } from './checkbox-control';
+export { CheckboxGroup } from './checkbox-group';
 export { CheckboxHiddenInput } from './checkbox-hidden-input';
 export { CheckboxIndicator } from './checkbox-indicator';
 export { CheckboxLabel } from './checkbox-label';
@@ -7,4 +8,6 @@ export { CheckboxRoot } from './checkbox-root';
 export { CheckboxRootProvider } from './checkbox-root-provider';
 export { useCheckbox } from './use-checkbox';
 export { useCheckboxContext } from './use-checkbox-context';
+export { useCheckboxGroup, } from './use-checkbox-group';
+export { useCheckboxGroupContext } from './use-checkbox-group-context';
 export * as Checkbox from './checkbox';

package/dist/source/components/checkbox/use-checkbox-group-context.jsx

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

package/dist/source/components/checkbox/use-checkbox-group.js

@@ -0,0 +1,52 @@
+import { createMemo } from 'solid-js';
+import { useControllableState } from '../../utils/use-controllable-state';
+export function useCheckboxGroup(props = {}) {
+    const interative = createMemo(() => !(props.disabled || props.readOnly));
+    const [value, setValue] = useControllableState({
+        value: props.value,
+        defaultValue: props.defaultValue || [],
+        onChange: props.onValueChange,
+    });
+    return createMemo(() => {
+        const isChecked = (val) => {
+            return value().some((v) => String(v) === String(val));
+        };
+        const toggleValue = (val) => {
+            isChecked(val) ? removeValue(val) : addValue(val);
+        };
+        const addValue = (val) => {
+            if (!interative())
+                return;
+            if (isChecked(val))
+                return;
+            setValue(value().concat(val));
+        };
+        const removeValue = (val) => {
+            if (!interative())
+                return;
+            setValue(value().filter((v) => String(v) !== String(val)));
+        };
+        const getItemProps = (itemProps) => {
+            return {
+                checked: itemProps.value != null ? isChecked(itemProps.value) : undefined,
+                onCheckedChange() {
+                    if (itemProps.value != null) {
+                        toggleValue(itemProps.value);
+                    }
+                },
+                disabled: props.disabled,
+                readOnly: props.readOnly,
+            };
+        };
+        return {
+            isChecked,
+            value,
+            disabled: props.disabled,
+            readOnly: props.readOnly,
+            setValue,
+            addValue,
+            toggleValue,
+            getItemProps,
+        };
+    });
+}

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

@@ -1,8 +1,13 @@
 import * as checkbox from '@zag-js/checkbox';
-import { normalizeProps, useMachine } from '@zag-js/solid';
+import { mergeProps, normalizeProps, useMachine } from '@zag-js/solid';
 import { createMemo, createUniqueId } from 'solid-js';
 import { useEnvironmentContext, useLocaleContext } from '../../providers';
-export const useCheckbox = (props) => {
+import { useCheckboxGroupContext } from './use-checkbox-group-context';
+export const useCheckbox = (ownProps) => {
+    const checkboxGroup = useCheckboxGroupContext();
+    const props = createMemo(() => {
+        return mergeProps(ownProps, checkboxGroup?.().getItemProps({ value: ownProps.value }) ?? {});
+    }, [ownProps, checkboxGroup]);
     const locale = useLocaleContext();
     const environment = useEnvironmentContext();
     const id = createUniqueId();
@@ -10,8 +15,8 @@ export const useCheckbox = (props) => {
         id,
         dir: locale().dir,
         getRootNode: environment().getRootNode,
-        checked: props.defaultChecked,
-        ...props,
+        checked: props().defaultChecked,
+        ...props(),
     }));
     const [state, send] = useMachine(checkbox.machine(context()), { context });
     return createMemo(() => checkbox.connect(state, send, normalizeProps));

package/dist/source/components/index.js

@@ -20,10 +20,12 @@ export * from './pin-input';
 export * from './popover';
 export * from './presence';
 export * from './progress';
+export * from './qr-code';
 export * from './radio-group';
 export * from './rating-group';
 export * from './segment-group';
 export * from './select';
+export * from './signature-pad';
 export * from './slider';
 export * from './splitter';
 export * from './switch';

package/dist/source/components/presence/split-presence-props.js

@@ -1,5 +1,6 @@
 import { createSplitProps } from '../../utils/create-split-props';
 export const splitPresenceProps = (props) => createSplitProps()(props, [
+    'immediate',
     'lazyMount',
     'onExitComplete',
     'present',

package/dist/source/components/qr-code/index.js

@@ -0,0 +1,9 @@
+export { QrCodeContext } from './qr-code-context';
+export { QrCodeFrame } from './qr-code-frame';
+export { QrCodeOverlay } from './qr-code-overlay';
+export { QrCodePattern } from './qr-code-pattern';
+export { QrCodeRoot } from './qr-code-root';
+export { QrCodeRootProvider } from './qr-code-root-provider';
+export { useQrCode } from './use-qr-code';
+export { useQrCodeContext } from './use-qr-code-context';
+export * as QrCode from './qr-code';

package/dist/source/components/qr-code/qr-code-context.js

@@ -0,0 +1,2 @@
+import { useQrCodeContext } from './use-qr-code-context';
+export const QrCodeContext = (props) => props.children(useQrCodeContext());

package/dist/source/components/qr-code/qr-code-frame.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useQrCodeContext } from './use-qr-code-context';
+export const QrCodeFrame = (props) => {
+    const qrCode = useQrCodeContext();
+    const mergedProps = mergeProps(() => qrCode().getFrameProps(), props);
+    return <ark.svg {...mergedProps}/>;
+};

package/dist/source/components/qr-code/qr-code-overlay.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useQrCodeContext } from './use-qr-code-context';
+export const QrCodeOverlay = (props) => {
+    const qrCode = useQrCodeContext();
+    const mergedProps = mergeProps(() => qrCode().getOverlayProps(), props);
+    return <ark.div {...mergedProps}/>;
+};

package/dist/source/components/qr-code/qr-code-pattern.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useQrCodeContext } from './use-qr-code-context';
+export const QrCodePattern = (props) => {
+    const qrCode = useQrCodeContext();
+    const mergedProps = mergeProps(() => qrCode().getPatternProps(), props);
+    return <ark.path {...mergedProps}/>;
+};

package/dist/source/components/qr-code/qr-code-root-provider.jsx

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

package/dist/source/components/qr-code/qr-code-root.jsx

@@ -0,0 +1,18 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useQrCode } from './use-qr-code';
+import { QrCodeProvider } from './use-qr-code-context';
+export const QrCodeRoot = (props) => {
+    const [useQrCodeProps, restProps] = createSplitProps()(props, [
+        'encoding',
+        'id',
+        'ids',
+        'value',
+    ]);
+    const api = useQrCode(useQrCodeProps);
+    const mergedProps = mergeProps(() => api().getRootProps(), restProps);
+    return (<QrCodeProvider value={api}>
+      <ark.div {...mergedProps}/>
+    </QrCodeProvider>);
+};

package/dist/source/components/qr-code/qr-code.js

@@ -0,0 +1,6 @@
+export { QrCodeContext } from './qr-code-context';
+export { QrCodeFrame as Frame } from './qr-code-frame';
+export { QrCodeOverlay as Overlay, } from './qr-code-overlay';
+export { QrCodePattern as Pattern, } from './qr-code-pattern';
+export { QrCodeRoot as Root } from './qr-code-root';
+export { QrCodeRootProvider as RootProvider, } from './qr-code-root-provider';

package/dist/source/components/qr-code/use-qr-code-context.js

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

package/dist/source/components/qr-code/use-qr-code.js

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

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

@@ -11,6 +11,7 @@ export { SelectItemGroupLabel } from './select-item-group-label';
 export { SelectItemIndicator } from './select-item-indicator';
 export { SelectItemText } from './select-item-text';
 export { SelectLabel } from './select-label';
+export { SelectList } from './select-list';
 export { SelectPositioner } from './select-positioner';
 export { SelectRoot } from './select-root';
 export { SelectRootProvider } from './select-root-provider';

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

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

package/dist/source/components/select/select.js

@@ -11,6 +11,7 @@ export { SelectItemGroupLabel as ItemGroupLabel, } from './select-item-group-lab
 export { SelectItemIndicator as ItemIndicator, } from './select-item-indicator';
 export { SelectItemText as ItemText, } from './select-item-text';
 export { SelectLabel as Label } from './select-label';
+export { SelectList as List } from './select-list';
 export { SelectPositioner as Positioner, } from './select-positioner';
 export { SelectRoot as Root } from './select-root';
 export { SelectRootProvider as RootProvider, } from './select-root-provider';

package/dist/source/components/signature-pad/index.js

@@ -0,0 +1,11 @@
+export { SignaturePadClearTrigger, } from './signature-pad-clear-trigger';
+export { SignaturePadContext } from './signature-pad-context';
+export { SignaturePadControl } from './signature-pad-control';
+export { SignaturePadGuide } from './signature-pad-guide';
+export { SignaturePadLabel } from './signature-pad-label';
+export { SignaturePadRoot } from './signature-pad-root';
+export { SignaturePadRootProvider, } from './signature-pad-root-provider';
+export { SignaturePadSegment } from './signature-pad-segment';
+export { useSignaturePad, } from './use-signature-pad';
+export { useSignaturePadContext } from './use-signature-pad-context';
+export * as SignaturePad from './signature-pad';

package/dist/source/components/signature-pad/signature-pad-clear-trigger.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSignaturePadContext } from './use-signature-pad-context';
+export const SignaturePadClearTrigger = (props) => {
+    const signaturePad = useSignaturePadContext();
+    const mergedProps = mergeProps(() => signaturePad().getClearTriggerProps(), props);
+    return <ark.button {...mergedProps}/>;
+};

package/dist/source/components/signature-pad/signature-pad-context.jsx

@@ -0,0 +1,2 @@
+import { useSignaturePadContext } from './use-signature-pad-context';
+export const SignaturePadContext = (props) => props.children(useSignaturePadContext());

package/dist/source/components/signature-pad/signature-pad-control.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSignaturePadContext } from './use-signature-pad-context';
+export const SignaturePadControl = (props) => {
+    const signaturePad = useSignaturePadContext();
+    const mergedProps = mergeProps(() => signaturePad().getControlProps(), props);
+    return <ark.div role="application" {...mergedProps}/>;
+};

package/dist/source/components/signature-pad/signature-pad-guide.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSignaturePadContext } from './use-signature-pad-context';
+export const SignaturePadGuide = (props) => {
+    const signaturePad = useSignaturePadContext();
+    const mergedProps = mergeProps(() => signaturePad().getGuideProps(), props);
+    return <ark.div {...mergedProps}/>;
+};

package/dist/source/components/signature-pad/signature-pad-label.jsx

@@ -0,0 +1,8 @@
+import { mergeProps } from '@zag-js/solid';
+import { ark } from '../factory';
+import { useSignaturePadContext } from './use-signature-pad-context';
+export const SignaturePadLabel = (props) => {
+    const signaturePad = useSignaturePadContext();
+    const mergedProps = mergeProps(() => signaturePad().getLabelProps(), props);
+    return <ark.label {...mergedProps}/>;
+};

package/dist/source/components/signature-pad/signature-pad-root-provider.jsx

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

package/dist/source/components/signature-pad/signature-pad-root.jsx

@@ -0,0 +1,22 @@
+import { mergeProps } from '@zag-js/solid';
+import { createSplitProps } from '../../utils/create-split-props';
+import { ark } from '../factory';
+import { useSignaturePad } from './use-signature-pad';
+import { SignaturePadProvider } from './use-signature-pad-context';
+export const SignaturePadRoot = (props) => {
+    const [useSignaturePadProps, localProps] = createSplitProps()(props, [
+        'id',
+        'ids',
+        'drawing',
+        'disabled',
+        'readOnly',
+        'name',
+        'onDraw',
+        'onDrawEnd',
+    ]);
+    const signaturePad = useSignaturePad(useSignaturePadProps);
+    const mergedProps = mergeProps(() => signaturePad().getRootProps(), localProps);
+    return (<SignaturePadProvider value={signaturePad}>
+      <ark.div {...mergedProps}/>
+    </SignaturePadProvider>);
+};

package/dist/source/components/signature-pad/signature-pad-segment.jsx

@@ -0,0 +1,18 @@
+import { mergeProps } from '@zag-js/solid';
+import { For, Show } from 'solid-js';
+import { ark } from '../factory';
+import { useSignaturePadContext } from './use-signature-pad-context';
+export const SignaturePadSegment = (props) => {
+    const signaturePad = useSignaturePadContext();
+    const mergedProps = mergeProps(() => signaturePad().getSegmentProps(), props);
+    return (<ark.svg {...mergedProps}>
+      <title>Signature</title>
+      <For each={signaturePad().paths}>
+        {(path) => <path {...signaturePad().getSegmentPathProps({ path })}/>}
+      </For>
+      <Show when={signaturePad().currentPath}>
+        {/* @ts-expect-error */}
+        <path {...signaturePad().getSegmentPathProps({ path: signaturePad().currentPath })}/>
+      </Show>
+    </ark.svg>);
+};

package/dist/source/components/signature-pad/signature-pad.js

@@ -0,0 +1,8 @@
+export { SignaturePadClearTrigger as ClearTrigger, } from './signature-pad-clear-trigger';
+export { SignaturePadContext as Context, } from './signature-pad-context';
+export { SignaturePadControl as Control, } from './signature-pad-control';
+export { SignaturePadGuide as Guide, } from './signature-pad-guide';
+export { SignaturePadLabel as Label, } from './signature-pad-label';
+export { SignaturePadRoot as Root, } from './signature-pad-root';
+export { SignaturePadRootProvider as RootProvider, } from './signature-pad-root-provider';
+export { SignaturePadSegment as Segment, } from './signature-pad-segment';

package/dist/source/components/signature-pad/use-signature-pad-context.js

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

package/dist/source/components/signature-pad/use-signature-pad.js

@@ -0,0 +1,17 @@
+import * as signaturePad from '@zag-js/signature-pad';
+import { normalizeProps, useMachine } from '@zag-js/solid';
+import { createMemo, createUniqueId } from 'solid-js';
+import { useEnvironmentContext, useLocaleContext } from '../../providers';
+export const useSignaturePad = (props) => {
+    const locale = useLocaleContext();
+    const environment = useEnvironmentContext();
+    const id = createUniqueId();
+    const context = createMemo(() => ({
+        id,
+        dir: locale().dir,
+        getRootNode: environment().getRootNode,
+        ...props,
+    }));
+    const [state, send] = useMachine(signaturePad.machine(context()), { context });
+    return createMemo(() => signaturePad.connect(state, send, normalizeProps));
+};

package/dist/source/components/tabs/tab-content.jsx

@@ -9,7 +9,10 @@ export const TabContent = (props) => {
     const [contentProps, localProps] = createSplitProps()(props, ['value']);
     const api = useTabsContext();
     const renderStrategyProps = useRenderStrategyContext();
-    const presenceApi = usePresence(mergeProps(renderStrategyProps, () => ({ present: api().value === contentProps.value })));
+    const presenceApi = usePresence(mergeProps(renderStrategyProps, () => ({
+        present: api().value === contentProps.value,
+        immediate: true,
+    })));
     const mergedProps = mergeProps(() => api().getContentProps(contentProps), () => presenceApi().presenceProps, localProps);
     return (<PresenceProvider value={presenceApi}>
       <Show when={!presenceApi().unmounted}>

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

@@ -1,7 +1,9 @@
+import { mergeProps } from '@zag-js/solid';
 import { useToastContext } from './use-toast-context';
 export const ToastRoot = (props) => {
     const toast = useToastContext();
-    return (<div {...toast().getRootProps()}>
+    const mergedProps = mergeProps(() => toast().getRootProps(), props);
+    return (<div {...mergedProps}>
       <div {...toast().getGhostBeforeProps()}/>
       {props.children}
       <div {...toast().getGhostAfterProps()}/>

package/dist/source/utils/use-controllable-state.js

@@ -0,0 +1,18 @@
+import { createMemo, createSignal, untrack } from 'solid-js';
+import { runIfFn } from './run-if-fn';
+export function useControllableState(props) {
+    const [uncontrolledValue, setUncontrolledValue] = createSignal(runIfFn(props.defaultValue));
+    const controlled = createMemo(() => props.value?.() !== undefined);
+    const currentValue = createMemo(() => (controlled() ? props.value?.() : uncontrolledValue()));
+    const setValue = (next) => {
+        untrack(() => {
+            const nextValue = runIfFn(next, currentValue());
+            if (controlled()) {
+                return props.onChange?.(nextValue);
+            }
+            setUncontrolledValue(nextValue);
+            return props.onChange?.(nextValue);
+        });
+    };
+    return [currentValue, setValue];
+}

package/dist/types/components/checkbox/checkbox-group.d.ts

@@ -0,0 +1,6 @@
+import type { Assign } from '../../types';
+import { type HTMLArkProps } from '../factory';
+import { type UseCheckboxGroupProps } from './use-checkbox-group';
+export interface CheckboxGroupProps extends Assign<HTMLArkProps<'div'>, UseCheckboxGroupProps> {
+}
+export declare const CheckboxGroup: (props: CheckboxGroupProps) => import("solid-js").JSX.Element;

package/dist/types/components/checkbox/checkbox.d.ts

@@ -1,6 +1,7 @@
 export type { CheckedChangeDetails, CheckedState } from '@zag-js/checkbox';
 export { CheckboxContext as Context, type CheckboxContextProps as ContextProps, } from './checkbox-context';
 export { CheckboxControl as Control, type CheckboxControlProps as ControlProps, } from './checkbox-control';
+export { CheckboxGroup as Group, type CheckboxGroupProps as GroupProps } from './checkbox-group';
 export { CheckboxHiddenInput as HiddenInput, type CheckboxHiddenInputProps as HiddenInputProps, } from './checkbox-hidden-input';
 export { CheckboxIndicator as Indicator, type CheckboxIndicatorProps as IndicatorProps, } from './checkbox-indicator';
 export { CheckboxLabel as Label, type CheckboxLabelProps as LabelProps } from './checkbox-label';

package/dist/types/components/checkbox/index.d.ts

@@ -1,6 +1,7 @@
 export type { CheckedChangeDetails as CheckboxCheckedChangeDetails, CheckedState as CheckboxCheckedState, } from '@zag-js/checkbox';
 export { CheckboxContext, type CheckboxContextProps } from './checkbox-context';
 export { CheckboxControl, type CheckboxControlProps } from './checkbox-control';
+export { CheckboxGroup, type CheckboxGroupProps } from './checkbox-group';
 export { CheckboxHiddenInput, type CheckboxHiddenInputProps } from './checkbox-hidden-input';
 export { CheckboxIndicator, type CheckboxIndicatorProps } from './checkbox-indicator';
 export { CheckboxLabel, type CheckboxLabelProps } from './checkbox-label';
@@ -8,4 +9,6 @@ export { CheckboxRoot, type CheckboxRootProps } from './checkbox-root';
 export { CheckboxRootProvider, type CheckboxRootProviderProps } from './checkbox-root-provider';
 export { useCheckbox, type UseCheckboxProps, type UseCheckboxReturn } from './use-checkbox';
 export { useCheckboxContext, type UseCheckboxContext } from './use-checkbox-context';
+export { useCheckboxGroup, type UseCheckboxGroupProps, type UseCheckboxGroupReturn, } from './use-checkbox-group';
+export { useCheckboxGroupContext, type UseCheckboxGroupContext } from './use-checkbox-group-context';
 export * as Checkbox from './checkbox';

package/dist/types/components/checkbox/use-checkbox-group-context.d.ts

@@ -0,0 +1,4 @@
+import type { UseCheckboxGroupReturn } from './use-checkbox-group';
+export interface UseCheckboxGroupContext extends UseCheckboxGroupReturn {
+}
+export declare const CheckboxGroupContextProvider: import("solid-js").ContextProviderComponent<UseCheckboxGroupContext>, useCheckboxGroupContext: () => UseCheckboxGroupContext;

package/dist/types/components/checkbox/use-checkbox-group.d.ts

@@ -0,0 +1,42 @@
+import { type Accessor } from 'solid-js';
+export interface UseCheckboxGroupProps {
+    /**
+     * The initial value of `value` when uncontrolled
+     */
+    defaultValue?: Accessor<string[]> | string[];
+    /**
+     * The controlled value of the checkbox group
+     */
+    value?: Accessor<string[]>;
+    /**
+     * The callback to call when the value changes
+     */
+    onValueChange?: (value: string[]) => void;
+    /**
+     * If `true`, the checkbox group is disabled
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the checkbox group is read-only
+     */
+    readOnly?: boolean;
+}
+export interface CheckboxGroupItemProps {
+    value: string | undefined;
+}
+export declare function useCheckboxGroup(props?: UseCheckboxGroupProps): Accessor<{
+    isChecked: (val: string | undefined) => boolean;
+    value: Accessor<string[]>;
+    disabled: boolean;
+    readOnly: boolean;
+    setValue: (next: string[] | ((prev: string[]) => string[])) => void;
+    addValue: (val: string) => void;
+    toggleValue: (val: string) => void;
+    getItemProps: (itemProps: CheckboxGroupItemProps) => {
+        checked: boolean;
+        onCheckedChange(): void;
+        disabled: boolean;
+        readOnly: boolean;
+    };
+}>;
+export type UseCheckboxGroupReturn = ReturnType<typeof useCheckboxGroup>;

package/dist/types/components/checkbox/use-checkbox.d.ts

@@ -11,4 +11,4 @@ export interface UseCheckboxProps extends Optional<Omit<checkbox.Context, 'dir'
 }
 export interface UseCheckboxReturn extends Accessor<checkbox.Api<PropTypes>> {
 }
-export declare const useCheckbox: (props: UseCheckboxProps) => UseCheckboxReturn;
+export declare const useCheckbox: (ownProps: UseCheckboxProps) => UseCheckboxReturn;

package/dist/types/components/index.d.ts

@@ -20,10 +20,12 @@ export * from './pin-input';
 export * from './popover';
 export * from './presence';
 export * from './progress';
+export * from './qr-code';
 export * from './radio-group';
 export * from './rating-group';
 export * from './segment-group';
 export * from './select';
+export * from './signature-pad';
 export * from './slider';
 export * from './splitter';
 export * from './switch';

package/dist/types/components/presence/split-presence-props.d.ts

@@ -1,2 +1,2 @@
 import type { UsePresenceProps } from './use-presence';
-export declare const splitPresenceProps: <T extends UsePresenceProps>(props: T) => [Pick<T, Extract<("lazyMount" | "unmountOnExit" | "onExitComplete" | "present")[], readonly (keyof T)[]>[number]>, { [P in keyof T as Exclude<P, "lazyMount" | "unmountOnExit" | "onExitComplete" | "present">]: T[P]; }];
+export declare const splitPresenceProps: <T extends UsePresenceProps>(props: T) => [Pick<T, Extract<("lazyMount" | "unmountOnExit" | "onExitComplete" | "present" | "immediate")[], readonly (keyof T)[]>[number]>, { [P in keyof T as Exclude<P, "lazyMount" | "unmountOnExit" | "onExitComplete" | "present" | "immediate">]: T[P]; }];

package/dist/types/components/qr-code/index.d.ts

@@ -0,0 +1,10 @@
+export type { QrCodeGenerateOptions, QrCodeGenerateResult } from '@zag-js/qr-code';
+export { QrCodeContext, type QrCodeContextProps } from './qr-code-context';
+export { QrCodeFrame, type QrCodeFrameProps } from './qr-code-frame';
+export { QrCodeOverlay, type QrCodeOverlayProps } from './qr-code-overlay';
+export { QrCodePattern, type QrCodePatternProps } from './qr-code-pattern';
+export { QrCodeRoot, type QrCodeRootProps } from './qr-code-root';
+export { QrCodeRootProvider, type QrCodeRootProviderProps } from './qr-code-root-provider';
+export { useQrCode, type UseQrCodeProps, type UseQrCodeReturn } from './use-qr-code';
+export { useQrCodeContext, type UseQrCodeContext } from './use-qr-code-context';
+export * as QrCode from './qr-code';

package/dist/types/components/qr-code/qr-code-context.d.ts

@@ -0,0 +1,6 @@
+import type { JSX } from 'solid-js';
+import { type UseQrCodeContext } from './use-qr-code-context';
+export interface QrCodeContextProps {
+    children: (context: UseQrCodeContext) => JSX.Element;
+}
+export declare const QrCodeContext: (props: QrCodeContextProps) => JSX.Element;

package/dist/types/components/qr-code/qr-code-frame.d.ts

@@ -0,0 +1,4 @@
+import { type HTMLArkProps } from '../factory';
+export interface QrCodeFrameProps extends HTMLArkProps<'svg'> {
+}
+export declare const QrCodeFrame: (props: QrCodeFrameProps) => import("solid-js").JSX.Element;