@ark-ui/solid 5.17.0 → 5.18.1

package/dist/chunk/5FRMO4AQ.jsx

@@ -0,0 +1,237 @@
+import {
+  tree_view_exports,
+  useTreeView,
+  useTreeViewContext
+} from "./VR5BNKL7.jsx";
+import {
+  createTreeCollection
+} from "./DZGDAEOH.jsx";
+import {
+  createSplitProps
+} from "./6WEDGJKQ.jsx";
+import {
+  createContext
+} from "./TVCIHLER.jsx";
+import {
+  __export
+} from "./7IUG3E2V.jsx";
+
+// src/components/json-tree-view/json-tree-view-root.tsx
+import { getRootNode, nodeToString, nodeToValue } from "@zag-js/json-tree-utils";
+import { createMemo, splitProps } from "solid-js";
+
+// src/components/json-tree-view/get-branch-value.ts
+function getBranchValues(tree, depth) {
+  let values = [];
+  tree.visit({
+    onEnter: (node, indexPath) => {
+      if (indexPath.length === 0) return;
+      if (tree.isBranchNode(node) && indexPath.length <= depth) {
+        values.push(tree.getNodeValue(node));
+      }
+    }
+  });
+  return values;
+}
+
+// src/components/json-tree-view/json-tree-view-props-context.ts
+var [JsonTreeViewPropsProvider, useJsonTreeViewPropsContext] = createContext({
+  hookName: "useJsonTreeViewPropsContext",
+  providerName: "<JsonTreeViewPropsProvider />"
+});
+
+// src/components/json-tree-view/json-tree-view-root.tsx
+var splitJsonTreeViewProps = createSplitProps();
+var JsonTreeViewRoot = (props) => {
+  const [jsonTreeProps, localProps] = splitJsonTreeViewProps(props, [
+    "maxPreviewItems",
+    "collapseStringsAfterLength",
+    "quotesOnKeys",
+    "groupArraysAfterLength",
+    "showNonenumerable"
+  ]);
+  const [jsonProps, restProps] = splitProps(localProps, ["data", "defaultExpandedDepth"]);
+  const collection = createMemo(() => {
+    return createTreeCollection({
+      nodeToValue,
+      nodeToString,
+      rootNode: getRootNode(jsonProps.data)
+    });
+  });
+  const defaultExpandedValue = createMemo(() => {
+    return jsonProps.defaultExpandedDepth != null ? getBranchValues(collection(), jsonProps.defaultExpandedDepth) : void 0;
+  });
+  return <JsonTreeViewPropsProvider value={jsonTreeProps}>
+      <tree_view_exports.Root
+    data-scope="json-tree-view"
+    collection={collection()}
+    defaultExpandedValue={defaultExpandedValue()}
+    {...restProps}
+  >
+        {props.children}
+      </tree_view_exports.Root>
+    </JsonTreeViewPropsProvider>;
+};
+
+// src/components/json-tree-view/json-tree-view-root-provider.tsx
+var JsonTreeViewRootProvider = (props) => {
+  return <tree_view_exports.RootProvider data-scope="json-tree-view" {...props} />;
+};
+
+// src/components/json-tree-view/json-tree-view-tree.tsx
+import { Index as Index2 } from "solid-js";
+
+// src/components/json-tree-view/json-tree-view-node.tsx
+import {
+  getAccessibleDescription,
+  jsonNodeToElement,
+  keyPathToKey as keyPathToKey2
+} from "@zag-js/json-tree-utils";
+import { createMemo as createMemo3 } from "solid-js";
+import { Index, Show } from "solid-js/web";
+
+// src/components/json-tree-view/json-tree-view-key-node.tsx
+import { keyPathToKey } from "@zag-js/json-tree-utils";
+import { createMemo as createMemo2 } from "solid-js";
+var JsonTreeViewKeyNode = (props) => {
+  const key = createMemo2(() => keyPathToKey(props.node.keyPath));
+  return <>
+      <span data-kind="key" data-non-enumerable={props.node.isNonEnumerable ? "" : void 0}>
+        {props.showQuotes ? `"${key()}"` : key()}
+      </span>
+      <span data-kind="colon">: </span>
+    </>;
+};
+
+// src/components/json-tree-view/json-tree-view-value-node.tsx
+import { For } from "solid-js";
+import { Dynamic } from "solid-js/web";
+var JsonTreeViewValueNode = (props) => {
+  if (props.node.type === "text") {
+    return <>{props.renderValue?.(props.node) ?? props.node.value}</>;
+  }
+  return <Dynamic
+    component={props.node.tagName}
+    data-root={props.node.properties.root ? "" : void 0}
+    data-type={props.node.properties.nodeType}
+    data-kind={props.node.properties.kind}
+  >
+      <For each={props.node.children}>
+        {(child) => <JsonTreeViewValueNode node={child} renderValue={props.renderValue} />}
+      </For>
+    </Dynamic>;
+};
+
+// src/components/json-tree-view/json-tree-view-node.tsx
+var scopeProps = {
+  "data-scope": "json-tree-view"
+};
+function JsonTreeViewNode(props) {
+  const tree = useTreeViewContext();
+  const nodeState = createMemo3(() => tree().getNodeState({ node: props.node, indexPath: props.indexPath }));
+  const options = useJsonTreeViewPropsContext();
+  const key = createMemo3(() => keyPathToKey2(props.node.keyPath, { excludeRoot: true }));
+  const valueNode = createMemo3(() => jsonNodeToElement(props.node, options));
+  const nodeProps = createMemo3(() => {
+    const desc = getAccessibleDescription(props.node);
+    const line = props.indexPath.reduce((acc, curr) => acc + curr, 1);
+    const lineLength = props.indexPath.length - 1;
+    return {
+      ...scopeProps,
+      "aria-label": desc,
+      "data-line": line,
+      style: { ["--line-length"]: lineLength }
+    };
+  });
+  return <tree_view_exports.NodeProvider node={props.node} indexPath={props.indexPath}>
+      <Show
+    when={nodeState().isBranch}
+    fallback={<tree_view_exports.Item {...nodeProps()}>
+            <tree_view_exports.ItemText {...scopeProps}>
+              <Show when={key()}>
+                <JsonTreeViewKeyNode node={props.node} showQuotes={options.quotesOnKeys} />
+              </Show>
+              <JsonTreeViewValueNode node={valueNode()} renderValue={props.renderValue} />
+            </tree_view_exports.ItemText>
+          </tree_view_exports.Item>}
+  >
+        <tree_view_exports.Branch {...scopeProps}>
+          <tree_view_exports.BranchControl {...nodeProps()}>
+            <Show when={props.arrow}>
+              <tree_view_exports.BranchIndicator {...scopeProps}>{props.arrow}</tree_view_exports.BranchIndicator>
+            </Show>
+            <tree_view_exports.BranchText {...scopeProps}>
+              <Show when={key()}>
+                <JsonTreeViewKeyNode node={props.node} showQuotes={options.quotesOnKeys} />
+              </Show>
+              <JsonTreeViewValueNode node={valueNode()} renderValue={props.renderValue} />
+            </tree_view_exports.BranchText>
+          </tree_view_exports.BranchControl>
+          <tree_view_exports.BranchContent {...scopeProps}>
+            <Show when={typeof props.indentGuide === "boolean"} fallback={props.indentGuide}>
+              <tree_view_exports.BranchIndentGuide />
+            </Show>
+            <Index each={props.node.children}>
+              {(child, index) => <JsonTreeViewNode {...props} node={child()} indexPath={[...props.indexPath, index]} />}
+            </Index>
+          </tree_view_exports.BranchContent>
+        </tree_view_exports.Branch>
+      </Show>
+    </tree_view_exports.NodeProvider>;
+}
+
+// src/components/json-tree-view/json-tree-view-tree.tsx
+var splitTreeNodeProps = createSplitProps();
+var JsonTreeViewTree = (props) => {
+  const [nodeProps, treeProps] = splitTreeNodeProps(props, ["arrow", "indentGuide", "renderValue"]);
+  const tree = useTreeViewContext();
+  const children = () => tree().collection.getNodeChildren(tree().collection.rootNode);
+  return <tree_view_exports.Tree data-scope="json-tree-view" {...treeProps}>
+      <Index2 each={children()}>
+        {(child, index) => <JsonTreeViewNode node={child()} indexPath={[index]} {...nodeProps} />}
+      </Index2>
+    </tree_view_exports.Tree>;
+};
+
+// src/components/json-tree-view/use-json-tree-view.ts
+import { getRootNode as getRootNode2, nodeToString as nodeToString2, nodeToValue as nodeToValue2 } from "@zag-js/json-tree-utils";
+import { createMemo as createMemo4, splitProps as splitProps2 } from "solid-js";
+import { untrack } from "solid-js/web";
+var useJsonTreeView = (props) => {
+  const [jsonProps, restProps] = splitProps2(props, ["data", "defaultExpandedDepth"]);
+  const collection = createMemo4(() => {
+    return createTreeCollection({
+      nodeToValue: nodeToValue2,
+      nodeToString: nodeToString2,
+      rootNode: getRootNode2(jsonProps.data)
+    });
+  });
+  const defaultExpandedValue = createMemo4(() => {
+    return jsonProps.defaultExpandedDepth != null ? getBranchValues(collection(), jsonProps.defaultExpandedDepth) : void 0;
+  });
+  const machineProps = createMemo4(() => {
+    return {
+      defaultExpandedValue: untrack(defaultExpandedValue),
+      ...restProps,
+      collection: collection(),
+      typeahead: false
+    };
+  });
+  return useTreeView(machineProps);
+};
+
+// src/components/json-tree-view/json-tree-view.tsx
+var json_tree_view_exports = {};
+__export(json_tree_view_exports, {
+  Root: () => JsonTreeViewRoot,
+  RootProvider: () => JsonTreeViewRootProvider,
+  Tree: () => JsonTreeViewTree
+});
+
+export {
+  JsonTreeViewRoot,
+  JsonTreeViewRootProvider,
+  JsonTreeViewTree,
+  useJsonTreeView,
+  json_tree_view_exports
+};

