@fragments-sdk/ui 0.15.1 → 0.16.0

package/dist/assets/ui.css

@@ -6511,7 +6511,7 @@
   overflow: visible;
   outline: none;
   box-shadow: 0 0 0 var(--fui-focus-ring-offset, 2px) var(--fui-bg-primary, #ffffff), 0 0 0 calc(var(--fui-focus-ring-offset, 2px) + var(--fui-focus-ring-width, 2px)) var(--fui-focus-ring-color, #18181b);
-}._root_1vko5_1 {
+}._root_1cmf1_1 {
   display: grid;
   min-height: 100vh;
   min-height: 100dvh;
@@ -6522,7 +6522,7 @@
   transition: grid-template-columns var(--fui-transition-normal, 200ms) ease;
 }
 @media (max-width: 767px) {
-  ._root_1vko5_1 {
+  ._root_1cmf1_1 {
     grid-template-areas: "header" "main" "aside";
     grid-template-columns: 1fr;
     grid-template-rows: var(--appshell-header-height, 56px) 1fr auto;
@@ -6530,21 +6530,17 @@
   }
 }
 
-._sidebarLayout_1vko5_20 {
+._sidebarLayout_1cmf1_20 {
   grid-template-areas: "sidebar header header" "sidebar main aside";
 }
 @media (max-width: 767px) {
-  ._sidebarLayout_1vko5_20 {
+  ._sidebarLayout_1cmf1_20 {
     grid-template-areas: "header" "main" "aside";
     grid-template-columns: 1fr;
   }
 }
 
-._sidebarFloatingLayout_1vko5_30 {
-  background-color: var(--fui-bg-primary, #ffffff);
-}
-
-._header_1vko5_34 {
+._header_1cmf1_30 {
   grid-area: header;
   position: sticky;
   top: 0;
@@ -6553,11 +6549,7 @@
   background-color: var(--fui-bg-primary, #ffffff);
 }
 
-._headerFloating_1vko5_43 {
-  background-color: var(--fui-bg-primary, #ffffff);
-}
-
-._sidebar_1vko5_20 {
+._sidebar_1cmf1_20 {
   grid-area: sidebar;
   position: sticky;
   top: var(--appshell-header-height, 56px);
@@ -6567,7 +6559,7 @@
   overflow: hidden;
 }
 @media (max-width: 767px) {
-  ._sidebar_1vko5_20 {
+  ._sidebar_1cmf1_20 {
     position: fixed;
     top: 0;
     left: 0;
@@ -6577,76 +6569,74 @@
     height: 100dvh;
     z-index: 51;
   }
-  ._sidebar_1vko5_20 > .root {
+  ._sidebar_1cmf1_20 > .root {
     width: var(--appshell-sidebar-expanded-width, 240px);
   }
 }
-._sidebar_1vko5_20 .root {
+._sidebar_1cmf1_20 .root {
   height: 100%;
 }
 @media (max-width: 767px) {
-  ._sidebar_1vko5_20 .root {
+  ._sidebar_1cmf1_20 .root {
     height: 100vh;
     height: 100dvh;
   }
 }
 
-._sidebarFullHeight_1vko5_81 {
+._sidebarFullHeight_1cmf1_73 {
   top: 0;
   height: 100vh;
   height: 100dvh;
   z-index: var(--fui-header-z-index, 40);
 }
-._sidebarFullHeight_1vko5_81 .root {
+._sidebarFullHeight_1cmf1_73 .root {
   height: 100%;
 }
 
-._sidebarFloating_1vko5_30 .root {
-  background-color: var(--fui-bg-primary, #ffffff);
-}
-
-._main_1vko5_95 {
+._main_1cmf1_83 {
   grid-area: main;
   min-height: 0;
   min-width: 0;
   background-color: var(--fui-bg-primary, #ffffff);
 }
 
-._mainFloating_1vko5_102 {
+._mainFloating_1cmf1_90 {
+  margin: var(--fui-space-2, 1rem) var(--fui-space-2, 1rem) var(--fui-space-2, 1rem) 0;
   border-radius: var(--fui-radius-xl, 0.857rem);
   background-color: var(--fui-bg-secondary, #f4f4f5);
   overflow: hidden;
 }
 @media (max-width: 767px) {
-  ._mainFloating_1vko5_102 {
+  ._mainFloating_1cmf1_90 {
+    margin: var(--fui-space-2, 1rem) 0;
     border-radius: var(--fui-radius-lg, 0.571rem);
     width: 100%;
   }
 }
 
-._paddingSm_1vko5_114 {
+._paddingSm_1cmf1_104 {
   padding: var(--fui-space-3);
 }
 
-._paddingMd_1vko5_118 {
+._paddingMd_1cmf1_108 {
   padding: var(--fui-space-4);
 }
 @media (min-width: 768px) {
-  ._paddingMd_1vko5_118 {
+  ._paddingMd_1cmf1_108 {
     padding: var(--fui-space-6);
   }
 }
 
-._paddingLg_1vko5_127 {
+._paddingLg_1cmf1_117 {
   padding: var(--fui-space-6);
 }
 @media (min-width: 768px) {
-  ._paddingLg_1vko5_127 {
+  ._paddingLg_1cmf1_117 {
     padding: var(--fui-space-8);
   }
 }
 
-._aside_1vko5_136 {
+._aside_1cmf1_126 {
   grid-area: aside;
   position: sticky;
   top: var(--appshell-header-height, 56px);
@@ -6659,12 +6649,30 @@
   overflow: hidden;
 }
 @media (max-width: 767px) {
-  ._aside_1vko5_136 {
+  ._aside_1cmf1_126 {
     position: static;
     width: 100%;
     height: auto;
     border-top: 1px solid var(--fui-border, rgba(0, 0, 0, 0.08));
   }
+}
+
+._asideFloating_1cmf1_147 {
+  width: auto;
+  height: calc(100vh - var(--appshell-header-height, 56px) - var(--fui-space-2, 1rem) * 2);
+  height: calc(100dvh - var(--appshell-header-height, 56px) - var(--fui-space-2, 1rem) * 2);
+  margin: var(--fui-space-2, 1rem) var(--fui-space-2, 1rem) var(--fui-space-2, 1rem) 0;
+  border-radius: var(--fui-radius-xl, 0.857rem);
+  background-color: var(--fui-bg-secondary, #f4f4f5);
+  overflow: hidden;
+}
+@media (max-width: 767px) {
+  ._asideFloating_1cmf1_147 {
+    margin: var(--fui-space-2, 1rem) 0;
+    border-radius: var(--fui-radius-lg, 0.571rem);
+    width: 100%;
+    height: auto;
+  }
 }._stack_ixv42_1 {
   display: flex;
 }

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

@@ -1,39 +1,35 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_1vko5_1";
-const sidebarLayout = "_sidebarLayout_1vko5_20";
-const sidebarFloatingLayout = "_sidebarFloatingLayout_1vko5_30";
-const header = "_header_1vko5_34";
-const headerFloating = "_headerFloating_1vko5_43";
-const sidebar = "_sidebar_1vko5_20";
-const sidebarFullHeight = "_sidebarFullHeight_1vko5_81";
-const sidebarFloating = "_sidebarFloating_1vko5_30";
-const main = "_main_1vko5_95";
-const mainFloating = "_mainFloating_1vko5_102";
-const paddingSm = "_paddingSm_1vko5_114";
-const paddingMd = "_paddingMd_1vko5_118";
-const paddingLg = "_paddingLg_1vko5_127";
-const aside = "_aside_1vko5_136";
+const root = "_root_1cmf1_1";
+const sidebarLayout = "_sidebarLayout_1cmf1_20";
+const header = "_header_1cmf1_30";
+const sidebar = "_sidebar_1cmf1_20";
+const sidebarFullHeight = "_sidebarFullHeight_1cmf1_73";
+const main = "_main_1cmf1_83";
+const mainFloating = "_mainFloating_1cmf1_90";
+const paddingSm = "_paddingSm_1cmf1_104";
+const paddingMd = "_paddingMd_1cmf1_108";
+const paddingLg = "_paddingLg_1cmf1_117";
+const aside = "_aside_1cmf1_126";
+const asideFloating = "_asideFloating_1cmf1_147";
 const styles = {
   root,
   sidebarLayout,
-  sidebarFloatingLayout,
   header,
-  headerFloating,
   sidebar,
   sidebarFullHeight,
-  sidebarFloating,
   main,
   mainFloating,
   paddingSm,
   paddingMd,
   paddingLg,
-  aside
+  aside,
+  asideFloating
 };
 exports.aside = aside;
+exports.asideFloating = asideFloating;
 exports.default = styles;
 exports.header = header;
-exports.headerFloating = headerFloating;
 exports.main = main;
 exports.mainFloating = mainFloating;
 exports.paddingLg = paddingLg;
@@ -41,7 +37,5 @@ exports.paddingMd = paddingMd;
 exports.paddingSm = paddingSm;
 exports.root = root;
 exports.sidebar = sidebar;
-exports.sidebarFloating = sidebarFloating;
-exports.sidebarFloatingLayout = sidebarFloatingLayout;
 exports.sidebarFullHeight = sidebarFullHeight;
 exports.sidebarLayout = sidebarLayout;

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

@@ -1,38 +1,34 @@
-const root = "_root_1vko5_1";
-const sidebarLayout = "_sidebarLayout_1vko5_20";
-const sidebarFloatingLayout = "_sidebarFloatingLayout_1vko5_30";
-const header = "_header_1vko5_34";
-const headerFloating = "_headerFloating_1vko5_43";
-const sidebar = "_sidebar_1vko5_20";
-const sidebarFullHeight = "_sidebarFullHeight_1vko5_81";
-const sidebarFloating = "_sidebarFloating_1vko5_30";
-const main = "_main_1vko5_95";
-const mainFloating = "_mainFloating_1vko5_102";
-const paddingSm = "_paddingSm_1vko5_114";
-const paddingMd = "_paddingMd_1vko5_118";
-const paddingLg = "_paddingLg_1vko5_127";
-const aside = "_aside_1vko5_136";
+const root = "_root_1cmf1_1";
+const sidebarLayout = "_sidebarLayout_1cmf1_20";
+const header = "_header_1cmf1_30";
+const sidebar = "_sidebar_1cmf1_20";
+const sidebarFullHeight = "_sidebarFullHeight_1cmf1_73";
+const main = "_main_1cmf1_83";
+const mainFloating = "_mainFloating_1cmf1_90";
+const paddingSm = "_paddingSm_1cmf1_104";
+const paddingMd = "_paddingMd_1cmf1_108";
+const paddingLg = "_paddingLg_1cmf1_117";
+const aside = "_aside_1cmf1_126";
+const asideFloating = "_asideFloating_1cmf1_147";
 const styles = {
   root,
   sidebarLayout,
-  sidebarFloatingLayout,
   header,
-  headerFloating,
   sidebar,
   sidebarFullHeight,
-  sidebarFloating,
   main,
   mainFloating,
   paddingSm,
   paddingMd,
   paddingLg,
-  aside
+  aside,
+  asideFloating
 };
 export {
   aside,
+  asideFloating,
   styles as default,
   header,
-  headerFloating,
   main,
   mainFloating,
   paddingLg,
@@ -40,8 +36,6 @@ export {
   paddingSm,
   root,
   sidebar,
-  sidebarFloating,
-  sidebarFloatingLayout,
   sidebarFullHeight,
   sidebarLayout
 };

package/dist/components/AppShell/index.cjs

@@ -21,8 +21,19 @@ function _interopNamespaceDefault(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",
@@ -79,6 +90,7 @@ function AppShellInner({
   children,
   className,
   layout,
+  structure,
   style: styleProp,
   ...htmlProps
 }) {
@@ -86,8 +98,7 @@ function AppShellInner({
   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,
+    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;
@@ -104,12 +115,16 @@ function AppShellInner({
 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,
@@ -123,26 +138,25 @@ function AppShellRoot({
       collapsedWidth: config.sidebarCollapsedWidth,
       collapsible: config.sidebarCollapsible,
       defaultCollapsed: config.sidebarDefaultCollapsed,
-      children: /* @__PURE__ */ jsxRuntime.jsx(AppShellInner, { className, layout, ...htmlProps, children })
+      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 { 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,
+    ...bg ? { backgroundColor: bg } : {},
     ...styleProp
   };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { ...htmlProps, className: classes, style, children });
@@ -154,19 +168,26 @@ function AppShellSidebar({
   collapsible = "icon",
   position = "left",
   defaultCollapsed = false,
+  variant,
+  bg,
   "aria-label": ariaLabel,
   className,
+  style: styleProp,
   ...htmlProps
 }) {
   const isMobile = useIsMobile();
-  const { layout } = useAppShell();
+  const { layout, structure } = useAppShell();
+  const resolvedVariant = resolveSlotVariant(variant, layout, "sidebar");
   const classes = [
     AppShell_module.default.sidebar,
-    (layout === "sidebar" || layout === "sidebar-floating") && AppShell_module.default.sidebarFullHeight,
-    layout === "sidebar-floating" && AppShell_module.default.sidebarFloating,
+    structure === "sidebar" && AppShell_module.default.sidebarFullHeight,
+    resolvedVariant === "floating" && AppShell_module.default.sidebarFloating,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlProps, className: classes, children: [
+  const style = {
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...htmlProps, className: classes, style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       index.Sidebar,
       {
@@ -176,6 +197,7 @@ function AppShellSidebar({
         collapsible,
         defaultCollapsed,
         "aria-label": ariaLabel,
+        style: bg ? { backgroundColor: bg } : void 0,
         children
       }
     ),
@@ -185,33 +207,50 @@ function AppShellSidebar({
 function AppShellMain({
   children,
   padding = "md",
+  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)}`],
-    layout === "sidebar-floating" && AppShell_module.default.mainFloating,
+    resolvedVariant === "floating" && AppShell_module.default.mainFloating,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxRuntime.jsx("main", { ...htmlProps, className: classes, id, children });
+  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, className].filter(Boolean).join(" ");
+  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 });

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

@@ -1,44 +1,59 @@
 import * as React from 'react';
 import { type SidebarCollapsible } from '../Sidebar';
 /**
+ * Structural layout — controls CSS grid areas.
+ *
  * ```
- * 'default'           'sidebar'          'sidebar-floating'
- * ┌──────────────┐    ┌────┬─────────┐   ┌────┬─────────┐
- * │    Header    │    │    │ Header  │   │    │ Header  │
- * ├────┬─────────┤    │Side├─────────┤   │Side├╌╌╌╌╌╌╌╌╌┤
- * │    │         │    │bar │         │   │bar │┌───────┐│
- * │Side│  Main   │    │    │  Main   │   │    ││ Main  ││
- * │bar │         │    │    │         │   │    │└───────┘│
- * └────┴─────────┘    └────┴─────────┘   └────┴─────────┘
+ * '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';
+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 mode:
-     *
-     * ```
-     * 'default'           'sidebar'          'sidebar-floating'
-     * ┌──────────────┐    ┌────┬─────────┐   ┌────┬─────────┐
-     * │    Header    │    │    │ Header  │   │    │ Header  │
-     * ├────┬─────────┤    │Side├─────────┤   │Side├╌╌╌╌╌╌╌╌╌┤
-     * │    │         │    │bar │         │   │bar │┌───────┐│
-     * │Side│  Main   │    │    │  Main   │   │    ││ Main  ││
-     * │bar │         │    │    │         │   │    │└───────┘│
-     * └────┴─────────┘    └────┴─────────┘   └────┴─────────┘
-     * ```
+     * Layout structure:
      *
      * - `'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
+     *
+     * 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;
@@ -52,11 +67,19 @@ export interface AppShellSidebarProps extends React.HTMLAttributes<HTMLDivElemen
     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 rounded corners and elevated background */
+    variant?: AppShellSlotVariant;
+    /** Background color override (accepts any CSS color value or token) */
+    bg?: string;
 }
 export interface AppShellAsideProps extends React.HTMLAttributes<HTMLElement> {
     children: React.ReactNode;
@@ -64,9 +87,14 @@ export interface AppShellAsideProps extends React.HTMLAttributes<HTMLElement> {
     width?: string;
     /** Control visibility */
     visible?: boolean;
+    /** Visual treatment: `'floating'` adds rounded corners and elevated background */
+    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;
@@ -78,23 +106,23 @@ 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;
+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, className, style: styleProp, ...htmlProps }: AppShellHeaderProps): import("react/jsx-runtime").JSX.Element;
+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, 'aria-label': ariaLabel, className, ...htmlProps }: AppShellSidebarProps): import("react/jsx-runtime").JSX.Element;
+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, className, id, ...htmlProps }: AppShellMainProps): import("react/jsx-runtime").JSX.Element;
+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, className, style: styleProp, ...htmlProps }: AppShellAsideProps): import("react/jsx-runtime").JSX.Element | null;
+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;

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

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