@nuraly/lumenui 0.1.0

package/dist/src/components/container/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/dist/src/components/container/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/dist/src/components/container/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/dist/src/components/container/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/dist/src/components/container/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/dist/src/components/container/container.types.js

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

package/dist/src/components/container/index.d.ts

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

package/dist/src/components/container/index.js

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

package/dist/src/components/container/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/dist/src/components/container/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