@nuralyui/layout 0.0.1 → 0.1.0

package/dist/grid/package.json

@@ -0,0 +1,52 @@
+{
+    "name": "@nuralyui/grid",
+    "version": "0.0.1",
+    "description": "Grid layout system (Row and Col) components for NuralyUI library",
+    "main": "index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
+    },
+    "files": [
+        "*.js",
+        "*.d.ts",
+        "*.js.map",
+        "grid.bundled.js",
+        "bundle.js"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/Nuralyio/NuralyUI.git",
+        "directory": "src/components/grid"
+    },
+    "keywords": [
+        "grid",
+        "row",
+        "col",
+        "column",
+        "layout",
+        "responsive",
+        "flexbox",
+        "web-components",
+        "lit-element",
+        "nuralyui",
+        "ui-components"
+    ],
+    "author": "Nuraly, Laabidi Aymen",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/Nuralyio/NuralyUI/issues"
+    },
+    "homepage": "https://github.com/Nuralyio/NuralyUI#readme",
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/dist/grid/react.d.ts

@@ -0,0 +1,5 @@
+import { NrRowElement } from './row.component.js';
+import { NrColElement } from './col.component.js';
+export declare const NrRow: import("@lit-labs/react").ReactWebComponent<NrRowElement, {}>;
+export declare const NrCol: import("@lit-labs/react").ReactWebComponent<NrColElement, {}>;
+//# sourceMappingURL=react.d.ts.map

package/dist/grid/react.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../../src/components/grid/react.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,eAAO,MAAM,KAAK,+DAKhB,CAAC;AACH,eAAO,MAAM,KAAK,+DAKhB,CAAC"}

package/dist/grid/react.js

@@ -0,0 +1,17 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrRowElement } from './row.component.js';
+import { NrColElement } from './col.component.js';
+export const NrRow = createComponent({
+    tagName: 'nr-row',
+    elementClass: NrRowElement,
+    react: React,
+    events: {},
+});
+export const NrCol = createComponent({
+    tagName: 'nr-col',
+    elementClass: NrColElement,
+    react: React,
+    events: {},
+});
+//# sourceMappingURL=react.js.map

package/dist/grid/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../src/components/grid/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,MAAM,CAAC,MAAM,KAAK,GAAG,eAAe,CAAC;IACnC,OAAO,EAAE,QAAQ;IACjB,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAC;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,eAAe,CAAC;IACnC,OAAO,EAAE,QAAQ;IACjB,YAAY,EAAE,YAAY;IAC1B,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrRowElement } from './row.component.js';\nimport { NrColElement } from './col.component.js';\nexport const NrRow = createComponent({\n  tagName: 'nr-row',\n  elementClass: NrRowElement,\n  react: React,\n  events: {},\n});\nexport const NrCol = createComponent({\n  tagName: 'nr-col',\n  elementClass: NrColElement,\n  react: React,\n  events: {},\n});\n"]}

package/dist/grid/row.component.d.ts

@@ -0,0 +1,83 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { RowAlign, RowJustify, Gutter } from './grid.types.js';
+declare const NrRowElement_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;
+/**
+ * Row component for grid layout system
+ *
+ * @example
+ * ```html
+ * <!-- Basic row -->
+ * <nr-row>
+ *   <nr-col span="12">Column 1</nr-col>
+ *   <nr-col span="12">Column 2</nr-col>
+ * </nr-row>
+ *
+ * <!-- Row with gutter -->
+ * <nr-row gutter="16">
+ *   <nr-col span="8">Column 1</nr-col>
+ *   <nr-col span="8">Column 2</nr-col>
+ *   <nr-col span="8">Column 3</nr-col>
+ * </nr-row>
+ *
+ * <!-- Responsive gutter -->
+ * <nr-row .gutter=${{ xs: 8, sm: 16, md: 24, lg: 32 }}>
+ *   <nr-col span="6">Column</nr-col>
+ * </nr-row>
+ *
+ * <!-- Alignment and justify -->
+ * <nr-row align="middle" justify="center">
+ *   <nr-col span="6">Centered</nr-col>
+ * </nr-row>
+ * ```
+ *
+ * @slot default - Column elements
+ */
+export declare class NrRowElement extends NrRowElement_base {
+    static styles: import("lit").CSSResult;
+    /** Vertical alignment of columns */
+    align: RowAlign | '';
+    /** Horizontal alignment of columns */
+    justify: RowJustify | '';
+    /** Grid spacing - number, [horizontal, vertical], or responsive object */
+    gutter: Gutter;
+    /** Allow columns to wrap */
+    wrap: boolean;
+    /** Current breakpoint for responsive gutter */
+    private currentBreakpoint;
+    private resizeObserver?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /**
+     * Setup responsive gutter based on viewport width
+     */
+    private setupResponsiveGutter;
+    /**
+     * Update current breakpoint based on window width
+     */
+    private updateBreakpoint;
+    /**
+     * Get the current gutter values [horizontal, vertical]
+     */
+    private getGutterValues;
+    /**
+     * Get inline styles for row with gutter
+     */
+    private getRowStyle;
+    /**
+     * Get gutter context for child columns
+     */
+    private getGutterContext;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-row': NrRowElement;
+    }
+}
+export {};
+//# sourceMappingURL=row.component.d.ts.map

