@stratakit/structures 0.4.0 → 0.4.2

package/dist/Dialog.d.ts

@@ -0,0 +1,153 @@
+import * as React from "react";
+import * as AkDialog from "@ariakit/react/dialog";
+import type { BaseProps, FocusableProps } from "@stratakit/foundations/secret-internals";
+interface DialogRootProps extends BaseProps, Pick<AkDialog.DialogProps, "open" | "onClose" | "backdrop" | "unmountOnHide" | "hideOnInteractOutside"> {
+    /**
+     * When set to `true`, the content element will be unmounted and removed from
+     * the DOM when it's hidden.
+     *
+     * @default true
+     */
+    unmountOnHide?: boolean;
+    /**
+     * Determines whether the dialog is modal.
+     * Currently, only modal dialogs are supported.
+     */
+    modal: true;
+}
+/**
+ * A modal dialog component used to display content in a window overlay. Must include `Dialog.Header` and `Dialog.Content` as direct
+ * descendants. Additionally, `Dialog.Footer` can be optionally used as a direct descendant.
+ *
+ * Example:
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <Dialog.Root modal={true} open={open} onClose={() => setOpen(false)}>
+ *   <Dialog.Heading>Heading</Dialog.Heading>
+ *   <Dialog.Content>Content</Dialog.Content>
+ *   <Dialog.Footer>
+ *     <Dialog.ActionList
+ *       actions={[
+ *         <Button key="ok" onClick={() => setOpen(false)}>Ok</Button>,
+ *       ]}
+ *     />
+ *
+ *   </Dialog.Footer>
+ * </Dialog.Root>
+ * ```
+ */
+declare const DialogRoot: React.ForwardRefExoticComponent<DialogRootProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface DialogHeaderProps extends BaseProps {
+}
+/**
+ * The header of a dialog. Should be used as a child of `Dialog.Root`. Must include `Dialog.Heading` as a direct
+ * descendant. Additionally, `Dialog.CloseButton` can be optionally used as a direct descendant.
+ *
+ * Example:
+ * ```tsx
+ * <Dialog.Header>
+ *   <Dialog.Heading>Heading</Dialog.Heading>
+ *   <Dialog.CloseButton />
+ * </Dialog.Header>
+ * ```
+ *
+ * Use `render` prop when only a heading is displayed in a header.
+ *
+ * ```tsx
+ * <Dialog.Header render={<Dialog.Heading />}>Heading</Dialog.Header>
+ * ```
+ *
+ */
+declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface DialogHeadingProps extends BaseProps<"h1"> {
+}
+/**
+ * The heading of a dialog. Should be used as a child of `Dialog.DialogHeader`.
+ *
+ * Example:
+ * ```tsx
+ * <Dialog.Heading>Heading</Dialog.Heading>
+ * ```
+ */
+declare const DialogHeading: React.ForwardRefExoticComponent<DialogHeadingProps & React.RefAttributes<HTMLElement | HTMLHeadingElement>>;
+interface DialogCloseButtonProps extends Omit<FocusableProps<"button">, "children"> {
+    /**
+     * Label for the close button.
+     *
+     * @default "Dismiss"
+     */
+    label?: string;
+}
+/**
+ * A button that closes the dialog. Displayed as an icon button in the top-right corner of the dialog.
+ * Should be used as a child of `Dialog.DialogHeader`.
+ *
+ * Example:
+ * ```tsx
+ * <Dialog.CloseButton />
+ * ```
+ */
+declare const DialogCloseButton: React.ForwardRefExoticComponent<DialogCloseButtonProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+interface DialogContentProps extends BaseProps {
+}
+/**
+ * The content of a dialog. Should be used as a child of `Dialog.Root`.
+ *
+ * Example:
+ * ```tsx
+ * <Dialog.Content>Content</Dialog.Content>
+ * ```
+ */
+declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface DialogFooterProps extends BaseProps {
+}
+/**
+ * The footer section of a dialog, typically used to display action buttons at the bottom of the dialog.
+ * Should be used as a child of `Dialog.Root`. Use `Dialog.ActionList` as a direct descendant to display a list of actions.
+ *
+ * Example:
+ * ```tsx
+ * <Dialog.Footer>
+ *   <Dialog.ActionList
+ *     actions={[
+ *       <Button key="cancel" onClick={() => setOpen(false)}>Cancel</Button>,
+ *       <Button key="ok" tone="accent" onClick={() => setOpen(false)}>Ok</Button>,
+ *     ]}
+ *   />
+ * </Dialog.Footer>
+ * ```
+ */
+declare const DialogFooter: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface DialogActionListProps extends Omit<BaseProps, "children"> {
+    /**
+     * The actions available for the dialog. Must be a list of `Button` components.
+     */
+    actions?: React.ReactNode[];
+}
+/**
+ * A container for action buttons in a dialog. Should be used as a child of `Dialog.Footer`.
+ *
+ * Example:
+ * ```tsx
+ * <Dialog.ActionList
+ *   actions={[
+ *     <Button key="cancel" onClick={() => setOpen(false)}>Cancel</Button>,
+ *     <Button key="ok" tone="accent" onClick={() => setOpen(false)}>Ok</Button>,
+ *   ]}
+ * />
+ * ```
+ */
+declare const DialogActionList: React.ForwardRefExoticComponent<DialogActionListProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface DialogBackdropProps extends BaseProps {
+}
+/**
+ * The backdrop of a dialog. Should be passed into the `backdrop` prop of `Dialog.Root`.
+ *
+ * Example:
+ * ```tsx
+ * <Dialog.Root modal={true} backdrop={<Dialog.Backdrop />} />
+ * ```
+ */
+declare const DialogBackdrop: React.ForwardRefExoticComponent<DialogBackdropProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+export { DialogRoot as Root, DialogHeader as Header, DialogHeading as Heading, DialogCloseButton as CloseButton, DialogContent as Content, DialogFooter as Footer, DialogActionList as ActionList, DialogBackdrop as Backdrop, };

