@plusui/library 0.1.0

package/cdn/components/radio/radio.js

@@ -0,0 +1,235 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { 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 { radioStyle } from './radio.style.js';
+import { o } from '../../style-map-DC_vNus2.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+import '../../directive-DZCF8pFJ.js';
+
+/**
+ * @tag plus-radio
+ * @summary Radio button component that allows single selection from a group of options.
+ *
+ * @slot - The radio button label content
+ *
+ * @csspart radio - The component's radio input element
+ *
+ * @event plus-change - Emitted when the radio button's checked state changes
+ *
+ * @example
+ * ```html
+ * <plus-radio name="gender" value="male">Male</plus-radio>
+ * <plus-radio name="gender" value="female">Female</plus-radio>
+ * ```
+ */
+class PlusRadio extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Sets the size of the radio button
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Indicates whether the radio button is checked
+         * @default false
+         */
+        this.checked = false;
+        /**
+         * Indicates if the radio button is in an error state
+         * @default false
+         */
+        this.error = false;
+        /**
+         * Disables the radio button interaction
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * Makes the radio button readonly (non-interactive but not disabled)
+         * @default false
+         */
+        this.readonly = false;
+        /**
+         * The name of the radio button, used for form submission and radio grouping
+         */
+        this.name = '';
+        /**
+         * Indicates if the radio input is required
+         */
+        this.required = false;
+        /**
+         * The value associated with the radio button
+         */
+        this.value = '';
+        /**
+         * Internal state to track if the radio button has focus
+         * @default false
+         */
+        this.hasFocus = false;
+    }
+    /**
+     * Handles the change event when the radio button is toggled
+     */
+    handleChange() {
+        if (!this.readonly && !this.disabled) {
+            this.checked = this.input.checked;
+            this.emit('plus-change', {
+                detail: {
+                    checked: this.checked,
+                    value: this.value || this.input.value,
+                    name: this.name || this.input.name,
+                },
+                bubbles: true,
+                composed: true,
+            });
+        }
+    }
+    /**
+     * Handles the focus event when the radio button gains focus
+     */
+    handleFocus() {
+        this.hasFocus = true;
+        this.emit('plus-focus');
+    }
+    /**
+     * Handles the blur event when the radio button loses focus
+     */
+    handleBlur() {
+        this.hasFocus = false;
+        this.emit('plus-blur');
+    }
+    render() {
+        const { host, wrapper, radio, dot, label } = radioStyle({
+            size: this.size,
+            disabled: this.disabled,
+            readonly: this.readonly,
+        });
+        const baseStyles = {
+            '--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-text-color': 'var(--plus-color-text-default)',
+            '--i-border-color': 'var(--plus-color-border-default)',
+            '--i-bg-checked': 'var(--plus-color-background-primary-default)',
+        };
+        const errorStyles = {
+            '--i-bg-default': 'var(--plus-color-background-danger-invert-default)',
+            '--i-bg-hovered': 'var(--plus-color-background-danger-invert-hovered)',
+            '--i-bg-pressed': 'var(--plus-color-background-danger-invert-pressed)',
+            '--i-bg-focused': 'var(--plus-color-background-danger-focused)',
+            '--i-border-color': 'var(--plus-color-border-danger)',
+            '--i-bg-checked': 'var(--plus-color-background-danger-default)',
+        };
+        const disabledStyles = {
+            '--i-bg-default': 'var(--plus-color-background-surface)',
+            '--i-bg-hovered': 'transparent',
+            '--i-bg-pressed': 'transparent',
+            '--i-bg-focused': 'transparent',
+            '--i-text-color': 'var(--plus-color-text-disabled)',
+            '--i-border-color': 'var(--plus-color-border-disabled)',
+            '--i-bg-checked': 'var(--plus-color-background-disabled)',
+        };
+        const readonlyStyles = {
+            '--i-bg-default': 'var(--plus-color-background-surface)',
+            '--i-bg-hovered': 'transparent',
+            '--i-bg-pressed': 'transparent',
+            '--i-bg-focused': 'transparent',
+            '--i-border-color': 'var(--plus-color-border-disabled)',
+            '--i-bg-checked': 'var(--plus-color-background-default-invert-default)',
+        };
+        const checkedStyles = {
+            '--i-border-color': 'var(--plus-color-border-primary)',
+            '--i-bg-hovered': 'var(--plus-color-background-primary-invert-hovered)',
+            '--i-bg-pressed': 'var(--plus-color-background-primary-invert-pressed)',
+            '--i-bg-focused': 'var(--plus-color-background-primary-invert-focused)',
+        };
+        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-checked': 'var(--bg-checked, var(--i-bg-checked))',
+        };
+        const globalStyles = {
+            ...baseStyles,
+            ...(this.checked && checkedStyles),
+            ...(this.error && errorStyles),
+            ...(this.disabled && disabledStyles),
+            ...(this.readonly && readonlyStyles),
+            ...dynamicStyles,
+        };
+        const radioId = `radio-${this.id || Math.random().toString(36).substring(2, 9)}`;
+        return x `
+      <div class=${host()} style=${o(globalStyles)}>
+        <div class=${wrapper()}>
+          <input
+            part="radio"
+            type="radio"
+            id=${radioId}
+            class=${radio()}
+            .name=${this.name}
+            .value=${this.value}
+            .checked=${this.checked}
+            ?disabled=${this.disabled || this.readonly}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+            @change=${this.handleChange}
+            ?required=${this.required}
+            aria-checked=${this.checked}
+            aria-disabled=${this.disabled || this.readonly}
+          />
+          <div class=${dot()}></div>
+        </div>
+        <label for=${radioId} class=${label()}>
+          <slot>${this.text}</slot>
+        </label>
+      </div>
+    `;
+    }
+}
+__decorate([
+    e('input[type="radio"]')
+], PlusRadio.prototype, "input", void 0);
+__decorate([
+    n({ type: String })
+], PlusRadio.prototype, "size", void 0);
+__decorate([
+    n({ type: String })
+], PlusRadio.prototype, "text", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusRadio.prototype, "checked", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusRadio.prototype, "error", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusRadio.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusRadio.prototype, "readonly", void 0);
+__decorate([
+    n()
+], PlusRadio.prototype, "name", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusRadio.prototype, "required", void 0);
+__decorate([
+    n()
+], PlusRadio.prototype, "value", void 0);
+__decorate([
+    r()
+], PlusRadio.prototype, "hasFocus", void 0);
+
+export { PlusRadio, PlusRadio as default };

