@plusui/library 0.1.0

package/cdn/components/caption/caption.style.js

@@ -0,0 +1,29 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const captionStyle = ce({
+    base: 'block plus-ui-element font-normal text-color-caption',
+    variants: {
+        error: {
+            true: 'text-color-danger',
+            false: '',
+        },
+        size: {
+            sm: 'text-xs',
+            md: 'text-sm',
+            lg: 'text-base',
+        },
+        disabled: {
+            true: {
+                base: 'text-color-disabled',
+            },
+        },
+    },
+    compoundVariants: [],
+    defaultVariants: {
+        error: false,
+        size: 'md',
+        disabled: false,
+    },
+});
+
+export { captionStyle };

package/cdn/components/checkbox/checkbox.js

@@ -0,0 +1,205 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { e } from '../../query-CHb9Ft_d.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import { l } from '../../live-BOAtKRUN.js';
+import Tailwind from '../base/tailwind-base.js';
+import { checkboxStyle } from './checkbox.style.js';
+import '../svg-icon/index.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../directive-DZCF8pFJ.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+import '../svg-icon/svg-icon.js';
+import '../../unsafe-html-BhmP6ONc.js';
+import '../svg-icon/icons.js';
+
+/**
+ * @tag plus-checkbox
+ *
+ * Checkbox component allowing users to select one or more options.
+ *
+ * @slot - The label for the checkbox.
+ *
+ * @csspart base - The component's base wrapper (label).
+ * @csspart control - The container for the actual checkbox input and its visual representation.
+ * @csspart checkbox - The visual representation of the checkbox.
+ * @csspart icon - The checkmark or indeterminate icon.
+ * @csspart label - The text label container.
+ *
+ * @property {boolean} error - If true, the checkbox is displayed in an error state.
+ *
+ * @event plus-change - Emitted when the checkbox's checked state changes.
+ * @event plus-focus - Emitted when the checkbox gains focus.
+ * @event plus-blur - Emitted when the checkbox loses focus.
+ *
+ * @cssproperty --checkbox-size - Controls the size of the checkbox control. Typically maps to sm, md, lg tokens.
+ * @cssproperty --checkbox-color-default - Default background color.
+ * @cssproperty --checkbox-color-checked - Background color when checked.
+ * @cssproperty --checkbox-color-border - Border color.
+ * @cssproperty --checkbox-color-border-checked - Border color when checked.
+ * @cssproperty --checkbox-color-icon - Color of the checkmark/indeterminate icon.
+ * @cssproperty --checkbox-border-color-error - Border color in the error state.
+ */
+class PlusCheckbox extends Tailwind {
+    constructor() {
+        super();
+        /** The size of the checkbox. */
+        this.size = 'md';
+        /** Whether the checkbox is checked. */
+        this.checked = false;
+        /** Whether the checkbox is in an indeterminate state. */
+        this.indeterminate = false;
+        /** Whether the checkbox is disabled. */
+        this.disabled = false;
+        /** The value associated with the checkbox. Submitted with the form data if checked. */
+        this.value = 'on';
+        /** Whether the checkbox is in an error state. */
+        this.error = false;
+        this.internals = this.attachInternals();
+        this.addEventListener('click', (event) => {
+            // Prevent the click event from propagating from the host element
+            // We rely on the internal input's click/change
+            if (event.target === this) {
+                event.stopPropagation();
+            }
+        });
+    }
+    setFormValue() {
+        // If checked, send the value; otherwise, send null.
+        this.internals.setFormValue(this.checked ? this.value : null);
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('value') || changedProperties.has('checked')) {
+            this.setFormValue();
+        }
+    }
+    /**
+     * Called when the associated form is reset.
+     * Resets the checkbox to its initial checked state.
+     * We need to specific attribute initialChecked
+     */
+    formResetCallback() {
+        const initialChecked = this.hasAttribute('checked');
+        this.checked = initialChecked;
+        this.indeterminate = false;
+        this.setFormValue();
+    }
+    /**
+     * Called when the disabled state of the parent form changes.
+     */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    handleFocus() {
+        this.emit('plus-focus');
+    }
+    handleBlur() {
+        this.emit('plus-blur');
+    }
+    // private handleClick() {
+    //   // No direct action needed here, handled by input change
+    // }
+    handleChange(event) {
+        const target = event.target;
+        this.checked = target.checked;
+        this.indeterminate = false;
+        this.setFormValue(); // Update form value on change
+        this.emit('plus-change');
+    }
+    /** Clicks the checkbox */
+    click() {
+        this.input?.click();
+    }
+    /** Focuses the checkbox */
+    focus(options) {
+        this.input?.focus(options);
+    }
+    /** Blurs the checkbox */
+    blur() {
+        this.input?.blur();
+    }
+    render() {
+        const { base, control, checkbox, icon, label } = checkboxStyle({
+            size: this.size,
+            checked: this.checked,
+            indeterminate: this.indeterminate,
+            disabled: this.disabled,
+            error: this.error,
+        });
+        const uniqueId = `checkbox-${Math.random().toString(36).substring(2, 9)}`;
+        return x `
+      <label part="base" for=${uniqueId} class=${base()}>
+        <span part="control" class=${control()}>
+          <input
+            id=${uniqueId}
+            type="checkbox"
+            role="checkbox"
+            class="sr-only"
+            name=${this.name ?? ''}
+            aria-checked=${this.indeterminate
+            ? 'mixed'
+            : this.checked
+                ? 'true'
+                : 'false'}
+            aria-disabled=${this.disabled ? 'true' : 'false'}
+            aria-invalid=${this.error ? 'true' : 'false'}
+            .value=${this.value}
+            .checked=${l(this.checked)}
+            .indeterminate=${this.indeterminate}
+            ?disabled=${this.disabled}
+            @change=${this.handleChange}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+            @click=${(e) => e.stopPropagation()}
+          />
+          <span part="checkbox" class=${checkbox()} aria-hidden="true">
+            <plus-svg-icon
+              part="icon"
+              class=${icon()}
+              iconName=${this.indeterminate ? 'minus' : 'check'}
+            ></plus-svg-icon>
+          </span>
+        </span>
+        <span part="label" class=${label()}>
+          <slot>${this.text}</slot>
+        </span>
+      </label>
+    `;
+    }
+}
+// Indicate that this component can participate in forms
+PlusCheckbox.formAssociated = true;
+__decorate([
+    r()
+], PlusCheckbox.prototype, "internals", void 0);
+__decorate([
+    e('input[type="checkbox"]')
+], PlusCheckbox.prototype, "input", void 0);
+__decorate([
+    n()
+], PlusCheckbox.prototype, "name", void 0);
+__decorate([
+    n({ reflect: true })
+], PlusCheckbox.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusCheckbox.prototype, "checked", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusCheckbox.prototype, "indeterminate", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusCheckbox.prototype, "disabled", void 0);
+__decorate([
+    n()
+], PlusCheckbox.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusCheckbox.prototype, "error", void 0);
+__decorate([
+    n()
+], PlusCheckbox.prototype, "text", void 0);
+
+export { PlusCheckbox };

