@ctrliq/quantic-components 0.0.1 → 1.61.0

package/README.md

@@ -1,45 +1,5 @@
-# @ctrliq/quantic-components
+# Quantic components
 
-## ⚠️ IMPORTANT NOTICE ⚠️
+## Recommended tools
 
-**This package is created solely for the purpose of setting up OIDC (OpenID Connect) trusted publishing with npm.**
-
-This is **NOT** a functional package and contains **NO** code or functionality beyond the OIDC setup configuration.
-
-## Purpose
-
-This package exists to:
-1. Configure OIDC trusted publishing for the package name `@ctrliq/quantic-components`
-2. Enable secure, token-less publishing from CI/CD workflows
-3. Establish provenance for packages published under this name
-
-## What is OIDC Trusted Publishing?
-
-OIDC trusted publishing allows package maintainers to publish packages directly from their CI/CD workflows without needing to manage npm access tokens. Instead, it uses OpenID Connect to establish trust between the CI/CD provider (like GitHub Actions) and npm.
-
-## Setup Instructions
-
-To properly configure OIDC trusted publishing for this package:
-
-1. Go to [npmjs.com](https://www.npmjs.com/) and navigate to your package settings
-2. Configure the trusted publisher (e.g., GitHub Actions)
-3. Specify the repository and workflow that should be allowed to publish
-4. Use the configured workflow to publish your actual package
-
-## DO NOT USE THIS PACKAGE
-
-This package is a placeholder for OIDC configuration only. It:
-- Contains no executable code
-- Provides no functionality
-- Should not be installed as a dependency
-- Exists only for administrative purposes
-
-## More Information
-
-For more details about npm's trusted publishing feature, see:
-- [npm Trusted Publishing Documentation](https://docs.npmjs.com/generating-provenance-statements)
-- [GitHub Actions OIDC Documentation](https://docs.github.com/en/actions/deployment/security-hardening-your-deployments/about-security-hardening-with-openid-connect)
-
----
-
-**Maintained for OIDC setup purposes only**
+(lit-plugin)[https://marketplace.visualstudio.com/items?itemName=runem.lit-plugin] (VS code)

package/dist/alert/alert.d.ts

@@ -0,0 +1,18 @@
+import { type PropertyValues } from 'lit';
+import { QuanticElement } from '../shared/quantic-element';
+import { AlertType } from './index.constants';
+import '../button';
+import '../icon';
+import type { ComponentMeta } from '../shared/meta.types';
+export { AlertType } from './index.constants';
+declare const Alert_base: typeof QuanticElement & import("../shared/shared.types").LitConstructor<import("../shared/auto-hide-empty-slots.mixin").AutoHideEmptySlotsInterface>;
+export declare class Alert extends Alert_base {
+    static meta: ComponentMeta;
+    type: AlertType;
+    showCloseButton: boolean;
+    static styles: import("lit").CSSResult;
+    updated(changed: PropertyValues<this>): void;
+    private handleCloseClick;
+    private renderDefaultIcon;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/alert/alert.js

@@ -0,0 +1,227 @@
+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, nothing } from 'lit';
+import { quanticElement, QuanticElement } from '../shared/quantic-element';
+import { AutoHideEmptySlotsMixin } from '../shared/auto-hide-empty-slots.mixin';
+import { AlertType } from './index.constants';
+import '../button';
+import '../icon';
+import { event, prop } from '../shared/component-meta.decorators';
+export { AlertType } from './index.constants';
+let Alert = class Alert extends AutoHideEmptySlotsMixin(QuanticElement) {
+    constructor() {
+        super(...arguments);
+        this.type = AlertType.Info;
+        this.showCloseButton = false;
+        this.handleCloseClick = () => {
+            this.dispatchEvent(new Event('close', { bubbles: true, composed: true }));
+        };
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('type') || !this.hasAttribute('role')) {
+            this.setAttribute('role', this.type === AlertType.Error ? 'alert' : 'status');
+            this.setAttribute('aria-live', this.type === AlertType.Error ? 'assertive' : 'polite');
+            this.setAttribute('aria-atomic', 'true');
+        }
+    }
+    renderDefaultIcon() {
+        switch (this.type) {
+            case AlertType.Success:
+                return html `<quantic-icon-lucide-circle-check
+          size="md"
+        ></quantic-icon-lucide-circle-check>`;
+            case AlertType.Error:
+                return html `<quantic-icon-lucide-circle-x
+          size="md"
+        ></quantic-icon-lucide-circle-x>`;
+            case AlertType.Warning:
+                return html `<quantic-icon-lucide-triangle-alert
+          size="md"
+        ></quantic-icon-lucide-triangle-alert>`;
+            case AlertType.Info:
+            default:
+                return html `<quantic-icon-lucide-info
+          size="md"
+        ></quantic-icon-lucide-info>`;
+        }
+    }
+    render() {
+        return html `
+      <div class="container">
+        <span class="icon">
+          <slot name="icon">${this.renderDefaultIcon()}</slot>
+        </span>
+        <div class="content">
+          <slot
+            name="title"
+            class="title"
+            @slotchange=${this.handleAutoHide}
+          ></slot>
+          <slot class="body" @slotchange=${this.handleAutoHide}></slot>
+          <slot
+            name="action"
+            class="action"
+            @slotchange=${this.handleAutoHide}
+          ></slot>
+        </div>
+        ${this.showCloseButton
+            ? html `<quantic-button
+              class="close-button"
+              variant="ghost"
+              size="sm"
+              icon
+              aria-label="Close"
+              @click=${this.handleCloseClick}
+            >
+              <quantic-icon-lucide-x
+                size="sm"
+                class="close-icon"
+              ></quantic-icon-lucide-x>
+            </quantic-button>`
+            : nothing}
+      </div>
+    `;
+    }
+};
+Alert.meta = {
+    tag: 'quantic-alert',
+    description: 'Inline alert banner with severity styles and optional dismiss action. ' +
+        'Visibility is owned by the consumer.',
+    category: 'feedback',
+    slots: {
+        icon: {
+            description: 'Optional icon override. Defaults to a type-derived lucide icon.',
+        },
+        title: { description: 'Optional bold title.' },
+        '': { description: 'Body content of the alert.' },
+        action: {
+            description: 'Optional action element (e.g. a link or button).',
+        },
+    },
+    relatedTo: ['quantic-toast', 'quantic-button'],
+};
+Alert.styles = css `
+    :host {
+      --quantic-component-alert-bg: var(--quantic-bg-secondary);
+      --quantic-component-alert-border-color: var(--quantic-border-primary);
+      --quantic-component-alert-icon-color: var(--quantic-fg-brand-primary);
+      --quantic-component-alert-title-color: var(--quantic-text-primary);
+      --quantic-component-alert-text-color: var(--quantic-text-secondary);
+      --quantic-component-alert-radius: var(--quantic-radius-md);
+      --quantic-component-alert-padding: var(--quantic-spacing-3);
+      --quantic-component-alert-gap: var(--quantic-spacing-3);
+
+      display: block;
+      box-sizing: border-box;
+      font-family: var(--quantic-font-family-body);
+    }
+
+    :host([type='success']) {
+      --quantic-component-alert-icon-color: var(--quantic-fg-success-primary);
+    }
+
+    :host([type='error']) {
+      --quantic-component-alert-icon-color: var(--quantic-fg-error-primary);
+    }
+
+    :host([type='warning']) {
+      --quantic-component-alert-icon-color: var(--quantic-fg-warning-primary);
+    }
+
+    .container {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--quantic-component-alert-gap);
+      width: 100%;
+      padding: var(--quantic-component-alert-padding);
+      background-color: var(--quantic-component-alert-bg);
+      border: 1px solid var(--quantic-component-alert-border-color);
+      border-radius: var(--quantic-component-alert-radius);
+      box-sizing: border-box;
+    }
+
+    .icon {
+      display: inline-flex;
+      flex-shrink: 0;
+      color: var(--quantic-component-alert-icon-color);
+      line-height: 0;
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: var(--quantic-spacing-1);
+      flex: 1;
+      min-width: 0;
+    }
+
+    .title {
+      display: block;
+      color: var(--quantic-component-alert-title-color);
+      font-size: var(--quantic-font-size-body-sm);
+      line-height: var(--quantic-line-height-body-sm);
+      font-weight: var(--quantic-font-weight-semibold);
+    }
+
+    .body {
+      display: block;
+      color: var(--quantic-component-alert-text-color);
+      font-size: var(--quantic-font-size-body-sm);
+      line-height: var(--quantic-line-height-body-sm);
+    }
+
+    .action {
+      display: block;
+      margin-top: var(--quantic-spacing-2);
+    }
+
+    .close-button {
+      flex-shrink: 0;
+      margin-inline-start: auto;
+      margin-block-start: calc(var(--quantic-spacing-2) * -1);
+      margin-inline-end: calc(var(--quantic-spacing-2) * -1);
+    }
+
+    .close-icon {
+      color: var(--quantic-text-tertiary);
+      transition: color var(--quantic-transition-duration-fast, 0.15s);
+    }
+
+    .close-button:hover .close-icon,
+    .close-button:focus .close-icon {
+      color: var(--quantic-text-primary);
+    }
+
+    [hidden] {
+      display: none;
+    }
+  `;
+__decorate([
+    prop({
+        type: 'AlertType',
+        options: Object.values(AlertType),
+        default: AlertType.Info,
+        reflect: true,
+        description: 'Severity. Drives icon and color tokens.',
+    })
+], Alert.prototype, "type", void 0);
+__decorate([
+    prop({
+        type: 'boolean',
+        attribute: 'show-close-button',
+        default: 'false',
+        description: 'Shows a built-in close button. Click dispatches a "close" event.',
+    })
+], Alert.prototype, "showCloseButton", void 0);
+Alert = __decorate([
+    event('close', {
+        description: 'Fired when the user clicks the close button. The consumer is responsible for hiding the alert.',
+    }),
+    quanticElement('quantic-alert')
+], Alert);
+export { Alert };

package/dist/alert/index.constants.d.ts

@@ -0,0 +1,7 @@
+export declare const AlertType: {
+    readonly Success: "success";
+    readonly Error: "error";
+    readonly Warning: "warning";
+    readonly Info: "info";
+};
+export type AlertType = (typeof AlertType)[keyof typeof AlertType];

package/dist/alert/index.constants.js

@@ -0,0 +1,6 @@
+export const AlertType = {
+    Success: 'success',
+    Error: 'error',
+    Warning: 'warning',
+    Info: 'info',
+};

package/dist/alert/index.d.ts

@@ -0,0 +1,2 @@
+export { Alert } from './alert';
+export { AlertType } from './index.constants';

package/dist/alert/index.js

@@ -0,0 +1,2 @@
+export { Alert } from './alert';
+export { AlertType } from './index.constants';

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

@@ -0,0 +1,19 @@
+import type { Meta } from '@storybook/web-components';
+import { AlertType } from './index.constants';
+interface Args {
+    type?: AlertType;
+    showCloseButton?: boolean;
+    title: string;
+    content: string;
+}
+declare const meta: Meta;
+export default meta;
+export declare const Default: import("../shared/story").StoryObject<Args>;
+export declare const Info: import("../shared/story").StoryObject<Args>;
+export declare const Success: import("../shared/story").StoryObject<Args>;
+export declare const Warning: import("../shared/story").StoryObject<Args>;
+export declare const ErrorAlert: import("../shared/story").StoryObject<Args>;
+export declare const WithCloseButton: import("../shared/story").StoryObject<Args>;
+export declare const WithoutTitle: import("../shared/story").StoryObject<Args>;
+export declare const WithAction: import("../shared/story").StoryObject<object>;
+export declare const CustomIcon: import("../shared/story").StoryObject<object>;

package/dist/alert/index.stories.js

@@ -0,0 +1,104 @@
+import { story } from '../shared/story';
+import { withActions } from '@storybook/addon-actions/decorator';
+import { AlertType } from './index.constants';
+const meta = {
+    title: 'Components/Feedback/Alert',
+    component: 'quantic-alert',
+    tags: ['autodocs'],
+    decorators: [withActions],
+    parameters: {
+        actions: {
+            handles: ['close'],
+        },
+    },
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: Object.values(AlertType),
+            description: 'The severity type of the alert',
+        },
+        showCloseButton: {
+            control: 'boolean',
+            description: 'Whether to show the close button',
+        },
+        title: { control: 'text', description: 'Title text' },
+        content: { control: 'text', description: 'Body content' },
+    },
+};
+export default meta;
+const base = story({
+    args: {
+        title: "We've just released a new feature",
+        content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum dolor.',
+        type: AlertType.Info,
+        showCloseButton: false,
+    },
+}).render(({ type, showCloseButton, title, content }) => {
+    const attrs = [
+        type ? `type="${type}"` : '',
+        showCloseButton ? 'show-close-button' : '',
+    ]
+        .filter(Boolean)
+        .join(' ');
+    return `
+    <quantic-alert ${attrs}>
+      <span slot="title">${title}</span>
+      ${content}
+    </quantic-alert>
+  `;
+});
+export const Default = base;
+export const Info = base.override({
+    title: "We've just released a new feature",
+    content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum dolor.',
+    type: AlertType.Info,
+});
+export const Success = base.override({
+    title: 'Successfully saved',
+    content: 'Your changes have been saved and are now live.',
+    type: AlertType.Success,
+});
+export const Warning = base.override({
+    title: 'Heads up',
+    content: 'This action will affect 142 users.',
+    type: AlertType.Warning,
+});
+export const ErrorAlert = base.override({
+    title: 'Something went wrong',
+    content: 'We could not complete the request. Please try again.',
+    type: AlertType.Error,
+});
+export const WithCloseButton = base.override({
+    title: "We've just released a new feature",
+    content: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid pariatur, ipsum dolor.',
+    showCloseButton: true,
+});
+export const WithoutTitle = story({
+    args: {
+        title: '',
+        content: 'Your session will expire in 10 minutes.',
+        type: AlertType.Warning,
+        showCloseButton: false,
+    },
+}).render(({ type, showCloseButton, content }) => `
+    <quantic-alert
+      ${type ? `type="${type}"` : ''}
+      ${showCloseButton ? 'show-close-button' : ''}
+    >
+      ${content}
+    </quantic-alert>
+  `);
+export const WithAction = story().render(() => `
+    <quantic-alert type="info">
+      <span slot="title">New version available</span>
+      A new version of the app has been released with important improvements.
+      <quantic-button slot="action" variant="ghost" size="sm">View changelog</quantic-button>
+    </quantic-alert>
+  `);
+export const CustomIcon = story().render(() => `
+    <quantic-alert type="info">
+      <quantic-icon-lucide-bell slot="icon" size="md"></quantic-icon-lucide-bell>
+      <span slot="title">New notification</span>
+      You have 3 unread messages in your inbox.
+    </quantic-alert>
+  `);

package/dist/badge/badge.component.d.ts

@@ -0,0 +1,12 @@
+import { BadgeSize, BadgeColor } from './index.constants';
+import { QuanticElement } from '../shared/quantic-element';
+import type { ComponentMeta } from '../shared/meta.types';
+export declare class Badge extends QuanticElement {
+    static meta: ComponentMeta;
+    color: BadgeColor;
+    size: BadgeSize;
+    rounded: boolean;
+    icon: boolean;
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult;
+}

package/dist/badge/badge.component.js

@@ -0,0 +1,161 @@
+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, unsafeCSS } from 'lit';
+import { html } from 'lit/static-html.js';
+import { BadgeSize, BadgeColor } from './index.constants';
+import { classMap } from 'lit/directives/class-map.js';
+import { QuanticElement, quanticElement } from '../shared/quantic-element';
+import { generateColorStyles } from '../shared/shared.utils';
+import { prop } from '../shared/component-meta.decorators';
+let Badge = class Badge extends QuanticElement {
+    constructor() {
+        super(...arguments);
+        this.color = BadgeColor.Brand;
+        this.size = BadgeSize.Medium;
+        this.rounded = false;
+        this.icon = false;
+    }
+    render() {
+        const classes = classMap({
+            main: true,
+            [`size--${this.size}`]: true,
+            [`color--${this.color}`]: true,
+            [`icon`]: this.icon,
+            [`rounded`]: this.rounded,
+        });
+        return html `
+      <div class=${classes}>
+        <slot name="before" data-description="Content before the label (e.g. icon)."></slot>
+        <slot data-description="Badge label text or icon."></slot>
+        <slot name="after" data-description="Content after the label."></slot>
+      </div>
+    `;
+    }
+};
+Badge.meta = {
+    tag: 'quantic-badge',
+    description: 'Compact inline label for status, category, or count. ' +
+        'Non-interactive — use quantic-button for clickable chips. ' +
+        'Supports a wide color palette and an icon-only square mode.',
+    category: 'display',
+    relatedTo: ['quantic-tag', 'quantic-status-badge'],
+};
+Badge.styles = css `
+    :host {
+      display: inline-flex;
+    }
+
+    .main {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--quantic-spacing-2);
+      font-family: var(--quantic-font-family-body);
+      font-weight: var(--quantic-font-weight-regular);
+      line-height: 1.5em;
+      white-space: nowrap;
+      box-sizing: border-box;
+      vertical-align: middle;
+      border-radius: var(--quantic-radius-sm);
+    }
+
+    .size--xs {
+      padding: 0 var(--quantic-spacing-1);
+      font-size: var(--quantic-font-size-body-xs);
+    }
+
+    .size--sm {
+      padding: var(--quantic-spacing-0-5) var(--quantic-spacing-1-5);
+      font-size: var(--quantic-font-size-body-xs);
+    }
+
+    .size--md {
+      padding: var(--quantic-spacing-0-5) var(--quantic-spacing-2);
+      font-size: var(--quantic-font-size-body-sm);
+      border-radius: var(--quantic-radius-sm);
+    }
+
+    .size--lg {
+      padding: var(--quantic-spacing-1) var(--quantic-spacing-3);
+      font-size: var(--quantic-font-size-body-sm);
+      border-radius: var(--quantic-radius-lg);
+    }
+
+    /* Icon mode - square */
+    .icon {
+      padding: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      line-height: 100%;
+    }
+
+    .icon.size--xs {
+      width: calc(var(--quantic-line-height-body-xs) + 2px);
+      height: calc(var(--quantic-line-height-body-xs) + 2px);
+    }
+
+    .icon.size--sm {
+      width: calc(var(--quantic-line-height-body-xs) + 4px);
+      height: calc(var(--quantic-line-height-body-xs) + 4px);
+    }
+
+    .icon.size--md {
+      width: calc(
+        var(--quantic-line-height-body-sm) + var(--quantic-spacing-1) * 2
+      );
+      height: calc(
+        var(--quantic-line-height-body-sm) + var(--quantic-spacing-1) * 2
+      );
+    }
+
+    .icon.size--lg {
+      width: calc(
+        var(--quantic-line-height-body-sm) + var(--quantic-spacing-1) * 2
+      );
+      height: calc(
+        var(--quantic-line-height-body-sm) + var(--quantic-spacing-1) * 2
+      );
+    }
+
+    ${unsafeCSS(generateColorStyles((color) => `
+      --badge-bg: var(--quantic-utility-${color}-50);
+      --badge-border: var(--quantic-utility-${color}-200);
+      --badge-text: var(--quantic-utility-${color}-700);
+    `))}
+
+    .rounded {
+      border-radius: var(--quantic-radius-full);
+    }
+
+    .main {
+      background-color: var(--badge-bg);
+      border: 1px solid var(--badge-border);
+      color: var(--badge-text);
+    }
+
+    ::slotted(*) {
+      display: flex;
+      align-items: center;
+    }
+  `;
+__decorate([
+    prop({ type: 'BadgeColor', options: Object.values(BadgeColor), default: BadgeColor.Brand, description: 'Semantic color. Use "error" for failures, "success" for passing states, "warning" for caution, "brand" (default) for neutral highlights.' })
+], Badge.prototype, "color", void 0);
+__decorate([
+    prop({ type: 'BadgeSize', options: Object.values(BadgeSize), default: BadgeSize.Medium, description: 'Controls padding and font size.' })
+], Badge.prototype, "size", void 0);
+__decorate([
+    prop({ type: 'boolean', default: 'false', description: 'Applies a fully rounded (pill) border radius.' })
+], Badge.prototype, "rounded", void 0);
+__decorate([
+    prop({ type: 'boolean', default: 'false', description: 'Square icon-only mode — equal padding on all sides.' })
+], Badge.prototype, "icon", void 0);
+Badge = __decorate([
+    quanticElement('quantic-badge')
+], Badge);
+export { Badge };

