@nuraly/lumenui 0.1.0

package/dist/src/components/layout/content.component.js

@@ -0,0 +1,47 @@
+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 } from 'lit/decorators.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { contentStyles } from './content.style.js';
+/**
+ * # Content Component
+ *
+ * The content layout component with default styling.
+ * Must be placed inside a Layout component.
+ *
+ * @element nr-content
+ *
+ * @slot - Default slot for main content
+ *
+ * @csspart content - The content container element
+ *
+ * @example
+ * ```html
+ * <nr-layout>
+ *   <nr-content>
+ *     <h1>Main Content</h1>
+ *     <p>Your content goes here...</p>
+ *   </nr-content>
+ * </nr-layout>
+ * ```
+ */
+let NrContentElement = class NrContentElement extends NuralyUIBaseMixin(LitElement) {
+    render() {
+        return html `
+      <main class="nr-content" part="content">
+        <slot></slot>
+      </main>
+    `;
+    }
+};
+NrContentElement.styles = contentStyles;
+NrContentElement = __decorate([
+    customElement('nr-content')
+], NrContentElement);
+export { NrContentElement };
+//# sourceMappingURL=content.component.js.map

package/dist/src/components/layout/content.style.d.ts

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

package/dist/src/components/layout/content.style.js

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+export const contentStyles = css `
+  :host {
+    display: block;
+    flex: auto;
+    min-height: 0;
+  }
+
+  .nr-content {
+    flex: auto;
+    min-height: 0;
+    background: var(--nuraly-layout-content-background);
+    color: var(--nuraly-layout-content-text);
+    transition: var(--nuraly-layout-transition);
+  }
+`;
+//# sourceMappingURL=content.style.js.map

package/dist/src/components/layout/footer.component.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+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
+ *
+ * The bottom layout component with default styling.
+ * Must be placed inside a Layout component.
+ *
+ * @element nr-footer
+ *
+ * @slot - Default slot for footer content
+ *
+ * @csspart footer - The footer container element
+ *
+ * @example
+ * ```html
+ * <nr-layout>
+ *   <nr-footer>
+ *     Copyright © 2025 My Company
+ *   </nr-footer>
+ * </nr-layout>
+ * ```
+ */
+export declare class NrFooterElement extends NrFooterElement_base {
+    static styles: import("lit").CSSResult;
+    /**
+     * Padding of the footer. Default is "24px 50px".
+     */
+    padding: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-footer': NrFooterElement;
+    }
+}
+export {};
+//# sourceMappingURL=footer.component.d.ts.map

package/dist/src/components/layout/footer.component.js

@@ -0,0 +1,60 @@
+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 '@nuralyui/common/mixins';
+import { footerStyles } from './footer.style.js';
+/**
+ * # Footer Component
+ *
+ * The bottom layout component with default styling.
+ * Must be placed inside a Layout component.
+ *
+ * @element nr-footer
+ *
+ * @slot - Default slot for footer content
+ *
+ * @csspart footer - The footer container element
+ *
+ * @example
+ * ```html
+ * <nr-layout>
+ *   <nr-footer>
+ *     Copyright © 2025 My Company
+ *   </nr-footer>
+ * </nr-layout>
+ * ```
+ */
+let NrFooterElement = class NrFooterElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Padding of the footer. Default is "24px 50px".
+         */
+        this.padding = '24px 50px';
+    }
+    render() {
+        return html `
+      <footer 
+        class="nr-footer" 
+        part="footer"
+        style="padding: ${this.padding}"
+      >
+        <slot></slot>
+      </footer>
+    `;
+    }
+};
+NrFooterElement.styles = footerStyles;
+__decorate([
+    property({ type: String })
+], NrFooterElement.prototype, "padding", void 0);
+NrFooterElement = __decorate([
+    customElement('nr-footer')
+], NrFooterElement);
+export { NrFooterElement };
+//# sourceMappingURL=footer.component.js.map

package/dist/src/components/layout/footer.style.d.ts

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

package/dist/src/components/layout/footer.style.js

@@ -0,0 +1,17 @@
+import { css } from 'lit';
+export const footerStyles = css `
+  :host {
+    display: block;
+  }
+
+  .nr-footer {
+    padding: var(--nuraly-layout-footer-padding);
+    background: var(--nuraly-layout-footer-background);
+    color: var(--nuraly-layout-footer-text);
+    border-top: 1px solid var(--nuraly-layout-footer-border);
+    font-size: var(--nuraly-layout-font-size);
+    line-height: var(--nuraly-layout-line-height);
+    transition: var(--nuraly-layout-transition);
+  }
+`;
+//# sourceMappingURL=footer.style.js.map

package/dist/src/components/layout/header.component.d.ts

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+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
+ *
+ * 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>
+ * ```
+ */
+export declare class NrHeaderElement extends NrHeaderElement_base {
+    static styles: import("lit").CSSResult;
+    /**
+     * Height of the header. Default is 64px.
+     */
+    height: string;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-header': NrHeaderElement;
+    }
+}
+export {};
+//# sourceMappingURL=header.component.d.ts.map

package/dist/src/components/layout/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 '@nuralyui/common/mixins';
+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/dist/src/components/layout/header.style.d.ts

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

package/dist/src/components/layout/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/dist/src/components/layout/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/dist/src/components/layout/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/dist/src/components/layout/layout.component.d.ts

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+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
+ *
+ * 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-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-layout': NrLayoutElement;
+    }
+}
+export {};
+//# sourceMappingURL=layout.component.d.ts.map

package/dist/src/components/layout/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 '@nuralyui/common/mixins';
+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/dist/src/components/layout/layout.style.d.ts

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

package/dist/src/components/layout/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/dist/src/components/layout/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 type SiderTrigger = 'default' | null;
+/**
+ * Callback for breakpoint changes
+ */
+export type OnBreakpoint = (broken: boolean) => void;
+/**
+ * Callback for collapse state changes
+ */
+export 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/dist/src/components/layout/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/dist/src/components/layout/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/dist/src/components/layout/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