@nuralyui/container 0.0.1

package/bundle.js

@@ -0,0 +1,161 @@
+import{css as t,LitElement as i,html as n}from"lit";import{property as a,customElement as e}from"lit/decorators.js";import{NuralyUIBaseMixin as r}from"@nuralyui/common/mixins";const s=t`
+  :host {
+    display: block;
+    box-sizing: border-box;
+  }
+
+  .nr-container {
+    display: flex;
+    box-sizing: border-box;
+    min-height: inherit;
+
+    /* Theme-aware */
+    color: var(--nuraly-color-text);
+    background: var(--nuraly-container-background, transparent);
+  }
+
+  /* Direction */
+  .nr-container[data-direction="row"] {
+    flex-direction: row;
+  }
+
+  .nr-container[data-direction="column"] {
+    flex-direction: column;
+  }
+
+  /* Layout: Fluid (full width) - applies to both directions */
+  .nr-container[data-layout="fluid"] {
+    width: 100%;
+    max-width: none;
+  }
+
+  /* Layout: Boxed (centered with max-width) */
+  .nr-container[data-layout="boxed"] {
+    margin-inline: auto;
+  }
+
+  /* Layout: Fixed */
+  .nr-container[data-layout="fixed"] {
+    margin-inline: auto;
+  }
+
+  /* Row direction with non-fluid layout should be fit-content */
+  .nr-container[data-direction="row"][data-layout="boxed"],
+  .nr-container[data-direction="row"][data-layout="fixed"] {
+    width: fit-content;
+  }
+
+  /* Boxed/Fixed sizes */
+  .nr-container[data-size="sm"] {
+    max-width: var(--nuraly-container-sm, 640px);
+  }
+
+  .nr-container[data-size="md"] {
+    max-width: var(--nuraly-container-md, 768px);
+  }
+
+  .nr-container[data-size="lg"] {
+    max-width: var(--nuraly-container-lg, 1024px);
+  }
+
+  .nr-container[data-size="xl"] {
+    max-width: var(--nuraly-container-xl, 1280px);
+  }
+
+  .nr-container[data-size="full"] {
+    max-width: 100%;
+  }
+
+  /* Padding presets */
+  .nr-container[data-padding="none"] {
+    padding: 0;
+  }
+
+  .nr-container[data-padding="sm"] {
+    padding: var(--nuraly-spacing-2, 8px);
+  }
+
+  .nr-container[data-padding="md"] {
+    padding: var(--nuraly-spacing-3, 16px);
+  }
+
+  .nr-container[data-padding="lg"] {
+    padding: var(--nuraly-spacing-4, 24px);
+  }
+
+  /* Wrap */
+  .nr-container[data-wrap="true"] {
+    flex-wrap: wrap;
+  }
+
+  .nr-container[data-wrap="false"] {
+    flex-wrap: nowrap;
+  }
+
+  /* Justify content */
+  .nr-container[data-justify="flex-start"] {
+    justify-content: flex-start;
+  }
+
+  .nr-container[data-justify="flex-end"] {
+    justify-content: flex-end;
+  }
+
+  .nr-container[data-justify="center"] {
+    justify-content: center;
+  }
+
+  .nr-container[data-justify="space-between"] {
+    justify-content: space-between;
+  }
+
+  .nr-container[data-justify="space-around"] {
+    justify-content: space-around;
+  }
+
+  .nr-container[data-justify="space-evenly"] {
+    justify-content: space-evenly;
+  }
+
+  /* Align items */
+  .nr-container[data-align="flex-start"] {
+    align-items: flex-start;
+  }
+
+  .nr-container[data-align="flex-end"] {
+    align-items: flex-end;
+  }
+
+  .nr-container[data-align="center"] {
+    align-items: center;
+  }
+
+  .nr-container[data-align="baseline"] {
+    align-items: baseline;
+  }
+
+  .nr-container[data-align="stretch"] {
+    align-items: stretch;
+  }
+`
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */;var o=function(t,i,n,a){for(var e,r=arguments.length,s=r<3?i:null===a?a=Object.getOwnPropertyDescriptor(i,n):a,o=t.length-1;o>=0;o--)(e=t[o])&&(s=(r<3?e(s):r>3?e(i,n,s):e(i,n))||s);return r>3&&s&&Object.defineProperty(i,n,s),s};let d=class extends(r(i)){constructor(){super(...arguments),this.layout="fluid",this.direction="column",this.size="lg",this.padding="",this.justify="",this.align="",this.gap=0,this.wrap=!1,this.width="",this.height="",this.minHeight="",this.innerClass=""}getGapValue(t){if("number"==typeof t)return`${t}px`;if("string"==typeof t)switch(t){case"small":return"var(--nuraly-spacing-2, 8px)";case"medium":return"var(--nuraly-spacing-3, 16px)";case"large":return"var(--nuraly-spacing-4, 24px)";default:return t}return"0"}getGapStyles(){const t={};if(Array.isArray(this.gap)){const[i,n]=this.gap;t["column-gap"]=this.getGapValue(i),t["row-gap"]=this.getGapValue(n)}else this.gap&&(t.gap=this.getGapValue(this.gap));return t}getContainerStyles(){const t=Object.assign({},this.getGapStyles());return this.height&&(t.height=this.height),this.minHeight&&(t["min-height"]=this.minHeight),Object.entries(t).map(([t,i])=>`${t}: ${i}`).join("; ")}updated(t){super.updated(t),"boxed"===this.layout?(this.width?(this.style.maxWidth=this.width,this.style.width=""):this.style.maxWidth="",this.style.marginInline="auto"):this.width?(this.style.width=this.width,this.style.maxWidth=this.width,this.style.marginInline=""):"fluid"===this.layout?(this.style.width="100%",this.style.maxWidth="",this.style.marginInline=""):"row"===this.direction&&"fixed"===this.layout?(this.style.width="fit-content",this.style.maxWidth="",this.style.marginInline=""):(this.style.width="100%",this.style.maxWidth="",this.style.marginInline="")}render(){const t=this.getContainerStyles(),i=this.innerClass?`nr-container ${this.innerClass}`:"nr-container";return n`
+      <div
+        class="${i}"
+        part="container"
+        data-layout="${this.layout}"
+        data-direction="${this.direction}"
+        data-size="${"fluid"!==this.layout?this.size:""}"
+        data-padding="${this.padding}"
+        data-justify="${this.justify}"
+        data-align="${this.align}"
+        data-wrap="${this.wrap}"
+        data-theme="${this.currentTheme}"
+        style="${t}"
+      >
+        <slot></slot>
+      </div>
+    `}};d.styles=s,o([a({type:String})],d.prototype,"layout",void 0),o([a({type:String})],d.prototype,"direction",void 0),o([a({type:String})],d.prototype,"size",void 0),o([a({type:String})],d.prototype,"padding",void 0),o([a({type:String})],d.prototype,"justify",void 0),o([a({type:String})],d.prototype,"align",void 0),o([a({type:Object})],d.prototype,"gap",void 0),o([a({type:Boolean})],d.prototype,"wrap",void 0),o([a({type:String})],d.prototype,"width",void 0),o([a({type:String})],d.prototype,"height",void 0),o([a({type:String,attribute:"min-height"})],d.prototype,"minHeight",void 0),o([a({type:String,attribute:"inner-class"})],d.prototype,"innerClass",void 0),d=o([e("nr-container")],d);const c="";export{c as EMPTY_STRING,d as NrContainerElement};

