@plusui/library 0.1.0

package/cdn/components/input/input.style.js

@@ -0,0 +1,133 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const inputStyle = ce({
+    slots: {
+        host: 'font-sans antialiased flex flex-col items-start justify-start w-full relative',
+        base: '',
+        inputElement: 'focus:outline-none flex-1 w-full bg-transparent',
+        inputWrapper: [
+            'flex flex-row items-center justify-start flex-1 w-full cursor-text',
+            'rounded border border-solid',
+            'enabled:bg-color-surface enabled:text-color-default',
+            'placeholder-color-placeholder',
+        ],
+        prefix: 'flex flex-row items-center justify-start',
+        suffix: 'flex flex-row items-center justify-start',
+        clearButton: 'cursor-pointer flex flex-row items-center justify-center hover:text-color-caption',
+        passwordToggleButton: 'cursor-pointer flex flex-row items-center justify-center hover:text-color-caption',
+    },
+    variants: {
+        focus: {
+            true: {
+                inputWrapper: 'ring-default z-[1] border-color-primary',
+            },
+            false: {
+                inputWrapper: 'border-color-default hover:border-color-primary',
+            },
+        },
+        error: {
+            true: {
+                inputWrapper: 'border-color-danger hover:border-color-danger',
+            },
+            false: {
+                inputWrapper: 'border-color-default',
+            },
+        },
+        disabled: {
+            true: {
+                inputWrapper: [
+                    'border-color-disabled cursor-not-allowed',
+                    'bg-color-disabled text-color-disabled',
+                    'hover:border-color-disabled',
+                ],
+                inputElement: [
+                    'cursor-not-allowed text-color-disabled',
+                    'placeholder:text-color-disabled',
+                ],
+            },
+            false: {
+                host: 'cursor-text',
+                inputWrapper: 'cursor-text',
+            },
+        },
+        readonly: {
+            true: {
+                inputWrapper: [
+                    'bg-color-default border-color-default',
+                    'text-color-default pointer-events-none',
+                ],
+                inputElement: [
+                    'cursor-default text-color-default',
+                    'placeholder:text-color-default pointer-events-none',
+                ],
+            },
+            false: {
+                inputWrapper: 'pointer-events-auto',
+            },
+        },
+        isSelect: {
+            true: {
+                inputWrapper: 'cursor-pointer',
+                inputElement: 'cursor-pointer',
+            },
+            false: {
+                inputWrapper: 'cursor-text',
+                inputElement: 'cursor-text',
+            },
+        },
+        size: {
+            sm: {
+                host: 'gap-0.5',
+                inputWrapper: 'py-2 px-2 text-sm',
+                prefix: 'pr-2',
+                suffix: 'pl-2',
+                clearButton: 'min-w-5 h-5',
+                passwordToggleButton: 'min-w-5 h-5',
+            },
+            md: {
+                host: 'gap-1',
+                inputWrapper: 'py-2 px-3 text-base',
+                prefix: 'pr-2.5',
+                suffix: 'pl-2.5',
+                clearButton: 'min-w-5 h-5',
+                passwordToggleButton: 'min-w-5 h-5',
+            },
+            lg: {
+                host: 'gap-1.5',
+                inputWrapper: 'py-2 px-4 text-lg',
+                prefix: 'pr-3',
+                suffix: 'pl-3',
+                clearButton: 'min-w-5 h-5',
+                passwordToggleButton: 'min-w-5 h-5',
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            error: true,
+            focus: true,
+            class: {
+                inputWrapper: 'border-color-danger',
+            },
+        },
+        {
+            isSelect: true,
+            disabled: false,
+            readonly: false,
+            class: {
+                inputWrapper: 'cursor-pointer',
+                inputElement: 'cursor-pointer',
+            },
+        },
+    ],
+    defaultVariants: {
+        focus: false,
+        error: false,
+        disabled: false,
+        size: 'md',
+        isSelect: false,
+        readonly: false,
+    },
+});
+
+export { inputStyle };

package/cdn/components/label/label.style.js

@@ -0,0 +1,28 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const labelStyle = ce({
+    base: 'block font-sans font-medium text-color-default',
+    variants: {
+        size: {
+            sm: 'text-xs',
+            md: 'text-sm',
+            lg: 'text-base',
+        },
+        required: {
+            true: "after:content-['*'] after:text-color-default after:ml-0.5",
+            false: '',
+        },
+        disabled: {
+            true: {
+                base: 'text-color-disabled after:text-color-disabled',
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        required: false,
+        disabled: false,
+    },
+});
+
+export { labelStyle };

package/cdn/components/link/index.js

@@ -0,0 +1,9 @@
+import PlusLink from './link.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import './link.style.js';
+import '../../index-B9iart53.js';
+
+customElements.define('plus-link', PlusLink);

package/cdn/components/link/link.js

@@ -0,0 +1,168 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import Tailwind from '../base/tailwind-base.js';
+import { linkStyle } from './link.style.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @tag plus-link
+ * @since 0.0.0
+ * @status experimental
+ *
+ * PlusLink component provides a customizable link element for navigation and actions.
+ *
+ * @slot - The default slot for link content
+ * @slot prefix - Slot for content to be placed before the link content
+ * @slot suffix - Slot for content to be placed after the link content
+ *
+ * @csspart base - The component's base wrapper
+ */
+class PlusLink extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Controls the size of the link
+         * - sm: Small size with smaller text and spacing
+         * - md: Medium size with default text and spacing
+         * - lg: Large size with larger text and spacing
+         * - inherit: Inherits size from parent element
+         * @default 'inherit'
+         */
+        this.size = 'inherit';
+        /**
+         * When true, the link becomes non-interactive and shows disabled styling
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * When true, the link becomes non-interactive but maintains normal styling
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * The URL that the hyperlink points to
+         * @default ''
+         */
+        this.href = '';
+        /**
+         * Specifies where to display the linked URL
+         * Common values: _blank, _self, _parent, _top
+         * @default ''
+         */
+        this.target = '';
+        /**
+         * Specifies the relationship between the current document and the linked document
+         * Common values: nofollow, noopener, noreferrer
+         * @default ''
+         */
+        this.rel = '';
+        /**
+         * Sets the link to download the target URL instead of navigating
+         * Optional value specifies the suggested filename
+         * @default ''
+         */
+        this.download = '';
+        /**
+         * When true, displays loading state and disables interaction
+         * @default false
+         */
+        this.loading = false;
+        /**
+         * When true, link opens in new tab with secure attributes
+         * Automatically sets target="_blank" and rel="noopener noreferrer"
+         * @default false
+         */
+        this.external = false;
+    }
+    handleClick(e) {
+        if (this.disabled || this.readonly) {
+            e.preventDefault();
+        }
+        this.emit('plus-click');
+    }
+    handleFocus() {
+        this.emit('plus-focus');
+    }
+    handleBlur() {
+        this.emit('plus-blur');
+    }
+    render() {
+        const target = this.external ? '_blank' : this.target;
+        const rel = this.external ? 'noopener noreferrer' : this.rel;
+        let _underline;
+        if (this.underline) {
+            _underline = this.underline;
+        }
+        else if (this.disabled || this.readonly) {
+            _underline = 'never';
+        }
+        else {
+            _underline = 'hover';
+        }
+        return x `
+      <a
+        role="link"
+        class=${linkStyle({
+            size: this.size,
+            underline: _underline,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            notAllowed: this.disabled || this.readonly,
+        })}
+        href="${this.href}"
+        target="${target}"
+        rel="${rel}"
+        download="${this.download}"
+        aria-disabled="${this.disabled}"
+        aria-readonly="${this.readonly}"
+        tabindex="${this.disabled ? '-1' : '0'}"
+        part="base"
+        @click="${this.handleClick}"
+        @focus="${this.handleFocus}"
+        @blur="${this.handleBlur}"
+        ><slot name="prefix"></slot><slot></slot><slot name="suffix"></slot
+      ></a>
+    `;
+    }
+}
+__decorate([
+    n({ type: String })
+], PlusLink.prototype, "size", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        reflect: true,
+        converter: (value) => (value == 'false' || false ? false : true),
+    })
+], PlusLink.prototype, "disabled", void 0);
+__decorate([
+    n({
+        type: Boolean,
+        reflect: true,
+        converter: (value) => (value == 'false' || false ? false : true),
+    })
+], PlusLink.prototype, "readonly", void 0);
+__decorate([
+    n({ type: String })
+], PlusLink.prototype, "href", void 0);
+__decorate([
+    n({ type: String })
+], PlusLink.prototype, "target", void 0);
+__decorate([
+    n({ type: String })
+], PlusLink.prototype, "rel", void 0);
+__decorate([
+    n({ type: String })
+], PlusLink.prototype, "download", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusLink.prototype, "loading", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusLink.prototype, "external", void 0);
+__decorate([
+    n({ type: String })
+], PlusLink.prototype, "underline", void 0);
+
+export { PlusLink, PlusLink as default };

