@stratakit/structures 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -1 +1,52 @@
 # Changelog
+
+## 0.2.0
+
+### Breaking changes
+
+- [#720](https://github.com/iTwin/design-system/pull/720): Renamed `onExpandedChange` prop for `unstable_ErrorRegion.Root` to `setOpen`.
+  Renamed `expanded` prop for `unstable_ErrorRegion.Root` to `open`.
+- [#709](https://github.com/iTwin/design-system/pull/709): `unstable_AccordionItem` breaking changes:
+
+  - `AccordionItem.Trigger` renamed to `AccordionItem.Header` and no longer represents the underlying `<button>` element (see `AccordionItem.Label`).
+  - `AccordionItem.Label` must be wrapped with the new `AccordionItem.Button`.
+
+  ```diff
+   <AccordionItem.Root>
+  +  <AccordionItem.Header>
+  -  <AccordionItem.Trigger>
+  +    <AccordionItem.Button>
+  +      <AccordionItem.Label>Label</AccordionItem.Label>
+  +    </AccordionItem.Button>
+  -    <AccordionItem.Label>Label</AccordionItem.Label>
+  +  </AccordionItem.Header>
+  -  </AccordionItem.Trigger>
+     <AccordionItem.Content>Body</AccordionItem.Content>
+   </AccordionItem.Root>
+  ```
+
+- [#720](https://github.com/iTwin/design-system/pull/720): Renamed `onOpenChange` prop for `unstable_AccordionItem.Root` to `setOpen`.
+
+### Non-breaking changes
+
+- [#709](https://github.com/iTwin/design-system/pull/709): Introduce `unstable_AccordionItem.Heading` component for wrapping `unstable_AccordionItem.Button` and `unstable_AccordionItem.Button` which represents the underlying `<button>` element.
+- Updated dependencies:
+  - @stratakit/foundations@0.1.4
+
+## 0.1.1
+
+- [#704](https://github.com/iTwin/design-system/pull/704): The following components have been moved from `@stratakit/bricks` into `@stratakit/structures`.
+
+  - `unstable_AccordionItem`
+  - `unstable_Banner`
+  - `Chip`
+  - `DropdownMenu`
+  - `unstable_ErrorRegion`
+  - `Table`
+  - `Tabs`
+  - `unstable_Toolbar`
+  - `Tree`
+
+- Updated dependencies:
+  - @stratakit/bricks@0.2.0
+  - @stratakit/foundations@0.1.3

package/dist/AccordionItem.d.ts

@@ -0,0 +1,202 @@
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+interface AccordionItemProps extends BaseProps {
+    /**
+     * The accordion item’s initial open state.
+     *
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * The accordion item’s controlled open state.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Callback fired when the accordion item is opened.
+     *
+     * Should be used with the `open` prop.
+     */
+    setOpen?: (open: boolean) => void;
+}
+/**
+ * An item within an accordion. Disclosed content with a label.
+ *
+ * Bare minimum example:
+ * ```tsx
+ * <AccordionItem.Root>
+ *   <AccordionItem.Header>
+ *     <AccordionItem.Button>
+ *       <AccordionItem.Label>Label</AccordionItem.Label>
+ *     </AccordionItem.Button>
+ *     <AccordionItem.Marker />
+ *   </AccordionItem.Header>
+ *   <AccordionItem.Content>Body</AccordionItem.Content>
+ * </AccordionItem.Root>
+ * ```
+ *
+ * If the accordion item discloses a significant section of the page, it may be
+ * desirable to markup its label as a heading for accessibility purposes (e.g.
+ * screen reader users often navigate by heading). For those cases, you can wrap
+ * the `AccordionItem.Button` component with an `AccordionItem.Heading`
+ * component and use its `render` prop for rendering an HTML heading element.
+ * ```tsx
+ * <AccordionItem.Root>
+ *   <AccordionItem.Header>
+ *     <AccordionItem.Heading render={<h2 />}>
+ *       <AccordionItem.Button>
+ *         <AccordionItem.Label>Label</AccordionItem.Label>
+ *       </AccordionItem.Button>
+ *     </AccordionItem.Heading>
+ *     <AccordionItem.Marker />
+ *   </AccordionItem.Header>
+ *   <AccordionItem.Content>Body</AccordionItem.Content>
+ * </AccordionItem.Root>
+ * ```
+ *
+ * Example with a decoration:
+ * ```tsx
+ * <AccordionItem.Root>
+ *   <AccordionItem.Header>
+ *     <AccordionItem.Decoration render={<Icon href={placeholder} />} />
+ *     <AccordionItem.Button>
+ *       <AccordionItem.Label>Label</AccordionItem.Label>
+ *     </AccordionItem.Button>
+ *     <AccordionItem.Marker />
+ *   </AccordionItem.Header>
+ *   <AccordionItem.Content>Body</AccordionItem.Content>
+ * </AccordionItem.Root>
+ * ```
+ */
+declare const AccordionItemRoot: import("react").ForwardRefExoticComponent<AccordionItemProps & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
+/**
+ * The always visible header of an accordion item.
+ *
+ * Must include an `AccordionItem.Button` and `AccordionItem.Marker` as a direct
+ * descendants.
+ *
+ * Example:
+ * ```tsx
+ * <AccordionItem.Root>
+ * 	 <AccordionItem.Header>
+ *     <AccordionItem.Button>
+ *       <AccordionItem.Label>Label</AccordionItem.Label>
+ *     </AccordionItem.Button>
+ *     <AccordionItem.Marker />
+ *   </AccordionItem.Header>
+ *   <AccordionItem.Content>Body</AccordionItem.Content>
+ * </AccordionItem.Root>
+ * ```
+ */
+declare const AccordionItemHeader: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
+/**
+ * The accordion item button.
+ *
+ * Must be a direct descendant of `AccordionItem.Header`.
+ *
+ * Example:
+ * ```tsx
+ * <AccordionItem.Header>
+ *   <AccordionItem.Button>
+ *     <AccordionItem.Label>Label</AccordionItem.Label>
+ *   </AccordionItem.Button>
+ *   <AccordionItem.Marker />
+ * </AccordionItem.Header>
+ * ```
+ */
+declare const AccordionItemButton: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "render"> & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
+/**
+ * An accordion item’s label.
+ *
+ * Must be a descendant of `AccordionItem.Button`.
+ *
+ * Example:
+ * ```tsx
+ * <AccordionItem.Button>
+ *   <AccordionItem.Label>Label</AccordionItem.Label>
+ * </AccordionItem.Button>
+ * ```
+ */
+declare const AccordionItemLabel: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
+/**
+ * The always-visible, optional decoration of an accordion item’s button.
+ *
+ * Use as a direct descendant of `AccordionItem.Header`. This will be visually
+ * presented before the button’s label.
+ *
+ * Example:
+ * ```tsx
+ * <AccordionItem.Header>
+ *   <AccordionItem.Decoration render={<Icon href={placeholder} />} />
+ *   <AccordionItem.Button>
+ *     <AccordionItem.Label>Label</AccordionItem.Label>
+ *   </AccordionItem.Button>
+ *   <AccordionItem.Marker />
+ * </AccordionItem.Header>
+ * ```
+ */
+declare const AccordionItemDecoration: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
+/**
+ * The visual marker of an accordion item’s button.
+ *
+ * Example:
+ * ```tsx
+ * <AccordionItem.Header>
+ *   <AccordionItem.Button>
+ *     <AccordionItem.Label>Label</AccordionItem.Label>
+ *   </AccordionItem.Button>
+ *   <AccordionItem.Marker />
+ * </AccordionItem.Header>
+ * ```
+ *
+ * Pass an icon as a child to override the default chevron icon:
+ * ```tsx
+ * <AccordionItem.Header>
+ *   <AccordionItem.Button>
+ *     <AccordionItem.Label>Label</AccordionItem.Label>
+ *   </AccordionItem.Button>
+ *   <AccordionItem.Marker>
+ *     <Icon href={placeholder} />
+ *   </AccordionItem.Marker>
+ * </AccordionItem.Header>
+ * ```
+ */
+declare const AccordionItemMarker: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
+/**
+ * The disclosed content of the accordion item.
+ *
+ * Example:
+ * ```tsx
+ * <AccordionItem.Root>
+ * 	 <AccordionItem.Header>
+ *     <AccordionItem.Button>
+ *       <AccordionItem.Label>Label</AccordionItem.Label>
+ *     </AccordionItem.Button>
+ *     <AccordionItem.Marker />
+ *   </AccordionItem.Header>
+ *   <AccordionItem.Content>Body</AccordionItem.Content>
+ * </AccordionItem.Root>
+ * ```
+ */
+declare const AccordionItemContent: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
+interface AccordionItemHeadingProps extends BaseProps {
+    render: NonNullable<BaseProps["render"]>;
+}
+/**
+ * A heading for wrapping `AccordionItem.Button`.
+ *
+ * The `render` prop is required.
+ *
+ * Example:
+ * ```tsx
+ * <AccordionItem.Header>
+ *   <AccordionItem.Heading render={<h2 />}>
+ *     <AccordionItem.Button>
+ *       <AccordionItem.Label>Label</AccordionItem.Label>
+ *     </AccordionItem.Button>
+ *   </AccordionItem.Heading>
+ *   <AccordionItem.Marker />
+ * </AccordionItem.Header>
+ */
+declare const AccordionItemHeading: import("react").ForwardRefExoticComponent<AccordionItemHeadingProps & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
+export { AccordionItemRoot as Root, AccordionItemContent as Content, AccordionItemHeader as Header, AccordionItemButton as Button, AccordionItemLabel as Label, AccordionItemDecoration as Decoration, AccordionItemMarker as Marker, AccordionItemHeading as Heading, };

package/dist/AccordionItem.js

@@ -0,0 +1,140 @@
+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
+          }
+        )
+      }
+    );
+  }
+);
+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
+    }
+  ) })
+);
+const AccordionItemButton = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    Disclosure,
+    {
+      ...props,
+      className: cx("\u{1F95D}-accordion-item-button", props.className),
+      ref: forwardedRef
+    }
+  )
+);
+const AccordionItemLabel = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...props,
+      variant: "body-sm",
+      className: cx("\u{1F95D}-accordion-item-label", props.className),
+      ref: forwardedRef
+    }
+  )
+);
+const AccordionItemDecoration = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    Role,
+    {
+      ...props,
+      className: cx("\u{1F95D}-accordion-item-decoration", props.className),
+      ref: forwardedRef
+    }
+  )
+);
+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"
+        }
+      )
+    }
+  )
+);
+const AccordionItemContent = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    DisclosureContent,
+    {
+      ...props,
+      className: cx("\u{1F95D}-accordion-item-content", props.className),
+      ref: forwardedRef
+    }
+  )
+);
+const AccordionItemHeading = forwardRef(
+  (props, forwardedRef) => /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...props,
+      variant: "body-sm",
+      className: cx("\u{1F95D}-accordion-item-heading", props.className),
+      ref: forwardedRef
+    }
+  )
+);
+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/Banner.d.ts

