@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,69 @@
+import{css as r,LitElement as a,html as o}from"lit";import{property as d,customElement as c}from"lit/decorators.js";import{classMap as n}from"lit/directives/class-map.js";import{NuralyUIBaseMixin as l}from"@nuralyui/common/mixins";const e=r`
+  :host {
+    display: block;
+    color: var(--nuraly-color-text);
+    background-color: var(--nuraly-color-background);
+    font-family: var(--nuraly-card-font-family);
+  }
+
+  .card {
+    background-color: var(--nuraly-card-background-color);
+    border-radius: var(--nuraly-card-border-radius);
+    border: var(--nuraly-card-border);
+    overflow: hidden;
+    transition: var(--nuraly-card-transition);
+    box-shadow: var(--nuraly-card-shadow);
+  }
+
+  .card:hover {
+    cursor: var(--nuraly-card-cursor);
+    box-shadow: var(--nuraly-card-hover-shadow);
+    background-color: var(--nuraly-card-hover-background-color);
+    border-color: var(--nuraly-card-hover-border-color);
+  }
+
+  .card__header {
+    font-weight: var(--nuraly-card-header-font-weight);
+    border-bottom: var(--nuraly-card-header-border-bottom);
+    padding: var(--nuraly-card-padding);
+    background-color: var(--nuraly-card-header-background-color);
+    font-size: var(--nuraly-card-font-size);
+    color: var(--nuraly-card-header-color);
+    line-height: var(--nuraly-card-line-height);
+  }
+
+  .card__content {
+    padding: var(--nuraly-card-padding);
+    color: var(--nuraly-card-content-color);
+    font-size: var(--nuraly-card-font-size);
+    line-height: var(--nuraly-card-line-height);
+  }
+
+  /* Size variants */
+  .card--small .card__header,
+  .card--small .card__content {
+    padding: var(--nuraly-card-small-padding);
+    font-size: var(--nuraly-card-small-font-size);
+  }
+
+  .card--large .card__header,
+  .card--large .card__content {
+    padding: var(--nuraly-card-large-padding);
+    font-size: var(--nuraly-card-large-font-size);
+  }
+
+  /* Focus styles for accessibility */
+  .card:focus-within {
+    outline: var(--nuraly-card-focus-outline);
+    outline-offset: var(--nuraly-card-focus-offset);
+  }
+`;var t=function(r,a,o,d){for(var c,n=arguments.length,l=n<3?a:null===d?d=Object.getOwnPropertyDescriptor(a,o):d,e=r.length-1;e>=0;e--)(c=r[e])&&(l=(n<3?c(l):n>3?c(a,o,l):c(a,o))||l);return n>3&&l&&Object.defineProperty(a,o,l),l};let i=class extends(l(a)){constructor(){super(...arguments),this.header="",this.size="default"}render(){return o`
+      <div
+        class="card ${n({"card--small":"small"===this.size,"card--large":"large"===this.size})}"
+      >
+        ${this.header?o`<div class="card__header">${this.header}</div>`:""}
+        <div class="card__content">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    `}};i.styles=e,t([d({type:String})],i.prototype,"header",void 0),t([d({type:String})],i.prototype,"size",void 0),i=t([c("nr-card")],i);export{i as NrCardElement};

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

