@nuralyui/layout 0.0.1 → 0.0.2

package/content.component.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const NrContentElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+declare const NrContentElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
 /**
  * # Content Component
  *

package/content.component.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { contentStyles } from './content.style.js';
 /**
  * # Content Component

package/content.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.component.js","sourceRoot":"","sources":["../../../src/components/layout/content.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEnD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAGxD,MAAM;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAC;IACJ,CAAC;CACF,CAAA;AATiB,uBAAM,GAAG,aAAc,CAAA;AAD5B,gBAAgB;IAD5B,aAAa,CAAC,YAAY,CAAC;GACf,gBAAgB,CAU5B;SAVY,gBAAgB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { contentStyles } from './content.style.js';\n\n/**\n * # Content Component\n * \n * The content layout component with default styling.\n * Must be placed inside a Layout component.\n * \n * @element nr-content\n * \n * @slot - Default slot for main content\n * \n * @csspart content - The content container element\n * \n * @example\n * ```html\n * <nr-layout>\n *   <nr-content>\n *     <h1>Main Content</h1>\n *     <p>Your content goes here...</p>\n *   </nr-content>\n * </nr-layout>\n * ```\n */\n@customElement('nr-content')\nexport class NrContentElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = contentStyles;\n\n  override render() {\n    return html`\n      <main class=\"nr-content\" part=\"content\">\n        <slot></slot>\n      </main>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-content': NrContentElement;\n  }\n}\n"]}

package/content.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.style.js","sourceRoot":"","sources":["../../../src/components/layout/content.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAc/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const contentStyles = css`\n  :host {\n    display: block;\n    flex: auto;\n    min-height: 0;\n  }\n\n  .nr-content {\n    flex: auto;\n    min-height: 0;\n    background: var(--nuraly-layout-content-background);\n    color: var(--nuraly-layout-content-text);\n    transition: var(--nuraly-layout-transition);\n  }\n`;\n"]}

package/footer.component.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const NrFooterElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+declare const NrFooterElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
 /**
  * # Footer Component
  *

package/footer.component.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { footerStyles } from './footer.style.js';
 /**
  * # Footer Component

package/footer.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.component.js","sourceRoot":"","sources":["../../../src/components/layout/footer.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAlE;;QAGE;;WAEG;QAEH,YAAO,GAAG,WAAW,CAAC;IAaxB,CAAC;IAXU,MAAM;QACb,OAAO,IAAI,CAAA;;;;0BAIW,IAAI,CAAC,OAAO;;;;KAIjC,CAAC;IACJ,CAAC;CACF,CAAA;AAnBiB,sBAAM,GAAG,YAAa,CAAA;AAMtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACL;AAPX,eAAe;IAD3B,aAAa,CAAC,WAAW,CAAC;GACd,eAAe,CAoB3B;SApBY,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { footerStyles } from './footer.style.js';\n\n/**\n * # Footer Component\n * \n * The bottom layout component with default styling.\n * Must be placed inside a Layout component.\n * \n * @element nr-footer\n * \n * @slot - Default slot for footer content\n * \n * @csspart footer - The footer container element\n * \n * @example\n * ```html\n * <nr-layout>\n *   <nr-footer>\n *     Copyright © 2025 My Company\n *   </nr-footer>\n * </nr-layout>\n * ```\n */\n@customElement('nr-footer')\nexport class NrFooterElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = footerStyles;\n\n  /**\n   * Padding of the footer. Default is \"24px 50px\".\n   */\n  @property({ type: String })\n  padding = '24px 50px';\n\n  override render() {\n    return html`\n      <footer \n        class=\"nr-footer\" \n        part=\"footer\"\n        style=\"padding: ${this.padding}\"\n      >\n        <slot></slot>\n      </footer>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-footer': NrFooterElement;\n  }\n}\n"]}

package/footer.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.style.js","sourceRoot":"","sources":["../../../src/components/layout/footer.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;CAc9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const footerStyles = css`\n  :host {\n    display: block;\n  }\n\n  .nr-footer {\n    padding: var(--nuraly-layout-footer-padding);\n    background: var(--nuraly-layout-footer-background);\n    color: var(--nuraly-layout-footer-text);\n    border-top: 1px solid var(--nuraly-layout-footer-border);\n    font-size: var(--nuraly-layout-font-size);\n    line-height: var(--nuraly-layout-line-height);\n    transition: var(--nuraly-layout-transition);\n  }\n`;\n"]}

