@ctrliq/quantic-components 1.65.0 → 1.67.0

package/dist/skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from './skeleton.component';

package/dist/skeleton/index.js

@@ -0,0 +1 @@
+export * from './skeleton.component';

package/dist/skeleton/index.stories.d.ts

@@ -0,0 +1,41 @@
+interface Args {
+    cols?: number;
+    rows?: number;
+    delay?: number;
+}
+declare const _default: {
+    title: string;
+    component: string;
+    tags: string[];
+    argTypes: {
+        cols: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+            };
+            description: string;
+        };
+        rows: {
+            control: {
+                type: string;
+                min: number;
+            };
+            description: string;
+        };
+        delay: {
+            control: {
+                type: string;
+                min: number;
+                step: number;
+            };
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: import("../shared/story").StoryObject<Args>;
+export declare const HalfWidth: import("../shared/story").StoryObject<Args>;
+export declare const Tall: import("../shared/story").StoryObject<Args>;
+export declare const Narrow: import("../shared/story").StoryObject<Args>;
+export declare const Staggered: import("../shared/story").StoryObject<{}>;

package/dist/skeleton/index.stories.js

@@ -0,0 +1,35 @@
+import { story } from '../shared/story';
+export default {
+    title: 'Components/Feedback/Skeleton',
+    component: 'quantic-skeleton',
+    tags: ['autodocs'],
+    argTypes: {
+        cols: {
+            control: { type: 'number', min: 1, max: 12 },
+            description: 'Width as a fraction of 12 columns (1–12)',
+        },
+        rows: {
+            control: { type: 'number', min: 1 },
+            description: 'Height as a multiple of 1em',
+        },
+        delay: {
+            control: { type: 'number', min: 0, step: 0.1 },
+            description: 'Animation delay in seconds',
+        },
+    },
+};
+const base = story({ args: {} }).render(({ html, cols, rows, delay }) => html `
+    <quantic-skeleton cols=${cols} rows=${rows} delay=${delay}></quantic-skeleton>
+  `);
+export const Default = base;
+export const HalfWidth = base.override({ cols: 6 });
+export const Tall = base.override({ rows: 7 });
+export const Narrow = base.override({ cols: 4, rows: 2 });
+export const Staggered = story({ args: {} }).render(({ html }) => html `
+  <div style="display: flex; flex-direction: column; gap: 8px;">
+    <quantic-skeleton></quantic-skeleton>
+    <quantic-skeleton cols="10" delay="0.2"></quantic-skeleton>
+    <quantic-skeleton cols="8" delay="0.4"></quantic-skeleton>
+    <quantic-skeleton cols="6" delay="0.6"></quantic-skeleton>
+  </div>
+`);

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

@@ -0,0 +1,10 @@
+import { QuanticElement } from '../shared/quantic-element';
+import type { ComponentMeta } from '../shared/meta.types';
+export declare class Skeleton extends QuanticElement {
+    static meta: ComponentMeta;
+    cols?: number;
+    rows?: number;
+    delay?: number;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}

package/dist/skeleton/skeleton.component.js

@@ -0,0 +1,79 @@
+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 { css, html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { quanticElement, QuanticElement } from '../shared/quantic-element';
+import { prop } from '../shared/component-meta.decorators';
+let Skeleton = class Skeleton extends QuanticElement {
+    render() {
+        return html `
+      <span
+        class="skeleton"
+        aria-hidden="true"
+        style=${styleMap({
+            '--cols': this.cols != null ? String(this.cols) : undefined,
+            '--rows': this.rows != null ? String(this.rows) : undefined,
+            'animation-delay': this.delay != null ? `${this.delay}s` : undefined,
+        })}
+      ></span>
+    `;
+    }
+};
+Skeleton.meta = {
+    tag: 'quantic-skeleton',
+    description: 'Animated placeholder used while content is loading. ' +
+        'Renders a shimmering block sized by column span and line-height units.',
+    category: 'feedback',
+};
+Skeleton.styles = css `
+    :host {
+      display: block;
+    }
+
+    .skeleton {
+      display: block;
+      border-radius: var(--quantic-radius-sm);
+      width: calc(var(--cols, 12) / 12 * 100%);
+      height: calc(var(--rows, 1) * 1em);
+      background: linear-gradient(
+        120deg,
+        rgb(var(--quantic-bg-tertiary-rgb) / 0.5) 25%,
+        var(--quantic-bg-tertiary) 50%,
+        rgb(var(--quantic-bg-tertiary-rgb) / 0.5) 75%
+      );
+      background-size: 200% 100%;
+      animation: shimmer var(--quantic-component-skeleton-duration, 2.5s) ease-in-out infinite;
+    }
+
+    @keyframes shimmer {
+      from {
+        background-position: 200% 0;
+      }
+      to {
+        background-position: -200% 0;
+      }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .skeleton {
+        animation: none;
+      }
+    }
+  `;
+__decorate([
+    prop({ type: 'number', description: 'Width as a fraction of 12 columns (1–12). Defaults to 12 (full width).' })
+], Skeleton.prototype, "cols", void 0);
+__decorate([
+    prop({ type: 'number', description: 'Height as a multiple of 1em. Defaults to 1.' })
+], Skeleton.prototype, "rows", void 0);
+__decorate([
+    prop({ type: 'number', description: 'Animation delay in seconds. Useful for staggering multiple skeletons.' })
+], Skeleton.prototype, "delay", void 0);
+Skeleton = __decorate([
+    quanticElement('quantic-skeleton')
+], Skeleton);
+export { Skeleton };

package/dist/types/index.d.ts

@@ -26,6 +26,7 @@ export * from './progress';
 export * from './popover';
 export * from './radio';
 export * from './select';
+export * from './skeleton';
 export * from './spinner';
 export * from './shared/quantic-element';
 export * from './sparkline';

package/dist/types/skeleton/index.d.ts

@@ -0,0 +1 @@
+export * from './skeleton.component';

package/dist/types/skeleton/index.stories.d.ts

@@ -0,0 +1,41 @@
+interface Args {
+    cols?: number;
+    rows?: number;
+    delay?: number;
+}
+declare const _default: {
+    title: string;
+    component: string;
+    tags: string[];
+    argTypes: {
+        cols: {
+            control: {
+                type: string;
+                min: number;
+                max: number;
+            };
+            description: string;
+        };
+        rows: {
+            control: {
+                type: string;
+                min: number;
+            };
+            description: string;
+        };
+        delay: {
+            control: {
+                type: string;
+                min: number;
+                step: number;
+            };
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: import("../shared/story").StoryObject<Args>;
+export declare const HalfWidth: import("../shared/story").StoryObject<Args>;
+export declare const Tall: import("../shared/story").StoryObject<Args>;
+export declare const Narrow: import("../shared/story").StoryObject<Args>;
+export declare const Staggered: import("../shared/story").StoryObject<{}>;

package/dist/types/skeleton/skeleton.component.d.ts

@@ -0,0 +1,10 @@
+import { QuanticElement } from '../shared/quantic-element';
+import type { ComponentMeta } from '../shared/meta.types';
+export declare class Skeleton extends QuanticElement {
+    static meta: ComponentMeta;
+    cols?: number;
+    rows?: number;
+    delay?: number;
+    static styles: import("lit").CSSResult;
+    render(): import("lit").TemplateResult<1>;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrliq/quantic-components",
-  "version": "1.65.0",
+  "version": "1.67.0",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {
@@ -30,8 +30,8 @@
     "focus-trap": "^7.6.6",
     "lit": "^3.3.0",
     "lucide-static": "^0.511.0",
-    "@ctrliq/quantic-tokens": "1.65.0",
-    "@ctrliq/quantic-fonts": "1.65.0"
+    "@ctrliq/quantic-tokens": "0.0.0",
+    "@ctrliq/quantic-fonts": "0.0.0"
   },
   "sideEffects": false,
   "devDependencies": {