@stratakit/structures 0.4.5 → 0.5.1

package/dist/ErrorRegion.js

@@ -1,168 +1,143 @@
 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: itemsProp = [],
-      open: openProp,
-      setOpen: setOpenProp,
-      ...rest
-    } = props;
-    const labelId = React.useId();
-    const sectionLabelledBy = props["aria-label"] ? void 0 : label ? labelId : void 0;
-    const visible = Array.isArray(itemsProp) ? itemsProp.length > 0 : !!label;
-    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);
-      }
+import { useInit } from "./~utils.useInit.js";
+const ErrorRegionRoot = forwardRef((props, forwardedRef) => {
+  useInit();
+  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,
-        {
-          "aria-labelledby": sectionLabelledBy,
-          ...rest,
-          className: cx("\u{1F95D}ErrorRegion", props.className),
-          "data-_sk-visible": visible,
-          "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: itemsProp
-                  }
-                )
-              }
-            )
-          ] })
-        }
-      ) })
-    ] });
-  }
-);
-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/NavigationList.d.ts

@@ -0,0 +1,110 @@
+import * as React from "react";
+import type { BaseProps, FocusableProps } from "@stratakit/foundations/secret-internals";
+interface NavigationListRootProps extends Omit<BaseProps<"div">, "children"> {
+    /**
+     * The navigation items to render within the list.
+     * Should be an array of `NavigationList.Anchor` elements.
+     */
+    items: React.JSX.Element[];
+}
+/**
+ * A navigation list displays a collection of navigation links, one of which can be "active".
+ *
+ * Basic example:
+ * ```tsx
+ * <NavigationList.Root
+ *   items={[
+ *     <NavigationList.Anchor key={1} href="/page1" label="Item 1" />,
+ *     <NavigationList.Anchor key={2} href="/page2" label="Item 2" active />,
+ *   ]}
+ * />
+ * ```
+ *
+ * Example with subgroups:
+ * ```tsx
+ * <NavigationList.Root
+ *   items={[
+ *     <NavigationList.Anchor key={1} href="/page1" label="Item 1" />,
+ *     <NavigationList.Anchor key={2} href="/page2" label="Item 2" />,
+ *     <NavigationList.Subgroup
+ *       key={3}
+ *       label="Subgroup"
+ *       items={[
+ *         <NavigationList.Anchor key={1} href="/page3-1" label="Item 3.1" />,
+ *         <NavigationList.Anchor key={2} href="/page3-2" label="Item 3.2" />,
+ *       ]}
+ *     />,
+ *   ]}
+ * />
+ * ```
+ */
+declare const NavigationListRoot: React.ForwardRefExoticComponent<NavigationListRootProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface NavigationListItemActionProps extends FocusableProps {
+}
+interface NavigationListAnchorProps extends Omit<FocusableProps<"a">, "children"> {
+    /**
+     * The label of the navigation anchor.
+     */
+    label: string;
+    /**
+     * The icon shown before the label of the navigation anchor.
+     *
+     * Can be a URL of an SVG from the `@stratakit/icons` package,
+     * or a custom JSX icon.
+     */
+    icon?: string | React.JSX.Element;
+    /**
+     * Whether the anchor is active.
+     *
+     * This will automatically set `aria-current="true"` on the anchor.
+     */
+    active?: boolean;
+}
+/**
+ * An individual anchor within the navigation list. This should perform a navigation
+ * to a different view, page or section. (Make sure to use proper routing/navigation)
+ *
+ * Should be used as an element within the `items` array of `NavigationList.Root`.
+ *
+ * Example:
+ * ```tsx
+ * <NavigationList.Anchor href="/profile"> label="Profile" />
+ * ```
+ */
+declare const NavigationListAnchor: React.ForwardRefExoticComponent<NavigationListAnchorProps & React.RefAttributes<HTMLElement | HTMLAnchorElement>>;
+interface NavigationListSubgroupProps extends Omit<BaseProps, "children">, Pick<NavigationListSubgroupButtonProps, "label" | "icon"> {
+    /**
+     * The navigation items within the subgroup.
+     * Should be an array of `NavigationList.Anchor` elements.
+     */
+    items: React.JSX.Element[];
+    /**
+     * Whether the subgroup is expanded by default.
+     */
+    defaultOpen?: boolean;
+}
+/**
+ * A subgroup within the navigation list, used to group related navigation items.
+ *
+ * Should be used as an element within the `items` array of `NavigationList.Root`.
+ *
+ * Example:
+ * ```tsx
+ * <NavigationList.Subgroup label="Management" items={[ … ]} />
+ * ```
+ */
+declare const NavigationListSubgroup: React.ForwardRefExoticComponent<NavigationListSubgroupProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface NavigationListSubgroupButtonProps extends Omit<NavigationListItemActionProps, "children"> {
+    /**
+     * The label for the subgroup.
+     */
+    label: string;
+    /**
+     * The icon shown before the label of the subgroup.
+     *
+     * Can be a URL of an SVG from the `@stratakit/icons` package,
+     * or a custom JSX icon.
+     */
+    icon?: string | React.JSX.Element;
+}
+export { NavigationListRoot as Root, NavigationListAnchor as Anchor, NavigationListSubgroup as Subgroup, };

