@plusui/library 0.1.0

package/cdn/components/text/text.js

@@ -0,0 +1,84 @@
+import { _ as __decorate, n as n$1 } from '../../property-DiPQx9S3.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import Tailwind from '../base/tailwind-base.js';
+import { textStyle } from './text.style.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @license
+ * Copyright 2020 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const a=Symbol.for(""),o=t=>{if(t?.r===a)return t?._$litStatic$},i=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n            take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
+
+/**
+ * @tag plus-text
+ *
+ * Text component for displaying text with various styles based on the design system.
+ * Renders the appropriate semantic HTML tag based on the `kind` property (e.g., h1, h2, p, div).
+ *
+ * @slot - The default slot for the text content.
+ *
+ * @csspart base - The component's base wrapper element (e.g., h1, p, div).
+ *
+ * @cssproperty --i-text-color - Inherited text color variable.
+ */
+class PlusText extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Defines the visual style and semantic meaning of the text.
+         * - `display`: For large, prominent display text (rendered as div).
+         * - `heading1`: For the main heading (rendered as h1).
+         * - `heading2`: For secondary headings (rendered as h2).
+         * - `title1`: For primary titles (rendered as h3 - adjust as needed).
+         * - `title2`: For secondary titles (rendered as h4 - adjust as needed).
+         * - `body`: For standard body text (rendered as p) (default).
+         * - `body-accent`: For emphasized body text (rendered as p).
+         * - `helper`: For helper text, often used with form elements (rendered as div).
+         * - `caption`: For small caption text (rendered as div).
+         * @default 'body'
+         */
+        this.kind = 'body';
+    }
+    getTag() {
+        switch (this.kind) {
+            case 'heading1':
+                return i `h1`;
+            case 'heading2':
+                return i `h2`;
+            case 'title1':
+                return i `h3`; // Or another appropriate heading level
+            case 'title2':
+                return i `h4`; // Or another appropriate heading level
+            case 'body':
+            case 'body-accent':
+                return i `p`;
+            case 'display':
+            case 'helper':
+            case 'caption':
+            default:
+                return i `div`; // Use div for non-paragraph/heading types
+        }
+    }
+    /**
+     * Renders the text component with the appropriate styles and semantic tag.
+     * @returns The rendered template.
+     */
+    render() {
+        const classes = textStyle({ kind: this.kind });
+        const tag = this.getTag();
+        // Render the dynamic tag using the result from getTag()
+        return u `
+      <${tag} part="base" class=${classes}>
+        <slot></slot>
+      </${tag}>
+    `;
+    }
+}
+__decorate([
+    n$1({ type: String })
+], PlusText.prototype, "kind", void 0);
+
+export { PlusText };

package/cdn/components/text/text.style.js

@@ -0,0 +1,23 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const textStyle = ce({
+    base: ['plus-text', 'plus-ui-element'],
+    variants: {
+        kind: {
+            display: 'font-bold text-6xl text-color-default',
+            heading1: 'font-semibold text-3xl text-color-default',
+            heading2: 'font-semibold text-2xl text-color-default',
+            title1: 'font-medium text-xl text-color-default',
+            title2: 'font-medium text-lg text-color-default',
+            body: 'font-normal text-base text-color-default',
+            'body-accent': 'font-medium text-base text-color-default',
+            helper: 'font-medium text-sm text-color-placeholder',
+            caption: 'font-normal text-sm text-color-caption',
+        },
+    },
+    defaultVariants: {
+        kind: 'body',
+    },
+});
+
+export { textStyle };

package/cdn/components/textarea/index.js

@@ -0,0 +1,19 @@
+import { PlusTextarea } from './textarea.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 '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import '../../if-defined-D-m3dgRf.js';
+import '../../live-BOAtKRUN.js';
+import '../../directive-DZCF8pFJ.js';
+import './textarea.style.js';
+import '../../index-B9iart53.js';
+import '../label/label.style.js';
+import '../caption/caption.style.js';
+
+customElements.define('plus-textarea', PlusTextarea);
+
+export { PlusTextarea };

package/cdn/components/textarea/textarea.js

