@godxjp/ui 20.0.0 → 20.2.0

package/dist/components/feedback/dialog.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
 import * as React from "react";
 import { chain, mergeRefs } from "@react-aria/utils";
 import { Dialog as RacDialog, Modal, ModalOverlay } from "react-aria-components";
@@ -12,7 +13,7 @@ import { buttonVariants } from "../general/button.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { Button } from "../general/button.js";
 import { Input } from "../data-entry/input.js";
-import { Label } from "../data-entry/label.js";
+import { FormField } from "../data-entry/form-field.js";
 function useOverlayOpenState({ open, defaultOpen, onOpenChange }) {
   const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? false);
   const isOpen = open ?? uncontrolled;
@@ -58,9 +59,11 @@ function DialogShell({
   const labels = React.useMemo(() => ({ titleId, descriptionId }), [titleId, descriptionId]);
   const dataState = state.isOpen ? "open" : "closed";
   useOverlayCloseFocus(state.isOpen, onCloseAutoFocus);
+  const overlayPortalContainer = useOverlayPortalContainer();
   return /* @__PURE__ */ jsx(
     ModalOverlay,
     {
+      UNSTABLE_portalContainer: overlayPortalContainer,
       isOpen: state.isOpen,
       onOpenChange: state.setOpen,
       isDismissable,
@@ -407,24 +410,21 @@ function AlertDialog({
       /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
       description ? /* @__PURE__ */ jsx(AlertDialogDescription, { children: description }) : null
     ] }),
-    needsPhrase && /* @__PURE__ */ jsxs("div", { className: "ui-stack-xs", children: [
-      /* @__PURE__ */ jsx(Label, { htmlFor: inputId, children: t("common.typeToConfirm", { phrase }) }),
-      /* @__PURE__ */ jsx(
-        Input,
-        {
-          id: inputId,
-          value: typed,
-          onChange: (e) => {
-            setTyped(e.target.value);
-          },
-          autoComplete: "off",
-          spellCheck: false,
-          placeholder: phrase,
-          "aria-required": "true",
-          disabled: busy
-        }
-      )
-    ] }),
+    needsPhrase && /* @__PURE__ */ jsx(FormField, { id: inputId, label: t("common.typeToConfirm", { phrase }), children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        id: inputId,
+        value: typed,
+        onChange: (e) => {
+          setTyped(e.target.value);
+        },
+        autoComplete: "off",
+        spellCheck: false,
+        placeholder: phrase,
+        "aria-required": "true",
+        disabled: busy
+      }
+    ) }),
     stepUpFailed && /* @__PURE__ */ jsx("p", { id: stepErrorId, role: "alert", className: "ui-dialog-step-up-error", children: t("feedback.alert.stepUpFailed") }),
     /* @__PURE__ */ jsxs(DialogFooter, { children: [
       /* @__PURE__ */ jsx(DialogCancel, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "ghost", disabled: busy, children: resolvedCancel }) }),

package/dist/components/feedback/sheet.js

@@ -1,5 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
 import * as React from "react";
 import { chain, mergeRefs } from "@react-aria/utils";
 import { Dialog as RacDialog, Modal, ModalOverlay } from "react-aria-components";
@@ -152,9 +153,11 @@ function SheetContent({
   const mergedStyle = widthSet ? { ...style, ["--sheet-width"]: toCssLength(width) } : style;
   const dataState = state.isOpen ? "open" : "closed";
   useOverlayCloseFocus(state.isOpen);
+  const overlayPortalContainer = useOverlayPortalContainer();
   return /* @__PURE__ */ jsx(
     ModalOverlay,
     {
+      UNSTABLE_portalContainer: overlayPortalContainer,
       isOpen: state.isOpen,
       onOpenChange: state.setOpen,
       isDismissable: true,

package/dist/components/feedback/tooltip.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { useOverlayPortalContainer } from "../../lib/overlay-portal.js";
 import * as React from "react";
 import { mergeRefs } from "@react-aria/utils";
 import {
@@ -74,9 +75,11 @@ function TooltipContent({
   forceMount: _forceMount,
   ...props
 }) {
+  const overlayPortalContainer = useOverlayPortalContainer();
   return /* @__PURE__ */ jsx(
     AriaTooltip,
     {
+      UNSTABLE_portalContainer: overlayPortalContainer,
       placement: toPlacement(side, align),
       offset: sideOffset,
       crossOffset: alignOffset,

package/dist/components/general/button.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "dashed" | "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+    variant?: "bare" | "dashed" | "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
     size?: "default" | "icon" | "icon-lg" | "icon-sm" | "icon-xs" | "lg" | "md" | "sm" | "xs" | null | undefined;
     shape?: "default" | "pill" | "sharp" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -10,6 +10,7 @@ export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAtt
     size?: import("../../props/index.js").ButtonSizeProp;
     shape?: import("../../props/index.js").ShapeProp;
     fullWidth?: boolean;
+    fill?: boolean;
     wrap?: boolean;
     align?: import("../../props/index.js").TextAlignProp;
     asChild?: import("../../props/index.js").AsChildProp;

package/dist/components/general/button.js

@@ -20,7 +20,11 @@ const buttonVariants = cva("ui-button", {
       dashed: "ui-button--dashed border border-dashed bg-background hover:bg-accent hover:text-accent-foreground",
       secondary: "ui-button--secondary bg-secondary text-secondary-foreground hover:bg-secondary/80",
       ghost: "ui-button--ghost hover:bg-accent hover:text-accent-foreground",
-      link: "ui-button--link text-primary underline-offset-4 hover:underline"
+      link: "ui-button--link text-primary underline-offset-4 hover:underline",
+      // NO utilities, deliberately: `bare` is the absence of geometry, and every property it has
+      // to unset (the size tier's height and inline inset) is declared in the components layer.
+      // A utility here would be the only thing that could out-rank it. See `.ui-button--bare`.
+      bare: "ui-button--bare"
     },
     size: {
       default: "ui-button--default-size",
@@ -52,6 +56,7 @@ const Button = React.forwardRef(
     size,
     shape,
     fullWidth = false,
+    fill = false,
     wrap = false,
     align = "center",
     asChild = false,
@@ -83,6 +88,7 @@ const Button = React.forwardRef(
         "data-size": size ?? "default",
         "data-shape": shape ?? "default",
         "data-full-width": fullWidth ? "" : void 0,
+        "data-fill": fill ? "" : void 0,
         "data-wrap": wrap ? "" : void 0,
         "data-align": align === "center" ? void 0 : align,
         "data-loading": isLoading ? "" : void 0,

package/dist/components/general/index.d.ts

@@ -8,3 +8,4 @@ export { Reveal } from "./reveal.js";
 export type { RevealProp, RevealProps } from "./reveal.js";
 export { Activity } from "./activity.js";
 export type { ActivityProp, ActivityProps } from "./activity.js";
+export { VisuallyHidden } from "./visually-hidden.js";

package/dist/components/general/index.js

@@ -3,6 +3,7 @@ import { Text, Heading } from "./typography.js";
 import { Logo } from "./logo.js";
 import { Reveal } from "./reveal.js";
 import { Activity } from "./activity.js";
+import { VisuallyHidden } from "./visually-hidden.js";
 export {
   Activity,
   Button,
@@ -10,5 +11,6 @@ export {
   Logo,
   Reveal,
   Text,
+  VisuallyHidden,
   buttonVariants
 };

package/dist/components/general/typography.d.ts

@@ -14,7 +14,10 @@ export declare const Text: React.ForwardRefExoticComponent<Omit<React.HTMLAttrib
     align?: import("../../props/index.js").TextAlignProp;
     truncate?: boolean;
     clamp?: number;
+    whitespace?: import("../../props/index.js").TextWhitespaceProp;
     tabular?: boolean;
+    decoration?: "none" | "underline" | "line-through";
+    chip?: boolean;
     mono?: boolean;
     htmlFor?: string;
     href?: string;

package/dist/components/general/typography.js

@@ -12,7 +12,10 @@ const Text = React.forwardRef(
     align,
     truncate,
     clamp,
+    whitespace,
     tabular,
+    decoration,
+    chip,
     mono,
     link,
     className,
@@ -21,6 +24,7 @@ const Text = React.forwardRef(
     ...props
   }, ref) => {
     const clampLines = typeof clamp === "number" && Number.isFinite(clamp) && clamp >= 1 ? Math.floor(clamp) : void 0;
+    const truncating = truncate === true && clampLines === void 0;
     if (typeof process !== "undefined" && process.env?.NODE_ENV !== "production") {
       if (clamp !== void 0 && clampLines === void 0) {
         console.warn(
@@ -32,6 +36,11 @@ const Text = React.forwardRef(
           "Text: `truncate` and `clamp` are mutually exclusive \u2014 `clamp` takes precedence; drop `truncate`."
         );
       }
+      if (whitespace === "pre-wrap" && truncating) {
+        console.warn(
+          'Text: `truncate` and `whitespace="pre-wrap"` are mutually exclusive \u2014 `truncate` takes precedence (one line, one ellipsis); use `clamp` to keep preserved line breaks and still bound the height.'
+        );
+      }
     }
     const typography = {
       "data-slot": "text",
@@ -40,10 +49,15 @@ const Text = React.forwardRef(
       "data-link": link ? "" : void 0,
       "data-weight": weight,
       "data-align": align,
-      "data-truncate": truncate && clampLines === void 0 ? "" : void 0,
+      "data-truncate": truncating ? "" : void 0,
       "data-clamp": clampLines !== void 0 ? "" : void 0,
+      // Inert default: `normal` is CSS's own behaviour, so it emits no attribute and there is no
+      // `[data-whitespace="normal"]` rule to lose a specificity argument with anything.
+      "data-whitespace": whitespace === "pre-wrap" && !truncating ? "pre-wrap" : void 0,
       style: clampLines !== void 0 ? { ...style, "--text-clamp": clampLines } : style,
       "data-tabular": tabular ? "" : void 0,
+      "data-decoration": decoration,
+      "data-chip": chip ? "" : void 0,
       "data-mono": mono ? "" : void 0,
       className: cn("ui-text", className),
       ...props

package/dist/components/general/visually-hidden.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+/** Accessible text without a visible layout box. */
+export declare const VisuallyHidden: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/general/visually-hidden.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const VisuallyHidden = React.forwardRef(function VisuallyHidden2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx("span", { ...props, ref, className: cn("sr-only", className) });
+});
+export {
+  VisuallyHidden
+};

package/dist/components/layout/app-launcher.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import type { AppLauncherProp } from "../../props/components/layout.prop.js";
+export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppLauncherProp as AppLauncherProps, } from "../../props/components/layout.prop.js";
+/** Arbitrary `data-*` hooks — the one escape hatch this closed component keeps open. */
+type DataAttributes = {
+    [key: `data-${string}`]: string | number | boolean | undefined;
+};
+/**
+ * AppLauncher — the nine-dot app grid in the topbar: the platform's standard way to change app.
+ *
+ * THE TRIGGER IS A `TopbarItem`, NOT A `Button`. A bar cell is as tall as the bar, its hover IS the
+ * bar's surface, and its focus mark is hosted inside it; a `Button variant="ghost"` in the same slot
+ * draws a `--control-height` pill floating in a taller strip, with its own hover fill and its own
+ * ring drawn around that pill. That was the 20.0.0 correction, and it is why nothing here emits a
+ * height: the cell stretches to whatever the bar's height happens to be (`--app-shell-bar-height`,
+ * `--topbar-height`, or the coarse-pointer override), so it names none of them.
+ *
+ * The panel is the SAME responsive contract as `OrgSwitcher`: a desktop popover above
+ * `--sheet-responsive-breakpoint-width` and a focus-trapped bottom Sheet at/below it, through the
+ * shared `useSheetResponsiveMode()` hook rather than a component-local media query.
+ *
+ * ## Related — two components this is repeatedly confused with
+ *
+ * - `ServiceLauncherCard` (data-display) is a launcher tile too, but a PAGE-SIZED one: status,
+ *   hostname, plan, an action button, a reason it is locked. It belongs on a service-catalogue page,
+ *   where choosing is a considered act. The tile here is bar-sized — mark plus name, the whole tile
+ *   one link — because changing app is a reflex. Neither is built out of the other, and a grid of
+ *   `ServiceLauncherCard`s inside a popover is the wrong component, not a smaller version of this.
+ * - `AppShellProp.navRail` says the SAME platform scope as a docked column. Pick ONE: the launcher
+ *   for a platform with MANY apps where switching is occasional (Google Workspace), the rail for a
+ *   single product where switching workspace is constant enough to be worth permanent screen width
+ *   (Slack). Shipping both puts one scope in two places and makes neither authoritative.
+ */
+export declare function AppLauncher({ apps, groups, labels, columns, linkComponent, loading, error, onRetry, responsive, appearance, side, align, open, onOpenChange, className, ...rest }: AppLauncherProp & Pick<React.ComponentPropsWithoutRef<"button">, "id"> & DataAttributes): React.JSX.Element;

package/dist/components/layout/app-launcher.js

@@ -0,0 +1,261 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Grip, Loader2, RotateCcw } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "../feedback/dialog.js";
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetHeader,
+  SheetTrigger,
+  useSheetResponsiveMode
+} from "../feedback/sheet.js";
+import { Button } from "../general/button.js";
+import { TopbarItem } from "./topbar-item.js";
+function AppMark({ app }) {
+  return /* @__PURE__ */ jsx("span", { className: "ui-app-launcher-mark", "aria-hidden": "true", children: app.icon ?? app.name.trim().charAt(0).toUpperCase() });
+}
+function AppLauncherTile({
+  app,
+  linkComponent: Link,
+  externalHint,
+  close
+}) {
+  const children = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(AppMark, { app }),
+    /* @__PURE__ */ jsx("span", { className: "ui-app-launcher-name", children: app.name }),
+    app.external && externalHint != null ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: externalHint }) : null
+  ] });
+  const linkProps = {
+    href: app.href,
+    className: "ui-app-launcher-tile ui-focus-ring",
+    "data-active": app.current ? "true" : void 0,
+    "aria-current": app.current ? "page" : void 0,
+    onClick: close,
+    children
+  };
+  return /* @__PURE__ */ jsx("li", { className: "ui-app-launcher-cell", "data-app": app.id, children: app.external || Link == null ? /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...linkProps,
+      target: app.external ? "_blank" : void 0,
+      rel: app.external ? "noreferrer noopener" : void 0
+    }
+  ) : /* @__PURE__ */ jsx(Link, { ...linkProps }) });
+}
+function AppLauncherGrid({
+  apps,
+  linkComponent,
+  externalHint,
+  close,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx("ul", { className: "ui-app-launcher-grid", ...props, children: apps.map((app) => /* @__PURE__ */ jsx(
+    AppLauncherTile,
+    {
+      app,
+      linkComponent,
+      externalHint,
+      close
+    },
+    app.id
+  )) });
+}
+function AppLauncherSection({
+  label,
+  apps,
+  linkComponent,
+  externalHint,
+  close
+}) {
+  const labelId = React.useId();
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": labelId, className: "ui-app-launcher-group", children: [
+    /* @__PURE__ */ jsx("span", { id: labelId, className: "ui-app-launcher-group-label", children: label }),
+    /* @__PURE__ */ jsx(
+      AppLauncherGrid,
+      {
+        apps,
+        linkComponent,
+        externalHint,
+        close
+      }
+    )
+  ] });
+}
+function AppLauncherPanel({
+  apps,
+  groups,
+  labels,
+  columns,
+  linkComponent,
+  loading,
+  error,
+  onRetry,
+  close
+}) {
+  if (loading) {
+    return /* @__PURE__ */ jsxs("div", { className: "ui-app-launcher-state", role: "status", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "ui-app-launcher-spinner", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx("span", { children: labels.loading })
+    ] });
+  }
+  if (error != null) {
+    return /* @__PURE__ */ jsxs("div", { className: "ui-app-launcher-state", role: "alert", children: [
+      /* @__PURE__ */ jsx("span", { children: error }),
+      onRetry != null ? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: onRetry, children: [
+        /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" }),
+        labels.retry
+      ] }) : null
+    ] });
+  }
+  if (!apps.length && (groups ?? []).every((group) => !group.apps.length)) {
+    return /* @__PURE__ */ jsx("div", { className: "ui-app-launcher-state", role: "status", children: /* @__PURE__ */ jsx("span", { children: labels.empty }) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "ui-app-launcher-panel",
+      style: columns == null ? void 0 : { "--app-launcher-columns": String(columns) },
+      children: [
+        apps.length ? /* @__PURE__ */ jsx(
+          AppLauncherGrid,
+          {
+            apps,
+            linkComponent,
+            externalHint: labels.externalHint,
+            close,
+            "aria-label": labels.title
+          }
+        ) : null,
+        groups?.map((group) => /* @__PURE__ */ jsx(
+          AppLauncherSection,
+          {
+            label: group.label,
+            apps: group.apps,
+            linkComponent,
+            externalHint: labels.externalHint,
+            close
+          },
+          group.label
+        ))
+      ]
+    }
+  );
+}
+function AppLauncher({
+  apps,
+  groups,
+  labels,
+  columns,
+  linkComponent,
+  loading = false,
+  error,
+  onRetry,
+  responsive = "auto",
+  appearance = "bar",
+  side,
+  align,
+  open,
+  onOpenChange,
+  className,
+  ...rest
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const controlled = open !== void 0;
+  const resolvedOpen = controlled ? open : uncontrolledOpen;
+  const setOpen = React.useCallback(
+    (nextOpen) => {
+      if (!controlled) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [controlled, onOpenChange]
+  );
+  const compactViewport = useSheetResponsiveMode("auto") === "bottom";
+  const sheet = responsive === "sheet" || responsive === "auto" && compactViewport;
+  const launchpad = responsive === "fullscreen";
+  const close = React.useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const triggerProps = {
+    className: cn("ui-app-launcher-trigger", className),
+    "aria-label": labels.trigger,
+    ...rest
+  };
+  const trigger = appearance === "bar" ? /* @__PURE__ */ jsx(TopbarItem, { ...triggerProps, children: /* @__PURE__ */ jsx(Grip, { "aria-hidden": "true" }) }) : /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon-sm", ...triggerProps, children: /* @__PURE__ */ jsx(Grip, { "aria-hidden": "true" }) });
+  const panel = /* @__PURE__ */ jsx(
+    AppLauncherPanel,
+    {
+      apps,
+      groups,
+      labels,
+      columns,
+      linkComponent,
+      loading,
+      error,
+      onRetry,
+      close
+    }
+  );
+  if (launchpad) {
+    return /* @__PURE__ */ jsxs(Dialog, { open: resolvedOpen, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsxs(
+        DialogContent,
+        {
+          className: "ui-app-launcher-launchpad",
+          overlayClassName: "ui-app-launcher-launchpad-overlay",
+          children: [
+            /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: labels.title }) }),
+            panel
+          ]
+        }
+      )
+    ] });
+  }
+  if (sheet) {
+    return /* @__PURE__ */ jsxs(Sheet, { open: resolvedOpen, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsxs(
+        SheetContent,
+        {
+          responsive: "bottom",
+          className: "ui-app-launcher-sheet",
+          style: {
+            "--sheet-bottom-max-height": "var(--app-launcher-sheet-max-height)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(SheetHeader, { title: labels.title }),
+            /* @__PURE__ */ jsx(SheetBody, { children: panel })
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open: resolvedOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        side: side ?? (appearance === "bar" ? "bottom" : "right"),
+        align: align ?? (appearance === "bar" ? "end" : "start"),
+        className: "ui-app-launcher-popover",
+        "aria-label": labels.title,
+        children: panel
+      }
+    )
+  ] });
+}
+export {
+  AppLauncher
+};

package/dist/components/layout/app-shell.d.ts

@@ -1,4 +1,6 @@
 import * as React from "react";
 import type { AppShellProp } from "../../props/components/layout.prop.js";
 export type { AppShellProp, AppShellProp as AppShellProps, } from "../../props/components/layout.prop.js";
-export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, topbarSpan, navRail, navRailLabel, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;
+/** Same rail boundary as shell-layout.css; SSR starts in docked mode. */
+export declare function useAppShellNavigationMode(): "drawer" | "docked";
+export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, topbarSpan, navRail, navRailPosition, navRailEnd, navRailLabel, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;