package/header.component.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const NrHeaderElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+declare const NrHeaderElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
 /**
  * # Header Component
  *

package/header.component.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { headerStyles } from './header.style.js';
 /**
  * # Header Component

package/header.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.component.js","sourceRoot":"","sources":["../../../src/components/layout/header.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAlE;;QAGE;;WAEG;QAEH,WAAM,GAAG,MAAM,CAAC;IAalB,CAAC;IAXU,MAAM;QACb,OAAO,IAAI,CAAA;;;;yBAIU,IAAI,CAAC,MAAM;;;;KAI/B,CAAC;IACJ,CAAC;CACF,CAAA;AAnBiB,sBAAM,GAAG,YAAa,CAAA;AAMtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;+CACX;AAPL,eAAe;IAD3B,aAAa,CAAC,WAAW,CAAC;GACd,eAAe,CAoB3B;SApBY,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { headerStyles } from './header.style.js';\n\n/**\n * # Header Component\n * \n * The top layout component with default styling.\n * Must be placed inside a Layout component.\n * \n * @element nr-header\n * \n * @slot - Default slot for header content\n * \n * @csspart header - The header container element\n * \n * @example\n * ```html\n * <nr-layout>\n *   <nr-header>\n *     <div class=\"logo\">My App</div>\n *     <nav>Navigation</nav>\n *   </nr-header>\n * </nr-layout>\n * ```\n */\n@customElement('nr-header')\nexport class NrHeaderElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = headerStyles;\n\n  /**\n   * Height of the header. Default is 64px.\n   */\n  @property({ type: String })\n  height = '64px';\n\n  override render() {\n    return html`\n      <header \n        class=\"nr-header\" \n        part=\"header\"\n        style=\"height: ${this.height}\"\n      >\n        <slot></slot>\n      </header>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-header': NrHeaderElement;\n  }\n}\n"]}

package/header.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.style.js","sourceRoot":"","sources":["../../../src/components/layout/header.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgB9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const headerStyles = css`\n  :host {\n    display: block;\n  }\n\n  .nr-header {\n    display: flex;\n    align-items: center;\n    padding: var(--nuraly-layout-header-padding);\n    height: var(--nuraly-layout-header-height);\n    line-height: var(--nuraly-layout-header-height);\n    background: var(--nuraly-layout-header-background);\n    color: var(--nuraly-layout-header-text);\n    border-bottom: 1px solid var(--nuraly-layout-header-border);\n    transition: var(--nuraly-layout-transition);\n  }\n`;\n"]}

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAa1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC","sourcesContent":["export { NrLayoutElement } from './layout.component.js';\nexport { NrHeaderElement } from './header.component.js';\nexport { NrFooterElement } from './footer.component.js';\nexport { NrSiderElement } from './sider.component.js';\nexport { NrContentElement } from './content.component.js';\nexport type {\n  LayoutBreakpoint,\n  SiderTheme,\n  SiderTrigger,\n  OnBreakpoint,\n  OnCollapse,\n  LayoutProps,\n  SiderProps,\n  HeaderProps,\n  FooterProps,\n  ContentProps,\n} from './layout.types.js';\nexport { BREAKPOINT_VALUES } from './layout.types.js';\n"]}

package/layout.component.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-declare const NrLayoutElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+declare const NrLayoutElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
 /**
  * # Layout Component
  *

package/layout.component.js

@@ -6,7 +6,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html } from 'lit';
 import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { layoutStyles } from './layout.style.js';
 /**
  * # Layout Component

package/layout.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.component.js","sourceRoot":"","sources":["../../../src/components/layout/layout.component.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AACnF,OAAO,EAAE,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,IAAa,eAAe,GAA5B,MAAa,eAAgB,SAAQ,iBAAiB,CAAC,UAAU,CAAC;IAAlE;;QAGE;;;;WAIG;QAEH,aAAQ,GAAG,KAAK,CAAC;IA4CnB,CAAC;IAxCU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEQ,OAAO,CAAC,iBAAuC;QACtD,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED;;OAEG;IACK,WAAW;;QACjB,MAAM,IAAI,GAAG,MAAA,IAAI,CAAC,UAAU,0CAAE,aAAa,CAAC,MAAM,CAAC,CAAC;QACpD,IAAI,IAAI,EAAE;YACR,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACjD,MAAM,eAAe,GAAG,gBAAgB,CAAC,IAAI,CAC3C,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,KAAK,UAAU,CAChD,CAAC;YACF,IAAI,IAAI,CAAC,QAAQ,KAAK,eAAe,EAAE;gBACrC,IAAI,CAAC,QAAQ,GAAG,eAAe,CAAC;aACjC;SACF;IACH,CAAC;IAED;;OAEG;IACK,gBAAgB;QACtB,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;4BAEa,IAAI,CAAC,gBAAgB;;KAE5C,CAAC;IACJ,CAAC;CACF,CAAA;AApDiB,sBAAM,GAAG,YAAa,CAAA;AAQtC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;iDAClD;AAIjB;IAFC,qBAAqB,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;wDAK/C;AAhBU,eAAe;IAD3B,aAAa,CAAC,WAAW,CAAC;GACd,eAAe,CAqD3B;SArDY,eAAe","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property, queryAssignedElements } from 'lit/decorators.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { layoutStyles } from './layout.style.js';\n\n/**\n * # Layout Component\n * \n * The layout wrapper component that provides the base structure for a page layout.\n * Can contain Header, Sider, Content, Footer, or nested Layout components.\n * \n * @element nr-layout\n * \n * @slot - Default slot for layout children (Header, Sider, Content, Footer, or nested Layout)\n * \n * @csspart layout - The layout container element\n * \n * @example\n * ```html\n * <nr-layout>\n *   <nr-header>Header</nr-header>\n *   <nr-content>Content</nr-content>\n *   <nr-footer>Footer</nr-footer>\n * </nr-layout>\n * ```\n */\n@customElement('nr-layout')\nexport class NrLayoutElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = layoutStyles;\n\n  /**\n   * Whether the layout contains a Sider component.\n   * When true, the layout uses horizontal flex direction.\n   * Automatically detected from slotted content.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'has-sider' })\n  hasSider = false;\n\n  @queryAssignedElements({ selector: 'nr-sider' })\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.detectSider();\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    this.detectSider();\n  }\n\n  /**\n   * Detects if the layout has a Sider component as a direct child\n   */\n  private detectSider(): void {\n    const slot = this.shadowRoot?.querySelector('slot');\n    if (slot) {\n      const assignedElements = slot.assignedElements();\n      const hasSiderElement = assignedElements.some(\n        (el) => el.tagName.toLowerCase() === 'nr-sider'\n      );\n      if (this.hasSider !== hasSiderElement) {\n        this.hasSider = hasSiderElement;\n      }\n    }\n  }\n\n  /**\n   * Handles slot changes to re-detect sider elements\n   */\n  private handleSlotChange(): void {\n    this.detectSider();\n  }\n\n  override render() {\n    return html`\n      <div class=\"nr-layout\" part=\"layout\">\n        <slot @slotchange=${this.handleSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-layout': NrLayoutElement;\n  }\n}\n"]}