@@ -0,0 +1,281 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { i, E, 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 { o } from '../../if-defined-D-m3dgRf.js';
+import { l } from '../../live-BOAtKRUN.js';
+import { textareaStyle } from './textarea.style.js';
+import { labelStyle } from '../label/label.style.js';
+import { captionStyle } from '../caption/caption.style.js';
+import '../../base-Cl6v8-BZ.js';
+import '../../global-Dh9axYQH.js';
+import '../../directive-DZCF8pFJ.js';
+import '../../index-B9iart53.js';
+
+/**
+ * @tag plus-textarea
+ * @summary A form-associated textarea component with validation and styling.
+ *
+ * @csspart textarea - The native textarea element
+ * @csspart label - The label element
+ * @csspart caption - The caption/error message container
+ *
+ * @event plus-input - Emitted when the textarea value changes
+ * @event plus-change - Emitted when the textarea value changes and loses focus
+ * @event plus-focus - Emitted when the textarea gains focus
+ * @event plus-blur - Emitted when the textarea loses focus
+ * @event plus-invalid - Emitted when the textarea value is invalid
+ *
+ * @cssprop [--focus-ring-color=--primary-500] - Color of the focus ring
+ * @cssprop [--error-color=--red-500] - Color used for error states
+ */
+class PlusTextarea extends Tailwind {
+    constructor() {
+        super(...arguments);
+        // @state() private hasFocus = false;
+        this.validationMessage = '';
+        /** The textarea's name attribute. */
+        this.name = '';
+        /** The textarea's value attribute. */
+        this.value = '';
+        /** The textarea's placeholder text. */
+        this.placeholder = '';
+        /** The size variant of the textarea. */
+        this.size = 'md';
+        /** Whether the textarea is disabled. */
+        this.disabled = false;
+        /** Whether the textarea is readonly. */
+        this.readonly = false;
+        /** Whether the textarea is required. */
+        this.required = false;
+        /** Whether the textarea is in an error state. */
+        this.error = false;
+        /** The error message to display (overrides default validation messages). */
+        this.errorMessage = '';
+        /** Whether the textarea should take up full width. */
+        this.fullWidth = false;
+        /** Specifies the visible number of lines in a text area. */
+        this.rows = 4;
+        /** Controls how the textarea can be resized. */
+        this.resize = 'vertical';
+        /** Specifies how the text in a text area is to be wrapped when submitted in a form. */
+        this.wrap = 'soft';
+    }
+    /** Checks the validity of the textarea against constraints. */
+    checkValidity() {
+        return this.textarea.checkValidity();
+    }
+    /** Reports the validity state to the user. */
+    reportValidity() {
+        const isValid = this.checkValidity();
+        this.validationMessage = this.getValidationMessage();
+        this.error = !isValid;
+        return isValid;
+    }
+    /** Sets a custom validation message. */
+    setCustomValidity(message) {
+        this.textarea.setCustomValidity(message);
+        this.validationMessage = message;
+        this.error = message !== '';
+    }
+    handleBlur() {
+        // this.hasFocus = false;
+        this.validate();
+        this.emit('plus-blur');
+    }
+    handleChange() {
+        this.value = this.textarea.value;
+        this.emit('plus-change');
+        this.validate();
+    }
+    handleFocus() {
+        // this.hasFocus = true;
+        this.emit('plus-focus');
+    }
+    handleInput() {
+        this.value = this.textarea.value;
+        if (this.error) {
+            this.validate();
+        }
+        this.emit('plus-input');
+    }
+    handleInvalid(event) {
+        event.preventDefault(); // Prevent default browser validation UI
+        const isValid = this.textarea.validity.valid;
+        const validationMessage = this.getValidationMessage();
+        this.validationMessage = validationMessage;
+        this.error = !isValid;
+        if (!isValid) {
+            this.emit('plus-invalid', { detail: { validationMessage } });
+        }
+    }
+    /** Gets the appropriate validation message. */
+    getValidationMessage() {
+        // Use custom error message first if provided and error state is true
+        if (this.error && this.errorMessage) {
+            return this.errorMessage;
+        }
+        // Fallback to native validation message
+        if (!this.textarea?.validity.valid) {
+            // Basic messages (can be expanded)
+            const validity = this.textarea.validity;
+            if (validity.valueMissing)
+                return 'This field is required';
+            if (validity.tooLong)
+                return `Please use no more than ${this.maxlength} characters`;
+            if (validity.tooShort)
+                return `Please use at least ${this.minlength} characters`;
+            return this.textarea.validationMessage || 'Please correct the error';
+        }
+        return '';
+    }
+    /** Validates the textarea and updates state. */
+    validate() {
+        const isValid = this.checkValidity();
+        const validationMessage = this.getValidationMessage();
+        this.validationMessage = validationMessage;
+        this.error = !isValid;
+    }
+    render() {
+        const { label, size, required, caption, error, validationMessage } = this;
+        // Get styles from tv
+        const styles = textareaStyle({
+            size: this.size,
+            error: this.error,
+            disabled: this.disabled,
+            readonly: this.readonly,
+            resize: this.resize,
+            fullWidth: this.fullWidth, // Pass fullWidth to host slot styles
+        });
+        const LabelTemplate = () => label
+            ? x `<label class=${labelStyle({ size, required })} for="textarea"
+            >${label}</label
+          >`
+            : E;
+        const CaptionTemplate = () => {
+            const textToShow = error && validationMessage ? validationMessage : caption;
+            return textToShow
+                ? x `<div class=${captionStyle({ error, size })} id="help-text">
+            ${textToShow}
+          </div>`
+                : E;
+        };
+        return x `
+      <div class=${styles.host()}>
+        ${LabelTemplate()}
+        <div class=${styles.textareaWrapper()}>
+          <textarea
+            id="textarea"
+            class=${styles.textareaElement()}
+            name=${o(this.name)}
+            .value=${l(this.value)}
+            placeholder=${o(this.placeholder)}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            minlength=${o(this.minlength)}
+            maxlength=${o(this.maxlength)}
+            rows=${o(this.rows)}
+            wrap=${o(this.wrap)}
+            ?autofocus=${this.autoFocus}
+            aria-describedby=${o(caption || validationMessage ? 'help-text' : undefined)}
+            aria-invalid=${this.error}
+            aria-required=${this.required}
+            @change=${this.handleChange}
+            @input=${this.handleInput}
+            @invalid=${this.handleInvalid}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+          ></textarea>
+        </div>
+        ${CaptionTemplate()}
+      </div>
+    `;
+    }
+}
+PlusTextarea.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        /* Base host styles from tv definition */
+        font-family: var(--plus-font-sans);
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        justify-content: flex-start;
+        width: 100%;
+        position: relative;
+        max-width: var(--plus-size-md); /* Default max-width or from theme */
+      }
+      :host([full-width]) {
+        max-width: none;
+      }
+      /* Apply host variant styles directly if needed, e.g., disabled cursor */
+      :host([disabled]) {
+        cursor: not-allowed;
+      }
+    `,
+];
+__decorate([
+    e('textarea')
+], PlusTextarea.prototype, "textarea", void 0);
+__decorate([
+    r()
+], PlusTextarea.prototype, "validationMessage", void 0);
+__decorate([
+    n()
+], PlusTextarea.prototype, "name", void 0);
+__decorate([
+    n()
+], PlusTextarea.prototype, "value", void 0);
+__decorate([
+    n()
+], PlusTextarea.prototype, "placeholder", void 0);
+__decorate([
+    n({ reflect: true })
+], PlusTextarea.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value != 'false' })
+], PlusTextarea.prototype, "disabled", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value != 'false' })
+], PlusTextarea.prototype, "readonly", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value != 'false' })
+], PlusTextarea.prototype, "required", void 0);
+__decorate([
+    n({ type: String })
+], PlusTextarea.prototype, "label", void 0);
+__decorate([
+    n({ type: Number })
+], PlusTextarea.prototype, "minlength", void 0);
+__decorate([
+    n({ type: Number })
+], PlusTextarea.prototype, "maxlength", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusTextarea.prototype, "autoFocus", void 0);
+__decorate([
+    n({ type: String })
+], PlusTextarea.prototype, "caption", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value != 'false' })
+], PlusTextarea.prototype, "error", void 0);
+__decorate([
+    n({ type: String, attribute: 'error-message' })
+], PlusTextarea.prototype, "errorMessage", void 0);
+__decorate([
+    n({ reflect: true, attribute: 'full-width', type: Boolean })
+], PlusTextarea.prototype, "fullWidth", void 0);
+__decorate([
+    n({ type: Number })
+], PlusTextarea.prototype, "rows", void 0);
+__decorate([
+    n({ reflect: true })
+], PlusTextarea.prototype, "resize", void 0);
+__decorate([
+    n()
+], PlusTextarea.prototype, "wrap", void 0);
+
+export { PlusTextarea };

package/cdn/components/textarea/textarea.style.js

@@ -0,0 +1,106 @@
+import { c as ce } from '../../index-B9iart53.js';
+export { labelStyle } from '../label/label.style.js';
+export { captionStyle } from '../caption/caption.style.js';
+
+const textareaStyle = ce({
+    slots: {
+        host: 'font-sans antialiased flex flex-col gap-1 items-start justify-start w-full relative',
+        textareaElement: [
+            'block',
+            'w-full',
+            'min-h-[60px]', // Default min height
+            'rounded-md',
+            'border',
+            'border-solid',
+            'border-color-default', // Use theme variable
+            'bg-color-surface', // Use theme variable
+            'px-3', // Horizontal padding
+            'py-2', // Vertical padding
+            'text-base', // Base font size
+            'text-color-default', // Use theme variable
+            'placeholder:text-color-placeholder', // Use theme variable
+            'transition-colors',
+            'duration-150',
+            'ease-in-out',
+            'focus:outline-none', // Focus handled by wrapper variant
+        ],
+        textareaWrapper: [
+            // Added wrapper for focus ring similar to input
+            'block w-full relative',
+            'rounded', // Wrapper gets the border radius
+            'focus-within:ring-default focus-within:border-color-primary focus-within:z-[1]', // Focus ring on wrapper
+        ],
+    },
+    variants: {
+        size: {
+            sm: {
+                textareaElement: 'text-sm min-h-[52px] py-1.5 px-2.5',
+            },
+            md: {
+                textareaElement: 'text-base min-h-[60px] py-2 px-3',
+            },
+            lg: {
+                textareaElement: 'text-lg min-h-[68px] py-2.5 px-4',
+            },
+        },
+        error: {
+            true: {
+                textareaElement: 'border-color-danger text-color-danger placeholder:text-color-danger', // Error styles on element
+                textareaWrapper: 'focus-within:border-color-danger focus-within:ring-color-danger border-color-danger', // Error styles on wrapper
+            },
+            false: {
+                textareaElement: 'border-color-default hover:border-color-primary',
+                textareaWrapper: 'focus-within:border-color-primary focus-within:ring-default',
+            },
+        },
+        disabled: {
+            true: {
+                textareaElement: [
+                    'border-color-disabled cursor-not-allowed',
+                    'bg-color-disabled text-color-disabled',
+                    'placeholder:text-color-disabled',
+                    'hover:border-color-disabled',
+                ],
+                textareaWrapper: 'border-color-disabled', // Ensure wrapper also gets disabled border
+                host: 'cursor-not-allowed',
+            },
+            false: {
+                host: 'cursor-text',
+            },
+        },
+        readonly: {
+            true: {
+                textareaElement: [
+                    'bg-color-default border-color-default',
+                    'text-color-default pointer-events-none cursor-default',
+                    'placeholder:text-color-default',
+                ],
+            },
+            false: {},
+        },
+        resize: {
+            none: { textareaElement: 'resize-none' },
+            vertical: { textareaElement: 'resize-y' },
+            horizontal: { textareaElement: 'resize-x' },
+            both: { textareaElement: 'resize' },
+        },
+        fullWidth: {
+            true: {
+                host: 'max-w-none',
+            },
+            false: {
+                host: 'max-w-md', // Or your default max-width
+            },
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        error: false,
+        disabled: false,
+        readonly: false,
+        resize: 'vertical',
+        fullWidth: false,
+    },
+});
+
+export { textareaStyle };

package/cdn/components/toast/index.js

@@ -0,0 +1,16 @@
+import { PlusToast } from './toast.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import './toast.style.js';
+import '../../index-B9iart53.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import '../../controllers/slot-controller.js';
+import '../svg-icon/svg-icon.js';
+import '../../unsafe-html-BhmP6ONc.js';
+import '../../directive-DZCF8pFJ.js';
+import '../svg-icon/icons.js';
+
+customElements.define('plus-toast', PlusToast);
+
+export { PlusToast };