@nuraly/lumenui 0.1.0

package/dist/src/components/divider/bundle.js

@@ -0,0 +1,143 @@
+import{css as i,LitElement as r,html as t}from"lit";import{property as e,customElement as d}from"lit/decorators.js";import{classMap as a}from"lit/directives/class-map.js";import{styleMap as n}from"lit/directives/style-map.js";import{NuralyUIBaseMixin as o}from"@nuralyui/common/mixins";var l=i`
+  :host {
+    display: block;
+    box-sizing: border-box;
+  }
+
+  :host([type="vertical"]) {
+    display: inline-flex;
+    align-self: stretch; /* Stretch to parent height in flex containers */
+    height: auto;
+  }
+
+  .divider {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: var(--nuraly-divider-text-color);
+    font-size: var(--nuraly-divider-font-size);
+    line-height: 1.5715;
+    list-style: none;
+    font-family: inherit;
+  }
+
+  /* Horizontal Divider */
+  .divider--horizontal {
+    display: flex;
+    clear: both;
+    width: 100%;
+    min-width: 100%;
+    margin: var(--nuraly-divider-margin-vertical, 10px) 0;
+    border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
+  }
+
+  /* Horizontal with text */
+  .divider--horizontal.divider--with-text {
+    display: flex;
+    align-items: center;
+    margin: var(--nuraly-divider-margin-vertical) 0;
+    color: var(--nuraly-divider-text-color);
+    font-weight: 500;
+    font-size: var(--nuraly-divider-font-size);
+    white-space: nowrap;
+    text-align: center;
+    border-block-start: 0;
+  }
+
+  .divider--horizontal.divider--with-text::before,
+  .divider--horizontal.divider--with-text::after {
+    position: relative;
+    width: 50%;
+    border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
+    border-block-end: 0;
+    transform: translateY(50%);
+    content: '';
+  }
+
+  /* Text positioning */
+  .divider--start::before {
+    width: var(--nuraly-divider-orientation-margin-left, 5%);
+  }
+
+  .divider--start::after {
+    width: 95%;
+  }
+
+  .divider--end::before {
+    width: 95%;
+  }
+
+  .divider--end::after {
+    width: var(--nuraly-divider-orientation-margin-right, 5%);
+  }
+
+  /* Text wrapper */
+  .divider__text {
+    display: inline-block;
+    padding: 0 var(--nuraly-divider-text-padding, 1em);
+    color: var(--nuraly-divider-text-color, rgba(0, 0, 0, 0.88));
+    font-size: var(--nuraly-divider-font-size, 1rem);
+  }
+
+  /* Plain text style */
+  .divider--plain .divider__text {
+    font-weight: normal;
+  }
+
+  /* Vertical Divider */
+  .divider--vertical {
+    position: relative;
+    top: -0.06em;
+    display: inline-block;
+    height: 0.9em;
+    margin: 0 var(--nuraly-divider-margin-horizontal, 8px);
+    vertical-align: middle;
+    border-top: 0;
+    border-inline-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
+  }
+
+  /* Full height vertical divider when in flex container */
+  :host([type="vertical"]) {
+    height: 100%;
+  }
+
+  :host([type="vertical"]) .divider--vertical {
+    height: 100%;
+    align-self: stretch;
+    top: 0;
+    vertical-align: top;
+    border-inline-start-color: var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
+  }
+
+  /* Variant styles */
+  .divider--solid {
+    --nuraly-divider-variant-style: solid;
+  }
+
+  .divider--dashed {
+    --nuraly-divider-variant-style: dashed;
+  }
+
+  .divider--dotted {
+    --nuraly-divider-variant-style: dotted;
+  }
+
+  /* Size variations (horizontal only) */
+  .divider--horizontal.divider--small {
+    margin: var(--nuraly-divider-margin-vertical-small) 0;
+  }
+
+  .divider--horizontal.divider--middle {
+    margin: var(--nuraly-divider-margin-vertical-middle) 0;
+  }
+
+  .divider--horizontal.divider--large {
+    margin: var(--nuraly-divider-margin-vertical-large) 0;
+  }
+`,v=function(i,r,t,e){for(var d,a=arguments.length,n=a<3?r:null===e?e=Object.getOwnPropertyDescriptor(r,t):e,o=i.length-1;o>=0;o--)(d=i[o])&&(n=(a<3?d(n):a>3?d(r,t,n):d(r,t))||n);return a>3&&n&&Object.defineProperty(r,t,n),n};let s=class extends(o(r)){constructor(){super(...arguments),this.type="horizontal",this.dashed=!1,this.variant="solid",this.orientation="center",this.plain=!0}get hasText(){var i;const r=null===(i=this.shadowRoot)||void 0===i?void 0:i.querySelector("slot");return((null==r?void 0:r.assignedNodes({flatten:!0}))||[]).some(i=>{var r;return i.nodeType===Node.TEXT_NODE&&(null===(r=i.textContent)||void 0===r?void 0:r.trim())||i.nodeType===Node.ELEMENT_NODE})}render(){const i=this.dashed?"dashed":this.variant,r="horizontal"===this.type,e="vertical"===this.type,d={divider:!0,"divider--horizontal":r,"divider--vertical":e,"divider--with-text":r&&this.hasText,"divider--plain":this.plain,[`divider--${i}`]:!0,[`divider--${this.orientation}`]:r&&this.hasText,[`divider--${this.size}`]:r&&!!this.size},o={};if(void 0!==this.orientationMargin&&r&&this.hasText){const i="number"==typeof this.orientationMargin?`${this.orientationMargin}px`:this.orientationMargin;"start"===this.orientation?o["--nuraly-divider-orientation-margin-left"]=i:"end"===this.orientation&&(o["--nuraly-divider-orientation-margin-right"]=i)}return e?t`<div class=${a(d)}></div>`:this.hasText?t`
+      <div class=${a(d)} style=${n(o)}>
+        <span class="divider__text">
+          <slot></slot>
+        </span>
+      </div>
+    `:t`<div class=${a(d)}></div>`}};s.styles=l,v([e({type:String})],s.prototype,"type",void 0),v([e({type:Boolean})],s.prototype,"dashed",void 0),v([e({type:String})],s.prototype,"variant",void 0),v([e({type:String})],s.prototype,"orientation",void 0),v([e({type:String,attribute:"orientation-margin"})],s.prototype,"orientationMargin",void 0),v([e({type:Boolean})],s.prototype,"plain",void 0),v([e({type:String})],s.prototype,"size",void 0),s=v([d("nr-divider")],s);export{s as NrDividerElement};

