@plusui/library 0.1.0

package/dist/components/radio/radio.js

@@ -0,0 +1,236 @@
+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 '../../styles/global.js';
+import '../../style-inject.es-tgCJW-Cu.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/dist/components/radio/radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.js","sourceRoot":"","sources":["../../../src/components/radio/radio.ts"],"names":[],"mappings":"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"}

package/dist/components/radio/radio.style.d.ts

@@ -0,0 +1,272 @@
+export declare const radioStyle: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        md: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        lg: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        inherit: {};
+    };
+    disabled: {
+        true: {
+            host: string;
+            radio: string[];
+            label: string[];
+        };
+    };
+    readonly: {
+        true: {
+            host: string;
+            radio: string;
+            label: string[];
+        };
+    };
+}, {
+    host: string[];
+    wrapper: string[];
+    radio: string[];
+    dot: string[];
+    label: string[];
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        md: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        lg: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        inherit: {};
+    };
+    disabled: {
+        true: {
+            host: string;
+            radio: string[];
+            label: string[];
+        };
+    };
+    readonly: {
+        true: {
+            host: string;
+            radio: string;
+            label: string[];
+        };
+    };
+}, {
+    size: {
+        sm: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        md: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        lg: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        inherit: {};
+    };
+    disabled: {
+        true: {
+            host: string;
+            radio: string[];
+            label: string[];
+        };
+    };
+    readonly: {
+        true: {
+            host: string;
+            radio: string;
+            label: string[];
+        };
+    };
+}>, {
+    size: {
+        sm: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        md: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        lg: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        inherit: {};
+    };
+    disabled: {
+        true: {
+            host: string;
+            radio: string[];
+            label: string[];
+        };
+    };
+    readonly: {
+        true: {
+            host: string;
+            radio: string;
+            label: string[];
+        };
+    };
+}, {
+    host: string[];
+    wrapper: string[];
+    radio: string[];
+    dot: string[];
+    label: string[];
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        md: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        lg: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        inherit: {};
+    };
+    disabled: {
+        true: {
+            host: string;
+            radio: string[];
+            label: string[];
+        };
+    };
+    readonly: {
+        true: {
+            host: string;
+            radio: string;
+            label: string[];
+        };
+    };
+}, {
+    host: string[];
+    wrapper: string[];
+    radio: string[];
+    dot: string[];
+    label: string[];
+}, undefined, import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        md: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        lg: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        inherit: {};
+    };
+    disabled: {
+        true: {
+            host: string;
+            radio: string[];
+            label: string[];
+        };
+    };
+    readonly: {
+        true: {
+            host: string;
+            radio: string;
+            label: string[];
+        };
+    };
+}, {
+    size: {
+        sm: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        md: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        lg: {
+            host: string;
+            radio: string;
+            dot: string;
+            label: string;
+        };
+        inherit: {};
+    };
+    disabled: {
+        true: {
+            host: string;
+            radio: string[];
+            label: string[];
+        };
+    };
+    readonly: {
+        true: {
+            host: string;
+            radio: string;
+            label: string[];
+        };
+    };
+}>, unknown, unknown, undefined>>;
+//# sourceMappingURL=radio.style.d.ts.map

package/dist/components/radio/radio.style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.style.d.ts","sourceRoot":"","sources":["../../../src/components/radio/radio.style.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iCA6FrB,CAAC"}

