@stratakit/structures 0.1.0 → 0.2.0

package/dist/DEV/AccordionItem.js

@@ -0,0 +1,148 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  Disclosure,
+  DisclosureContent,
+  DisclosureProvider
+} from "@ariakit/react/disclosure";
+import { Role } from "@ariakit/react/role";
+import { Text } from "@stratakit/bricks";
+import {
+  GhostAligner,
+  IconButtonPresentation
+} from "@stratakit/bricks/secret-internals";
+import {
+  forwardRef,
+  useControlledState
+} from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import { ChevronDown } from "./~utils.icons.js";
+const AccordionItemRoot = forwardRef(
+  (props, forwardedRef) => {
+    const {
+      defaultOpen,
+      open: openProp,
+      setOpen: setOpenProp,
+      ...rest
+    } = props;
+    const [open, setOpen] = useControlledState(
+      defaultOpen ?? false,
+      openProp,
+      setOpenProp
+    );
+    return /* @__PURE__ */ jsx(
+      DisclosureProvider,
+      {
+        defaultOpen,
+        open,
+        setOpen,
+        children: /* @__PURE__ */ jsx(
+          Role,
+          {
+            ...rest,
+            className: cx("\u{1F95D}-accordion-item", props.className),
+            "data-kiwi-open": open,
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+DEV: AccordionItemRoot.displayName = "AccordionItem.Root";
+const AccordionItemHeader = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(GhostAligner, { align: "block", children: /* @__PURE__ */ jsx(
+    Role,
+    {
+      ...props,
+      className: cx("\u{1F95D}-accordion-item-header", props.className),
+      ref: forwardedRef
+    }
+  ) })
+);
+DEV: AccordionItemHeader.displayName = "AccordionItem.Header";
+const AccordionItemButton = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    Disclosure,
+    {
+      ...props,
+      className: cx("\u{1F95D}-accordion-item-button", props.className),
+      ref: forwardedRef
+    }
+  )
+);
+DEV: AccordionItemButton.displayName = "AccordionItem.Button";
+const AccordionItemLabel = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...props,
+      variant: "body-sm",
+      className: cx("\u{1F95D}-accordion-item-label", props.className),
+      ref: forwardedRef
+    }
+  )
+);
+DEV: AccordionItemLabel.displayName = "AccordionItem.Label";
+const AccordionItemDecoration = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    Role,
+    {
+      ...props,
+      className: cx("\u{1F95D}-accordion-item-decoration", props.className),
+      ref: forwardedRef
+    }
+  )
+);
+DEV: AccordionItemDecoration.displayName = "AccordionItem.Decoration";
+const AccordionItemMarker = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    IconButtonPresentation,
+    {
+      ...props,
+      variant: "ghost",
+      className: cx("\u{1F95D}-accordion-item-marker", props.className),
+      ref: forwardedRef,
+      children: props.children ?? /* @__PURE__ */ jsx(
+        ChevronDown,
+        {
+          "aria-hidden": "true",
+          className: "\u{1F95D}-accordion-item-marker-chevron"
+        }
+      )
+    }
+  )
+);
+DEV: AccordionItemMarker.displayName = "AccordionItem.Marker";
+const AccordionItemContent = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    DisclosureContent,
+    {
+      ...props,
+      className: cx("\u{1F95D}-accordion-item-content", props.className),
+      ref: forwardedRef
+    }
+  )
+);
+DEV: AccordionItemContent.displayName = "AccordionItem.Content";
+const AccordionItemHeading = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...props,
+      variant: "body-sm",
+      className: cx("\u{1F95D}-accordion-item-heading", props.className),
+      ref: forwardedRef
+    }
+  )
+);
+DEV: AccordionItemHeading.displayName = "AccordionItem.Heading";
+export {
+  AccordionItemButton as Button,
+  AccordionItemContent as Content,
+  AccordionItemDecoration as Decoration,
+  AccordionItemHeader as Header,
+  AccordionItemHeading as Heading,
+  AccordionItemLabel as Label,
+  AccordionItemMarker as Marker,
+  AccordionItemRoot as Root
+};