package/dist/grid/row.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.component.d.ts","sourceRoot":"","sources":["../../../src/components/grid/row.component.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAA6C,MAAM,iBAAiB,CAAC;;AAE1G;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,qBACa,YAAa,SAAQ,iBAA6B;IAC7D,OAAgB,MAAM,0BAAU;IAEhC,oCAAoC;IAEpC,KAAK,EAAE,QAAQ,GAAG,EAAE,CAAgB;IAEpC,sCAAsC;IAEtC,OAAO,EAAE,UAAU,GAAG,EAAE,CAAgB;IAExC,0EAA0E;IAE1E,MAAM,EAAE,MAAM,CAAK;IAEnB,4BAA4B;IAE5B,IAAI,UAAQ;IAEZ,+CAA+C;IAE/C,OAAO,CAAC,iBAAiB,CAAqC;IAE9D,OAAO,CAAC,cAAc,CAAC,CAAiB;IAE/B,iBAAiB;IAKjB,oBAAoB;IAK7B;;OAEG;IACH,OAAO,CAAC,qBAAqB;IAY7B;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAkBxB;;OAEG;IACH,OAAO,CAAC,eAAe;IAgCvB;;OAEG;IACH,OAAO,CAAC,WAAW;IAiBnB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAKf,MAAM;CAkBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,YAAY,CAAC;KACxB;CACF"}

package/dist/grid/row.component.js