@@ -0,0 +1,81 @@
+import * as React from "react";
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+/**
+ * A banner to highlight information and also optionally provide actions.
+ * The information could be very important (like a call to action) or reasonably import (like a status message).
+ *
+ * Example:
+ * ```tsx
+ * <Banner label="Title" message="Message" icon={placeholderIcon} onDismiss={() => {}} />
+ * ```
+ */
+export declare const Banner: React.ForwardRefExoticComponent<Omit<BaseProps, "children"> & {
+    /**
+     * Icon to be displayed inside the banner.
+     *
+     * Can be a URL of an SVG from the `@stratakit/icons` package,
+     * or a custom JSX icon.
+     *
+     * - If `icon=undefined` and `tone="neutral"`, no icon is shown.
+     * - If `icon=undefined` and `tone!="neutral"`, the status icon will be shown.
+     */
+    icon?: string | React.JSX.Element;
+    /**
+     * The label displayed inside the banner.
+     *
+     * Either pass a string or a `<VisuallyHidden>` component if you don't want the label to be visible.
+     */
+    label: string | React.JSX.Element;
+    /**
+     * The content of the banner.
+     */
+    message: React.ReactNode;
+    /**
+     * Callback invoked when the dismiss ("❌") button is clicked.
+     *
+     * If `undefined`, the dismiss button will not be rendered.
+     *
+     * @default undefined
+     */
+    onDismiss?: () => void;
+    /**
+     * The actions available for the banner.
+     *
+     * Example with one action:
+     * ```tsx
+     * actions={<Button key={…} onClick={}>Action</Button>}
+     * ```
+     *
+     * Example with two `Button`s:
+     * ```tsx
+     * actions={
+     *   <>
+     *     <Button key={…} onClick={…}>Action 1</Button>,
+     *     <Button key={…} onClick={…}>Action 2</Button>,
+     *   </>
+     * }
+     * ```
+     *
+     * Example with two `Anchor`s as `Button`:
+     * ```tsx
+     * actions={
+     *   <>
+     *     <Anchor key={…} render={<button />} onClick={…}>Action 1</Anchor>,
+     *     <Anchor key={…} render={<button />} onClick={…}>Action 2</Anchor>,
+     *   </>
+     * }
+     */
+    actions?: React.ReactNode;
+    /**
+     * The tone of the banner.
+     *
+     * @default "neutral"
+     */
+    tone?: "neutral" | "info" | "positive" | "attention" | "critical";
+    /**
+     * The variant of the banner.
+     *
+     * @default "outline"
+     */
+    variant?: "outline";
+} & React.RefAttributes<HTMLDivElement | HTMLElement>>;

package/dist/Banner.js

@@ -0,0 +1,71 @@
+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
+      ]
+    }
+  );
+});
+export {
+  Banner
+};

package/dist/Chip.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+interface ChipProps extends Omit<BaseProps<"div">, "children"> {
+    /**
+     * The label displayed inside the chip.
+     */
+    label: string;
+    /**
+     * The variant style of the Chip.
+     * Use "solid" for primary states and "outline" for less prominent states.
+     *
+     * @default "solid"
+     */
+    variant?: "solid" | "outline";
+    /**
+     * Callback invoked when the dismiss ("❌") button is clicked.
+     *
+     * If `undefined`, the dismiss button will not be rendered.
+     *
+     * @default undefined
+     */
+    onDismiss?: () => void;
+}
+/**
+ * Chip is a UI component used to represent an item, attribute, or action in a compact visual style.
+ * It supports two visual variants: `solid` for primary emphasis and `outline` for less prominent states.
+ *
+ * Example:
+ * ```tsx
+ * <Chip label="Value" />
+ * <Chip label="Value" variant="outline" />
+ * ```
+ */
+export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+export {};

package/dist/Chip.js

@@ -0,0 +1,41 @@
+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
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  Chip
+};