@stratakit/structures 0.4.4 → 0.5.0

package/dist/ErrorRegion.js

@@ -1,167 +1,141 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import {
-  Collection,
-  CollectionItem,
-  useCollectionStore
-} from "@ariakit/react/collection";
-import {
-  Dialog,
-  DialogDisclosure,
-  DialogProvider
-} from "@ariakit/react/dialog";
+import { Collection, CollectionItem, useCollectionStore } from "@ariakit/react/collection";
+import { Dialog, DialogDisclosure, DialogProvider } from "@ariakit/react/dialog";
 import { Role } from "@ariakit/react/role";
 import { useStoreState } from "@ariakit/react/store";
 import { Button, Text, VisuallyHidden } from "@stratakit/bricks";
 import { IconButtonPresentation } from "@stratakit/bricks/secret-internals";
-import {
-  forwardRef,
-  useControlledState
-} from "@stratakit/foundations/secret-internals";
+import { forwardRef, useControlledState } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { ChevronDown, StatusIcon } from "./~utils.icons.js";
-const ErrorRegionRoot = forwardRef(
-  (props, forwardedRef) => {
-    const {
-      label,
-      items,
-      open: openProp,
-      setOpen: setOpenProp,
-      ...rest
-    } = props;
-    const labelId = React.useId();
-    const sectionLabelledBy = props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : labelId);
-    const [open, setOpen] = useControlledState(
-      false,
-      openProp,
-      setOpenProp
-    );
-    const containerRef = React.useRef(null);
-    const pulse = () => {
-      const el = containerRef.current;
-      if (!el) return;
-      const id = "--\u{1F95D}ErrorRegion-pulse";
-      const animations = el.getAnimations({ subtree: true });
-      if (animations.find((animation) => animation.id === id)) return;
-      el.animate(
-        [
-          {
-            boxShadow: "0 0 0 0 var(--stratakit-color-border-attention-base)",
-            opacity: 1
-          },
-          {
-            boxShadow: "0 0 15px 2px var(--stratakit-color-border-attention-base)",
-            opacity: 0.7,
-            offset: 0.5
-          },
-          {
-            boxShadow: "0 0 0 0 var(--stratakit-color-border-attention-base)",
-            opacity: 1
-          }
-        ],
-        {
-          id,
-          duration: 600,
-          easing: "cubic-bezier(0.4, 0, 0.2, 1)",
-          pseudoElement: "::before"
-        }
-      );
-    };
-    const store = useCollectionStore({
-      setItems: (newItems) => {
-        const prevItemsSet = new Set(prevItems.map((item) => item.id));
-        const addedItems = newItems.filter(
-          (item) => !prevItemsSet.has(item.id)
-        );
-        if (addedItems.length === 0) return;
-        pulse();
-        setLiveLabel(label);
-      }
+const ErrorRegionRoot = forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    items = [],
+    open: openProp,
+    setOpen: setOpenProp,
+    ...rest
+  } = props;
+  const labelId = React.useId();
+  const sectionLabelledBy = props["aria-label"] ? void 0 : label ? labelId : void 0;
+  const visible = items.length > 0;
+  const [open, setOpen] = useControlledState(false, openProp, setOpenProp);
+  const containerRef = React.useRef(null);
+  const pulse = () => {
+    const el = containerRef.current;
+    if (!el) return;
+    const id = "--\u{1F95D}ErrorRegion-pulse";
+    const animations = el.getAnimations({
+      subtree: true
     });
-    const prevItems = useStoreState(store, "items");
-    const [liveLabel, setLiveLabel] = React.useState(label);
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "polite", "aria-atomic": true, children: liveLabel === label ? liveLabel : void 0 }),
-      /* @__PURE__ */ jsx(DialogProvider, { open, setOpen, children: /* @__PURE__ */ jsx(
-        Role.section,
-        {
-          ...rest,
-          "aria-labelledby": sectionLabelledBy,
-          className: cx("\u{1F95D}ErrorRegion", props.className),
-          "data-_sk-visible": !!label,
-          "data-_sk-expanded": open,
-          ref: forwardedRef,
-          children: /* @__PURE__ */ jsxs("div", { className: "\u{1F95D}ErrorRegionContainer", ref: containerRef, children: [
-            /* @__PURE__ */ jsxs(
-              DialogDisclosure,
-              {
-                className: "\u{1F95D}ErrorRegionHeader",
-                render: /* @__PURE__ */ jsx(Button, { variant: "ghost" }),
-                children: [
-                  /* @__PURE__ */ jsx(StatusIcon, { tone: "attention", className: "\u{1F95D}ErrorRegionIcon" }),
-                  /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      render: /* @__PURE__ */ jsx("span", {}),
-                      id: labelId,
-                      className: "\u{1F95D}ErrorRegionLabel",
-                      variant: "body-sm",
-                      children: label
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(IconButtonPresentation, { inert: true, variant: "ghost", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Dialog,
-              {
-                className: "\u{1F95D}ErrorRegionDialog",
-                portal: false,
-                modal: false,
-                autoFocusOnShow: false,
-                "aria-labelledby": labelId,
-                children: /* @__PURE__ */ jsx(
-                  Collection,
-                  {
-                    store,
-                    className: "\u{1F95D}ErrorRegionItems",
-                    role: "list",
-                    children: items
-                  }
-                )
-              }
-            )
-          ] })
-        }
-      ) })
-    ] });
-  }
-);
-const ErrorRegionItem = forwardRef(
-  (props, forwardedRef) => {
-    const generatedId = React.useId();
-    const {
-      message,
-      messageId = `${generatedId}-message`,
-      actions,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsxs(
-      CollectionItem,
-      {
+    if (animations.find((animation) => animation.id === id)) return;
+    el.animate([{
+      boxShadow: "0 0 0 0 var(--stratakit-color-border-attention-base)",
+      opacity: 1
+    }, {
+      boxShadow: "0 0 15px 2px var(--stratakit-color-border-attention-base)",
+      opacity: 0.7,
+      offset: 0.5
+    }, {
+      boxShadow: "0 0 0 0 var(--stratakit-color-border-attention-base)",
+      opacity: 1
+    }], {
+      id,
+      duration: 600,
+      easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+      pseudoElement: "::before"
+    });
+  };
+  const store = useCollectionStore({
+    setItems: (newItems) => {
+      const prevItemsSet = new Set(prevItems.map((item) => item.id));
+      const addedItems = newItems.filter((item_0) => !prevItemsSet.has(item_0.id));
+      if (addedItems.length === 0) return;
+      pulse();
+      setLiveLabel(label);
+    }
+  });
+  const prevItems = useStoreState(store, "items");
+  const [liveLabel, setLiveLabel] = React.useState(label);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(VisuallyHidden, {
+      "aria-live": "polite",
+      "aria-atomic": true,
+      children: liveLabel === label ? liveLabel : void 0
+    }), /* @__PURE__ */ jsx(DialogProvider, {
+      open,
+      setOpen,
+      children: /* @__PURE__ */ jsx(Role.section, {
+        "aria-labelledby": sectionLabelledBy,
         ...rest,
-        role: "listitem",
-        className: cx("\u{1F95D}ErrorRegionItem", props.className),
+        className: cx("\u{1F95D}ErrorRegion", props.className),
+        "data-_sk-visible": visible,
+        "data-_sk-expanded": open,
         ref: forwardedRef,
-        children: [
-          /* @__PURE__ */ jsx(Text, { id: messageId, variant: "body-sm", children: message }),
-          /* @__PURE__ */ jsx("div", { className: "\u{1F95D}ErrorRegionItemActions", children: actions })
-        ]
-      }
-    );
-  }
-);
+        children: /* @__PURE__ */ jsxs("div", {
+          className: "\u{1F95D}ErrorRegionContainer",
+          ref: containerRef,
+          children: [/* @__PURE__ */ jsxs(DialogDisclosure, {
+            className: "\u{1F95D}ErrorRegionHeader",
+            render: /* @__PURE__ */ jsx(Button, {
+              variant: "ghost"
+            }),
+            children: [/* @__PURE__ */ jsx(StatusIcon, {
+              tone: "attention",
+              className: "\u{1F95D}ErrorRegionIcon"
+            }), /* @__PURE__ */ jsx(Text, {
+              render: /* @__PURE__ */ jsx("span", {}),
+              id: labelId,
+              className: "\u{1F95D}ErrorRegionLabel",
+              variant: "body-sm",
+              children: label
+            }), /* @__PURE__ */ jsx(IconButtonPresentation, {
+              inert: true,
+              variant: "ghost",
+              children: /* @__PURE__ */ jsx(ChevronDown, {})
+            })]
+          }), /* @__PURE__ */ jsx(Dialog, {
+            className: "\u{1F95D}ErrorRegionDialog",
+            portal: false,
+            modal: false,
+            autoFocusOnShow: false,
+            "aria-labelledby": labelId,
+            children: /* @__PURE__ */ jsx(Collection, {
+              store,
+              className: "\u{1F95D}ErrorRegionItems",
+              role: "list",
+              children: items
+            })
+          })]
+        })
+      })
+    })]
+  });
+});
+const ErrorRegionItem = forwardRef((props, forwardedRef) => {
+  const generatedId = React.useId();
+  const {
+    message,
+    messageId = `${generatedId}-message`,
+    actions,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs(CollectionItem, {
+    ...rest,
+    role: "listitem",
+    className: cx("\u{1F95D}ErrorRegionItem", props.className),
+    ref: forwardedRef,
+    children: [/* @__PURE__ */ jsx(Text, {
+      id: messageId,
+      variant: "body-sm",
+      children: message
+    }), /* @__PURE__ */ jsx("div", {
+      className: "\u{1F95D}ErrorRegionItemActions",
+      children: actions
+    })]
+  });
+});
 export {
   ErrorRegionItem as Item,
   ErrorRegionRoot as Root

package/dist/NavigationRail.d.ts

@@ -1,6 +1,36 @@
 import * as React from "react";
 import type { BaseProps, FocusableProps } from "@stratakit/foundations/secret-internals";
-interface NavigationRailProps extends BaseProps<"nav"> {
+interface NavigationRailRootInnerProps extends BaseProps<"nav"> {
+}
+interface NavigationRailRootProps extends NavigationRailRootInnerProps {
+    /**
+     * The initial expanded state of the `NavigationRail` when it is first rendered.
+     *
+     * This prop is recommended over `expanded` when you don't need to fully control the expanded
+     * state from the outside.
+     *
+     * This prop will be ignored if the `expanded` prop is provided.
+     *
+     * @default false
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Control whether the `NavigationRail` is expanded or collapsed.
+     *
+     * When `true`, the `NavigationRail` shows both icons and labels for its items.
+     * When `false`, it shows only icons, with labels available as tooltips.
+     *
+     * This prop is optional; if not provided, the `NavigationRail` will manage its own state internally.
+     *
+     * This should be used in conjunction with the `setExpanded` prop to reflect internal state changes.
+     */
+    expanded?: boolean;
+    /**
+     * Callback that is called when the expanded state of the `NavigationRail` changes.
+     *
+     * This is useful for syncing the internal state of the `NavigationRail` with external state.
+     */
+    setExpanded?: (expanded: boolean) => void;
 }
 /**
  * The `NavigationRail` presents top-level navigation items in a vertical orientation.
@@ -43,7 +73,7 @@ interface NavigationRailProps extends BaseProps<"nav"> {
  * </NavigationRail.Root>
  * ```
  */
-declare const NavigationRailRoot: React.ForwardRefExoticComponent<NavigationRailProps & React.RefAttributes<HTMLElement>>;
+declare const NavigationRailRoot: React.ForwardRefExoticComponent<NavigationRailRootProps & React.RefAttributes<HTMLElement>>;
 interface NavigationRailHeaderProps extends BaseProps<"header"> {
 }
 /**
@@ -64,8 +94,11 @@ interface NavigationRailToggleButtonProps extends Omit<FocusableProps<"button">,
     label?: string;
 }
 /**
- * `NavigationRail.ToggleButton` toggles the collapsed state of the `NavigationRail`.
+ * `NavigationRail.ToggleButton` toggles the expanded/collapsed state of the `NavigationRail`.
  * It is typically placed inside `NavigationRail.Header`, next to the logo.
+ *
+ * When this button is clicked, it toggles the internal expanded state of the `NavigationRail`,
+ * and also calls the `setExpanded` callback prop if provided, to allow syncing with external state.
  */
 declare const NavigationRailToggleButton: React.ForwardRefExoticComponent<NavigationRailToggleButtonProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
 interface NavigationRailContentProps extends BaseProps {