@stratakit/structures 0.1.0 → 0.1.1

package/dist/DEV/Tree.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { Composite, useCompositeStore } from "@ariakit/react/composite";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import { Action as TreeItemAction, Root as TreeItemRoot } from "./TreeItem.js";
+const Tree = forwardRef((props, forwardedRef) => {
+  const composite = useCompositeStore({ orientation: "vertical" });
+  return /* @__PURE__ */ jsx(
+    Role.div,
+    {
+      role: "tree",
+      ...props,
+      render: /* @__PURE__ */ jsx(Composite, { store: composite }),
+      className: cx("\u{1F95D}-tree", props.className),
+      ref: forwardedRef,
+      children: props.children
+    }
+  );
+});
+DEV: Tree.displayName = "Tree.Root";
+export {
+  TreeItemRoot as Item,
+  TreeItemAction as ItemAction,
+  Tree as Root
+};

package/dist/DEV/TreeItem.js

@@ -0,0 +1,395 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CompositeItem } from "@ariakit/react/composite";
+import { PopoverProvider } from "@ariakit/react/popover";
+import { Role } from "@ariakit/react/role";
+import { Toolbar, ToolbarItem } from "@ariakit/react/toolbar";
+import { IconButton } from "@stratakit/bricks";
+import {
+  GhostAligner,
+  IconButtonPresentation
+} from "@stratakit/bricks/secret-internals";
+import { Icon } from "@stratakit/foundations";
+import {
+  forwardRef,
+  useEventHandlers
+} from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import * as React from "react";
+import * as DropdownMenu from "./DropdownMenu.js";
+import * as ListItem from "./~utils.ListItem.js";
+import { ChevronDown, MoreHorizontal, StatusIcon } from "./~utils.icons.js";
+const TreeItemErrorContext = React.createContext(void 0);
+const TreeItemActionsContext = React.createContext(void 0);
+const TreeItemDecorationsContext = React.createContext(void 0);
+const TreeItemIconContext = React.createContext(void 0);
+const TreeItemDecorationIdContext = React.createContext(
+  void 0
+);
+const TreeItemLabelContext = React.createContext(void 0);
+const TreeItemLabelIdContext = React.createContext(
+  void 0
+);
+const TreeItemDescriptionContext = React.createContext(void 0);
+const TreeItemDescriptionIdContext = React.createContext(
+  void 0
+);
+const TreeItemInlineActionsContext = React.createContext(void 0);
+const TreeItemOverflowActionsContext = React.createContext(void 0);
+const TreeItemHasOverflowActionsContext = React.createContext(false);
+const TreeItem = React.memo(
+  forwardRef((props, forwardedRef) => {
+    const { expanded, selected } = props;
+    const {
+      onSelectedChange,
+      onExpandedChange,
+      icon,
+      unstable_decorations,
+      label,
+      description,
+      actions,
+      onClick: onClickProp,
+      onKeyDown: onKeyDownProp,
+      ...rest
+    } = props;
+    const onExpanderClick = useEventHandlers(() => {
+      if (expanded === void 0) return;
+      onExpandedChange?.(!expanded);
+    });
+    const handleClick = (event) => {
+      if (selected === void 0) return;
+      event.stopPropagation();
+      onSelectedChange?.(!selected);
+    };
+    const handleKeyDown = (event) => {
+      if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
+        return;
+      }
+      if (expanded === void 0) return;
+      if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+        event.preventDefault();
+        onExpandedChange?.(event.key === "ArrowRight");
+      }
+    };
+    return /* @__PURE__ */ jsx(TreeItemRootProvider, { ...props, children: /* @__PURE__ */ jsx(
+      TreeItemRoot,
+      {
+        ...rest,
+        onClick: useEventHandlers(onClickProp, handleClick),
+        onKeyDown: useEventHandlers(onKeyDownProp, handleKeyDown),
+        ref: forwardedRef,
+        children: React.useMemo(
+          () => /* @__PURE__ */ jsx(
+            TreeItemNode,
+            {
+              onExpanderClick,
+              expanded,
+              selected
+            }
+          ),
+          [onExpanderClick, expanded, selected]
+        )
+      }
+    ) });
+  })
+);
+DEV: TreeItem.displayName = "Tree.Item";
+function TreeItemRootProvider(props) {
+  const {
+    actions,
+    label,
+    description,
+    icon: iconProp,
+    unstable_decorations: decorations,
+    error
+  } = props;
+  const labelId = React.useId();
+  const descriptionId = React.useId();
+  const decorationId = React.useId();
+  const icon = error ? /* @__PURE__ */ jsx(StatusIcon, { tone: "attention" }) : iconProp;
+  const hasDecoration = icon || decorations;
+  return /* @__PURE__ */ jsx(TreeItemErrorContext.Provider, { value: error, children: /* @__PURE__ */ jsx(TreeItemActionsContext.Provider, { value: actions, children: /* @__PURE__ */ jsx(
+    TreeItemDecorationIdContext.Provider,
+    {
+      value: hasDecoration ? decorationId : void 0,
+      children: /* @__PURE__ */ jsx(TreeItemDecorationsContext.Provider, { value: decorations, children: /* @__PURE__ */ jsx(TreeItemIconContext.Provider, { value: icon, children: /* @__PURE__ */ jsx(TreeItemLabelIdContext.Provider, { value: labelId, children: /* @__PURE__ */ jsx(TreeItemLabelContext.Provider, { value: label, children: /* @__PURE__ */ jsx(TreeItemDescriptionContext.Provider, { value: description, children: /* @__PURE__ */ jsx(
+        TreeItemDescriptionIdContext.Provider,
+        {
+          value: description ? descriptionId : void 0,
+          children: props.children
+        }
+      ) }) }) }) }) })
+    }
+  ) }) });
+}
+DEV: TreeItemRootProvider.displayName = "TreeItemRootProvider";
+const TreeItemRoot = React.memo(
+  forwardRef((props, forwardedRef) => {
+    const {
+      style: styleProp,
+      "aria-level": level,
+      selected,
+      expanded,
+      ...rest
+    } = props;
+    const labelId = React.useContext(TreeItemLabelIdContext);
+    const decorationId = React.useContext(TreeItemDecorationIdContext);
+    const descriptionId = React.useContext(TreeItemDescriptionIdContext);
+    const error = React.useContext(TreeItemErrorContext);
+    const errorId = typeof error === "string" ? error : void 0;
+    const describedBy = React.useMemo(() => {
+      const ids = [];
+      if (descriptionId) ids.push(descriptionId);
+      if (decorationId) ids.push(decorationId);
+      if (errorId) ids.push(errorId);
+      return ids.length > 0 ? ids.join(" ") : void 0;
+    }, [decorationId, descriptionId, errorId]);
+    const style = React.useMemo(
+      () => ({
+        ...styleProp,
+        "--\u{1F95D}tree-item-level": level
+      }),
+      [styleProp, level]
+    );
+    return /* @__PURE__ */ jsx(
+      CompositeItem,
+      {
+        render: /* @__PURE__ */ jsx(
+          Role,
+          {
+            ...rest,
+            role: "treeitem",
+            "aria-expanded": expanded,
+            "aria-selected": selected,
+            "aria-labelledby": labelId,
+            "aria-describedby": describedBy,
+            "aria-level": level,
+            className: cx("\u{1F95D}-tree-item", props.className),
+            style,
+            ref: forwardedRef
+          }
+        ),
+        children: props.children
+      }
+    );
+  })
+);
+DEV: TreeItemRoot.displayName = "TreeItemRoot";
+const TreeItemNode = React.memo((props) => {
+  const { expanded, selected, onExpanderClick } = props;
+  const error = React.useContext(TreeItemErrorContext);
+  return /* @__PURE__ */ jsxs(
+    ListItem.Root,
+    {
+      "data-kiwi-expanded": expanded,
+      "data-kiwi-selected": selected,
+      "data-kiwi-error": error ? true : void 0,
+      className: "\u{1F95D}-tree-item-node",
+      role: void 0,
+      children: [
+        /* @__PURE__ */ jsx(TreeItemDecorations, { onExpanderClick }),
+        /* @__PURE__ */ jsx(TreeItemContent, {}),
+        /* @__PURE__ */ jsx(TreeItemDescription, {}),
+        /* @__PURE__ */ jsx(TreeItemActions, {})
+      ]
+    }
+  );
+});
+DEV: TreeItemNode.displayName = "TreeItemNode";
+const TreeItemDecorations = React.memo((props) => {
+  return /* @__PURE__ */ jsxs(ListItem.Decoration, { children: [
+    /* @__PURE__ */ jsx(TreeItemExpander, { onClick: props.onExpanderClick }),
+    /* @__PURE__ */ jsx(TreeItemDecoration, {})
+  ] });
+});
+DEV: TreeItemDecorations.displayName = "TreeItemDecorations";
+function TreeItemDecoration() {
+  const decorationId = React.useContext(TreeItemDecorationIdContext);
+  const decorations = React.useContext(TreeItemDecorationsContext);
+  const icon = React.useContext(TreeItemIconContext);
+  return icon || decorations ? /* @__PURE__ */ jsx(
+    Role,
+    {
+      className: "\u{1F95D}-tree-item-decoration",
+      id: decorationId,
+      render: React.isValidElement(icon) ? icon : typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : void 0,
+      children: !icon ? decorations : null
+    }
+  ) : null;
+}
+DEV: TreeItemDecoration.displayName = "TreeItemDecoration";
+const TreeItemContent = React.memo(() => {
+  const labelId = React.useContext(TreeItemLabelIdContext);
+  const label = React.useContext(TreeItemLabelContext);
+  return /* @__PURE__ */ jsx(ListItem.Content, { id: labelId, className: "\u{1F95D}-tree-item-content", children: label });
+});
+DEV: TreeItemContent.displayName = "TreeItemContent";
+const TreeItemDescription = React.memo(() => {
+  const description = React.useContext(TreeItemDescriptionContext);
+  const descriptionId = React.useContext(TreeItemDescriptionIdContext);
+  return description ? /* @__PURE__ */ jsx(ListItem.Content, { id: descriptionId, className: "\u{1F95D}-tree-item-description", children: description }) : void 0;
+});
+DEV: TreeItemDescription.displayName = "TreeItemDescription";
+const TreeItemActions = React.memo(
+  forwardRef((props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(TreeItemActionsProvider, { children: /* @__PURE__ */ jsx(
+      ListItem.Decoration,
+      {
+        ...props,
+        onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
+        onKeyDown: useEventHandlers(
+          props.onKeyDown,
+          (e) => e.stopPropagation()
+        ),
+        className: cx("\u{1F95D}-tree-item-actions-container", props.className),
+        ref: forwardedRef,
+        render: /* @__PURE__ */ jsxs(Toolbar, { focusLoop: false, children: [
+          /* @__PURE__ */ jsx(TreeItemInlineActions, {}),
+          /* @__PURE__ */ jsx(TreeItemActionsOverflowMenu, {})
+        ] })
+      }
+    ) });
+  })
+);
+DEV: TreeItemActions.displayName = "TreeItemActions";
+function TreeItemActionsProvider(props) {
+  const actionsProp = React.useContext(TreeItemActionsContext);
+  const error = React.useContext(TreeItemErrorContext);
+  const actionsLimit = error ? 2 : 3;
+  const { inline, overflow } = React.useMemo(() => {
+    const actions = React.Children.toArray(actionsProp).filter(Boolean);
+    const inline2 = /* @__PURE__ */ jsxs(Fragment, { children: [
+      actions.slice(0, actionsLimit - 1),
+      actions.length === actionsLimit ? actions[actionsLimit - 1] : null
+    ] });
+    const overflow2 = actions.length > actionsLimit ? actions.slice(actionsLimit - 1) : void 0;
+    return { inline: inline2, overflow: overflow2 };
+  }, [actionsProp, actionsLimit]);
+  return /* @__PURE__ */ jsx(TreeItemInlineActionsContext.Provider, { value: inline, children: /* @__PURE__ */ jsx(TreeItemOverflowActionsContext.Provider, { value: overflow, children: /* @__PURE__ */ jsx(TreeItemHasOverflowActionsContext.Provider, { value: !!overflow, children: props.children }) }) });
+}
+DEV: TreeItemActionsProvider.displayName = "TreeItemActionsProvider";
+function TreeItemInlineActions() {
+  const actions = React.useContext(TreeItemInlineActionsContext);
+  return actions;
+}
+DEV: TreeItemInlineActions.displayName = "TreeItemInlineActions";
+const arrowKeys = ["ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
+const TreeItemActionsOverflowMenuContext = React.createContext(false);
+function TreeItemActionsOverflowMenu() {
+  const overflow = React.useContext(TreeItemHasOverflowActionsContext);
+  const [open, setOpen] = React.useState(false);
+  const isArrowKeyPressed = React.useRef(false);
+  if (!overflow) return null;
+  return /* @__PURE__ */ jsx(PopoverProvider, { placement: "right-start", children: /* @__PURE__ */ jsxs(
+    DropdownMenu.Root,
+    {
+      open,
+      setOpen: React.useCallback((value) => {
+        if (value && !isArrowKeyPressed.current) {
+          setOpen(true);
+        } else {
+          setOpen(false);
+        }
+      }, []),
+      children: [
+        /* @__PURE__ */ jsx(
+          DropdownMenu.Button,
+          {
+            onKeyDown: (e) => {
+              if (arrowKeys.includes(e.key)) {
+                isArrowKeyPressed.current = true;
+              }
+              queueMicrotask(() => {
+                isArrowKeyPressed.current = false;
+              });
+            },
+            render: /* @__PURE__ */ jsx(TreeItemAction, { label: "More", icon: /* @__PURE__ */ jsx(MoreHorizontal, {}) })
+          }
+        ),
+        /* @__PURE__ */ jsx(TreeItemActionsOverflowMenuContext.Provider, { value: true, children: /* @__PURE__ */ jsx(TreeItemActionsOverflowMenuContent, {}) })
+      ]
+    }
+  ) });
+}
+DEV: TreeItemActionsOverflowMenu.displayName = "TreeItemActionsOverflowMenu";
+function TreeItemActionsOverflowMenuContent() {
+  const actions = React.useContext(TreeItemOverflowActionsContext);
+  return /* @__PURE__ */ jsx(DropdownMenu.Content, { children: actions });
+}
+DEV: TreeItemActionsOverflowMenu.displayName = "TreeItemActionsOverflowMenu";
+const TreeItemAction = React.memo(
+  forwardRef((props, forwardedRef) => {
+    const error = React.useContext(TreeItemErrorContext);
+    const {
+      visible = error ? true : void 0,
+      // visible by default during error state
+      label,
+      icon,
+      dot,
+      ...rest
+    } = props;
+    if (React.useContext(TreeItemActionsOverflowMenuContext)) {
+      DEV: {
+        if (visible !== void 0)
+          console.warn("overflowing actions should not use `visible` prop");
+      }
+      return /* @__PURE__ */ jsx(
+        DropdownMenu.Item,
+        {
+          ...rest,
+          label,
+          icon,
+          unstable_dot: dot,
+          ref: forwardedRef
+        }
+      );
+    }
+    DEV: {
+      if (!icon)
+        throw new Error(
+          "`icon` prop is required when the action is displayed as a button"
+        );
+    }
+    return /* @__PURE__ */ jsx(
+      ToolbarItem,
+      {
+        render: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            label,
+            icon,
+            inert: visible === false ? true : void 0,
+            ...rest,
+            dot,
+            variant: "ghost",
+            className: cx("\u{1F95D}-tree-item-action", props.className),
+            "data-kiwi-visible": visible,
+            ref: forwardedRef
+          }
+        )
+      }
+    );
+  })
+);
+DEV: TreeItemAction.displayName = "TreeItem.Action";
+const TreeItemExpander = forwardRef(
+  (props, forwardedRef) => {
+    const descriptionId = React.useContext(TreeItemDescriptionIdContext);
+    return /* @__PURE__ */ jsx(GhostAligner, { align: descriptionId ? "block" : void 0, children: /* @__PURE__ */ jsx(
+      IconButtonPresentation,
+      {
+        "aria-hidden": "true",
+        ...props,
+        onClick: useEventHandlers(props.onClick, (e) => e.stopPropagation()),
+        className: cx("\u{1F95D}-tree-item-expander", props.className),
+        variant: "ghost",
+        ref: forwardedRef,
+        children: /* @__PURE__ */ jsx(ChevronDown, {})
+      }
+    ) });
+  }
+);
+DEV: TreeItemExpander.displayName = "TreeItemExpander";
+export {
+  TreeItemAction as Action,
+  TreeItem as Root
+};