package/container.component.d.ts

@@ -0,0 +1,85 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import type { Gap } from './container.types.js';
+declare const NrContainerElement_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;
+/**
+ * Container layout component for wrapping content with configurable layout options
+ *
+ * @example
+ * ```html
+ * <!-- Basic container -->
+ * <nr-container>
+ *   <div>Content</div>
+ * </nr-container>
+ *
+ * <!-- Boxed centered container -->
+ * <nr-container layout="boxed" size="lg">
+ *   <div>Centered content with max-width</div>
+ * </nr-container>
+ *
+ * <!-- Vertical container with gap -->
+ * <nr-container direction="column" gap="16">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </nr-container>
+ *
+ * <!-- Centered content -->
+ * <nr-container justify="center" align="center">
+ *   <div>Centered content</div>
+ * </nr-container>
+ * ```
+ *
+ * @slot default - Container content
+ */
+export declare class NrContainerElement extends NrContainerElement_base {
+    static styles: import("lit").CSSResult;
+    /** Layout type: fluid (full width), boxed (centered with max-width), or fixed */
+    layout: 'fluid' | 'boxed' | 'fixed';
+    /** Flex direction: row or column */
+    direction: 'row' | 'column';
+    /** Size preset for boxed/fixed layouts */
+    size: 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Padding preset */
+    padding: 'none' | 'sm' | 'md' | 'lg' | '';
+    /** Justify content alignment */
+    justify: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | '';
+    /** Align items alignment */
+    align: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' | '';
+    /** Gap between items - can be preset string, number (px), or [horizontal, vertical] */
+    gap: Gap;
+    /** Enable flex wrap */
+    wrap: boolean;
+    /** Custom width (overrides size preset) */
+    width: string;
+    /** Custom height */
+    height: string;
+    /** Custom min-height */
+    minHeight: string;
+    /** Class to apply to inner container (for component styles) */
+    innerClass: string;
+    /**
+     * Convert gap value to CSS value
+     */
+    private getGapValue;
+    /**
+     * Get gap styles for container
+     */
+    private getGapStyles;
+    /**
+     * Get all inline styles for inner container
+     */
+    private getContainerStyles;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-container': NrContainerElement;
+    }
+}
+export {};
+//# sourceMappingURL=container.component.d.ts.map

