rift-ds 1.0.0

package/components/AlertDialog/AlertDialog.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useId, useCallback } from "react";
+import ReactDOM from "react-dom";
+import { Button } from "../Button/Button.js";
+import "./AlertDialog.css";
+import "../../fonts/material-symbols.css";
+import { useMounted } from "../../behaviors/useMounted.js";
+import { useLayer } from "../../behaviors/useLayer.js";
+import { useFocusScope } from "../../behaviors/useFocusScope.js";
+import { useScrollLock } from "../../behaviors/useScrollLock.js";
+const AlertDialog = ({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  variant = "default",
+  className = ""
+}) => {
+  const panelRef = useRef(null);
+  const titleId = useId();
+  const descId = useId();
+  const baseClass = "ds-alert-dialog";
+  const mounted = useMounted();
+  const handleCancel = useCallback(() => {
+    onCancel?.();
+    onOpenChange(false);
+  }, [onCancel, onOpenChange]);
+  const handleConfirm = useCallback(() => {
+    onConfirm?.();
+    onOpenChange(false);
+  }, [onConfirm, onOpenChange]);
+  useLayer({ open, onDismiss: handleCancel });
+  useFocusScope(panelRef, {
+    active: open,
+    initialFocus: () => panelRef.current?.querySelector(`.${baseClass}__actions button:first-child`) ?? null
+  });
+  useScrollLock(open);
+  const variantClass = variant !== "default" ? `${baseClass}--${variant}` : "";
+  const openClass = open ? `${baseClass}--open` : "";
+  const containerClasses = [baseClass, variantClass, openClass, className].filter(Boolean).join(" ");
+  const dialog = /* @__PURE__ */ jsxs("div", { className: containerClasses, children: [
+    /* @__PURE__ */ jsx("div", { className: `${baseClass}__backdrop`, onClick: handleCancel }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${baseClass}__panel`,
+        ref: panelRef,
+        role: "alertdialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        "aria-describedby": description ? descId : void 0,
+        tabIndex: -1,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__header`, children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: `${baseClass}__icon material-symbols-rounded`,
+                "aria-hidden": "true",
+                children: variant === "destructive" ? "warning" : "info"
+              }
+            ),
+            /* @__PURE__ */ jsx("h2", { className: `${baseClass}__title`, id: titleId, children: title })
+          ] }),
+          description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, id: descId, children: description }),
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__actions`, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                label: cancelLabel,
+                priority: "tertiary",
+                onClick: handleCancel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                label: confirmLabel,
+                priority: variant === "destructive" ? "destructive" : "primary",
+                onClick: handleConfirm
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+  if (!mounted) return null;
+  return ReactDOM.createPortal(dialog, document.body);
+};
+export {
+  AlertDialog
+};

package/components/AnchorNav/AnchorNav.css

@@ -0,0 +1,137 @@
+/* ============================================
+   ANCHOR NAV
+   "On this page" list of anchor links with a
+   position indicator riding the left rail.
+   ============================================ */
+.ds-anchor-nav {
+  font-family: var(--font-family-primary);
+}
+
+.ds-anchor-nav__header {
+  display: flex;
+  align-items: center;
+  gap: var(--gap-100);
+  margin: 0 0 var(--gap-200);
+  font-size: var(--font-paragraph-emphasis-size);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: var(--font-paragraph-emphasis-line-height);
+  color: var(--color-text-primary);
+}
+
+.ds-anchor-nav__icon {
+  --icon-size: var(--icon-size-500);
+  color: var(--color-icon-primary);
+}
+
+.ds-anchor-nav__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border-left: var(--border-025) solid var(--color-divider);
+}
+
+.ds-anchor-nav__link {
+  display: block;
+  padding: var(--padding-150) 0 var(--padding-150) var(--padding-400);
+  /* Sits over the list rail; turns into the indicator when active */
+  margin-left: calc(var(--border-025) * -1);
+  border-left: var(--border-050) solid transparent;
+  font-size: var(--font-paragraph-size);
+  font-weight: var(--font-paragraph-weight);
+  line-height: var(--font-paragraph-line-height);
+  color: var(--color-text-tertiary);
+  text-decoration: none;
+  transition:
+    color var(--motion-duration-fast) var(--motion-ease-standard),
+    border-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-anchor-nav__link:hover {
+  color: var(--color-text-primary);
+}
+
+.ds-anchor-nav__link:focus-visible {
+  outline: 2px solid var(--color-action-primary-bg);
+  outline-offset: -2px;
+  border-radius: var(--radius-050);
+}
+
+.ds-anchor-nav__link--active {
+  color: var(--color-text-primary);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  border-left-color: var(--color-text-primary);
+}
+
+/* ============================================
+   FLOATING VARIANT
+   Collapsed to a minimap of short lines; the
+   full panel expands over it on hover, focus
+   or tap. The caller positions the nav itself
+   (typically fixed on the right page edge).
+   ============================================ */
+.ds-anchor-nav--floating {
+  position: relative;
+  display: inline-block;
+}
+
+.ds-anchor-nav__lines {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--gap-200);
+  /* A comfortable hover/tap target around the thin lines */
+  padding: var(--padding-200);
+  cursor: pointer;
+}
+
+.ds-anchor-nav__line {
+  /* One line per section: bespoke minimap geometry, specced in design.md */
+  width: 16px;
+  height: var(--border-050);
+  border-radius: var(--radius-pill);
+  background-color: var(--color-divider);
+  transition:
+    width var(--motion-duration-fast) var(--motion-ease-standard),
+    background-color var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-anchor-nav__line--active {
+  width: 24px;
+  background-color: var(--color-text-primary);
+}
+
+.ds-anchor-nav__panel {
+  position: absolute;
+  z-index: 10;
+  top: 50%;
+  right: 0;
+  min-width: 200px;
+  max-width: 280px;
+  /* A long list scrolls inside the panel rather than past the viewport */
+  max-height: 70vh;
+  overflow-y: auto;
+  padding: var(--padding-400);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: var(--radius-200);
+  /* Page background, not container: the container fill is semi-transparent
+     in dark mode, and a floating panel must not show text through itself */
+  background-color: var(--color-bg-page-primary);
+  box-shadow: var(--shadow-floating);
+
+  /* Hidden by default — but never visibility: hidden, because the links must
+     stay focusable so tabbing into the nav expands it via :focus-within */
+  opacity: 0;
+  pointer-events: none;
+  transform: translate(var(--gap-050), -50%);
+  transition:
+    opacity var(--motion-duration-fast) var(--motion-ease-standard),
+    transform var(--motion-duration-fast) var(--motion-ease-standard);
+}
+
+.ds-anchor-nav--floating:hover .ds-anchor-nav__panel,
+.ds-anchor-nav--floating:focus-within .ds-anchor-nav__panel,
+.ds-anchor-nav--open .ds-anchor-nav__panel {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translate(0, -50%);
+}

package/components/AnchorNav/AnchorNav.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+export interface AnchorNavItem {
+    /** The id of the element the item jumps to (rendered as `href="#id"`) */
+    id: string;
+    /** Link text */
+    label: string;
+}
+type AnchorNavOwnProps = {
+    /** The on-page sections to list, in document order */
+    items: AnchorNavItem[];
+    /** Visual form: `list` renders the inline "On this page" rail; `floating` collapses to a stack of short lines that expands into a panel on hover, keyboard focus, or tap, so it can ride a page edge without taking column width */
+    variant?: 'list' | 'floating';
+    /** Header text above the list; pass an empty string to render no header */
+    title?: string;
+    /** Icon beside the header — Material Symbol name (string) or custom element (ReactNode); pass an empty string for none */
+    icon?: string | React.ReactNode;
+    /** Controlled active item id — set it to drive the highlight yourself and skip scroll tracking */
+    activeId?: string;
+    /** Fires when the tracked (or clicked) active item changes */
+    onActiveChange?: (id: string) => void;
+    /** Distance in px from the viewport top at which a section counts as current, e.g. a sticky header's height */
+    offset?: number;
+};
+export interface AnchorNavProps extends AnchorNavOwnProps, Omit<React.ComponentPropsWithoutRef<'nav'>, keyof AnchorNavOwnProps> {
+}
+/**
+ * An "On this page" list of anchor links that tracks the reader's position.
+ *
+ * Uncontrolled by default: a scroll listener marks the last section whose top
+ * has passed `offset` as current. Pass `activeId` to control the highlight
+ * instead (no listener is attached). The active link carries
+ * `aria-current="location"`.
+ *
+ * The `floating` variant collapses the list to a minimap of short lines and
+ * expands the full panel on hover or keyboard focus (the links stay focusable
+ * while collapsed, so tabbing in opens it). A tap opens it where hover
+ * doesn't exist; Escape or a click elsewhere closes it again.
+ */
+export declare const AnchorNav: React.ForwardRefExoticComponent<AnchorNavProps & React.RefAttributes<HTMLElement>>;
+export {};

package/components/AnchorNav/AnchorNav.js

@@ -0,0 +1,135 @@
+"use client";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import React, { useRef, useImperativeHandle, useState, useCallback, useEffect } from "react";
+import "./AnchorNav.css";
+const AnchorNav = React.forwardRef(
+  ({
+    items,
+    variant = "list",
+    title = "On this page",
+    icon = "toc",
+    activeId,
+    onActiveChange,
+    offset = 96,
+    className,
+    onKeyDown,
+    ...rest
+  }, ref) => {
+    const navRef = useRef(null);
+    useImperativeHandle(ref, () => navRef.current);
+    const floating = variant === "floating";
+    const [open, setOpen] = useState(false);
+    const isControlled = activeId !== void 0;
+    const [trackedId, setTrackedId] = useState(void 0);
+    const currentId = isControlled ? activeId : trackedId;
+    const onActiveChangeRef = useRef(onActiveChange);
+    onActiveChangeRef.current = onActiveChange;
+    const setActive = useCallback(
+      (id) => {
+        setTrackedId((prev) => {
+          if (id !== void 0 && id !== prev) onActiveChangeRef.current?.(id);
+          return id;
+        });
+      },
+      []
+    );
+    useEffect(() => {
+      if (isControlled || items.length === 0) return;
+      let frame = 0;
+      const measure = () => {
+        frame = 0;
+        let current = items[0]?.id;
+        for (const item of items) {
+          const el = document.getElementById(item.id);
+          if (!el) continue;
+          if (el.getBoundingClientRect().top <= offset + 1) current = item.id;
+        }
+        setActive(current);
+      };
+      const schedule = () => {
+        if (frame === 0) frame = window.requestAnimationFrame(measure);
+      };
+      measure();
+      window.addEventListener("scroll", schedule, { passive: true });
+      window.addEventListener("resize", schedule);
+      return () => {
+        window.removeEventListener("scroll", schedule);
+        window.removeEventListener("resize", schedule);
+        if (frame !== 0) window.cancelAnimationFrame(frame);
+      };
+    }, [isControlled, items, offset, setActive]);
+    useEffect(() => {
+      if (!open) return;
+      const onPointerDown = (event) => {
+        if (navRef.current && !navRef.current.contains(event.target)) setOpen(false);
+      };
+      document.addEventListener("pointerdown", onPointerDown);
+      return () => document.removeEventListener("pointerdown", onPointerDown);
+    }, [open]);
+    const handleKeyDown = (event) => {
+      onKeyDown?.(event);
+      if (floating && event.key === "Escape") {
+        setOpen(false);
+        const focused = document.activeElement;
+        if (focused instanceof HTMLElement && navRef.current?.contains(focused)) focused.blur();
+      }
+    };
+    const classes = [
+      "ds-anchor-nav",
+      floating && "ds-anchor-nav--floating",
+      floating && open && "ds-anchor-nav--open",
+      className
+    ].filter(Boolean).join(" ");
+    const header = title ? /* @__PURE__ */ jsxs("p", { className: "ds-anchor-nav__header", children: [
+      icon && (typeof icon === "string" ? /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded ds-anchor-nav__icon", "aria-hidden": "true", children: icon }) : /* @__PURE__ */ jsx("span", { className: "ds-anchor-nav__icon", "aria-hidden": "true", children: icon })),
+      title
+    ] }) : null;
+    const list = /* @__PURE__ */ jsx("ul", { className: "ds-anchor-nav__list", children: items.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: `#${item.id}`,
+        className: item.id === currentId ? "ds-anchor-nav__link ds-anchor-nav__link--active" : "ds-anchor-nav__link",
+        "aria-current": item.id === currentId ? "location" : void 0,
+        onClick: (event) => {
+          if (!isControlled) setActive(item.id);
+          else onActiveChangeRef.current?.(item.id);
+          if (floating) {
+            setOpen(false);
+            event.currentTarget.blur();
+          }
+        },
+        children: item.label
+      }
+    ) }, item.id)) });
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref: navRef,
+        "aria-label": title || "On this page",
+        className: classes,
+        ...rest,
+        onKeyDown: handleKeyDown,
+        children: floating ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "ds-anchor-nav__lines", "aria-hidden": "true", onClick: () => setOpen(true), children: items.map((item) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: item.id === currentId ? "ds-anchor-nav__line ds-anchor-nav__line--active" : "ds-anchor-nav__line"
+            },
+            item.id
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "ds-anchor-nav__panel", children: [
+            header,
+            list
+          ] })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          header,
+          list
+        ] })
+      }
+    );
+  }
+);
+AnchorNav.displayName = "AnchorNav";
+export {
+  AnchorNav
+};

