@ark-ui/solid 5.17.0 → 5.18.0

package/dist/chunk/YRHUWQ7U.jsx

@@ -0,0 +1,237 @@
+import {
+  tree_view_exports,
+  useTreeView,
+  useTreeViewContext
+} from "./VR5BNKL7.jsx";
+import {
+  createTreeCollection
+} from "./ZHSHZ7SJ.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/ZHSHZ7SJ.jsx

@@ -0,0 +1,240 @@
+// src/components/collection/grid-collection.ts
+import {
+  GridCollection
+} from "@zag-js/collection";
+var createGridCollection = (options) => new GridCollection(options);
+
+// src/components/collection/list-collection.ts
+import { ListCollection } from "@zag-js/collection";
+var createListCollection = (options) => new ListCollection(options);
+
+// src/components/collection/tree-collection.ts
+import {
+  TreeCollection,
+  filePathToTree
+} from "@zag-js/collection";
+var createTreeCollection = (options) => new TreeCollection(options);
+var createFileTreeCollection = (paths) => filePathToTree(paths);
+
+// src/components/collection/use-list-collection.ts
+import { createMemo, createSignal, splitProps } from "solid-js";
+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);
+    }
+  };
+}
+
+// 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());
+    },
+    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 {
+  createGridCollection,
+  createListCollection,
+  createTreeCollection,
+  createFileTreeCollection,
+  useListCollection,
+  useListSelection
+};

package/dist/components/accordion/index.jsx

@@ -12,14 +12,14 @@ import {
   useAccordion,
   useAccordionContext,
   useAccordionItemContext
-} from "../../chunk/KAYDBHSW.jsx";
-import "../../chunk/WHXDBQDP.jsx";
+} from "../../chunk/IDNDLSEV.jsx";
+import "../../chunk/Z2BXVXSV.jsx";
 import "../../chunk/NEBB7COJ.jsx";
 import "../../chunk/6WEDGJKQ.jsx";
 import "../../chunk/UFYZ7HLU.jsx";
 import "../../chunk/ODQYYKL5.jsx";
-import "../../chunk/E2L62MKC.jsx";
 import "../../chunk/YUC6JE7K.jsx";
+import "../../chunk/E2L62MKC.jsx";
 import "../../chunk/TVCIHLER.jsx";
 import "../../chunk/KGOB2IMX.jsx";
 import "../../chunk/7IUG3E2V.jsx";

package/dist/components/angle-slider/index.jsx

@@ -13,12 +13,12 @@ import {
   angle_slider_exports,
   useAngleSlider,
   useAngleSliderContext
-} from "../../chunk/POJRD725.jsx";
+} from "../../chunk/X5GWQYGE.jsx";
 import "../../chunk/6WEDGJKQ.jsx";
 import "../../chunk/UFYZ7HLU.jsx";
 import "../../chunk/ODQYYKL5.jsx";
-import "../../chunk/E2L62MKC.jsx";
 import "../../chunk/YUC6JE7K.jsx";
+import "../../chunk/E2L62MKC.jsx";
 import "../../chunk/TVCIHLER.jsx";
 import "../../chunk/KGOB2IMX.jsx";
 import "../../chunk/7IUG3E2V.jsx";

package/dist/components/avatar/index.jsx

@@ -8,12 +8,12 @@ import {
   avatar_exports,
   useAvatar,
   useAvatarContext
-} from "../../chunk/YAOPG62Z.jsx";
+} from "../../chunk/7RYPC5LL.jsx";
 import "../../chunk/6WEDGJKQ.jsx";
 import "../../chunk/UFYZ7HLU.jsx";
 import "../../chunk/ODQYYKL5.jsx";
-import "../../chunk/E2L62MKC.jsx";
 import "../../chunk/YUC6JE7K.jsx";
+import "../../chunk/E2L62MKC.jsx";
 import "../../chunk/TVCIHLER.jsx";
 import "../../chunk/KGOB2IMX.jsx";
 import "../../chunk/7IUG3E2V.jsx";