package/layout.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.style.js","sourceRoot":"","sources":["../../../src/components/layout/layout.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;CAoB9B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const layoutStyles = css`\n  :host {\n    display: flex;\n    flex: auto;\n    flex-direction: column;\n    min-height: 0;\n    background: var(--nuraly-layout-background);\n  }\n\n  :host([has-sider]) {\n    flex-direction: row;\n  }\n\n  .nr-layout {\n    display: flex;\n    flex: auto;\n    flex-direction: inherit;\n    min-height: 0;\n    width: 100%;\n  }\n`;\n"]}

package/layout.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.types.js","sourceRoot":"","sources":["../../../src/components/layout/layout.types.ts"],"names":[],"mappings":"AAYA;;GAEG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAqC;IACjE,gCAAqB,EAAE,GAAG;IAC1B,gCAAqB,EAAE,GAAG;IAC1B,gCAAqB,EAAE,GAAG;IAC1B,gCAAqB,EAAE,GAAG;IAC1B,gCAAqB,EAAE,IAAI;IAC3B,kCAAsB,EAAE,IAAI;CAC7B,CAAC","sourcesContent":["/**\n * Breakpoints for responsive layout\n */\nexport const enum LayoutBreakpoint {\n  XS = 'xs',\n  SM = 'sm',\n  MD = 'md',\n  LG = 'lg',\n  XL = 'xl',\n  XXL = 'xxl',\n}\n\n/**\n * Breakpoint width values in pixels\n */\nexport const BREAKPOINT_VALUES: Record<LayoutBreakpoint, number> = {\n  [LayoutBreakpoint.XS]: 480,\n  [LayoutBreakpoint.SM]: 576,\n  [LayoutBreakpoint.MD]: 768,\n  [LayoutBreakpoint.LG]: 992,\n  [LayoutBreakpoint.XL]: 1200,\n  [LayoutBreakpoint.XXL]: 1600,\n};\n\n/**\n * Sider theme options\n */\nexport const enum SiderTheme {\n  Light = 'light',\n  Dark = 'dark',\n}\n\n/**\n * Sider collapse trigger type\n */\nexport type SiderTrigger = 'default' | null;\n\n/**\n * Callback for breakpoint changes\n */\nexport type OnBreakpoint = (broken: boolean) => void;\n\n/**\n * Callback for collapse state changes\n */\nexport type OnCollapse = (collapsed: boolean, type: 'clickTrigger' | 'responsive') => void;\n\n/**\n * Layout component properties\n */\nexport interface LayoutProps {\n  hasSider?: boolean;\n}\n\n/**\n * Sider component properties\n */\nexport interface SiderProps {\n  breakpoint?: LayoutBreakpoint;\n  collapsed?: boolean;\n  collapsedWidth?: number;\n  collapsible?: boolean;\n  defaultCollapsed?: boolean;\n  reverseArrow?: boolean;\n  theme?: SiderTheme;\n  trigger?: SiderTrigger;\n  width?: number | string;\n  zeroWidthTriggerStyle?: string;\n  onBreakpoint?: OnBreakpoint;\n  onCollapse?: OnCollapse;\n}\n\n/**\n * Header component properties\n */\nexport interface HeaderProps {\n  height?: number | string;\n}\n\n/**\n * Footer component properties\n */\nexport interface FooterProps {\n  padding?: string;\n}\n\n/**\n * Content component properties\n */\nexport interface ContentProps {}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuralyui/layout",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "Layout components for NuralyUI - includes Layout, Header, Footer, Sider, and Content",
     "type": "module",
     "main": "index.js",
