@stratakit/structures 0.1.0 → 0.1.1

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,164 @@
+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, expanded, onExpandedChange, ...rest } = props;
+    const labelId = React.useId();
+    const sectionLabelledBy = props["aria-labelledby"] ?? (props["aria-label"] ? void 0 : labelId);
+    const [open, setOpen] = useControlledState(
+      false,
+      expanded,
+      onExpandedChange
+    );
+    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
+};

package/dist/DEV/Table.js

@@ -0,0 +1,151 @@
+import { jsx } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import {
+  useMergedRefs,
+  useSafeContext
+} from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import * as React from "react";
+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,
+    {
+      render: /* @__PURE__ */ jsx("table", {}),
+      ...props,
+      ref: forwardedRef,
+      className: cx("\u{1F95D}-table", props.className)
+    }
+  ) });
+});
+DEV: HtmlTable.displayName = "Table.HtmlTable";
+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)
+      }
+    ) });
+  }
+);
+DEV: CustomTable.displayName = "Table.CustomTable";
+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}-table-header", props.className)
+      }
+    ) });
+  }
+);
+DEV: TableHeader.displayName = "Table.Header";
+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}-table-body", props.className)
+    }
+  );
+});
+DEV: TableBody.displayName = "Table.Body";
+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}-table-row", props.className)
+    }
+  );
+});
+DEV: TableRow.displayName = "Table.Row";
+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}-table-caption", props.className)
+      }
+    );
+  }
+);
+DEV: TableCaption.displayName = "Table.Caption";
+const TableCell = forwardRef((props, forwardedRef) => {
+  const isWithinTableHeader = useSafeContext(TableHeaderContext);
+  const { mode } = useSafeContext(TableContext);
+  const { render, role } = React.useMemo(() => {
+    if (mode === "aria") {
+      return { role: isWithinTableHeader ? "columnheader" : "cell" };
+    }
+    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}-table-cell", props.className)
+    }
+  );
+});
+DEV: TableCell.displayName = "Table.Cell";
+export {
+  TableBody as Body,
+  TableCaption as Caption,
+  TableCell as Cell,
+  CustomTable,
+  TableHeader as Header,
+  HtmlTable,
+  TableRow as Row
+};

package/dist/DEV/Tabs.js

@@ -0,0 +1,66 @@
+import { jsx } from "react/jsx-runtime";
+import * as AkTab from "@ariakit/react/tab";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+function Tabs(props) {
+  const {
+    defaultSelectedId,
+    selectedId,
+    setSelectedId,
+    selectOnMove,
+    children
+  } = props;
+  return /* @__PURE__ */ jsx(
+    AkTab.TabProvider,
+    {
+      defaultSelectedId,
+      selectedId,
+      setSelectedId,
+      selectOnMove,
+      children
+    }
+  );
+}
+DEV: Tabs.displayName = "Tabs.Root";
+const TabList = forwardRef((props, forwardedRef) => {
+  const { tone = "neutral", ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    AkTab.TabList,
+    {
+      ...rest,
+      "data-kiwi-tone": tone,
+      className: cx("\u{1F95D}-tab-list", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+DEV: TabList.displayName = "Tabs.TabList";
+const Tab = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    AkTab.Tab,
+    {
+      accessibleWhenDisabled: true,
+      ...props,
+      className: cx("\u{1F95D}-tab", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+DEV: Tab.displayName = "Tabs.Tab";
+const TabPanel = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    AkTab.TabPanel,
+    {
+      ...props,
+      className: cx("\u{1F95D}-tab-panel", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+DEV: TabPanel.displayName = "Tabs.TabPanel";
+export {
+  Tabs as Root,
+  Tab,
+  TabList,
+  TabPanel
+};

package/dist/DEV/Toolbar.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import * as Toolbar from "@ariakit/react/toolbar";
+import { IconButtonContext } from "@stratakit/bricks/secret-internals";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import * as React from "react";
+const ToolbarGroup = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(IconButtonContext, { value: React.useMemo(() => ({ iconSize: "large" }), []), children: /* @__PURE__ */ jsx(
+    Toolbar.Toolbar,
+    {
+      ...props,
+      className: cx("\u{1F95D}-toolbar", props.className),
+      ref: forwardedRef
+    }
+  ) });
+});
+DEV: ToolbarGroup.displayName = "Toolbar.Group";
+const ToolbarItem = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(Toolbar.ToolbarItem, { ...props, ref: forwardedRef });
+  }
+);
+DEV: ToolbarItem.displayName = "Toolbar.Item";
+export {
+  ToolbarGroup as Group,
+  ToolbarItem as Item
+};