package/dist/src/components/divider/divider.component.d.ts

@@ -0,0 +1,90 @@
+import { LitElement } from "lit";
+import { DividerType, DividerOrientation, DividerVariant, DividerSize } from "./divider.types.js";
+declare const NrDividerElement_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;
+/**
+ * @element nr-divider
+ *
+ * @summary A divider line separates different content.
+ *
+ * @description
+ * The Divider component is used to divide sections of content or inline text.
+ * Based on Ant Design Divider component.
+ *
+ * @prop {DividerType} type - The direction type of divider (horizontal or vertical)
+ * @prop {boolean} dashed - Whether line is dashed (deprecated, use variant instead)
+ * @prop {DividerVariant} variant - Line style variant (solid, dashed, dotted)
+ * @prop {DividerOrientation} orientation - Position of title inside divider (start, center, end)
+ * @prop {string | number} orientationMargin - Margin between title and closest border
+ * @prop {boolean} plain - Divider text show as plain style
+ * @prop {DividerSize} size - Size of divider (only for horizontal: small, middle, large)
+ *
+ * @slot - The title/text content to display in the divider
+ *
+ * @cssprop --nuraly-divider-color - Border color
+ * @cssprop --nuraly-divider-text-color - Text color
+ * @cssprop --nuraly-divider-font-size - Font size for title
+ * @cssprop --nuraly-divider-margin - Vertical margin for horizontal divider
+ * @cssprop --nuraly-divider-orientation-margin - Margin between text and edge
+ *
+ * @example
+ * ```html
+ * <!-- Basic horizontal divider -->
+ * <nr-divider></nr-divider>
+ *
+ * <!-- Divider with text -->
+ * <nr-divider>Text</nr-divider>
+ *
+ * <!-- Vertical divider -->
+ * <nr-divider type="vertical"></nr-divider>
+ *
+ * <!-- Dashed divider with text -->
+ * <nr-divider variant="dashed" orientation="start">Left Text</nr-divider>
+ * ```
+ */
+export declare class NrDividerElement extends NrDividerElement_base {
+    static styles: import("lit").CSSResult;
+    /**
+     * The direction type of divider
+     * @type {DividerType}
+     */
+    type: DividerType;
+    /**
+     * Whether line is dashed (deprecated, use variant instead)
+     * @deprecated Use variant="dashed" instead
+     * @type {boolean}
+     */
+    dashed: boolean;
+    /**
+     * Line style variant
+     * @type {DividerVariant}
+     */
+    variant: DividerVariant;
+    /**
+     * Position of title inside divider
+     * @type {DividerOrientation}
+     */
+    orientation: DividerOrientation;
+    /**
+     * Margin between title and closest border
+     * Accepts string with units or number (defaults to px)
+     * @type {string | number}
+     */
+    orientationMargin?: string | number;
+    /**
+     * Divider text show as plain style
+     * @type {boolean}
+     */
+    plain: boolean;
+    /**
+     * Size of divider (only for horizontal)
+     * @type {DividerSize}
+     */
+    size?: DividerSize;
+    /**
+     * Check if divider has text content
+     */
+    private get hasText();
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=divider.component.d.ts.map

package/dist/src/components/divider/divider.component.js

@@ -0,0 +1,168 @@
+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 { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+import styles from "./divider.style.js";
+/**
+ * @element nr-divider
+ *
+ * @summary A divider line separates different content.
+ *
+ * @description
+ * The Divider component is used to divide sections of content or inline text.
+ * Based on Ant Design Divider component.
+ *
+ * @prop {DividerType} type - The direction type of divider (horizontal or vertical)
+ * @prop {boolean} dashed - Whether line is dashed (deprecated, use variant instead)
+ * @prop {DividerVariant} variant - Line style variant (solid, dashed, dotted)
+ * @prop {DividerOrientation} orientation - Position of title inside divider (start, center, end)
+ * @prop {string | number} orientationMargin - Margin between title and closest border
+ * @prop {boolean} plain - Divider text show as plain style
+ * @prop {DividerSize} size - Size of divider (only for horizontal: small, middle, large)
+ *
+ * @slot - The title/text content to display in the divider
+ *
+ * @cssprop --nuraly-divider-color - Border color
+ * @cssprop --nuraly-divider-text-color - Text color
+ * @cssprop --nuraly-divider-font-size - Font size for title
+ * @cssprop --nuraly-divider-margin - Vertical margin for horizontal divider
+ * @cssprop --nuraly-divider-orientation-margin - Margin between text and edge
+ *
+ * @example
+ * ```html
+ * <!-- Basic horizontal divider -->
+ * <nr-divider></nr-divider>
+ *
+ * <!-- Divider with text -->
+ * <nr-divider>Text</nr-divider>
+ *
+ * <!-- Vertical divider -->
+ * <nr-divider type="vertical"></nr-divider>
+ *
+ * <!-- Dashed divider with text -->
+ * <nr-divider variant="dashed" orientation="start">Left Text</nr-divider>
+ * ```
+ */
+let NrDividerElement = class NrDividerElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * The direction type of divider
+         * @type {DividerType}
+         */
+        this.type = "horizontal" /* DividerType.Horizontal */;
+        /**
+         * Whether line is dashed (deprecated, use variant instead)
+         * @deprecated Use variant="dashed" instead
+         * @type {boolean}
+         */
+        this.dashed = false;
+        /**
+         * Line style variant
+         * @type {DividerVariant}
+         */
+        this.variant = "solid" /* DividerVariant.Solid */;
+        /**
+         * Position of title inside divider
+         * @type {DividerOrientation}
+         */
+        this.orientation = "center" /* DividerOrientation.Center */;
+        /**
+         * Divider text show as plain style
+         * @type {boolean}
+         */
+        this.plain = true;
+    }
+    /**
+     * Check if divider has text content
+     */
+    get hasText() {
+        var _a;
+        const slot = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('slot');
+        const nodes = (slot === null || slot === void 0 ? void 0 : slot.assignedNodes({ flatten: true })) || [];
+        return nodes.some(node => {
+            var _a;
+            return node.nodeType === Node.TEXT_NODE && ((_a = node.textContent) === null || _a === void 0 ? void 0 : _a.trim()) ||
+                node.nodeType === Node.ELEMENT_NODE;
+        });
+    }
+    render() {
+        // Support deprecated dashed prop
+        const effectiveVariant = this.dashed ? "dashed" /* DividerVariant.Dashed */ : this.variant;
+        const isHorizontal = this.type === "horizontal" /* DividerType.Horizontal */;
+        const isVertical = this.type === "vertical" /* DividerType.Vertical */;
+        const classes = {
+            'divider': true,
+            'divider--horizontal': isHorizontal,
+            'divider--vertical': isVertical,
+            'divider--with-text': isHorizontal && this.hasText,
+            'divider--plain': this.plain,
+            [`divider--${effectiveVariant}`]: true,
+            [`divider--${this.orientation}`]: isHorizontal && this.hasText,
+            [`divider--${this.size}`]: isHorizontal && !!this.size
+        };
+        // Calculate orientation margin style
+        const orientationMarginStyle = {};
+        if (this.orientationMargin !== undefined && isHorizontal && this.hasText) {
+            const marginValue = typeof this.orientationMargin === 'number'
+                ? `${this.orientationMargin}px`
+                : this.orientationMargin;
+            if (this.orientation === "start" /* DividerOrientation.Start */) {
+                orientationMarginStyle['--nuraly-divider-orientation-margin-left'] = marginValue;
+            }
+            else if (this.orientation === "end" /* DividerOrientation.End */) {
+                orientationMarginStyle['--nuraly-divider-orientation-margin-right'] = marginValue;
+            }
+        }
+        // Vertical divider (no text support)
+        if (isVertical) {
+            return html `<div class=${classMap(classes)}></div>`;
+        }
+        // Horizontal divider without text
+        if (!this.hasText) {
+            return html `<div class=${classMap(classes)}></div>`;
+        }
+        // Horizontal divider with text
+        return html `
+      <div class=${classMap(classes)} style=${styleMap(orientationMarginStyle)}>
+        <span class="divider__text">
+          <slot></slot>
+        </span>
+      </div>
+    `;
+    }
+};
+NrDividerElement.styles = styles;
+__decorate([
+    property({ type: String })
+], NrDividerElement.prototype, "type", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrDividerElement.prototype, "dashed", void 0);
+__decorate([
+    property({ type: String })
+], NrDividerElement.prototype, "variant", void 0);
+__decorate([
+    property({ type: String })
+], NrDividerElement.prototype, "orientation", void 0);
+__decorate([
+    property({ type: String, attribute: 'orientation-margin' })
+], NrDividerElement.prototype, "orientationMargin", void 0);
+__decorate([
+    property({ type: Boolean })
+], NrDividerElement.prototype, "plain", void 0);
+__decorate([
+    property({ type: String })
+], NrDividerElement.prototype, "size", void 0);
+NrDividerElement = __decorate([
+    customElement('nr-divider')
+], NrDividerElement);
+export { NrDividerElement };
+//# sourceMappingURL=divider.component.js.map

