@nuraly/lumenui 0.1.0

package/dist/src/components/grid/col.component.js

@@ -0,0 +1,253 @@
+/**
+ * @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 './col.style.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import { BREAKPOINTS, EMPTY_STRING } from './grid.types.js';
+/**
+ * Column component for grid layout system
+ *
+ * @example
+ * ```html
+ * <!-- Basic column with span -->
+ * <nr-col span="12">Half width</nr-col>
+ * <nr-col span="8">8/24 width</nr-col>
+ *
+ * <!-- Column with offset -->
+ * <nr-col span="12" offset="6">Offset by 6</nr-col>
+ *
+ * <!-- Responsive column -->
+ * <nr-col
+ *   xs="24"
+ *   sm="12"
+ *   md="8"
+ *   lg="6"
+ * >Responsive</nr-col>
+ *
+ * <!-- Column with order -->
+ * <nr-col span="6" order="4">Last</nr-col>
+ * <nr-col span="6" order="1">First</nr-col>
+ *
+ * <!-- Flex column -->
+ * <nr-col flex="auto">Auto flex</nr-col>
+ * <nr-col flex="1">Flex 1</nr-col>
+ * ```
+ *
+ * @slot default - Column content
+ */
+let NrColElement = class NrColElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /** Number of columns to offset */
+        this.offset = 0;
+        /** Number of columns to pull */
+        this.pull = 0;
+        /** Number of columns to push */
+        this.push = 0;
+        /** Flex layout style */
+        this.flex = EMPTY_STRING;
+        /** Current breakpoint */
+        this.currentBreakpoint = "xs" /* GridBreakpoint.XS */;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setupResponsive();
+    }
+    disconnectedCallback() {
+        var _a;
+        super.disconnectedCallback();
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    /**
+     * Setup responsive breakpoint detection
+     */
+    setupResponsive() {
+        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;
+        let newBreakpoint;
+        if (width >= BREAKPOINTS.xxl) {
+            newBreakpoint = "xxl" /* GridBreakpoint.XXL */;
+        }
+        else if (width >= BREAKPOINTS.xl) {
+            newBreakpoint = "xl" /* GridBreakpoint.XL */;
+        }
+        else if (width >= BREAKPOINTS.lg) {
+            newBreakpoint = "lg" /* GridBreakpoint.LG */;
+        }
+        else if (width >= BREAKPOINTS.md) {
+            newBreakpoint = "md" /* GridBreakpoint.MD */;
+        }
+        else if (width >= BREAKPOINTS.sm) {
+            newBreakpoint = "sm" /* GridBreakpoint.SM */;
+        }
+        else {
+            newBreakpoint = "xs" /* GridBreakpoint.XS */;
+        }
+        if (newBreakpoint !== this.currentBreakpoint) {
+            this.currentBreakpoint = newBreakpoint;
+        }
+    }
+    /**
+     * Get responsive configuration for current breakpoint
+     */
+    getResponsiveConfig() {
+        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[bp];
+            if (value !== undefined) {
+                if (typeof value === 'number') {
+                    return { span: value };
+                }
+                return value;
+            }
+        }
+        return {};
+    }
+    /**
+     * Get computed column properties
+     */
+    getColProperties() {
+        var _a, _b, _c, _d, _e;
+        const responsive = this.getResponsiveConfig();
+        return {
+            span: (_a = responsive.span) !== null && _a !== void 0 ? _a : this.span,
+            offset: (_b = responsive.offset) !== null && _b !== void 0 ? _b : this.offset,
+            order: (_c = responsive.order) !== null && _c !== void 0 ? _c : this.order,
+            pull: (_d = responsive.pull) !== null && _d !== void 0 ? _d : this.pull,
+            push: (_e = responsive.push) !== null && _e !== void 0 ? _e : this.push
+        };
+    }
+    /**
+     * Get gutter from parent row
+     */
+    getGutterFromParent() {
+        const parent = this.closest('nr-row');
+        if (parent) {
+            const gutter = parent.getAttribute('data-gutter');
+            return gutter ? Number.parseInt(gutter, 10) : 0;
+        }
+        return 0;
+    }
+    /**
+     * Get inline styles for column
+     */
+    getColStyle() {
+        const styles = {};
+        const gutter = this.getGutterFromParent();
+        if (gutter > 0) {
+            styles['padding-left'] = `${gutter / 2}px`;
+            styles['padding-right'] = `${gutter / 2}px`;
+        }
+        if (this.flex) {
+            if (this.flex === 'auto') {
+                styles['flex'] = '1 1 auto';
+            }
+            else if (this.flex === 'none') {
+                styles['flex'] = '0 0 auto';
+            }
+            else if (typeof this.flex === 'number') {
+                styles['flex'] = `${this.flex} ${this.flex} auto`;
+            }
+            else {
+                styles['flex'] = this.flex;
+            }
+        }
+        return styles;
+    }
+    render() {
+        var _a;
+        const colStyle = this.getColStyle();
+        const props = this.getColProperties();
+        // Apply data attributes to :host for proper styling
+        this.setAttribute('data-span', ((_a = props.span) === null || _a === void 0 ? void 0 : _a.toString()) || '');
+        this.setAttribute('data-offset', props.offset.toString());
+        if (props.order !== undefined) {
+            this.setAttribute('data-order', props.order.toString());
+        }
+        else {
+            this.removeAttribute('data-order');
+        }
+        this.setAttribute('data-pull', props.pull.toString());
+        this.setAttribute('data-push', props.push.toString());
+        this.setAttribute('data-theme', this.currentTheme);
+        return html `
+      <div
+        class="nr-col"
+        style="${Object.entries(colStyle).map(([key, value]) => `${key}: ${value}`).join('; ')}"
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+NrColElement.styles = styles;
+__decorate([
+    property({ type: Number })
+], NrColElement.prototype, "span", void 0);
+__decorate([
+    property({ type: Number })
+], NrColElement.prototype, "offset", void 0);
+__decorate([
+    property({ type: Number })
+], NrColElement.prototype, "order", void 0);
+__decorate([
+    property({ type: Number })
+], NrColElement.prototype, "pull", void 0);
+__decorate([
+    property({ type: Number })
+], NrColElement.prototype, "push", void 0);
+__decorate([
+    property({ type: String })
+], NrColElement.prototype, "flex", void 0);
+__decorate([
+    property({ type: Object })
+], NrColElement.prototype, "xs", void 0);
+__decorate([
+    property({ type: Object })
+], NrColElement.prototype, "sm", void 0);
+__decorate([
+    property({ type: Object })
+], NrColElement.prototype, "md", void 0);
+__decorate([
+    property({ type: Object })
+], NrColElement.prototype, "lg", void 0);
+__decorate([
+    property({ type: Object })
+], NrColElement.prototype, "xl", void 0);
+__decorate([
+    property({ type: Object })
+], NrColElement.prototype, "xxl", void 0);
+__decorate([
+    state()
+], NrColElement.prototype, "currentBreakpoint", void 0);
+NrColElement = __decorate([
+    customElement('nr-col')
+], NrColElement);
+export { NrColElement };
+//# sourceMappingURL=col.component.js.map

package/dist/src/components/grid/col.style.d.ts

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

package/dist/src/components/grid/col.style.js

@@ -0,0 +1,117 @@
+import { css } from 'lit';
+/**
+ * Column component styles for the Grid system
+ * Using shared CSS variables from /src/shared/themes/
+ */
+export const styles = css `
+  :host {
+    display: block;
+    box-sizing: border-box;
+    flex-shrink: 0;
+  }
+
+  .nr-col {
+    position: relative;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    
+    /* Theme-aware */
+    color: var(--nuraly-color-text);
+  }
+
+  /* Column spans (1-24) - Apply flex to :host */
+  :host([data-span="1"]) { flex: 0 0 4.16666667%; max-width: 4.16666667%; }
+  :host([data-span="2"]) { flex: 0 0 8.33333333%; max-width: 8.33333333%; }
+  :host([data-span="3"]) { flex: 0 0 12.5%; max-width: 12.5%; }
+  :host([data-span="4"]) { flex: 0 0 16.66666667%; max-width: 16.66666667%; }
+  :host([data-span="5"]) { flex: 0 0 20.83333333%; max-width: 20.83333333%; }
+  :host([data-span="6"]) { flex: 0 0 25%; max-width: 25%; }
+  :host([data-span="7"]) { flex: 0 0 29.16666667%; max-width: 29.16666667%; }
+  :host([data-span="8"]) { flex: 0 0 33.33333333%; max-width: 33.33333333%; }
+  :host([data-span="9"]) { flex: 0 0 37.5%; max-width: 37.5%; }
+  :host([data-span="10"]) { flex: 0 0 41.66666667%; max-width: 41.66666667%; }
+  :host([data-span="11"]) { flex: 0 0 45.83333333%; max-width: 45.83333333%; }
+  :host([data-span="12"]) { flex: 0 0 50%; max-width: 50%; }
+  :host([data-span="13"]) { flex: 0 0 54.16666667%; max-width: 54.16666667%; }
+  :host([data-span="14"]) { flex: 0 0 58.33333333%; max-width: 58.33333333%; }
+  :host([data-span="15"]) { flex: 0 0 62.5%; max-width: 62.5%; }
+  :host([data-span="16"]) { flex: 0 0 66.66666667%; max-width: 66.66666667%; }
+  :host([data-span="17"]) { flex: 0 0 70.83333333%; max-width: 70.83333333%; }
+  :host([data-span="18"]) { flex: 0 0 75%; max-width: 75%; }
+  :host([data-span="19"]) { flex: 0 0 79.16666667%; max-width: 79.16666667%; }
+  :host([data-span="20"]) { flex: 0 0 83.33333333%; max-width: 83.33333333%; }
+  :host([data-span="21"]) { flex: 0 0 87.5%; max-width: 87.5%; }
+  :host([data-span="22"]) { flex: 0 0 91.66666667%; max-width: 91.66666667%; }
+  :host([data-span="23"]) { flex: 0 0 95.83333333%; max-width: 95.83333333%; }
+  :host([data-span="24"]) { flex: 0 0 100%; max-width: 100%; }
+
+  /* Column offsets (0-24) - Apply to :host */
+  :host([data-offset="0"]) { margin-left: 0; }
+  :host([data-offset="1"]) { margin-left: 4.16666667%; }
+  :host([data-offset="2"]) { margin-left: 8.33333333%; }
+  :host([data-offset="3"]) { margin-left: 12.5%; }
+  :host([data-offset="4"]) { margin-left: 16.66666667%; }
+  :host([data-offset="5"]) { margin-left: 20.83333333%; }
+  :host([data-offset="6"]) { margin-left: 25%; }
+  :host([data-offset="7"]) { margin-left: 29.16666667%; }
+  :host([data-offset="8"]) { margin-left: 33.33333333%; }
+  :host([data-offset="9"]) { margin-left: 37.5%; }
+  :host([data-offset="10"]) { margin-left: 41.66666667%; }
+  :host([data-offset="11"]) { margin-left: 45.83333333%; }
+  :host([data-offset="12"]) { margin-left: 50%; }
+  :host([data-offset="13"]) { margin-left: 54.16666667%; }
+  :host([data-offset="14"]) { margin-left: 58.33333333%; }
+  :host([data-offset="15"]) { margin-left: 62.5%; }
+  :host([data-offset="16"]) { margin-left: 66.66666667%; }
+  :host([data-offset="17"]) { margin-left: 70.83333333%; }
+  :host([data-offset="18"]) { margin-left: 75%; }
+  :host([data-offset="19"]) { margin-left: 79.16666667%; }
+  :host([data-offset="20"]) { margin-left: 83.33333333%; }
+  :host([data-offset="21"]) { margin-left: 87.5%; }
+  :host([data-offset="22"]) { margin-left: 91.66666667%; }
+  :host([data-offset="23"]) { margin-left: 95.83333333%; }
+
+  /* Order - Apply to :host */
+  :host([data-order="1"]) { order: 1; }
+  :host([data-order="2"]) { order: 2; }
+  :host([data-order="3"]) { order: 3; }
+  :host([data-order="4"]) { order: 4; }
+  :host([data-order="5"]) { order: 5; }
+  :host([data-order="6"]) { order: 6; }
+  :host([data-order="7"]) { order: 7; }
+  :host([data-order="8"]) { order: 8; }
+  :host([data-order="9"]) { order: 9; }
+  :host([data-order="10"]) { order: 10; }
+
+  /* Pull (right positioning) - Apply to :host */
+  :host([data-pull="0"]) { right: auto; }
+  :host([data-pull="1"]) { right: 4.16666667%; }
+  :host([data-pull="2"]) { right: 8.33333333%; }
+  :host([data-pull="3"]) { right: 12.5%; }
+  :host([data-pull="4"]) { right: 16.66666667%; }
+  :host([data-pull="5"]) { right: 20.83333333%; }
+  :host([data-pull="6"]) { right: 25%; }
+  :host([data-pull="7"]) { right: 29.16666667%; }
+  :host([data-pull="8"]) { right: 33.33333333%; }
+  :host([data-pull="9"]) { right: 37.5%; }
+  :host([data-pull="10"]) { right: 41.66666667%; }
+  :host([data-pull="11"]) { right: 45.83333333%; }
+  :host([data-pull="12"]) { right: 50%; }
+
+  /* Push (left positioning) - Apply to :host */
+  :host([data-push="0"]) { left: auto; }
+  :host([data-push="1"]) { left: 4.16666667%; }
+  :host([data-push="2"]) { left: 8.33333333%; }
+  :host([data-push="3"]) { left: 12.5%; }
+  :host([data-push="4"]) { left: 16.66666667%; }
+  :host([data-push="5"]) { left: 20.83333333%; }
+  :host([data-push="6"]) { left: 25%; }
+  :host([data-push="7"]) { left: 29.16666667%; }
+  :host([data-push="8"]) { left: 33.33333333%; }
+  :host([data-push="9"]) { left: 37.5%; }
+  :host([data-push="10"]) { left: 41.66666667%; }
+  :host([data-push="11"]) { left: 45.83333333%; }
+  :host([data-push="12"]) { left: 50%; }
+`;
+//# sourceMappingURL=col.style.js.map

package/dist/src/components/grid/grid.types.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Grid system types and constants
+ */
+export declare const EMPTY_STRING = "";
+/**
+ * Responsive breakpoints matching Ant Design
+ */
+export declare const enum GridBreakpoint {
+    XS = "xs",// < 576px
+    SM = "sm",// >= 576px
+    MD = "md",// >= 768px
+    LG = "lg",// >= 992px
+    XL = "xl",// >= 1200px
+    XXL = "xxl"
+}
+/**
+ * Breakpoint pixel values
+ */
+export declare const BREAKPOINTS: {
+    readonly xs: 0;
+    readonly sm: 576;
+    readonly md: 768;
+    readonly lg: 992;
+    readonly xl: 1200;
+    readonly xxl: 1600;
+};
+/**
+ * Horizontal alignment of flex items
+ */
+export declare const enum RowAlign {
+    Top = "top",
+    Middle = "middle",
+    Bottom = "bottom",
+    Stretch = "stretch"
+}
+/**
+ * Horizontal arrangement of columns
+ */
+export declare const enum RowJustify {
+    Start = "start",
+    End = "end",
+    Center = "center",
+    SpaceAround = "space-around",
+    SpaceBetween = "space-between",
+    SpaceEvenly = "space-evenly"
+}
+/**
+ * Gutter configuration - can be number, array, or object
+ */
+export type Gutter = number | [number, number] | Partial<Record<GridBreakpoint, number | [number, number]>>;
+/**
+ * Column span configuration for responsive breakpoints
+ */
+export interface ColSize {
+    span?: number;
+    offset?: number;
+    order?: number;
+    pull?: number;
+    push?: number;
+}
+/**
+ * Responsive column configuration
+ */
+export type ResponsiveCol = number | ColSize;
+/**
+ * Column configuration for all breakpoints
+ */
+export interface ColResponsive {
+    xs?: ResponsiveCol;
+    sm?: ResponsiveCol;
+    md?: ResponsiveCol;
+    lg?: ResponsiveCol;
+    xl?: ResponsiveCol;
+    xxl?: ResponsiveCol;
+}
+/**
+ * Flex properties
+ */
+export type FlexType = number | 'none' | 'auto' | string;
+//# sourceMappingURL=grid.types.d.ts.map

package/dist/src/components/grid/grid.types.js

@@ -0,0 +1,16 @@
+/**
+ * Grid system types and constants
+ */
+export const EMPTY_STRING = '';
+/**
+ * Breakpoint pixel values
+ */
+export const BREAKPOINTS = {
+    xs: 0,
+    sm: 576,
+    md: 768,
+    lg: 992,
+    xl: 1200,
+    xxl: 1600
+};
+//# sourceMappingURL=grid.types.js.map

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

@@ -0,0 +1,4 @@
+export * from './row.component.js';
+export * from './col.component.js';
+export * from './grid.types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,4 @@
+export * from './row.component.js';
+export * from './col.component.js';
+export * from './grid.types.js';
+//# sourceMappingURL=index.js.map

package/dist/src/components/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/src/components/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/src/components/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("@nuralyui/common/mixins").DependencyAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").ThemeAware) & (new (...args: any[]) => import("@nuralyui/common/mixins").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-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-row': NrRowElement;
+    }
+}
+export {};
+//# sourceMappingURL=row.component.d.ts.map