@plusui/library 0.1.0

package/cdn/components/tab-group/tab-group.js

@@ -0,0 +1,346 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { i, x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { e } from '../../query-CHb9Ft_d.js';
+import Tailwind from '../base/tailwind-base.js';
+import { tabStyle } from '../tab/styles.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @tag plus-tab-group
+ * @summary Tab group component that manages a set of tabs and panels.
+ *
+ * @slot tablist - Slot for tabs
+ * @slot panels - Slot for tab panels
+ *
+ * @csspart group - The component's base wrapper
+ * @csspart tablist - The tabs container
+ * @csspart panels - The tab panels container
+ * @csspart indicator - The animated indicator element (when animated=true)
+ *
+ * @cssproperty --tabs-gap - Controls the gap between tabs
+ * @cssproperty --tabs-indicator-color - Controls the color of the active tab indicator
+ * @cssproperty --tabs-indicator-height - Controls the height of the animated indicator
+ *
+ * @event plus-tabs-change - Emitted when a tab is selected with the tab's value
+ *
+ * @example
+ * ```html
+ * <plus-tab-group>
+ *   <plus-tab value="tab1" slot="tablist">Tab 1</plus-tab>
+ *   <plus-tab value="tab2" slot="tablist">Tab 2</plus-tab>
+ *   <plus-tab-panel value="tab1" slot="panels">Content 1</plus-tab-panel>
+ *   <plus-tab-panel value="tab2" slot="panels">Content 2</plus-tab-panel>
+ * </plus-tab-group>
+ * ```
+ */
+class PlusTabGroup extends Tailwind {
+    constructor() {
+        super();
+        /**
+         * Sets the size of the tabs
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Sets the orientation of the tabs
+         * - horizontal: Tabs arranged horizontally
+         * - vertical: Tabs arranged vertically
+         * @default 'horizontal'
+         */
+        this.orientation = 'horizontal';
+        /**
+         * Disables all tabs
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Enables the dismiss button on all tabs
+         * @default false
+         */
+        this.dismissible = false;
+        /**
+         * Currently active tab value
+         */
+        this.value = '';
+        /**
+         * Enables animated sliding indicator for active tab
+         * @default false
+         */
+        this.animated = false;
+        /**
+         * Internal state to track tabs and panels
+         */
+        this.tabs = [];
+        this.panels = [];
+        this.addEventListener('plus-tab-click', this.handleTabClick);
+        this.addEventListener('plus-tab-dismiss', this.handleTabDismiss);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Initialize resize observer
+        this.resizeObserver = new ResizeObserver(() => this.updateIndicator());
+        this.resizeObserver.observe(this);
+        // Initialize mutation observer to watch for DOM changes
+        this.mutationObserver = new MutationObserver(() => this.updateIndicator());
+        this.mutationObserver.observe(this, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['active'],
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+        }
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    }
+    /**
+     * Get all tabs from the tablist slot
+     */
+    getTabs() {
+        if (!this.tablistSlot)
+            return [];
+        return [...this.tablistSlot.assignedElements({ flatten: true })].filter((el) => el.tagName.toLowerCase() === 'plus-tab');
+    }
+    /**
+     * Get all panels from the panels slot
+     */
+    getPanels() {
+        if (!this.panelsSlot)
+            return [];
+        return [...this.panelsSlot.assignedElements({ flatten: true })].filter((el) => el.tagName.toLowerCase() === 'plus-tab-panel');
+    }
+    /**
+     * Handle tab slot change
+     */
+    handleTabsSlotChange() {
+        this.tabs = this.getTabs();
+        this.syncTabsWithPanels();
+        // Update indicator when tabs change
+        setTimeout(() => this.updateIndicator(), 10);
+    }
+    /**
+     * Handle panels slot change
+     */
+    handlePanelsSlotChange() {
+        this.panels = this.getPanels();
+        this.syncTabsWithPanels();
+    }
+    /**
+     * Updates the indicator position and size
+     */
+    updateIndicator() {
+        if (!this.animated || !this.indicator)
+            return;
+        // Find the active tab
+        const activeTab = this.tabs.find((tab) => tab.active);
+        if (!activeTab)
+            return;
+        const tabElement = activeTab;
+        const tabRect = tabElement.getBoundingClientRect();
+        const containerRect = this.getBoundingClientRect();
+        if (this.orientation === 'horizontal') {
+            // Calculate position for horizontal orientation
+            const left = tabRect.left - containerRect.left;
+            const width = tabRect.width;
+            // Set style properties
+            this.indicator.style.left = `${left}px`;
+            this.indicator.style.width = `${width}px`;
+            this.indicator.style.top = '';
+            this.indicator.style.height = '2px'; // Horizontal line thickness
+        }
+        else {
+            // Calculate position for vertical orientation
+            const top = tabRect.top - containerRect.top;
+            const height = tabRect.height;
+            // Set style properties
+            this.indicator.style.top = `${top}px`;
+            this.indicator.style.height = `${height}px`;
+            this.indicator.style.left = '';
+            this.indicator.style.width = '2px'; // Vertical line thickness
+        }
+        // Ensure indicator is visible
+        this.indicator.style.display = 'block';
+    }
+    /**
+     * Synchronize tabs with panels and apply properties
+     */
+    syncTabsWithPanels() {
+        // If there's no active tab and we have tabs, activate the first one
+        if (!this.value && this.tabs.length > 0) {
+            const firstTab = this.tabs[0];
+            this.value = firstTab.value;
+        }
+        // Update all tabs with current properties
+        this.tabs.forEach((tab) => {
+            tab.active = tab.value === this.value;
+            tab.size = this.size;
+            tab.orientation = this.orientation;
+            tab.disabled = this.disabled || tab.disabled;
+            tab.dismissible = this.dismissible || tab.dismissible;
+            tab.animated = this.animated;
+        });
+        // Update all panels
+        this.panels.forEach((panel) => {
+            panel.active = panel.value === this.value;
+        });
+        // Update indicator position
+        setTimeout(() => this.updateIndicator(), 10);
+    }
+    /**
+     * Handle tab click event
+     */
+    handleTabClick(event) {
+        const newValue = event.detail.value;
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.syncTabsWithPanels();
+            this.emit('plus-tabs-change', { detail: { value: newValue } });
+        }
+    }
+    /**
+     * Handle tab dismiss event
+     */
+    handleTabDismiss(event) {
+        const dismissedValue = event.detail.value;
+        const dismissedTab = this.tabs.find((tab) => tab.value === dismissedValue);
+        const dismissedPanel = this.panels.find((panel) => panel.value === dismissedValue);
+        // Remove dismissed tab and panel from DOM
+        if (dismissedTab)
+            dismissedTab.remove();
+        if (dismissedPanel)
+            dismissedPanel.remove();
+        // Update internal state
+        this.tabs = this.getTabs();
+        this.panels = this.getPanels();
+        // If we dismissed the active tab, activate the first remaining tab
+        if (dismissedValue === this.value && this.tabs.length > 0) {
+            const firstTab = this.tabs[0];
+            this.value = firstTab.value;
+            this.syncTabsWithPanels();
+            this.emit('plus-tabs-change', { detail: { value: this.value } });
+        }
+        // Update indicator after dismissal
+        setTimeout(() => this.updateIndicator(), 100);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Update indicator after relevant property changes
+        if (changedProperties.has('value') ||
+            changedProperties.has('orientation') ||
+            changedProperties.has('animated')) {
+            setTimeout(() => this.updateIndicator(), 10);
+        }
+    }
+    render() {
+        const { orientation, animated } = this;
+        const { tabGroup, tabHeader } = tabStyle({ orientation });
+        return x `
+      <div part="group" class=${tabGroup()}>
+        <div part="tablist" class="tablist-wrapper ${tabHeader()}">
+          <slot name="tablist" @slotchange=${this.handleTabsSlotChange}></slot>
+          ${animated
+            ? x `<div part="indicator" class="tab-indicator"></div>`
+            : ''}
+        </div>
+        <div part="panels" class="tab-panels">
+          <slot name="panels" @slotchange=${this.handlePanelsSlotChange}></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+PlusTabGroup.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .tab-panels {
+        width: 100%;
+      }
+
+      .tablist-wrapper {
+        position: relative;
+      }
+
+      .tab-indicator {
+        position: absolute;
+        bottom: 0;
+        height: 2px;
+        background-color: var(
+          --tabs-indicator-color,
+          var(--plus-color-background-primary-default)
+        );
+        transition: all 0.25s ease;
+        z-index: 10;
+        opacity: 1;
+        visibility: visible;
+      }
+
+      :host([orientation='vertical']) .tab-indicator {
+        width: 2px;
+        right: 0;
+        left: auto;
+        height: auto;
+        bottom: auto;
+      }
+    `,
+];
+__decorate([
+    n({ type: String })
+], PlusTabGroup.prototype, "size", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], PlusTabGroup.prototype, "orientation", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => value != 'false',
+    })
+], PlusTabGroup.prototype, "disabled", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => value != 'false',
+    })
+], PlusTabGroup.prototype, "dismissible", void 0);
+__decorate([
+    n({ type: String })
+], PlusTabGroup.prototype, "value", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        reflect: true,
+        converter: (value) => value != 'false',
+    })
+], PlusTabGroup.prototype, "animated", void 0);
+__decorate([
+    e('slot[name="tablist"]')
+], PlusTabGroup.prototype, "tablistSlot", void 0);
+__decorate([
+    e('slot[name="panels"]')
+], PlusTabGroup.prototype, "panelsSlot", void 0);
+__decorate([
+    e('.tab-indicator')
+], PlusTabGroup.prototype, "indicator", void 0);
+__decorate([
+    r()
+], PlusTabGroup.prototype, "tabs", void 0);
+__decorate([
+    r()
+], PlusTabGroup.prototype, "panels", void 0);
+
+export { PlusTabGroup, PlusTabGroup as default };