package/dist/badge/index.constants.d.ts

@@ -0,0 +1,23 @@
+import { ComponentColor } from '../shared/shared.constants';
+export declare const BadgeColor: {
+    readonly Gray: "gray";
+    readonly Brand: "brand";
+    readonly Error: "error";
+    readonly Warning: "warning";
+    readonly Success: "success";
+    readonly GrayBlue: "gray-blue";
+    readonly BlueLight: "blue-light";
+    readonly Blue: "blue";
+    readonly Indigo: "indigo";
+    readonly Purple: "purple";
+    readonly Pink: "pink";
+    readonly Orange: "orange";
+};
+export type BadgeColor = ComponentColor;
+export declare const BadgeSize: {
+    readonly ExtraSmall: "xs";
+    readonly Small: "sm";
+    readonly Medium: "md";
+    readonly Large: "lg";
+};
+export type BadgeSize = (typeof BadgeSize)[keyof typeof BadgeSize];

package/dist/badge/index.constants.js

@@ -0,0 +1,8 @@
+import { ComponentColor } from '../shared/shared.constants';
+export const BadgeColor = ComponentColor;
+export const BadgeSize = {
+    ExtraSmall: 'xs',
+    Small: 'sm',
+    Medium: 'md',
+    Large: 'lg',
+};

package/dist/badge/index.d.ts

@@ -0,0 +1,3 @@
+export * from './badge.component';
+export * from './status-badge.component';
+export { BadgeSize, BadgeColor } from './index.constants';

package/dist/badge/index.js

@@ -0,0 +1,3 @@
+export * from './badge.component';
+export * from './status-badge.component';
+export { BadgeSize, BadgeColor } from './index.constants';