@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/components/AppShell/AppShell.module.scss.cjs

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const root = "_root_wyoe3_1";
+const sidebarLayout = "_sidebarLayout_wyoe3_20";
+const sidebarFloatingLayout = "_sidebarFloatingLayout_wyoe3_30";
+const header = "_header_wyoe3_34";
+const headerFloating = "_headerFloating_wyoe3_43";
+const sidebar = "_sidebar_wyoe3_20";
+const sidebarFullHeight = "_sidebarFullHeight_wyoe3_81";
+const sidebarFloating = "_sidebarFloating_wyoe3_30";
+const main = "_main_wyoe3_95";
+const mainFloating = "_mainFloating_wyoe3_103";
+const paddingSm = "_paddingSm_wyoe3_115";
+const paddingMd = "_paddingMd_wyoe3_119";
+const paddingLg = "_paddingLg_wyoe3_128";
+const aside = "_aside_wyoe3_137";
+const styles = {
+  root,
+  sidebarLayout,
+  sidebarFloatingLayout,
+  header,
+  headerFloating,
+  sidebar,
+  sidebarFullHeight,
+  sidebarFloating,
+  main,
+  mainFloating,
+  paddingSm,
+  paddingMd,
+  paddingLg,
+  aside
+};
+exports.aside = aside;
+exports.default = styles;
+exports.header = header;
+exports.headerFloating = headerFloating;
+exports.main = main;
+exports.mainFloating = mainFloating;
+exports.paddingLg = paddingLg;
+exports.paddingMd = paddingMd;
+exports.paddingSm = paddingSm;
+exports.root = root;
+exports.sidebar = sidebar;
+exports.sidebarFloating = sidebarFloating;
+exports.sidebarFloatingLayout = sidebarFloatingLayout;
+exports.sidebarFullHeight = sidebarFullHeight;
+exports.sidebarLayout = sidebarLayout;
+//# sourceMappingURL=AppShell.module.scss.cjs.map

package/dist/components/AppShell/AppShell.module.scss.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.module.scss.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/AppShell/AppShell.module.scss.js

@@ -0,0 +1,48 @@
+const root = "_root_wyoe3_1";
+const sidebarLayout = "_sidebarLayout_wyoe3_20";
+const sidebarFloatingLayout = "_sidebarFloatingLayout_wyoe3_30";
+const header = "_header_wyoe3_34";
+const headerFloating = "_headerFloating_wyoe3_43";
+const sidebar = "_sidebar_wyoe3_20";
+const sidebarFullHeight = "_sidebarFullHeight_wyoe3_81";
+const sidebarFloating = "_sidebarFloating_wyoe3_30";
+const main = "_main_wyoe3_95";
+const mainFloating = "_mainFloating_wyoe3_103";
+const paddingSm = "_paddingSm_wyoe3_115";
+const paddingMd = "_paddingMd_wyoe3_119";
+const paddingLg = "_paddingLg_wyoe3_128";
+const aside = "_aside_wyoe3_137";
+const styles = {
+  root,
+  sidebarLayout,
+  sidebarFloatingLayout,
+  header,
+  headerFloating,
+  sidebar,
+  sidebarFullHeight,
+  sidebarFloating,
+  main,
+  mainFloating,
+  paddingSm,
+  paddingMd,
+  paddingLg,
+  aside
+};
+export {
+  aside,
+  styles as default,
+  header,
+  headerFloating,
+  main,
+  mainFloating,
+  paddingLg,
+  paddingMd,
+  paddingSm,
+  root,
+  sidebar,
+  sidebarFloating,
+  sidebarFloatingLayout,
+  sidebarFullHeight,
+  sidebarLayout
+};
+//# sourceMappingURL=AppShell.module.scss.js.map

package/dist/components/AppShell/AppShell.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppShell.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/AppShell/index.cjs