package/container.component.js

@@ -0,0 +1,223 @@
+/**
+ * @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 } from 'lit/decorators.js';
+import { styles } from './container.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+/**
+ * Container layout component for wrapping content with configurable layout options
+ *
+ * @example
+ * ```html
+ * <!-- Basic container -->
+ * <nr-container>
+ *   <div>Content</div>
+ * </nr-container>
+ *
+ * <!-- Boxed centered container -->
+ * <nr-container layout="boxed" size="lg">
+ *   <div>Centered content with max-width</div>
+ * </nr-container>
+ *
+ * <!-- Vertical container with gap -->
+ * <nr-container direction="column" gap="16">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </nr-container>
+ *
+ * <!-- Centered content -->
+ * <nr-container justify="center" align="center">
+ *   <div>Centered content</div>
+ * </nr-container>
+ * ```
+ *
+ * @slot default - Container content
+ */
+let NrContainerElement = class NrContainerElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** Layout type: fluid (full width), boxed (centered with max-width), or fixed */
+        this.layout = 'fluid';
+        /** Flex direction: row or column */
+        this.direction = 'column';
+        /** Size preset for boxed/fixed layouts */
+        this.size = 'lg';
+        /** Padding preset */
+        this.padding = '';
+        /** Justify content alignment */
+        this.justify = '';
+        /** Align items alignment */
+        this.align = '';
+        /** Gap between items - can be preset string, number (px), or [horizontal, vertical] */
+        this.gap = 0;
+        /** Enable flex wrap */
+        this.wrap = false;
+        /** Custom width (overrides size preset) */
+        this.width = '';
+        /** Custom height */
+        this.height = '';
+        /** Custom min-height */
+        this.minHeight = '';
+        /** Class to apply to inner container (for component styles) */
+        this.innerClass = '';
+    }
+    /**
+     * Convert gap value to CSS value
+     */
+    getGapValue(value) {
+        if (typeof value === 'number') {
+            return `${value}px`;
+        }
+        if (typeof value === 'string') {
+            switch (value) {
+                case 'small':
+                    return 'var(--nuraly-spacing-2, 8px)';
+                case 'medium':
+                    return 'var(--nuraly-spacing-3, 16px)';
+                case 'large':
+                    return 'var(--nuraly-spacing-4, 24px)';
+                default:
+                    return value;
+            }
+        }
+        return '0';
+    }
+    /**
+     * Get gap styles for container
+     */
+    getGapStyles() {
+        const styles = {};
+        if (Array.isArray(this.gap)) {
+            const [horizontal, vertical] = this.gap;
+            styles['column-gap'] = this.getGapValue(horizontal);
+            styles['row-gap'] = this.getGapValue(vertical);
+        }
+        else if (this.gap) {
+            styles['gap'] = this.getGapValue(this.gap);
+        }
+        return styles;
+    }
+    /**
+     * Get all inline styles for inner container
+     */
+    getContainerStyles() {
+        const styles = Object.assign({}, this.getGapStyles());
+        // Width is handled on host element, not inner container
+        if (this.height) {
+            styles['height'] = this.height;
+        }
+        if (this.minHeight) {
+            styles['min-height'] = this.minHeight;
+        }
+        return Object.entries(styles)
+            .map(([key, value]) => `${key}: ${value}`)
+            .join('; ');
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Update host styles based on layout
+        if (this.layout === 'boxed') {
+            // Boxed: host is centered with max-width
+            if (this.width) {
+                this.style.maxWidth = this.width;
+                this.style.width = '';
+            }
+            else {
+                this.style.maxWidth = '';
+            }
+            this.style.marginInline = 'auto';
+        }
+        else if (this.width) {
+            this.style.width = this.width;
+            this.style.maxWidth = this.width;
+            this.style.marginInline = '';
+        }
+        else if (this.layout === 'fluid') {
+            this.style.width = '100%';
+            this.style.maxWidth = '';
+            this.style.marginInline = '';
+        }
+        else if (this.direction === 'row' && this.layout === 'fixed') {
+            this.style.width = 'fit-content';
+            this.style.maxWidth = '';
+            this.style.marginInline = '';
+        }
+        else {
+            this.style.width = '100%';
+            this.style.maxWidth = '';
+            this.style.marginInline = '';
+        }
+    }
+    render() {
+        const containerStyles = this.getContainerStyles();
+        const classes = this.innerClass ? `nr-container ${this.innerClass}` : 'nr-container';
+        return html `
+      <div
+        class="${classes}"
+        part="container"
+        data-layout="${this.layout}"
+        data-direction="${this.direction}"
+        data-size="${this.layout !== 'fluid' ? this.size : ''}"
+        data-padding="${this.padding}"
+        data-justify="${this.justify}"
+        data-align="${this.align}"
+        data-wrap="${this.wrap}"
+        data-theme="${this.currentTheme}"
+        style="${containerStyles}"
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+NrContainerElement.styles = styles;
+__decorate([
+    property({ type: String })
+], NrContainerElement.prototype, "layout", void 0);
+__decorate([
+    property({ type: String })
+], NrContainerElement.prototype, "direction", void 0);
+__decorate([
+    property({ type: String })
+], NrContainerElement.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], NrContainerElement.prototype, "padding", void 0);
+__decorate([
+    property({ type: String })
+], NrContainerElement.prototype, "justify", void 0);
+__decorate([
+    property({ type: String })
+], NrContainerElement.prototype, "align", void 0);
+__decorate([
+    property({ type: Object })
+], NrContainerElement.prototype, "gap", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrContainerElement.prototype, "wrap", void 0);
+__decorate([
+    property({ type: String })
+], NrContainerElement.prototype, "width", void 0);
+__decorate([
+    property({ type: String })
+], NrContainerElement.prototype, "height", void 0);
+__decorate([
+    property({ type: String, attribute: 'min-height' })
+], NrContainerElement.prototype, "minHeight", void 0);
+__decorate([
+    property({ type: String, attribute: 'inner-class' })
+], NrContainerElement.prototype, "innerClass", void 0);
+NrContainerElement = __decorate([
+    customElement('nr-container')
+], NrContainerElement);
+export { NrContainerElement };
+//# sourceMappingURL=container.component.js.map

package/container.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.component.js","sourceRoot":"","sources":["../../../../src/components/container/container.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 } from 'lit/decorators.js';\nimport { styles } from './container.style.js';\nimport { NuralyUIBaseMixin } from '@nuralyui/common/mixins';\nimport type {\n  Gap\n} from './container.types.js';\n\n/**\n * Container layout component for wrapping content with configurable layout options\n *\n * @example\n * ```html\n * <!-- Basic container -->\n * <nr-container>\n *   <div>Content</div>\n * </nr-container>\n *\n * <!-- Boxed centered container -->\n * <nr-container layout=\"boxed\" size=\"lg\">\n *   <div>Centered content with max-width</div>\n * </nr-container>\n *\n * <!-- Vertical container with gap -->\n * <nr-container direction=\"column\" gap=\"16\">\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n * </nr-container>\n *\n * <!-- Centered content -->\n * <nr-container justify=\"center\" align=\"center\">\n *   <div>Centered content</div>\n * </nr-container>\n * ```\n *\n * @slot default - Container content\n */\n@customElement('nr-container')\nexport class NrContainerElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  /** Layout type: fluid (full width), boxed (centered with max-width), or fixed */\n  @property({ type: String })\n  layout: 'fluid' | 'boxed' | 'fixed' = 'fluid';\n\n  /** Flex direction: row or column */\n  @property({ type: String })\n  direction: 'row' | 'column' = 'column';\n\n  /** Size preset for boxed/fixed layouts */\n  @property({ type: String })\n  size: 'sm' | 'md' | 'lg' | 'xl' | 'full' = 'lg';\n\n  /** Padding preset */\n  @property({ type: String })\n  padding: 'none' | 'sm' | 'md' | 'lg' | '' = '';\n\n  /** Justify content alignment */\n  @property({ type: String })\n  justify: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | '' = '';\n\n  /** Align items alignment */\n  @property({ type: String })\n  align: 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' | '' = '';\n\n  /** Gap between items - can be preset string, number (px), or [horizontal, vertical] */\n  @property({ type: Object })\n  gap: Gap = 0;\n\n  /** Enable flex wrap */\n  @property({ type: Boolean })\n  wrap = false;\n\n  /** Custom width (overrides size preset) */\n  @property({ type: String })\n  width = '';\n\n  /** Custom height */\n  @property({ type: String })\n  height = '';\n\n  /** Custom min-height */\n  @property({ type: String, attribute: 'min-height' })\n  minHeight = '';\n\n  /** Class to apply to inner container (for component styles) */\n  @property({ type: String, attribute: 'inner-class' })\n  innerClass = '';\n\n  /**\n   * Convert gap value to CSS value\n   */\n  private getGapValue(value: Gap): string {\n    if (typeof value === 'number') {\n      return `${value}px`;\n    }\n\n    if (typeof value === 'string') {\n      switch (value) {\n        case 'small':\n          return 'var(--nuraly-spacing-2, 8px)';\n        case 'medium':\n          return 'var(--nuraly-spacing-3, 16px)';\n        case 'large':\n          return 'var(--nuraly-spacing-4, 24px)';\n        default:\n          return value;\n      }\n    }\n\n    return '0';\n  }\n\n  /**\n   * Get gap styles for container\n   */\n  private getGapStyles(): Record<string, string> {\n    const styles: Record<string, string> = {};\n\n    if (Array.isArray(this.gap)) {\n      const [horizontal, vertical] = this.gap;\n      styles['column-gap'] = this.getGapValue(horizontal);\n      styles['row-gap'] = this.getGapValue(vertical);\n    } else if (this.gap) {\n      styles['gap'] = this.getGapValue(this.gap);\n    }\n\n    return styles;\n  }\n\n  /**\n   * Get all inline styles for inner container\n   */\n  private getContainerStyles(): string {\n    const styles: Record<string, string> = {\n      ...this.getGapStyles()\n    };\n\n    // Width is handled on host element, not inner container\n\n    if (this.height) {\n      styles['height'] = this.height;\n    }\n\n    if (this.minHeight) {\n      styles['min-height'] = this.minHeight;\n    }\n\n    return Object.entries(styles)\n      .map(([key, value]) => `${key}: ${value}`)\n      .join('; ');\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n\n    // Update host styles based on layout\n    if (this.layout === 'boxed') {\n      // Boxed: host is centered with max-width\n      if (this.width) {\n        this.style.maxWidth = this.width;\n        this.style.width = '';\n      } else {\n        this.style.maxWidth = '';\n      }\n      this.style.marginInline = 'auto';\n    } else if (this.width) {\n      this.style.width = this.width;\n      this.style.maxWidth = this.width;\n      this.style.marginInline = '';\n    } else if (this.layout === 'fluid') {\n      this.style.width = '100%';\n      this.style.maxWidth = '';\n      this.style.marginInline = '';\n    } else if (this.direction === 'row' && this.layout === 'fixed') {\n      this.style.width = 'fit-content';\n      this.style.maxWidth = '';\n      this.style.marginInline = '';\n    } else {\n      this.style.width = '100%';\n      this.style.maxWidth = '';\n      this.style.marginInline = '';\n    }\n  }\n\n  override render() {\n    const containerStyles = this.getContainerStyles();\n    const classes = this.innerClass ? `nr-container ${this.innerClass}` : 'nr-container';\n\n    return html`\n      <div\n        class=\"${classes}\"\n        part=\"container\"\n        data-layout=\"${this.layout}\"\n        data-direction=\"${this.direction}\"\n        data-size=\"${this.layout !== 'fluid' ? this.size : ''}\"\n        data-padding=\"${this.padding}\"\n        data-justify=\"${this.justify}\"\n        data-align=\"${this.align}\"\n        data-wrap=\"${this.wrap}\"\n        data-theme=\"${this.currentTheme}\"\n        style=\"${containerStyles}\"\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-container': NrContainerElement;\n  }\n}\n"]}