@@ -0,0 +1,197 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+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 { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { styles } from './row.style.js';
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import { EMPTY_STRING, BREAKPOINTS } from './grid.types.js';
+/**
+ * Row component for grid layout system
+ *
+ * @example
+ * ```html
+ * <!-- Basic row -->
+ * <nr-row>
+ *   <nr-col span="12">Column 1</nr-col>
+ *   <nr-col span="12">Column 2</nr-col>
+ * </nr-row>
+ *
+ * <!-- Row with gutter -->
+ * <nr-row gutter="16">
+ *   <nr-col span="8">Column 1</nr-col>
+ *   <nr-col span="8">Column 2</nr-col>
+ *   <nr-col span="8">Column 3</nr-col>
+ * </nr-row>
+ *
+ * <!-- Responsive gutter -->
+ * <nr-row .gutter=${{ xs: 8, sm: 16, md: 24, lg: 32 }}>
+ *   <nr-col span="6">Column</nr-col>
+ * </nr-row>
+ *
+ * <!-- Alignment and justify -->
+ * <nr-row align="middle" justify="center">
+ *   <nr-col span="6">Centered</nr-col>
+ * </nr-row>
+ * ```
+ *
+ * @slot default - Column elements
+ */
+let NrRowElement = class NrRowElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** Vertical alignment of columns */
+        this.align = EMPTY_STRING;
+        /** Horizontal alignment of columns */
+        this.justify = EMPTY_STRING;
+        /** Grid spacing - number, [horizontal, vertical], or responsive object */
+        this.gutter = 0;
+        /** Allow columns to wrap */
+        this.wrap = true;
+        /** Current breakpoint for responsive gutter */
+        this.currentBreakpoint = "xs" /* GridBreakpoint.XS */;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupResponsiveGutter();
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    /**
+     * Setup responsive gutter based on viewport width
+     */
+    setupResponsiveGutter() {
+        if (typeof this.gutter === 'object' && !Array.isArray(this.gutter)) {
+            this.updateBreakpoint();
+            this.resizeObserver = new ResizeObserver(() => {
+                this.updateBreakpoint();
+            });
+            this.resizeObserver.observe(document.documentElement);
+        }
+    }
+    /**
+     * Update current breakpoint based on window width
+     */
+    updateBreakpoint() {
+        const width = window.innerWidth;
+        if (width >= BREAKPOINTS.xxl) {
+            this.currentBreakpoint = "xxl" /* GridBreakpoint.XXL */;
+        }
+        else if (width >= BREAKPOINTS.xl) {
+            this.currentBreakpoint = "xl" /* GridBreakpoint.XL */;
+        }
+        else if (width >= BREAKPOINTS.lg) {
+            this.currentBreakpoint = "lg" /* GridBreakpoint.LG */;
+        }
+        else if (width >= BREAKPOINTS.md) {
+            this.currentBreakpoint = "md" /* GridBreakpoint.MD */;
+        }
+        else if (width >= BREAKPOINTS.sm) {
+            this.currentBreakpoint = "sm" /* GridBreakpoint.SM */;
+        }
+        else {
+            this.currentBreakpoint = "xs" /* GridBreakpoint.XS */;
+        }
+    }
+    /**
+     * Get the current gutter values [horizontal, vertical]
+     */
+    getGutterValues() {
+        if (typeof this.gutter === 'number') {
+            return [this.gutter, this.gutter];
+        }
+        if (Array.isArray(this.gutter)) {
+            return this.gutter;
+        }
+        // Responsive gutter object
+        const breakpoints = [
+            this.currentBreakpoint,
+            "xl" /* GridBreakpoint.XL */,
+            "lg" /* GridBreakpoint.LG */,
+            "md" /* GridBreakpoint.MD */,
+            "sm" /* GridBreakpoint.SM */,
+            "xs" /* GridBreakpoint.XS */
+        ];
+        for (const bp of breakpoints) {
+            const value = this.gutter[bp];
+            if (value !== undefined) {
+                if (typeof value === 'number') {
+                    return [value, value];
+                }
+                return value;
+            }
+        }
+        return [0, 0];
+    }
+    /**
+     * Get inline styles for row with gutter
+     */
+    getRowStyle() {
+        const [horizontal, vertical] = this.getGutterValues();
+        const styles = {};
+        if (horizontal > 0) {
+            styles['margin-left'] = `-${horizontal / 2}px`;
+            styles['margin-right'] = `-${horizontal / 2}px`;
+        }
+        if (vertical > 0) {
+            styles['row-gap'] = `${vertical}px`;
+        }
+        return styles;
+    }
+    /**
+     * Get gutter context for child columns
+     */
+    getGutterContext() {
+        const [horizontal] = this.getGutterValues();
+        return horizontal;
+    }
+    render() {
+        const rowStyle = this.getRowStyle();
+        const gutter = this.getGutterContext();
+        return html `
+      <div
+        class="nr-row"
+        data-align="${this.align}"
+        data-justify="${this.justify}"
+        data-wrap="${this.wrap}"
+        data-theme="${this.currentTheme}"
+        style="${Object.entries(rowStyle).map(([key, value]) => `${key}: ${value}`).join('; ')}"
+        data-gutter="${gutter}"
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+NrRowElement.styles = styles;
+__decorate([
+    property({ type: String })
+], NrRowElement.prototype, "align", void 0);
+__decorate([
+    property({ type: String })
+], NrRowElement.prototype, "justify", void 0);
+__decorate([
+    property({ type: Object })
+], NrRowElement.prototype, "gutter", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrRowElement.prototype, "wrap", void 0);
+__decorate([
+    state()
+], NrRowElement.prototype, "currentBreakpoint", void 0);
+NrRowElement = __decorate([
+    customElement('nr-row')
+], NrRowElement);
+export { NrRowElement };
+//# sourceMappingURL=row.component.js.map

package/dist/grid/row.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.component.js","sourceRoot":"","sources":["../../../src/components/grid/row.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { styles } from './row.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport { RowAlign, RowJustify, Gutter, EMPTY_STRING, GridBreakpoint, BREAKPOINTS } from './grid.types.js';\n\n/**\n * Row component for grid layout system\n * \n * @example\n * ```html\n * <!-- Basic row -->\n * <nr-row>\n *   <nr-col span=\"12\">Column 1</nr-col>\n *   <nr-col span=\"12\">Column 2</nr-col>\n * </nr-row>\n * \n * <!-- Row with gutter -->\n * <nr-row gutter=\"16\">\n *   <nr-col span=\"8\">Column 1</nr-col>\n *   <nr-col span=\"8\">Column 2</nr-col>\n *   <nr-col span=\"8\">Column 3</nr-col>\n * </nr-row>\n * \n * <!-- Responsive gutter -->\n * <nr-row .gutter=${{ xs: 8, sm: 16, md: 24, lg: 32 }}>\n *   <nr-col span=\"6\">Column</nr-col>\n * </nr-row>\n * \n * <!-- Alignment and justify -->\n * <nr-row align=\"middle\" justify=\"center\">\n *   <nr-col span=\"6\">Centered</nr-col>\n * </nr-row>\n * ```\n * \n * @slot default - Column elements\n */\n@customElement('nr-row')\nexport class NrRowElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  /** Vertical alignment of columns */\n  @property({ type: String })\n  align: RowAlign | '' = EMPTY_STRING;\n\n  /** Horizontal alignment of columns */\n  @property({ type: String })\n  justify: RowJustify | '' = EMPTY_STRING;\n\n  /** Grid spacing - number, [horizontal, vertical], or responsive object */\n  @property({ type: Object })\n  gutter: Gutter = 0;\n\n  /** Allow columns to wrap */\n  @property({ type: Boolean })\n  wrap = true;\n\n  /** Current breakpoint for responsive gutter */\n  @state()\n  private currentBreakpoint: GridBreakpoint = GridBreakpoint.XS;\n\n  private resizeObserver?: ResizeObserver;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.setupResponsiveGutter();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.resizeObserver?.disconnect();\n  }\n\n  /**\n   * Setup responsive gutter based on viewport width\n   */\n  private setupResponsiveGutter() {\n    if (typeof this.gutter === 'object' && !Array.isArray(this.gutter)) {\n      this.updateBreakpoint();\n      \n      this.resizeObserver = new ResizeObserver(() => {\n        this.updateBreakpoint();\n      });\n      \n      this.resizeObserver.observe(document.documentElement);\n    }\n  }\n\n  /**\n   * Update current breakpoint based on window width\n   */\n  private updateBreakpoint() {\n    const width = window.innerWidth;\n    \n    if (width >= BREAKPOINTS.xxl) {\n      this.currentBreakpoint = GridBreakpoint.XXL;\n    } else if (width >= BREAKPOINTS.xl) {\n      this.currentBreakpoint = GridBreakpoint.XL;\n    } else if (width >= BREAKPOINTS.lg) {\n      this.currentBreakpoint = GridBreakpoint.LG;\n    } else if (width >= BREAKPOINTS.md) {\n      this.currentBreakpoint = GridBreakpoint.MD;\n    } else if (width >= BREAKPOINTS.sm) {\n      this.currentBreakpoint = GridBreakpoint.SM;\n    } else {\n      this.currentBreakpoint = GridBreakpoint.XS;\n    }\n  }\n\n  /**\n   * Get the current gutter values [horizontal, vertical]\n   */\n  private getGutterValues(): [number, number] {\n    if (typeof this.gutter === 'number') {\n      return [this.gutter, this.gutter];\n    }\n    \n    if (Array.isArray(this.gutter)) {\n      return this.gutter;\n    }\n    \n    // Responsive gutter object\n    const breakpoints: GridBreakpoint[] = [\n      this.currentBreakpoint,\n      GridBreakpoint.XL,\n      GridBreakpoint.LG,\n      GridBreakpoint.MD,\n      GridBreakpoint.SM,\n      GridBreakpoint.XS\n    ];\n    \n    for (const bp of breakpoints) {\n      const value = this.gutter[bp];\n      if (value !== undefined) {\n        if (typeof value === 'number') {\n          return [value, value];\n        }\n        return value;\n      }\n    }\n    \n    return [0, 0];\n  }\n\n  /**\n   * Get inline styles for row with gutter\n   */\n  private getRowStyle() {\n    const [horizontal, vertical] = this.getGutterValues();\n    \n    const styles: Record<string, string> = {};\n    \n    if (horizontal > 0) {\n      styles['margin-left'] = `-${horizontal / 2}px`;\n      styles['margin-right'] = `-${horizontal / 2}px`;\n    }\n    \n    if (vertical > 0) {\n      styles['row-gap'] = `${vertical}px`;\n    }\n    \n    return styles;\n  }\n\n  /**\n   * Get gutter context for child columns\n   */\n  private getGutterContext() {\n    const [horizontal] = this.getGutterValues();\n    return horizontal;\n  }\n\n  override render() {\n    const rowStyle = this.getRowStyle();\n    const gutter = this.getGutterContext();\n\n    return html`\n      <div\n        class=\"nr-row\"\n        data-align=\"${this.align}\"\n        data-justify=\"${this.justify}\"\n        data-wrap=\"${this.wrap}\"\n        data-theme=\"${this.currentTheme}\"\n        style=\"${Object.entries(rowStyle).map(([key, value]) => `${key}: ${value}`).join('; ')}\"\n        data-gutter=\"${gutter}\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-row': NrRowElement;\n  }\n}\n"]}

