@stratakit/structures 0.4.4 → 0.5.0

package/dist/NavigationRail.js

@@ -1,193 +1,239 @@
+import { c as _c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import { Button } from "@ariakit/react/button";
 import { Role } from "@ariakit/react/role";
 import { Tooltip, VisuallyHidden } from "@stratakit/bricks";
 import { Icon } from "@stratakit/foundations";
-import {
-  forwardRef,
-  useEventHandlers,
-  useSafeContext
-} from "@stratakit/foundations/secret-internals";
+import { forwardRef, useEventHandlers, useSafeContext, useUnreactiveCallback } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { createStore, useStore } from "zustand";
-function createNavigationRailStore() {
-  return createStore((set) => ({
-    collapsed: true,
-    setCollapsed: (collapsed) => set({ collapsed })
-  }));
+import { combine } from "zustand/middleware";
+function createNavigationRailStore(initialState) {
+  return createStore(combine(initialState, (set) => ({
+    setExpanded: (expanded) => set({
+      expanded
+    })
+  })));
 }
 const NavigationRailContext = React.createContext(void 0);
 function NavigationRailProvider(props) {
-  const [store] = React.useState(() => createNavigationRailStore());
-  return /* @__PURE__ */ jsx(NavigationRailContext.Provider, { value: store, children: props.children });
+  const $ = _c(11);
+  const {
+    defaultExpanded,
+    expanded,
+    setExpanded: setExpandedProp
+  } = props;
+  let t0;
+  if ($[0] !== defaultExpanded || $[1] !== expanded) {
+    t0 = () => createNavigationRailStore({
+      expanded: expanded ?? defaultExpanded
+    });
+    $[0] = defaultExpanded;
+    $[1] = expanded;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  const [store] = React.useState(t0);
+  const setExpanded = useUnreactiveCallback(setExpandedProp ?? _temp);
+  let t1;
+  let t2;
+  if ($[3] !== expanded || $[4] !== setExpanded || $[5] !== store) {
+    t1 = function synchronizeWithProps() {
+      if (expanded === void 0) {
+        return;
+      }
+      store.setState({
+        expanded,
+        setExpanded
+      });
+    };
+    t2 = [store, expanded, setExpanded];
+    $[3] = expanded;
+    $[4] = setExpanded;
+    $[5] = store;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t1 = $[6];
+    t2 = $[7];
+  }
+  React.useEffect(t1, t2);
+  let t3;
+  if ($[8] !== props.children || $[9] !== store) {
+    t3 = jsx(NavigationRailContext.Provider, {
+      value: store,
+      children: props.children
+    });
+    $[8] = props.children;
+    $[9] = store;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  return t3;
+}
+function _temp() {
 }
 function useNavigationRailState(selectorFn) {
   const store = useSafeContext(NavigationRailContext);
   return useStore(store, selectorFn);
 }
-const NavigationRailRoot = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(NavigationRailProvider, { children: /* @__PURE__ */ jsx(NavigationRailRootInner, { ...props, ref: forwardedRef }) });
-  }
-);
-const NavigationRailRootInner = forwardRef(
-  (props, forwardedRef) => {
-    const collapsed = useNavigationRailState((state) => state.collapsed);
-    return /* @__PURE__ */ jsx(
-      Role.nav,
-      {
-        ...props,
-        className: cx("\u{1F95D}NavigationRail", props.className),
-        "data-_sk-expanded": collapsed ? "false" : "true",
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const NavigationRailHeader = forwardRef(
-  (props, forwardedRef) => {
-    const collapsed = useNavigationRailState((state) => state.collapsed);
-    return /* @__PURE__ */ jsx(
-      Role.header,
-      {
-        ...props,
-        className: cx("\u{1F95D}NavigationRailHeader", props.className),
-        "data-_sk-collapsed": collapsed ? "true" : void 0,
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const NavigationRailToggleButton = forwardRef((props, forwardedRef) => {
-  const { label = "Expand navigation", ...rest } = props;
-  const collapsed = useNavigationRailState((state) => state.collapsed);
-  const setCollapsed = useNavigationRailState((state) => state.setCollapsed);
-  return /* @__PURE__ */ jsxs(
-    Role.button,
-    {
-      "aria-expanded": collapsed ? "false" : "true",
+const NavigationRailRoot = forwardRef((props, forwardedRef) => {
+  const {
+    defaultExpanded = false,
+    expanded,
+    setExpanded,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(NavigationRailProvider, {
+    defaultExpanded,
+    expanded,
+    setExpanded,
+    children: /* @__PURE__ */ jsx(NavigationRailRootInner, {
       ...rest,
-      className: cx("\u{1F95D}NavigationRailToggleButton", props.className),
-      ref: forwardedRef,
-      onClick: useEventHandlers(props.onClick, () => setCollapsed(!collapsed)),
-      children: [
-        /* @__PURE__ */ jsx("svg", { width: "12", height: "12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            fill: "currentColor",
-            d: "M5.405 2.845a.75.75 0 1 0-1.06 1.06L6.439 6 4.345 8.095a.75.75 0 0 0 1.06 1.06L8.03 6.53a.75.75 0 0 0 0-1.06L5.405 2.845Z"
-          }
-        ) }),
-        /* @__PURE__ */ jsx(VisuallyHidden, { children: label })
-      ]
-    }
-  );
+      ref: forwardedRef
+    })
+  });
+});
+const NavigationRailRootInner = forwardRef((props, forwardedRef) => {
+  const expanded = useNavigationRailState((state) => state.expanded);
+  return /* @__PURE__ */ jsx(Role.nav, {
+    ...props,
+    className: cx("\u{1F95D}NavigationRail", props.className),
+    "data-_sk-expanded": expanded ? "true" : void 0,
+    ref: forwardedRef
+  });
+});
+const NavigationRailHeader = forwardRef((props, forwardedRef) => {
+  const expanded = useNavigationRailState((state) => state.expanded);
+  return /* @__PURE__ */ jsx(Role.header, {
+    ...props,
+    className: cx("\u{1F95D}NavigationRailHeader", props.className),
+    "data-_sk-expanded": expanded ? "true" : void 0,
+    ref: forwardedRef
+  });
+});
+const NavigationRailToggleButton = forwardRef((props, forwardedRef) => {
+  const {
+    label = "Expand navigation",
+    ...rest
+  } = props;
+  const expanded = useNavigationRailState((state) => state.expanded);
+  const setExpanded = useNavigationRailState((state_0) => state_0.setExpanded);
+  return /* @__PURE__ */ jsxs(Button, {
+    "aria-expanded": expanded ? "true" : "false",
+    ...rest,
+    className: cx("\u{1F95D}NavigationRailToggleButton", props.className),
+    ref: forwardedRef,
+    onClick: useEventHandlers(props.onClick, () => setExpanded(!expanded)),
+    children: [/* @__PURE__ */ jsx("svg", {
+      width: "12",
+      height: "12",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", {
+        fill: "currentColor",
+        d: "M5.405 2.845a.75.75 0 1 0-1.06 1.06L6.439 6 4.345 8.095a.75.75 0 0 0 1.06 1.06L8.03 6.53a.75.75 0 0 0 0-1.06L5.405 2.845Z"
+      })
+    }), /* @__PURE__ */ jsx(VisuallyHidden, {
+      children: label
+    })]
+  });
+});
+const NavigationRailContent = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Role.div, {
+    ...props,
+    className: cx("\u{1F95D}NavigationRailContent", props.className),
+    ref: forwardedRef
+  });
+});
+const NavigationRailList = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Role, {
+    role: "list",
+    ...props,
+    className: cx("\u{1F95D}NavigationRailList", props.className),
+    ref: forwardedRef
+  });
+});
+const NavigationRailListItem = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Role.div, {
+    role: "listitem",
+    ...props,
+    className: cx("\u{1F95D}NavigationRailListItem", props.className),
+    ref: forwardedRef
+  });
 });
