@ark-ui/solid 5.17.0 → 5.18.0

package/dist/chunk/7HON4OS6.js

@@ -0,0 +1,217 @@
+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);
+var createListCollection = (options) => new ListCollection(options);
+var createTreeCollection = (options) => new TreeCollection(options);
+var createFileTreeCollection = (paths) => filePathToTree(paths);
+function useListCollection(props) {
+  const splittedProps = createMemo(() => {
+    const rawProps = typeof props === "function" ? props() : props;
+    return splitProps(rawProps, ["initialItems", "filter", "limit"]);
+  });
+  const init = () => {
+    const [localProps] = splittedProps();
+    return localProps.initialItems;
+  };
+  const [items, setItemsImpl] = createSignal(init());
+  const [filterText, setFilterText] = createSignal("");
+  const setItems = (newItems) => {
+    setItemsImpl(newItems);
+    setFilterText("");
+  };
+  const create = (itemsToCreate) => {
+    const [, collectionOptions] = splittedProps();
+    return createListCollection({ ...collectionOptions, items: itemsToCreate });
+  };
+  const collection = createMemo(() => {
+    const [localProps, collectionOptions] = splittedProps();
+    const filter = localProps.filter;
+    let activeItems = items();
+    if (filterText() && filter) {
+      activeItems = create(items()).filter((itemString, _index, item) => filter(itemString, filterText(), item)).items;
+    }
+    const limitedItems = localProps.limit == null ? activeItems : activeItems.slice(0, localProps.limit);
+    return createListCollection({ ...collectionOptions, items: limitedItems });
+  });
+  return {
+    collection,
+    filter: (inputValue = "") => {
+      setFilterText(inputValue);
+    },
+    set: (newItems) => {
+      setItems(newItems);
+    },
+    reset: () => {
+      const [localProps] = splittedProps();
+      setItems(localProps.initialItems);
+    },
+    clear: () => {
+      setItems([]);
+    },
+    insert: (index, ...itemsToInsert) => {
+      const newItems = create(items()).insert(index, ...itemsToInsert).items;
+      setItems(newItems);
+    },
+    insertBefore: (value, ...itemsToInsert) => {
+      const newItems = create(items()).insertBefore(value, ...itemsToInsert).items;
+      setItems(newItems);
+    },
+    insertAfter: (value, ...itemsToInsert) => {
+      const newItems = create(items()).insertAfter(value, ...itemsToInsert).items;
+      setItems(newItems);
+    },
+    remove: (...itemOrValues) => {
+      const newItems = create(items()).remove(...itemOrValues).items;
+      setItems(newItems);
+    },
+    move: (value, to) => {
+      const newItems = create(items()).move(value, to).items;
+      setItems(newItems);
+    },
+    moveBefore: (value, ...values) => {
+      const newItems = create(items()).moveBefore(value, ...values).items;
+      setItems(newItems);
+    },
+    moveAfter: (value, ...values) => {
+      const newItems = create(items()).moveAfter(value, ...values).items;
+      setItems(newItems);
+    },
+    reorder: (from, to) => {
+      const newItems = create(items()).reorder(from, to).items;
+      setItems(newItems);
+    },
+    append: (...itemsToAppend) => {
+      const newItems = create(items()).append(...itemsToAppend).items;
+      setItems(newItems);
+    },
+    upsert: (value, item, mode = "append") => {
+      const newItems = create(items()).upsert(value, item, mode).items;
+      setItems(newItems);
+    },
+    prepend: (...itemsToPrepend) => {
+      const newItems = create(items()).prepend(...itemsToPrepend).items;
+      setItems(newItems);
+    },
+    update: (value, item) => {
+      const newItems = create(items()).update(value, item).items;
+      setItems(newItems);
+    }
+  };
+}
+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());
+    },
+    setSelection: (newSelection) => {
+      setSelection(selection().setSelection(newSelection));
+    },
+    setSelectionMode: (mode) => {
+      const newSelection = selection().copy();
+      newSelection.selectionMode = mode;
+      setSelection(newSelection);
+    },
+    setDeselectable: (deselectable) => {
+      const newSelection = selection().copy();
+      newSelection.deselectable = deselectable;
+      setSelection(newSelection);
+    }
+  };
+}
+
+export { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, 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/{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";

package/dist/chunk/XFW6RT6G.js

@@ -0,0 +1,321 @@
+import { useTreeViewContext, tree_view_exports, useTreeView } from './ZLUEV2MH.js';
+import { createTreeCollection } from './7HON4OS6.js';
+import { createSplitProps } from './ZMHI4GDJ.js';
+import { createContext } from './TROPIN4C.js';
+import { __export } from './ESLJRKWD.js';
+import { createComponent, mergeProps, Show, Index as Index$1, template, insert, memo, effect, setAttribute, Dynamic, untrack } from 'solid-js/web';
+import { getRootNode, nodeToString, nodeToValue, keyPathToKey, jsonNodeToElement, getAccessibleDescription } from '@zag-js/json-tree-utils';
+import { Index, splitProps, createMemo, For } 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 createComponent(JsonTreeViewPropsProvider, {
+    value: jsonTreeProps,
+    get children() {
+      return createComponent(tree_view_exports.Root, mergeProps({
+        "data-scope": "json-tree-view",
+        get collection() {
+          return collection();
+        },
+        get defaultExpandedValue() {
+          return defaultExpandedValue();
+        }
+      }, restProps, {
+        get children() {
+          return props.children;
+        }
+      }));
+    }
+  });
+};
+var JsonTreeViewRootProvider = (props) => {
+  return createComponent(tree_view_exports.RootProvider, mergeProps({
+    "data-scope": "json-tree-view"
+  }, props));
+};
+var _tmpl$ = /* @__PURE__ */ template(`<span data-kind=key>`);
+var _tmpl$2 = /* @__PURE__ */ template(`<span data-kind=colon>: `);
+var JsonTreeViewKeyNode = (props) => {
+  const key = createMemo(() => keyPathToKey(props.node.keyPath));
+  return [(() => {
+    var _el$ = _tmpl$();
+    insert(_el$, (() => {
+      var _c$ = memo(() => !!props.showQuotes);
+      return () => _c$() ? `"${key()}"` : key();
+    })());
+    effect(() => setAttribute(_el$, "data-non-enumerable", props.node.isNonEnumerable ? "" : void 0));
+    return _el$;
+  })(), _tmpl$2()];
+};
+var JsonTreeViewValueNode = (props) => {
+  if (props.node.type === "text") {
+    return memo(() => props.renderValue?.(props.node) ?? props.node.value);
+  }
+  return createComponent(Dynamic, {
+    get component() {
+      return props.node.tagName;
+    },
+    get ["data-root"]() {
+      return props.node.properties.root ? "" : void 0;
+    },
+    get ["data-type"]() {
+      return props.node.properties.nodeType;
+    },
+    get ["data-kind"]() {
+      return props.node.properties.kind;
+    },
+    get children() {
+      return createComponent(For, {
+        get each() {
+          return props.node.children;
+        },
+        children: (child) => createComponent(JsonTreeViewValueNode, {
+          node: child,
+          get renderValue() {
+            return props.renderValue;
+          }
+        })
+      });
+    }
+  });
+};
+
+// 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 = createMemo(() => tree().getNodeState({
+    node: props.node,
+    indexPath: props.indexPath
+  }));
+  const options = useJsonTreeViewPropsContext();
+  const key = createMemo(() => keyPathToKey(props.node.keyPath, {
+    excludeRoot: true
+  }));
+  const valueNode = createMemo(() => jsonNodeToElement(props.node, options));
+  const nodeProps = createMemo(() => {
+    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 createComponent(tree_view_exports.NodeProvider, {
+    get node() {
+      return props.node;
+    },
+    get indexPath() {
+      return props.indexPath;
+    },
+    get children() {
+      return createComponent(Show, {
+        get when() {
+          return nodeState().isBranch;
+        },
+        get fallback() {
+          return createComponent(tree_view_exports.Item, mergeProps(nodeProps, {
+            get children() {
+              return createComponent(tree_view_exports.ItemText, mergeProps(scopeProps, {
+                get children() {
+                  return [createComponent(Show, {
+                    get when() {
+                      return key();
+                    },
+                    get children() {
+                      return createComponent(JsonTreeViewKeyNode, {
+                        get node() {
+                          return props.node;
+                        },
+                        get showQuotes() {
+                          return options.quotesOnKeys;
+                        }
+                      });
+                    }
+                  }), createComponent(JsonTreeViewValueNode, {
+                    get node() {
+                      return valueNode();
+                    },
+                    get renderValue() {
+                      return props.renderValue;
+                    }
+                  })];
+                }
+              }));
+            }
+          }));
+        },
+        get children() {
+          return createComponent(tree_view_exports.Branch, mergeProps(scopeProps, {
+            get children() {
+              return [createComponent(tree_view_exports.BranchControl, mergeProps(nodeProps, {
+                get children() {
+                  return [createComponent(Show, {
+                    get when() {
+                      return props.arrow;
+                    },
+                    get children() {
+                      return createComponent(tree_view_exports.BranchIndicator, mergeProps(scopeProps, {
+                        get children() {
+                          return props.arrow;
+                        }
+                      }));
+                    }
+                  }), createComponent(tree_view_exports.BranchText, mergeProps(scopeProps, {
+                    get children() {
+                      return [createComponent(Show, {
+                        get when() {
+                          return key();
+                        },
+                        get children() {
+                          return createComponent(JsonTreeViewKeyNode, {
+                            get node() {
+                              return props.node;
+                            },
+                            get showQuotes() {
+                              return options.quotesOnKeys;
+                            }
+                          });
+                        }
+                      }), createComponent(JsonTreeViewValueNode, {
+                        get node() {
+                          return valueNode();
+                        },
+                        get renderValue() {
+                          return props.renderValue;
+                        }
+                      })];
+                    }
+                  }))];
+                }
+              })), createComponent(tree_view_exports.BranchContent, mergeProps(scopeProps, {
+                get children() {
+                  return [createComponent(Show, {
+                    get when() {
+                      return typeof props.indentGuide === "boolean";
+                    },
+                    get fallback() {
+                      return props.indentGuide;
+                    },
+                    get children() {
+                      return createComponent(tree_view_exports.BranchIndentGuide, {});
+                    }
+                  }), createComponent(Index$1, {
+                    get each() {
+                      return props.node.children;
+                    },
+                    children: (child, index) => createComponent(JsonTreeViewNode, mergeProps(props, {
+                      get node() {
+                        return child();
+                      },
+                      get indexPath() {
+                        return [...props.indexPath, index];
+                      }
+                    }))
+                  })];
+                }
+              }))];
+            }
+          }));
+        }
+      });
+    }
+  });
+}
+
+// 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 createComponent(tree_view_exports.Tree, mergeProps({
+    "data-scope": "json-tree-view"
+  }, treeProps, {
+    get children() {
+      return createComponent(Index, {
+        get each() {
+          return children();
+        },
+        children: (child, index) => createComponent(JsonTreeViewNode, mergeProps({
+          get node() {
+            return child();
+          },
+          indexPath: [index]
+        }, nodeProps))
+      });
+    }
+  }));
+};
+var useJsonTreeView = (props) => {
+  const [jsonProps, restProps] = splitProps(props, ["data", "defaultExpandedDepth"]);
+  const collection = createMemo(() => {
+    return createTreeCollection({
+      nodeToValue: nodeToValue,
+      nodeToString: nodeToString,
+      rootNode: getRootNode(jsonProps.data)
+    });
+  });
+  const defaultExpandedValue = createMemo(() => {
+    return jsonProps.defaultExpandedDepth != null ? getBranchValues(collection(), jsonProps.defaultExpandedDepth) : void 0;
+  });
+  const machineProps = createMemo(() => {
+    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, json_tree_view_exports, useJsonTreeView };