@stratakit/structures 0.4.5 → 0.5.1

package/dist/Table.js

@@ -1,137 +1,148 @@
+import { c as _c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Role } from "@ariakit/react/role";
-import {
-  forwardRef,
-  useMergedRefs,
-  useSafeContext
-} from "@stratakit/foundations/secret-internals";
+import { forwardRef, useMergedRefs, useSafeContext } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
+import { useInit } from "./~utils.useInit.js";
 const TableContext = React.createContext(void 0);
 const TableHeaderContext = React.createContext(false);
 const HtmlTable = forwardRef((props, forwardedRef) => {
-  const tableContextValue = React.useMemo(
-    () => ({ mode: "html" }),
-    []
-  );
-  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(
-    Role,
-    {
+  useInit();
+  const tableContextValue = React.useMemo(() => ({
+    mode: "html"
+  }), []);
+  return /* @__PURE__ */ jsx(TableContext.Provider, {
+    value: tableContextValue,
+    children: /* @__PURE__ */ jsx(Role, {
       render: /* @__PURE__ */ jsx("table", {}),
       ...props,
       ref: forwardedRef,
       className: cx("\u{1F95D}Table", props.className)
-    }
-  ) });
+    })
+  });
 });
-const CustomTable = forwardRef(
-  (props, forwardedRef) => {
-    const [captionId, setCaptionId] = React.useState();
-    const tableContextValue = React.useMemo(
-      () => ({ captionId, setCaptionId, mode: "aria" }),
-      [captionId]
-    );
-    return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(
-      Role.div,
-      {
-        role: "table",
-        "aria-labelledby": captionId,
-        ...props,
-        ref: forwardedRef,
-        className: cx("\u{1F95D}Table", props.className)
-      }
-    ) });
-  }
-);
-const TableHeader = forwardRef(
-  (props, forwardedRef) => {
-    const { mode } = useSafeContext(TableContext);
-    const render = mode === "html" ? /* @__PURE__ */ jsx("thead", {}) : void 0;
-    const role = mode === "aria" ? "rowgroup" : void 0;
-    return /* @__PURE__ */ jsx(TableHeaderContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
-      Role.div,
-      {
-        render,
-        role,
-        ...props,
-        ref: forwardedRef,
-        className: cx("\u{1F95D}TableHeader", props.className)
-      }
-    ) });
-  }
-);
-const TableBody = forwardRef((props, forwardedRef) => {
-  const { mode } = useSafeContext(TableContext);
-  const render = mode === "html" ? /* @__PURE__ */ jsx("tbody", {}) : void 0;
-  return /* @__PURE__ */ jsx(
-    Role.div,
-    {
-      render,
-      role: void 0,
+const CustomTable = forwardRef((props, forwardedRef) => {
+  useInit();
+  const [captionId, setCaptionId] = React.useState();
+  const tableContextValue = React.useMemo(() => ({
+    captionId,
+    setCaptionId,
+    mode: "aria"
+  }), [captionId]);
+  return /* @__PURE__ */ jsx(TableContext.Provider, {
+    value: tableContextValue,
+    children: /* @__PURE__ */ jsx(Role.div, {
+      role: "table",
+      "aria-labelledby": captionId,
       ...props,
       ref: forwardedRef,
-      className: cx("\u{1F95D}TableBody", props.className)
-    }
-  );
+      className: cx("\u{1F95D}Table", props.className)
+    })
+  });
 });
-const TableRow = forwardRef((props, forwardedRef) => {
-  const { mode } = useSafeContext(TableContext);
-  const render = mode === "html" ? /* @__PURE__ */ jsx("tr", {}) : void 0;
-  const role = mode === "aria" ? "row" : void 0;
-  return /* @__PURE__ */ jsx(
-    Role.div,
-    {
+const TableHeader = forwardRef((props, forwardedRef) => {
+  const {
+    mode
+  } = useSafeContext(TableContext);
+  const render = mode === "html" ? /* @__PURE__ */ jsx("thead", {}) : void 0;
+  const role = mode === "aria" ? "rowgroup" : void 0;
+  return /* @__PURE__ */ jsx(TableHeaderContext.Provider, {
+    value: true,
+    children: /* @__PURE__ */ jsx(Role.div, {
       render,
       role,
       ...props,
       ref: forwardedRef,
-      className: cx("\u{1F95D}TableRow", props.className)
-    }
-  );
+      className: cx("\u{1F95D}TableHeader", props.className)
+    })
+  });
 });
-const TableCaption = forwardRef(
-  (props, forwardedRef) => {
-    const fallbackId = React.useId();
-    const { id = fallbackId, ...rest } = props;
-    const { mode, setCaptionId } = useSafeContext(TableContext);
-    const render = mode === "html" ? /* @__PURE__ */ jsx("caption", {}) : void 0;
-    const captionIdRef = React.useCallback(
-      (element) => {
-        setCaptionId?.(element ? id : void 0);
-      },
-      [id, setCaptionId]
-    );
-    return /* @__PURE__ */ jsx(
-      Role.div,
-      {
-        render,
-        ...rest,
-        id,
-        ref: useMergedRefs(forwardedRef, captionIdRef),
-        className: cx("\u{1F95D}TableCaption", props.className)
-      }
-    );
+const TableBody = forwardRef((props, forwardedRef) => {
+  const {
+    mode
+  } = useSafeContext(TableContext);
+  const render = mode === "html" ? /* @__PURE__ */ jsx("tbody", {}) : void 0;
+  return /* @__PURE__ */ jsx(Role.div, {
+    render,
+    role: void 0,
+    ...props,
+    ref: forwardedRef,
+    className: cx("\u{1F95D}TableBody", props.className)
+  });
+});
+const TableRow = forwardRef((props, forwardedRef) => {
+  const {
+    mode
+  } = useSafeContext(TableContext);
+  const render = mode === "html" ? /* @__PURE__ */ jsx("tr", {}) : void 0;
+  const role = mode === "aria" ? "row" : void 0;
+  return /* @__PURE__ */ jsx(Role.div, {
+    render,
+    role,
+    ...props,
+    ref: forwardedRef,
+    className: cx("\u{1F95D}TableRow", props.className)
+  });
+});
+const TableCaption = forwardRef((props, forwardedRef) => {
+  const $ = _c(3);
+  const fallbackId = React.useId();
+  const {
+    id: t0,
+    ...rest
+  } = props;
+  const id = t0 === void 0 ? fallbackId : t0;
+  const {
+    mode,
+    setCaptionId
+  } = useSafeContext(TableContext);
+  const render = mode === "html" ? jsx("caption", {}) : void 0;
+  let t1;
+  if ($[0] !== id || $[1] !== setCaptionId) {
+    t1 = (element) => {
+      setCaptionId?.(element ? id : void 0);
+    };
+    $[0] = id;
+    $[1] = setCaptionId;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
   }
-);
+  const captionIdRef = t1;
+  return jsx(Role.div, {
+    render,
+    ...rest,
+    id,
+    ref: useMergedRefs(forwardedRef, captionIdRef),
+    className: cx("\u{1F95D}TableCaption", props.className)
+  });
+});
 const TableCell = forwardRef((props, forwardedRef) => {
   const isWithinTableHeader = useSafeContext(TableHeaderContext);
-  const { mode } = useSafeContext(TableContext);
-  const { render, role } = React.useMemo(() => {
+  const {
+    mode
+  } = useSafeContext(TableContext);
+  const {
+    render,
+    role
+  } = React.useMemo(() => {
     if (mode === "aria") {
-      return { role: isWithinTableHeader ? "columnheader" : "cell" };
+      return {
+        role: isWithinTableHeader ? "columnheader" : "cell"
+      };
     }
-    return { render: isWithinTableHeader ? /* @__PURE__ */ jsx("th", {}) : /* @__PURE__ */ jsx("td", {}) };
+    return {
+      render: isWithinTableHeader ? /* @__PURE__ */ jsx("th", {}) : /* @__PURE__ */ jsx("td", {})
+    };
   }, [isWithinTableHeader, mode]);
-  return /* @__PURE__ */ jsx(
-    Role.div,
-    {
-      render,
-      role,
-      ...props,
-      ref: forwardedRef,
-      className: cx("\u{1F95D}TableCell", props.className)
-    }
-  );
+  return /* @__PURE__ */ jsx(Role.div, {
+    render,
+    role,
+    ...props,
+    ref: forwardedRef,
+    className: cx("\u{1F95D}TableCell", props.className)
+  });
 });
 export {
   TableBody as Body,

package/dist/Tabs.js

@@ -1,94 +1,131 @@
+import { c as _c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { useStoreState } from "@ariakit/react/store";
 import * as AkTab from "@ariakit/react/tab";
-import {
-  forwardRef,
-  isBrowser,
-  useUnreactiveCallback
-} from "@stratakit/foundations/secret-internals";
+import { forwardRef, isBrowser, useUnreactiveCallback } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
-const supportsAnchorPositioning = isBrowser && CSS?.supports("anchor-name: --foo");
+import { useInit } from "./~utils.useInit.js";
+const supportsAnchorPositioning = isBrowser && CSS?.supports?.("anchor-name: --foo");
 const prefersReducedMotion = () => isBrowser && window.matchMedia("(prefers-reduced-motion)").matches;
 function TabsProvider(props) {
+  const $ = _c(14);
+  useInit();
   const {
     defaultSelectedId,
     selectedId,
     setSelectedId,
-    selectOnMove = false,
+    selectOnMove: t0,
     children
   } = props;
-  const store = AkTab.useTabStore({ defaultSelectedId });
+  const selectOnMove = t0 === void 0 ? false : t0;
+  let t1;
+  if ($[0] !== defaultSelectedId) {
+    t1 = {
+      defaultSelectedId
+    };
+    $[0] = defaultSelectedId;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const store = AkTab.useTabStore(t1);
   const tablist = useStoreState(store, "baseElement");
   const selectedIdFromStore = useStoreState(store, "selectedId");
-  const flipAnimateStripe = (newSelectedId) => {
-    if (!supportsAnchorPositioning) return;
-    const rootNode = tablist?.getRootNode();
-    if (!rootNode || !selectedIdFromStore || !newSelectedId) return;
-    const previousTabRect = rootNode.getElementById?.(selectedIdFromStore)?.getBoundingClientRect();
-    const nextTabRect = rootNode.getElementById?.(newSelectedId)?.getBoundingClientRect();
-    if (!previousTabRect || !nextTabRect) return;
-    const deltaX = previousTabRect.left - nextTabRect.left;
-    const deltaWidth = previousTabRect.width / nextTabRect.width;
-    tablist?.animate(
-      [
-        { transform: `translateX(${deltaX}px) scaleX(${deltaWidth})` },
-        { transform: "none" }
-      ],
-      {
+  let t2;
+  if ($[2] !== selectedIdFromStore || $[3] !== tablist) {
+    t2 = (newSelectedId) => {
+      if (!supportsAnchorPositioning) {
+        return;
+      }
+      const rootNode = tablist?.getRootNode();
+      if (!rootNode || !selectedIdFromStore || !newSelectedId) {
+        return;
+      }
+      const previousTabRect = rootNode.getElementById?.(selectedIdFromStore)?.getBoundingClientRect();
+      const nextTabRect = rootNode.getElementById?.(newSelectedId)?.getBoundingClientRect();
+      if (!previousTabRect || !nextTabRect) {
+        return;
+      }
+      const deltaX = previousTabRect.left - nextTabRect.left;
+      const deltaWidth = previousTabRect.width / nextTabRect.width;
+      tablist?.animate([{
+        transform: `translateX(${deltaX}px) scaleX(${deltaWidth})`
+      }, {
+        transform: "none"
+      }], {
         pseudoElement: "::after",
         duration: 150,
         easing: "ease-in-out"
+      });
+    };
+    $[2] = selectedIdFromStore;
+    $[3] = tablist;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const flipAnimateStripe = t2;
+  let t3;
+  if ($[5] !== flipAnimateStripe || $[6] !== setSelectedId) {
+    t3 = (newSelectedId_0) => {
+      if (!prefersReducedMotion()) {
+        flipAnimateStripe(newSelectedId_0);
       }
-    );
-  };
-  return /* @__PURE__ */ jsx(
-    AkTab.TabProvider,
-    {
+      setSelectedId?.(newSelectedId_0);
+    };
+    $[5] = flipAnimateStripe;
+    $[6] = setSelectedId;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const t4 = useUnreactiveCallback(t3);
+  let t5;
+  if ($[8] !== children || $[9] !== selectOnMove || $[10] !== selectedId || $[11] !== store || $[12] !== t4) {
+    t5 = jsx(AkTab.TabProvider, {
       store,
       selectedId,
-      setSelectedId: useUnreactiveCallback(
-        (newSelectedId) => {
-          if (!prefersReducedMotion()) flipAnimateStripe(newSelectedId);
-          setSelectedId?.(newSelectedId);
-        }
-      ),
+      setSelectedId: t4,
       selectOnMove,
       children
-    }
-  );
+    });
+    $[8] = children;
+    $[9] = selectOnMove;
+    $[10] = selectedId;
+    $[11] = store;
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  return t5;
 }
 const TabList = forwardRef((props, forwardedRef) => {
-  const { tone = "neutral", ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    AkTab.TabList,
-    {
-      ...rest,
-      "data-_sk-tone": tone,
-      className: cx("\u{1F95D}TabList", props.className),
-      ref: forwardedRef
-    }
-  );
+  const {
+    tone = "neutral",
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(AkTab.TabList, {
+    ...rest,
+    "data-_sk-tone": tone,
+    className: cx("\u{1F95D}TabList", props.className),
+    ref: forwardedRef
+  });
 });
 const Tab = forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    AkTab.Tab,
-    {
-      accessibleWhenDisabled: true,
-      ...props,
-      className: cx("\u{1F95D}Tab", props.className),
-      ref: forwardedRef
-    }
-  );
+  return /* @__PURE__ */ jsx(AkTab.Tab, {
+    accessibleWhenDisabled: true,
+    ...props,
+    className: cx("\u{1F95D}Tab", props.className),
+    ref: forwardedRef
+  });
 });
 const TabPanel = forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    AkTab.TabPanel,
-    {
-      ...props,
-      className: cx("\u{1F95D}TabPanel", props.className),
-      ref: forwardedRef
-    }
-  );
+  return /* @__PURE__ */ jsx(AkTab.TabPanel, {
+    ...props,
+    className: cx("\u{1F95D}TabPanel", props.className),
+    ref: forwardedRef
+  });
 });
 export {
   TabsProvider as Provider,

package/dist/Toolbar.js

@@ -1,53 +1,35 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as Toolbar from "@ariakit/react/toolbar";
-import {
-  IconButtonContext,
-  TooltipContext
-} from "@stratakit/bricks/secret-internals";
+import { IconButtonContext, TooltipContext } from "@stratakit/bricks/secret-internals";
 import { forwardRef } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
-const ToolbarGroup = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      IconButtonContext.Provider,
-      {
-        value: React.useMemo(() => ({ iconSize: "large" }), []),
-        children: /* @__PURE__ */ jsx(
-          TooltipContext.Provider,
-          {
-            value: React.useMemo(
-              () => ({
-                placement: props.orientation === "vertical" ? "right" : "top"
-              }),
-              [props.orientation]
-            ),
-            children: /* @__PURE__ */ jsx(
-              Toolbar.Toolbar,
-              {
-                ...props,
-                className: cx("\u{1F95D}Toolbar", props.className),
-                ref: forwardedRef
-              }
-            )
-          }
-        )
-      }
-    );
-  }
-);
-const ToolbarItem = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Toolbar.ToolbarItem,
-      {
+import { useInit } from "./~utils.useInit.js";
+const ToolbarGroup = forwardRef((props, forwardedRef) => {
+  useInit();
+  return /* @__PURE__ */ jsx(IconButtonContext.Provider, {
+    value: React.useMemo(() => ({
+      iconSize: "large"
+    }), []),
+    children: /* @__PURE__ */ jsx(TooltipContext.Provider, {
+      value: React.useMemo(() => ({
+        placement: props.orientation === "vertical" ? "right" : "top"
+      }), [props.orientation]),
+      children: /* @__PURE__ */ jsx(Toolbar.Toolbar, {
         ...props,
-        className: cx("\u{1F95D}ToolbarItem", props.className),
+        className: cx("\u{1F95D}Toolbar", props.className),
         ref: forwardedRef
-      }
-    );
-  }
-);
+      })
+    })
+  });
+});
+const ToolbarItem = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Toolbar.ToolbarItem, {
+    ...props,
+    className: cx("\u{1F95D}ToolbarItem", props.className),
+    ref: forwardedRef
+  });
+});
 export {
   ToolbarGroup as Group,
   ToolbarItem as Item

package/dist/Tree.js

@@ -3,20 +3,23 @@ import { Composite, useCompositeStore } from "@ariakit/react/composite";
 import { Role } from "@ariakit/react/role";
 import { forwardRef } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
+import { useInit } from "./~utils.useInit.js";
 import { Action as TreeItemAction, Root as TreeItemRoot } from "./TreeItem.js";
 const Tree = forwardRef((props, forwardedRef) => {
-  const composite = useCompositeStore({ orientation: "vertical" });
-  return /* @__PURE__ */ jsx(
-    Role.div,
-    {
-      role: "tree",
-      ...props,
-      render: /* @__PURE__ */ jsx(Composite, { store: composite }),
-      className: cx("\u{1F95D}Tree", props.className),
-      ref: forwardedRef,
-      children: props.children
-    }
-  );
+  useInit();
+  const composite = useCompositeStore({
+    orientation: "vertical"
+  });
+  return /* @__PURE__ */ jsx(Role.div, {
+    role: "tree",
+    ...props,
+    render: /* @__PURE__ */ jsx(Composite, {
+      store: composite
+    }),
+    className: cx("\u{1F95D}Tree", props.className),
+    ref: forwardedRef,
+    children: props.children
+  });
 });
 export {
   TreeItemRoot as Item,