package/dist/DEV/index.js

@@ -0,0 +1,21 @@
+"use client";
+import * as unstable_AccordionItem from "./AccordionItem.js";
+import { Banner } from "./Banner.js";
+import { Chip } from "./Chip.js";
+import * as DropdownMenu from "./DropdownMenu.js";
+import * as unstable_ErrorRegion from "./ErrorRegion.js";
+import * as Table from "./Table.js";
+import * as Tabs from "./Tabs.js";
+import * as unstable_Toolbar from "./Toolbar.js";
+import * as Tree from "./Tree.js";
+export {
+  Chip,
+  DropdownMenu,
+  Table,
+  Tabs,
+  Tree,
+  unstable_AccordionItem,
+  Banner as unstable_Banner,
+  unstable_ErrorRegion,
+  unstable_Toolbar
+};

package/dist/DEV/styles.css.js

@@ -1,5 +1,5 @@
 // inline-css:/home/runner/work/design-system/design-system/packages/structures/src/styles.css
-var styles_default = String.raw``;
+var styles_default = String.raw`@layer itwinui.components{@layer base{.🥝-list-item{cursor:pointer;line-height:1.2;font-size:var(--ids-font-size-12);min-block-size:var(--🥝list-item-height,1.75rem);background-color:var(--🥝list-item-background-color);--🥝list-item-background-color:var(--🌀list-item-state--default,transparent)var(--🌀list-item-state--hover,var(--ids-color-bg-glow-on-surface-neutral-hover))var(--🌀list-item-state--pressed,var(--ids-color-bg-glow-on-surface-neutral-pressed))var(--🌀list-item-state--active,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--active-hover,var(--ids-color-bg-glow-on-surface-accent-pressed))var(--🌀list-item-state--disabled,transparent);color:var(--🥝list-item-color,var(--🌀list-item-state--default,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--hover,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--pressed,var(--ids-color-text-neutral-primary))var(--🌀list-item-state--active,var(--ids-color-text-accent-strong))var(--🌀list-item-state--active-hover,var(--ids-color-text-accent-strong))var(--🌀list-item-state--disabled,var(--ids-color-text-neutral-disabled)));--🥝icon-color:var(--🌀list-item-state--default,var(--ids-color-icon-neutral-base))var(--🌀list-item-state--hover,var(--ids-color-icon-neutral-hover))var(--🌀list-item-state--pressed,var(--ids-color-icon-neutral-hover))var(--🌀list-item-state--active,var(--ids-color-icon-accent-strong))var(--🌀list-item-state--active-hover,var(--ids-color-icon-accent-strong))var(--🌀list-item-state--disabled,var(--ids-color-icon-neutral-disabled));grid-template-columns:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];align-content:center;align-items:center;padding-inline:.5rem;display:grid}}@layer states{@media (any-hover:hover){.🥝-list-item:where(:hover){--🌀list-item-state:var(--🌀list-item-state--hover)}}.🥝-list-item:where(:active){--🌀list-item-state:var(--🌀list-item-state--pressed)}.🥝-list-item:where(:disabled,[aria-disabled=true]){--🌀list-item-state:var(--🌀list-item-state--disabled);cursor:not-allowed}}@layer modifiers{.🥝-list-item:where(:has(>:nth-child(2 of .🥝-list-item-content))){--🥝list-item-height:2.75rem;grid-template-rows:repeat(auto-fit,minmax(0,auto))}}@layer base.🌀{.🥝-list-item{--🌀list-item-state:var(--🌀list-item-state--default);--🌀list-item-state--default:var(--🌀list-item-state, );--🌀list-item-state--hover:var(--🌀list-item-state, );--🌀list-item-state--pressed:var(--🌀list-item-state, );--🌀list-item-state--active:var(--🌀list-item-state, );--🌀list-item-state--active-hover:var(--🌀list-item-state, );--🌀list-item-state--disabled:var(--🌀list-item-state, )}}@layer base{.🥝-list-item-content{grid-column:content}}@layer base{.🥝-list-item-decoration{grid-area:1/decoration-before/-1;align-self:start;align-items:center;margin-inline-end:.25rem;display:flex}:where(.🥝-list-item-content)~.🥝-list-item-decoration{grid-column:decoration-after;margin-inline:.25rem 0}}@media (forced-colors:active){.🥝-list-item:where(:disabled,[aria-disabled=true]){color:graytext}}.🥝-accordion-item{--🥝accordion-item-gap:12px;--🥝accordion-item-padding:12px}@layer base{.🥝-accordion-item{contain:paint;border-block-end:1px solid var(--ids-color-border-neutral-muted);grid-template-rows:[trigger-start]auto[trigger-end content-start]auto[content-end];grid-template-columns:[decoration-before-start]auto[decoration-before-end content-start]minmax(0,1fr)[content-end decoration-after-start]auto[decoration-after-end];display:grid}}@layer base{.🥝-accordion-item-trigger{padding:var(--🥝accordion-item-padding);--🥝focus-outline-offset:-4px;cursor:pointer;grid-area:trigger/decoration-before-start/trigger/decoration-after-end;grid-template-columns:inherit;border-radius:12px;align-items:center;display:grid}@supports (grid-template-columns:subgrid){.🥝-accordion-item-trigger{grid-template-columns:subgrid}}}@layer states{.🥝-accordion-item-trigger:where([aria-expanded=true]){--🥝chevron-down-rotate:-.5turn}}@layer base{.🥝-accordion-item-marker{grid-area:1/decoration-after;margin-inline-start:var(--🥝accordion-item-gap);margin-inline-end:calc(-1*var(--🥝ghost-inline-offset))}}@layer states{@media (any-hover:hover){:where(.🥝-accordion-item-trigger:hover) .🥝-accordion-item-marker{--🌀button-state:var(--🌀button-state--hover)}}}@layer base{.🥝-accordion-item-label.🥝-text{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;text-box:cap alphabetic;grid-column:content;font-weight:500}}@layer base{.🥝-accordion-item-content{text-box:cap alphabetic;color:var(--ids-color-text-neutral-secondary);grid-area:content;padding-block-end:var(--🥝accordion-item-padding)}}@layer base{.🥝-accordion-item-decoration{grid-column:decoration-before;margin-inline-end:var(--🥝accordion-item-gap)}}@layer base{.🥝-banner{background-color:var(--🥝banner-color-background);border:1px solid var(--🥝banner-color-border);border-radius:8px;grid-template-columns:[start]auto[content]minmax(0,1fr)[end]auto;align-items:center;inline-size:100%;padding:12px;display:grid}}@layer modifiers{.🥝-banner:where([data-kiwi-variant=outline]){--🥝banner-color-background:var(--ids-color-bg-elevation-base)}.🥝-banner:where([data-kiwi-variant=outline]):where([data-kiwi-tone=neutral]){--🥝banner-color-border:var(--ids-color-border-neutral-base)}.🥝-banner:where([data-kiwi-tone=info]){--🥝banner-color-border:var(--ids-color-border-info-base);--🥝icon-color:var(--ids-color-icon-info-base)}.🥝-banner:where([data-kiwi-tone=positive]){--🥝banner-color-border:var(--ids-color-border-positive-base);--🥝icon-color:var(--ids-color-icon-positive-base)}.🥝-banner:where([data-kiwi-tone=attention]){--🥝banner-color-border:var(--ids-color-border-attention-base);--🥝icon-color:var(--ids-color-icon-attention-base)}.🥝-banner:where([data-kiwi-tone=critical]){--🥝banner-color-border:var(--ids-color-border-critical-base);--🥝icon-color:var(--ids-color-icon-critical-base)}}@layer base{.🥝-banner-icon{grid-area:1/start;align-self:start;margin-inline-end:8px}}@layer base{.🥝-banner-label{grid-column:content;align-self:start;margin-block-end:4px;font-weight:500}}@layer base{.🥝-banner-message{overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;grid-column:content;overflow:hidden}}@layer base{.🥝-banner-actions{flex-wrap:wrap;grid-column:content;justify-self:start;align-items:baseline;gap:8px;margin-block-start:12px;display:flex}}@layer base{.🥝-banner-dismiss-button{grid-area:1/end;align-self:start;margin-inline-start:12px}}@media (forced-colors:active){.🥝-banner{--🥝icon-color:CanvasText}}@layer base{.🥝-chip{isolation:isolate;--🥝chip-padding-inline:.5rem;padding-inline:var(--🥝chip-padding-inline);border:none;border-radius:9999px;align-items:center;min-block-size:1.5rem;display:inline-flex;position:relative}}.🥝-chip:before{z-index:-1;content:"";border-radius:inherit;border:1px solid var(--ids-color-border-neutral-base);pointer-events:none;position:absolute;inset:0}@layer modifiers{.🥝-chip:where([data-kiwi-variant=solid]){background-color:var(--ids-color-bg-neutral-base)}.🥝-chip:where([data-kiwi-variant=outline]){background-color:var(--ids-color-bg-page-base)}}@layer base{.🥝-chip-dismiss-button.🥝-icon-button{border-radius:inherit;margin-inline-end:calc(-1*var(--🥝chip-padding-inline));position:relative}}@layer base{.🥝-dropdown-menu{background-color:var(--ids-color-bg-elevation-level-1);min-inline-size:min(95vi,164px);box-shadow:var(--ids-shadow-surface-xl);border-radius:8px;flex-direction:column;padding:4px;display:flex}@media (forced-colors:active){.🥝-dropdown-menu{border:1px solid canvastext}}}@layer states{.🥝-dropdown-menu-button:where([aria-expanded=true]){--🥝disclosure-arrow-rotate:.5turn}}@layer base{.🥝-dropdown-menu-item.🥝-list-item{border-radius:4px}}@layer states{.🥝-dropdown-menu-item.🥝-list-item:where([role=menuitemcheckbox]:not([aria-checked=true])){--🥝dropdown-menu-checkmark-visibility:hidden}}@layer base{.🥝-dropdown-menu-item-dot.🥝-dot{align-self:center}}@layer base{.🥝-dropdown-menu-checkmark{visibility:var(--🥝dropdown-menu-checkmark-visibility)}}@layer base{.🥝-dropdown-menu-item-shortcuts{margin-inline-start:.5rem}}@layer base{.🥝-error-region{z-index:1;position:relative}}@layer states{.🥝-error-region:where([data-kiwi-expanded=true]){--🥝chevron-down-rotate:-.5turn;--🥝error-region-header-border-end-radius:0}.🥝-error-region:where([data-kiwi-visible=true]){block-size:2.625rem;padding-block:4px;padding-inline:4px}.🥝-error-region:where([data-kiwi-visible=false]){--🥝error-region-container-display:none}}@layer base{.🥝-error-region-container{isolation:isolate;display:var(--🥝error-region-container-display,flex);border:1px solid var(--ids-color-border-attention-base);background-color:var(--ids-color-bg-elevation-base);box-shadow:var(--ids-shadow-surface-sm);border-radius:8px;flex-direction:column;position:relative}@media (prefers-reduced-motion:no-preference){.🥝-error-region-container:before{content:"";border-radius:inherit;z-index:-1;position:absolute;inset:0}}}@layer base{.🥝-error-region-header{border-start-start-radius:7px;border-start-end-radius:7px;border-end-end-radius:var(--🥝error-region-header-border-end-radius,calc(8px - 1px));border-end-start-radius:var(--🥝error-region-header-border-end-radius,calc(8px - 1px));flex-wrap:wrap;min-block-size:2rem;padding-inline:8px 4px;font-weight:400;transition:border-radius 0s linear .15s}}@layer base{.🥝-error-region-icon{--🥝icon-color:var(--ids-color-icon-attention-base)}}@layer base{.🥝-error-region-label{text-align:start;overflow-wrap:break-word;flex:1;max-inline-size:100%}}@layer base{.🥝-error-region-dialog{transition:max-block-size .15s linear,opacity .15s linear;overflow:hidden}}@layer states{.🥝-error-region-dialog:where(:not([data-enter])){opacity:0}@media (prefers-reduced-motion:no-preference){.🥝-error-region-dialog:where(:not([data-enter])){max-block-size:0}}.🥝-error-region-dialog:where([data-enter]){opacity:1}@media (prefers-reduced-motion:no-preference){.🥝-error-region-dialog:where([data-enter]){max-block-size:calc(348px - 2rem)}@supports (interpolate-size:allow-keywords){.🥝-error-region-dialog:where([data-enter]){max-block-size:max-content}}}}@layer base{.🥝-error-region-items{border-block-start:1px solid var(--ids-color-border-page-base);max-block-size:calc(348px - 2rem);overflow:auto}}@layer base{.🥝-error-region-item{flex-direction:column;padding-block:12px;padding-inline:calc(12px + 1rem) 4px;display:flex}.🥝-error-region-item:where(:not(:nth-child(1 of .🥝-error-region-item))){border-block-start:1px solid var(--ids-color-border-page-base)}}@layer base{.🥝-error-region-item-actions{margin-block-start:8px}}@layer base{.🥝-table:where(table){table-layout:fixed;inline-size:100%}}@layer base{.🥝-table-header{color:var(--ids-color-text-neutral-secondary)}}@layer base{.🥝-table-row:where([role=row]){display:flex}}@layer base{.🥝-table-caption,.🥝-table-cell{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;align-content:center;min-block-size:3rem;padding-block:.5rem;padding-inline:1rem .75rem}:is(.🥝-table-caption,.🥝-table-cell):where(th,td){block-size:3rem}}@layer base{.🥝-table-cell{background-color:var(--🌀table-cell-state--default,var(--ids-color-bg-page-base))var(--🌀table-cell-state--hover,color-mix(in oklch,var(--ids-color-bg-page-base)100.0%,var(--ids-color-glow-hue)var(--ids-color-bg-glow-base-hover-\%)));border-block-end:1px solid var(--ids-color-border-neutral-muted);min-inline-size:4rem}.🥝-table-cell:where(:not(th,td)){flex-grow:1;flex-basis:4rem;column-gap:.5rem}.🥝-table-cell:where(th){font-weight:inherit}}@layer states{@media (any-hover:hover){.🥝-table-cell:where(:hover){--🌀table-cell-state:var(--🌀table-cell-state--hover)}:where(.🥝-table-row:hover) .🥝-table-cell:where([role=cell],td){--🌀table-cell-state:var(--🌀table-cell-state--hover)}}}@layer base.🌀{.🥝-table-cell{--🌀table-cell-state:var(--🌀table-cell-state--default);--🌀table-cell-state--default:var(--🌀table-cell-state, );--🌀table-cell-state--hover:var(--🌀table-cell-state, )}}@layer base{.🥝-tab-list{--🥝tab-active-stripe-gap:8px;--🥝tab-active-stripe-size:2px;--🥝tab-padding-inline:4px;gap:8px;display:flex;position:relative}@supports (position-anchor:--foo){.🥝-tab-list:after{content:"";position-anchor:--🥝active-tab;inline-size:calc(anchor-size(inline) - 2*var(--🥝tab-padding-inline));block-size:var(--🥝tab-active-stripe-size);background-color:var(--🥝tab-active-stripe-color);position:absolute;inset-block-end:calc(anchor(end) - var(--🥝tab-active-stripe-gap));inset-inline-start:calc(anchor(start) + var(--🥝tab-padding-inline))}@media (prefers-reduced-motion:no-preference){.🥝-tab-list:after{transition:inset-inline-start .15s ease-in-out,inline-size .15s ease-in-out}}}}@layer modifiers{.🥝-tab-list[aria-orientation=horizontal]{padding-block-end:var(--🥝tab-active-stripe-gap)}.🥝-tab-list:where([data-kiwi-tone=neutral]){--🥝tab-active-stripe-color:var(--ids-color-border-neutral-inverse)}.🥝-tab-list:where([data-kiwi-tone=accent]){--🥝tab-active-stripe-color:var(--ids-color-border-accent-strong)}}@layer base{.🥝-tab{font-size:var(--ids-font-size-12);color:var(--🥝tab-color);background-color:var(--🥝tab-bg);block-size:1.25rem;padding-inline:var(--🥝tab-padding-inline);-webkit-user-select:none;user-select:none;white-space:nowrap;cursor:pointer;border:none;border-radius:4px;transition:background-color .15s ease-out,color .15s ease-out;position:relative}.🥝-tab:before{content:"";inset-inline:0;inset-block:0 calc(var(--🥝tab-active-stripe-gap)*-1);position:absolute}}@layer modifiers{:where(.🥝-tab-list[data-kiwi-tone=neutral]) .🥝-tab{--🥝tab-bg:var(--🌀tab-state--default,transparent)var(--🌀tab-state--hover,var(--ids-color-bg-glow-on-surface-neutral-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--ids-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--ids-color-text-neutral-primary))var(--🌀tab-state--selected,var(--ids-color-text-neutral-primary))var(--🌀tab-state--disabled,var(--ids-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--ids-color-bg-glow-on-surface-neutral-pressed)}:where(.🥝-tab-list[data-kiwi-tone=accent]) .🥝-tab{--🥝tab-bg:var(--🌀tab-state--default,transparent)var(--🌀tab-state--hover,var(--ids-color-bg-glow-on-surface-accent-hover))var(--🌀tab-state--selected,transparent)var(--🌀tab-state--disabled,transparent);--🥝tab-color:var(--🌀tab-state--default,var(--ids-color-text-neutral-tertiary))var(--🌀tab-state--hover,var(--ids-color-text-accent-strong))var(--🌀tab-state--selected,var(--ids-color-text-accent-strong))var(--🌀tab-state--disabled,var(--ids-color-text-neutral-disabled));-webkit-tap-highlight-color:var(--ids-color-bg-glow-on-surface-accent-pressed)}}@layer states{.🥝-tab:where([aria-selected=true]){--🌀tab-state:var(--🌀tab-state--selected);anchor-name:--🥝active-tab}@supports not (anchor-name:--foo){.🥝-tab:where([aria-selected=true]):after{content:"";background-color:var(--🥝tab-active-stripe-color);block-size:var(--🥝tab-active-stripe-size);inset-inline:var(--🥝tab-padding-inline);inset-block:auto calc(var(--🥝tab-active-stripe-gap)*-1);position:absolute}}@media (any-hover:hover){.🥝-tab:where(:hover){--🌀tab-state:var(--🌀tab-state--hover)}}.🥝-tab:where(:disabled,[aria-disabled=true]){--🌀tab-state:var(--🌀tab-state--disabled);--🥝tab-active-stripe-color:var(--ids-color-border-neutral-disabled);cursor:not-allowed;-webkit-tap-highlight-color:transparent}}@layer base.🌀{.🥝-tab{--🌀tab-state:var(--🌀tab-state--default);--🌀tab-state--default:var(--🌀tab-state, );--🌀tab-state--hover:var(--🌀tab-state, );--🌀tab-state--selected:var(--🌀tab-state, );--🌀tab-state--disabled:var(--🌀tab-state, )}}@layer base{.🥝-tab-panel{--🥝focus-outline-offset:-2px}.🥝-tab-panel:not([data-open]){display:none!important}}@media (forced-colors:active){.🥝-tab-list,.🥝-tab{--🥝tab-active-stripe-color:CanvasText}.🥝-tab{--🥝tab-color:CanvasText}.🥝-tab:where([aria-selected=true]){forced-color-adjust:none;--🥝tab-bg:SelectedItem;--🥝tab-color:SelectedItemText}.🥝-tab:where(:disabled,[aria-disabled=true]){--🥝tab-color:GrayText}}@layer base{.🥝-toolbar{background-color:var(--ids-color-bg-page-base);box-shadow:var(--ids-shadow-toolbar-base);border-radius:8px;gap:4px;padding:4px;display:inline-flex}}@media (forced-colors:active){.🥝-toolbar{border:1px solid}}@layer base{.🥝-tree{background-color:var(--ids-color-bg-page-base);align-content:start;display:grid;overflow:auto}}@layer base{.🥝-tree-item{min-inline-size:max-content;position:relative}}@layer states{.🥝-tree-item:focus-visible{isolation:isolate;outline:none}.🥝-tree-item:focus-visible:before{content:"";z-index:1;pointer-events:none;outline:var(--🥝focus-outline);outline-offset:-1px;position:absolute;inset:0}@media (any-hover:hover){.🥝-tree-item:where(:not(:hover,:focus-visible,:has(:focus-visible),:has([data-has-popover-open]))){--🥝tree-item-action-visibility:hidden}@supports not selector(:has(+ *)){.🥝-tree-item{--🥝tree-item-action-visibility:visible}}}}@layer base{.🥝-tree-item-node.🥝-list-item{isolation:isolate;--🥝list-item-color:var(--🥝tree-item-color);padding-inline-start:calc(8px + 6px*(var(--🥝tree-item-level) - 1));padding-inline-end:0;position:relative}}@layer modifiers{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]){--🥝icon-color:var(--ids-color-icon-attention-base);--🥝tree-item-color:var(--ids-color-text-attention-base)}}@layer states{.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected=true]){--🌀list-item-state:var(--🌀list-item-state--active)}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-expanded=false]){--🥝chevron-down-rotate:-.25turn}.🥝-tree-item-node.🥝-list-item:where(:not([data-kiwi-expanded])){--🥝tree-item-expander-visibility:hidden}}@layer base{.🥝-tree-item-content.🥝-list-item-content{white-space:nowrap}}@layer base{.🥝-tree-item-description.🥝-list-item-content{color:var(--🥝tree-item-color,var(--🌀list-item-state--default,var(--ids-color-text-neutral-secondary)))}}@layer base{.🥝-tree-item-actions-container.🥝-list-item-decoration{background-color:var(--ids-color-bg-page-base);visibility:var(--🥝tree-item-actions-container-visibility,var(--🥝tree-item-action-visibility));align-self:stretch;padding-inline-end:4px;display:inline-flex;position:sticky;inset-inline-end:0}.🥝-tree-item-actions-container.🥝-list-item-decoration:before{content:"";background-color:var(--🥝list-item-background-color);z-index:-1;position:absolute;inset:0}}@layer modifiers{.🥝-tree-item-actions-container.🥝-list-item-decoration:where(:has(.🥝-tree-item-action[data-kiwi-visible=true])){--🥝tree-item-actions-container-visibility:visible}}@layer base{.🥝-tree-item-action.🥝-icon-button{visibility:var(--🥝tree-item-action-visibility);transition:visibility 16ms}}@layer modifiers{.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=false]){--🥝tree-item-action-visibility:hidden}.🥝-tree-item-action.🥝-icon-button:where([data-kiwi-visible=true]){--🥝tree-item-action-visibility:visible}}@layer base{.🥝-tree-item-expander.🥝-icon-button{visibility:var(--🥝tree-item-expander-visibility);z-index:1}}@layer base{.🥝-tree-item-decoration{align-items:center;gap:.25rem;display:flex}}@media (forced-colors:active){.🥝-tree-item-node.🥝-list-item{--🥝list-item-background-color:Canvas;--🥝tree-item-color:CanvasText}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true],[data-kiwi-selected=true]){forced-color-adjust:none}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]) .🥝-tree-item-content,.🥝-tree-item-node.🥝-list-item:where([data-kiwi-error=true]) .🥝-tree-item-decoration{color:marktext;background-color:mark}.🥝-tree-item-node.🥝-list-item:where([data-kiwi-selected=true]){--🥝list-item-background-color:SelectedItem;--🥝tree-item-color:SelectedItemText}}}`;
 
 // src/styles.css.ts
 var styles_css_default = styles_default;