package/dist/chunk/{AQUEJK4Z.jsx → DZGDAEOH.jsx}

@@ -113,10 +113,115 @@ function useListCollection(props) {
   };
 }
 
+// src/components/collection/use-list-selection.ts
+import { Selection } from "@zag-js/collection";
+import { createEffect, createMemo as createMemo2, createSignal as createSignal2, on, splitProps as splitProps2 } from "solid-js";
+function useListSelection(props) {
+  const splittedProps = createMemo2(() => {
+    const rawProps = typeof props === "function" ? props() : props;
+    return splitProps2(rawProps, [
+      "collection",
+      "selectionMode",
+      "deselectable",
+      "initialSelectedValues",
+      "resetOnCollectionChange"
+    ]);
+  });
+  const createSelection = (values = []) => {
+    const [localProps] = splittedProps();
+    const selection2 = new Selection(values);
+    selection2.selectionMode = localProps.selectionMode ?? "single";
+    selection2.deselectable = localProps.deselectable ?? true;
+    return selection2;
+  };
+  const init = () => {
+    const [localProps] = splittedProps();
+    return createSelection(localProps.initialSelectedValues ?? []);
+  };
+  const [selection, setSelection] = createSignal2(init());
+  const watchDeps = () => {
+    const [{ collection, resetOnCollectionChange }] = splittedProps();
+    return [collection.getValues(), resetOnCollectionChange];
+  };
+  createEffect(
+    on(
+      watchDeps,
+      ([, resetOnCollectionChange]) => {
+        if (resetOnCollectionChange) {
+          setSelection(createSelection());
+        }
+      },
+      { defer: true }
+    )
+  );
+  const selectedValues = createMemo2(() => Array.from(selection()));
+  const isEmpty = createMemo2(() => selection().isEmpty());
+  const firstSelectedValue = createMemo2(() => {
+    const [localProps] = splittedProps();
+    return selection().firstSelectedValue(localProps.collection);
+  });
+  const lastSelectedValue = createMemo2(() => {
+    const [localProps] = splittedProps();
+    return selection().lastSelectedValue(localProps.collection);
+  });
+  return {
+    selectedValues,
+    isEmpty,
+    firstSelectedValue,
+    lastSelectedValue,
+    isSelected: (value) => {
+      return selection().isSelected(value);
+    },
+    isAllSelected: () => {
+      const [localProps] = splittedProps();
+      const allValues = localProps.collection.getValues();
+      return allValues.length > 0 && allValues.every((value) => selection().isSelected(value));
+    },
+    isSomeSelected: () => {
+      const [localProps] = splittedProps();
+      const allValues = localProps.collection.getValues();
+      return allValues.some((value) => selection().isSelected(value));
+    },
+    canSelect: (value) => {
+      const [localProps] = splittedProps();
+      return selection().canSelect(localProps.collection, value);
+    },
+    select: (value, forceToggle) => {
+      const [localProps] = splittedProps();
+      setSelection(selection().select(localProps.collection, value, forceToggle));
+    },
+    deselect: (value) => {
+      setSelection(selection().deselect(value));
+    },
+    toggle: (value) => {
+      const [localProps] = splittedProps();
+      setSelection(selection().toggleSelection(localProps.collection, value));
+    },
+    replace: (value) => {
+      const [localProps] = splittedProps();
+      setSelection(selection().replaceSelection(localProps.collection, value));
+    },
+    extend: (anchorValue, targetValue) => {
+      const [localProps] = splittedProps();
+      setSelection(selection().extendSelection(localProps.collection, anchorValue, targetValue));
+    },
+    setSelectedValues: (values) => {
+      setSelection(selection().setSelection(values));
+    },
+    clear: () => {
+      setSelection(selection().clearSelection());
+    },
+    resetSelection: () => {
+      setSelection(createSelection());
+    }
+  };
+}
+
 export {
   createGridCollection,
   createListCollection,
   createTreeCollection,
   createFileTreeCollection,
-  useListCollection
+  useListCollection,
+  useListSelection
 };