package/dist/grid/row.style.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Row component styles for the Grid system
+ * Using shared CSS variables from /src/shared/themes/
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=row.style.d.ts.map

package/dist/grid/row.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.style.d.ts","sourceRoot":"","sources":["../../../src/components/grid/row.style.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,eAAO,MAAM,MAAM,yBA6DlB,CAAC"}

package/dist/grid/row.style.js

@@ -0,0 +1,68 @@
+import { css } from 'lit';
+/**
+ * Row component styles for the Grid system
+ * Using shared CSS variables from /src/shared/themes/
+ */
+export const styles = css `
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .nr-row {
+    display: flex;
+    flex-flow: row wrap;
+    min-width: 0;
+    
+    /* Theme-aware */
+    color: var(--nuraly-color-text);
+  }
+
+  /* Wrap control */
+  .nr-row[data-wrap="false"] {
+    flex-wrap: nowrap;
+  }
+
+  /* Horizontal alignment (justify-content) */
+  .nr-row[data-justify="start"] {
+    justify-content: flex-start;
+  }
+
+  .nr-row[data-justify="end"] {
+    justify-content: flex-end;
+  }
+
+  .nr-row[data-justify="center"] {
+    justify-content: center;
+  }
+
+  .nr-row[data-justify="space-around"] {
+    justify-content: space-around;
+  }
+
+  .nr-row[data-justify="space-between"] {
+    justify-content: space-between;
+  }
+
+  .nr-row[data-justify="space-evenly"] {
+    justify-content: space-evenly;
+  }
+
+  /* Vertical alignment (align-items) */
+  .nr-row[data-align="top"] {
+    align-items: flex-start;
+  }
+
+  .nr-row[data-align="middle"] {
+    align-items: center;
+  }
+
+  .nr-row[data-align="bottom"] {
+    align-items: flex-end;
+  }
+
+  .nr-row[data-align="stretch"] {
+    align-items: stretch;
+  }
+`;
+//# sourceMappingURL=row.style.js.map

