@plusui/library 0.1.0

package/dist/components/accordion-group/accordion-group.js

@@ -0,0 +1,182 @@
+import { _ as __decorate, n as n$1 } from '../../property-DiPQx9S3.js';
+import { i, x } from '../../lit-element-ByzbtpGk.js';
+import { e } from '../../base-Cl6v8-BZ.js';
+import Tailwind from '../base/tailwind-base.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function n(n){return (o,r)=>{const{slot:e$1}=n??{},s="slot"+(e$1?`[name=${e$1}]`:":not([name])");return e(o,r,{get(){const t=this.renderRoot?.querySelector(s);return t?.assignedNodes(n)??[]}})}}
+
+/**
+ * @tag plus-accordion-group
+ * @summary A container for grouping accordion items together.
+ *
+ * @slot default - Accordion items to be grouped
+ *
+ * @csspart container - The container element
+ *
+ * @example
+ * ```html
+ * <plus-accordion-group>
+ *   <plus-accordion>
+ *     <div slot="header">First Item</div>
+ *     <div slot="panel">Content</div>
+ *   </plus-accordion>
+ *   <plus-accordion>
+ *     <div slot="header">Second Item</div>
+ *     <div slot="panel">Content</div>
+ *   </plus-accordion>
+ * </plus-accordion-group>
+ * ```
+ */
+class PlusAccordionGroup extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether multiple accordions can be expanded at the same time
+         * @type {boolean}
+         * @default false
+         * @attr multi
+         */
+        this.multi = false;
+        /**
+         * The visual style of the accordion group
+         * @type {'bordered' | 'divided' | 'separated'}
+         * @default 'bordered'
+         * @attr kind
+         */
+        this.kind = 'bordered';
+        /**
+         * The size of the accordions in the group
+         * @type {'sm' | 'md' | 'lg'}
+         * @default 'md'
+         * @attr size
+         */
+        this.size = 'md';
+        // @state()
+        // private hasAccordions = false;
+        this.toggleListener = (event) => {
+            const customEvent = event;
+            if (!this.multi && customEvent.detail?.expand) {
+                const accordions = this.accordions.filter((el) => el instanceof HTMLElement &&
+                    el.tagName.toLowerCase() === 'plus-accordion');
+                accordions.forEach((el) => {
+                    if (el !== event.target) {
+                        el.setAttribute('expand', 'false');
+                    }
+                });
+            }
+        };
+    }
+    handleSlotChange() {
+        const accordions = this.accordions.filter((el) => el instanceof HTMLElement &&
+            el.tagName.toLowerCase() === 'plus-accordion');
+        // this.hasAccordions = accordions.length > 0;
+        accordions.forEach((accordion, index) => {
+            if (this.kind !== 'separated') {
+                accordion.setAttribute('is-grouped', 'true');
+                accordion.setAttribute('is-first', index === 0 ? 'true' : 'false');
+                accordion.setAttribute('is-last', index === accordions.length - 1 ? 'true' : 'false');
+            }
+            accordion.setAttribute('size', this.size);
+            // Remove existing listeners before adding new ones
+            accordion.removeEventListener('plus-accordion-toggle', this.toggleListener);
+            accordion.addEventListener('plus-accordion-toggle', this.toggleListener);
+        });
+    }
+    disconnectedCallback() {
+        // Clean up event listeners when component is removed
+        const accordions = this.accordions.filter((el) => el instanceof HTMLElement &&
+            el.tagName.toLowerCase() === 'plus-accordion');
+        accordions.forEach((accordion) => {
+            accordion.removeEventListener('plus-accordion-toggle', this.toggleListener);
+        });
+        super.disconnectedCallback();
+    }
+    render() {
+        return x `
+      <div
+        class="font-sans antialiased"
+        part="container"
+        role="group"
+        aria-label="Accordion group"
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+}
+PlusAccordionGroup.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      :host([kind='bordered']) {
+        border: 1px solid var(--plus-color-border-default);
+        border-radius: 5px;
+      }
+
+      :host([kind='divided']) {
+        border: none;
+      }
+
+      :host([kind='bordered']) ::slotted(plus-accordion) {
+        border-bottom: 1px solid var(--plus-color-border-default);
+      }
+
+      :host([kind='bordered']) ::slotted(plus-accordion:last-of-type) {
+        border-bottom: none;
+      }
+
+      :host([kind='divided']) ::slotted(plus-accordion) {
+        border-bottom: 1px solid var(--plus-color-border-default);
+      }
+
+      :host([kind='divided']) ::slotted(plus-accordion:last-of-type) {
+        border-bottom: none;
+      }
+
+      :host([kind='separated'])::part(container) {
+        display: flex;
+        flex-direction: column;
+        gap: var(--accordion-gap);
+      }
+
+      :host([size='sm']) {
+        --accordion-gap: 14px;
+      }
+
+      :host([size='md']) {
+        --accordion-gap: 16px;
+      }
+
+      :host([size='lg']) {
+        --accordion-gap: 20px;
+      }
+    `,
+];
+__decorate([
+    n({ flatten: true })
+], PlusAccordionGroup.prototype, "accordions", void 0);
+__decorate([
+    n$1({
+        type: Boolean,
+        reflect: true,
+        converter: (value) => value != 'false',
+    })
+], PlusAccordionGroup.prototype, "multi", void 0);
+__decorate([
+    n$1({ type: String, reflect: true })
+], PlusAccordionGroup.prototype, "kind", void 0);
+__decorate([
+    n$1({ type: String, reflect: true })
+], PlusAccordionGroup.prototype, "size", void 0);
+
+export { PlusAccordionGroup, PlusAccordionGroup as default };