package/dist/Dialog.js

@@ -0,0 +1,170 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as AkDialog from "@ariakit/react/dialog";
+import { Portal, PortalContext } from "@ariakit/react/portal";
+import { Role } from "@ariakit/react/role";
+import { useStoreState } from "@ariakit/react/store";
+import { IconButton, Text } from "@stratakit/bricks";
+import { GhostAligner } from "@stratakit/bricks/secret-internals";
+import {
+  forwardRef,
+  usePopoverApi
+} from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import { Dismiss } from "./~utils.icons.js";
+const DialogRoot = forwardRef((props, forwardedRef) => {
+  const { backdrop = true, unmountOnHide = true, ...rest } = props;
+  const store = AkDialog.useDialogStore();
+  const contentElement = useStoreState(store, "contentElement");
+  const mounted = useStoreState(store, (state) => {
+    if (!unmountOnHide) return true;
+    return props.open ?? state?.mounted;
+  });
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(AkDialog.DialogProvider, { store, children: /* @__PURE__ */ jsx(DialogWrapper, { open: props.open, children: /* @__PURE__ */ jsxs(
+    AkDialog.Dialog,
+    {
+      unmountOnHide,
+      portal: false,
+      ...rest,
+      backdrop: backdrop === true ? /* @__PURE__ */ jsx(DialogBackdrop, {}) : backdrop,
+      className: cx("\u{1F95D}Dialog", props.className),
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx(AkDialog.DialogDismiss, { hidden: true }),
+        /* @__PURE__ */ jsx(PortalContext.Provider, { value: contentElement, children: props.children })
+      ]
+    }
+  ) }) });
+});
+function DialogWrapper(props) {
+  const [wrapper, setWrapper] = React.useState(null);
+  const store = AkDialog.useDialogContext();
+  const open = useStoreState(store, (state) => {
+    return props.open ?? state?.open;
+  });
+  const popoverProps = usePopoverApi({
+    element: wrapper,
+    open
+  });
+  const mounted = useStoreState(store, "mounted");
+  return /* @__PURE__ */ jsx(
+    Portal,
+    {
+      className: "\u{1F95D}DialogWrapper",
+      ref: setWrapper,
+      ...popoverProps,
+      hidden: mounted ? void 0 : true,
+      children: props.children
+    }
+  );
+}
+const DialogHeader = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        ...props,
+        className: cx("\u{1F95D}DialogHeader", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const DialogHeading = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      AkDialog.DialogHeading,
+      {
+        ...props,
+        className: cx("\u{1F95D}DialogHeading", props.className),
+        render: /* @__PURE__ */ jsx(Text, { variant: "body-lg", render: props.render ?? /* @__PURE__ */ jsx("h1", {}) }),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const DialogCloseButton = forwardRef(
+  (props, forwardedRef) => {
+    const { label = "Dismiss", ...rest } = props;
+    return /* @__PURE__ */ jsx(GhostAligner, { align: "inline-end", children: /* @__PURE__ */ jsx(
+      AkDialog.DialogDismiss,
+      {
+        ...rest,
+        render: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            render: props.render,
+            variant: "ghost",
+            label,
+            icon: /* @__PURE__ */ jsx(Dismiss, {})
+          }
+        ),
+        ref: forwardedRef
+      }
+    ) });
+  }
+);
+const DialogContent = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        ...props,
+        className: cx("\u{1F95D}DialogContent", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const DialogFooter = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        ...props,
+        className: cx("\u{1F95D}DialogFooter", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+const DialogActionList = forwardRef(
+  (props, forwardedRef) => {
+    const { actions, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        role: "list",
+        ...rest,
+        className: cx("\u{1F95D}DialogActionList", props.className),
+        ref: forwardedRef,
+        children: React.Children.map(actions, (action) => {
+          return /* @__PURE__ */ jsx("div", { role: "listitem", children: action });
+        })
+      }
+    );
+  }
+);
+const DialogBackdrop = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        ...props,
+        className: cx("\u{1F95D}DialogBackdrop", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+export {
+  DialogActionList as ActionList,
+  DialogBackdrop as Backdrop,
+  DialogCloseButton as CloseButton,
+  DialogContent as Content,
+  DialogFooter as Footer,
+  DialogHeader as Header,
+  DialogHeading as Heading,
+  DialogRoot as Root
+};

package/dist/NavigationRail.d.ts

@@ -0,0 +1,203 @@
+import * as React from "react";
+import type { BaseProps, FocusableProps } from "@stratakit/foundations/secret-internals";
+interface NavigationRailProps extends BaseProps<"nav"> {
+}
+/**
+ * The `NavigationRail` presents top-level navigation items in a vertical orientation.
+ *
+ * Example:
+ * ```tsx
+ * <NavigationRail.Root>
+ *   <NavigationRail.Header>
+ *     <IconButton label="Home" icon={applicationIcon} href="/" />
+ *     <NavigationRail.ToggleButton />
+ *   </NavigationRail.Header>
+ *
+ *   <NavigationRail.Content>
+ *     <NavigationRail.List>
+ *       <NavigationRail.ListItem>
+ *         <NavigationRail.Anchor label="Dashboard" icon={dashboardIcon} href="/dashboard" />
+ *       </NavigationRail.ListItem>
+ *       <NavigationRail.ListItem>
+ *         <NavigationRail.Anchor label="Projects" icon={projectsIcon} href="/projects" />
+ *       </NavigationRail.ListItem>
+ *       <NavigationRail.ListItem>
+ *         <NavigationRail.Anchor label="Reports" icon={reportsIcon} href="/reports" />
+ *       </NavigationRail.ListItem>
+ *     </NavigationRail.List>
+ *
+ *     <NavigationRail.Footer>
+ *       <NavigationRail.List>
+ *         <NavigationRail.ListItem>
+ *           <NavigationRail.Button label="Help" icon={helpIcon} onClick={…} />
+ *         </NavigationRail.ListItem>
+ *         <NavigationRail.ListItem>
+ *           <NavigationRail.Button label="Settings" icon={settingsIcon} onClick={…} />
+ *         </NavigationRail.ListItem>
+ *         <NavigationRail.ListItem>
+ *           <NavigationRail.Button label="Profile" icon={userIcon} onClick={…} />
+ *         </NavigationRail.ListItem>
+ *       </NavigationRail.List>
+ *    </NavigationRail.Footer>
+ *   </NavigationRail.Content>
+ * </NavigationRail.Root>
+ * ```
+ */
+declare const NavigationRailRoot: React.ForwardRefExoticComponent<NavigationRailProps & React.RefAttributes<HTMLElement>>;
+interface NavigationRailHeaderProps extends BaseProps<"header"> {
+}
+/**
+ * `NavigationRail.Header` represents the header (i.e. top) section of the `NavigationRail` and is
+ * visually aligned with the page header next to it.
+ *
+ * Can contain a logo and a `NavigationRail.ToggleButton` to collapse/expand the `NavigationRail`.
+ *
+ * **Note**: This component is expected to hug the top edge of the page.
+ */
+declare const NavigationRailHeader: React.ForwardRefExoticComponent<NavigationRailHeaderProps & React.RefAttributes<HTMLElement>>;
+interface NavigationRailToggleButtonProps extends Omit<FocusableProps<"button">, "children"> {
+    /**
+     * Customize the accessible label of the toggle button.
+     *
+     * @default "Expand navigation".
+     */
+    label?: string;
+}
+/**
+ * `NavigationRail.ToggleButton` toggles the collapsed state of the `NavigationRail`.
+ * It is typically placed inside `NavigationRail.Header`, next to the logo.
+ */
+declare const NavigationRailToggleButton: React.ForwardRefExoticComponent<NavigationRailToggleButtonProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+interface NavigationRailContentProps extends BaseProps {
+}
+/**
+ * `NavigationRail.Content` is a wraps the main content of the `NavigationRail`, including
+ * the primary navigation list and an optional footer.
+ *
+ * Example:
+ * ```tsx
+ * <NavigationRail.Content>
+ *   <NavigationRail.List>…</NavigationRail.List>
+ *
+ *   <NavigationRail.Footer>
+ *     <NavigationRail.List>…</NavigationRail.List>
+ *   </NavigationRail.Footer>
+ * </NavigationRail.Content>
+ * ```
+ */
+declare const NavigationRailContent: React.ForwardRefExoticComponent<NavigationRailContentProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface NavigationRailListProps extends BaseProps<"div"> {
+}
+/**
+ * The `NavigationRail.List` represents a list of top-level navigation items.
+ *
+ * It should be used within `NavigationRail.Content` and should contain `NavigationRail.ListItem` elements,
+ * which in turn can contain `NavigationRail.Anchor` or `NavigationRail.Button`.
+ *
+ * Example (with `NavigationRail.Anchor`):
+ * ```tsx
+ * <NavigationRail.List>
+ *   <NavigationRail.ListItem>
+ *     <NavigationRail.Anchor label="Home" icon={homeIcon} href="/" />
+ *   </NavigationRail.ListItem>
+ *   <NavigationRail.ListItem>
+ *     <NavigationRail.Anchor label="Projects" icon={projectsIcon} href="/projects" />
+ *   </NavigationRail.ListItem>
+ * </NavigationRail.List>
+ * ```
+ *
+ * Example (with `NavigationRail.Button`):
+ * ```tsx
+ * <NavigationRail.List>
+ *   <NavigationRail.ListItem>
+ *     <NavigationRail.Button label="Help" icon={helpIcon} onClick={…} />
+ *   </NavigationRail.ListItem>
+ *   <NavigationRail.ListItem>
+ *     <NavigationRail.Button label="Settings" icon={settingsIcon} onClick={…}  />
+ *   </NavigationRail.ListItem>
+ * </NavigationRail.List>
+ * ```
+ *
+ * Multiple `NavigationRail.List` elements can be used together and be separated by a `Divider`.
+ */
+declare const NavigationRailList: React.ForwardRefExoticComponent<NavigationRailListProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface NavigationRailListItemProps extends BaseProps<"div"> {
+}
+/**
+ * The `NavigationRail.Item` represents a single navigation list item, which should contain
+ * either a `NavigationRail.Anchor` or a `NavigationRail.Button`.
+ *
+ * Example:
+ * ```tsx
+ * <NavigationRail.ListItem>
+ *   <NavigationRail.Anchor label="Home" icon={homeIcon} href="/" />
+ * </NavigationRail.ListItem>
+ * // or
+ * <NavigationRail.ListItem>
+ *   <NavigationRail.Button label="Settings" icon={settingsIcon} onClick={…} />
+ * </NavigationRail.ListItem>
+ * ```
+ *
+ * **Note:** This is a non-interactive wrapper element and should not directly handle user interactions.
+ */
+declare const NavigationRailListItem: React.ForwardRefExoticComponent<NavigationRailListItemProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface NavigationRailItemActionOwnProps {
+    label: string;
+    icon: string | React.JSX.Element;
+}
+interface NavigationRailAnchorProps extends Omit<BaseProps<"a">, "children">, NavigationRailItemActionOwnProps {
+    /**
+     * Whether the anchor is currently active (i.e. represents the current page).
+     */
+    active?: boolean;
+}
+/**
+ * `NavigationRail.Anchor` is used for top-level navigation items that link to major pages.
+ *
+ * Should be used inside `NavigationRail.ListItem` and must have a short `label` and a recognizable `icon`.
+ * The `label` will be shown as a tooltip when the `NavigationRail` is collapsed.
+ *
+ * Example:
+ * ```tsx
+ * <NavigationRail.ListItem>
+ *   <NavigationRail.Anchor label="Home" icon={homeIcon} href="/" />
+ * </NavigationRail.ListItem>
+ * ```
+ */
+declare const NavigationRailAnchor: React.ForwardRefExoticComponent<NavigationRailAnchorProps & React.RefAttributes<HTMLElement | HTMLAnchorElement>>;
+interface NavigationRailButtonProps extends Omit<BaseProps<"button">, "children">, NavigationRailItemActionOwnProps {
+}
+/**
+ * `NavigationRail.Button` is used for actions that do not navigate to a new page, but rather perform
+ * an in-page action, such as opening a dialog or menu.
+ *
+ * Should be used inside `NavigationRail.ListItem` and must have a short `label` and a recognizable `icon`.
+ * The `label` will be shown as a tooltip when the `NavigationRail` is collapsed.
+ *
+ * Example:
+ * ```tsx
+ * <NavigationRail.ListItem>
+ *   <NavigationRail.Button label="Notifications" icon={notificationsIcon} onClick={showNotificationsDialog} />
+ * </NavigationRail.ListItem>
+ * ```
+ */
+declare const NavigationRailButton: React.ForwardRefExoticComponent<NavigationRailButtonProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+interface NavigationRailFooterProps extends BaseProps<"footer"> {
+}
+/**
+ * `NavigationRail.Footer` is typically used for grouping secondary actions list near the bottom
+ * of the `NavigationRail`, away from the main navigation items.
+ *
+ * Example:
+ * ```tsx
+ * <NavigationRail.Content>
+ *   <NavigationRail.List>…</NavigationRail.List>
+ *
+ *   <NavigationRail.Footer>
+ *     <NavigationRail.List>…</NavigationRail.List>
+ *   </NavigationRail.Footer>
+ * </NavigationRail.Content>
+ * ```
+ */
+declare const NavigationRailFooter: React.ForwardRefExoticComponent<NavigationRailFooterProps & React.RefAttributes<HTMLElement>>;
+export { NavigationRailRoot as Root, NavigationRailHeader as Header, NavigationRailToggleButton as ToggleButton, NavigationRailContent as Content, NavigationRailList as List, NavigationRailListItem as ListItem, NavigationRailButton as Button, NavigationRailAnchor as Anchor, NavigationRailFooter as Footer, };