package/container.style.d.ts

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

package/container.style.js

@@ -0,0 +1,146 @@
+import { css } from 'lit';
+/**
+ * Container component styles
+ * Using shared CSS variables from /src/shared/themes/
+ */
+export const styles = css `
+  :host {
+    display: block;
+    box-sizing: border-box;
+  }
+
+  .nr-container {
+    display: flex;
+    box-sizing: border-box;
+    min-height: inherit;
+
+    /* Theme-aware */
+    color: var(--nuraly-color-text);
+    background: var(--nuraly-container-background, transparent);
+  }
+
+  /* Direction */
+  .nr-container[data-direction="row"] {
+    flex-direction: row;
+  }
+
+  .nr-container[data-direction="column"] {
+    flex-direction: column;
+  }
+
+  /* Layout: Fluid (full width) - applies to both directions */
+  .nr-container[data-layout="fluid"] {
+    width: 100%;
+    max-width: none;
+  }
+
+  /* Layout: Boxed (centered with max-width) */
+  .nr-container[data-layout="boxed"] {
+    margin-inline: auto;
+  }
+
+  /* Layout: Fixed */
+  .nr-container[data-layout="fixed"] {
+    margin-inline: auto;
+  }
+
+  /* Row direction with non-fluid layout should be fit-content */
+  .nr-container[data-direction="row"][data-layout="boxed"],
+  .nr-container[data-direction="row"][data-layout="fixed"] {
+    width: fit-content;
+  }
+
+  /* Boxed/Fixed sizes */
+  .nr-container[data-size="sm"] {
+    max-width: var(--nuraly-container-sm, 640px);
+  }
+
+  .nr-container[data-size="md"] {
+    max-width: var(--nuraly-container-md, 768px);
+  }
+
+  .nr-container[data-size="lg"] {
+    max-width: var(--nuraly-container-lg, 1024px);
+  }
+
+  .nr-container[data-size="xl"] {
+    max-width: var(--nuraly-container-xl, 1280px);
+  }
+
+  .nr-container[data-size="full"] {
+    max-width: 100%;
+  }
+
+  /* Padding presets */
+  .nr-container[data-padding="none"] {
+    padding: 0;
+  }
+
+  .nr-container[data-padding="sm"] {
+    padding: var(--nuraly-spacing-2, 8px);
+  }
+
+  .nr-container[data-padding="md"] {
+    padding: var(--nuraly-spacing-3, 16px);
+  }
+
+  .nr-container[data-padding="lg"] {
+    padding: var(--nuraly-spacing-4, 24px);
+  }
+
+  /* Wrap */
+  .nr-container[data-wrap="true"] {
+    flex-wrap: wrap;
+  }
+
+  .nr-container[data-wrap="false"] {
+    flex-wrap: nowrap;
+  }
+
+  /* Justify content */
+  .nr-container[data-justify="flex-start"] {
+    justify-content: flex-start;
+  }
+
+  .nr-container[data-justify="flex-end"] {
+    justify-content: flex-end;
+  }
+
+  .nr-container[data-justify="center"] {
+    justify-content: center;
+  }
+
+  .nr-container[data-justify="space-between"] {
+    justify-content: space-between;
+  }
+
+  .nr-container[data-justify="space-around"] {
+    justify-content: space-around;
+  }
+
+  .nr-container[data-justify="space-evenly"] {
+    justify-content: space-evenly;
+  }
+
+  /* Align items */
+  .nr-container[data-align="flex-start"] {
+    align-items: flex-start;
+  }
+
+  .nr-container[data-align="flex-end"] {
+    align-items: flex-end;
+  }
+
+  .nr-container[data-align="center"] {
+    align-items: center;
+  }
+
+  .nr-container[data-align="baseline"] {
+    align-items: baseline;
+  }
+
+  .nr-container[data-align="stretch"] {
+    align-items: stretch;
+  }
+`;
+//# sourceMappingURL=container.style.js.map

