@ark-ui/solid 1.2.0 → 2.0.0

package/types/tags-input/tags-input-root.d.ts

@@ -0,0 +1,11 @@
+import { type JSX } from 'solid-js';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseTagsInputProps, type UseTagsInputReturn } from './use-tags-input';
+interface ElementProps extends UseTagsInputProps {
+    children?: JSX.Element | ((api: UseTagsInputReturn) => JSX.Element);
+}
+export interface TagsInputRootProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const TagsInputRoot: ArkComponent<'div', ElementProps>;
+export {};

package/types/toast/index.d.ts

@@ -1,15 +1,15 @@
 import { createToaster, type CreateToasterProps, type CreateToasterReturn } from './create-toaster';
-import { type ToastProps } from './toast';
 import { ToastCloseTrigger, type ToastCloseTriggerProps } from './toast-close-trigger';
 import { ToastDescription, type ToastDescriptionProps } from './toast-description';
 import { ToastGroup, type ToastGroupProps } from './toast-group';
+import { ToastRoot, type ToastRootProps } from './toast-root';
 import { ToastTitle, type ToastTitleProps } from './toast-title';
-declare const Toast: ((props: ToastProps) => import("solid-js").JSX.Element) & {
-    Root: (props: ToastProps) => import("solid-js").JSX.Element;
-    CloseTrigger: (props: ToastCloseTriggerProps) => import("solid-js").JSX.Element;
-    Description: (props: ToastDescriptionProps) => import("solid-js").JSX.Element;
-    Group: (props: ToastGroupProps) => import("solid-js").JSX.Element;
-    Title: (props: ToastTitleProps) => import("solid-js").JSX.Element;
+export declare const Toast: {
+    Root: import("..").ArkComponent<"li", object>;
+    CloseTrigger: import("..").ArkComponent<"button", object>;
+    Description: import("..").ArkComponent<"div", object>;
+    Group: import("..").ArkComponent<"ol", object>;
+    Title: import("..").ArkComponent<"div", object>;
 };
-export { createToaster, Toast, ToastCloseTrigger, ToastDescription, ToastGroup, ToastTitle };
-export type { CreateToasterProps, CreateToasterReturn, ToastCloseTriggerProps, ToastDescriptionProps, ToastGroupProps, ToastProps, ToastTitleProps, };
+export { createToaster, ToastCloseTrigger, ToastDescription, ToastGroup, ToastRoot, ToastTitle };
+export type { CreateToasterProps, CreateToasterReturn, ToastCloseTriggerProps, ToastDescriptionProps, ToastGroupProps, ToastRootProps, ToastTitleProps, };

package/types/toast/toast-close-trigger.d.ts

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

package/types/toast/toast-description.d.ts

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

package/types/toast/toast-group.d.ts

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

package/types/toast/toast-root.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface ToastRootProps extends HTMLArkProps<'li'> {
+}
+export declare const ToastRoot: ArkComponent<'li'>;

package/types/toast/toast-title.d.ts

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

package/types/toggle-group/index.d.ts

@@ -1,9 +1,10 @@
-import { type ToggleGroupProps } from './toggle-group';
+import type { ValueChangeDetails as ToggleGroupValueChangeDetails } from '@zag-js/toggle-group';
 import { useToggleGroupContext, type ToggleGroupContext } from './toggle-group-context';
 import { ToggleGroupItem, type ToggleGroupItemProps } from './toggle-group-item';
-declare const ToggleGroup: ((props: ToggleGroupProps) => import("solid-js").JSX.Element) & {
-    Root: (props: ToggleGroupProps) => import("solid-js").JSX.Element;
-    Item: (props: ToggleGroupItemProps) => import("solid-js").JSX.Element;
+import { ToggleGroupRoot, type ToggleGroupRootProps } from './toggle-group-root';
+export declare const ToggleGroup: {
+    Root: import("..").ArkComponent<"div", import("./use-toggle-group").UseToggleGroupProps>;
+    Item: import("..").ArkComponent<"button", import("@zag-js/toggle-group").ItemProps>;
 };
-export { ToggleGroup, ToggleGroupItem, useToggleGroupContext };
-export type { ToggleGroupContext, ToggleGroupItemProps, ToggleGroupProps };
+export { ToggleGroupItem, ToggleGroupRoot, useToggleGroupContext };
+export type { ToggleGroupContext, ToggleGroupItemProps, ToggleGroupRootProps, ToggleGroupValueChangeDetails, };

package/types/toggle-group/toggle-group-item.d.ts

@@ -1,6 +1,6 @@
 import type { ItemProps } from '@zag-js/toggle-group';
-import { type HTMLArkProps } from '../factory';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
 import type { Assign } from '../types';
 export interface ToggleGroupItemProps extends Assign<HTMLArkProps<'button'>, ItemProps> {
 }
-export declare const ToggleGroupItem: (props: ToggleGroupItemProps) => import("solid-js").JSX.Element;
+export declare const ToggleGroupItem: ArkComponent<'button', ItemProps>;

package/types/toggle-group/toggle-group-root.d.ts

@@ -0,0 +1,6 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseToggleGroupProps } from './use-toggle-group';
+export interface ToggleGroupRootProps extends Assign<HTMLArkProps<'div'>, UseToggleGroupProps> {
+}
+export declare const ToggleGroupRoot: ArkComponent<'div', UseToggleGroupProps>;

package/types/tooltip/index.d.ts

@@ -1,17 +1,18 @@
-import { type TooltipProps } from './tooltip';
+import type { OpenChangeDetails as TooltipOpenChangeDetails } from '@zag-js/tooltip';
 import { TooltipArrow, type TooltipArrowProps } from './tooltip-arrow';
 import { TooltipArrowTip, type TooltipArrowTipProps } from './tooltip-arrow-tip';
 import { TooltipContent, type TooltipContentProps } from './tooltip-content';
 import { useTooltipContext, type TooltipContext } from './tooltip-context';
 import { TooltipPositioner, type TooltipPositionerProps } from './tooltip-positioner';
+import { TooltipRoot, type TooltipRootProps } from './tooltip-root';
 import { TooltipTrigger, type TooltipTriggerProps } from './tooltip-trigger';
-declare const Tooltip: ((props: TooltipProps) => import("solid-js").JSX.Element) & {
-    Root: (props: TooltipProps) => import("solid-js").JSX.Element;
-    Arrow: (props: TooltipArrowProps) => import("solid-js").JSX.Element;
-    ArrowTip: (props: TooltipArrowTipProps) => import("solid-js").JSX.Element;
-    Content: (props: TooltipContentProps) => import("solid-js").JSX.Element;
-    Positioner: (props: TooltipPositionerProps) => import("solid-js").JSX.Element;
-    Trigger: (props: TooltipTriggerProps) => import("solid-js").JSX.Element;
+export declare const Tooltip: {
+    Root: (props: TooltipRootProps) => import("solid-js").JSX.Element;
+    Arrow: import("..").ArkComponent<"div", object>;
+    ArrowTip: import("..").ArkComponent<"div", object>;
+    Content: import("..").ArkComponent<"div", object>;
+    Positioner: import("..").ArkComponent<"div", object>;
+    Trigger: import("..").ArkComponent<"button", object>;
 };
-export { Tooltip, TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipTrigger, useTooltipContext, };
-export type { TooltipArrowProps, TooltipArrowTipProps, TooltipContentProps, TooltipContext, TooltipPositionerProps, TooltipProps, TooltipTriggerProps, };
+export { TooltipArrow, TooltipArrowTip, TooltipContent, TooltipPositioner, TooltipRoot, TooltipTrigger, useTooltipContext, };
+export type { TooltipArrowProps, TooltipArrowTipProps, TooltipContentProps, TooltipContext, TooltipOpenChangeDetails, TooltipPositionerProps, TooltipRootProps, TooltipTriggerProps, };

package/types/tooltip/tooltip-arrow-tip.d.ts

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

package/types/tooltip/tooltip-arrow.d.ts

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

package/types/tooltip/tooltip-content.d.ts

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

package/types/tooltip/tooltip-positioner.d.ts

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

package/types/tooltip/{tooltip.d.ts → tooltip-root.d.ts}

@@ -1,7 +1,7 @@
 import { type JSX } from 'solid-js';
 import { type UsePresenceProps } from '../presence';
 import { type UseTooltipProps, type UseTooltipReturn } from './use-tooltip';
-export interface TooltipProps extends UseTooltipProps, UsePresenceProps {
+export interface TooltipRootProps extends UseTooltipProps, UsePresenceProps {
     children?: JSX.Element | ((api: UseTooltipReturn) => JSX.Element);
 }
-export declare const Tooltip: (props: TooltipProps) => JSX.Element;
+export declare const TooltipRoot: (props: TooltipRootProps) => JSX.Element;

package/types/tooltip/tooltip-trigger.d.ts

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

package/types/tree-view/tree-view-branch-content.d.ts

@@ -0,0 +1,6 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type BranchProps } from './tree-view-context';
+export interface TreeViewBranchContentProps extends Assign<HTMLArkProps<'ul'>, BranchProps> {
+}
+export declare const TreeViewBranchContent: ArkComponent<'ul', BranchProps>;

package/types/tree-view/tree-view-branch-control.d.ts

@@ -0,0 +1,6 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type BranchProps } from './tree-view-context';
+export interface TreeViewBranchControlProps extends Assign<HTMLArkProps<'div'>, BranchProps> {
+}
+export declare const TreeViewBranchControl: ArkComponent<'div', BranchProps>;

package/types/tree-view/tree-view-branch-indicator.d.ts

@@ -0,0 +1,6 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type BranchProps } from './tree-view-context';
+export interface TreeViewBranchIndicatorProps extends Assign<HTMLArkProps<'div'>, BranchProps> {
+}
+export declare const TreeViewBranchIndicator: ArkComponent<'div', BranchProps>;