package/cdn/components/radio/radio.style.js

@@ -0,0 +1,98 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const radioStyle = ce({
+    slots: {
+        host: [
+            'inline-flex',
+            'items-center',
+            'plus-ui-element',
+        ],
+        wrapper: ['relative', 'flex', 'items-center'],
+        radio: [
+            'radio-input',
+            'peer',
+            'appearance-none',
+            'rounded-full',
+            'border-2',
+            'transition-all',
+            'duration-200',
+            'cursor-pointer',
+            'border',
+            'text-(--d-text)',
+            'border-(--d-border)',
+            'bg-(--d-bg-default)',
+            'enabled:hover:bg-(--d-bg-hovered)',
+            'enabled:active:bg-(--d-bg-pressed)',
+            'enabled:focus-visible:bg-(--d-bg-focused)',
+            'enabled:focus-visible:ring-default',
+            'disabled:cursor-not-allowed',
+        ],
+        dot: [
+            'absolute',
+            'left-1/2',
+            'top-1/2',
+            '-translate-x-1/2',
+            '-translate-y-1/2',
+            'rounded-full',
+            'bg-(--d-bg-checked)',
+            'transition-all',
+            'duration-200',
+            'cursor-pointer',
+            'opacity-0',
+            'peer-checked:opacity-100',
+            'peer-checked:scale-100',
+            'peer-disabled:cursor-not-allowed',
+            'scale-0',
+        ],
+        label: [
+            'select-none',
+            'cursor-pointer',
+            'text-(--d-text)',
+        ],
+    },
+    variants: {
+        size: {
+            sm: {
+                host: 'gap-1.5',
+                radio: 'size-4',
+                dot: 'size-2',
+                label: 'text-sm',
+            },
+            md: {
+                host: 'gap-2',
+                radio: 'size-4.5',
+                dot: 'size-2.5',
+                label: 'text-base',
+            },
+            lg: {
+                host: 'gap-2.5',
+                radio: 'size-5',
+                dot: 'size-3',
+                label: 'text-lg',
+            },
+            inherit: {},
+        },
+        disabled: {
+            true: {
+                host: 'cursor-not-allowed',
+                radio: ['cursor-not-allowed'],
+                label: ['cursor-not-allowed'],
+            },
+        },
+        readonly: {
+            true: {
+                host: 'cursor-default pointer-events-none',
+                radio: 'cursor-default',
+                label: ['cursor-default'],
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        error: false,
+        disabled: false,
+        readonly: false,
+    },
+});
+
+export { radioStyle };

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

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

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

@@ -0,0 +1,142 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import Tailwind from '../base/tailwind-base.js';
+import { radioGroupStyle } from './radio-group.style.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+
+class PlusRadioGroup extends Tailwind {
+    constructor() {
+        super();
+        this.name = '';
+        this.value = '';
+        this.disabled = false;
+        this.required = false;
+        /**
+         * The size of all radio buttons in the group
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Shows error styling on the radio group
+         */
+        this.error = false;
+        /**
+         * Orientation of the radio buttons
+         * - horizontal: Radio buttons are arranged side by side
+         * - vertical: Radio buttons are stacked vertically
+         */
+        this.orientation = 'horizontal';
+        this.internals = this.attachInternals();
+    }
+    updateRadios() {
+        const radios = this.querySelectorAll('plus-radio');
+        radios.forEach((element) => {
+            const radio = element;
+            radio.name = this.name;
+            radio.checked = radio.value === this.value;
+            radio.disabled = this.disabled;
+            radio.size = this.size;
+            radio.error = this.error;
+        });
+    }
+    handlePlusChange(event) {
+        const target = event.target;
+        const detail = event.detail;
+        if (detail?.checked) {
+            // Update all radio buttons in the group
+            const radios = this.querySelectorAll('plus-radio');
+            radios.forEach((element) => {
+                const radio = element;
+                if (radio !== target) {
+                    radio.checked = false;
+                }
+            });
+            // Update the value
+            this.value = detail.value;
+            // Update form value
+            this.internals.setFormValue(this.value);
+            // Emit group change event
+            this.emit('plus-group-change', {
+                detail: {
+                    value: this.value,
+                    name: this.name,
+                },
+                bubbles: true,
+                composed: true,
+            });
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('name') ||
+            changedProperties.has('value') ||
+            changedProperties.has('disabled') ||
+            changedProperties.has('size') ||
+            changedProperties.has('error')) {
+            this.updateRadios();
+        }
+    }
+    firstUpdated() {
+        // Find any radio with checked attribute and use its value
+        const checkedRadio = Array.from(this.querySelectorAll('plus-radio')).find((radio) => radio.hasAttribute('checked'));
+        if (checkedRadio && !this.value) {
+            this.value = checkedRadio.value;
+        }
+        this.updateRadios();
+        if (this.value) {
+            this.internals.setFormValue(this.value);
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('plus-change', (e) => this.handlePlusChange(e));
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('plus-change', this.handlePlusChange);
+    }
+    render() {
+        const { base } = radioGroupStyle({
+            orientation: this.orientation,
+        });
+        return x `
+      <div
+        role="radiogroup"
+        part="base"
+        class=${base()}
+        aria-required=${this.required}
+        aria-labelledby=${this.name}
+      >
+        <input type="hidden" name=${this.name} .value=${this.value || ''} />
+        <slot @slotchange=${() => this.updateRadios()}></slot>
+      </div>
+    `;
+    }
+}
+PlusRadioGroup.formAssociated = true;
+__decorate([
+    n()
+], PlusRadioGroup.prototype, "name", void 0);
+__decorate([
+    n()
+], PlusRadioGroup.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusRadioGroup.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusRadioGroup.prototype, "required", void 0);
+__decorate([
+    n({ type: String })
+], PlusRadioGroup.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusRadioGroup.prototype, "error", void 0);
+__decorate([
+    n()
+], PlusRadioGroup.prototype, "orientation", void 0);
+
+export { PlusRadioGroup, PlusRadioGroup as default };

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

@@ -0,0 +1,18 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const radioGroupStyle = ce({
+    slots: {
+        base: 'flex',
+    },
+    variants: {
+        orientation: {
+            horizontal: { base: 'flex-row gap-4' },
+            vertical: { base: 'flex-col' },
+        },
+    },
+    defaultVariants: {
+        orientation: 'horizontal',
+    },
+});
+
+export { radioGroupStyle };

package/cdn/components/rating/index.js

@@ -0,0 +1,20 @@
+import PlusRating from './rating.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../state-D1d5Sfj8.js';
+import '../../style-map-DC_vNus2.js';
+import '../../directive-DZCF8pFJ.js';
+import '../../if-defined-D-m3dgRf.js';
+import './rating.style.js';
+import '../../index-B9iart53.js';
+import '../label/label.style.js';
+import '../caption/caption.style.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import '../svg-icon/svg-icon.js';
+import '../../unsafe-html-BhmP6ONc.js';
+import '../svg-icon/icons.js';
+
+customElements.define('plus-rating', PlusRating);
+
+export { PlusRating };