package/dist/components/accordion-group/accordion-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion-group.js","sourceRoot":"","sources":["../../../src/components/accordion-group/accordion-group.ts"],"names":[],"mappings":"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"}

package/dist/components/accordion-group/index.d.ts

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

package/dist/components/accordion-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/accordion-group/index.ts"],"names":[],"mappings":"AAEA,cAAc,sBAAsB,CAAC"}

package/dist/components/accordion-group/index.js

@@ -0,0 +1,11 @@
+import PlusAccordionGroup from './accordion-group.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../base-Cl6v8-BZ.js';
+import '../base/tailwind-base.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+
+customElements.define('plus-accordion-group', PlusAccordionGroup);
+
+export { PlusAccordionGroup };

package/dist/components/accordion-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/accordion-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAE1D,cAAc,sBAAsB,CAAC;AAErC,cAAc,CAAC,MAAM,CAAC,sBAAsB,EAAE,kBAAkB,CAAC,CAAC"}

package/dist/components/alert/alert.d.ts

@@ -0,0 +1,117 @@
+import Tailwind from '../base/tailwind-base';
+/**
+ * @tag plus-alert
+ * @summary Alert component that displays important messages to users.
+ *
+ * @slot message - The main message content
+ * @slot description - Additional descriptive content
+ * @slot prefix - Custom status icon
+ * @slot dismiss - Custom dismiss button
+ *
+ * @csspart base - The main container element
+ * @csspart status-icon - The status icon container
+ * @csspart content - The content container
+ * @csspart message - The message container
+ * @csspart description - The description container
+ * @csspart dismiss - The dismiss button container
+ *
+ * @event plus-dismiss - Emitted when the alert is dismissed
+ *
+ * @example
+ * ```html
+ * <plus-alert status="success" dismissible>
+ *   <div slot="message">Success!</div>
+ *   <div slot="description">Your changes have been saved.</div>
+ * </plus-alert>
+ * ```
+ */
+export default class PlusAlert extends Tailwind {
+    /**
+     * Determines the visual style of the alert
+     * - filled: Solid background color
+     * - outlined: Transparent background with border
+     * - dashed: Transparent background with dashed border
+     * @default 'filled'
+     * @type {'filled' | 'outlined' | 'dashed'}
+     */
+    kind: 'filled' | 'outlined' | 'dashed';
+    /**
+     * The size of the alert
+     *
+     * @type {'sm' | 'md' | 'lg'}
+     * @default 'md'
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Sets the status/color variant of the alert
+     * - default: Neutral color scheme
+     * - primary: Brand color scheme
+     * - success: Green color scheme
+     * - warning: Yellow color scheme
+     * - danger: Red color scheme
+     * - info: Blue color scheme
+     * @default 'default'
+     */
+    status: 'default' | 'success' | 'warning' | 'danger' | 'info';
+    /**
+     * When true, the alert will be displayed with an inverted color scheme
+     * @default false
+     * @type {boolean}
+     */
+    invert: boolean;
+    /**
+     * When true, the alert will be displayed with a dismissible close button
+     * @default true
+     * @type {boolean}
+     */
+    dismissible: boolean;
+    /**
+     * The message of the alert
+     * @default ''
+     * @type {string}
+     * @slot message
+     */
+    message: string;
+    /**
+     * The description of the alert
+     * @default ''
+     * @type {string}
+     * @slot description
+     */
+    description: string;
+    /**
+     * The status icon of the alert
+     * @default ''
+     * @type {string}
+     * @slot prefix
+     */
+    statusIcon?: string;
+    /**
+     * The dismiss icon of the alert
+     * @default ''
+     * @type {string}
+     * @slot dismiss
+     */
+    dismissIcon?: string;
+    /**
+     * When true, the alert will be displayed with a full width
+     * @default false
+     * @type {boolean}
+     */
+    fullWidth: boolean;
+    /**
+     * When true, the alert will be hidden
+     * @default false
+     * @type {boolean}
+     */
+    hiddenAlert: boolean;
+    /**
+     * Handles the dismiss action of the alert
+     * @private
+     */
+    private handleDismiss;
+    render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+export { PlusAlert };
+//# sourceMappingURL=alert.d.ts.map

package/dist/components/alert/alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/alert.ts"],"names":[],"mappings":"AAEA,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAK7C;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,QAAQ;IAC7C;;;;;;;OAOG;IAEH,IAAI,EAAE,QAAQ,GAAG,UAAU,GAAG,QAAQ,CAAY;IAElD;;;;;OAKG;IACS,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE5C;;;;;;;;;OASG;IAEH,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAa;IAE1E;;;;OAIG;IAMH,MAAM,UAAS;IAEf;;;;OAIG;IAMH,WAAW,UAAQ;IAEnB;;;;;OAKG;IAEH,OAAO,SAAM;IAEb;;;;;OAKG;IAEH,WAAW,SAAM;IAEjB;;;;;OAKG;IAEH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;;;OAKG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;OAIG;IAEH,SAAS,UAAS;IAElB;;;;OAIG;IAEH,WAAW,UAAS;IAEpB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAiBZ,MAAM;IA4Ff,OAAgB,MAAM,4BAA+B;CACtD;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/dist/components/alert/alert.js

@@ -0,0 +1,266 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { i, E, x } from '../../lit-element-ByzbtpGk.js';
+import Tailwind from '../base/tailwind-base.js';
+import { alertStyle } from './alert.style.js';
+import { o } from '../../style-map-DC_vNus2.js';
+import '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.js';
+import '../../index-B9iart53.js';
+import '../../directive-DZCF8pFJ.js';
+
+var style = i `
+  :host {
+    display: block;
+  }
+
+  :host([full-width]) {
+    width: 100%;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+`;
+
+/**
+ * @tag plus-alert
+ * @summary Alert component that displays important messages to users.
+ *
+ * @slot message - The main message content
+ * @slot description - Additional descriptive content
+ * @slot prefix - Custom status icon
+ * @slot dismiss - Custom dismiss button
+ *
+ * @csspart base - The main container element
+ * @csspart status-icon - The status icon container
+ * @csspart content - The content container
+ * @csspart message - The message container
+ * @csspart description - The description container
+ * @csspart dismiss - The dismiss button container
+ *
+ * @event plus-dismiss - Emitted when the alert is dismissed
+ *
+ * @example
+ * ```html
+ * <plus-alert status="success" dismissible>
+ *   <div slot="message">Success!</div>
+ *   <div slot="description">Your changes have been saved.</div>
+ * </plus-alert>
+ * ```
+ */
+class PlusAlert extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Determines the visual style of the alert
+         * - filled: Solid background color
+         * - outlined: Transparent background with border
+         * - dashed: Transparent background with dashed border
+         * @default 'filled'
+         * @type {'filled' | 'outlined' | 'dashed'}
+         */
+        this.kind = 'filled';
+        /**
+         * The size of the alert
+         *
+         * @type {'sm' | 'md' | 'lg'}
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Sets the status/color variant of the alert
+         * - default: Neutral color scheme
+         * - primary: Brand color scheme
+         * - success: Green color scheme
+         * - warning: Yellow color scheme
+         * - danger: Red color scheme
+         * - info: Blue color scheme
+         * @default 'default'
+         */
+        this.status = 'default';
+        /**
+         * When true, the alert will be displayed with an inverted color scheme
+         * @default false
+         * @type {boolean}
+         */
+        this.invert = false;
+        /**
+         * When true, the alert will be displayed with a dismissible close button
+         * @default true
+         * @type {boolean}
+         */
+        this.dismissible = true;
+        /**
+         * The message of the alert
+         * @default ''
+         * @type {string}
+         * @slot message
+         */
+        this.message = '';
+        /**
+         * The description of the alert
+         * @default ''
+         * @type {string}
+         * @slot description
+         */
+        this.description = '';
+        /**
+         * When true, the alert will be displayed with a full width
+         * @default false
+         * @type {boolean}
+         */
+        this.fullWidth = false;
+        /**
+         * When true, the alert will be hidden
+         * @default false
+         * @type {boolean}
+         */
+        this.hiddenAlert = false;
+    }
+    /**
+     * Handles the dismiss action of the alert
+     * @private
+     */
+    handleDismiss() {
+        const alert = this.shadowRoot?.querySelector('[part="base"]');
+        if (alert) {
+            alert.style.transition = 'opacity 0.2s ease-out, transform 0.2s ease-out';
+            alert.style.opacity = '0';
+            alert.style.transform = 'scale(0.98)';
+            setTimeout(() => {
+                this.hiddenAlert = true;
+                this.emit('plus-dismiss', { detail: { status: this.status } });
+            }, 250);
+        }
+    }
+    render() {
+        const filledStyles = {
+            '--i-bg-color': `var(--plus-color-background-${this.status}-default)`,
+            '--i-icon-color': `var(--plus-color-text-${this.status == 'default' ? 'default' : `${this.status}-invert`})`,
+            '--i-dismiss-color': `var(--plus-color-text-${this.status == 'default' ? 'default' : 'base'})`,
+            '--i-message-color': `var(--plus-color-text-${this.status == 'default' ? 'default' : 'base'})`,
+            '--i-description-color': `var(--plus-color-text-${this.status == 'default' ? 'default' : 'base'})`,
+            '--i-border-color': `transparent`,
+        };
+        const filledInvertedStyles = {
+            '--i-bg-color': `var(--plus-color-background-${this.status}-invert-default)`,
+            '--i-icon-color': `var(--plus-color-text-${this.status == 'default' ? 'base' : `${this.status}`})`,
+            '--i-dismiss-color': `var(--plus-color-text-${this.status == 'default' ? 'base' : 'default'})`,
+            '--i-message-color': `var(--plus-color-text-${this.status == 'default' ? 'base' : 'default'})`,
+            '--i-description-color': `var(--plus-color-text-${this.status == 'default' ? 'base' : 'default'})`,
+            '--i-border-color': `transparent`,
+        };
+        const outlinedStyles = {
+            '--i-bg-color': `transparent`,
+            '--i-icon-color': `var(--plus-color-text-${this.status})`,
+            '--i-dismiss-color': `var(--plus-color-text-default)`,
+            '--i-message-color': `var(--plus-color-text-${this.status})`,
+            '--i-description-color': `var(--plus-color-text-default)`,
+            '--i-border-color': `var(--plus-color-border-${this.status})`,
+        };
+        const styles = {
+            filled: this.invert ? filledInvertedStyles : filledStyles,
+            outlined: outlinedStyles,
+            dashed: outlinedStyles,
+        };
+        const { base, statusIcon, content, message, description, dismiss } = alertStyle({
+            kind: this.kind,
+            size: this.size,
+            status: this.status,
+            invert: this.invert,
+            dismissible: this.dismissible,
+            hidden: this.hiddenAlert,
+        });
+        const statusIconMap = {
+            default: 'heart-circle-plus',
+            success: 'circle-check',
+            warning: 'triangle-exclamation',
+            danger: 'circle-exclamation',
+            info: 'circle-info',
+        };
+        return x `
+      <div
+        class=${base()}
+        part="base"
+        style=${o(styles[this.kind])}
+        role="alert"
+        aria-live="polite"
+      >
+        <div class=${statusIcon()} part="status-icon">
+          <slot name="prefix">
+            ${x `<plus-svg-icon
+              iconName=${this.statusIcon || statusIconMap[this.status]}
+              part="status-icon"
+            >
+            </plus-svg-icon>`}
+          </slot>
+        </div>
+        <div class=${content()} part="content">
+          <slot name="message" class=${message()} part="message"
+            >${this.message}</slot
+          >
+          <slot name="description" class=${description()} part="description"
+            >${this.description}</slot
+          >
+        </div>
+        ${this.dismissible && !this.hiddenAlert
+            ? x `<slot
+              name="dismiss"
+              class=${dismiss()}
+              part="dismiss"
+              @click=${this.handleDismiss}
+              aria-label="Close alert"
+            >
+              <plus-svg-icon
+                iconName=${this.dismissIcon || 'xmark'}
+              ></plus-svg-icon>
+            </slot>`
+            : E}
+      </div>
+    `;
+    }
+}
+PlusAlert.styles = [...Tailwind.styles, style];
+__decorate([
+    n({ type: String })
+], PlusAlert.prototype, "kind", void 0);
+__decorate([
+    n()
+], PlusAlert.prototype, "size", void 0);
+__decorate([
+    n({ type: String })
+], PlusAlert.prototype, "status", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        reflect: true,
+        converter: (value) => (value == 'false' || false ? false : true),
+    })
+], PlusAlert.prototype, "invert", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        reflect: true,
+        converter: (value) => (value == 'false' || false ? false : true),
+    })
+], PlusAlert.prototype, "dismissible", void 0);
+__decorate([
+    n({ type: String })
+], PlusAlert.prototype, "message", void 0);
+__decorate([
+    n({ type: String })
+], PlusAlert.prototype, "description", void 0);
+__decorate([
+    n({ type: String })
+], PlusAlert.prototype, "statusIcon", void 0);
+__decorate([
+    n({ type: String })
+], PlusAlert.prototype, "dismissIcon", void 0);
+__decorate([
+    n({ type: Boolean, attribute: 'full-width' })
+], PlusAlert.prototype, "fullWidth", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'hidden' })
+], PlusAlert.prototype, "hiddenAlert", void 0);
+
+export { PlusAlert, PlusAlert as default };

package/dist/components/alert/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/components/alert/alert.ts"],"names":[],"mappings":"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"}