package/types/tree-view/tree-view-branch-text.d.ts

@@ -0,0 +1,6 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type BranchProps } from './tree-view-context';
+export interface TreeViewBranchTextProps extends Assign<HTMLArkProps<'span'>, BranchProps> {
+}
+export declare const TreeViewBranchText: ArkComponent<'span', BranchProps>;

package/types/tree-view/tree-view-branch-trigger.d.ts

@@ -0,0 +1,6 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type BranchProps } from './tree-view-context';
+export interface TreeViewBranchTriggerProps extends Assign<HTMLArkProps<'button'>, BranchProps> {
+}
+export declare const TreeViewBranchTrigger: ArkComponent<'button', BranchProps>;

package/types/tree-view/tree-view-branch.d.ts

@@ -0,0 +1,11 @@
+import { type Accessor, type JSX } from 'solid-js';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type BranchProps, type BranchState } from './tree-view-context';
+interface ElementProps extends BranchProps {
+    children?: JSX.Element | ((state: Accessor<BranchState>) => JSX.Element);
+}
+export interface TreeViewBranchProps extends Assign<HTMLArkProps<'li'>, ElementProps> {
+}
+export declare const TreeViewBranch: ArkComponent<'li', ElementProps>;
+export {};

package/types/tree-view/tree-view-context.d.ts

