@plusui/library 0.1.0

package/cdn/components/rating/rating.js

@@ -0,0 +1,301 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { E, x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { o as o$1 } from '../../style-map-DC_vNus2.js';
+import { o } from '../../if-defined-D-m3dgRf.js';
+import { ratingStyle } from './rating.style.js';
+import Tailwind from '../base/tailwind-base.js';
+import '../svg-icon/svg-icon.js';
+import { labelStyle } from '../label/label.style.js';
+import { captionStyle } from '../caption/caption.style.js';
+import '../../directive-DZCF8pFJ.js';
+import '../../index-B9iart53.js';
+import '../../global-Dh9axYQH.js';
+import '../../unsafe-html-BhmP6ONc.js';
+import '../svg-icon/icons.js';
+
+/**
+ * @tag plus-rating
+ * @summary A rating component to display and optionally set a rating value.
+ *
+ * @csspart host - The main container element.
+ * @csspart star-container - The container for each star.
+ * @csspart star-icon - Each individual star icon.
+ * @csspart star-partial - The element used to display partial stars.
+ *
+ * @event plus-change - Emitted when the rating value changes via user interaction.
+ * @event plus-hover - Emitted when the user hovers over a star, includes the potential value.
+ *
+ * @cssprop [--star-color-active=--color-warning-500] - Color of active/selected stars.
+ * @cssprop [--star-color-inactive=--color-neutral-300] - Color of inactive stars.
+ * @cssprop [--star-color-hover=--plus-color-text-primary] - Color of stars on hover.
+ */
+class PlusRating extends Tailwind {
+    constructor() {
+        super(...arguments);
+        this.value = 0;
+        this.max = 5;
+        this.precision = 1; // Steps: 1 for full stars, 0.5 for half, 0.1 etc.
+        this.readonly = false;
+        this.disabled = false;
+        this.size = 'md';
+        /** The name of the icon to use for empty rating items. */
+        this.emptyIconName = 'regular-star';
+        /** The name of the icon to use for filled rating items. */
+        this.filledIconName = 'solid-star';
+        this.required = false; // Add required property if not already present
+        // Internal state for hover effect
+        this.hoverValue = 0;
+        this.isHovering = false;
+        this.error = false; // Add error state
+    }
+    // Styles computed by tailwind-variants
+    // Initialize styles in constructor or connectedCallback if needed,
+    // or call ratingStyle directly in render.
+    // Add connectedCallback to clamp initial value
+    connectedCallback() {
+        super.connectedCallback();
+        this.value = this.clampValue(this.value);
+    }
+    clampValue(value) {
+        const roundedValue = Math.round(value / this.precision) * this.precision;
+        return Math.max(0, Math.min(roundedValue, this.max));
+    }
+    getStarValue(index) {
+        // Calculate the value this star represents (e.g., 1, 2, 3, ...)
+        return index + 1;
+    }
+    // Helper function for ARIA value text and tooltips
+    getStarLabel(value) {
+        // Simple label, can be customized further (e.g., localization)
+        const roundedValue = this.clampValue(value);
+        return `${roundedValue} out of ${this.max} stars`;
+    }
+    handleMouseOver(index) {
+        if (this.readonly || this.disabled)
+            return;
+        this.isHovering = true;
+        this.hoverValue = this.getStarValue(index);
+        this.emit('plus-hover', {
+            detail: { phase: 'start', value: this.hoverValue },
+        });
+    }
+    handleMouseLeave() {
+        if (this.readonly || this.disabled)
+            return;
+        this.isHovering = false;
+        this.hoverValue = 0;
+        this.emit('plus-hover', { detail: { phase: 'end', value: 0 } });
+    }
+    handleClick(index) {
+        if (this.readonly || this.disabled)
+            return;
+        const newValue = this.clampValue(this.getStarValue(index));
+        this.value = newValue;
+        this.error = false; // Clear error on interaction
+        this.emit('plus-change', { detail: { value: this.value } });
+    }
+    // --- Keyboard Navigation ---
+    handleKeyDown(event) {
+        if (this.readonly || this.disabled) {
+            return;
+        }
+        let newValue = this.value;
+        let valueChanged = false;
+        switch (event.key) {
+            case 'ArrowLeft':
+                newValue = Math.max(0, this.value - this.precision);
+                valueChanged = true;
+                break;
+            case 'ArrowRight':
+                newValue = Math.min(this.max, this.value + this.precision);
+                valueChanged = true;
+                break;
+            case 'Home':
+                newValue = 0;
+                valueChanged = true;
+                break;
+            case 'End':
+                newValue = this.max;
+                valueChanged = true;
+                break;
+            default:
+                // Ignore other keys
+                return;
+        }
+        if (valueChanged) {
+            event.preventDefault(); // Prevent browser scrolling etc.
+            const clampedNewValue = this.clampValue(newValue);
+            if (clampedNewValue !== this.value) {
+                this.value = clampedNewValue;
+                this.error = false; // Clear error on interaction
+                this.emit('plus-change', { detail: { value: this.value } });
+            }
+        }
+    }
+    // --- End Keyboard Navigation ---
+    /** Checks validity and sets the error state. Returns true if valid, false otherwise. */
+    reportValidity() {
+        const isValid = !(this.required && (!this.value || this.value <= 0));
+        this.error = !isValid;
+        return isValid;
+    }
+    render() {
+        const displayValue = this.isHovering ? this.hoverValue : this.value;
+        const styles = ratingStyle({
+            size: this.size,
+            disabled: this.disabled,
+            readonly: this.readonly,
+        });
+        const hostTitle = this.isHovering
+            ? this.getStarLabel(this.hoverValue)
+            : this.getStarLabel(this.value);
+        const labelId = 'rating-label';
+        const captionId = 'rating-caption';
+        // Label Template - Pass error state
+        const LabelTemplate = () => this.label
+            ? x `<label
+            id=${labelId}
+            class=${labelStyle({
+                size: this.size,
+                required: this.required,
+            })}
+            for="rating-host"
+            >${this.label}</label
+          >`
+            : E;
+        // Caption Template - Pass error state
+        const CaptionTemplate = () => {
+            // Show error message if error state is true, otherwise show caption
+            const message = this.error ? 'This field is required' : this.caption; // Basic error message
+            return message
+                ? x `<div
+            id=${captionId}
+            class=${captionStyle({ size: this.size, error: this.error })}
+          >
+            ${message}
+          </div>`
+                : E;
+        };
+        return x `
+      <div class="flex flex-col items-start justify-start gap-1">
+        ${LabelTemplate()}
+        <div
+          id="rating-host"
+          class=${styles.host()}
+          role="slider"
+          aria-label=${o(this.label ? undefined : 'Rating')}
+          aria-labelledby=${o(this.label ? labelId : undefined)}
+          aria-describedby=${o(this.caption || this.error ? captionId : undefined)}
+          aria-invalid=${this.error}
+          aria-required=${this.required}
+          aria-valuemin="0"
+          aria-valuemax=${this.max}
+          aria-valuenow=${this.value}
+          aria-readonly=${this.readonly}
+          aria-disabled=${this.disabled}
+          aria-valuetext=${this.getStarLabel(this.value)}
+          tabindex=${this.disabled ? '-1' : '0'}
+          title=${hostTitle}
+          @mouseleave=${this.handleMouseLeave}
+          @keydown=${this.handleKeyDown}
+        >
+          ${[...Array(this.max)].map((_, i) => {
+            const starValue = this.getStarValue(i);
+            const shouldBeFilled = starValue <= displayValue;
+            const isPartiallyActive = starValue - 1 < displayValue && displayValue < starValue;
+            const partialWidth = isPartiallyActive
+                ? `${(displayValue - (starValue - 1)) * 100}%`
+                : '0%';
+            const currentIconName = shouldBeFilled
+                ? this.filledIconName
+                : this.emptyIconName;
+            const iconColorClass = shouldBeFilled
+                ? 'text-color-primary'
+                : 'text-color-placeholder';
+            const currentIconColorClass = this.isHovering && shouldBeFilled
+                ? 'text-color-primary'
+                : iconColorClass;
+            const starTooltip = this.getStarLabel(starValue);
+            return x `
+              <span
+                class=${styles.starContainer()}
+                title=${starTooltip}
+                @mouseover=${() => this.handleMouseOver(i)}
+                @click=${() => this.handleClick(i)}
+              >
+                <!-- Background Star -->
+                <span class="${styles.starIcon()} ${currentIconColorClass}">
+                  <plus-svg-icon iconName=${currentIconName}></plus-svg-icon>
+                </span>
+
+                <!-- Foreground Partial Star -->
+                ${isPartiallyActive
+                ? x `
+                      <span
+                        class="${styles.starPartial()} ${styles.starIcon()} text-color-primary"
+                        style=${o$1({ width: partialWidth })}
+                      >
+                        <plus-svg-icon
+                          iconName=${this.filledIconName}
+                        ></plus-svg-icon>
+                      </span>
+                    `
+                : E}
+              </span>
+            `;
+        })}
+        </div>
+        ${CaptionTemplate()}
+      </div>
+    `;
+    }
+}
+PlusRating.styles = [...Tailwind.styles];
+__decorate([
+    n({ type: Number, reflect: true })
+], PlusRating.prototype, "value", void 0);
+__decorate([
+    n({ type: Number })
+], PlusRating.prototype, "max", void 0);
+__decorate([
+    n({ type: Number })
+], PlusRating.prototype, "precision", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusRating.prototype, "readonly", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusRating.prototype, "disabled", void 0);
+__decorate([
+    n({ type: String })
+], PlusRating.prototype, "size", void 0);
+__decorate([
+    n()
+], PlusRating.prototype, "name", void 0);
+__decorate([
+    n({ attribute: 'empty-icon-name' })
+], PlusRating.prototype, "emptyIconName", void 0);
+__decorate([
+    n({ attribute: 'filled-icon-name' })
+], PlusRating.prototype, "filledIconName", void 0);
+__decorate([
+    n({ type: String })
+], PlusRating.prototype, "label", void 0);
+__decorate([
+    n({ type: String })
+], PlusRating.prototype, "caption", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusRating.prototype, "required", void 0);
+__decorate([
+    r()
+], PlusRating.prototype, "hoverValue", void 0);
+__decorate([
+    r()
+], PlusRating.prototype, "isHovering", void 0);
+__decorate([
+    r()
+], PlusRating.prototype, "error", void 0);
+
+export { PlusRating, PlusRating as default };

package/cdn/components/rating/rating.style.js

@@ -0,0 +1,62 @@
+import { c as ce } from '../../index-B9iart53.js';
+export { labelStyle } from '../label/label.style.js';
+export { captionStyle } from '../caption/caption.style.js';
+
+const ratingStyle = ce({
+    slots: {
+        host: [
+            'plus-ui-element',
+            'inline-flex',
+            'items-center',
+            'gap-1',
+            'align-middle',
+        ],
+        starContainer: [
+            'relative',
+            'cursor-pointer',
+            'leading-none',
+        ],
+        starIcon: [
+            'transition-colors',
+            'duration-150',
+            'ease-in-out',
+            'fill-current',
+        ],
+        starPartial: 'absolute top-0 left-0 h-full overflow-hidden',
+    },
+    variants: {
+        size: {
+            sm: {
+                host: 'text-base',
+                starContainer: 'text-base',
+            },
+            md: {
+                host: 'text-xl',
+                starContainer: 'text-xl',
+            },
+            lg: {
+                host: 'text-2xl',
+                starContainer: 'text-2xl',
+            },
+        },
+        disabled: {
+            true: {
+                host: 'opacity-50 cursor-not-allowed',
+                starContainer: 'cursor-not-allowed',
+            },
+        },
+        readonly: {
+            true: {
+                host: 'cursor-default',
+                starContainer: 'cursor-default',
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        disabled: false,
+        readonly: false,
+    },
+});
+
+export { ratingStyle };

package/cdn/components/segmented-picker/index.js

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

package/cdn/components/segmented-picker/segmented-picker.component.js

@@ -0,0 +1,119 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import Tailwind from '../base/tailwind-base.js';
+import { o } from '../../query-assigned-elements-B8Evmg7O.js';
+import { segmentedPickerStyle } from './segmented-picker.style.js';
+import '../../global-Dh9axYQH.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @tag plus-segmented-picker
+ * @summary A segmented picker component that allows users to select one option from a group of options.
+ *
+ * @slot - The content of the segmented picker, should be plus-segmented-picker-item elements.
+ *
+ * @csspart host - The host element.
+ * @csspart animation-overlay - The animation overlay element.
+ *
+ * @event plus-segmented-picker-item-changed - Emitted when an item is selected.
+ * @eventDetail {item: PlusSegmentedPickerItem, value: string} - The selected item and its value.
+ */
+class PlusSegmentedPicker extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * The status of the segmented picker.
+         * @type {'default' | 'primary'}
+         * @default 'default'
+         */
+        this.status = 'default';
+        /**
+         * The shape of the segmented picker.
+         * @type {'square' | 'circle'}
+         * @default 'square'
+         */
+        this.shape = 'square';
+        /**
+         * The size of the segmented picker.
+         * @type {'sm' | 'md' | 'lg'}
+         * @default 'md'
+         */
+        this.size = 'md';
+        this.groupName = `group-${Math.random().toString(36).substring(2, 11)}`;
+    }
+    handleSlotChange() {
+        if (this.slots && this.slots.length > 0) {
+            const hasChecked = this.slots.some((child) => child.checked);
+            if (!hasChecked) {
+                this.slots[0].checked = true;
+            }
+        }
+        this.slots.forEach((child) => {
+            child.status = this.status;
+            child.shape = this.shape;
+            child.size = this.size;
+            child.groupName = this.groupName;
+            child.addEventListener('item-changed', (event) => {
+                const { detail } = event;
+                const changedItem = detail.item;
+                if (changedItem.disabled) {
+                    return;
+                }
+                this.slots.forEach((child) => {
+                    if (child !== changedItem) {
+                        child.checked = false;
+                    }
+                });
+                this.emit('plus-segmented-picker-item-changed', {
+                    detail: {
+                        item: changedItem,
+                        value: changedItem.value,
+                    },
+                });
+                this.updateOverlay(changedItem);
+            });
+        });
+        const selectedItem = this.slots.find((child) => child.checked && !child.disabled);
+        if (selectedItem) {
+            this.updateOverlay(selectedItem);
+        }
+    }
+    updateOverlay(selectedItem) {
+        const overlay = this.shadowRoot?.querySelector('.selection-overlay');
+        const parentRect = this.getBoundingClientRect();
+        const itemRect = selectedItem.getBoundingClientRect();
+        overlay.style.width = `${itemRect.width}px`;
+        overlay.style.height = `${itemRect.height}px`;
+        overlay.style.transform = `translateX(${itemRect.left - parentRect.left - 2}px)`;
+    }
+    render() {
+        const { host, animationOverlay } = segmentedPickerStyle({
+            status: this.status,
+            shape: this.shape,
+            size: this.size,
+        });
+        return x `
+      <div class=${host()} role="radiogroup" aria-label="Segmented picker">
+        <div class=${animationOverlay()}></div>
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+}
+__decorate([
+    o({
+        selector: 'plus-segmented-picker-item',
+    })
+], PlusSegmentedPicker.prototype, "slots", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], PlusSegmentedPicker.prototype, "status", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], PlusSegmentedPicker.prototype, "shape", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], PlusSegmentedPicker.prototype, "size", void 0);
+
+export { PlusSegmentedPicker, PlusSegmentedPicker as default };

package/cdn/components/segmented-picker/segmented-picker.style.js

@@ -0,0 +1,49 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const segmentedPickerStyle = ce({
+    slots: {
+        host: 'plus-ui-element flex items-center p-0.5 gap-0.5 h-fit w-fit relative bg-color-disabled',
+        animationOverlay: 'selection-overlay absolute p-0.5 transition-all duration-300 ease-out',
+    },
+    variants: {
+        size: {
+            sm: {
+                // host: 'h-8',
+                animationOverlay: 'h-7',
+            },
+            md: {
+                // host: 'h-10',
+                animationOverlay: 'h-9',
+            },
+            lg: {
+                // host: 'h-12',
+                animationOverlay: 'h-11',
+            },
+        },
+        shape: {
+            circle: {
+                host: 'rounded-full',
+                animationOverlay: 'rounded-full',
+            },
+            square: {
+                host: 'rounded-sm',
+                animationOverlay: 'rounded-sm',
+            },
+        },
+        status: {
+            default: {
+                animationOverlay: 'bg-color-surface',
+            },
+            primary: {
+                animationOverlay: 'bg-color-primary-default hover:bg-color-primary-hovered active:bg-color-primary-pressed',
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        shape: 'square',
+        status: 'default',
+    },
+});
+
+export { segmentedPickerStyle };

package/cdn/components/segmented-picker-item/index.js

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

package/cdn/components/segmented-picker-item/segmented-picker-item.component.js

@@ -0,0 +1,140 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import Tailwind from '../base/tailwind-base.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { segmentedPickerItemStyle } from './segmented-picker-item.style.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @tag plus-segmented-picker-item
+ * @summary An item component for the segmented picker.
+ *
+ * @slot - The content of the item.
+ *
+ * @csspart label - The label element.
+ * @csspart input - The input element.
+ */
+class PlusSegmentedPickerItem extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the item is checked.
+         * @type {boolean}
+         * @default false
+         */
+        this.checked = false;
+        /**
+         * The status of the item.
+         * @type {'default' | 'primary'}
+         * @default 'default'
+         */
+        this.status = 'default';
+        /**
+         * Whether the item is disabled.
+         * @type {boolean}
+         * @default false
+         */
+        this.disabled = false;
+        /**
+         * The shape of the item.
+         * @type {'square' | 'circle'}
+         * @default 'square'
+         */
+        this.shape = 'square';
+        /**
+         * The size of the item.
+         * @type {'sm' | 'md' | 'lg'}
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * The name of the group this item belongs to.
+         * @type {string}
+         * @default ''
+         */
+        this.groupName = '';
+        /**
+         * The value of the item.
+         * @type {string}
+         * @default ''
+         */
+        this.value = '';
+        this.internalId = Math.random().toString(36).substr(2, 9);
+    }
+    handleClick(e) {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        if (!this.checked) {
+            this.checked = true;
+        }
+    }
+    updated(changedProps) {
+        if (changedProps.has('checked') && this.checked) {
+            this.emit('item-changed', {
+                detail: {
+                    item: this,
+                    value: this.value,
+                },
+            });
+        }
+    }
+    render() {
+        const id = this.id ? this.id + '-item' : this.internalId + '-item';
+        return x ` <input
+        id=${id}
+        type="radio"
+        class="radio-input appearance-none hidden"
+        name=${this.groupName}
+        value=${this.value}
+        ?checked=${this.checked}
+        ?disabled=${this.disabled}
+        @click=${this.handleClick}
+        part="input"
+      />
+      <label
+        for=${id}
+        aria-checked=${this.checked}
+        aria-disabled=${this.disabled}
+        role="radio"
+        part="label"
+        class=${segmentedPickerItemStyle({
+            status: this.status,
+            checked: this.checked,
+            disabled: this.disabled,
+            shape: this.shape,
+            size: this.size,
+        })}
+        ><slot></slot
+      ></label>`;
+    }
+}
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusSegmentedPickerItem.prototype, "checked", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], PlusSegmentedPickerItem.prototype, "status", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusSegmentedPickerItem.prototype, "disabled", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], PlusSegmentedPickerItem.prototype, "shape", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], PlusSegmentedPickerItem.prototype, "size", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], PlusSegmentedPickerItem.prototype, "groupName", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], PlusSegmentedPickerItem.prototype, "value", void 0);
+__decorate([
+    r()
+], PlusSegmentedPickerItem.prototype, "internalId", void 0);
+
+export { PlusSegmentedPickerItem, PlusSegmentedPickerItem as default };