@astryxdesign/core 0.0.0-bootstrap.0 → 0.0.15

package/dist/AppShell/AppShell.js

@@ -0,0 +1,485 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import React from 'react';
+
+/**
+ * @file AppShell.tsx
+ * @input Uses React, Layout, LayoutHeader, LayoutPanel, LayoutContent, StyleX
+ * @output Exports AppShell component and AppShellProps type
+ * @position Application-level layout shell — the top-level wrapper for any app.
+ *   Composes Layout internally to provide header, sideNav, and main content areas.
+ *   Use for any app that needs a top nav, side navigation, and scrollable content.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/AppShell/AppShell.doc.mjs
+ * - /packages/core/src/AppShell/index.ts
+ * - /packages/core/src/AppShell/AppShell.test.tsx
+ * - /apps/storybook/stories/AppShell.stories.tsx
+ * - /packages/cli/templates/blocks/components/AppShell/ (showcase blocks)
+ */
+
+import { isValidElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import "../theme/tokens.stylex.js";
+import { colorVars, fontWeightVars, radiusVars, spacingVars, typeScaleVars } from "../theme/tokens.stylex.js";
+import { Layout } from "../Layout/Layout.js";
+import { LayoutHeader } from "../Layout/LayoutHeader.js";
+import { LayoutPanel } from "../Layout/LayoutPanel.js";
+import { LayoutContent } from "../Layout/LayoutContent.js";
+import { MobileNavToggle } from "../MobileNav/MobileNavToggle.js";
+import { SideNavRenderContext } from "../SideNav/SideNavRenderContext.js";
+import { TopNavRenderContext } from "../TopNav/TopNavRenderContext.js";
+import { TopNavMobileContentContext } from "../TopNav/TopNavMobileContentContext.js";
+import { AppShellMobileContext } from "./AppShellMobileContext.js";
+import { mergeProps, mergeRefs, isRenderable } from "../utils/index.js";
+import { useMediaQuery } from "../hooks/useMediaQuery.js";
+import { observeResize, unobserveResize } from "../utils/sharedResizeObserver.js";
+import { xdsThemeProps } from "../utils/xdsThemeProps.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const HasActivity = typeof React.Activity !== 'undefined';
+const ActivityWrapper = HasActivity ? ({
+  mode,
+  children
+}) => /*#__PURE__*/_jsx(React.Activity, {
+  mode: mode,
+  children: children
+}) : ({
+  children
+}) => /*#__PURE__*/_jsx(_Fragment, {
+  children: children
+});
+
+// =============================================================================
+// Constants
+// =============================================================================
+
+const BREAKPOINT_VALUES = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  none: 0
+};
+const MAIN_CONTENT_ID = 'astryx-app-shell-main';
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * SideNav breakpoint options.
+ * - `sm`: 640px
+ * - `md`: 768px
+ * - `lg`: 1024px
+ * - `none`: Never auto-collapse
+ */
+
+/**
+ * Navigation background style:
+ * - `wash`: Nav areas use wash background, no dividers
+ * - `surface`: Nav areas use surface background, no dividers
+ * - `section`: Dividers between nav and content (classic look)
+ * - `elevated`: Wash nav background with elevated surface content + border radius
+ * @default 'elevated'
+ */
+/**
+ * Extensible variant map for AppShell.
+ *
+ * Theme packages can add custom variants via TypeScript module augmentation:
+ * @example
+ * ```
+ * declare module '@astryxdesign/core/AppShell' {
+ *   interface AppShellVariantMap {
+ *     'glass': true;
+ *   }
+ * }
+ * ```
+ */
+
+/**
+ * Navigation background style. Extensible via module augmentation of AppShellVariantMap.
+ */
+
+/**
+ * Configuration object for mobile navigation behavior.
+ * Used when you need to customize the auto mobile nav without replacing it entirely.
+ */
+
+// =============================================================================
+// Styles
+// =============================================================================
+
+const styles = {
+  root: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kVAEAm: "x1n2onr6",
+    $$css: true
+  },
+  variantWash: {
+    kWkggS: "x1eiddq6",
+    $$css: true
+  },
+  variantSurface: {
+    kWkggS: "x10xzikg",
+    $$css: true
+  },
+  variantSection: {
+    kWkggS: "x10xzikg",
+    $$css: true
+  },
+  variantElevated: {
+    kWkggS: "x1eiddq6",
+    $$css: true
+  },
+  rootFill: {
+    kZKoxP: "xtdtrs8",
+    $$css: true
+  },
+  rootAuto: {
+    kAzted: "x1ov3xa9",
+    $$css: true
+  },
+  contentBgSurface: {
+    kWkggS: "x10xzikg",
+    $$css: true
+  },
+  contentBgWash: {
+    kWkggS: "x1eiddq6",
+    $$css: true
+  },
+  contentBgTransparent: {
+    kWkggS: "xjbqb8w",
+    kHBbk8: "xc8icb0",
+    $$css: true
+  },
+  navAreaWash: {
+    kWkggS: "x1eiddq6",
+    $$css: true
+  },
+  navAreaSurface: {
+    kWkggS: "x10xzikg",
+    $$css: true
+  },
+  banner: {
+    kmuXW: "x2lah0s",
+    $$css: true
+  },
+  headerSticky: {
+    kVAEAm: "x7wzq59",
+    k87sOh: "x13vifvy",
+    kY2c9j: "x1vjfegm",
+    $$css: true
+  },
+  panelAutoFill: {
+    kUk6DE: "x98rzlu",
+    kVQacm: "xysyzu8",
+    $$css: true
+  }
+};
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * Application-level layout shell. Provides the structural frame for an app:
+ * top navigation, side navigation, and main content area.
+ *
+ * Slot-based API with `topNav`, `sideNav`, `banner`, and `children`.
+ * Supports two height modes (`fill` and `auto`), responsive side nav
+ * collapse, and mobile overlay with backdrop.
+ *
+ * @example
+ * ```
+ * <AppShell
+ *   topNav={<TopNav label="Navigation" heading={<TopNavHeading heading="My App" />} />}
+ *   sideNav={<SideNav>{navSections}</SideNav>}
+ *   mobileNav={
+ *     <MobileNav isOpen={mobileOpen} onOpenChange={(open) => setMobileOpen(open)} title="My App">
+ *       {navSections}
+ *     </MobileNav>
+ *   }>
+ *   <Content />
+ * </AppShell>
+ * ```
+ */
+export function AppShell({
+  variant = 'elevated',
+  banner,
+  children,
+  contentPadding,
+  'data-testid': dataTestId,
+  height = 'fill',
+  mobileNav,
+  sideNav,
+  topNav,
+  xstyle,
+  className,
+  style,
+  ref
+}) {
+  // =========================================================================
+  // Parse mobileNav prop — normalize to config, custom element, or disabled
+  // =========================================================================
+  const mobileNavDisabled = mobileNav === false;
+  const mobileNavConfig = mobileNav != null && mobileNav !== false && typeof mobileNav === 'object' && ! /*#__PURE__*/isValidElement(mobileNav) ? mobileNav : null;
+  const sideNavBreakpoint = mobileNavConfig?.breakpoint ?? 'md';
+  // ReactNode shorthand — user provides <MobileNav> directly as the prop
+  const mobileNavReactNode = mobileNav != null && mobileNav !== false && (/*#__PURE__*/isValidElement(mobileNav) || typeof mobileNav === 'string') ? mobileNav : null;
+  // Custom content from config object
+  const mobileNavConfigContent = mobileNavConfig?.content ?? null;
+  const mobileNavHasToggle = mobileNavConfig?.hasToggle !== false;
+  const mobileNavIsControlled = mobileNavConfig?.isOpen !== undefined;
+
+  // =========================================================================
+  // Slot presence — checks whether slot containers have rendered DOM content.
+  // Refs are attached to wrapper divs around each slot; a MutationObserver
+  // checks childNodes to track whether each slot has rendered content.
+  // =========================================================================
+
+  // =========================================================================
+  // Mobile nav open state (controlled + uncontrolled)
+  // =========================================================================
+  const breakpointQuery = sideNavBreakpoint === 'none' ? '(max-width: 0px)' : `(max-width: ${BREAKPOINT_VALUES[sideNavBreakpoint]}px)`;
+  const isBelowBreakpoint = useMediaQuery(breakpointQuery, mobileNavConfig?.defaultIsMobile);
+  const [uncontrolledMobileOpen, setUncontrolledMobileOpen] = useState(false);
+  const isMobileNavOpen = mobileNavConfig?.isOpen ?? uncontrolledMobileOpen;
+  const setMobileNavOpen = useCallback(open => {
+    if (!mobileNavIsControlled) {
+      setUncontrolledMobileOpen(open);
+    }
+    mobileNavConfig?.onOpenChange?.(open);
+  }, [mobileNavIsControlled, mobileNavConfig]);
+  const isFill = height === 'fill';
+  const isAuto = height === 'auto';
+
+  // Nav style derived values
+  const hasBanner = isRenderable(banner);
+  const hasTopNav = isRenderable(topNav);
+  const hasSideNav = isRenderable(sideNav);
+  const hasNavContent = hasTopNav || hasSideNav;
+  const mobileNavEnabled = !mobileNavDisabled && hasNavContent && mobileNavReactNode == null;
+  const navHasDividers = variant === 'section';
+  const isElevated = variant === 'elevated';
+  const navAreaStyle = variant === 'wash' || variant === 'elevated' ? styles.navAreaWash : variant === 'surface' ? styles.navAreaSurface : undefined;
+  const contentAreaStyle = variant === 'wash' ? styles.contentBgWash : variant === 'elevated' && hasTopNav && hasSideNav && !isBelowBreakpoint ? styles.contentBgTransparent : variant === 'surface' || variant === 'elevated' ? styles.contentBgSurface : undefined;
+
+  // Background for sticky elements in auto mode — must be opaque so content
+  // doesn't show through when scrolling underneath. Uses the nav area bg if
+  // set, otherwise falls back to the shell variant bg (always surface for section).
+  const stickyBgStyle = navAreaStyle ?? styles.navAreaSurface;
+
+  // =========================================================================
+  // Header height measurement for sticky sideNav offset (auto mode)
+  // =========================================================================
+  const headerRef = useRef(null);
+  const shellRef = useRef(null);
+  useEffect(() => {
+    if (!isAuto || !headerRef.current || !shellRef.current) {
+      return;
+    }
+    const headerEl = headerRef.current;
+    const shellEl = shellRef.current;
+    const updateHeight = () => {
+      const height = headerEl.getBoundingClientRect().height;
+      shellEl.style.setProperty('--appshell-header-height', `${height}px`);
+    };
+    observeResize(headerEl, () => updateHeight());
+    return () => unobserveResize(headerEl);
+  }, [isAuto]);
+
+  // =========================================================================
+  // Determine if sideNav should show as overlay (mobile) or inline
+  // =========================================================================
+  const showSideNavInline = hasSideNav && !isBelowBreakpoint;
+
+  // Mobile nav rendering modes:
+  // 1. ReactNode shorthand — user provided <MobileNav> directly
+  const shouldRenderMobileNavReactNode = mobileNavReactNode != null;
+  // 2. Config with custom content
+  const shouldRenderConfigContent = mobileNavEnabled && mobileNavConfigContent != null && isBelowBreakpoint;
+
+  // =========================================================================
+  // Mobile context — shared with MobileNavToggle and future TopNav mobile
+  // =========================================================================
+  const mobileContextValue = useMemo(() => ({
+    isMobile: isBelowBreakpoint,
+    isMobileNavOpen,
+    toggleMobileNav: () => mobileNavEnabled && setMobileNavOpen(!isMobileNavOpen),
+    openMobileNav: () => mobileNavEnabled && setMobileNavOpen(true),
+    closeMobileNav: () => setMobileNavOpen(false),
+    isMobileNavEnabled: mobileNavEnabled,
+    hasAutoToggle: mobileNavHasToggle
+  }), [isBelowBreakpoint, isMobileNavOpen, setMobileNavOpen, mobileNavEnabled, mobileNavHasToggle]);
+
+  // =========================================================================
+  // Build header content (topNav + banner)
+  //
+  // In auto mode, the header wrapper gets sticky positioning so the topNav
+  // stays pinned while the page scrolls. The ref is used to measure header
+  // height for the sideNav's sticky offset.
+  // =========================================================================
+  // When below breakpoint, TopNav renders in mobile-bar mode (heading + endContent + toggle).
+  // Wrap with mobile content context so TopNav knows there's SideNav content
+  // in the drawer and shows the toggle even without its own collapsible items.
+  const mobileContentValue = hasSideNav && mobileNavHasToggle ?
+  /*#__PURE__*/
+  // eslint-disable-next-line @eslint-react/no-unstable-context-value -- context transports ReactNode; instability is inherent
+  _jsx(SideNavRenderContext, {
+    value: "drawer-content",
+    children: sideNav
+  }) : null;
+  const drawerMobileContentValue = hasSideNav ?
+  /*#__PURE__*/
+  // eslint-disable-next-line @eslint-react/no-unstable-context-value -- context transports ReactNode; instability is inherent
+  _jsx(SideNavRenderContext, {
+    value: "drawer-content",
+    children: sideNav
+  }) : null;
+  const topNavContent = hasTopNav ? isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null ? /*#__PURE__*/_jsx(TopNavMobileContentContext, {
+    value: mobileContentValue,
+    children: /*#__PURE__*/_jsx(TopNavRenderContext, {
+      value: "mobile-bar",
+      children: topNav
+    })
+  }) : topNav : null;
+  const headerInner = hasTopNav || hasBanner ? /*#__PURE__*/_jsxs(LayoutHeader, {
+    padding: 0,
+    hasDivider: navHasDividers && hasTopNav,
+    children: [hasBanner && /*#__PURE__*/_jsx("div", {
+      ...stylex.props(styles.banner, navAreaStyle),
+      children: banner
+    }), hasTopNav && topNavContent]
+  }) : undefined;
+  const headerContent = headerInner != null ? /*#__PURE__*/_jsx("div", {
+    ref: headerRef,
+    ...mergeProps(xdsThemeProps('app-shell-header', {
+      variant
+    }), stylex.props(navAreaStyle, isAuto && styles.headerSticky)),
+    children: headerInner
+  }) : undefined;
+
+  // =========================================================================
+  // Build sideNav content
+  //
+  // In auto mode, the sideNav panel is not internally scrollable (the page
+  // scrolls as a whole), but it gets sticky positioning so it stays pinned
+  // below the header while the main content scrolls. A wrapper div applies
+  // the sticky behavior since LayoutPanel doesn't accept style/className.
+  // =========================================================================
+  const sideNavPanel = showSideNavInline ? /*#__PURE__*/_jsx(LayoutPanel, {
+    padding: 0,
+    hasDivider: navHasDividers,
+    isScrollable: isFill,
+    ...xdsThemeProps('app-shell-sidenav', {
+      variant
+    }),
+    xstyle: [navAreaStyle, isAuto && stickyBgStyle, isAuto && styles.panelAutoFill],
+    children: sideNav
+  }) : undefined;
+  const sideNavContent = sideNavPanel != null && isAuto ? /*#__PURE__*/_jsx("div", {
+    ...{
+      className: "x2lah0s x7giv3 x7wzq59 xepuwc7 x16zugyo x78zum5 xdt5ytf"
+    },
+    children: sideNavPanel
+  }) : sideNavPanel;
+
+  // =========================================================================
+  // Build main content
+  // =========================================================================
+  const shouldElevateWithCorner = isElevated && hasTopNav && showSideNavInline;
+  const mainInner = /*#__PURE__*/_jsx(LayoutContent, {
+    padding: contentPadding ?? 0,
+    role: "main",
+    id: MAIN_CONTENT_ID,
+    isScrollable: isFill,
+    xstyle: contentAreaStyle,
+    children: children
+  });
+  const mainContent = shouldElevateWithCorner ? /*#__PURE__*/_jsxs("div", {
+    ...{
+      className: "x1n2onr6 x78zum5 x98rzlu x2lwn1j x5yr21d"
+    },
+    children: [/*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x10l6tqk x10a8y8t x10xzikg x183tx6i x47corl"
+      }
+    }), mainInner]
+  }) : mainInner;
+
+  // =========================================================================
+  // Render
+  //
+  // TODO: Include root providers (ThemeProvider, ProseProvider, LayerProvider)
+  // at the app level once they're available for wrapping.
+  // =========================================================================
+  // =========================================================================
+  // Build auto mobile nav hamburger for TopNav
+  // Injected into the headerContent when mobileNav is enabled and hasToggle
+  // =========================================================================
+  const shouldShowAutoToggle = !mobileNavDisabled && mobileNavHasToggle && isBelowBreakpoint;
+
+  // For sidenav-only layouts with no TopNav, render the sideNav in topbar
+  // mode — it shows heading + footer icons horizontally, with the hamburger
+  const autoMobileTopBar = shouldShowAutoToggle && !hasTopNav && hasSideNav ? /*#__PURE__*/_jsx("div", {
+    ...mergeProps(xdsThemeProps('app-shell-header', {
+      variant
+    }), stylex.props(navAreaStyle, isAuto && styles.headerSticky)),
+    children: /*#__PURE__*/_jsx(LayoutHeader, {
+      padding: 0,
+      hasDivider: navHasDividers,
+      children: /*#__PURE__*/_jsxs("div", {
+        ...{
+          className: "x78zum5 x6s0dn4 x1k15mir xf314gf"
+        },
+        role: "navigation",
+        "aria-label": "Mobile navigation",
+        children: [/*#__PURE__*/_jsx(SideNavRenderContext, {
+          value: "topbar",
+          children: sideNav
+        }), /*#__PURE__*/_jsx(MobileNavToggle, {})]
+      })
+    })
+  }) : undefined;
+  return /*#__PURE__*/_jsx(AppShellMobileContext, {
+    value: mobileContextValue,
+    children: /*#__PURE__*/_jsxs("div", {
+      ref: mergeRefs(ref, shellRef),
+      "data-testid": dataTestId,
+      ...mergeProps(xdsThemeProps('app-shell', {
+        variant
+      }), stylex.props(styles.root, variant === 'wash' ? styles.variantWash : variant === 'surface' ? styles.variantSurface : variant === 'section' ? styles.variantSection : styles.variantElevated, isFill ? styles.rootFill : styles.rootAuto, xstyle), className, style),
+      children: [/*#__PURE__*/_jsx("a", {
+        href: `#${MAIN_CONTENT_ID}`,
+        ...{
+          className: "x10l6tqk x1xrnuwo x1i1rx1s x1jqxupm xjm9jq1 x15cytp8 xt970qd xh2mrf5 xnjsko4 x1cf3d6k xkdpibf x1y5lnwp xb3r6kr xomzh7y x1hyvwdk x1rsz1da xuxw1ft x1hbpcn8 xc342km x13vifvy x1rw3289 x1o0tod xodanix x10xzikg xjse4m1 x1q2oy4v x1hl2dhg x2mo6ok xjm74w1"
+        },
+        "data-testid": "skip-to-content",
+        children: "Skip to content"
+      }), /*#__PURE__*/_jsx(Layout, {
+        height: height,
+        padding: 0,
+        header: /*#__PURE__*/_jsxs(_Fragment, {
+          children: [headerContent, autoMobileTopBar]
+        }),
+        start: sideNavContent,
+        content: mainContent
+      }), shouldRenderMobileNavReactNode && mobileNavReactNode, shouldRenderConfigContent && mobileNavConfigContent, isBelowBreakpoint && !mobileNavDisabled && mobileNavReactNode == null && !mobileNavConfigContent && /*#__PURE__*/_jsxs(ActivityWrapper, {
+        mode: isMobileNavOpen ? 'visible' : 'hidden',
+        children: [hasSideNav && !hasTopNav && /*#__PURE__*/_jsx(SideNavRenderContext, {
+          value: "drawer",
+          children: sideNav
+        }), hasTopNav && /*#__PURE__*/_jsx(TopNavMobileContentContext, {
+          value: drawerMobileContentValue,
+          children: /*#__PURE__*/_jsx(TopNavRenderContext, {
+            value: "drawer",
+            children: topNav
+          })
+        })]
+      })]
+    })
+  });
+}
+AppShell.displayName = 'AppShell';

package/dist/AppShell/AppShellMobileContext.d.ts

@@ -0,0 +1,22 @@
+export interface AppShellMobileContextValue {
+    /** Whether the viewport is below the mobile breakpoint */
+    isMobile: boolean;
+    /** Whether the mobile nav drawer is currently open */
+    isMobileNavOpen: boolean;
+    /** Toggle the mobile nav drawer open/closed */
+    toggleMobileNav: () => void;
+    /** Open the mobile nav drawer */
+    openMobileNav: () => void;
+    /** Close the mobile nav drawer */
+    closeMobileNav: () => void;
+    /** Whether mobile nav is enabled at all */
+    isMobileNavEnabled: boolean;
+    /** Whether auto-placed toggles should render (false in customToggle mode) */
+    hasAutoToggle: boolean;
+}
+export declare const AppShellMobileContext: import("react").Context<AppShellMobileContextValue>;
+/**
+ * Hook to access mobile nav state from anywhere in the AppShell tree.
+ */
+export declare function useAppShellMobile(): AppShellMobileContextValue;
+//# sourceMappingURL=AppShellMobileContext.d.ts.map

package/dist/AppShell/AppShellMobileContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShellMobileContext.d.ts","sourceRoot":"","sources":["../../src/AppShell/AppShellMobileContext.tsx"],"names":[],"mappings":"AAiBA,MAAM,WAAW,0BAA0B;IACzC,0DAA0D;IAC1D,QAAQ,EAAE,OAAO,CAAC;IAClB,sDAAsD;IACtD,eAAe,EAAE,OAAO,CAAC;IACzB,+CAA+C;IAC/C,eAAe,EAAE,MAAM,IAAI,CAAC;IAC5B,iCAAiC;IACjC,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,kCAAkC;IAClC,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,2CAA2C;IAC3C,kBAAkB,EAAE,OAAO,CAAC;IAC5B,6EAA6E;IAC7E,aAAa,EAAE,OAAO,CAAC;CACxB;AAYD,eAAO,MAAM,qBAAqB,qDACuB,CAAC;AAG1D;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,0BAA0B,CAE9D"}

package/dist/AppShell/AppShellMobileContext.js

@@ -0,0 +1,33 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file AppShellMobileContext.tsx
+ * @input Uses React createContext, use
+ * @output Exports AppShellMobileContext, useAppShellMobile
+ * @position Internal context for mobile nav state; consumed by MobileNavToggle, TopNav (future)
+ *
+ * Provides mobile navigation state to any component in the AppShell tree.
+ * Used by MobileNavToggle to open/close the drawer and by TopNav (future)
+ * to adapt rendering based on mobile context.
+ */
+import { createContext, use } from 'react';
+const defaultValue = {
+  isMobile: false,
+  isMobileNavOpen: false,
+  toggleMobileNav: () => {},
+  openMobileNav: () => {},
+  closeMobileNav: () => {},
+  isMobileNavEnabled: false,
+  hasAutoToggle: true
+};
+export const AppShellMobileContext = /*#__PURE__*/createContext(defaultValue);
+AppShellMobileContext.displayName = 'AppShellMobileContext';
+
+/**
+ * Hook to access mobile nav state from anywhere in the AppShell tree.
+ */
+export function useAppShellMobile() {
+  return use(AppShellMobileContext);
+}

package/dist/AppShell/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @file index.ts
+ * @input Imports AppShell component and types from AppShell.tsx
+ * @output Exports AppShell and related types
+ * @position Component entry point; re-exported by /packages/core/src/index.ts
+ *
+ * SYNC: When modified, update this header and /packages/core/src/AppShell/AppShell.doc.mjs
+ */
+export { AppShell } from './AppShell';
+export type { AppShellProps, AppShellBreakpoint, AppShellVariant, AppShellVariantMap, MobileNavConfig, } from './AppShell';
+export { useAppShellMobile, AppShellMobileContext, } from './AppShellMobileContext';
+export type { AppShellMobileContextValue } from './AppShellMobileContext';
+//# sourceMappingURL=index.d.ts.map

package/dist/AppShell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/AppShell/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,QAAQ,EAAC,MAAM,YAAY,CAAC;AACpC,YAAY,EACV,aAAa,EACb,kBAAkB,EAClB,eAAe,EACf,kBAAkB,EAClB,eAAe,GAChB,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,iBAAiB,EACjB,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAC,0BAA0B,EAAC,MAAM,yBAAyB,CAAC"}

package/dist/AppShell/index.js

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Imports AppShell component and types from AppShell.tsx
+ * @output Exports AppShell and related types
+ * @position Component entry point; re-exported by /packages/core/src/index.ts
+ *
+ * SYNC: When modified, update this header and /packages/core/src/AppShell/AppShell.doc.mjs
+ */
+export { AppShell } from "./AppShell.js";
+export { useAppShellMobile, AppShellMobileContext } from "./AppShellMobileContext.js";

package/dist/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,81 @@
+/**
+ * @file AspectRatio.tsx
+ * @input Uses React, stylex
+ * @output Exports AspectRatio component and AspectRatioProps
+ * @position AspectRatio component; maintains a specific aspect ratio for its children
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/AspectRatio/AspectRatio.doc.mjs
+ * - /packages/core/src/AspectRatio/AspectRatio.test.tsx
+ * - /apps/storybook/stories/AspectRatio.stories.tsx
+ * - /packages/cli/templates/blocks/components/AspectRatio/ (showcase blocks)
+ */
+import type { ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+/**
+ * The shape of the aspect ratio container.
+ * - `rectangle`: standard rectangular container (default).
+ * - `ellipse`: clips the container to an ellipse. Combined with the `ratio`,
+ *   this renders a circle at `ratio={1}` and an oval at non-square ratios.
+ */
+export type AspectRatioShape = 'rectangle' | 'ellipse';
+export interface AspectRatioProps extends BaseProps<HTMLDivElement> {
+    /** Ref forwarded to the root element */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * The aspect ratio as width/height (e.g., 16/9 = 1.777..., 4/3 = 1.333..., 1 for square).
+     */
+    ratio: number;
+    /**
+     * The shape of the container. Both shapes respect the provided `ratio`.
+     * - `rectangle` (default): a standard rectangular container.
+     * - `ellipse`: clips the container to an ellipse — a circle when `ratio={1}`,
+     *   or an oval at other ratios. Pair with a child that fills the container
+     *   (e.g. an image with `objectFit: 'cover'`).
+     *
+     * @default 'rectangle'
+     *
+     * @example
+     * ```
+     * <AspectRatio ratio={1} shape="ellipse">
+     *   <img src="avatar.jpg" alt="" style={{objectFit: 'cover'}} />
+     * </AspectRatio>
+     * ```
+     */
+    shape?: AspectRatioShape;
+    /**
+     * Content to render inside the aspect ratio container.
+     * The child element will be positioned absolutely to fill the container.
+     */
+    children: ReactNode;
+}
+/**
+ * AspectRatio component for maintaining a specific aspect ratio for its children.
+ *
+ * Uses the CSS aspect-ratio property to maintain the ratio. The child element
+ * is positioned absolutely to fill the container, which is useful for images,
+ * videos, embeds, and placeholders.
+ *
+ * Use `shape="ellipse"` to clip the container into an ellipse — a circle at
+ * `ratio={1}` or an oval at other ratios. Both shapes respect the provided
+ * `ratio`.
+ *
+ * @example
+ * ```
+ * <AspectRatio ratio={16 / 9}>
+ *   <img src="image.jpg" alt="Widescreen image" style={{objectFit: 'cover'}} />
+ * </AspectRatio>
+ * ```
+ *
+ * @example
+ * ```
+ * <AspectRatio ratio={1} shape="ellipse">
+ *   <img src="avatar.jpg" alt="" style={{objectFit: 'cover'}} />
+ * </AspectRatio>
+ * ```
+ */
+export declare function AspectRatio({ ratio, shape, children, xstyle, className, style, ref, ...props }: AspectRatioProps): import("react").JSX.Element;
+export declare namespace AspectRatio {
+    var displayName: string;
+}
+//# sourceMappingURL=AspectRatio.d.ts.map

package/dist/AspectRatio/AspectRatio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AspectRatio.d.ts","sourceRoot":"","sources":["../../src/AspectRatio/AspectRatio.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAErC,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,WAAW,GAAG,SAAS,CAAC;AAEvD,MAAM,WAAW,gBAAiB,SAAQ,SAAS,CAAC,cAAc,CAAC;IACjE,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;;;;;;;;;;;;OAeG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAEzB;;;OAGG;IACH,QAAQ,EAAE,SAAS,CAAC;CACrB;AAwBD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,KAAmB,EACnB,QAAQ,EACR,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,gBAAgB,+BAkBlB;yBA3Be,WAAW"}