package/dist/components/carousel/index.jsx

@@ -14,12 +14,12 @@ import {
   carousel_exports,
   useCarousel,
   useCarouselContext
-} from "../../chunk/HP3ZGMDZ.jsx";
+} from "../../chunk/7FASJWDK.jsx";
 import "../../chunk/6WEDGJKQ.jsx";
 import "../../chunk/UFYZ7HLU.jsx";
 import "../../chunk/ODQYYKL5.jsx";
-import "../../chunk/E2L62MKC.jsx";
 import "../../chunk/YUC6JE7K.jsx";
+import "../../chunk/E2L62MKC.jsx";
 import "../../chunk/TVCIHLER.jsx";
 import "../../chunk/KGOB2IMX.jsx";
 import "../../chunk/7IUG3E2V.jsx";

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

@@ -139,7 +139,7 @@ interface CheckboxRootProviderProps extends HTMLProps<'label'>, RootProviderProp
 }
 declare const CheckboxRootProvider: (props: CheckboxRootProviderProps) => solid_js.JSX.Element;
 
-declare const checkboxAnatomy: _zag_js_anatomy.AnatomyInstance<"label" | "root" | "group" | "control" | "indicator">;
+declare const checkboxAnatomy: _zag_js_anatomy.AnatomyInstance<"label" | "group" | "root" | "control" | "indicator">;
 
 declare const checkbox_CheckedChangeDetails: typeof CheckedChangeDetails;
 declare const checkbox_CheckedState: typeof CheckedState;

package/dist/components/checkbox/index.jsx

@@ -14,15 +14,15 @@ import {
   useCheckboxContext,
   useCheckboxGroup,
   useCheckboxGroupContext
-} from "../../chunk/3WT7Q753.jsx";
+} from "../../chunk/L22RABDV.jsx";
 import "../../chunk/HQOIDGRU.jsx";
 import "../../chunk/JY6PMVAK.jsx";
 import "../../chunk/DOBZPYAN.jsx";
 import "../../chunk/6WEDGJKQ.jsx";
 import "../../chunk/UFYZ7HLU.jsx";
 import "../../chunk/ODQYYKL5.jsx";
-import "../../chunk/E2L62MKC.jsx";
 import "../../chunk/YUC6JE7K.jsx";
+import "../../chunk/E2L62MKC.jsx";
 import "../../chunk/TVCIHLER.jsx";
 import "../../chunk/KGOB2IMX.jsx";
 import "../../chunk/7IUG3E2V.jsx";

package/dist/components/clipboard/index.jsx

@@ -16,8 +16,8 @@ import {
 import "../../chunk/6WEDGJKQ.jsx";
 import "../../chunk/UFYZ7HLU.jsx";
 import "../../chunk/ODQYYKL5.jsx";
-import "../../chunk/E2L62MKC.jsx";
 import "../../chunk/YUC6JE7K.jsx";
+import "../../chunk/E2L62MKC.jsx";
 import "../../chunk/TVCIHLER.jsx";
 import "../../chunk/KGOB2IMX.jsx";
 import "../../chunk/7IUG3E2V.jsx";

package/dist/components/collapsible/index.jsx

@@ -9,13 +9,13 @@ import {
   collapsible_exports,
   useCollapsible,
   useCollapsibleContext
-} from "../../chunk/WHXDBQDP.jsx";
+} from "../../chunk/Z2BXVXSV.jsx";
 import "../../chunk/NEBB7COJ.jsx";
 import "../../chunk/6WEDGJKQ.jsx";
 import "../../chunk/UFYZ7HLU.jsx";
 import "../../chunk/ODQYYKL5.jsx";
-import "../../chunk/E2L62MKC.jsx";
 import "../../chunk/YUC6JE7K.jsx";
+import "../../chunk/E2L62MKC.jsx";
 import "../../chunk/TVCIHLER.jsx";
 import "../../chunk/KGOB2IMX.jsx";
 import "../../chunk/7IUG3E2V.jsx";