@@ -0,0 +1,20 @@
+import { type UseTreeViewReturn } from './use-tree-view';
+export interface ItemProps {
+    depth: number;
+    id: string;
+    disabled?: boolean;
+}
+export interface BranchProps extends ItemProps {
+}
+export interface ItemState {
+    id: string;
+    isDisabled: boolean;
+    isSelected: boolean;
+    isFocused: boolean;
+}
+export interface BranchState extends ItemState {
+    isExpanded: boolean;
+}
+export interface TreeViewContext extends UseTreeViewReturn {
+}
+export declare const TreeViewProvider: import("solid-js").ContextProviderComponent<TreeViewContext>, useTreeViewContext: () => TreeViewContext;

package/types/tree-view/tree-view-item-text.d.ts

@@ -0,0 +1,6 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type ItemProps } from './tree-view-context';
+export interface TreeViewItemTextProps extends Assign<HTMLArkProps<'span'>, ItemProps> {
+}
+export declare const TreeViewItemText: ArkComponent<'span', ItemProps>;

package/types/tree-view/tree-view-item.d.ts

@@ -0,0 +1,11 @@
+import { type Accessor, type JSX } from 'solid-js';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type ItemProps, type ItemState } from './tree-view-context';
+interface ElementProps extends ItemProps {
+    children?: JSX.Element | ((state: Accessor<ItemState>) => JSX.Element);
+}
+export interface TreeViewItemProps extends Assign<HTMLArkProps<'li'>, ElementProps> {
+}
+export declare const TreeViewItem: ArkComponent<'li', ElementProps>;
+export {};