package/cdn/components/tab-panel/index.js

@@ -0,0 +1,12 @@
+import PlusTabPanel from './tab-panel.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import '../tab/styles.js';
+import '../../index-B9iart53.js';
+
+// Define the element
+customElements.define('plus-tab-panel', PlusTabPanel);
+
+export { PlusTabPanel };

package/cdn/components/tab-panel/tab-panel.js

@@ -0,0 +1,72 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { i, x } from '../../lit-element-ByzbtpGk.js';
+import Tailwind from '../base/tailwind-base.js';
+import { tabStyle } from '../tab/styles.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @tag plus-tab-panel
+ * @summary Tab panel component that displays content associated with a tab.
+ *
+ * @slot - The default slot for tab panel content
+ *
+ * @csspart panel - The component's base wrapper
+ *
+ * @example
+ * ```html
+ * <plus-tab-panel value="tab1">Tab 1 Content</plus-tab-panel>
+ * ```
+ */
+class PlusTabPanel extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the value of the tab panel, used for matching with a tab
+         */
+        this.value = '';
+        /**
+         * Indicates if the panel is currently visible
+         * @default false
+         */
+        this.active = false;
+        /**
+         * Custom CSS class to apply to the panel
+         */
+        this.panelClass = '';
+    }
+    render() {
+        const { active, panelClass } = this;
+        const { tabPanel } = tabStyle({ active });
+        return x `
+      <div
+        part="panel"
+        class=${tabPanel({ class: panelClass })}
+        role="tabpanel"
+        aria-hidden=${!active}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+PlusTabPanel.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: block;
+        width: 100%;
+      }
+    `,
+];
+__decorate([
+    n({ type: String })
+], PlusTabPanel.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusTabPanel.prototype, "active", void 0);
+__decorate([
+    n({ type: String })
+], PlusTabPanel.prototype, "panelClass", void 0);
+
+export { PlusTabPanel, PlusTabPanel as default };