package/dist/NavigationList.js

@@ -0,0 +1,130 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button as AriaButton } from "@ariakit/react/button";
+import * as AriaDisclosure from "@ariakit/react/disclosure";
+import { Focusable } from "@ariakit/react/focusable";
+import { Role } from "@ariakit/react/role";
+import { Text } from "@stratakit/bricks";
+import { Icon } from "@stratakit/foundations";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import { ChevronDown } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
+const NavigationListRoot = forwardRef((props, forwardedRef) => {
+  useInit();
+  const {
+    items,
+    role = "list",
+    ...rest
+  } = props;
+  const itemRole = role === "list" ? "listitem" : void 0;
+  const {
+    indented
+  } = React.useContext(NavigationListRootContext);
+  return /* @__PURE__ */ jsx(Role, {
+    ...rest,
+    role,
+    className: cx("\u{1F95D}NavigationListRoot", props.className),
+    "data-_sk-indented": indented ? "true" : void 0,
+    ref: forwardedRef,
+    children: React.Children.map(items, (item) => /* @__PURE__ */ jsx(Role, {
+      role: itemRole,
+      className: "\u{1F95D}NavigationListItem",
+      "data-_sk-indented": indented ? "true" : void 0,
+      children: item
+    }))
+  });
+});
+const NavigationListRootContext = React.createContext({
+  indented: false
+});
+const NavigationListItemAction = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Focusable, {
+    accessibleWhenDisabled: true,
+    ...props,
+    className: cx("\u{1F95D}NavigationListItemAction", props.className),
+    ref: forwardedRef
+  });
+});
+const NavigationListAnchor = forwardRef((props, forwardedRef) => {
+  const {
+    active,
+    label,
+    icon,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs(NavigationListItemAction, {
+    ...rest,
+    render: /* @__PURE__ */ jsx(Role.a, {
+      "aria-current": active ? "true" : void 0,
+      render: props.render
+    }),
+    ref: forwardedRef,
+    children: [typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
+      href: icon
+    }) : icon, /* @__PURE__ */ jsx(Text, {
+      variant: "body-sm",
+      render: /* @__PURE__ */ jsx("span", {}),
+      children: label
+    })]
+  });
+});
+const NavigationListSubgroup = forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    icon,
+    items,
+    defaultOpen,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(Role, {
+    ...rest,
+    className: cx("\u{1F95D}NavigationListSubgroup", props.className),
+    ref: forwardedRef,
+    children: /* @__PURE__ */ jsxs(AriaDisclosure.DisclosureProvider, {
+      defaultOpen,
+      children: [/* @__PURE__ */ jsx(AriaDisclosure.Disclosure, {
+        render: /* @__PURE__ */ jsx(NavigationListSubgroupButton, {
+          label,
+          icon
+        })
+      }), /* @__PURE__ */ jsx(NavigationListRootContext.Provider, {
+        value: {
+          indented: true
+        },
+        children: /* @__PURE__ */ jsx(AriaDisclosure.DisclosureContent, {
+          render: /* @__PURE__ */ jsx(NavigationListRoot, {
+            items
+          })
+        })
+      })]
+    })
+  });
+});
+const NavigationListSubgroupButton = forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    icon,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs(NavigationListItemAction, {
+    render: /* @__PURE__ */ jsx(AriaButton, {}),
+    ...rest,
+    className: cx("\u{1F95D}NavigationListSubgroupButton", props.className),
+    ref: forwardedRef,
+    children: [typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, {
+      href: icon
+    }) : icon, /* @__PURE__ */ jsx(Text, {
+      variant: "body-sm",
+      render: /* @__PURE__ */ jsx("span", {}),
+      children: label
+    }), /* @__PURE__ */ jsx(ChevronDown, {
+      className: "\u{1F95D}NavigationListSubgroupChevron"
+    })]
+  });
+});
+export {
+  NavigationListAnchor as Anchor,
+  NavigationListRoot as Root,
+  NavigationListSubgroup as Subgroup
+};