@plusui/library 0.1.0

package/cdn/components/breadcrumb-item/breadcrumb-item.style.js

@@ -0,0 +1,40 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const breadcrumbItemStyle = ce({
+    slots: {
+        base: 'plus-breadcrumb-item flex items-center gap-1 text-color-caption',
+        prefix: 'plus-breadcrumb-item__prefix flex items-center empty:hidden',
+        suffix: 'plus-breadcrumb-item__suffix flex items-center empty:hidden',
+        separator: 'plus-breadcrumb-item__separator flex items-center text-color-default text-sm ml-1 mr-2',
+    },
+    variants: {
+        size: {
+            sm: {
+                base: 'text-sm',
+                // separator: 'text-xs mx-1',
+            },
+            md: {
+                base: 'text-base',
+                // separator: 'text-sm mx-1.5',
+            },
+            lg: {
+                base: 'text-lg',
+                // separator: 'text-base mx-2',
+            },
+        },
+        isLastItem: {
+            true: {
+                separator: 'hidden',
+            },
+            false: {
+                separator: '',
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        isLastItem: false,
+    },
+});
+
+export { breadcrumbItemStyle };

package/cdn/components/breadcrumb-item/index.js

@@ -0,0 +1,13 @@
+import { PlusBreadcrumbItem } from './breadcrumb-item.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../controllers/slot-controller.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import './breadcrumb-item.style.js';
+import '../../index-B9iart53.js';
+import '../../if-defined-D-m3dgRf.js';
+
+customElements.define('plus-breadcrumb-item', PlusBreadcrumbItem);
+
+export { PlusBreadcrumbItem };

package/cdn/components/button/button.js

@@ -0,0 +1,231 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { i, x } from '../../lit-element-ByzbtpGk.js';
+import Tailwind from '../base/tailwind-base.js';
+import { baseButtonStyle } from './button.style.js';
+import { o } from '../../style-map-DC_vNus2.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+import '../../directive-DZCF8pFJ.js';
+
+/**
+ * @tag plus-button
+ * @summary Button component that provides a clickable element with various styles and states.
+ *
+ * @slot - The default slot for button content
+ * @slot prefix - Content to be placed before the button content
+ * @slot suffix - Content to be placed after the button content
+ *
+ * @csspart button - The component's base wrapper
+ *
+ * @cssproperty --text-color - Controls the text color of the button
+ * @cssproperty --border-color - Controls the border color of the button
+ * @cssproperty --bg-default - Controls the default background color
+ * @cssproperty --bg-hovered - Controls the background color when hovered
+ * @cssproperty --bg-pressed - Controls the background color when pressed
+ * @cssproperty --bg-focused - Controls the background color when focused
+ *
+ * @example
+ * ```html
+ * <plus-button kind="filled" status="primary" size="md">
+ *   Click me
+ * </plus-button>
+ * ```
+ */
+const textColorMap = {
+    default: 'default',
+    disabled: 'disabled',
+    primary: 'base',
+    success: 'base',
+    warning: 'base',
+    danger: 'base',
+    info: 'base',
+};
+class PlusButton extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Determines the visual style of the button
+         * - filled: Solid background color
+         * - outlined: Transparent background with border
+         * - dashed: Transparent background with dashed border
+         * - text: Text only without background or border
+         * @default 'filled'
+         */
+        this.kind = 'filled';
+        /**
+         * Sets the status/color variant of the button
+         * - 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 button
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Disables the button interaction
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Shows loading spinner and disables interaction
+         * @default false
+         */
+        this.loading = false;
+        this.fullWidth = false;
+    }
+    handleClick() {
+        this.emit('plus-click');
+    }
+    handleFocus() {
+        this.emit('plus-focus');
+    }
+    handleBlur() {
+        this.emit('plus-blur');
+    }
+    render() {
+        const _statusColor = this.disabled ? 'disabled' : this.status;
+        const commonStyles = {
+            '--i-bg-default': 'var(--plus-color-background-surface)',
+            '--i-bg-hovered': 'var(--plus-color-background-default-hovered)',
+            '--i-bg-pressed': 'var(--plus-color-background-default-pressed)',
+            '--i-bg-focused': 'var(--plus-color-background-default-focused)',
+            '--i-bg-loading': 'var(--plus-color-background-default-loading)',
+            '--i-text-color': `var(--plus-color-text-${_statusColor})`,
+            '--i-border-color': `var(--plus-color-border-${_statusColor})`,
+        };
+        const filledStyles = {
+            '--i-bg-default': `var(--plus-color-background-${_statusColor}-default)`,
+            '--i-bg-hovered': `var(--plus-color-background-${this.status}-hovered)`,
+            '--i-bg-focused': `var(--plus-color-background-${this.status}-pressed)`,
+            '--i-bg-pressed': `var(--plus-color-background-${this.status}-focused)`,
+            '--i-bg-loading': `var(--plus-color-background-${this.status}-loading)`,
+            '--i-text-color': `var(--plus-color-text-${textColorMap[_statusColor]})`,
+            '--i-border-color': 'transparent',
+        };
+        const styles = {
+            filled: filledStyles,
+            outlined: commonStyles,
+            dashed: commonStyles,
+            text: {
+                ...commonStyles,
+                '--i-bg-default': 'transparent',
+                '--i-border-color': 'transparent',
+            },
+        };
+        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))',
+            '--d-bg-hovered': 'var(--bg-hovered,var(--i-bg-hovered))',
+            '--d-bg-pressed': 'var(--bg-pressed,var(--i-bg-pressed))',
+            '--d-bg-focused': 'var(--bg-focused,var(--i-bg-focused))',
+            '--d-bg-loading': 'var(--bg-loading,var(--i-bg-loading))',
+        };
+        const { base } = baseButtonStyle({
+            size: this.size,
+            kind: this.kind,
+            status: this.status,
+            disabled: this.disabled || this.loading,
+            loading: this.loading,
+            fullWidth: this.fullWidth,
+        });
+        const LoadingTemplate = x `<div
+      class="loading h-full w-full absolute flex items-center justify-center bg-(--d-bg-loading)"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 512 512"
+        class="animate-spin h-2/5 w-auto fill-(--d-text)"
+      >
+        <!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+        <path
+          d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"
+        />
+      </svg>
+    </div>`;
+        return x `
+      <button
+        class=${base()}
+        part="button"
+        ?disabled=${this.disabled || this.loading}
+        style=${o({ ...dynamicStyles, ...styles[this.kind] })}
+        @click=${this.handleClick}
+        @focus=${this.handleFocus}
+        @blur=${this.handleBlur}
+        aria-label="Button"
+        role="button"
+        tabindex="0"
+        @keydown=${(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                this.handleClick();
+                e.preventDefault();
+            }
+        }}
+      >
+        <slot name="prefix"></slot>
+        <slot></slot>
+        <slot name="suffix"></slot>
+        ${this.loading ? LoadingTemplate : ''}
+      </button>
+    `;
+    }
+}
+PlusButton.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: inline-block;
+        height: fit-content;
+        width: fit-content;
+      }
+      .plus-button {
+        border-top-left-radius: var(--border-top-left-radius, 0.375rem);
+        border-top-right-radius: var(--border-top-right-radius, 0.375rem);
+        border-bottom-left-radius: var(--border-bottom-left-radius, 0.375rem);
+        border-bottom-right-radius: var(--border-bottom-right-radius, 0.375rem);
+      }
+    `,
+];
+__decorate([
+    n({ type: String })
+], PlusButton.prototype, "kind", void 0);
+__decorate([
+    n({ type: String })
+], PlusButton.prototype, "status", void 0);
+__decorate([
+    n({ type: String })
+], PlusButton.prototype, "size", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        reflect: true,
+        converter: (value) => (value == 'false' || false ? false : true),
+    })
+], PlusButton.prototype, "disabled", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        reflect: true,
+        converter: (value) => (value == 'false' || false ? false : true),
+    })
+], PlusButton.prototype, "loading", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        reflect: true,
+        converter: (value) => (value == 'false' || false ? false : true),
+        attribute: 'full-width',
+    })
+], PlusButton.prototype, "fullWidth", void 0);
+
+export { PlusButton, PlusButton as default };

package/cdn/components/button/button.style.js

@@ -0,0 +1,68 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const baseButtonStyle = ce({
+    slots: {
+        base: [
+            'button plus-button plus-ui-element',
+            'inline-flex items-center justify-center',
+            'rounded-default',
+            'border',
+            'text-(--d-text)',
+            'border-(--d-border)',
+            'bg-(--d-bg-default)',
+            'enabled:hover:bg-(--d-bg-hovered)',
+            'enabled:active:bg-(--d-bg-pressed)',
+            'focus-visible:bg-(--d-bg-focused)',
+            'focus-visible:ring-default',
+        ],
+        loading: [
+            'loading cursor-not-allowed relative',
+        ],
+    },
+    variants: {
+        size: {
+            sm: 'small text-sm p-2 gap-2',
+            md: 'medium text-base px-3 py-2 gap-2.5',
+            lg: 'large text-lg px-4 py-2 gap-3',
+        },
+        kind: {
+            filled: 'filled',
+            outlined: 'outlined',
+            dashed: 'dashed border-dashed',
+            text: 'text',
+        },
+        status: {
+            default: 'default',
+            primary: 'primary',
+            success: 'success',
+            warning: 'warning',
+            danger: 'danger',
+            info: 'info',
+        },
+        disabled: {
+            true: {
+                base: ['disabled cursor-not-allowed'],
+            },
+            false: {
+                base: ['cursor-pointer'],
+            },
+        },
+        loading: {
+            false: '',
+            true: 'loading cursor-not-allowed relative overflow-hidden',
+        },
+        fullWidth: {
+            true: 'w-full',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        kind: 'filled',
+        status: 'default',
+        disabled: false,
+        loading: false,
+        fullWidth: false,
+    },
+});
+
+export { baseButtonStyle };

package/cdn/components/button/index.js

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

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

@@ -0,0 +1,250 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { i, x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { buttonGroupStyle } from './button-group.style.js';
+import Tailwind from '../base/tailwind-base.js';
+import '../../index-B9iart53.js';
+import '../../global-Dh9axYQH.js';
+
+/**
+ * @tag plus-button-group
+ * @summary Button group component that groups related buttons together.
+ *
+ * @slot - The default slot for the buttons
+ *
+ * @cssproperty --button-group-gap - Gap between buttons in the group
+ *
+ * @example
+ * ```html
+ * <plus-button-group orientation="horizontal" override>
+ *   <plus-button>First</plus-button>
+ *   <plus-button>Second</plus-button>
+ *   <plus-button>Third</plus-button>
+ * </plus-button-group>
+ * ```
+ */
+class PlusButtonGroup extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * The orientation of the button group.
+         */
+        this.orientation = 'horizontal';
+        /**
+         * Determines whether the button group's properties override the properties of its child buttons.
+         * When true, all buttons in the group will have the same appearance.
+         * When false, each button can have its own properties.
+         * @default true
+         */
+        this.override = false;
+        /**
+         * Determines the visual style of the button
+         * - filled: Solid background color
+         * - outlined: Transparent background with border
+         * - dashed: Transparent background with dashed border
+         * - text: Text only without background or border
+         * @default 'filled'
+         */
+        this.kind = 'filled';
+        /**
+         * Sets the status/color variant of the button
+         * - 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 button
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Disables the button interaction
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Shows loading spinner and disables interaction
+         * @default false
+         */
+        this.loading = false;
+        this._buttons = [];
+    }
+    /**
+     * Gets all child buttons in the group
+     */
+    get buttons() {
+        return this._buttons;
+    }
+    /**
+     * Apply shared properties to buttons in the group.
+     * This method either overrides the properties of child buttons or respects their individual properties
+     * based on the override prop.
+     */
+    applyPropertiesToButtons() {
+        const isVertical = this.orientation === 'vertical';
+        this.buttons.forEach((button) => {
+            if (this.override) {
+                // Override button properties with group properties
+                button.setAttribute('size', this.size);
+                button.setAttribute('kind', this.kind);
+                button.setAttribute('status', this.status);
+                // Override disabled and loading states
+                if (this.disabled) {
+                    button.setAttribute('disabled', '');
+                }
+                else {
+                    button.removeAttribute('disabled');
+                }
+                if (this.loading) {
+                    button.setAttribute('loading', '');
+                }
+                else {
+                    button.removeAttribute('loading');
+                }
+            }
+            // Always set full-width attribute on buttons when orientation is vertical
+            if (isVertical) {
+                button.setAttribute('full-width', '');
+            }
+            else {
+                button.removeAttribute('full-width');
+            }
+        });
+    }
+    /**
+     * Apply styles to buttons based on their position in the group
+     */
+    applyStylesToButtons() {
+        const buttons = this.buttons;
+        const totalButtons = buttons.length;
+        const isHorizontal = this.orientation === 'horizontal';
+        // Apply styles to buttons
+        buttons.forEach((button, index) => {
+            // Reset all border radius custom properties
+            button.style.removeProperty('--border-top-left-radius');
+            button.style.removeProperty('--border-top-right-radius');
+            button.style.removeProperty('--border-bottom-left-radius');
+            button.style.removeProperty('--border-bottom-right-radius');
+            button.style.removeProperty('margin-left');
+            button.style.removeProperty('margin-top');
+            // Apply styles based on position
+            if (isHorizontal) {
+                // Horizontal orientation
+                if (index > 0) {
+                    // Not the first button
+                    button.style.setProperty('--border-top-left-radius', '0px');
+                    button.style.setProperty('--border-bottom-left-radius', '0px');
+                    button.style.marginLeft = '-1px';
+                }
+                if (index < totalButtons - 1) {
+                    // Not the last button
+                    button.style.setProperty('--border-top-right-radius', '0px');
+                    button.style.setProperty('--border-bottom-right-radius', '0px');
+                }
+            }
+            else {
+                // Vertical orientation
+                if (index > 0) {
+                    // Not the first button
+                    button.style.setProperty('--border-top-left-radius', '0px');
+                    button.style.setProperty('--border-top-right-radius', '0px');
+                    button.style.marginTop = '-1px';
+                }
+                if (index < totalButtons - 1) {
+                    // Not the last button
+                    button.style.setProperty('--border-bottom-left-radius', '0px');
+                    button.style.setProperty('--border-bottom-right-radius', '0px');
+                }
+            }
+        });
+    }
+    /**
+     * Updates the properties and styles of all buttons in the group
+     */
+    updateButtons() {
+        this.applyPropertiesToButtons();
+        this.applyStylesToButtons();
+    }
+    /**
+     * Handle slot changes: update button list and styles
+     */
+    handleSlotChange(e) {
+        const slot = e.target;
+        this._buttons = slot
+            .assignedElements()
+            .filter((element) => element.tagName.toLowerCase() === 'plus-button');
+        this.updateButtons();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        this.updateButtons();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'group');
+        // Initial update when connected to DOM
+        requestAnimationFrame(() => this.updateButtons());
+    }
+    render() {
+        return x `
+      <div
+        class=${buttonGroupStyle({
+            orientation: this.orientation,
+            size: this.size,
+            kind: this.kind,
+            status: this.status,
+            disabled: this.disabled,
+            loading: this.loading,
+        })}
+        part="base"
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+}
+PlusButtonGroup.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: inline-block;
+      }
+    `,
+];
+__decorate([
+    n({ type: String, reflect: true })
+], PlusButtonGroup.prototype, "orientation", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        converter: (value) => (value == 'false' || false ? false : true),
+    })
+], PlusButtonGroup.prototype, "override", void 0);
+__decorate([
+    n({ type: String })
+], PlusButtonGroup.prototype, "kind", void 0);
+__decorate([
+    n({ type: String })
+], PlusButtonGroup.prototype, "status", void 0);
+__decorate([
+    n({ type: String })
+], PlusButtonGroup.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusButtonGroup.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusButtonGroup.prototype, "loading", void 0);
+__decorate([
+    r()
+], PlusButtonGroup.prototype, "_buttons", void 0);
+
+export { PlusButtonGroup, PlusButtonGroup as default };

package/cdn/components/button-group/button-group.style.js

@@ -0,0 +1,52 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+/**
+ * Base styles for the button group component
+ */
+const buttonGroupStyle = ce({
+    base: [
+        'plus-button-group inline-flex plus-ui-element',
+        'gap-0',
+    ],
+    variants: {
+        orientation: {
+            horizontal: 'flex-row',
+            vertical: 'flex-col',
+        },
+        size: {
+            sm: 'text-xs',
+            md: 'text-sm',
+            lg: 'text-base',
+        },
+        kind: {
+            filled: 'button-group-filled',
+            outlined: 'button-group-outlined',
+            dashed: 'button-group-dashed',
+            text: 'button-group-text',
+        },
+        status: {
+            default: 'button-group-default',
+            primary: 'button-group-primary',
+            success: 'button-group-success',
+            warning: 'button-group-warning',
+            danger: 'button-group-danger',
+            info: 'button-group-info',
+        },
+        disabled: {
+            true: 'opacity-50 cursor-not-allowed',
+        },
+        loading: {
+            true: 'opacity-50 cursor-wait',
+        },
+    },
+    defaultVariants: {
+        orientation: 'horizontal',
+        size: 'md',
+        kind: 'filled',
+        status: 'default',
+        disabled: false,
+        loading: false,
+    },
+});
+
+export { buttonGroupStyle };

package/cdn/components/button-group/index.js

@@ -0,0 +1,12 @@
+import PlusButtonGroup from './button-group.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
+import './button-group.style.js';
+import '../../index-B9iart53.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+
+customElements.define('plus-button-group', PlusButtonGroup);
+
+export { PlusButtonGroup };