package/dist/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/dist/components/radio/radio.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio.style.js","sourceRoot":"","sources":["../../../src/components/radio/radio.style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,MAAM,UAAU,GAAG,EAAE,CAAC;IAC3B,KAAK,EAAE;QACL,IAAI,EAAE;YACJ,aAAa;YACb,cAAc;YACd,iBAAiB;SAClB;QACD,OAAO,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,cAAc,CAAC;QAC7C,KAAK,EAAE;YACL,aAAa;YACb,MAAM;YACN,iBAAiB;YACjB,cAAc;YACd,UAAU;YACV,gBAAgB;YAChB,cAAc;YACd,gBAAgB;YAChB,QAAQ;YACR,iBAAiB;YACjB,qBAAqB;YACrB,qBAAqB;YACrB,mCAAmC;YACnC,oCAAoC;YACpC,2CAA2C;YAC3C,oCAAoC;YACpC,6BAA6B;SAC9B;QACD,GAAG,EAAE;YACH,UAAU;YACV,UAAU;YACV,SAAS;YACT,kBAAkB;YAClB,kBAAkB;YAClB,cAAc;YACd,qBAAqB;YACrB,gBAAgB;YAChB,cAAc;YACd,gBAAgB;YAChB,WAAW;YACX,0BAA0B;YAC1B,wBAAwB;YACxB,kCAAkC;YAClC,SAAS;SACV;QACD,KAAK,EAAE;YACL,aAAa;YACb,gBAAgB;YAChB,iBAAiB;SAClB;KACF;IACD,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,EAAE,EAAE;gBACF,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,QAAQ;gBACf,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,SAAS;aACjB;YACD,EAAE,EAAE;gBACF,IAAI,EAAE,OAAO;gBACb,KAAK,EAAE,UAAU;gBACjB,GAAG,EAAE,UAAU;gBACf,KAAK,EAAE,WAAW;aACnB;YACD,EAAE,EAAE;gBACF,IAAI,EAAE,SAAS;gBACf,KAAK,EAAE,QAAQ;gBACf,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,SAAS;aACjB;YACD,OAAO,EAAE,EAAE;SACZ;QACD,QAAQ,EAAE;YACR,IAAI,EAAE;gBACJ,IAAI,EAAE,oBAAoB;gBAC1B,KAAK,EAAE,CAAC,oBAAoB,CAAC;gBAC7B,KAAK,EAAE,CAAC,oBAAoB,CAAC;aAC9B;SACF;QACD,QAAQ,EAAE;YACR,IAAI,EAAE;gBACJ,IAAI,EAAE,oCAAoC;gBAC1C,KAAK,EAAE,gBAAgB;gBACvB,KAAK,EAAE,CAAC,gBAAgB,CAAC;aAC1B;SACF;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,KAAK;QACZ,QAAQ,EAAE,KAAK;QACf,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC,CAAC"}

package/dist/components/radio-group/index.d.ts

@@ -0,0 +1,2 @@
+export type * from './radio-group.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/radio-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/index.ts"],"names":[],"mappings":"AAEA,mBAAmB,kBAAkB,CAAC"}

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

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

package/dist/components/radio-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/radio-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC"}

package/dist/components/radio-group/radio-group.d.ts

@@ -0,0 +1,37 @@
+import Tailwind from '../base/tailwind-base';
+export default class PlusRadioGroup extends Tailwind {
+    static formAssociated: boolean;
+    name: string;
+    value: string;
+    disabled: boolean;
+    required: boolean;
+    /**
+     * The size of all radio buttons in the group
+     * - sm: Small size
+     * - md: Medium size
+     * - lg: Large size
+     * @default 'md'
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * Shows error styling on the radio group
+     */
+    error: boolean;
+    /**
+     * Orientation of the radio buttons
+     * - horizontal: Radio buttons are arranged side by side
+     * - vertical: Radio buttons are stacked vertically
+     */
+    orientation: 'horizontal' | 'vertical';
+    private internals;
+    constructor();
+    private updateRadios;
+    private handlePlusChange;
+    updated(changedProperties: Map<string, unknown>): void;
+    firstUpdated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export { PlusRadioGroup };
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/components/radio-group/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../../src/components/radio-group/radio-group.ts"],"names":[],"mappings":"AAEA,OAAO,QAAQ,MAAM,uBAAuB,CAAC;AAI7C,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,QAAQ;IAClD,MAAM,CAAC,cAAc,UAAQ;IAG7B,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAEjB;;;;;;OAMG;IAEH,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAEhC;;OAEG;IAEH,KAAK,UAAS;IAEd;;;;OAIG;IAEH,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAEtD,OAAO,CAAC,SAAS,CAAmB;;IAOpC,OAAO,CAAC,YAAY;IAYpB,OAAO,CAAC,gBAAgB;IAgCf,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAY/C,YAAY;IAiBZ,iBAAiB;IAOjB,oBAAoB;IAQpB,MAAM;CAkBhB;AAED,OAAO,EAAE,cAAc,EAAE,CAAC"}