package/types/tree-view/tree-view-label.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface TreeViewLabelProps extends HTMLArkProps<'label'> {
+}
+export declare const TreeViewLabel: ArkComponent<'label'>;

package/types/tree-view/tree-view-root.d.ts

@@ -0,0 +1,11 @@
+import { type JSX } from 'solid-js';
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+import type { Assign } from '../types';
+import { type UseTreeViewProps, type UseTreeViewReturn } from './use-tree-view';
+interface ElementProps extends UseTreeViewProps {
+    children?: JSX.Element | ((api: UseTreeViewReturn) => JSX.Element);
+}
+export interface TreeViewRootProps extends Assign<HTMLArkProps<'div'>, ElementProps> {
+}
+export declare const TreeViewRoot: ArkComponent<'div', ElementProps>;
+export {};

package/types/tree-view/tree-view-tree.d.ts

@@ -0,0 +1,4 @@
+import { type ArkComponent, type HTMLArkProps } from '../factory';
+export interface TreeViewTreeProps extends HTMLArkProps<'ul'> {
+}
+export declare const TreeViewTree: ArkComponent<'ul'>;

package/types/tree-view/use-tree-view.d.ts

@@ -0,0 +1,9 @@
+import { type PropTypes } from '@zag-js/solid';
+import * as treeView from '@zag-js/tree-view';
+import { type Accessor } from 'solid-js';
+import { type Optional } from '../types';
+export interface UseTreeViewProps extends Optional<treeView.Context, 'id'> {
+}
+export interface UseTreeViewReturn extends Accessor<treeView.Api<PropTypes>> {
+}
+export declare const useTreeView: (props: UseTreeViewProps) => UseTreeViewReturn;

package/source/constants.js

@@ -1,27 +0,0 @@
-const booleans = [
-    'allowfullscreen',
-    'async',
-    'autofocus',
-    'autoplay',
-    'checked',
-    'controls',
-    'default',
-    'disabled',
-    'formnovalidate',
-    'hidden',
-    'indeterminate',
-    'ismap',
-    'loop',
-    'multiple',
-    'muted',
-    'nomodule',
-    'novalidate',
-    'open',
-    'playsinline',
-    'readonly',
-    'required',
-    'reversed',
-    'seamless',
-    'selected',
-];
-export const BooleanAttributes = new Set(booleans);

package/source/filter-object.js

@@ -1,7 +0,0 @@
-import { BooleanAttributes } from './constants';
-import { isEmpty } from './is-empty';
-import { isFunction } from './is-function';
-export const filterObject = (obj, fn) => Object.fromEntries(Object.entries(obj).filter(fn));
-export const filterEmptyValues = (obj) => filterObject(obj, ([, v]) => !isEmpty(v));
-export const filterFunctionValues = (obj) => filterObject(obj, ([, v]) => !isFunction(v));
-export const filterBooleanAttributeValues = (obj) => filterObject(obj, ([k, v]) => !(BooleanAttributes.has(k) && !v));

package/source/is-empty.js

@@ -1,4 +0,0 @@
-export const isEmpty = (value) => value == null ||
-    value == undefined ||
-    (typeof value === 'object' && Object.keys(value).length === 0) ||
-    (typeof value === 'string' && value.trim().length === 0);

package/source/is-function.js

@@ -1 +0,0 @@
-export const isFunction = (value) => typeof value === 'function';

package/source/merge-style.js

@@ -1,30 +0,0 @@
-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;
-};