package/dist/src/components/divider/divider.style.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult;
+export default _default;
+//# sourceMappingURL=divider.style.d.ts.map

package/dist/src/components/divider/divider.style.js

@@ -0,0 +1,139 @@
+import { css } from "lit";
+export default css `
+  :host {
+    display: block;
+    box-sizing: border-box;
+  }
+
+  :host([type="vertical"]) {
+    display: inline-flex;
+    align-self: stretch; /* Stretch to parent height in flex containers */
+    height: auto;
+  }
+
+  .divider {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    color: var(--nuraly-divider-text-color);
+    font-size: var(--nuraly-divider-font-size);
+    line-height: 1.5715;
+    list-style: none;
+    font-family: inherit;
+  }
+
+  /* Horizontal Divider */
+  .divider--horizontal {
+    display: flex;
+    clear: both;
+    width: 100%;
+    min-width: 100%;
+    margin: var(--nuraly-divider-margin-vertical, 10px) 0;
+    border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
+  }
+
+  /* Horizontal with text */
+  .divider--horizontal.divider--with-text {
+    display: flex;
+    align-items: center;
+    margin: var(--nuraly-divider-margin-vertical) 0;
+    color: var(--nuraly-divider-text-color);
+    font-weight: 500;
+    font-size: var(--nuraly-divider-font-size);
+    white-space: nowrap;
+    text-align: center;
+    border-block-start: 0;
+  }
+
+  .divider--horizontal.divider--with-text::before,
+  .divider--horizontal.divider--with-text::after {
+    position: relative;
+    width: 50%;
+    border-block-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
+    border-block-end: 0;
+    transform: translateY(50%);
+    content: '';
+  }
+
+  /* Text positioning */
+  .divider--start::before {
+    width: var(--nuraly-divider-orientation-margin-left, 5%);
+  }
+
+  .divider--start::after {
+    width: 95%;
+  }
+
+  .divider--end::before {
+    width: 95%;
+  }
+
+  .divider--end::after {
+    width: var(--nuraly-divider-orientation-margin-right, 5%);
+  }
+
+  /* Text wrapper */
+  .divider__text {
+    display: inline-block;
+    padding: 0 var(--nuraly-divider-text-padding, 1em);
+    color: var(--nuraly-divider-text-color, rgba(0, 0, 0, 0.88));
+    font-size: var(--nuraly-divider-font-size, 1rem);
+  }
+
+  /* Plain text style */
+  .divider--plain .divider__text {
+    font-weight: normal;
+  }
+
+  /* Vertical Divider */
+  .divider--vertical {
+    position: relative;
+    top: -0.06em;
+    display: inline-block;
+    height: 0.9em;
+    margin: 0 var(--nuraly-divider-margin-horizontal, 8px);
+    vertical-align: middle;
+    border-top: 0;
+    border-inline-start: 1px var(--nuraly-divider-variant-style, solid) var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
+  }
+
+  /* Full height vertical divider when in flex container */
+  :host([type="vertical"]) {
+    height: 100%;
+  }
+
+  :host([type="vertical"]) .divider--vertical {
+    height: 100%;
+    align-self: stretch;
+    top: 0;
+    vertical-align: top;
+    border-inline-start-color: var(--nuraly-divider-color, rgba(5, 5, 5, 0.3));
+  }
+
+  /* Variant styles */
+  .divider--solid {
+    --nuraly-divider-variant-style: solid;
+  }
+
+  .divider--dashed {
+    --nuraly-divider-variant-style: dashed;
+  }
+
+  .divider--dotted {
+    --nuraly-divider-variant-style: dotted;
+  }
+
+  /* Size variations (horizontal only) */
+  .divider--horizontal.divider--small {
+    margin: var(--nuraly-divider-margin-vertical-small) 0;
+  }
+
+  .divider--horizontal.divider--middle {
+    margin: var(--nuraly-divider-margin-vertical-middle) 0;
+  }
+
+  .divider--horizontal.divider--large {
+    margin: var(--nuraly-divider-margin-vertical-large) 0;
+  }
+`;
+//# sourceMappingURL=divider.style.js.map

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