@@ -10,11 +10,16 @@
         ".": {
             "import": "./index.js",
             "types": "./index.d.ts"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
         }
     },
     "files": [
         "*.js",
         "*.d.ts",
+        "*.js.map",
+        "bundle.js",
         "*.ts",
         "!*.stories.ts",
         "!*.test.ts"

package/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/layout/react.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE1D,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,eAAe,CAAC;IACtC,OAAO,EAAE,WAAW;IACpB,YAAY,EAAE,eAAe;IAC7B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAG,eAAe,CAAC;IACrC,OAAO,EAAE,UAAU;IACnB,YAAY,EAAE,cAAc;IAC5B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE;QACN,UAAU,EAAE,UAAU;QACtB,YAAY,EAAE,YAAY;KAC3B;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,SAAS,GAAG,eAAe,CAAC;IACvC,OAAO,EAAE,YAAY;IACrB,YAAY,EAAE,gBAAgB;IAC9B,KAAK,EAAE,KAAK;CACb,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { createComponent } from '@lit-labs/react';\nimport { NrLayoutElement } from './layout.component.js';\nimport { NrHeaderElement } from './header.component.js';\nimport { NrFooterElement } from './footer.component.js';\nimport { NrSiderElement } from './sider.component.js';\nimport { NrContentElement } from './content.component.js';\n\nexport const NrLayout = createComponent({\n  tagName: 'nr-layout',\n  elementClass: NrLayoutElement,\n  react: React,\n});\n\nexport const NrHeader = createComponent({\n  tagName: 'nr-header',\n  elementClass: NrHeaderElement,\n  react: React,\n});\n\nexport const NrFooter = createComponent({\n  tagName: 'nr-footer',\n  elementClass: NrFooterElement,\n  react: React,\n});\n\nexport const NrSider = createComponent({\n  tagName: 'nr-sider',\n  elementClass: NrSiderElement,\n  react: React,\n  events: {\n    onCollapse: 'collapse',\n    onBreakpoint: 'breakpoint',\n  },\n});\n\nexport const NrContent = createComponent({\n  tagName: 'nr-content',\n  elementClass: NrContentElement,\n  react: React,\n});\n"]}

package/sider.component.d.ts

@@ -1,6 +1,6 @@
 import { LitElement, PropertyValues } from 'lit';
 import { LayoutBreakpoint, SiderTheme } from './layout.types.js';
-declare const NrSiderElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+declare const NrSiderElement_base: (new (...args: any[]) => import("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").EventHandlerCapable) & typeof LitElement;
 /**
  * # Sider Component
  *

package/sider.component.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
 import { siderStyles } from './sider.style.js';
 import { BREAKPOINT_VALUES, } from './layout.types.js';
 /**

package/sider.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sider.component.js","sourceRoot":"","sources":["../../../src/components/layout/sider.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport { siderStyles } from './sider.style.js';\nimport {\n    LayoutBreakpoint,\n    BREAKPOINT_VALUES,\n    SiderTheme,\n} from './layout.types.js';\n\n/**\n * # Sider Component\n * \n * The sidebar component with collapsible functionality, theme support, and responsive behavior.\n * Must be placed inside a Layout component.\n * \n * @element nr-sider\n * \n * @slot - Default slot for sider content (usually navigation menu)\n * @slot trigger - Custom trigger slot (overrides default trigger)\n * \n * @fires collapse - Fired when the sider is collapsed or expanded\n * @fires breakpoint - Fired when the breakpoint is triggered\n * \n * @csspart sider - The sider container element\n * @csspart trigger - The collapse trigger element\n * \n * @example\n * ```html\n * <nr-layout has-sider>\n *   <nr-sider collapsible breakpoint=\"lg\">\n *     <nav>Navigation Menu</nav>\n *   </nr-sider>\n *   <nr-content>Content</nr-content>\n * </nr-layout>\n * ```\n */\n@customElement('nr-sider')\nexport class NrSiderElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = siderStyles;\n\n  /**\n   * Breakpoint for responsive collapsing\n   */\n  @property({ type: String })\n  breakpoint?: LayoutBreakpoint;\n\n  /**\n   * Current collapsed state (controlled)\n   */\n  @property({ type: Boolean, reflect: true })\n  collapsed = false;\n\n  /**\n   * Width when collapsed. Set to 0 for a special trigger.\n   */\n  @property({ type: Number, attribute: 'collapsed-width' })\n  collapsedWidth = 80;\n\n  /**\n   * Whether the sider can be collapsed\n   */\n  @property({ type: Boolean })\n  collapsible = false;\n\n  /**\n   * Initial collapsed state (uncontrolled)\n   */\n  @property({ type: Boolean, attribute: 'default-collapsed' })\n  defaultCollapsed = false;\n\n  /**\n   * Reverse the arrow direction (for right-side sider)\n   */\n  @property({ type: Boolean, attribute: 'reverse-arrow' })\n  reverseArrow = false;\n\n  /**\n   * Sider theme (light or dark)\n   */\n  @property({ type: String, reflect: true })\n  theme: SiderTheme = SiderTheme.Dark;\n\n  /**\n   * Custom trigger element. Set to null to hide trigger.\n   */\n  @property({ type: String })\n  trigger: 'default' | null = 'default';\n\n  /**\n   * Sider width when expanded\n   */\n  @property({ type: String })\n  width: number | string = 200;\n\n  /**\n   * Custom styles for zero-width trigger\n   */\n  @property({ type: String, attribute: 'zero-width-trigger-style' })\n  zeroWidthTriggerStyle = '';\n\n  /**\n   * Internal state for tracking if breakpoint is active\n   */\n  @state()\n  private belowBreakpoint = false;\n\n  /**\n   * ResizeObserver for responsive behavior\n   */\n  private resizeObserver?: ResizeObserver;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    // Set initial collapsed state\n    if (this.defaultCollapsed && !this.hasAttribute('collapsed')) {\n      this.collapsed = true;\n    }\n\n    // Setup resize observer for breakpoint\n    if (this.breakpoint) {\n      this.setupResizeObserver();\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n  }\n\n  override updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n\n    if (changedProperties.has('breakpoint')) {\n      this.resizeObserver?.disconnect();\n      if (this.breakpoint) {\n        this.setupResizeObserver();\n      }\n    }\n  }\n\n  /**\n   * Setup ResizeObserver for responsive breakpoint behavior\n   */\n  private setupResizeObserver(): void {\n    if (!this.breakpoint) return;\n\n    const breakpointValue = BREAKPOINT_VALUES[this.breakpoint];\n    \n    this.resizeObserver = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const width = entry.contentRect.width;\n        const shouldBeCollapsed = width < breakpointValue;\n\n        if (shouldBeCollapsed !== this.belowBreakpoint) {\n          this.belowBreakpoint = shouldBeCollapsed;\n          \n          // Auto-collapse when below breakpoint\n          if (this.collapsible && shouldBeCollapsed !== this.collapsed) {\n            this.collapsed = shouldBeCollapsed;\n            this.dispatchCollapseEvent('responsive');\n          }\n\n          // Dispatch breakpoint event\n          this.dispatchBreakpointEvent(shouldBeCollapsed);\n        }\n      }\n    });\n\n    // Observe the parent layout or document body\n    const target = this.closest('nr-layout') || document.body;\n    this.resizeObserver.observe(target);\n  }\n\n  /**\n   * Toggle collapsed state\n   */\n  private toggleCollapse(): void {\n    this.collapsed = !this.collapsed;\n    this.dispatchCollapseEvent('clickTrigger');\n  }\n\n  /**\n   * Dispatch collapse event\n   */\n  private dispatchCollapseEvent(type: 'clickTrigger' | 'responsive'): void {\n    this.dispatchEvent(\n      new CustomEvent<{ collapsed: boolean; type: string }>('collapse', {\n        detail: { collapsed: this.collapsed, type },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Dispatch breakpoint event\n   */\n  private dispatchBreakpointEvent(broken: boolean): void {\n    this.dispatchEvent(\n      new CustomEvent<{ broken: boolean }>('breakpoint', {\n        detail: { broken },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Get the current width based on collapsed state\n   */\n  private getCurrentWidth(): string {\n    if (this.collapsed) {\n      return `${this.collapsedWidth}px`;\n    }\n    return typeof this.width === 'number' ? `${this.width}px` : this.width.toString();\n  }\n\n  /**\n   * Render the collapse trigger\n   */\n  private renderTrigger() {\n    if (this.trigger === null || !this.collapsible) {\n      return null;\n    }\n\n    // Check for custom trigger slot\n    const hasCustomTrigger = this.querySelector('[slot=\"trigger\"]');\n    if (hasCustomTrigger) {\n      return html`<slot name=\"trigger\"></slot>`;\n    }\n\n    // Zero-width trigger (special trigger when collapsedWidth is 0)\n    if (this.collapsedWidth === 0 && this.collapsed) {\n      return html`\n        <div\n          class=\"nr-sider-zero-width-trigger\"\n          part=\"trigger\"\n          style=${this.zeroWidthTriggerStyle}\n          @click=${this.toggleCollapse}\n        >\n          <span class=\"trigger-icon\">${this.reverseArrow ? '◀' : '▶'}</span>\n        </div>\n      `;\n    }\n\n    // Default trigger\n    return html`\n      <div\n        class=\"nr-sider-trigger\"\n        part=\"trigger\"\n        @click=${this.toggleCollapse}\n      >\n        <span class=\"trigger-icon\">\n          ${this.collapsed \n            ? (this.reverseArrow ? '◀' : '▶') \n            : (this.reverseArrow ? '▶' : '◀')\n          }\n        </span>\n      </div>\n    `;\n  }\n\n  override render() {\n    const classes = {\n      'nr-sider': true,\n      'nr-sider-collapsed': this.collapsed,\n      'nr-sider-has-trigger': this.collapsible && this.trigger !== null,\n      'nr-sider-below-breakpoint': this.belowBreakpoint,\n      'nr-sider-zero-width': this.collapsed && this.collapsedWidth === 0,\n    };\n\n    return html`\n      <aside\n        class=${classMap(classes)}\n        part=\"sider\"\n        style=\"width: ${this.getCurrentWidth()}; flex: 0 0 ${this.getCurrentWidth()};\"\n      >\n        <div class=\"nr-sider-children\">\n          <slot></slot>\n        </div>\n        ${this.renderTrigger()}\n      </aside>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-sider': NrSiderElement;\n  }\n}\n"]}

package/sider.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sider.style.js","sourceRoot":"","sources":["../../../src/components/layout/sider.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqG7B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const siderStyles = css`\n  :host {\n    display: block;\n    position: relative;\n  }\n\n  .nr-sider {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    min-width: 0;\n    background: var(--nuraly-layout-sider-background);\n    color: var(--nuraly-layout-sider-text);\n    border-right: 1px solid var(--nuraly-layout-sider-border);\n    transition: var(--nuraly-layout-sider-transition);\n  }\n\n  :host([theme='light']) .nr-sider {\n    background: var(--nuraly-layout-sider-light-background);\n    color: var(--nuraly-layout-sider-light-text);\n    border-right: 1px solid var(--nuraly-layout-sider-light-border);\n  }\n\n  .nr-sider-children {\n    flex: 1;\n    min-height: 0;\n    overflow: auto;\n  }\n\n  .nr-sider-trigger {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: var(--nuraly-layout-trigger-height);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--nuraly-layout-trigger-background);\n    color: var(--nuraly-layout-trigger-text);\n    cursor: pointer;\n    transition: var(--nuraly-layout-transition);\n    border-top: 1px solid var(--nuraly-layout-trigger-border);\n    border-radius: var(--nuraly-layout-trigger-border-radius);\n  }\n\n  :host([theme='light']) .nr-sider-trigger {\n    background: var(--nuraly-layout-trigger-light-background);\n    color: var(--nuraly-layout-trigger-light-text);\n    border-top: 1px solid var(--nuraly-layout-trigger-light-border);\n  }\n\n  .nr-sider-trigger:hover {\n    background: var(--nuraly-layout-trigger-background-hover);\n  }\n\n  :host([theme='light']) .nr-sider-trigger:hover {\n    background: var(--nuraly-layout-trigger-light-background-hover);\n  }\n\n  .nr-sider-zero-width-trigger {\n    position: absolute;\n    top: 64px;\n    right: calc(-1 * var(--nuraly-layout-zero-trigger-width));\n    width: var(--nuraly-layout-zero-trigger-width);\n    height: var(--nuraly-layout-zero-trigger-height);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--nuraly-layout-zero-trigger-background);\n    color: var(--nuraly-layout-zero-trigger-text);\n    cursor: pointer;\n    transition: var(--nuraly-layout-transition);\n    border-radius: var(--nuraly-layout-zero-trigger-border-radius);\n    box-shadow: var(--nuraly-layout-zero-trigger-shadow);\n    z-index: 1;\n  }\n\n  :host([theme='light']) .nr-sider-zero-width-trigger {\n    background: var(--nuraly-layout-zero-trigger-background);\n    color: var(--nuraly-layout-zero-trigger-text);\n  }\n\n  .nr-sider-zero-width-trigger:hover {\n    background: var(--nuraly-layout-zero-trigger-background-hover);\n  }\n\n  .trigger-icon {\n    font-size: 16px;\n    line-height: 1;\n  }\n\n  .nr-sider-collapsed {\n    overflow: hidden;\n  }\n\n  .nr-sider-zero-width {\n    width: 0 !important;\n    min-width: 0 !important;\n    flex: 0 0 0 !important;\n  }\n`;\n"]}