package/dist/grid/row.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.style.js","sourceRoot":"","sources":["../../../src/components/grid/row.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6DxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Row component styles for the Grid system\n * Using shared CSS variables from /src/shared/themes/\n */\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .nr-row {\n    display: flex;\n    flex-flow: row wrap;\n    min-width: 0;\n    \n    /* Theme-aware */\n    color: var(--nuraly-color-text);\n  }\n\n  /* Wrap control */\n  .nr-row[data-wrap=\"false\"] {\n    flex-wrap: nowrap;\n  }\n\n  /* Horizontal alignment (justify-content) */\n  .nr-row[data-justify=\"start\"] {\n    justify-content: flex-start;\n  }\n\n  .nr-row[data-justify=\"end\"] {\n    justify-content: flex-end;\n  }\n\n  .nr-row[data-justify=\"center\"] {\n    justify-content: center;\n  }\n\n  .nr-row[data-justify=\"space-around\"] {\n    justify-content: space-around;\n  }\n\n  .nr-row[data-justify=\"space-between\"] {\n    justify-content: space-between;\n  }\n\n  .nr-row[data-justify=\"space-evenly\"] {\n    justify-content: space-evenly;\n  }\n\n  /* Vertical alignment (align-items) */\n  .nr-row[data-align=\"top\"] {\n    align-items: flex-start;\n  }\n\n  .nr-row[data-align=\"middle\"] {\n    align-items: center;\n  }\n\n  .nr-row[data-align=\"bottom\"] {\n    align-items: flex-end;\n  }\n\n  .nr-row[data-align=\"stretch\"] {\n    align-items: stretch;\n  }\n`;\n"]}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './layout/index.js';
+export * from './grid/index.js';
+export * from './flex/index.js';
+export * from './card/index.js';