package/container.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.style.js","sourceRoot":"","sources":["../../../../src/components/container/container.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2IxB,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Container component styles\n * Using shared CSS variables from /src/shared/themes/\n */\nexport const styles = css`\n  :host {\n    display: block;\n    box-sizing: border-box;\n  }\n\n  .nr-container {\n    display: flex;\n    box-sizing: border-box;\n    min-height: inherit;\n\n    /* Theme-aware */\n    color: var(--nuraly-color-text);\n    background: var(--nuraly-container-background, transparent);\n  }\n\n  /* Direction */\n  .nr-container[data-direction=\"row\"] {\n    flex-direction: row;\n  }\n\n  .nr-container[data-direction=\"column\"] {\n    flex-direction: column;\n  }\n\n  /* Layout: Fluid (full width) - applies to both directions */\n  .nr-container[data-layout=\"fluid\"] {\n    width: 100%;\n    max-width: none;\n  }\n\n  /* Layout: Boxed (centered with max-width) */\n  .nr-container[data-layout=\"boxed\"] {\n    margin-inline: auto;\n  }\n\n  /* Layout: Fixed */\n  .nr-container[data-layout=\"fixed\"] {\n    margin-inline: auto;\n  }\n\n  /* Row direction with non-fluid layout should be fit-content */\n  .nr-container[data-direction=\"row\"][data-layout=\"boxed\"],\n  .nr-container[data-direction=\"row\"][data-layout=\"fixed\"] {\n    width: fit-content;\n  }\n\n  /* Boxed/Fixed sizes */\n  .nr-container[data-size=\"sm\"] {\n    max-width: var(--nuraly-container-sm, 640px);\n  }\n\n  .nr-container[data-size=\"md\"] {\n    max-width: var(--nuraly-container-md, 768px);\n  }\n\n  .nr-container[data-size=\"lg\"] {\n    max-width: var(--nuraly-container-lg, 1024px);\n  }\n\n  .nr-container[data-size=\"xl\"] {\n    max-width: var(--nuraly-container-xl, 1280px);\n  }\n\n  .nr-container[data-size=\"full\"] {\n    max-width: 100%;\n  }\n\n  /* Padding presets */\n  .nr-container[data-padding=\"none\"] {\n    padding: 0;\n  }\n\n  .nr-container[data-padding=\"sm\"] {\n    padding: var(--nuraly-spacing-2, 8px);\n  }\n\n  .nr-container[data-padding=\"md\"] {\n    padding: var(--nuraly-spacing-3, 16px);\n  }\n\n  .nr-container[data-padding=\"lg\"] {\n    padding: var(--nuraly-spacing-4, 24px);\n  }\n\n  /* Wrap */\n  .nr-container[data-wrap=\"true\"] {\n    flex-wrap: wrap;\n  }\n\n  .nr-container[data-wrap=\"false\"] {\n    flex-wrap: nowrap;\n  }\n\n  /* Justify content */\n  .nr-container[data-justify=\"flex-start\"] {\n    justify-content: flex-start;\n  }\n\n  .nr-container[data-justify=\"flex-end\"] {\n    justify-content: flex-end;\n  }\n\n  .nr-container[data-justify=\"center\"] {\n    justify-content: center;\n  }\n\n  .nr-container[data-justify=\"space-between\"] {\n    justify-content: space-between;\n  }\n\n  .nr-container[data-justify=\"space-around\"] {\n    justify-content: space-around;\n  }\n\n  .nr-container[data-justify=\"space-evenly\"] {\n    justify-content: space-evenly;\n  }\n\n  /* Align items */\n  .nr-container[data-align=\"flex-start\"] {\n    align-items: flex-start;\n  }\n\n  .nr-container[data-align=\"flex-end\"] {\n    align-items: flex-end;\n  }\n\n  .nr-container[data-align=\"center\"] {\n    align-items: center;\n  }\n\n  .nr-container[data-align=\"baseline\"] {\n    align-items: baseline;\n  }\n\n  .nr-container[data-align=\"stretch\"] {\n    align-items: stretch;\n  }\n`;\n"]}