package/cdn/components/link/link.style.js

@@ -0,0 +1,41 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const linkStyle = ce({
+    base: [
+        'link plus-ui-element',
+        'font-normal appearance-none',
+        'flex items-center gap-1',
+    ],
+    variants: {
+        size: {
+            sm: 'small text-sm',
+            md: 'medium text-base',
+            lg: 'large text-lg',
+            inherit: '',
+        },
+        disabled: {
+            true: 'disabled text-color-disabled cursor-not-allowed',
+        },
+        readonly: {
+            true: 'readonly text-color-caption cursor-default',
+        },
+        notAllowed: {
+            true: '',
+            false: 'text-color-link visited:text-color-visited focus-visible:ring-default cursor-pointer',
+        },
+        underline: {
+            hover: 'hover:underline',
+            always: 'underline hover:underline',
+            never: 'hover:underline-none',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        disabled: false,
+        readonly: false,
+        underline: 'hover',
+        notAllowed: false,
+    },
+});
+
+export { linkStyle };

package/cdn/components/list-box-item/index.js

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

package/cdn/components/list-box-item/list-box-item.js

@@ -0,0 +1,101 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import Tailwind from '../base/tailwind-base.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import { o } from '../../style-map-DC_vNus2.js';
+import { listBoxItemStyle } from './list-box-item.style.js';
+import '../../global-Dh9axYQH.js';
+import '../../directive-DZCF8pFJ.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @tag plus-list-box-item
+ *
+ * List box item component that provides a selectable item for list-based containers.
+ * Offers consistent styling and behavior for interactive list items.
+ *
+ * @slot - The default slot for the list box item content
+ *
+ * @csspart base - The component's base wrapper
+ *
+ * @event click - Emitted when the list box item is clicked
+ *
+ * @cssproperty --i-bg-default - Controls the default background color
+ * @cssproperty --i-bg-hovered - Controls the background color when hovered
+ * @cssproperty --i-bg-pressed - Controls the background color when pressed
+ * @cssproperty --i-text-color - Controls the text color
+ * @cssproperty --i-selected-bg - Controls the background color when selected
+ */
+class PlusListBoxItem extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the size of the list box item
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Disables the list box item interaction
+         * When disabled, the item cannot be clicked or selected
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Sets the selected state of the list box item
+         * When selected, the item will display with a highlighted background
+         * @default false
+         */
+        this.selected = false;
+    }
+    /**
+     * Renders the list box item
+     * Applies the appropriate styles based on disabled and selected states
+     * @returns The rendered template
+     */
+    render() {
+        const defaultStyle = {
+            '--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-text-color': `var(--plus-color-text-default)`,
+            '--i-selected-bg': 'var(--plus-color-background-primary-invert-default)',
+        };
+        const disabledStyles = {
+            '--i-bg-default': 'var(--plus-color-background-disabled-default)',
+            '--i-bg-hovered': 'var(--plus-color-background-disabled-default)',
+            '--i-bg-pressed': 'var(--plus-color-background-disabled-default)',
+            '--i-text-color': `var(--plus-color-text-disabled)`,
+            '--i-selected-bg': 'var(--plus-color-background-disabled-default)',
+        };
+        const styles = this.disabled ? disabledStyles : defaultStyle;
+        return x `
+      <div
+        part="base"
+        style=${o(styles)}
+        class=${listBoxItemStyle({
+            size: this.size,
+            disabled: this.disabled,
+            selected: this.selected,
+        })}
+      >
+        <slot>${this.text}</slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    n({ type: String })
+], PlusListBoxItem.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value != 'false' })
+], PlusListBoxItem.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value != 'false' })
+], PlusListBoxItem.prototype, "selected", void 0);
+__decorate([
+    n({ attribute: 'text' })
+], PlusListBoxItem.prototype, "text", void 0);
+
+export { PlusListBoxItem, PlusListBoxItem as default };

package/cdn/components/list-box-item/list-box-item.style.js

@@ -0,0 +1,42 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const listBoxItemStyle = ce({
+    base: [
+        'plus-list-box-item',
+        'antialiased',
+        'font-sans',
+        'font-normal',
+        'flex',
+        'items-center',
+        'justify-start',
+        'min-w-full',
+        'py-2',
+        'text-[var(--i-text-color)]',
+        'cursor-pointer',
+        'transition-colors',
+        'duration-200',
+        'ease-in-out',
+    ],
+    variants: {
+        size: {
+            sm: 'small px-3 text-sm gap-2.5',
+            md: 'medium px-3 text-base gap-2.5',
+            lg: 'large px-4 text-lg gap-3',
+        },
+        disabled: {
+            true: 'cursor-not-allowed',
+            false: '',
+        },
+        selected: {
+            true: 'bg-[var(--i-selected-bg)]',
+            false: 'bg-[var(--i-bg-default)] hover:bg-[var(--i-bg-hovered)] active:bg-[var(--i-bg-pressed)]',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        disabled: false,
+        selected: false,
+    },
+});
+
+export { listBoxItemStyle };

package/cdn/components/modal/index.js

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