@nuraly/lumenui 0.1.0

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

@@ -0,0 +1,293 @@
+import{css as t,LitElement as e,html as o}from"lit";import{property as a,customElement as n}from"lit/decorators.js";import{classMap as i}from"lit/directives/class-map.js";import{styleMap as r}from"lit/directives/style-map.js";import{NuralyUIBaseMixin as s}from"@nuralyui/common/mixins";const l=t`
+  :host {
+    display: block;
+  }
+
+  .skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .skeleton-header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+  }
+
+  .skeleton-content {
+    flex: 1;
+  }
+
+  /* Avatar */
+  .skeleton-avatar {
+    flex-shrink: 0;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+  }
+
+  .skeleton-avatar--circle {
+    border-radius: 50%;
+  }
+
+  .skeleton-avatar--square {
+    border-radius: 4px;
+  }
+
+  .skeleton-avatar--small {
+    width: 32px;
+    height: 32px;
+  }
+
+  .skeleton-avatar--default {
+    width: 40px;
+    height: 40px;
+  }
+
+  .skeleton-avatar--large {
+    width: 48px;
+    height: 48px;
+  }
+
+  /* Title */
+  .skeleton-title {
+    height: 16px;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+    margin-bottom: 12px;
+  }
+
+  .skeleton-title--round {
+    border-radius: 8px;
+  }
+
+  /* Paragraph */
+  .skeleton-paragraph {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .skeleton-paragraph-line {
+    height: 16px;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+  }
+
+  .skeleton-paragraph-line--round {
+    border-radius: 8px;
+  }
+
+  /* Button */
+  .skeleton-button {
+    display: inline-block;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+  }
+
+  .skeleton-button--block {
+    display: block;
+    width: 100%;
+  }
+
+  .skeleton-button--circle {
+    border-radius: 50%;
+  }
+
+  .skeleton-button--round {
+    border-radius: 16px;
+  }
+
+  .skeleton-button--square {
+    border-radius: 4px;
+  }
+
+  .skeleton-button--small {
+    width: 64px;
+    height: 24px;
+  }
+
+  .skeleton-button--default {
+    width: 80px;
+    height: 32px;
+  }
+
+  .skeleton-button--large {
+    width: 96px;
+    height: 40px;
+  }
+
+  /* Input */
+  .skeleton-input {
+    display: block;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+  }
+
+  .skeleton-input--small {
+    height: 24px;
+  }
+
+  .skeleton-input--default {
+    height: 32px;
+  }
+
+  .skeleton-input--large {
+    height: 40px;
+  }
+
+  .skeleton-input--block {
+    width: 100%;
+  }
+
+  /* Image */
+  .skeleton-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--nuraly-skeleton-background, rgba(0, 0, 0, 0.06));
+    border-radius: 4px;
+    width: 100%;
+    height: 200px;
+  }
+
+  .skeleton-image-icon {
+    font-size: 48px;
+    color: var(--nuraly-skeleton-icon-color, rgba(0, 0, 0, 0.15));
+  }
+
+  /* Active animation */
+  @keyframes skeleton-loading {
+    0% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0 50%;
+    }
+  }
+
+  .skeleton--active .skeleton-avatar,
+  .skeleton--active .skeleton-title,
+  .skeleton--active .skeleton-paragraph-line,
+  .skeleton--active .skeleton-button,
+  .skeleton--active .skeleton-input,
+  .skeleton--active .skeleton-image {
+    background: linear-gradient(
+      90deg,
+      var(--nuraly-skeleton-gradient-from, rgba(0, 0, 0, 0.06)) 25%,
+      var(--nuraly-skeleton-gradient-to, rgba(0, 0, 0, 0.15)) 37%,
+      var(--nuraly-skeleton-gradient-from, rgba(0, 0, 0, 0.06)) 63%
+    );
+    background-size: 400% 100%;
+    animation: skeleton-loading 1.4s ease infinite;
+  }
+
+  /* Dark theme support */
+  :host([theme='carbon-dark']) .skeleton-avatar,
+  :host([theme='carbon-dark']) .skeleton-title,
+  :host([theme='carbon-dark']) .skeleton-paragraph-line,
+  :host([theme='carbon-dark']) .skeleton-button,
+  :host([theme='carbon-dark']) .skeleton-input,
+  :host([theme='carbon-dark']) .skeleton-image {
+    background: rgba(255, 255, 255, 0.08);
+  }
+
+  :host([theme='carbon-dark']) .skeleton-image-icon {
+    color: rgba(255, 255, 255, 0.15);
+  }
+
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-avatar,
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-title,
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-paragraph-line,
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-button,
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-input,
+  :host([theme='carbon-dark']) .skeleton--active .skeleton-image {
+    background: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.08) 25%,
+      rgba(255, 255, 255, 0.15) 37%,
+      rgba(255, 255, 255, 0.08) 63%
+    );
+    background-size: 400% 100%;
+  }
+
+  /* Content wrapper for loading state */
+  .skeleton-wrapper {
+    display: block;
+  }
+
+  .skeleton-wrapper--hidden {
+    display: none;
+  }
+`
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */;var d=function(t,e,o,a){for(var n,i=arguments.length,r=i<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,o):a,s=t.length-1;s>=0;s--)(n=t[s])&&(r=(i<3?n(r):i>3?n(e,o,r):n(e,o))||r);return i>3&&r&&Object.defineProperty(e,o,r),r};let h=class extends(s(e)){constructor(){super(...arguments),this.active=!1,this.avatar=!1,this.avatarConfig={},this.loading=!0,this.paragraph=!0,this.paragraphConfig={},this.round=!1,this.showTitle=!0,this.titleConfig={},this.buttonConfig={},this.inputConfig={},this.imageConfig={},this.block=!1,this.shape="default",this.size="default"}renderAvatar(){const t="object"==typeof this.avatar?this.avatar:this.avatarConfig,e=t.shape||"circle",a=t.size||"default",n="number"==typeof a?"":a,s="number"==typeof a?{width:`${a}px`,height:`${a}px`}:{};return o`
+      <div
+        class=${i({"skeleton-avatar":!0,[`skeleton-avatar--${e}`]:!0,[`skeleton-avatar--${n}`]:!!n})}
+        style=${r(s)}></div>
+    `}renderTitle(){const t=("object"==typeof this.showTitle?this.showTitle:this.titleConfig).width,e=t?{width:"number"==typeof t?`${t}px`:t}:{width:"38%"};return o`
+      <div
+        class=${i({"skeleton-title":!0,"skeleton-title--round":this.round})}
+        style=${r(e)}></div>
+    `}renderParagraph(){const t="object"==typeof this.paragraph?this.paragraph:this.paragraphConfig,e=t.rows||3,a=t.width;return o`
+      <div class="skeleton-paragraph">
+        ${Array.from({length:e},(t,n)=>o`
+          <div
+            class=${i({"skeleton-paragraph-line":!0,"skeleton-paragraph-line--round":this.round})}
+            style=${r((t=>{if(Array.isArray(a)){const e=a[t];return e?{width:"number"==typeof e?`${e}px`:e}:{}}return t===e-1?a?{width:"number"==typeof a?`${a}px`:a}:{width:"61%"}:{}})(n))}></div>
+        `)}
+      </div>
+    `}renderButton(){const t=this.buttonConfig,e=t.shape||this.shape,a=t.size||this.size,n=void 0!==t.block?t.block:this.block;return o`
+      <div
+        class=${i({"skeleton-button":!0,[`skeleton-button--${e}`]:!0,[`skeleton-button--${a}`]:!0,"skeleton-button--block":n})}></div>
+    `}renderInput(){const t=this.inputConfig,e=t.size||this.size,a=void 0!==t.block?t.block:this.block;return o`
+      <div
+        class=${i({"skeleton-input":!0,[`skeleton-input--${e}`]:!0,"skeleton-input--block":a})}></div>
+    `}renderImage(){return o`
+      <div class="skeleton-image">
+        <svg
+          class="skeleton-image-icon"
+          viewBox="0 0 1024 1024"
+          xmlns="http://www.w3.org/2000/svg"
+          width="48"
+          height="48">
+          <path
+            d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zM338 304c35.3 0 64 28.7 64 64s-28.7 64-64 64-64-28.7-64-64 28.7-64 64-64zm513.9 437.1c-2.1 2.1-4.5 3.8-7 5.1-5.2 2.7-11.1 4.1-17.1 4.1H196.2c-6 0-11.9-1.4-17.1-4.1-2.5-1.3-4.9-3-7-5.1-4.4-4.4-7.1-10.5-7.1-17.1 0-3.7.8-7.4 2.5-10.8 1.6-3.4 4.1-6.4 7.1-8.8l112.3-97.5c8.8-7.6 22.1-7.6 30.9 0l148.5 129 203.9-177c8.8-7.6 22.1-7.6 30.9 0l179.8 156.1c3 2.6 5.5 5.7 7.1 9.3 1.7 3.7 2.5 7.6 2.5 11.6-.1 6.6-2.8 12.7-7.2 17.1z"
+            fill="currentColor" />
+        </svg>
+      </div>
+    `}renderStandaloneElement(){switch(this.element){case"button":return this.renderButton();case"input":return this.renderInput();case"image":return this.renderImage();case"avatar":return this.renderAvatar();default:return o``}}renderSkeleton(){return this.element?o`
+        <div
+          class=${i({skeleton:!0,"skeleton--active":this.active||"avatar"===this.element&&!!this.avatarConfig.active})}>
+          ${this.renderStandaloneElement()}
+        </div>
+      `:o`
+      <div
+        class=${i({skeleton:!0,"skeleton--active":this.active})}>
+        ${this.avatar||this.showTitle||this.paragraph?o`
+              ${this.avatar?o`
+                    <div class="skeleton-header">
+                      ${this.renderAvatar()}
+                      ${this.showTitle||this.paragraph?o`
+                            <div class="skeleton-content">
+                              ${this.showTitle?this.renderTitle():""}
+                              ${this.paragraph?this.renderParagraph():""}
+                            </div>
+                          `:""}
+                    </div>
+                  `:o`
+                    <div class="skeleton-content">
+                      ${this.showTitle?this.renderTitle():""}
+                      ${this.paragraph?this.renderParagraph():""}
+                    </div>
+                  `}
+            `:""}
+      </div>
+    `}render(){return this.loading?this.renderSkeleton():o`
+        <div class="skeleton-wrapper">
+          <slot name="content"><slot></slot></slot>
+        </div>
+      `}};h.styles=l,d([a({type:Boolean})],h.prototype,"active",void 0),d([a({type:Boolean})],h.prototype,"avatar",void 0),d([a({type:Object,attribute:"avatar-config"})],h.prototype,"avatarConfig",void 0),d([a({type:Boolean})],h.prototype,"loading",void 0),d([a({type:Boolean})],h.prototype,"paragraph",void 0),d([a({type:Object,attribute:"paragraph-config"})],h.prototype,"paragraphConfig",void 0),d([a({type:Boolean})],h.prototype,"round",void 0),d([a({type:Boolean,attribute:"show-title"})],h.prototype,"showTitle",void 0),d([a({type:Object,attribute:"title-config"})],h.prototype,"titleConfig",void 0),d([a({type:String})],h.prototype,"element",void 0),d([a({type:Object,attribute:"button-config"})],h.prototype,"buttonConfig",void 0),d([a({type:Object,attribute:"input-config"})],h.prototype,"inputConfig",void 0),d([a({type:Object,attribute:"image-config"})],h.prototype,"imageConfig",void 0),d([a({type:Boolean})],h.prototype,"block",void 0),d([a({type:String})],h.prototype,"shape",void 0),d([a({type:String})],h.prototype,"size",void 0),h=d([n("nr-skeleton")],h);export{h as NrSkeletonElement};

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,165 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement } from 'lit';
+import { SkeletonShape, SkeletonSize, SkeletonElementType, SkeletonAvatarConfig, SkeletonTitleConfig, SkeletonParagraphConfig, SkeletonButtonConfig, SkeletonInputConfig, SkeletonImageConfig } from './skeleton.types.js';
+declare const NrSkeletonElement_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;
+/**
+ * # Skeleton Component
+ *
+ * Provides a placeholder while content is loading, or to visualize content that doesn't exist yet.
+ * Improves perceived performance and user experience during data fetching.
+ *
+ * ## Features
+ * - Multiple skeleton elements (Avatar, Title, Paragraph, Button, Input, Image)
+ * - Active animation effect
+ * - Customizable shapes (circle, square, round)
+ * - Configurable sizes (small, default, large)
+ * - Loading state management
+ * - Theme-aware styling
+ * - Flexible configuration options
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic skeleton -->
+ * <nr-skeleton></nr-skeleton>
+ *
+ * <!-- With active animation -->
+ * <nr-skeleton active></nr-skeleton>
+ *
+ * <!-- Complex skeleton with avatar -->
+ * <nr-skeleton avatar active></nr-skeleton>
+ *
+ * <!-- Loading state with content -->
+ * <nr-skeleton loading>
+ *   <div slot="content">
+ *     <h3>Article Title</h3>
+ *     <p>Article content goes here...</p>
+ *   </div>
+ * </nr-skeleton>
+ *
+ * <!-- Skeleton button -->
+ * <nr-skeleton element="button" active></nr-skeleton>
+ *
+ * <!-- Skeleton input -->
+ * <nr-skeleton element="input" block></nr-skeleton>
+ * ```
+ *
+ * @element nr-skeleton
+ *
+ * @slot content - Content to show when loading is false
+ *
+ * @cssproperty --nuraly-skeleton-background - Background color of skeleton elements
+ * @cssproperty --nuraly-skeleton-gradient-from - Start color of active animation gradient
+ * @cssproperty --nuraly-skeleton-gradient-to - End color of active animation gradient
+ * @cssproperty --nuraly-skeleton-icon-color - Color of image placeholder icon
+ */
+export declare class NrSkeletonElement extends NrSkeletonElement_base {
+    static styles: import("lit").CSSResult;
+    /**
+     * Show animation effect
+     */
+    active: boolean;
+    /**
+     * Show avatar placeholder
+     */
+    avatar: boolean;
+    /**
+     * Avatar configuration
+     */
+    avatarConfig: SkeletonAvatarConfig;
+    /**
+     * Display the skeleton when true
+     */
+    loading: boolean;
+    /**
+     * Show paragraph placeholder
+     */
+    paragraph: boolean;
+    /**
+     * Paragraph configuration
+     */
+    paragraphConfig: SkeletonParagraphConfig;
+    /**
+     * Show paragraph and title radius when true
+     */
+    round: boolean;
+    /**
+     * Show title placeholder
+     */
+    showTitle: boolean;
+    /**
+     * Title configuration
+     */
+    titleConfig: SkeletonTitleConfig;
+    /**
+     * Element type for standalone skeleton elements
+     */
+    element?: SkeletonElementType;
+    /**
+     * Button configuration
+     */
+    buttonConfig: SkeletonButtonConfig;
+    /**
+     * Input configuration
+     */
+    inputConfig: SkeletonInputConfig;
+    /**
+     * Image configuration
+     */
+    imageConfig: SkeletonImageConfig;
+    /**
+     * Block style for button/input
+     */
+    block: boolean;
+    /**
+     * Shape for standalone elements
+     */
+    shape: SkeletonShape;
+    /**
+     * Size for standalone elements
+     */
+    size: SkeletonSize;
+    /**
+     * Render avatar skeleton
+     */
+    private renderAvatar;
+    /**
+     * Render title skeleton
+     */
+    private renderTitle;
+    /**
+     * Render paragraph skeleton
+     */
+    private renderParagraph;
+    /**
+     * Render button skeleton
+     */
+    private renderButton;
+    /**
+     * Render input skeleton
+     */
+    private renderInput;
+    /**
+     * Render image skeleton
+     */
+    private renderImage;
+    /**
+     * Render standalone element
+     */
+    private renderStandaloneElement;
+    /**
+     * Render full skeleton
+     */
+    private renderSkeleton;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-skeleton': NrSkeletonElement;
+    }
+}
+export {};
+//# sourceMappingURL=skeleton.component.d.ts.map