package/cdn/components/checkbox/checkbox.style.js

@@ -0,0 +1,158 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const checkboxStyle = ce({
+    slots: {
+        base: [
+            'plus-checkbox',
+            'inline-flex items-center gap-2 group/base cursor-pointer',
+        ],
+        control: [
+            'relative flex items-center justify-center flex-shrink-0',
+        ],
+        checkbox: [
+            'flex items-center justify-center border rounded',
+            'bg-color-surface text-color-transparent',
+            'transition-colors duration-200 ease-in-out',
+        ],
+        icon: [
+            'transition-transform duration-200 ease-in-out scale-0',
+        ],
+        label: ['text-color-default'],
+    },
+    variants: {
+        size: {
+            sm: {
+                base: 'text-sm',
+                control: 'w-4 h-4',
+                checkbox: 'w-4 h-4',
+                icon: 'text-[10px]',
+                label: 'text-sm',
+            },
+            md: {
+                base: 'text-base',
+                control: 'w-4.5 h-4.5',
+                checkbox: 'w-4.5 h-4.5',
+                icon: 'text-[12px]',
+                label: 'text-base',
+            },
+            lg: {
+                base: 'text-lg',
+                control: 'w-5 h-5',
+                checkbox: 'w-5 h-5',
+                icon: 'text-[14px]',
+                label: 'text-lg',
+            },
+        },
+        checked: {
+            true: {
+                checkbox: 'bg-color-primary-default border-transparent text-color-base',
+                icon: 'scale-100',
+            },
+        },
+        indeterminate: {
+            true: {
+                checkbox: 'bg-color-primary-default border-transparent text-color-base',
+                icon: 'scale-100',
+            },
+        },
+        disabled: {
+            true: {
+                base: 'cursor-not-allowed',
+                checkbox: 'bg-color-disabled border-color-disabled text-color-disabled',
+                label: 'text-color-disabled',
+            },
+        },
+        error: {
+            true: {
+                checkbox: 'bg-color-danger-invert-default border-color-danger',
+                label: '',
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            disabled: false,
+            checked: false,
+            indeterminate: false,
+            error: false,
+            class: {
+                checkbox: [
+                    'border-color-default group-hover/base:bg-color-default-hovered group-active/base:bg-color-default-pressed',
+                ],
+            },
+        },
+        {
+            disabled: false,
+            checked: true,
+            indeterminate: false,
+            error: false,
+            class: {
+                checkbox: [
+                    'group-hover/base:bg-color-primary-hover',
+                    'group-active/base:bg-color-primary-pressed',
+                ],
+            },
+        },
+        {
+            disabled: false,
+            checked: false,
+            indeterminate: true,
+            error: false,
+            class: {
+                checkbox: [
+                    'group-hover/base:bg-color-primary-hover',
+                    'group-active/base:bg-color-primary-pressed',
+                ],
+            },
+        },
+        {
+            disabled: false,
+            checked: false,
+            indeterminate: false,
+            error: true,
+            class: {
+                checkbox: [
+                    'border-color-danger group-hover/base:bg-color-danger-invert-hovered group-active/base:bg-color-danger-invert-pressed',
+                ],
+                label: '',
+            },
+        },
+        {
+            disabled: false,
+            checked: true,
+            indeterminate: false,
+            error: true,
+            class: {
+                checkbox: [
+                    'bg-color-danger-default',
+                    'group-hover/base:bg-color-danger-hovered',
+                    'group-active/base:bg-color-danger-pressed',
+                ],
+                label: '',
+            },
+        },
+        {
+            disabled: false,
+            checked: false,
+            indeterminate: true,
+            error: true,
+            class: {
+                checkbox: [
+                    'bg-color-danger-default',
+                    'group-hover/base:bg-color-danger-hovered',
+                    'group-active/base:bg-color-danger-pressed',
+                ],
+                label: '',
+            },
+        },
+    ],
+    defaultVariants: {
+        size: 'md',
+        checked: false,
+        indeterminate: false,
+        disabled: false,
+        error: false,
+    },
+});
+
+export { checkboxStyle };

package/cdn/components/checkbox/index.js

@@ -0,0 +1,20 @@
+import { PlusCheckbox } from './checkbox.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
+import '../../query-CHb9Ft_d.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../live-BOAtKRUN.js';
+import '../../directive-DZCF8pFJ.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import './checkbox.style.js';
+import '../../index-B9iart53.js';
+import '../svg-icon/index.js';
+import '../svg-icon/svg-icon.js';
+import '../../unsafe-html-BhmP6ONc.js';
+import '../svg-icon/icons.js';
+
+customElements.define('plus-checkbox', PlusCheckbox);
+
+export { PlusCheckbox };

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

@@ -0,0 +1,106 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { o } from '../../query-assigned-elements-B8Evmg7O.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import Tailwind from '../base/tailwind-base.js';
+import { checkboxGroupStyle } from './checkbox-group.style.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @tag plus-checkbox-group
+ *
+ * A container for grouping related checkboxes.
+ *
+ * @slot - Default slot for `plus-checkbox` elements.
+ *
+ * @csspart base - The main container element.
+ *
+ * @event plus-change - Emitted when the value of the group changes (any checkbox is checked/unchecked).
+ */
+class PlusCheckboxGroup extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /** The selected values in the group. */
+        this.value = [];
+        /** Whether to display the checkboxes vertically. */
+        this.vertical = false;
+        /** The size of the checkboxes in the group. */
+        this.size = 'md';
+        /** Whether the entire group is disabled. */
+        this.disabled = false;
+        this.handleCheckboxChange = (event) => {
+            if (event.target === this) {
+                return;
+            }
+            const target = event.target;
+            if (!this.checkboxes.includes(target)) {
+                return;
+            }
+            const targetValue = target.value ?? '';
+            const oldValue = [...this.value];
+            if (target.checked) {
+                if (!this.value.includes(targetValue)) {
+                    this.value = [...this.value, targetValue];
+                }
+            }
+            else {
+                this.value = this.value.filter((v) => v !== targetValue);
+            }
+            if (JSON.stringify(oldValue) !== JSON.stringify(this.value)) {
+                this.updateCheckboxes();
+                this.emit('plus-change', { detail: { value: this.value } });
+            }
+        };
+    }
+    handleSlotChange() {
+        this.updateCheckboxes();
+    }
+    updateCheckboxes() {
+        if (!this.checkboxes)
+            return;
+        this.checkboxes.forEach((checkbox) => {
+            checkbox.size = this.size;
+            checkbox.disabled = this.disabled;
+            checkbox.checked = this.value.includes(checkbox.value ?? '');
+        });
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('plus-change', this.handleCheckboxChange);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('plus-change', this.handleCheckboxChange);
+    }
+    render() {
+        const { base } = checkboxGroupStyle({ vertical: this.vertical });
+        return x `
+      <div
+        part="base"
+        role="group"
+        class=${base()}
+        @slotchange=${this.handleSlotChange}
+      >
+        <slot></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    o({ selector: 'plus-checkbox', flatten: true })
+], PlusCheckboxGroup.prototype, "checkboxes", void 0);
+__decorate([
+    n({ type: Array })
+], PlusCheckboxGroup.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusCheckboxGroup.prototype, "vertical", void 0);
+__decorate([
+    n({ reflect: true })
+], PlusCheckboxGroup.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusCheckboxGroup.prototype, "disabled", void 0);
+
+export { PlusCheckboxGroup };

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

@@ -0,0 +1,39 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const checkboxGroupStyle = ce({
+    slots: {
+        base: [
+            'plus-checkbox-group',
+            'flex w-full relative gap-0.5',
+        ],
+    },
+    variants: {
+        vertical: {
+            true: {
+                base: 'flex-col items-start',
+            },
+            false: {
+                base: 'flex-row items-center flex-wrap',
+            },
+        },
+    },
+    compoundVariants: [
+        {
+            vertical: false,
+            class: {
+                base: 'gap-x-5 gap-y-2',
+            },
+        },
+        {
+            vertical: true,
+            class: {
+                base: 'gap-2',
+            },
+        },
+    ],
+    defaultVariants: {
+        vertical: false,
+    },
+});
+
+export { checkboxGroupStyle };

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

@@ -0,0 +1,13 @@
+import { PlusCheckboxGroup } from './checkbox-group.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../query-assigned-elements-B8Evmg7O.js';
+import '../../base-Cl6v8-BZ.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import './checkbox-group.style.js';
+import '../../index-B9iart53.js';
+
+customElements.define('plus-checkbox-group', PlusCheckboxGroup);
+
+export { PlusCheckboxGroup };