package/cdn/components/tag/index.js

@@ -0,0 +1,13 @@
+import PlusTag from './tag.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import './tag.style.js';
+import '../../index-B9iart53.js';
+import '../../style-map-DC_vNus2.js';
+import '../../directive-DZCF8pFJ.js';
+
+customElements.define('plus-tag', PlusTag);
+
+export { PlusTag };

package/cdn/components/tag/tag.js

@@ -0,0 +1,188 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import Tailwind from '../base/tailwind-base.js';
+import { i, x } from '../../lit-element-ByzbtpGk.js';
+import { tagStyle } from './tag.style.js';
+import { o } from '../../style-map-DC_vNus2.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+import '../../directive-DZCF8pFJ.js';
+
+/**
+ * @tag plus-tag
+ * @summary Tag component for displaying status, labels, and categories.
+ *
+ * @slot - The tag content (text, icons, etc.)
+ *
+ * @csspart tag - The component's base wrapper
+ *
+ * @cssproperty --text-color - Controls the text color of the tag
+ * @cssproperty --border-color - Controls the border color of the tag
+ * @cssproperty --bg-default - Controls the default background color
+ *
+ * @example
+ * ```html
+ * <plus-tag status="success">Completed</plus-tag>
+ * <plus-tag status="warning">Pending</plus-tag>
+ * <plus-tag status="danger">Error</plus-tag>
+ * ```
+ */
+const textColorMap = {
+    default: 'default',
+    primary: 'base',
+    success: 'base',
+    warning: 'base',
+    danger: 'base',
+    info: 'base',
+};
+/**
+ * A versatile tag component for displaying status, labels, and categories
+ *
+ * @tag plus-tag
+ *
+ * @csspart tag - The container element for the tag
+ *
+ * @cssproperty [--tag-bg-color] - Background color for default state (inherits from --plus-color-background-neutral-default)
+ * @cssproperty [--tag-text-color] - Text color for default state (inherits from --plus-color-text-default)
+ *
+ * @property {('success'|'warning'|'error'|'info'|'default')} status - Defines the tag's visual state and color scheme
+ * @property {('sm'|'md'|'lg')} size - Controls the tag's size variant
+ * @property {boolean} invert - Toggles between light/dark color themes
+ * @property {('full'|'medium'|'none')} radius - Sets the border radius style
+ *
+ * @attribute {string} aria-label - Accessible label for the tag (falls back to text content)
+ * @attribute {string} role - ARIA role (defaults to "status")
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <plus-tag>Default Tag</plus-tag>
+ *
+ * <!-- With status -->
+ * <plus-tag status="success">Success</plus-tag>
+ * <plus-tag status="warning">Warning</plus-tag>
+ * <plus-tag status="error">Error</plus-tag>
+ *
+ * <!-- Size variants -->
+ * <plus-tag size="sm">Small</plus-tag>
+ * <plus-tag size="md">Medium</plus-tag>
+ * <plus-tag size="lg">Large</plus-tag>
+ *
+ * <!-- Border radius options -->
+ * <plus-tag radius="full">Pill Shape</plus-tag>
+ * <plus-tag radius="medium">Rounded</plus-tag>
+ * <plus-tag radius="none">Square</plus-tag>
+ *
+ * <!-- Inverted theme -->
+ * <plus-tag invert>Dark Theme</plus-tag>
+ * ```
+ *
+ * @cssExample
+ * ```css
+ * plus-tag {
+ *   --tag-bg-color: #f0f0f0;
+ *   --tag-text-color: #333333;
+ * }
+ * ```
+ */
+class PlusTag extends Tailwind {
+    constructor() {
+        super();
+        /**
+         * Sets the status/color variant of the tag
+         * - 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';
+        /**
+         * Sets the size of the tag
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Toggles between light/dark color themes
+         * @default false
+         */
+        this.invert = false;
+        /**
+         * Sets the border radius style
+         * - full: Pill shape
+         * - medium: Rounded corners
+         * - none: Square corners
+         * @default 'full'
+         */
+        this.radius = 'full';
+    }
+    get ariaLabel() {
+        return this.getAttribute('aria-label') || this.textContent || 'tag';
+    }
+    render() {
+        const getColorVariables = () => {
+            if (this.invert) {
+                return {
+                    '--i-bg-default': `var(--plus-color-background-${this.status}-invert-default)`,
+                    '--i-text-color': `var(--plus-color-text-default)`,
+                    '--i-border-color': `var(--plus-color-border-${this.status}-invert)`,
+                };
+            }
+            return {
+                '--i-bg-default': `var(--plus-color-background-${this.status}-default)`,
+                '--i-text-color': `var(--plus-color-text-${textColorMap[this.status]})`,
+                '--i-border-color': `var(--plus-color-border-${this.status})`,
+            };
+        };
+        const commonStyles = getColorVariables();
+        const dynamicStyles = {
+            '--d-text': 'var(--text-color,var(--i-text-color))',
+            '--d-border': 'var(--border-color,var(--i-border-color))',
+            '--d-bg-default': 'var(--bg-default,var(--i-bg-default))',
+        };
+        return x `
+      <div
+        part="tag"
+        role="status"
+        aria-label=${this.ariaLabel}
+        class=${tagStyle({
+            size: this.size,
+            radius: this.radius,
+            status: this.status,
+        })}
+        style=${o({ ...dynamicStyles, ...commonStyles })}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+PlusTag.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: inline-block;
+        position: relative;
+        width: fit-content;
+        height: fit-content;
+      }
+    `,
+];
+__decorate([
+    n({ type: String })
+], PlusTag.prototype, "status", void 0);
+__decorate([
+    n({ type: String })
+], PlusTag.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value != 'false' })
+], PlusTag.prototype, "invert", void 0);
+__decorate([
+    n({ type: String })
+], PlusTag.prototype, "radius", void 0);
+
+export { PlusTag, PlusTag as default };

package/cdn/components/tag/tag.style.js

@@ -0,0 +1,38 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const tagStyle = ce({
+    base: [
+        'tag antialiased flex flex-row items-center justify-center font-sans overflow-hidden',
+        'py-0.5 px-1.5 gap-1.5',
+        'text-(--d-text)',
+        'bg-(--d-bg-default)',
+        'border border-(--d-border)',
+    ],
+    variants: {
+        size: {
+            sm: 'text-xs px-1 gap-1',
+            md: 'text-sm',
+            lg: 'text-md',
+        },
+        radius: {
+            full: 'rounded-full',
+            medium: 'rounded-md',
+            none: 'rounded-none',
+        },
+        status: {
+            default: 'default',
+            primary: 'primary',
+            success: 'success',
+            warning: 'warning',
+            danger: 'danger',
+            info: 'info',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        status: 'default',
+        radius: 'full',
+    },
+});
+
+export { tagStyle };

package/cdn/components/text/index.js

@@ -0,0 +1,11 @@
+import { PlusText } from './text.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import './text.style.js';
+import '../../index-B9iart53.js';
+
+customElements.define('plus-text', PlusText);
+
+export { PlusText };