package/dist/index.js

@@ -0,0 +1,4 @@
+export * from './layout/index.js';
+export * from './grid/index.js';
+export * from './flex/index.js';
+export * from './card/index.js';

package/dist/layout/content.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.component.d.ts","sourceRoot":"","sources":["../../../src/components/layout/content.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;AAKvC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,gBAAiB,SAAQ,qBAA6B;IACjE,OAAgB,MAAM,0BAAiB;IAE9B,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}

package/dist/layout/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,4BAA4B,CAAC;AAC/D,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 '../../shared/base-mixin.js';\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/dist/layout/content.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.style.d.ts","sourceRoot":"","sources":["../../../src/components/layout/content.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,yBAczB,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"footer.component.d.ts","sourceRoot":"","sources":["../../../src/components/layout/footer.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;AAKvC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,eAAgB,SAAQ,oBAA6B;IAChE,OAAgB,MAAM,0BAAgB;IAEtC;;OAEG;IAEH,OAAO,SAAe;IAEb,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/dist/layout/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,4BAA4B,CAAC;AAC/D,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 '../../shared/base-mixin.js';\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/dist/layout/footer.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"footer.style.d.ts","sourceRoot":"","sources":["../../../src/components/layout/footer.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAcxB,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"header.component.d.ts","sourceRoot":"","sources":["../../../src/components/layout/header.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;AAKvC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBACa,eAAgB,SAAQ,oBAA6B;IAChE,OAAgB,MAAM,0BAAgB;IAEtC;;OAEG;IAEH,MAAM,SAAU;IAEP,MAAM;CAWhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/dist/layout/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,4BAA4B,CAAC;AAC/D,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 '../../shared/base-mixin.js';\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/dist/layout/header.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.style.d.ts","sourceRoot":"","sources":["../../../src/components/layout/header.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAgBxB,CAAC"}

package/dist/layout/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/dist/layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","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;AAC1D,YAAY,EACV,gBAAgB,EAChB,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,WAAW,EACX,UAAU,EACV,WAAW,EACX,WAAW,EACX,YAAY,GACb,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"layout.component.d.ts","sourceRoot":"","sources":["../../../src/components/layout/layout.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;;AAKvC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,eAAgB,SAAQ,oBAA6B;IAChE,OAAgB,MAAM,0BAAgB;IAEtC;;;;OAIG;IAEH,QAAQ,UAAS;IAIR,iBAAiB,IAAI,IAAI;IAKzB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAK/D;;OAEG;IACH,OAAO,CAAC,WAAW;IAanB;;OAEG;IACH,OAAO,CAAC,gBAAgB;IAIf,MAAM;CAOhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/dist/layout/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,4BAA4B,CAAC;AAC/D,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 '../../shared/base-mixin.js';\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/dist/layout/layout.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.style.d.ts","sourceRoot":"","sources":["../../../src/components/layout/layout.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,yBAoBxB,CAAC"}

package/dist/layout/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/dist/layout/layout.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.types.d.ts","sourceRoot":"","sources":["../../../src/components/layout/layout.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,0BAAkB,gBAAgB;IAChC,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,EAAE,OAAO;IACT,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,gBAAgB,EAAE,MAAM,CAO9D,CAAC;AAEF;;GAEG;AACH,0BAAkB,UAAU;IAC1B,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED;;GAEG;AACH,oBAAY,YAAY,GAAG,SAAS,GAAG,IAAI,CAAC;AAE5C;;GAEG;AACH,oBAAY,YAAY,GAAG,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;AAErD;;GAEG;AACH,oBAAY,UAAU,GAAG,CAAC,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,cAAc,GAAG,YAAY,KAAK,IAAI,CAAC;AAE3F;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;CACzB;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;CAAG"}

package/dist/layout/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/dist/layout/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"
+    }
+}