package/dist/DEV/Banner.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import { IconButton, Text } from "@stratakit/bricks";
+import { GhostAligner } from "@stratakit/bricks/secret-internals";
+import { Icon } from "@stratakit/foundations";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import * as React from "react";
+import { Dismiss, StatusIcon } from "./~utils.icons.js";
+const Banner = forwardRef((props, forwardedRef) => {
+  const {
+    message,
+    label,
+    actions,
+    onDismiss,
+    tone = "neutral",
+    icon = tone !== "neutral" ? /* @__PURE__ */ jsx(StatusIcon, { tone }) : void 0,
+    variant = "outline",
+    ...rest
+  } = props;
+  const baseId = React.useId();
+  const labelId = `${baseId}-label`;
+  const dismissId = `${baseId}-dismiss`;
+  return /* @__PURE__ */ jsxs(
+    Role,
+    {
+      ...rest,
+      "data-kiwi-tone": tone,
+      "data-kiwi-variant": variant,
+      className: cx("\u{1F95D}-banner", props.className),
+      ref: forwardedRef,
+      children: [
+        icon ? /* @__PURE__ */ jsx(
+          Icon,
+          {
+            className: "\u{1F95D}-banner-icon",
+            href: typeof icon === "string" ? icon : void 0,
+            render: React.isValidElement(icon) ? icon : void 0
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            className: "\u{1F95D}-banner-label",
+            id: labelId,
+            variant: "body-sm",
+            render: React.isValidElement(label) ? label : /* @__PURE__ */ jsx("span", {}),
+            children: !React.isValidElement(label) ? label : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { render: /* @__PURE__ */ jsx("div", {}), variant: "body-sm", className: "\u{1F95D}-banner-message", children: message }),
+        actions != null ? /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-banner-actions", children: actions }) : null,
+        onDismiss ? /* @__PURE__ */ jsx(GhostAligner, { align: "block", children: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            id: dismissId,
+            className: "\u{1F95D}-banner-dismiss-button",
+            variant: "ghost",
+            label: "Dismiss",
+            "aria-labelledby": `${dismissId} ${labelId}`,
+            icon: /* @__PURE__ */ jsx(Dismiss, {}),
+            onClick: onDismiss
+          }
+        ) }) : null
+      ]
+    }
+  );
+});
+DEV: Banner.displayName = "Banner";
+export {
+  Banner
+};

package/dist/DEV/Chip.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import { IconButton } from "@stratakit/bricks";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import * as React from "react";
+import { Dismiss } from "./~utils.icons.js";
+const Chip = forwardRef((props, forwardedRef) => {
+  const { variant = "solid", onDismiss, label, ...rest } = props;
+  const baseId = React.useId();
+  const labelId = `${baseId}-label`;
+  const dismissIconId = `${baseId}-dismiss`;
+  return /* @__PURE__ */ jsxs(
+    Role.div,
+    {
+      "data-kiwi-variant": variant,
+      ...rest,
+      className: cx("\u{1F95D}-chip", props.className),
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx("span", { id: labelId, children: label }),
+        onDismiss && /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            id: dismissIconId,
+            className: "\u{1F95D}-chip-dismiss-button",
+            variant: "ghost",
+            "aria-labelledby": `${dismissIconId} ${labelId}`,
+            label: "Dismiss",
+            labelVariant: "visually-hidden",
+            icon: /* @__PURE__ */ jsx(Dismiss, {}),
+            onClick: onDismiss
+          }
+        )
+      ]
+    }
+  );
+});
+DEV: Chip.displayName = "Chip";
+export {
+  Chip
+};

package/dist/DEV/DropdownMenu.js