package/dist/chunk/{P7WR6WX5.js → HJFJPRY5.js}

@@ -77,7 +77,7 @@ var useSignaturePad = (props) => {
 
 // src/components/signature-pad/signature-pad-root.tsx
 var SignaturePadRoot = (props) => {
-  const [useSignaturePadProps, localProps] = createSplitProps()(props, ["id", "ids", "drawing", "disabled", "readOnly", "name", "onDraw", "onDrawEnd", "readOnly", "required", "translations"]);
+  const [useSignaturePadProps, localProps] = createSplitProps()(props, ["id", "ids", "defaultPaths", "drawing", "disabled", "readOnly", "name", "onDraw", "onDrawEnd", "paths", "readOnly", "required", "translations"]);
   const signaturePad2 = useSignaturePad(useSignaturePadProps);
   const mergedProps = mergeProps(() => signaturePad2().getRootProps(), localProps);
   return createComponent(SignaturePadProvider, {

package/dist/chunk/{FQGMWBGA.js → HSBJVWHB.js}

@@ -151,7 +151,7 @@ var useFileUpload = (props) => {
 
 // src/components/file-upload/file-upload-root.tsx
 var FileUploadRoot = (props) => {
-  const [fileUploadProps, localProps] = createSplitProps()(props, ["accept", "allowDrop", "capture", "directory", "disabled", "id", "ids", "invalid", "locale", "maxFiles", "maxFileSize", "minFileSize", "name", "onFileAccept", "onFileChange", "onFileReject", "preventDocumentDrop", "required", "translations", "transformFiles", "validate"]);
+  const [fileUploadProps, localProps] = createSplitProps()(props, ["accept", "acceptedFiles", "allowDrop", "capture", "defaultAcceptedFiles", "directory", "disabled", "id", "ids", "invalid", "locale", "maxFiles", "maxFileSize", "minFileSize", "name", "onFileAccept", "onFileChange", "onFileReject", "preventDocumentDrop", "required", "translations", "transformFiles", "validate"]);
   const fileUpload2 = useFileUpload(fileUploadProps);
   const mergedProps = mergeProps(() => fileUpload2().getRootProps(), localProps);
   return createComponent(FileUploadProvider, {

package/dist/chunk/{KAYDBHSW.jsx → IDNDLSEV.jsx}

@@ -1,7 +1,7 @@
 import {
   collapsible_exports,
   useCollapsibleContext
-} from "./WHXDBQDP.jsx";
+} from "./Z2BXVXSV.jsx";
 import {
   RenderStrategyProvider,
   splitRenderStrategyProps,
@@ -13,12 +13,12 @@ import {
 import {
   ark
 } from "./UFYZ7HLU.jsx";
-import {
-  useEnvironmentContext
-} from "./E2L62MKC.jsx";
 import {
   useLocaleContext
 } from "./YUC6JE7K.jsx";
+import {
+  useEnvironmentContext
+} from "./E2L62MKC.jsx";
 import {
   createContext
 } from "./TVCIHLER.jsx";

package/dist/chunk/{JEPST7BN.jsx → LBI4ZRKN.jsx}

@@ -7,12 +7,12 @@ import {
 import {
   ark
 } from "./UFYZ7HLU.jsx";
-import {
-  useEnvironmentContext
-} from "./E2L62MKC.jsx";
 import {
   useLocaleContext
 } from "./YUC6JE7K.jsx";
+import {
+  useEnvironmentContext
+} from "./E2L62MKC.jsx";
 import {
   createContext
 } from "./TVCIHLER.jsx";
@@ -110,12 +110,14 @@ var SignaturePadRoot = (props) => {
   const [useSignaturePadProps, localProps] = createSplitProps()(props, [
     "id",
     "ids",
+    "defaultPaths",
     "drawing",
     "disabled",
     "readOnly",
     "name",
     "onDraw",
     "onDrawEnd",
+    "paths",
     "readOnly",
     "required",
     "translations"

package/dist/chunk/{XL4VFEPW.js → O5UHP4CA.js}

@@ -1,5 +1,5 @@
-import { GridCollection, ListCollection, TreeCollection, filePathToTree } from '@zag-js/collection';
-import { createMemo, splitProps, createSignal } from 'solid-js';
+import { GridCollection, ListCollection, TreeCollection, filePathToTree, Selection } from '@zag-js/collection';
+import { createMemo, splitProps, createSignal, createEffect, on } from 'solid-js';
 
 // src/components/collection/grid-collection.ts
 var createGridCollection = (options) => new GridCollection(options);
@@ -100,5 +100,105 @@ function useListCollection(props) {
     }
   };
 }
+function useListSelection(props) {
+  const splittedProps = createMemo(() => {
+    const rawProps = typeof props === "function" ? props() : props;
+    return splitProps(rawProps, [
+      "collection",
+      "selectionMode",
+      "deselectable",
+      "initialSelectedValues",
+      "resetOnCollectionChange"
+    ]);
+  });
+  const createSelection = (values = []) => {
+    const [localProps] = splittedProps();
+    const selection2 = new Selection(values);
+    selection2.selectionMode = localProps.selectionMode ?? "single";
+    selection2.deselectable = localProps.deselectable ?? true;
+    return selection2;
+  };
+  const init = () => {
+    const [localProps] = splittedProps();
+    return createSelection(localProps.initialSelectedValues ?? []);
+  };
+  const [selection, setSelection] = createSignal(init());
+  const watchDeps = () => {
+    const [{ collection, resetOnCollectionChange }] = splittedProps();
+    return [collection.getValues(), resetOnCollectionChange];
+  };
+  createEffect(
+    on(
+      watchDeps,
+      ([, resetOnCollectionChange]) => {
+        if (resetOnCollectionChange) {
+          setSelection(createSelection());
+        }
+      },
+      { defer: true }
+    )
+  );
+  const selectedValues = createMemo(() => Array.from(selection()));
+  const isEmpty = createMemo(() => selection().isEmpty());
+  const firstSelectedValue = createMemo(() => {
+    const [localProps] = splittedProps();
+    return selection().firstSelectedValue(localProps.collection);
+  });
+  const lastSelectedValue = createMemo(() => {
+    const [localProps] = splittedProps();
+    return selection().lastSelectedValue(localProps.collection);
+  });
+  return {
+    selectedValues,
+    isEmpty,
+    firstSelectedValue,
+    lastSelectedValue,
+    isSelected: (value) => {
+      return selection().isSelected(value);
+    },
+    isAllSelected: () => {
+      const [localProps] = splittedProps();
+      const allValues = localProps.collection.getValues();
+      return allValues.length > 0 && allValues.every((value) => selection().isSelected(value));
+    },
+    isSomeSelected: () => {
+      const [localProps] = splittedProps();
+      const allValues = localProps.collection.getValues();
+      return allValues.some((value) => selection().isSelected(value));
+    },
+    canSelect: (value) => {
+      const [localProps] = splittedProps();
+      return selection().canSelect(localProps.collection, value);
+    },
+    select: (value, forceToggle) => {
+      const [localProps] = splittedProps();
+      setSelection(selection().select(localProps.collection, value, forceToggle));
+    },
+    deselect: (value) => {
+      setSelection(selection().deselect(value));
+    },
+    toggle: (value) => {
+      const [localProps] = splittedProps();
+      setSelection(selection().toggleSelection(localProps.collection, value));
+    },
+    replace: (value) => {
+      const [localProps] = splittedProps();
+      setSelection(selection().replaceSelection(localProps.collection, value));
+    },
+    extend: (anchorValue, targetValue) => {
+      const [localProps] = splittedProps();
+      setSelection(selection().extendSelection(localProps.collection, anchorValue, targetValue));
+    },
+    setSelectedValues: (values) => {
+      setSelection(selection().setSelection(values));
+    },
+    clear: () => {
+      setSelection(selection().clearSelection());
+    },
+    resetSelection: () => {
+      setSelection(createSelection());
+    }
+  };
+}
 
-export { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useListCollection };
+export { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useListCollection, useListSelection };

package/dist/chunk/{AKYIM67Z.jsx → UYFUB47A.jsx}

@@ -7,12 +7,12 @@ import {
 import {
   ark
 } from "./UFYZ7HLU.jsx";
-import {
-  useEnvironmentContext
-} from "./E2L62MKC.jsx";
 import {
   useLocaleContext
 } from "./YUC6JE7K.jsx";
+import {
+  useEnvironmentContext
+} from "./E2L62MKC.jsx";
 import {
   createContext
 } from "./TVCIHLER.jsx";
@@ -183,8 +183,10 @@ var useFileUpload = (props) => {
 var FileUploadRoot = (props) => {
   const [fileUploadProps, localProps] = createSplitProps()(props, [
     "accept",
+    "acceptedFiles",
     "allowDrop",
     "capture",
+    "defaultAcceptedFiles",
     "directory",
     "disabled",
     "id",

package/dist/chunk/{NCRPFSNO.jsx → VR5BNKL7.jsx}

@@ -1,6 +1,6 @@
 import {
   collapsible_exports
-} from "./WHXDBQDP.jsx";
+} from "./Z2BXVXSV.jsx";
 import {
   RenderStrategyProvider,
   splitRenderStrategyProps,
@@ -12,12 +12,12 @@ import {
 import {
   ark
 } from "./UFYZ7HLU.jsx";
-import {
-  useEnvironmentContext
-} from "./E2L62MKC.jsx";
 import {
   useLocaleContext
 } from "./YUC6JE7K.jsx";
+import {
+  useEnvironmentContext
+} from "./E2L62MKC.jsx";
 import {
   createContext
 } from "./TVCIHLER.jsx";