package/components/AnimatedNumber/AnimatedNumber.css

@@ -0,0 +1,31 @@
+/* ============================================
+   ANIMATED NUMBER COMPONENT
+   A number that counts to its value
+   ============================================ */
+
+/* Base — inherits the surrounding type entirely: the component is a number
+   inside someone else's composition (a Stat, a table cell, a sentence), so
+   it owns no face, size, or colour of its own. */
+
+.ds-animated-number {
+  display: inline-flex;
+}
+
+/* Tabular figures: every digit the same width, so the layout holds still
+   while the digits roll. */
+.ds-animated-number__value {
+  font-variant-numeric: tabular-nums;
+}
+
+/* Visually hidden settled value — what a screen reader gets instead of the
+   rolling digits. */
+.ds-animated-number__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/components/AnimatedNumber/AnimatedNumber.d.ts

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+/** Props owned by AnimatedNumber itself — everything else falls through to the root span. */
+type AnimatedNumberOwnProps = {
+    /** The number to display. Changing it tweens the display from the previous value. */
+    value: number;
+    /** Decimal places shown throughout the tween and at rest. Ignored when `format` is set. */
+    decimals?: number;
+    /**
+     * Formats the displayed number — currency, units, compact notation. Called
+     * on every animation frame, so keep it pure and cheap.
+     */
+    format?: (value: number) => string;
+    /**
+     * Tween length in ms. Defaults to the shared `MOTION_COUNT_UP_MS` constant;
+     * an animation pace, so the tween is skipped entirely under reduced motion.
+     */
+    duration?: number;
+    /** Counts up from zero on first render. Turn off to arrive settled and animate only on later changes. */
+    animateOnMount?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface AnimatedNumberProps extends AnimatedNumberOwnProps, Omit<React.ComponentPropsWithoutRef<'span'>, keyof AnimatedNumberOwnProps | 'children'> {
+}
+/**
+ * AnimatedNumber — a number that counts to its value. On mount it counts up
+ * from zero; when `value` changes it tweens from the previous value, easing
+ * out so the landing reads as arrival rather than a stop. The digits sit on
+ * tabular figures so the layout never jitters while they roll.
+ *
+ * Screen readers hear only the settled value: the rolling digits are
+ * `aria-hidden` behind a visually hidden span carrying the target.
+ * Under `prefers-reduced-motion` the tween is skipped and the value snaps.
+ */
+export declare const AnimatedNumber: React.ForwardRefExoticComponent<AnimatedNumberProps & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/components/AnimatedNumber/AnimatedNumber.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect } from "react";
+import "./AnimatedNumber.css";
+import { MOTION_COUNT_UP_MS } from "../../tokens/motion.js";
+const REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+const prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia(REDUCED_MOTION_QUERY).matches;
+const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+const AnimatedNumber = React.forwardRef(
+  ({
+    value,
+    decimals = 0,
+    format,
+    duration = MOTION_COUNT_UP_MS,
+    animateOnMount = true,
+    className = "",
+    ...rest
+  }, ref) => {
+    const baseClass = "ds-animated-number";
+    const [display, setDisplay] = useState(animateOnMount ? 0 : value);
+    const displayRef = useRef(display);
+    displayRef.current = display;
+    const frameRef = useRef(0);
+    useEffect(() => {
+      const from = displayRef.current;
+      if (from === value) return;
+      if (prefersReducedMotion() || duration <= 0) {
+        setDisplay(value);
+        return;
+      }
+      const start = performance.now();
+      const tick = (now) => {
+        const t = Math.min((now - start) / duration, 1);
+        const eased = easeOutCubic(t);
+        setDisplay(t >= 1 ? value : from + (value - from) * eased);
+        if (t < 1) frameRef.current = requestAnimationFrame(tick);
+      };
+      frameRef.current = requestAnimationFrame(tick);
+      return () => cancelAnimationFrame(frameRef.current);
+    }, [value, duration]);
+    const fmt = format ?? ((n) => n.toLocaleString(void 0, {
+      minimumFractionDigits: decimals,
+      maximumFractionDigits: decimals
+    }));
+    const classes = [baseClass, className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxs("span", { ...rest, ref, className: classes, children: [
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__value`, "aria-hidden": "true", children: fmt(display) }),
+      /* @__PURE__ */ jsx("span", { className: `${baseClass}__sr`, children: fmt(value) })
+    ] });
+  }
+);
+AnimatedNumber.displayName = "AnimatedNumber";
+export {
+  AnimatedNumber
+};

package/components/AppLayout/AppLayout.css

@@ -0,0 +1,52 @@
+/* ============================================
+   APP LAYOUT — full-page template
+   Sidebar rail on the left, centered content area
+   ============================================ */
+
+.ds-app-layout {
+  display: flex;
+  min-height: 100vh;
+  background-color: var(--color-bg-page-primary);
+}
+
+/* ============================================
+   MAIN CONTENT AREA
+   ============================================ */
+.ds-app-layout__main {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  margin-left: 64px;
+  padding: var(--padding-1000) var(--padding-500);
+  transition: margin-left var(--motion-duration-slow) var(--motion-ease-emphasized);
+  min-width: 0;
+}
+
+.ds-app-layout--expanded .ds-app-layout__main {
+  margin-left: 280px;
+}
+
+/* ============================================
+   CENTERED CONTENT WRAPPER
+   ============================================ */
+.ds-app-layout__content {
+  width: 100%;
+  max-width: 1120px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-1000);
+}
+
+/* ============================================
+   RESPONSIVE
+   ============================================ */
+@media (max-width: 768px) {
+  .ds-app-layout__main {
+    margin-left: 0;
+    padding: var(--padding-500) var(--padding-400);
+  }
+
+  .ds-app-layout--expanded .ds-app-layout__main {
+    margin-left: 0;
+  }
+}

package/components/AppLayout/AppLayout.d.ts

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+import { AppSidebarSection, AppSidebarProfile } from '../AppSidebar/AppSidebar';
+export interface AppLayoutProps {
+    /** Sidebar navigation sections */
+    sections: AppSidebarSection[];
+    /** Sidebar profile */
+    profile?: AppSidebarProfile;
+    /** Active nav item key */
+    activeKey?: string;
+    /** Active sub-item key */
+    activeSubKey?: string;
+    /** Whether sidebar starts expanded */
+    defaultExpanded?: boolean;
+    /** Logo text next to icon */
+    logoText?: string;
+    /** Custom logo element */
+    logo?: React.ReactNode;
+    /** Page content — centred in the main area */
+    children: React.ReactNode;
+    /**
+     * Colour scheme: 'dark' pins the layout to the dark theme (the historical
+     * behaviour and the default); 'inherit' drops the pin so the layout
+     * follows the surrounding data-theme like any other component.
+     */
+    theme?: 'dark' | 'inherit';
+    /** Additional CSS classes on outer wrapper */
+    className?: string;
+}
+/**
+ * AppLayout — full-page template with a collapsible sidebar
+ * and a centred content area.
+ */
+export declare const AppLayout: ({ sections, profile, activeKey, activeSubKey, defaultExpanded, logoText, logo, children, theme, className, }: AppLayoutProps) => React.JSX.Element;

package/components/AppLayout/AppLayout.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { AppSidebar } from "../AppSidebar/AppSidebar.js";
+import "./AppLayout.css";
+const AppLayout = ({
+  sections,
+  profile,
+  activeKey,
+  activeSubKey,
+  defaultExpanded = true,
+  logoText,
+  logo,
+  children,
+  theme = "dark",
+  className = ""
+}) => {
+  const baseClass = "ds-app-layout";
+  const [expanded, setExpanded] = useState(defaultExpanded);
+  const handleExpandedChange = useCallback((next) => {
+    setExpanded(next);
+  }, []);
+  const classes = [
+    baseClass,
+    expanded ? `${baseClass}--expanded` : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: classes, "data-theme": theme === "dark" ? "dark" : void 0, children: [
+    /* @__PURE__ */ jsx(
+      AppSidebar,
+      {
+        sections,
+        profile,
+        activeKey,
+        activeSubKey,
+        expanded,
+        onExpandedChange: handleExpandedChange,
+        logoText,
+        logo
+      }
+    ),
+    /* @__PURE__ */ jsx("main", { className: `${baseClass}__main`, children: /* @__PURE__ */ jsx("div", { className: `${baseClass}__content`, children }) })
+  ] });
+};
+export {
+  AppLayout
+};