@@ -0,0 +1,55 @@
+/**
+ * Divider Component Types
+ * Based on Ant Design Divider API
+ */
+/**
+ * Direction type of the divider
+ */
+export declare const enum DividerType {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+/**
+ * Position of title inside horizontal divider
+ */
+export declare const enum DividerOrientation {
+    Start = "start",
+    Center = "center",
+    End = "end"
+}
+/**
+ * Line style variant of the divider
+ */
+export declare const enum DividerVariant {
+    Solid = "solid",
+    Dashed = "dashed",
+    Dotted = "dotted"
+}
+/**
+ * Size of the divider (only for horizontal)
+ */
+export declare const enum DividerSize {
+    Small = "small",
+    Middle = "middle",
+    Large = "large"
+}
+/**
+ * Configuration interface for Divider component
+ */
+export interface DividerConfig {
+    /** The direction type of divider */
+    type?: DividerType;
+    /** Whether line is dashed (deprecated, use variant instead) */
+    dashed?: boolean;
+    /** Line style variant */
+    variant?: DividerVariant;
+    /** Position of title inside divider */
+    orientation?: DividerOrientation;
+    /** Margin between title and closest border */
+    orientationMargin?: string | number;
+    /** Divider text show as plain style */
+    plain?: boolean;
+    /** Size of divider (only for horizontal) */
+    size?: DividerSize;
+}
+//# sourceMappingURL=divider.types.d.ts.map

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

@@ -0,0 +1,6 @@
+/**
+ * Divider Component Types
+ * Based on Ant Design Divider API
+ */
+export {};
+//# sourceMappingURL=divider.types.js.map

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

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

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

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

package/dist/src/components/divider/react.d.ts

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

package/dist/src/components/divider/react.js

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