@@ -0,0 +1,230 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const AppShell_module = require("./AppShell.module.scss.cjs");
+const index = require("../Sidebar/index.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const AppShellContext = React__namespace.createContext({
+  layout: "default",
+  headerHeight: "56px",
+  sidebarWidth: "240px",
+  sidebarCollapsedWidth: "64px",
+  asideWidth: "280px",
+  asideVisible: false
+});
+function useAppShell() {
+  return React__namespace.useContext(AppShellContext);
+}
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React__namespace.useState(false);
+  React__namespace.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(max-width: 767px)");
+    setIsMobile(mq.matches);
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return isMobile;
+}
+function extractConfigFromChildren(children) {
+  const config = {
+    headerHeight: "56px",
+    sidebarWidth: "240px",
+    sidebarCollapsedWidth: "64px",
+    sidebarCollapsible: "icon",
+    sidebarDefaultCollapsed: false,
+    asideWidth: "280px",
+    asideVisible: false
+  };
+  React__namespace.Children.forEach(children, (child) => {
+    if (!React__namespace.isValidElement(child)) return;
+    if (child.type === AppShellHeader) {
+      const props = child.props;
+      if (props.height) config.headerHeight = props.height;
+    }
+    if (child.type === AppShellSidebar) {
+      const props = child.props;
+      if (props.width) config.sidebarWidth = props.width;
+      if (props.collapsedWidth) config.sidebarCollapsedWidth = props.collapsedWidth;
+      if (props.collapsible) config.sidebarCollapsible = props.collapsible;
+      if (props.defaultCollapsed !== void 0) config.sidebarDefaultCollapsed = props.defaultCollapsed;
+    }
+    if (child.type === AppShellAside) {
+      const props = child.props;
+      if (props.width) config.asideWidth = props.width;
+      if (props.visible !== false) config.asideVisible = true;
+    }
+  });
+  return config;
+}
+function AppShellInner({
+  children,
+  className,
+  layout,
+  ...htmlProps
+}) {
+  const appShell = useAppShell();
+  const { collapsed, isMobile, collapsible } = index.useSidebar();
+  const classes = [
+    AppShell_module.default.root,
+    (layout === "sidebar" || layout === "sidebar-floating") && AppShell_module.default.sidebarLayout,
+    layout === "sidebar-floating" && AppShell_module.default.sidebarFloatingLayout,
+    className
+  ].filter(Boolean).join(" ");
+  const actualSidebarWidth = isMobile ? "0px" : collapsible === "icon" && collapsed ? appShell.sidebarCollapsedWidth : collapsible === "offcanvas" && collapsed ? "0px" : appShell.sidebarWidth;
+  const style = {
+    "--appshell-header-height": appShell.headerHeight,
+    "--appshell-sidebar-width": actualSidebarWidth,
+    "--appshell-sidebar-expanded-width": appShell.sidebarWidth,
+    "--appshell-sidebar-collapsed-width": appShell.sidebarCollapsedWidth,
+    "--appshell-aside-width": appShell.asideVisible ? appShell.asideWidth : "0px"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, style, "data-layout": layout, "data-mobile": isMobile || void 0, children });
+}
+function AppShellRoot({
+  children,
+  layout = "default",
+  className,
+  ...htmlProps
+}) {
+  const config = React__namespace.useMemo(() => extractConfigFromChildren(children), [children]);
+  const contextValue = {
+    layout,
+    headerHeight: config.headerHeight,
+    sidebarWidth: config.sidebarWidth,
+    sidebarCollapsedWidth: config.sidebarCollapsedWidth,
+    asideWidth: config.asideWidth,
+    asideVisible: config.asideVisible
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(AppShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    index.SidebarProvider,
+    {
+      width: config.sidebarWidth,
+      collapsedWidth: config.sidebarCollapsedWidth,
+      collapsible: config.sidebarCollapsible,
+      defaultCollapsed: config.sidebarDefaultCollapsed,
+      children: /* @__PURE__ */ jsxRuntime.jsx(AppShellInner, { className, layout, ...htmlProps, children })
+    }
+  ) });
+}
+function AppShellHeader({
+  children,
+  height = "56px",
+  className,
+  style: styleProp,
+  ...htmlProps
+}) {
+  const { layout } = useAppShell();
+  const classes = [
+    AppShell_module.default.header,
+    (layout === "sidebar" || layout === "sidebar-floating") && AppShell_module.default.headerSidebar,
+    layout === "sidebar-floating" && AppShell_module.default.headerFloating,
+    className
+  ].filter(Boolean).join(" ");
+  const style = {
+    "--header-height": height,
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, style, children });
+}
+function AppShellSidebar({
+  children,
+  width = "240px",
+  collapsedWidth = "64px",
+  collapsible = "icon",
+  position = "left",
+  defaultCollapsed = false,
+  "aria-label": ariaLabel,
+  className,
+  ...htmlProps
+}) {
+  const isMobile = useIsMobile();
+  const { layout } = useAppShell();
+  const classes = [
+    AppShell_module.default.sidebar,
+    (layout === "sidebar" || layout === "sidebar-floating") && AppShell_module.default.sidebarFullHeight,
+    layout === "sidebar-floating" && AppShell_module.default.sidebarFloating,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlProps, className: classes, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      index.Sidebar,
+      {
+        width,
+        collapsedWidth,
+        position,
+        collapsible,
+        defaultCollapsed,
+        "aria-label": ariaLabel,
+        children
+      }
+    ),
+    isMobile && /* @__PURE__ */ jsxRuntime.jsx(index.Sidebar.Overlay, {})
+  ] });
+}
+function AppShellMain({
+  children,
+  padding = "md",
+  className,
+  id = "main-content",
+  ...htmlProps
+}) {
+  const { layout } = useAppShell();
+  const classes = [
+    AppShell_module.default.main,
+    padding !== "none" && AppShell_module.default[`padding${padding.charAt(0).toUpperCase() + padding.slice(1)}`],
+    layout === "sidebar-floating" && AppShell_module.default.mainFloating,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx("main", { ...htmlProps, className: classes, id, children });
+}
+function AppShellAside({
+  children,
+  width = "280px",
+  visible = true,
+  className,
+  style: styleProp,
+  ...htmlProps
+}) {
+  if (!visible) {
+    return null;
+  }
+  const classes = [AppShell_module.default.aside, className].filter(Boolean).join(" ");
+  const style = {
+    "--aside-width": width,
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("aside", { ...htmlProps, className: classes, style, children });
+}
+const AppShell = Object.assign(AppShellRoot, {
+  Header: AppShellHeader,
+  Sidebar: AppShellSidebar,
+  Main: AppShellMain,
+  Aside: AppShellAside
+});
+exports.AppShell = AppShell;
+exports.AppShellAside = AppShellAside;
+exports.AppShellHeader = AppShellHeader;
+exports.AppShellMain = AppShellMain;
+exports.AppShellRoot = AppShellRoot;
+exports.AppShellSidebar = AppShellSidebar;
+exports.useAppShell = useAppShell;
+//# sourceMappingURL=index.cjs.map

package/dist/components/AppShell/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../src/components/AppShell/index.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport styles from './AppShell.module.scss';\nimport {\n  SidebarProvider,\n  Sidebar,\n  useSidebar,\n  type SidebarCollapsible,\n} from '../Sidebar';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * ```\n * 'default'           'sidebar'          'sidebar-floating'\n * ┌──────────────┐    ┌────┬─────────┐   ┌────┬─────────┐\n * │    Header    │    │    │ Header  │   │    │ Header  │\n * ├────┬─────────┤    │Side├─────────┤   │Side├╌╌╌╌╌╌╌╌╌┤\n * │    │         │    │bar │         │   │bar │┌───────┐│\n * │Side│  Main   │    │    │  Main   │   │    ││ Main  ││\n * │bar │         │    │    │         │   │    │└───────┘│\n * └────┴─────────┘    └────┴─────────┘   └────┴─────────┘\n * ```\n */\nexport type AppShellLayout = 'default' | 'sidebar' | 'sidebar-floating';\n\nexport interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /**\n   * Layout mode:\n   *\n   * ```\n   * 'default'           'sidebar'          'sidebar-floating'\n   * ┌──────────────┐    ┌────┬─────────┐   ┌────┬─────────┐\n   * │    Header    │    │    │ Header  │   │    │ Header  │\n   * ├────┬─────────┤    │Side├─────────┤   │Side├╌╌╌╌╌╌╌╌╌┤\n   * │    │         │    │bar │         │   │bar │┌───────┐│\n   * │Side│  Main   │    │    │  Main   │   │    ││ Main  ││\n   * │bar │         │    │    │         │   │    │└───────┘│\n   * └────┴─────────┘    └────┴─────────┘   └────┴─────────┘\n   * ```\n   *\n   * - `'default'`: Header spans full width, sidebar below (default)\n   * - `'sidebar'`: Sidebar is full height, header sits beside it\n   * - `'sidebar-floating'`: Like `sidebar` but main content floats with rounded corners and a distinct background\n   */\n  layout?: AppShellLayout;\n}\n\nexport interface AppShellHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Header height (default: '56px') */\n  height?: string;\n}\n\nexport interface AppShellSidebarProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  /** Width of expanded sidebar (default: '240px') */\n  width?: string;\n  /** Width when collapsed (default: '64px') */\n  collapsedWidth?: string;\n  /** Collapse behavior */\n  collapsible?: SidebarCollapsible;\n  /** Sidebar position */\n  position?: 'left' | 'right';\n  /** Default collapsed state */\n  defaultCollapsed?: boolean;\n}\n\nexport interface AppShellMainProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n  /** Content padding */\n  padding?: 'none' | 'sm' | 'md' | 'lg';\n}\n\nexport interface AppShellAsideProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n  /** Aside width (default: '280px') */\n  width?: string;\n  /** Control visibility */\n  visible?: boolean;\n}\n\n// ============================================\n// Context\n// ============================================\n\ninterface AppShellContextValue {\n  layout: AppShellLayout;\n  headerHeight: string;\n  sidebarWidth: string;\n  sidebarCollapsedWidth: string;\n  asideWidth: string;\n  asideVisible: boolean;\n}\n\nconst AppShellContext = React.createContext<AppShellContextValue>({\n  layout: 'default',\n  headerHeight: '56px',\n  sidebarWidth: '240px',\n  sidebarCollapsedWidth: '64px',\n  asideWidth: '280px',\n  asideVisible: false,\n});\n\nfunction useAppShell() {\n  return React.useContext(AppShellContext);\n}\n\n// ============================================\n// Hooks\n// ============================================\n\nfunction useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState(false);\n\n  React.useEffect(() => {\n    if (typeof window === 'undefined') return;\n\n    const mq = window.matchMedia('(max-width: 767px)');\n    setIsMobile(mq.matches);\n\n    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n    mq.addEventListener('change', handler);\n    return () => mq.removeEventListener('change', handler);\n  }, []);\n\n  return isMobile;\n}\n\n// ============================================\n// Helper to extract config from children\n// ============================================\n\ninterface ExtractedConfig {\n  headerHeight: string;\n  sidebarWidth: string;\n  sidebarCollapsedWidth: string;\n  sidebarCollapsible: SidebarCollapsible;\n  sidebarDefaultCollapsed: boolean;\n  asideWidth: string;\n  asideVisible: boolean;\n}\n\nfunction extractConfigFromChildren(children: React.ReactNode): ExtractedConfig {\n  const config: ExtractedConfig = {\n    headerHeight: '56px',\n    sidebarWidth: '240px',\n    sidebarCollapsedWidth: '64px',\n    sidebarCollapsible: 'icon',\n    sidebarDefaultCollapsed: false,\n    asideWidth: '280px',\n    asideVisible: false,\n  };\n\n  React.Children.forEach(children, child => {\n    if (!React.isValidElement(child)) return;\n\n    if (child.type === AppShellHeader) {\n      const props = child.props as AppShellHeaderProps;\n      if (props.height) config.headerHeight = props.height;\n    }\n\n    if (child.type === AppShellSidebar) {\n      const props = child.props as AppShellSidebarProps;\n      if (props.width) config.sidebarWidth = props.width;\n      if (props.collapsedWidth) config.sidebarCollapsedWidth = props.collapsedWidth;\n      if (props.collapsible) config.sidebarCollapsible = props.collapsible;\n      if (props.defaultCollapsed !== undefined) config.sidebarDefaultCollapsed = props.defaultCollapsed;\n    }\n\n    if (child.type === AppShellAside) {\n      const props = child.props as AppShellAsideProps;\n      if (props.width) config.asideWidth = props.width;\n      if (props.visible !== false) config.asideVisible = true;\n    }\n  });\n\n  return config;\n}\n\n// ============================================\n// Internal component to apply CSS variables\n// ============================================\n\nfunction AppShellInner({\n  children,\n  className,\n  layout,\n  ...htmlProps\n}: {\n  children: React.ReactNode;\n  className?: string;\n  layout: AppShellLayout;\n} & React.HTMLAttributes<HTMLDivElement>) {\n  const appShell = useAppShell();\n  const { collapsed, isMobile, collapsible } = useSidebar();\n\n  const classes = [\n    styles.root,\n    (layout === 'sidebar' || layout === 'sidebar-floating') && styles.sidebarLayout,\n    layout === 'sidebar-floating' && styles.sidebarFloatingLayout,\n    className,\n  ].filter(Boolean).join(' ');\n\n  // Calculate actual sidebar width based on state\n  const actualSidebarWidth = isMobile\n    ? '0px'\n    : (collapsible === 'icon' && collapsed)\n      ? appShell.sidebarCollapsedWidth\n      : (collapsible === 'offcanvas' && collapsed)\n        ? '0px'\n        : appShell.sidebarWidth;\n\n  const style: React.CSSProperties = {\n    '--appshell-header-height': appShell.headerHeight,\n    '--appshell-sidebar-width': actualSidebarWidth,\n    '--appshell-sidebar-expanded-width': appShell.sidebarWidth,\n    '--appshell-sidebar-collapsed-width': appShell.sidebarCollapsedWidth,\n    '--appshell-aside-width': appShell.asideVisible ? appShell.asideWidth : '0px',\n  } as React.CSSProperties;\n\n  return (\n    <div {...htmlProps} className={classes} style={style} data-layout={layout} data-mobile={isMobile || undefined}>\n      {children}\n    </div>\n  );\n}\n\n// ============================================\n// Components\n// ============================================\n\n/**\n * AppShell - Root layout wrapper\n * Automatically wraps children with SidebarProvider\n */\nfunction AppShellRoot({\n  children,\n  layout = 'default',\n  className,\n  ...htmlProps\n}: AppShellProps) {\n  // Extract config from children using useMemo to avoid re-renders\n  const config = React.useMemo(() => extractConfigFromChildren(children), [children]);\n\n  const contextValue: AppShellContextValue = {\n    layout,\n    headerHeight: config.headerHeight,\n    sidebarWidth: config.sidebarWidth,\n    sidebarCollapsedWidth: config.sidebarCollapsedWidth,\n    asideWidth: config.asideWidth,\n    asideVisible: config.asideVisible,\n  };\n\n  return (\n    <AppShellContext.Provider value={contextValue}>\n      <SidebarProvider\n        width={config.sidebarWidth}\n        collapsedWidth={config.sidebarCollapsedWidth}\n        collapsible={config.sidebarCollapsible}\n        defaultCollapsed={config.sidebarDefaultCollapsed}\n      >\n        <AppShellInner className={className} layout={layout} {...htmlProps}>\n          {children}\n        </AppShellInner>\n      </SidebarProvider>\n    </AppShellContext.Provider>\n  );\n}\n\n/**\n * AppShell.Header - Fixed header slot\n */\nfunction AppShellHeader({\n  children,\n  height = '56px',\n  className,\n  style: styleProp,\n  ...htmlProps\n}: AppShellHeaderProps) {\n  const { layout } = useAppShell();\n\n  const classes = [\n    styles.header,\n    (layout === 'sidebar' || layout === 'sidebar-floating') && styles.headerSidebar,\n    layout === 'sidebar-floating' && styles.headerFloating,\n    className,\n  ].filter(Boolean).join(' ');\n\n  const style: React.CSSProperties = {\n    '--header-height': height,\n    ...styleProp,\n  } as React.CSSProperties;\n\n  return (\n    <div {...htmlProps} className={classes} style={style}>\n      {children}\n    </div>\n  );\n}\n\n/**\n * AppShell.Sidebar - Sidebar slot (delegates to Sidebar component)\n */\nfunction AppShellSidebar({\n  children,\n  width = '240px',\n  collapsedWidth = '64px',\n  collapsible = 'icon',\n  position = 'left',\n  defaultCollapsed = false,\n  'aria-label': ariaLabel,\n  className,\n  ...htmlProps\n}: AppShellSidebarProps) {\n  const isMobile = useIsMobile();\n  const { layout } = useAppShell();\n\n  const classes = [\n    styles.sidebar,\n    (layout === 'sidebar' || layout === 'sidebar-floating') && styles.sidebarFullHeight,\n    layout === 'sidebar-floating' && styles.sidebarFloating,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div {...htmlProps} className={classes}>\n      <Sidebar\n        width={width}\n        collapsedWidth={collapsedWidth}\n        position={position}\n        collapsible={collapsible}\n        defaultCollapsed={defaultCollapsed}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </Sidebar>\n      {isMobile && <Sidebar.Overlay />}\n    </div>\n  );\n}\n\n/**\n * AppShell.Main - Scrollable main content area\n */\nfunction AppShellMain({\n  children,\n  padding = 'md',\n  className,\n  id = 'main-content',\n  ...htmlProps\n}: AppShellMainProps) {\n  const { layout } = useAppShell();\n\n  const classes = [\n    styles.main,\n    padding !== 'none' && styles[`padding${padding.charAt(0).toUpperCase() + padding.slice(1)}`],\n    layout === 'sidebar-floating' && styles.mainFloating,\n    className,\n  ].filter(Boolean).join(' ');\n\n  return (\n    <main {...htmlProps} className={classes} id={id}>\n      {children}\n    </main>\n  );\n}\n\n/**\n * AppShell.Aside - Optional right sidebar panel\n */\nfunction AppShellAside({\n  children,\n  width = '280px',\n  visible = true,\n  className,\n  style: styleProp,\n  ...htmlProps\n}: AppShellAsideProps) {\n  if (!visible) {\n    return null;\n  }\n\n  const classes = [styles.aside, className].filter(Boolean).join(' ');\n\n  const style: React.CSSProperties = {\n    '--aside-width': width,\n    ...styleProp,\n  } as React.CSSProperties;\n\n  return (\n    <aside {...htmlProps} className={classes} style={style}>\n      {children}\n    </aside>\n  );\n}\n\n// ============================================\n// Export compound component\n// ============================================\n\nexport const AppShell = Object.assign(AppShellRoot, {\n  Header: AppShellHeader,\n  Sidebar: AppShellSidebar,\n  Main: AppShellMain,\n  Aside: AppShellAside,\n});\n\nexport {\n  AppShellRoot,\n  AppShellHeader,\n  AppShellSidebar,\n  AppShellMain,\n  AppShellAside,\n  useAppShell,\n};\n"],"names":["React","useSidebar","styles","jsx","SidebarProvider","jsxs","Sidebar"],"mappings":"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"}

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