@@ -0,0 +1,235 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button as ButtonAk } from "@ariakit/react/button";
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItemCheckbox,
+  MenuProvider,
+  useMenuContext
+} from "@ariakit/react/menu";
+import { usePopoverContext } from "@ariakit/react/popover";
+import { useStoreState } from "@ariakit/react/store";
+import { Button, Kbd } from "@stratakit/bricks";
+import {
+  DisclosureArrow,
+  Dot,
+  predefinedSymbols
+} from "@stratakit/bricks/secret-internals";
+import { Icon } from "@stratakit/foundations";
+import {
+  forwardRef,
+  usePopoverApi
+} from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import * as React from "react";
+import * as ListItem from "./~utils.ListItem.js";
+import { Checkmark } from "./~utils.icons.js";
+function DropdownMenuRoot(props) {
+  const {
+    children,
+    placement,
+    open: openProp,
+    setOpen: setOpenProp,
+    defaultOpen: defaultOpenProp
+  } = props;
+  return /* @__PURE__ */ jsx(
+    MenuProvider,
+    {
+      placement,
+      defaultOpen: defaultOpenProp,
+      open: openProp,
+      setOpen: setOpenProp,
+      popover: usePopoverContext(),
+      children
+    }
+  );
+}
+DEV: DropdownMenuRoot.displayName = "DropdownMenu.Root";
+const DropdownMenuContent = forwardRef(
+  (props, forwardedRef) => {
+    const popover = usePopoverApi(useMenuContext());
+    return /* @__PURE__ */ jsx(
+      Menu,
+      {
+        portal: true,
+        unmountOnHide: true,
+        ...props,
+        gutter: 4,
+        style: { ...popover.style, ...props.style },
+        wrapperProps: popover.wrapperProps,
+        className: cx("\u{1F95D}-dropdown-menu", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: DropdownMenuContent.displayName = "DropdownMenu.Content";
+const DropdownMenuButton = forwardRef(
+  (props, forwardedRef) => {
+    const { accessibleWhenDisabled = true, children, ...rest } = props;
+    const open = useStoreState(useMenuContext(), (state) => state?.open);
+    return /* @__PURE__ */ jsx(
+      MenuButton,
+      {
+        accessibleWhenDisabled: true,
+        render: /* @__PURE__ */ jsxs(Button, { accessibleWhenDisabled, children: [
+          children,
+          /* @__PURE__ */ jsx(DisclosureArrow, {})
+        ] }),
+        ...rest,
+        className: cx("\u{1F95D}-dropdown-menu-button", props.className),
+        "data-has-popover-open": open || void 0,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: DropdownMenuButton.displayName = "DropdownMenu.Button";
+const DropdownMenuItem = forwardRef(
+  (props, forwardedRef) => {
+    const { label, shortcuts, icon, unstable_dot, ...rest } = props;
+    const dotId = React.useId();
+    return /* @__PURE__ */ jsxs(
+      MenuItem,
+      {
+        accessibleWhenDisabled: true,
+        render: /* @__PURE__ */ jsx(
+          ListItem.Root,
+          {
+            render: /* @__PURE__ */ jsx(
+              ButtonAk,
+              {
+                accessibleWhenDisabled: true,
+                "aria-describedby": dotId,
+                ...rest,
+                className: cx("\u{1F95D}-dropdown-menu-item", props.className),
+                ref: forwardedRef
+              }
+            )
+          }
+        ),
+        children: [
+          icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
+          /* @__PURE__ */ jsx(ListItem.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
+          shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null,
+          unstable_dot ? /* @__PURE__ */ jsx(
+            ListItem.Decoration,
+            {
+              render: /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}-dropdown-menu-item-dot", children: unstable_dot })
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+DEV: DropdownMenuItem.displayName = "DropdownMenu.Item";
+const DropdownMenuItemShortcuts = forwardRef((props, forwardedRef) => {
+  const { shortcuts, ...rest } = props;
+  const shortcutKeys = React.useMemo(() => {
+    return shortcuts.split("+").map((key) => ({
+      key: key.trim(),
+      isSymbol: key in predefinedSymbols
+    }));
+  }, [shortcuts]);
+  return /* @__PURE__ */ jsx(
+    ListItem.Decoration,
+    {
+      render: /* @__PURE__ */ jsx("span", {}),
+      ...rest,
+      className: cx("\u{1F95D}-dropdown-menu-item-shortcuts", props.className),
+      ref: forwardedRef,
+      children: shortcutKeys.map(({ key, isSymbol }, index) => {
+        if (isSymbol) {
+          return /* @__PURE__ */ jsx(
+            Kbd,
+            {
+              variant: "ghost",
+              symbol: key
+            },
+            `${key + index}`
+          );
+        }
+        return /* @__PURE__ */ jsx(Kbd, { variant: "ghost", children: key }, `${key + index}`);
+      })
+    }
+  );
+});
+DEV: DropdownMenuItemShortcuts.displayName = "DropdownMenuItemShortcuts";
+const DropdownMenuIcon = forwardRef(
+  (props, forwardedRef) => {
+    const { icon, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      ListItem.Decoration,
+      {
+        render: /* @__PURE__ */ jsx(
+          Icon,
+          {
+            href: typeof icon === "string" ? icon : void 0,
+            render: React.isValidElement(icon) ? icon : void 0,
+            ...rest,
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  }
+);
+DEV: DropdownMenuIcon.displayName = "DropdownMenuIcon";
+const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    icon,
+    defaultChecked,
+    checked,
+    onChange,
+    name,
+    value = defaultChecked ? "on" : void 0,
+    // For defaultChecked to work
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    MenuItemCheckbox,
+    {
+      accessibleWhenDisabled: true,
+      defaultChecked,
+      checked,
+      name,
+      value,
+      onChange,
+      render: /* @__PURE__ */ jsx(
+        ListItem.Root,
+        {
+          render: /* @__PURE__ */ jsx(
+            ButtonAk,
+            {
+              accessibleWhenDisabled: true,
+              ...rest,
+              className: cx("\u{1F95D}-dropdown-menu-item", props.className),
+              ref: forwardedRef
+            }
+          )
+        }
+      ),
+      children: [
+        icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
+        /* @__PURE__ */ jsx(ListItem.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
+        /* @__PURE__ */ jsx(
+          ListItem.Decoration,
+          {
+            render: /* @__PURE__ */ jsx(Checkmark, { className: "\u{1F95D}-dropdown-menu-checkmark" })
+          }
+        )
+      ]
+    }
+  );
+});
+DEV: DropdownMenuCheckboxItem.displayName = "DropdownMenu.CheckboxItem";
+export {
+  DropdownMenuButton as Button,
+  DropdownMenuCheckboxItem as CheckboxItem,
+  DropdownMenuContent as Content,
+  DropdownMenuItem as Item,
+  DropdownMenuRoot as Root
+};

package/dist/DEV/ErrorRegion.js

@@ -0,0 +1,170 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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 cx from "classnames";
+import * as React from "react";
+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}error-region-pulse";
+      const animations = el.getAnimations({ subtree: true });
+      if (animations.find((animation) => animation.id === id)) return;
+      el.animate(
+        [
+          {
+            boxShadow: "0 0 0 0 var(--ids-color-border-attention-base)",
+            opacity: 1
+          },
+          {
+            boxShadow: "0 0 15px 2px var(--ids-color-border-attention-base)",
+            opacity: 0.7,
+            offset: 0.5
+          },
+          {
+            boxShadow: "0 0 0 0 var(--ids-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 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}-error-region", props.className),
+          "data-kiwi-visible": !!label,
+          "data-kiwi-expanded": open,
+          ref: forwardedRef,
+          children: /* @__PURE__ */ jsxs("div", { className: "\u{1F95D}-error-region-container", ref: containerRef, children: [
+            /* @__PURE__ */ jsxs(
+              DialogDisclosure,
+              {
+                className: "\u{1F95D}-error-region-header",
+                render: /* @__PURE__ */ jsx(Button, { variant: "ghost" }),
+                children: [
+                  /* @__PURE__ */ jsx(StatusIcon, { tone: "attention", className: "\u{1F95D}-error-region-icon" }),
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      render: /* @__PURE__ */ jsx("span", {}),
+                      id: labelId,
+                      className: "\u{1F95D}-error-region-label",
+                      variant: "body-sm",
+                      children: label
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(IconButtonPresentation, { inert: true, variant: "ghost", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Dialog,
+              {
+                className: "\u{1F95D}-error-region-dialog",
+                portal: false,
+                modal: false,
+                autoFocusOnShow: false,
+                "aria-labelledby": labelId,
+                children: /* @__PURE__ */ jsx(
+                  Collection,
+                  {
+                    store,
+                    className: "\u{1F95D}-error-region-items",
+                    role: "list",
+                    children: items
+                  }
+                )
+              }
+            )
+          ] })
+        }
+      ) })
+    ] });
+  }
+);
+DEV: ErrorRegionRoot.displayName = "ErrorRegion.Root";
+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}-error-region-item", props.className),
+        ref: forwardedRef,
+        children: [
+          /* @__PURE__ */ jsx(Text, { id: messageId, variant: "body-sm", children: message }),
+          /* @__PURE__ */ jsx("div", { className: "\u{1F95D}-error-region-item-actions", children: actions })
+        ]
+      }
+    );
+  }
+);
+DEV: ErrorRegionItem.displayName = "ErrorRegion.Item";
+export {
+  ErrorRegionItem as Item,
+  ErrorRegionRoot as Root
+};