package/container.types.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Container component types and constants
+ */
+export declare const EMPTY_STRING = "";
+/**
+ * Container layout type
+ */
+export declare const enum ContainerLayout {
+    /** Full width container */
+    Fluid = "fluid",
+    /** Centered with max-width (boxed) */
+    Boxed = "boxed",
+    /** Fixed width */
+    Fixed = "fixed"
+}
+/**
+ * Container direction
+ */
+export declare const enum ContainerDirection {
+    Row = "row",
+    Column = "column"
+}
+/**
+ * Container size presets for boxed layout
+ */
+export declare const enum ContainerSize {
+    Small = "sm",
+    Medium = "md",
+    Large = "lg",
+    ExtraLarge = "xl",
+    Full = "full"
+}
+/**
+ * Padding size presets
+ */
+export declare const enum ContainerPadding {
+    None = "none",
+    Small = "sm",
+    Medium = "md",
+    Large = "lg"
+}
+/**
+ * Justify content alignment
+ */
+export declare const enum ContainerJustify {
+    FlexStart = "flex-start",
+    FlexEnd = "flex-end",
+    Center = "center",
+    SpaceBetween = "space-between",
+    SpaceAround = "space-around",
+    SpaceEvenly = "space-evenly"
+}
+/**
+ * Align items alignment
+ */
+export declare const enum ContainerAlign {
+    FlexStart = "flex-start",
+    FlexEnd = "flex-end",
+    Center = "center",
+    Baseline = "baseline",
+    Stretch = "stretch"
+}
+/**
+ * Gap configuration - can be string preset, number (px), or array [horizontal, vertical]
+ */
+export type Gap = 'small' | 'medium' | 'large' | number | string | [number | string, number | string];
+//# sourceMappingURL=container.types.d.ts.map