@@ -0,0 +1,30 @@
+import { LitElement } from 'lit';
+import { CardSize } from './card.types.js';
+declare const NrCardElement_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;
+/**
+ * Card component for displaying content in a structured container
+ *
+ * @element nr-card
+ * @slot content - Content to be displayed in the card body
+ *
+ * @example
+ * ```html
+ * <nr-card header="Card Title" size="medium">
+ *   <div slot="content">Card content goes here</div>
+ * </nr-card>
+ * ```
+ */
+export declare class NrCardElement extends NrCardElement_base {
+    static styles: import("lit").CSSResult;
+    /**
+     * Header text displayed at the top of the card
+     */
+    header: string;
+    /**
+     * Size variant of the card
+     */
+    size: CardSize;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=card.component.d.ts.map

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

@@ -0,0 +1,64 @@
+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 './card.style.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { NuralyUIBaseMixin } from '@nuralyui/common/mixins';
+/**
+ * Card component for displaying content in a structured container
+ *
+ * @element nr-card
+ * @slot content - Content to be displayed in the card body
+ *
+ * @example
+ * ```html
+ * <nr-card header="Card Title" size="medium">
+ *   <div slot="content">Card content goes here</div>
+ * </nr-card>
+ * ```
+ */
+let NrCardElement = class NrCardElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Header text displayed at the top of the card
+         */
+        this.header = '';
+        /**
+         * Size variant of the card
+         */
+        this.size = "default" /* CardSize.Default */;
+    }
+    render() {
+        return html `
+      <div
+        class="card ${classMap({
+            'card--small': this.size === "small" /* CardSize.Small */,
+            'card--large': this.size === "large" /* CardSize.Large */
+        })}"
+      >
+        ${this.header ? html `<div class="card__header">${this.header}</div>` : ''}
+        <div class="card__content">
+          <slot name="content"></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+NrCardElement.styles = styles;
+__decorate([
+    property({ type: String })
+], NrCardElement.prototype, "header", void 0);
+__decorate([
+    property({ type: String })
+], NrCardElement.prototype, "size", void 0);
+NrCardElement = __decorate([
+    customElement('nr-card')
+], NrCardElement);
+export { NrCardElement };
+//# sourceMappingURL=card.component.js.map

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

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=card.style.d.ts.map

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

@@ -0,0 +1,62 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+    color: var(--nuraly-color-text);
+    background-color: var(--nuraly-color-background);
+    font-family: var(--nuraly-card-font-family);
+  }
+
+  .card {
+    background-color: var(--nuraly-card-background-color);
+    border-radius: var(--nuraly-card-border-radius);
+    border: var(--nuraly-card-border);
+    overflow: hidden;
+    transition: var(--nuraly-card-transition);
+    box-shadow: var(--nuraly-card-shadow);
+  }
+
+  .card:hover {
+    cursor: var(--nuraly-card-cursor);
+    box-shadow: var(--nuraly-card-hover-shadow);
+    background-color: var(--nuraly-card-hover-background-color);
+    border-color: var(--nuraly-card-hover-border-color);
+  }
+
+  .card__header {
+    font-weight: var(--nuraly-card-header-font-weight);
+    border-bottom: var(--nuraly-card-header-border-bottom);
+    padding: var(--nuraly-card-padding);
+    background-color: var(--nuraly-card-header-background-color);
+    font-size: var(--nuraly-card-font-size);
+    color: var(--nuraly-card-header-color);
+    line-height: var(--nuraly-card-line-height);
+  }
+
+  .card__content {
+    padding: var(--nuraly-card-padding);
+    color: var(--nuraly-card-content-color);
+    font-size: var(--nuraly-card-font-size);
+    line-height: var(--nuraly-card-line-height);
+  }
+
+  /* Size variants */
+  .card--small .card__header,
+  .card--small .card__content {
+    padding: var(--nuraly-card-small-padding);
+    font-size: var(--nuraly-card-small-font-size);
+  }
+
+  .card--large .card__header,
+  .card--large .card__content {
+    padding: var(--nuraly-card-large-padding);
+    font-size: var(--nuraly-card-large-font-size);
+  }
+
+  /* Focus styles for accessibility */
+  .card:focus-within {
+    outline: var(--nuraly-card-focus-outline);
+    outline-offset: var(--nuraly-card-focus-offset);
+  }
+`;
+//# sourceMappingURL=card.style.js.map

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

@@ -0,0 +1,17 @@
+/**
+ * Card size variants
+ */
+export declare const enum CardSize {
+    Small = "small",
+    Default = "default",
+    Large = "large"
+}
+/**
+ * Card configuration interface
+ */
+export interface CardConfig {
+    header?: string;
+    size?: CardSize;
+    clickable?: boolean;
+}
+//# sourceMappingURL=card.types.d.ts.map

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=card.types.js.map

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { NrCardElement } from './card.component.js';
+export declare const NrCard: import("@lit-labs/react").ReactWebComponent<NrCardElement, {
+    click: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

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

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

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

@@ -0,0 +1,96 @@
+import{css as t,LitElement as o,html as s,nothing as e}from"lit";import{property as i,queryAssignedElements as r,state as l,customElement as n}from"lit/decorators.js";import{repeat as a}from"lit/directives/repeat.js";const c=t`
+  :host {
+    position: relative;
+  }
+
+  .carousel {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  ::slotted(.carousel-item-hidden) {
+    position: absolute;
+    opacity: 0;
+  }
+  ::slotted(:not(.carousel-item-hidden)) {
+    opacity: 1;
+    transition: opacity 0.5s ease;
+  }
+
+  .controls {
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .button-control {
+    --nuraly-button-ghost-text-color: grey;
+    --nuraly-button-ghost-active-border-color: transparent;
+    --nuraly-button-ghost-hover-background-color: transparent;
+    --nuraly-button-ghost-hover-border-color: transparent;
+  }
+
+  .dot {
+    height: 8px;
+    width: 8px;
+    margin: 0 5px;
+    background-color: var(--carousel-dot-background-color);
+    display: inline-block;
+    cursor: pointer;
+    opacity: 0.4;
+  }
+
+  .dot.active {
+    background-color: var(--carousel-dot-active-background-color);
+    opacity: 0.9;
+  }
+
+  :host {
+    --carousel-dot-background-color: #bebebe;
+    --carousel-dot-active-background-color: gray;
+  }
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --carousel-dot-background-color: gray;
+      --carousel-dot-active-background-color: lightgray;
+      .button-control {
+        --nuraly-button-ghost-text-color: #ffffff;
+      }
+    }
+  }
+`;var d=function(t,o,s,e){for(var i,r=arguments.length,l=r<3?o:null===e?e=Object.getOwnPropertyDescriptor(o,s):e,n=t.length-1;n>=0;n--)(i=t[n])&&(l=(r<3?i(l):r>3?i(o,s,l):i(o,s))||l);return r>3&&l&&Object.defineProperty(o,s,l),l};let h=class extends o{constructor(){super(...arguments),this.currentIndex=0,this.autoPlay=!1,this.autoplaySpeed=3e3,this.intervalId=null}firstUpdated(){this.displayedElements=this.slideElements.map((t,o)=>(o!==this.currentIndex&&t.classList.add("carousel-item-hidden"),t)),this.autoPlay&&this.startAutoPlay()}startAutoPlay(){this.intervalId=window.setInterval(()=>{this.next()},this.autoplaySpeed)}stopAutoPlay(){this.intervalId&&(clearInterval(this.intervalId),this.intervalId=null)}next(){this.displayedElements[this.currentIndex].classList.add("carousel-item-hidden"),this.displayedElements.length-1===this.currentIndex?this.currentIndex=0:this.currentIndex++,this.displayedElements[this.currentIndex].classList.remove("carousel-item-hidden")}prev(){this.displayedElements[this.currentIndex].classList.add("carousel-item-hidden"),0===this.currentIndex?this.currentIndex=this.displayedElements.length-1:this.currentIndex--,this.displayedElements[this.currentIndex].classList.remove("carousel-item-hidden")}goTo(t){this.displayedElements[this.currentIndex].classList.add("carousel-item-hidden"),this.currentIndex=t,this.displayedElements[this.currentIndex].classList.remove("carousel-item-hidden")}disconnectedCallback(){super.disconnectedCallback(),this.stopAutoPlay()}render(){var t;return s`
+      <div class="carousel">
+        <slot></slot>
+        ${this.autoPlay?e:s`
+                <div class="controls">
+                  <nr-button
+                    @click="${this.prev}"
+                    type="ghost"
+                    size="small"
+                    class="button-control"
+                    .icon="${["chevron-left"]}"
+                  ></nr-button>
+                  <nr-button
+                    @click="${this.next}"
+                    type="ghost"
+                    size="small"
+                    class="button-control"
+                    .icon="${["chevron-right"]}"
+                  ></nr-button>
+                </div>
+              `}
+
+           <div class="dots">
+          ${a(Array.from({length:null===(t=this.displayedElements)||void 0===t?void 0:t.length}),(t,o)=>s`
+              <span
+                class="dot ${o===this.currentIndex?"active":""}"
+                @click="${()=>this.goTo(o)}"
+              ></span>
+            `)}
+        </div
+      </div>
+    `}};h.styles=c,d([i({type:Number})],h.prototype,"currentIndex",void 0),d([i({type:Boolean})],h.prototype,"autoPlay",void 0),d([i({type:Number})],h.prototype,"autoplaySpeed",void 0),d([r()],h.prototype,"slideElements",void 0),d([l()],h.prototype,"displayedElements",void 0),h=d([n("hy-carousel")],h);export{h as CarouselComponent};

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

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+export declare class CarouselComponent extends LitElement {
+    static styles: import("lit").CSSResult;
+    currentIndex: number;
+    autoPlay: boolean;
+    autoplaySpeed: number;
+    private slideElements;
+    private displayedElements;
+    private intervalId;
+    firstUpdated(): void;
+    startAutoPlay(): void;
+    stopAutoPlay(): void;
+    next(): void;
+    prev(): void;
+    goTo(index: number): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=carousel.component.d.ts.map

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

@@ -0,0 +1,128 @@
+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, nothing } from 'lit';
+import { styles } from './carousel.style.js';
+import { customElement, property, queryAssignedElements, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+let CarouselComponent = class CarouselComponent extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.currentIndex = 0;
+        this.autoPlay = false;
+        this.autoplaySpeed = 3000;
+        this.intervalId = null;
+    }
+    firstUpdated() {
+        this.displayedElements = this.slideElements.map((element, index) => {
+            if (index !== this.currentIndex) {
+                element.classList.add('carousel-item-hidden');
+            }
+            return element;
+        });
+        if (this.autoPlay) {
+            this.startAutoPlay();
+        }
+    }
+    startAutoPlay() {
+        this.intervalId = window.setInterval(() => {
+            this.next();
+        }, this.autoplaySpeed);
+    }
+    stopAutoPlay() {
+        if (this.intervalId) {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+    }
+    next() {
+        this.displayedElements[this.currentIndex].classList.add('carousel-item-hidden');
+        if (this.displayedElements.length - 1 === this.currentIndex) {
+            this.currentIndex = 0;
+        }
+        else {
+            this.currentIndex++;
+        }
+        this.displayedElements[this.currentIndex].classList.remove('carousel-item-hidden');
+    }
+    prev() {
+        this.displayedElements[this.currentIndex].classList.add('carousel-item-hidden');
+        if (this.currentIndex === 0) {
+            this.currentIndex = this.displayedElements.length - 1;
+        }
+        else {
+            this.currentIndex--;
+        }
+        this.displayedElements[this.currentIndex].classList.remove('carousel-item-hidden');
+    }
+    goTo(index) {
+        this.displayedElements[this.currentIndex].classList.add('carousel-item-hidden');
+        this.currentIndex = index;
+        this.displayedElements[this.currentIndex].classList.remove('carousel-item-hidden');
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.stopAutoPlay();
+    }
+    render() {
+        var _a;
+        return html `
+      <div class="carousel">
+        <slot></slot>
+        ${!this.autoPlay
+            ? html `
+                <div class="controls">
+                  <nr-button
+                    @click="${this.prev}"
+                    type="ghost"
+                    size="small"
+                    class="button-control"
+                    .icon="${['chevron-left']}"
+                  ></nr-button>
+                  <nr-button
+                    @click="${this.next}"
+                    type="ghost"
+                    size="small"
+                    class="button-control"
+                    .icon="${['chevron-right']}"
+                  ></nr-button>
+                </div>
+              `
+            : nothing}
+
+           <div class="dots">
+          ${repeat(Array.from({ length: (_a = this.displayedElements) === null || _a === void 0 ? void 0 : _a.length }), (_, index) => html `
+              <span
+                class="dot ${index === this.currentIndex ? 'active' : ''}"
+                @click="${() => this.goTo(index)}"
+              ></span>
+            `)}
+        </div
+      </div>
+    `;
+    }
+};
+CarouselComponent.styles = styles;
+__decorate([
+    property({ type: Number })
+], CarouselComponent.prototype, "currentIndex", void 0);
+__decorate([
+    property({ type: Boolean })
+], CarouselComponent.prototype, "autoPlay", void 0);
+__decorate([
+    property({ type: Number })
+], CarouselComponent.prototype, "autoplaySpeed", void 0);
+__decorate([
+    queryAssignedElements()
+], CarouselComponent.prototype, "slideElements", void 0);
+__decorate([
+    state()
+], CarouselComponent.prototype, "displayedElements", void 0);
+CarouselComponent = __decorate([
+    customElement('hy-carousel')
+], CarouselComponent);
+export { CarouselComponent };
+//# sourceMappingURL=carousel.component.js.map

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

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=carousel.style.d.ts.map

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

@@ -0,0 +1,68 @@
+import { css } from 'lit';
+const carouselStyles = css `
+  :host {
+    position: relative;
+  }
+
+  .carousel {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  ::slotted(.carousel-item-hidden) {
+    position: absolute;
+    opacity: 0;
+  }
+  ::slotted(:not(.carousel-item-hidden)) {
+    opacity: 1;
+    transition: opacity 0.5s ease;
+  }
+
+  .controls {
+    position: absolute;
+    width: 100%;
+    top: 50%;
+    display: flex;
+    justify-content: space-between;
+  }
+  .button-control {
+    --nuraly-button-ghost-text-color: grey;
+    --nuraly-button-ghost-active-border-color: transparent;
+    --nuraly-button-ghost-hover-background-color: transparent;
+    --nuraly-button-ghost-hover-border-color: transparent;
+  }
+
+  .dot {
+    height: 8px;
+    width: 8px;
+    margin: 0 5px;
+    background-color: var(--carousel-dot-background-color);
+    display: inline-block;
+    cursor: pointer;
+    opacity: 0.4;
+  }
+
+  .dot.active {
+    background-color: var(--carousel-dot-active-background-color);
+    opacity: 0.9;
+  }
+
+  :host {
+    --carousel-dot-background-color: #bebebe;
+    --carousel-dot-active-background-color: gray;
+  }
+  @media (prefers-color-scheme: dark) {
+    :host {
+      --carousel-dot-background-color: gray;
+      --carousel-dot-active-background-color: lightgray;
+      .button-control {
+        --nuraly-button-ghost-text-color: #ffffff;
+      }
+    }
+  }
+`;
+export const styles = carouselStyles;
+//# sourceMappingURL=carousel.style.js.map

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

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

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

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

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

@@ -0,0 +1,5 @@
+import { CarouselComponent } from './carousel.component.js';
+export declare const HyCarousel: import("@lit-labs/react").ReactWebComponent<CarouselComponent, {
+    slideChange: string;
+}>;
+//# sourceMappingURL=react.d.ts.map

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

@@ -0,0 +1,12 @@
+import { createComponent } from '@lit-labs/react';
+import * as React from 'react';
+import { CarouselComponent } from './carousel.component.js';
+export const HyCarousel = createComponent({
+    tagName: 'hy-carousel',
+    elementClass: CarouselComponent,
+    react: React,
+    events: {
+        slideChange: 'slide-change',
+    },
+});
+//# sourceMappingURL=react.js.map