@usefragments/ui 1.0.0

package/dist/components/AppShell/index.cjs

@@ -0,0 +1,285 @@
+"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);
+function resolveStructure(layout) {
+  if (layout === "sidebar" || layout === "sidebar-floating" || layout === "floating")
+    return "sidebar";
+  return "default";
+}
+function resolveSlotVariant(explicit, layout, slot) {
+  if (explicit !== void 0) return explicit;
+  if ((layout === "sidebar-floating" || layout === "floating") && (slot === "main" || slot === "sidebar"))
+    return "floating";
+  if (layout === "floating" && slot === "aside") return "floating";
+  return "default";
+}
+const AppShellContext = React__namespace.createContext({
+  layout: "default",
+  structure: "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
+  };
+  let hasHeader = false;
+  React__namespace.Children.forEach(children, (child) => {
+    if (!React__namespace.isValidElement(child)) return;
+    if (child.type === AppShellHeader) {
+      hasHeader = true;
+      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;
+    }
+  });
+  if (!hasHeader) config.headerHeight = "0px";
+  return config;
+}
+function AppShellInner({
+  children,
+  className,
+  layout,
+  structure,
+  style: styleProp,
+  ...htmlProps
+}) {
+  const appShell = useAppShell();
+  const { collapsed, isMobile, collapsible } = index.useSidebar();
+  const classes = [AppShell_module.default.root, structure === "sidebar" && AppShell_module.default.sidebarLayout, 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",
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlProps,
+      className: classes,
+      style,
+      "data-layout": layout,
+      "data-mobile": isMobile || void 0,
+      children
+    }
+  );
+}
+function AppShellRoot({
+  children,
+  layout = "default",
+  bg,
+  className,
+  style: styleProp,
+  ...htmlProps
+}) {
+  const structure = resolveStructure(layout);
+  const config = React__namespace.useMemo(() => extractConfigFromChildren(children), [children]);
+  const contextValue = {
+    layout,
+    structure,
+    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,
+          structure,
+          style: { ...bg ? { backgroundColor: bg } : {}, ...styleProp },
+          ...htmlProps,
+          children
+        }
+      )
+    }
+  ) });
+}
+function AppShellHeader({
+  children,
+  height = "56px",
+  bg,
+  className,
+  style: styleProp,
+  ...htmlProps
+}) {
+  const classes = [AppShell_module.default.header, className].filter(Boolean).join(" ");
+  const style = {
+    "--header-height": height,
+    ...bg ? { backgroundColor: bg } : {},
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, style, children });
+}
+function AppShellSidebar({
+  children,
+  width = "240px",
+  collapsedWidth = "64px",
+  collapsible = "icon",
+  position = "left",
+  defaultCollapsed = false,
+  variant,
+  bg,
+  "aria-label": ariaLabel,
+  className,
+  style: styleProp,
+  ...htmlProps
+}) {
+  const isMobile = useIsMobile();
+  const { layout, structure } = useAppShell();
+  const resolvedVariant = resolveSlotVariant(variant, layout, "sidebar");
+  const classes = [
+    AppShell_module.default.sidebar,
+    structure === "sidebar" && AppShell_module.default.sidebarFullHeight,
+    resolvedVariant === "floating" && AppShell_module.default.sidebarFloating,
+    className
+  ].filter(Boolean).join(" ");
+  const style = {
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlProps, className: classes, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      index.Sidebar,
+      {
+        width,
+        collapsedWidth,
+        position,
+        collapsible,
+        defaultCollapsed,
+        "aria-label": ariaLabel,
+        style: bg ? { backgroundColor: bg } : void 0,
+        children
+      }
+    ),
+    isMobile && /* @__PURE__ */ jsxRuntime.jsx(index.Sidebar.Overlay, {})
+  ] });
+}
+function AppShellMain({
+  children,
+  padding = "sm",
+  variant,
+  bg,
+  className,
+  style: styleProp,
+  id = "main-content",
+  ...htmlProps
+}) {
+  const { layout } = useAppShell();
+  const resolvedVariant = resolveSlotVariant(variant, layout, "main");
+  const classes = [
+    AppShell_module.default.main,
+    padding !== "none" && AppShell_module.default[`padding${padding.charAt(0).toUpperCase() + padding.slice(1)}`],
+    resolvedVariant === "floating" && AppShell_module.default.mainFloating,
+    className
+  ].filter(Boolean).join(" ");
+  const style = {
+    ...bg ? { backgroundColor: bg } : {},
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("main", { ...htmlProps, className: classes, style, id, children });
+}
+function AppShellAside({
+  children,
+  width = "280px",
+  visible = true,
+  variant,
+  bg,
+  className,
+  style: styleProp,
+  ...htmlProps
+}) {
+  const { layout } = useAppShell();
+  const resolvedVariant = resolveSlotVariant(variant, layout, "aside");
+  if (!visible) {
+    return null;
+  }
+  const classes = [AppShell_module.default.aside, resolvedVariant === "floating" && AppShell_module.default.asideFloating, className].filter(Boolean).join(" ");
+  const style = {
+    "--aside-width": width,
+    ...bg ? { backgroundColor: bg } : {},
+    ...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;

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

@@ -0,0 +1,133 @@
+import * as React from "react";
+import { type SidebarCollapsible } from "../Sidebar";
+/**
+ * Structural layout — controls CSS grid areas.
+ *
+ * ```
+ * 'default'           'sidebar'
+ * ┌──────────────┐    ┌────┬─────────┐
+ * │    Header    │    │    │ Header  │
+ * ├────┬─────────┤    │Side├─────────┤
+ * │    │         │    │bar │         │
+ * │Side│  Main   │    │    │  Main   │
+ * │bar │         │    │    │         │
+ * └────┴─────────┘    └────┴─────────┘
+ * ```
+ *
+ * Combine with `variant="floating"` on individual slots for floating effects:
+ *
+ * ```tsx
+ * <AppShell layout="sidebar">
+ *   <AppShell.Sidebar variant="floating" />
+ *   <AppShell.Main variant="floating" />
+ *   <AppShell.Aside variant="floating" />
+ * </AppShell>
+ * ```
+ *
+ * Legacy values `'sidebar-floating'` and `'floating'` are still accepted
+ * for backwards compatibility and internally expand to the appropriate
+ * per-slot variants.
+ */
+export type AppShellLayout = "default" | "sidebar" | "sidebar-floating" | "floating";
+/** Visual treatment for individual layout slots. */
+export type AppShellSlotVariant = "default" | "floating";
+export interface AppShellProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /**
+     * Layout structure:
+     *
+     * - `'default'`: Header spans full width, sidebar below (default)
+     * - `'sidebar'`: Sidebar is full height, header sits beside it
+     *
+     * Legacy presets (still work, prefer per-slot `variant` props instead):
+     *
+     * - `'sidebar-floating'`: Expands to `layout="sidebar"` with floating sidebar + main
+     * - `'floating'`: Expands to `layout="sidebar"` with floating sidebar + main + aside
+     */
+    layout?: AppShellLayout;
+    /** Background color for the shell container (accepts any CSS color value or token) */
+    bg?: string;
+}
+export interface AppShellHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    /** Header height (default: '56px') */
+    height?: string;
+    /** Background color override (accepts any CSS color value or token) */
+    bg?: 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;
+    /** Visual treatment: `'floating'` blends sidebar with the shell background */
+    variant?: AppShellSlotVariant;
+    /** Background color override (accepts any CSS color value or token) */
+    bg?: string;
+}
+export interface AppShellMainProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    /** Content padding */
+    padding?: "none" | "sm" | "md" | "lg";
+    /** Visual treatment: `'floating'` adds inset spacing and rounded corners */
+    variant?: AppShellSlotVariant;
+    /** Background color override (accepts any CSS color value or token) */
+    bg?: string;
+}
+export interface AppShellAsideProps extends React.HTMLAttributes<HTMLElement> {
+    children: React.ReactNode;
+    /** Aside width (default: '280px') */
+    width?: string;
+    /** Control visibility */
+    visible?: boolean;
+    /** Visual treatment: `'floating'` adds inset spacing and rounded corners */
+    variant?: AppShellSlotVariant;
+    /** Background color override (accepts any CSS color value or token) */
+    bg?: string;
+}
+interface AppShellContextValue {
+    layout: AppShellLayout;
+    structure: "default" | "sidebar";
+    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, bg, className, style: styleProp, ...htmlProps }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AppShell.Header - Fixed header slot
+ */
+declare function AppShellHeader({ children, height, bg, 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, variant, bg, "aria-label": ariaLabel, className, style: styleProp, ...htmlProps }: AppShellSidebarProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AppShell.Main - Scrollable main content area
+ */
+declare function AppShellMain({ children, padding, variant, bg, className, style: styleProp, id, ...htmlProps }: AppShellMainProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * AppShell.Aside - Optional right sidebar panel
+ */
+declare function AppShellAside({ children, width, visible, variant, bg, 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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"}

package/dist/components/AppShell/index.js

@@ -0,0 +1,268 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import styles from "./AppShell.module.scss.js";
+import { SidebarProvider, Sidebar, useSidebar } from "../Sidebar/index.js";
+function resolveStructure(layout) {
+  if (layout === "sidebar" || layout === "sidebar-floating" || layout === "floating")
+    return "sidebar";
+  return "default";
+}
+function resolveSlotVariant(explicit, layout, slot) {
+  if (explicit !== void 0) return explicit;
+  if ((layout === "sidebar-floating" || layout === "floating") && (slot === "main" || slot === "sidebar"))
+    return "floating";
+  if (layout === "floating" && slot === "aside") return "floating";
+  return "default";
+}
+const AppShellContext = React.createContext({
+  layout: "default",
+  structure: "default",
+  headerHeight: "56px",
+  sidebarWidth: "240px",
+  sidebarCollapsedWidth: "64px",
+  asideWidth: "280px",
+  asideVisible: false
+});
+function useAppShell() {
+  return React.useContext(AppShellContext);
+}
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(false);
+  React.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
+  };
+  let hasHeader = false;
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) return;
+    if (child.type === AppShellHeader) {
+      hasHeader = true;
+      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;
+    }
+  });
+  if (!hasHeader) config.headerHeight = "0px";
+  return config;
+}
+function AppShellInner({
+  children,
+  className,
+  layout,
+  structure,
+  style: styleProp,
+  ...htmlProps
+}) {
+  const appShell = useAppShell();
+  const { collapsed, isMobile, collapsible } = useSidebar();
+  const classes = [styles.root, structure === "sidebar" && styles.sidebarLayout, 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",
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlProps,
+      className: classes,
+      style,
+      "data-layout": layout,
+      "data-mobile": isMobile || void 0,
+      children
+    }
+  );
+}
+function AppShellRoot({
+  children,
+  layout = "default",
+  bg,
+  className,
+  style: styleProp,
+  ...htmlProps
+}) {
+  const structure = resolveStructure(layout);
+  const config = React.useMemo(() => extractConfigFromChildren(children), [children]);
+  const contextValue = {
+    layout,
+    structure,
+    headerHeight: config.headerHeight,
+    sidebarWidth: config.sidebarWidth,
+    sidebarCollapsedWidth: config.sidebarCollapsedWidth,
+    asideWidth: config.asideWidth,
+    asideVisible: config.asideVisible
+  };
+  return /* @__PURE__ */ jsx(AppShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    SidebarProvider,
+    {
+      width: config.sidebarWidth,
+      collapsedWidth: config.sidebarCollapsedWidth,
+      collapsible: config.sidebarCollapsible,
+      defaultCollapsed: config.sidebarDefaultCollapsed,
+      children: /* @__PURE__ */ jsx(
+        AppShellInner,
+        {
+          className,
+          layout,
+          structure,
+          style: { ...bg ? { backgroundColor: bg } : {}, ...styleProp },
+          ...htmlProps,
+          children
+        }
+      )
+    }
+  ) });
+}
+function AppShellHeader({
+  children,
+  height = "56px",
+  bg,
+  className,
+  style: styleProp,
+  ...htmlProps
+}) {
+  const classes = [styles.header, className].filter(Boolean).join(" ");
+  const style = {
+    "--header-height": height,
+    ...bg ? { backgroundColor: bg } : {},
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, style, children });
+}
+function AppShellSidebar({
+  children,
+  width = "240px",
+  collapsedWidth = "64px",
+  collapsible = "icon",
+  position = "left",
+  defaultCollapsed = false,
+  variant,
+  bg,
+  "aria-label": ariaLabel,
+  className,
+  style: styleProp,
+  ...htmlProps
+}) {
+  const isMobile = useIsMobile();
+  const { layout, structure } = useAppShell();
+  const resolvedVariant = resolveSlotVariant(variant, layout, "sidebar");
+  const classes = [
+    styles.sidebar,
+    structure === "sidebar" && styles.sidebarFullHeight,
+    resolvedVariant === "floating" && styles.sidebarFloating,
+    className
+  ].filter(Boolean).join(" ");
+  const style = {
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsxs("div", { ...htmlProps, className: classes, style, children: [
+    /* @__PURE__ */ jsx(
+      Sidebar,
+      {
+        width,
+        collapsedWidth,
+        position,
+        collapsible,
+        defaultCollapsed,
+        "aria-label": ariaLabel,
+        style: bg ? { backgroundColor: bg } : void 0,
+        children
+      }
+    ),
+    isMobile && /* @__PURE__ */ jsx(Sidebar.Overlay, {})
+  ] });
+}
+function AppShellMain({
+  children,
+  padding = "sm",
+  variant,
+  bg,
+  className,
+  style: styleProp,
+  id = "main-content",
+  ...htmlProps
+}) {
+  const { layout } = useAppShell();
+  const resolvedVariant = resolveSlotVariant(variant, layout, "main");
+  const classes = [
+    styles.main,
+    padding !== "none" && styles[`padding${padding.charAt(0).toUpperCase() + padding.slice(1)}`],
+    resolvedVariant === "floating" && styles.mainFloating,
+    className
+  ].filter(Boolean).join(" ");
+  const style = {
+    ...bg ? { backgroundColor: bg } : {},
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsx("main", { ...htmlProps, className: classes, style, id, children });
+}
+function AppShellAside({
+  children,
+  width = "280px",
+  visible = true,
+  variant,
+  bg,
+  className,
+  style: styleProp,
+  ...htmlProps
+}) {
+  const { layout } = useAppShell();
+  const resolvedVariant = resolveSlotVariant(variant, layout, "aside");
+  if (!visible) {
+    return null;
+  }
+  const classes = [styles.aside, resolvedVariant === "floating" && styles.asideFloating, className].filter(Boolean).join(" ");
+  const style = {
+    "--aside-width": width,
+    ...bg ? { backgroundColor: bg } : {},
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsx("aside", { ...htmlProps, className: classes, style, children });
+}
+const AppShell = Object.assign(AppShellRoot, {
+  Header: AppShellHeader,
+  Sidebar: AppShellSidebar,
+  Main: AppShellMain,
+  Aside: AppShellAside
+});
+export {
+  AppShell,
+  AppShellAside,
+  AppShellHeader,
+  AppShellMain,
+  AppShellRoot,
+  AppShellSidebar,
+  useAppShell
+};