package/container.types.js

@@ -0,0 +1,5 @@
+/**
+ * Container component types and constants
+ */
+export const EMPTY_STRING = '';
+//# sourceMappingURL=container.types.js.map

package/container.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.types.js","sourceRoot":"","sources":["../../../../src/components/container/container.types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,CAAC,MAAM,YAAY,GAAG,EAAE,CAAC","sourcesContent":["/**\n * Container component types and constants\n */\n\nexport const EMPTY_STRING = '';\n\n/**\n * Container layout type\n */\nexport const enum ContainerLayout {\n  /** Full width container */\n  Fluid = 'fluid',\n  /** Centered with max-width (boxed) */\n  Boxed = 'boxed',\n  /** Fixed width */\n  Fixed = 'fixed'\n}\n\n/**\n * Container direction\n */\nexport const enum ContainerDirection {\n  Row = 'row',\n  Column = 'column'\n}\n\n/**\n * Container size presets for boxed layout\n */\nexport const enum ContainerSize {\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg',\n  ExtraLarge = 'xl',\n  Full = 'full'\n}\n\n/**\n * Padding size presets\n */\nexport const enum ContainerPadding {\n  None = 'none',\n  Small = 'sm',\n  Medium = 'md',\n  Large = 'lg'\n}\n\n/**\n * Justify content alignment\n */\nexport const enum ContainerJustify {\n  FlexStart = 'flex-start',\n  FlexEnd = 'flex-end',\n  Center = 'center',\n  SpaceBetween = 'space-between',\n  SpaceAround = 'space-around',\n  SpaceEvenly = 'space-evenly'\n}\n\n/**\n * Align items alignment\n */\nexport const enum ContainerAlign {\n  FlexStart = 'flex-start',\n  FlexEnd = 'flex-end',\n  Center = 'center',\n  Baseline = 'baseline',\n  Stretch = 'stretch'\n}\n\n/**\n * Gap configuration - can be string preset, number (px), or array [horizontal, vertical]\n */\nexport type Gap = 'small' | 'medium' | 'large' | number | string | [number | string, number | string];\n"]}

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from './container.component.js';
+export * from './container.types.js';
+//# sourceMappingURL=index.d.ts.map

package/index.js

@@ -0,0 +1,3 @@
+export * from './container.component.js';
+export * from './container.types.js';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/container/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC","sourcesContent":["export * from './container.component.js';\nexport * from './container.types.js';\n"]}

package/package.json

@@ -0,0 +1,49 @@
+{
+    "name": "@nuralyui/container",
+    "version": "0.0.1",
+    "description": "Container layout component for NuralyUI library",
+    "main": "index.js",
+    "type": "module",
+    "exports": {
+        ".": {
+            "import": "./index.js"
+        },
+        "./bundle": {
+            "import": "./bundle.js"
+        }
+    },
+    "files": [
+        "*.js",
+        "*.d.ts",
+        "*.js.map",
+        "container.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/container"
+    },
+    "keywords": [
+        "container",
+        "layout",
+        "boxed",
+        "fluid",
+        "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/react.d.ts

@@ -0,0 +1,3 @@
+import { NrContainerElement } from './container.component.js';
+export declare const NrContainer: import("@lit-labs/react").ReactWebComponent<NrContainerElement, {}>;
+//# sourceMappingURL=react.d.ts.map

package/react.js

@@ -0,0 +1,10 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { NrContainerElement } from './container.component.js';
+export const NrContainer = createComponent({
+    tagName: 'nr-container',
+    elementClass: NrContainerElement,
+    react: React,
+    events: {},
+});
+//# sourceMappingURL=react.js.map

package/react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react.js","sourceRoot":"","sources":["../../../../src/components/container/react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAE9D,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC;IACzC,OAAO,EAAE,cAAc;IACvB,YAAY,EAAE,kBAAkB;IAChC,KAAK,EAAE,KAAK;IACZ,MAAM,EAAE,EAAE;CACX,CAAC,CAAC","sourcesContent":["import { createComponent } from '@lit-labs/react';\nimport * as React from 'react';\nimport { NrContainerElement } from './container.component.js';\n\nexport const NrContainer = createComponent({\n  tagName: 'nr-container',\n  elementClass: NrContainerElement,\n  react: React,\n  events: {},\n});\n"]}