-const NavigationRailContent = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Role.div,
-      {
-        ...props,
-        className: cx("\u{1F95D}NavigationRailContent", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const NavigationRailList = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Role,
-      {
-        role: "list",
-        ...props,
-        className: cx("\u{1F95D}NavigationRailList", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const NavigationRailListItem = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Role.div,
-      {
-        role: "listitem",
-        ...props,
-        className: cx("\u{1F95D}NavigationRailListItem", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
 const NavigationRailItemAction = forwardRef((props, forwardedRef) => {
-  const collapsed = useNavigationRailState((state) => state.collapsed);
-  const { label, icon, ...rest } = props;
-  const action = /* @__PURE__ */ jsxs(
-    Role,
-    {
-      ...rest,
-      className: cx("\u{1F95D}NavigationRailItemAction", props.className),
-      ref: forwardedRef,
-      children: [
-        typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
-        /* @__PURE__ */ jsx(
-          Role.span,
-          {
-            className: "\u{1F95D}NavigationRailItemActionLabel",
-            render: collapsed ? /* @__PURE__ */ jsx(VisuallyHidden, {}) : void 0,
-            children: label
-          }
-        )
-      ]
-    }
-  );
-  if (collapsed) {
-    return /* @__PURE__ */ jsx(Tooltip, { content: label, placement: "right", type: "none", children: action });
+  const expanded = useNavigationRailState((state) => state.expanded);
+  const {
+    label,
+    icon,
+    ...rest
+  } = props;
+  const action = /* @__PURE__ */ jsxs(Role, {
+    ...rest,
+    className: cx("\u{1F95D}NavigationRailItemAction", props.className),
+    ref: forwardedRef,
+    children: [typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
+      href: icon
+    }) : icon, /* @__PURE__ */ jsx(Role.span, {
+      className: "\u{1F95D}NavigationRailItemActionLabel",
+      render: !expanded ? /* @__PURE__ */ jsx(VisuallyHidden, {}) : void 0,
+      children: label
+    })]
+  });
+  if (!expanded) {
+    return /* @__PURE__ */ jsx(Tooltip, {
+      content: label,
+      placement: "right",
+      type: "none",
+      children: action
+    });
   }
   return action;
 });
-const NavigationRailAnchor = forwardRef(
-  (props, forwardedRef) => {
-    const { label, icon, active, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      NavigationRailItemAction,
-      {
-        label,
-        icon,
-        "aria-current": active ? "page" : void 0,
-        render: /* @__PURE__ */ jsx(Role.a, { ...rest, ref: forwardedRef })
-      }
-    );
-  }
-);
-const NavigationRailButton = forwardRef(
-  (props, forwardedRef) => {
-    const { label, icon, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      NavigationRailItemAction,
-      {
-        label,
-        icon,
-        render: /* @__PURE__ */ jsx(Role.button, { ...rest, ref: forwardedRef })
-      }
-    );
-  }
-);
-const NavigationRailFooter = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Role,
-      {
-        render: /* @__PURE__ */ jsx("footer", {}),
-        ...props,
-        className: cx("\u{1F95D}NavigationRailFooter", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
+const NavigationRailAnchor = forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    icon,
+    active,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(NavigationRailItemAction, {
+    label,
+    icon,
+    "aria-current": active ? "page" : void 0,
+    render: /* @__PURE__ */ jsx(Role.a, {
+      ...rest,
+      ref: forwardedRef
+    })
+  });
+});
+const NavigationRailButton = forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    icon,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(NavigationRailItemAction, {
+    label,
+    icon,
+    render: /* @__PURE__ */ jsx(Role.button, {
+      ...rest,
+      ref: forwardedRef
+    })
+  });
+});
+const NavigationRailFooter = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Role, {
+    render: /* @__PURE__ */ jsx("footer", {}),
+    ...props,
+    className: cx("\u{1F95D}NavigationRailFooter", props.className),
+    ref: forwardedRef
+  });
+});
 export {
   NavigationRailAnchor as Anchor,
   NavigationRailButton as Button,

package/dist/Table.js

@@ -1,137 +1,145 @@
+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";
 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,
-    {
+  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) => {
+  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.d.ts

@@ -1,6 +1,8 @@
 import * as AkTab from "@ariakit/react/tab";
 import type { BaseProps, FocusableProps } from "@stratakit/foundations/secret-internals";
 interface TabsProviderProps extends Pick<AkTab.TabProviderProps, "defaultSelectedId" | "selectedId" | "setSelectedId" | "selectOnMove" | "children"> {
+    /** @default false */
+    selectOnMove?: AkTab.TabProviderProps["selectOnMove"];
 }
 /**
  * A set of tabs that can be used to switch between different views.