@fragments-sdk/ui 0.14.0 → 0.16.0

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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"}

package/dist/components/AppShell/index.js

@@ -2,8 +2,19 @@ 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",
@@ -60,6 +71,7 @@ function AppShellInner({
   children,
   className,
   layout,
+  structure,
   style: styleProp,
   ...htmlProps
 }) {
@@ -67,8 +79,7 @@ function AppShellInner({
   const { collapsed, isMobile, collapsible } = useSidebar();
   const classes = [
     styles.root,
-    (layout === "sidebar" || layout === "sidebar-floating") && styles.sidebarLayout,
-    layout === "sidebar-floating" && styles.sidebarFloatingLayout,
+    structure === "sidebar" && styles.sidebarLayout,
     className
   ].filter(Boolean).join(" ");
   const actualSidebarWidth = isMobile ? "0px" : collapsible === "icon" && collapsed ? appShell.sidebarCollapsedWidth : collapsible === "offcanvas" && collapsed ? "0px" : appShell.sidebarWidth;
@@ -85,12 +96,16 @@ function AppShellInner({
 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,
@@ -104,26 +119,25 @@ function AppShellRoot({
       collapsedWidth: config.sidebarCollapsedWidth,
       collapsible: config.sidebarCollapsible,
       defaultCollapsed: config.sidebarDefaultCollapsed,
-      children: /* @__PURE__ */ jsx(AppShellInner, { className, layout, ...htmlProps, children })
+      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 { layout } = useAppShell();
   const classes = [
     styles.header,
-    (layout === "sidebar" || layout === "sidebar-floating") && styles.headerSidebar,
-    layout === "sidebar-floating" && styles.headerFloating,
     className
   ].filter(Boolean).join(" ");
   const style = {
     "--header-height": height,
+    ...bg ? { backgroundColor: bg } : {},
     ...styleProp
   };
   return /* @__PURE__ */ jsx("div", { ...htmlProps, className: classes, style, children });
@@ -135,19 +149,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 = [
     styles.sidebar,
-    (layout === "sidebar" || layout === "sidebar-floating") && styles.sidebarFullHeight,
-    layout === "sidebar-floating" && styles.sidebarFloating,
+    structure === "sidebar" && styles.sidebarFullHeight,
+    resolvedVariant === "floating" && styles.sidebarFloating,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { ...htmlProps, className: classes, children: [
+  const style = {
+    ...styleProp
+  };
+  return /* @__PURE__ */ jsxs("div", { ...htmlProps, className: classes, style, children: [
     /* @__PURE__ */ jsx(
       Sidebar,
       {
@@ -157,6 +178,7 @@ function AppShellSidebar({
         collapsible,
         defaultCollapsed,
         "aria-label": ariaLabel,
+        style: bg ? { backgroundColor: bg } : void 0,
         children
       }
     ),
@@ -166,33 +188,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 = [
     styles.main,
     padding !== "none" && styles[`padding${padding.charAt(0).toUpperCase() + padding.slice(1)}`],
-    layout === "sidebar-floating" && styles.mainFloating,
+    resolvedVariant === "floating" && styles.mainFloating,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("main", { ...htmlProps, className: classes, id, children });
+  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, className].filter(Boolean).join(" ");
+  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 });
@@ -212,4 +251,3 @@ export {
   AppShellSidebar,
   useAppShell
 };
-//# sourceMappingURL=index.js.map

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

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const avatar = "_avatar_uw9aa_1";
-const square = "_square_uw9aa_15";
-const xs = "_xs_uw9aa_19";
-const sm = "_sm_uw9aa_25";
-const md = "_md_uw9aa_31";
-const lg = "_lg_uw9aa_37";
-const xl = "_xl_uw9aa_43";
-const image = "_image_uw9aa_49";
-const initials = "_initials_uw9aa_55";
-const fallbackIcon = "_fallbackIcon_uw9aa_62";
-const group = "_group_uw9aa_68";
-const groupItem = "_groupItem_uw9aa_74";
-const overflow = "_overflow_uw9aa_102";
+const avatar = "_avatar_hzbml_1";
+const square = "_square_hzbml_15";
+const xs = "_xs_hzbml_19";
+const sm = "_sm_hzbml_25";
+const md = "_md_hzbml_31";
+const lg = "_lg_hzbml_37";
+const xl = "_xl_hzbml_43";
+const image = "_image_hzbml_49";
+const initials = "_initials_hzbml_55";
+const fallbackIcon = "_fallbackIcon_hzbml_62";
+const group = "_group_hzbml_68";
+const groupItem = "_groupItem_hzbml_74";
+const overflow = "_overflow_hzbml_102";
 const styles = {
   avatar,
   square,
@@ -42,4 +42,3 @@ exports.sm = sm;
 exports.square = square;
 exports.xl = xl;
 exports.xs = xs;
-//# sourceMappingURL=Avatar.module.scss.cjs.map

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

@@ -1,16 +1,16 @@
-const avatar = "_avatar_uw9aa_1";
-const square = "_square_uw9aa_15";
-const xs = "_xs_uw9aa_19";
-const sm = "_sm_uw9aa_25";
-const md = "_md_uw9aa_31";
-const lg = "_lg_uw9aa_37";
-const xl = "_xl_uw9aa_43";
-const image = "_image_uw9aa_49";
-const initials = "_initials_uw9aa_55";
-const fallbackIcon = "_fallbackIcon_uw9aa_62";
-const group = "_group_uw9aa_68";
-const groupItem = "_groupItem_uw9aa_74";
-const overflow = "_overflow_uw9aa_102";
+const avatar = "_avatar_hzbml_1";
+const square = "_square_hzbml_15";
+const xs = "_xs_hzbml_19";
+const sm = "_sm_hzbml_25";
+const md = "_md_hzbml_31";
+const lg = "_lg_hzbml_37";
+const xl = "_xl_hzbml_43";
+const image = "_image_hzbml_49";
+const initials = "_initials_hzbml_55";
+const fallbackIcon = "_fallbackIcon_hzbml_62";
+const group = "_group_hzbml_68";
+const groupItem = "_groupItem_hzbml_74";
+const overflow = "_overflow_hzbml_102";
 const styles = {
   avatar,
   square,
@@ -42,4 +42,3 @@ export {
   xl,
   xs
 };
-//# sourceMappingURL=Avatar.module.scss.js.map

package/dist/components/Avatar/index.cjs

@@ -201,4 +201,3 @@ const Avatar = Object.assign(AvatarBase, {
   Group: AvatarGroup
 });
 exports.Avatar = Avatar;
-//# sourceMappingURL=index.cjs.map

package/dist/components/Avatar/index.js

@@ -184,4 +184,3 @@ const Avatar = Object.assign(AvatarBase, {
 export {
   Avatar
 };
-//# sourceMappingURL=index.js.map

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

@@ -40,4 +40,3 @@ exports.remove = remove;
 exports.sm = sm;
 exports.success = success;
 exports.warning = warning;
-//# sourceMappingURL=Badge.module.scss.cjs.map

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

@@ -40,4 +40,3 @@ export {
   success,
   warning
 };
-//# sourceMappingURL=Badge.module.scss.js.map

package/dist/components/Badge/index.cjs

@@ -67,4 +67,3 @@ const Badge = Object.assign(BadgeRoot, {
   Root: BadgeRoot
 });
 exports.Badge = Badge;
-//# sourceMappingURL=index.cjs.map

package/dist/components/Badge/index.js

@@ -50,4 +50,3 @@ const Badge = Object.assign(BadgeRoot, {
 export {
   Badge
 };
-//# sourceMappingURL=index.js.map

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

@@ -1,16 +1,19 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const grid = "_grid_svc6l_1";
-const columns2 = "_columns2_svc6l_7";
-const columns3 = "_columns3_svc6l_11";
-const columns4 = "_columns4_svc6l_15";
-const gapNone = "_gapNone_svc6l_32";
-const gapXs = "_gapXs_svc6l_36";
-const gapSm = "_gapSm_svc6l_40";
-const gapMd = "_gapMd_svc6l_44";
-const gapLg = "_gapLg_svc6l_48";
-const gapXl = "_gapXl_svc6l_52";
-const item = "_item_svc6l_56";
+const grid = "_grid_1cjb3_1";
+const columns2 = "_columns2_1cjb3_7";
+const columns3 = "_columns3_1cjb3_11";
+const columns4 = "_columns4_1cjb3_15";
+const gapNone = "_gapNone_1cjb3_32";
+const gapXs = "_gapXs_1cjb3_36";
+const gapSm = "_gapSm_1cjb3_40";
+const gapMd = "_gapMd_1cjb3_44";
+const gapLg = "_gapLg_1cjb3_48";
+const gapXl = "_gapXl_1cjb3_52";
+const item = "_item_1cjb3_56";
+const subgridRows = "_subgridRows_1cjb3_132";
+const subgridColumns = "_subgridColumns_1cjb3_137";
+const subgridBoth = "_subgridBoth_1cjb3_142";
 const styles = {
   grid,
   columns2,
@@ -22,7 +25,10 @@ const styles = {
   gapMd,
   gapLg,
   gapXl,
-  item
+  item,
+  subgridRows,
+  subgridColumns,
+  subgridBoth
 };
 exports.columns2 = columns2;
 exports.columns3 = columns3;
@@ -36,4 +42,6 @@ exports.gapXl = gapXl;
 exports.gapXs = gapXs;
 exports.grid = grid;
 exports.item = item;
-//# sourceMappingURL=BentoGrid.module.scss.cjs.map
+exports.subgridBoth = subgridBoth;
+exports.subgridColumns = subgridColumns;
+exports.subgridRows = subgridRows;

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

@@ -1,14 +1,17 @@
-const grid = "_grid_svc6l_1";
-const columns2 = "_columns2_svc6l_7";
-const columns3 = "_columns3_svc6l_11";
-const columns4 = "_columns4_svc6l_15";
-const gapNone = "_gapNone_svc6l_32";
-const gapXs = "_gapXs_svc6l_36";
-const gapSm = "_gapSm_svc6l_40";
-const gapMd = "_gapMd_svc6l_44";
-const gapLg = "_gapLg_svc6l_48";
-const gapXl = "_gapXl_svc6l_52";
-const item = "_item_svc6l_56";
+const grid = "_grid_1cjb3_1";
+const columns2 = "_columns2_1cjb3_7";
+const columns3 = "_columns3_1cjb3_11";
+const columns4 = "_columns4_1cjb3_15";
+const gapNone = "_gapNone_1cjb3_32";
+const gapXs = "_gapXs_1cjb3_36";
+const gapSm = "_gapSm_1cjb3_40";
+const gapMd = "_gapMd_1cjb3_44";
+const gapLg = "_gapLg_1cjb3_48";
+const gapXl = "_gapXl_1cjb3_52";
+const item = "_item_1cjb3_56";
+const subgridRows = "_subgridRows_1cjb3_132";
+const subgridColumns = "_subgridColumns_1cjb3_137";
+const subgridBoth = "_subgridBoth_1cjb3_142";
 const styles = {
   grid,
   columns2,
@@ -20,7 +23,10 @@ const styles = {
   gapMd,
   gapLg,
   gapXl,
-  item
+  item,
+  subgridRows,
+  subgridColumns,
+  subgridBoth
 };
 export {
   columns2,
@@ -34,6 +40,8 @@ export {
   gapXl,
   gapXs,
   grid,
-  item
+  item,
+  subgridBoth,
+  subgridColumns,
+  subgridRows
 };
-//# sourceMappingURL=BentoGrid.module.scss.js.map

package/dist/components/BentoGrid/index.cjs

@@ -57,11 +57,17 @@ const BentoGrid = React__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...htmlProps, className: classes, style, children });
   }
 );
+const subgridClasses = {
+  rows: BentoGrid_module.default.subgridRows,
+  columns: BentoGrid_module.default.subgridColumns,
+  both: BentoGrid_module.default.subgridBoth
+};
 const BentoGridItem = React__namespace.forwardRef(
   function BentoGridItem2({
     children,
     colSpan,
     rowSpan,
+    subgrid,
     className,
     style,
     ...htmlProps
@@ -72,10 +78,10 @@ const BentoGridItem = React__namespace.forwardRef(
     };
     const hasVars = Object.keys(spanVars).length > 0;
     const inlineStyle = hasVars ? { ...spanVars, ...style } : style;
-    const classes = [BentoGrid_module.default.item, className].filter(Boolean).join(" ");
+    const subgridClass = subgrid ? subgridClasses[subgrid === true ? "rows" : subgrid] : void 0;
+    const classes = [BentoGrid_module.default.item, subgridClass, className].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...htmlProps, className: classes, style: inlineStyle, children });
   }
 );
 BentoGrid.Item = BentoGridItem;
 exports.BentoGrid = BentoGrid;
-//# sourceMappingURL=index.cjs.map

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

@@ -25,6 +25,14 @@ export interface BentoGridItemProps extends React.HTMLAttributes<HTMLDivElement>
     colSpan?: SpanValue | ResponsiveSpan;
     /** Rows to span — number for all breakpoints, object for per-breakpoint */
     rowSpan?: SpanValue | ResponsiveSpan;
+    /**
+     * Enable CSS subgrid so children align to parent grid tracks.
+     * - `true` or `"rows"` — children align to parent row tracks
+     * - `"columns"` — children align to parent column tracks
+     * - `"both"` — children align to both row and column tracks
+     * Requires the item to span multiple rows/columns for visible effect.
+     */
+    subgrid?: boolean | 'rows' | 'columns' | 'both';
 }
 export declare const BentoGrid: BentoGridComponent;
 declare const BentoGridItem: React.ForwardRefExoticComponent<BentoGridItemProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BentoGrid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE3B,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;CAChB;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mEAAmE;IACnE,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IACrC,2EAA2E;IAC3E,OAAO,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;CACtC;AAkCD,eAAO,MAAM,SAAS,EA2BjB,kBAAkB,CAAC;AAMxB,QAAA,MAAM,aAAa,2FA8BlB,CAAC;AAMF,UAAU,kBACR,SAAQ,KAAK,CAAC,yBAAyB,CAAC,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7F,IAAI,EAAE,OAAO,aAAa,CAAC;CAC5B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BentoGrid/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,KAAK,SAAS,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAE3B,MAAM,WAAW,cAAc;IAC7B,6BAA6B;IAC7B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,aAAa;IACb,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;IACf,cAAc;IACd,EAAE,CAAC,EAAE,SAAS,CAAC;CAChB;AAED,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mEAAmE;IACnE,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACpB,6BAA6B;IAC7B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CACjD;AAED,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC9E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,8EAA8E;IAC9E,OAAO,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IACrC,2EAA2E;IAC3E,OAAO,CAAC,EAAE,SAAS,GAAG,cAAc,CAAC;IACrC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;CACjD;AAkCD,eAAO,MAAM,SAAS,EA2BjB,kBAAkB,CAAC;AAYxB,QAAA,MAAM,aAAa,2FAmClB,CAAC;AAMF,UAAU,kBACR,SAAQ,KAAK,CAAC,yBAAyB,CAAC,cAAc,GAAG,KAAK,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IAC7F,IAAI,EAAE,OAAO,aAAa,CAAC;CAC5B"}

package/dist/components/BentoGrid/index.js

@@ -38,11 +38,17 @@ const BentoGrid = React.forwardRef(
     return /* @__PURE__ */ jsx("div", { ref, ...htmlProps, className: classes, style, children });
   }
 );
+const subgridClasses = {
+  rows: styles.subgridRows,
+  columns: styles.subgridColumns,
+  both: styles.subgridBoth
+};
 const BentoGridItem = React.forwardRef(
   function BentoGridItem2({
     children,
     colSpan,
     rowSpan,
+    subgrid,
     className,
     style,
     ...htmlProps
@@ -53,7 +59,8 @@ const BentoGridItem = React.forwardRef(
     };
     const hasVars = Object.keys(spanVars).length > 0;
     const inlineStyle = hasVars ? { ...spanVars, ...style } : style;
-    const classes = [styles.item, className].filter(Boolean).join(" ");
+    const subgridClass = subgrid ? subgridClasses[subgrid === true ? "rows" : subgrid] : void 0;
+    const classes = [styles.item, subgridClass, className].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsx("div", { ref, ...htmlProps, className: classes, style: inlineStyle, children });
   }
 );
@@ -61,4 +68,3 @@ BentoGrid.Item = BentoGridItem;
 export {
   BentoGrid
 };
-//# sourceMappingURL=index.js.map