package/dist/DEV/~utils.ListItem.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import { Text } from "@stratakit/bricks";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+const ListItem = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Role.div,
+    {
+      role: "listitem",
+      ...props,
+      className: cx("\u{1F95D}-list-item", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+DEV: ListItem.displayName = "ListItem.Root";
+const ListItemContent = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Text,
+      {
+        ...props,
+        variant: "body-sm",
+        className: cx("\u{1F95D}-list-item-content", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: ListItemContent.displayName = "ListItem.Content";
+const ListItemDecoration = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role.div,
+      {
+        ...props,
+        className: cx("\u{1F95D}-list-item-decoration", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: ListItemDecoration.displayName = "ListItem.Decoration";
+export {
+  ListItemContent as Content,
+  ListItemDecoration as Decoration,
+  ListItem as Root
+};

package/dist/DEV/~utils.icons.js

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  createIconFromPath,
+  forwardRef
+} from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+const Checkmark = createIconFromPath(
+  "M13.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L6.5 10.793l6.646-6.647a.5.5 0 0 1 .708 0Z"
+);
+DEV: Checkmark.displayName = "Checkmark";
+const Dismiss = createIconFromPath(
+  "M4.853 4.146a.5.5 0 1 0-.707.708L7.293 8l-3.147 3.146a.5.5 0 0 0 .707.708L8 8.707l3.146 3.147a.5.5 0 0 0 .707-.708L8.707 8l3.146-3.146a.5.5 0 1 0-.707-.708L8 7.293 4.853 4.146Z"
+);
+DEV: Dismiss.displayName = "Dismiss";
+const statusIcons = {
+  positive: createIconFromPath(
+    "M7.748 1.726a.5.5 0 0 1 .504 0l5 2.916a.5.5 0 0 1 .248.432v5.852a.5.5 0 0 1-.248.431l-5 2.917a.5.5 0 0 1-.504 0l-5-2.916a.5.5 0 0 1-.248-.432V5.074a.5.5 0 0 1 .248-.432l5-2.916ZM8.756.862a1.5 1.5 0 0 0-1.512 0l-5 2.917A1.5 1.5 0 0 0 1.5 5.074v5.852a1.5 1.5 0 0 0 .744 1.295l5 2.917a1.5 1.5 0 0 0 1.512 0l5-2.917a1.5 1.5 0 0 0 .744-1.295V5.074a1.5 1.5 0 0 0-.744-1.295l-5-2.917Zm2.139 5.445a.5.5 0 0 0-.79-.614L6.953 9.746l-1.1-1.1a.5.5 0 0 0-.707.708l1.5 1.5a.5.5 0 0 0 .749-.047l3.5-4.5Z"
+  ),
+  attention: createIconFromPath(
+    "M8.354 2.06a.5.5 0 0 0-.708 0L2.061 7.647a.5.5 0 0 0 0 .707l5.585 5.586a.5.5 0 0 0 .708 0l5.585-5.586a.5.5 0 0 0 0-.707L8.354 2.061Zm-1.415-.707a1.5 1.5 0 0 1 2.122 0l5.585 5.586a1.5 1.5 0 0 1 0 2.122l-5.585 5.585a1.5 1.5 0 0 1-2.122 0L1.354 9.061a1.5 1.5 0 0 1 0-2.122l5.585-5.586ZM8.75 10.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8.5 8.5v-3a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0Z"
+  ),
+  critical: createIconFromPath(
+    "M8.252 1.726a.5.5 0 0 0-.504 0l-5 2.916a.5.5 0 0 0-.248.432v5.852a.5.5 0 0 0 .248.431l5 2.917a.5.5 0 0 0 .504 0l5-2.916a.5.5 0 0 0 .248-.432V5.074a.5.5 0 0 0-.248-.432l-5-2.916ZM7.244.862a1.5 1.5 0 0 1 1.512 0l5 2.917a1.5 1.5 0 0 1 .744 1.295v5.852a1.5 1.5 0 0 1-.744 1.295l-5 2.917a1.5 1.5 0 0 1-1.512 0l-5-2.917a1.5 1.5 0 0 1-.744-1.295V5.074a1.5 1.5 0 0 1 .744-1.295l5-2.917ZM8.75 10.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM8.5 5.5a.5.5 0 0 0-1 0v3a.5.5 0 0 0 1 0v-3Z"
+  ),
+  info: createIconFromPath(
+    "M8 2a6 6 0 1 0 0 12A6 6 0 0 0 8 2ZM1 8a7 7 0 1 1 14 0A7 7 0 0 1 1 8Zm5.5-1.5a.5.5 0 0 0 0 1h1v3h-1a.5.5 0 1 0 0 1h3a.5.5 0 0 0 0-1h-1V7a.5.5 0 0 0-.5-.5H6.5Zm1.375-1a.625.625 0 1 0 0-1.25.625.625 0 0 0 0 1.25Z"
+  )
+};
+const StatusIcon = forwardRef(
+  (props, forwardedRef) => {
+    const { tone, ...rest } = props;
+    const Element = statusIcons[tone];
+    return /* @__PURE__ */ jsx(Element, { ...rest, ref: forwardedRef });
+  }
+);
+DEV: StatusIcon.displayName = "StatusIcon";
+const MoreHorizontal = createIconFromPath(
+  "M3 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm6-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm5 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+);
+DEV: MoreHorizontal.displayName = "MoreHorizontal";
+const ChevronDownBase = createIconFromPath(
+  "M4.146 6.146a.5.5 0 0 1 .708 0L8 9.293l3.146-3.147a.5.5 0 0 1 .708.708l-3.5 3.5a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 0 1 0-.708Z"
+);
+const ChevronDown = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    ChevronDownBase,
+    {
+      ...props,
+      className: cx("\u{1F95D}-chevron-down", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+DEV: ChevronDown.displayName = "ChevronDown";
+export {
+  Checkmark,
+  ChevronDown,
+  Dismiss,
+  MoreHorizontal,
+  StatusIcon
+};