@nuralyui/layout 0.0.1

package/header.component.js

@@ -0,0 +1,61 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { headerStyles } from './header.style.js';
+/**
+ * # Header Component
+ *
+ * The top layout component with default styling.
+ * Must be placed inside a Layout component.
+ *
+ * @element nr-header
+ *
+ * @slot - Default slot for header content
+ *
+ * @csspart header - The header container element
+ *
+ * @example
+ * ```html
+ * <nr-layout>
+ *   <nr-header>
+ *     <div class="logo">My App</div>
+ *     <nav>Navigation</nav>
+ *   </nr-header>
+ * </nr-layout>
+ * ```
+ */
+let NrHeaderElement = class NrHeaderElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Height of the header. Default is 64px.
+         */
+        this.height = '64px';
+    }
+    render() {
+        return html `
+      <header 
+        class="nr-header" 
+        part="header"
+        style="height: ${this.height}"
+      >
+        <slot></slot>
+      </header>
+    `;
+    }
+};
+NrHeaderElement.styles = headerStyles;
+__decorate([
+    property({ type: String })
+], NrHeaderElement.prototype, "height", void 0);
+NrHeaderElement = __decorate([
+    customElement('nr-header')
+], NrHeaderElement);
+export { NrHeaderElement };
+//# sourceMappingURL=header.component.js.map

package/header.style.d.ts

@@ -0,0 +1,2 @@
+export declare const headerStyles: import("lit").CSSResult;
+//# sourceMappingURL=header.style.d.ts.map

package/header.style.js

@@ -0,0 +1,19 @@
+import { css } from 'lit';
+export const headerStyles = css `
+  :host {
+    display: block;
+  }
+
+  .nr-header {
+    display: flex;
+    align-items: center;
+    padding: var(--nuraly-layout-header-padding);
+    height: var(--nuraly-layout-header-height);
+    line-height: var(--nuraly-layout-header-height);
+    background: var(--nuraly-layout-header-background);
+    color: var(--nuraly-layout-header-text);
+    border-bottom: 1px solid var(--nuraly-layout-header-border);
+    transition: var(--nuraly-layout-transition);
+  }
+`;
+//# sourceMappingURL=header.style.js.map

package/index.d.ts

@@ -0,0 +1,8 @@
+export { NrLayoutElement } from './layout.component.js';
+export { NrHeaderElement } from './header.component.js';
+export { NrFooterElement } from './footer.component.js';
+export { NrSiderElement } from './sider.component.js';
+export { NrContentElement } from './content.component.js';
+export type { LayoutBreakpoint, SiderTheme, SiderTrigger, OnBreakpoint, OnCollapse, LayoutProps, SiderProps, HeaderProps, FooterProps, ContentProps, } from './layout.types.js';
+export { BREAKPOINT_VALUES } from './layout.types.js';
+//# sourceMappingURL=index.d.ts.map

package/index.js

@@ -0,0 +1,7 @@
+export { NrLayoutElement } from './layout.component.js';
+export { NrHeaderElement } from './header.component.js';
+export { NrFooterElement } from './footer.component.js';
+export { NrSiderElement } from './sider.component.js';
+export { NrContentElement } from './content.component.js';
+export { BREAKPOINT_VALUES } from './layout.types.js';
+//# sourceMappingURL=index.js.map

package/layout.component.d.ts

@@ -0,0 +1,50 @@
+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;
+/**
+ * # Layout Component
+ *
+ * The layout wrapper component that provides the base structure for a page layout.
+ * Can contain Header, Sider, Content, Footer, or nested Layout components.
+ *
+ * @element nr-layout
+ *
+ * @slot - Default slot for layout children (Header, Sider, Content, Footer, or nested Layout)
+ *
+ * @csspart layout - The layout container element
+ *
+ * @example
+ * ```html
+ * <nr-layout>
+ *   <nr-header>Header</nr-header>
+ *   <nr-content>Content</nr-content>
+ *   <nr-footer>Footer</nr-footer>
+ * </nr-layout>
+ * ```
+ */
+export declare class NrLayoutElement extends NrLayoutElement_base {
+    static styles: import("lit").CSSResult;
+    /**
+     * Whether the layout contains a Sider component.
+     * When true, the layout uses horizontal flex direction.
+     * Automatically detected from slotted content.
+     */
+    hasSider: boolean;
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    /**
+     * Detects if the layout has a Sider component as a direct child
+     */
+    private detectSider;
+    /**
+     * Handles slot changes to re-detect sider elements
+     */
+    private handleSlotChange;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-layout': NrLayoutElement;
+    }
+}
+export {};
+//# sourceMappingURL=layout.component.d.ts.map