@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { type SidebarCollapsible } from '../Sidebar';
+/**
+ * ```
+ * 'default'           'sidebar'          'sidebar-floating'
+ * ┌──────────────┐    ┌────┬─────────┐   ┌────┬─────────┐
+ * │    Header    │    │    │ Header  │   │    │ Header  │
+ * ├────┬─────────┤    │Side├─────────┤   │Side├╌╌╌╌╌╌╌╌╌┤
+ * │    │         │    │bar │         │   │bar │┌───────┐│
+ * │Side│  Main   │    │    │  Main   │   │    ││ Main  ││
+ * │bar │         │    │    │         │   │    │└───────┘│
+ * └────┴─────────┘    └────┴─────────┘   └────┴─────────┘
+ * ```
+ */
+export type AppShellLayout = 'default' | 'sidebar' | 'sidebar-floating';
+export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Layout mode:
+     *
+     * ```
+     * 'default'           'sidebar'          'sidebar-floating'
+     * ┌──────────────┐    ┌────┬─────────┐   ┌────┬─────────┐
+     * │    Header    │    │    │ Header  │   │    │ Header  │
+     * ├────┬─────────┤    │Side├─────────┤   │Side├╌╌╌╌╌╌╌╌╌┤
+     * │    │         │    │bar │         │   │bar │┌───────┐│
+     * │Side│  Main   │    │    │  Main   │   │    ││ Main  ││
+     * │bar │         │    │    │         │   │    │└───────┘│
+     * └────┴─────────┘    └────┴─────────┘   └────┴─────────┘
+     * ```
+     *
+     * - `'default'`: Header spans full width, sidebar below (default)
+     * - `'sidebar'`: Sidebar is full height, header sits beside it
+     * - `'sidebar-floating'`: Like `sidebar` but main content floats with rounded corners and a distinct background
+     */
+    layout?: AppShellLayout;
+}
+export interface AppShellHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** Header height (default: '56px') */
+    height?: string;
+}
+export interface AppShellSidebarProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** Width of expanded sidebar (default: '240px') */
+    width?: string;
+    /** Width when collapsed (default: '64px') */
+    collapsedWidth?: string;
+    /** Collapse behavior */
+    collapsible?: SidebarCollapsible;
+    /** Sidebar position */
+    position?: 'left' | 'right';
+    /** Default collapsed state */
+    defaultCollapsed?: boolean;
+}
+export interface AppShellMainProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    /** Content padding */
+    padding?: 'none' | 'sm' | 'md' | 'lg';
+}
+export interface AppShellAsideProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    /** Aside width (default: '280px') */
+    width?: string;
+    /** Control visibility */
+    visible?: boolean;
+}
+interface AppShellContextValue {
+    layout: AppShellLayout;
+    headerHeight: string;
+    sidebarWidth: string;
+    sidebarCollapsedWidth: string;
+    asideWidth: string;
+    asideVisible: boolean;
+}
+declare function useAppShell(): AppShellContextValue;
+/**
+ * AppShell - Root layout wrapper
+ * Automatically wraps children with SidebarProvider
+ */
+declare function AppShellRoot({ children, layout, className, ...htmlProps }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AppShell.Header - Fixed header slot
+ */
+declare function AppShellHeader({ children, height, className, style: styleProp, ...htmlProps }: AppShellHeaderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AppShell.Sidebar - Sidebar slot (delegates to Sidebar component)
+ */
+declare function AppShellSidebar({ children, width, collapsedWidth, collapsible, position, defaultCollapsed, 'aria-label': ariaLabel, className, ...htmlProps }: AppShellSidebarProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AppShell.Main - Scrollable main content area
+ */
+declare function AppShellMain({ children, padding, className, id, ...htmlProps }: AppShellMainProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AppShell.Aside - Optional right sidebar panel
+ */
+declare function AppShellAside({ children, width, visible, className, style: styleProp, ...htmlProps }: AppShellAsideProps): import("react/jsx-runtime").JSX.Element | null;
+export declare const AppShell: typeof AppShellRoot & {
+    Header: typeof AppShellHeader;
+    Sidebar: typeof AppShellSidebar;
+    Main: typeof AppShellMain;
+    Aside: typeof AppShellAside;
+};
+export { AppShellRoot, AppShellHeader, AppShellSidebar, AppShellMain, AppShellAside, useAppShell, };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/index.tsx"],"names":[],"mappings":"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"}