package/layout.component.js

@@ -0,0 +1,89 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from 'lit';
+import { customElement, property, queryAssignedElements } from 'lit/decorators.js';
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { layoutStyles } from './layout.style.js';
+/**
+ * # Layout Component
+ *
+ * The layout wrapper component that provides the base structure for a page layout.
+ * Can contain Header, Sider, Content, Footer, or nested Layout components.
+ *
+ * @element nr-layout
+ *
+ * @slot - Default slot for layout children (Header, Sider, Content, Footer, or nested Layout)
+ *
+ * @csspart layout - The layout container element
+ *
+ * @example
+ * ```html
+ * <nr-layout>
+ *   <nr-header>Header</nr-header>
+ *   <nr-content>Content</nr-content>
+ *   <nr-footer>Footer</nr-footer>
+ * </nr-layout>
+ * ```
+ */
+let NrLayoutElement = class NrLayoutElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the layout contains a Sider component.
+         * When true, the layout uses horizontal flex direction.
+         * Automatically detected from slotted content.
+         */
+        this.hasSider = false;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.detectSider();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.detectSider();
+    }
+    /**
+     * Detects if the layout has a Sider component as a direct child
+     */
+    detectSider() {
+        var _a;
+        const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        if (slot) {
+            const assignedElements = slot.assignedElements();
+            const hasSiderElement = assignedElements.some((el) => el.tagName.toLowerCase() === 'nr-sider');
+            if (this.hasSider !== hasSiderElement) {
+                this.hasSider = hasSiderElement;
+            }
+        }
+    }
+    /**
+     * Handles slot changes to re-detect sider elements
+     */
+    handleSlotChange() {
+        this.detectSider();
+    }
+    render() {
+        return html `
+      <div class="nr-layout" part="layout">
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+};
+NrLayoutElement.styles = layoutStyles;
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'has-sider' })
+], NrLayoutElement.prototype, "hasSider", void 0);
+__decorate([
+    queryAssignedElements({ selector: 'nr-sider' })
+], NrLayoutElement.prototype, "connectedCallback", null);
+NrLayoutElement = __decorate([
+    customElement('nr-layout')
+], NrLayoutElement);
+export { NrLayoutElement };
+//# sourceMappingURL=layout.component.js.map

package/layout.style.d.ts

@@ -0,0 +1,2 @@
+export declare const layoutStyles: import("lit").CSSResult;
+//# sourceMappingURL=layout.style.d.ts.map

package/layout.style.js

@@ -0,0 +1,23 @@
+import { css } from 'lit';
+export const layoutStyles = css `
+  :host {
+    display: flex;
+    flex: auto;
+    flex-direction: column;
+    min-height: 0;
+    background: var(--nuraly-layout-background);
+  }
+
+  :host([has-sider]) {
+    flex-direction: row;
+  }
+
+  .nr-layout {
+    display: flex;
+    flex: auto;
+    flex-direction: inherit;
+    min-height: 0;
+    width: 100%;
+  }
+`;
+//# sourceMappingURL=layout.style.js.map

package/layout.types.d.ts

@@ -0,0 +1,75 @@
+/**
+ * Breakpoints for responsive layout
+ */
+export declare const enum LayoutBreakpoint {
+    XS = "xs",
+    SM = "sm",
+    MD = "md",
+    LG = "lg",
+    XL = "xl",
+    XXL = "xxl"
+}
+/**
+ * Breakpoint width values in pixels
+ */
+export declare const BREAKPOINT_VALUES: Record<LayoutBreakpoint, number>;
+/**
+ * Sider theme options
+ */
+export declare const enum SiderTheme {
+    Light = "light",
+    Dark = "dark"
+}
+/**
+ * Sider collapse trigger type
+ */
+export declare type SiderTrigger = 'default' | null;
+/**
+ * Callback for breakpoint changes
+ */
+export declare type OnBreakpoint = (broken: boolean) => void;
+/**
+ * Callback for collapse state changes
+ */
+export declare type OnCollapse = (collapsed: boolean, type: 'clickTrigger' | 'responsive') => void;
+/**
+ * Layout component properties
+ */
+export interface LayoutProps {
+    hasSider?: boolean;
+}
+/**
+ * Sider component properties
+ */
+export interface SiderProps {
+    breakpoint?: LayoutBreakpoint;
+    collapsed?: boolean;
+    collapsedWidth?: number;
+    collapsible?: boolean;
+    defaultCollapsed?: boolean;
+    reverseArrow?: boolean;
+    theme?: SiderTheme;
+    trigger?: SiderTrigger;
+    width?: number | string;
+    zeroWidthTriggerStyle?: string;
+    onBreakpoint?: OnBreakpoint;
+    onCollapse?: OnCollapse;
+}
+/**
+ * Header component properties
+ */
+export interface HeaderProps {
+    height?: number | string;
+}
+/**
+ * Footer component properties
+ */
+export interface FooterProps {
+    padding?: string;
+}
+/**
+ * Content component properties
+ */
+export interface ContentProps {
+}
+//# sourceMappingURL=layout.types.d.ts.map

package/layout.types.js

@@ -0,0 +1,12 @@
+/**
+ * Breakpoint width values in pixels
+ */
+export const BREAKPOINT_VALUES = {
+    ["xs" /* LayoutBreakpoint.XS */]: 480,
+    ["sm" /* LayoutBreakpoint.SM */]: 576,
+    ["md" /* LayoutBreakpoint.MD */]: 768,
+    ["lg" /* LayoutBreakpoint.LG */]: 992,
+    ["xl" /* LayoutBreakpoint.XL */]: 1200,
+    ["xxl" /* LayoutBreakpoint.XXL */]: 1600,
+};
+//# sourceMappingURL=layout.types.js.map

package/package.json

@@ -0,0 +1,38 @@
+{
+    "name": "@nuralyui/layout",
+    "version": "0.0.1",
+    "description": "Layout components for NuralyUI - includes Layout, Header, Footer, Sider, and Content",
+    "type": "module",
+    "main": "index.js",
+    "module": "index.js",
+    "types": "index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./index.js",
+            "types": "./index.d.ts"
+        }
+    },
+    "files": [
+        "*.js",
+        "*.d.ts",
+        "*.ts",
+        "!*.stories.ts",
+        "!*.test.ts"
+    ],
+    "keywords": [
+        "layout",
+        "header",
+        "footer",
+        "sider",
+        "sidebar",
+        "content",
+        "web-components",
+        "lit",
+        "nuralyui"
+    ],
+    "author": "NuralyUI Team",
+    "license": "MIT",
+    "peerDependencies": {
+        "lit": "^3.0.0"
+    }
+}

package/react.d.ts

@@ -0,0 +1,14 @@
+import { NrLayoutElement } from './layout.component.js';
+import { NrHeaderElement } from './header.component.js';
+import { NrFooterElement } from './footer.component.js';
+import { NrSiderElement } from './sider.component.js';
+import { NrContentElement } from './content.component.js';
+export declare const NrLayout: import("@lit-labs/react").ReactWebComponent<NrLayoutElement, {}>;
+export declare const NrHeader: import("@lit-labs/react").ReactWebComponent<NrHeaderElement, {}>;
+export declare const NrFooter: import("@lit-labs/react").ReactWebComponent<NrFooterElement, {}>;
+export declare const NrSider: import("@lit-labs/react").ReactWebComponent<NrSiderElement, {
+    onCollapse: string;
+    onBreakpoint: string;
+}>;
+export declare const NrContent: import("@lit-labs/react").ReactWebComponent<NrContentElement, {}>;
+//# sourceMappingURL=react.d.ts.map

package/react.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { createComponent } from '@lit-labs/react';
+import { NrLayoutElement } from './layout.component.js';
+import { NrHeaderElement } from './header.component.js';
+import { NrFooterElement } from './footer.component.js';
+import { NrSiderElement } from './sider.component.js';
+import { NrContentElement } from './content.component.js';
+export const NrLayout = createComponent({
+    tagName: 'nr-layout',
+    elementClass: NrLayoutElement,
+    react: React,
+});
+export const NrHeader = createComponent({
+    tagName: 'nr-header',
+    elementClass: NrHeaderElement,
+    react: React,
+});
+export const NrFooter = createComponent({
+    tagName: 'nr-footer',
+    elementClass: NrFooterElement,
+    react: React,
+});
+export const NrSider = createComponent({
+    tagName: 'nr-sider',
+    elementClass: NrSiderElement,
+    react: React,
+    events: {
+        onCollapse: 'collapse',
+        onBreakpoint: 'breakpoint',
+    },
+});
+export const NrContent = createComponent({
+    tagName: 'nr-content',
+    elementClass: NrContentElement,
+    react: React,
+});
+//# sourceMappingURL=react.js.map

package/sider.component.d.ts

@@ -0,0 +1,116 @@
+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;
+/**
+ * # Sider Component
+ *
+ * The sidebar component with collapsible functionality, theme support, and responsive behavior.
+ * Must be placed inside a Layout component.
+ *
+ * @element nr-sider
+ *
+ * @slot - Default slot for sider content (usually navigation menu)
+ * @slot trigger - Custom trigger slot (overrides default trigger)
+ *
+ * @fires collapse - Fired when the sider is collapsed or expanded
+ * @fires breakpoint - Fired when the breakpoint is triggered
+ *
+ * @csspart sider - The sider container element
+ * @csspart trigger - The collapse trigger element
+ *
+ * @example
+ * ```html
+ * <nr-layout has-sider>
+ *   <nr-sider collapsible breakpoint="lg">
+ *     <nav>Navigation Menu</nav>
+ *   </nr-sider>
+ *   <nr-content>Content</nr-content>
+ * </nr-layout>
+ * ```
+ */
+export declare class NrSiderElement extends NrSiderElement_base {
+    static styles: import("lit").CSSResult;
+    /**
+     * Breakpoint for responsive collapsing
+     */
+    breakpoint?: LayoutBreakpoint;
+    /**
+     * Current collapsed state (controlled)
+     */
+    collapsed: boolean;
+    /**
+     * Width when collapsed. Set to 0 for a special trigger.
+     */
+    collapsedWidth: number;
+    /**
+     * Whether the sider can be collapsed
+     */
+    collapsible: boolean;
+    /**
+     * Initial collapsed state (uncontrolled)
+     */
+    defaultCollapsed: boolean;
+    /**
+     * Reverse the arrow direction (for right-side sider)
+     */
+    reverseArrow: boolean;
+    /**
+     * Sider theme (light or dark)
+     */
+    theme: SiderTheme;
+    /**
+     * Custom trigger element. Set to null to hide trigger.
+     */
+    trigger: 'default' | null;
+    /**
+     * Sider width when expanded
+     */
+    width: number | string;
+    /**
+     * Custom styles for zero-width trigger
+     */
+    zeroWidthTriggerStyle: string;
+    /**
+     * Internal state for tracking if breakpoint is active
+     */
+    private belowBreakpoint;
+    /**
+     * ResizeObserver for responsive behavior
+     */
+    private resizeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    /**
+     * Setup ResizeObserver for responsive breakpoint behavior
+     */
+    private setupResizeObserver;
+    /**
+     * Toggle collapsed state
+     */
+    private toggleCollapse;
+    /**
+     * Dispatch collapse event
+     */
+    private dispatchCollapseEvent;
+    /**
+     * Dispatch breakpoint event
+     */
+    private dispatchBreakpointEvent;
+    /**
+     * Get the current width based on collapsed state
+     */
+    private getCurrentWidth;
+    /**
+     * Render the collapse trigger
+     */
+    private renderTrigger;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-sider': NrSiderElement;
+    }
+}
+export {};
+//# sourceMappingURL=sider.component.d.ts.map