@plusui/library 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Plus UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,118 @@
+# Plus UI Library
+
+Plus UI is a powerful, framework-agnostic UI component library built on Web Components standards. Designed for modern web applications, it seamlessly integrates with any JavaScript ecosystem including React, Vue, Angular, Svelte and vanilla JS. Powered by the Plus UI Design System, it offers enterprise-grade, accessibility-first components that combine pixel-perfect design with exceptional performance.
+
+Our library bridges the gap between design and development, providing a unified solution for creating consistent, scalable, and beautiful user interfaces across platforms.
+
+## Quick Links
+
+<div align="center">
+
+[![GitHub Repository](https://img.shields.io/badge/GitHub-Repository-181717?style=for-the-badge&logo=github)](https://github.com/plus-ui/library)
+[![Documentation](https://img.shields.io/badge/Documentation-Guide-blue?style=for-the-badge&logo=bookstack)](https://docs.plusui.com/)
+[![Figma Designs](https://img.shields.io/badge/Figma-Designs-F24E1E?style=for-the-badge&logo=figma)](https://www.figma.com/@plusui)
+[![Discord](https://img.shields.io/badge/Discord-Community-7289DA?style=for-the-badge&logo=discord)](https://discord.gg/QhXfSnze)
+[![X (Twitter)](https://img.shields.io/badge/X-Follow-000000?style=for-the-badge&logo=x)](https://x.com/PlusUI_Official)
+
+</div>
+
+## Features
+
+### 🎨 Design & Development
+
+- ✨ Powered by Plus UI Design System with modern aesthetics
+- 🎯 Component-first architecture for consistent development
+- 🛠 Developer-friendly API with extensive customization options
+- 📱 Responsive design with mobile-first approach
+
+### 🔧 Technical Excellence
+
+- 🚀 High-performance optimized components
+- 🔍 TypeScript support with full type definitions
+- ♿ WCAG 2.1 AA compliant accessibility
+- 🏗 Tree-shakeable architecture for optimal bundle size
+
+### 💪 Framework Support
+
+- ⚛️ React ecosystem integration
+- 💚 Vue.js (2.x & 3.x) support
+- 🅰️ Angular compatibility
+- 💨 Svelte ready
+- 🚀 SolidJS integration
+- ⚡ Vanilla JavaScript/TypeScript usage
+- 🎯 Framework-agnostic core architecture
+- 🔄 Web Components standard compliance
+- 🎨 Static HTML/CSS implementation
+- 🌐 Compatible with any web framework
+- ⚙️ Server-side rendering support
+
+### 📦 Development Experience
+
+- 📘 Comprehensive documentation with live examples
+- 🧪 Extensive test coverage
+- 🔄 Regular updates and maintenance
+- 💡 Active community support
+
+### 🌟 Enterprise Ready
+
+- 🔒 Security-first development approach
+- 🌐 Internationalization support
+- 🎢 Production-tested scalability
+- 👥 Enterprise-level support available
+
+## Getting Started
+
+### Installation
+
+You can install the Plus UI library using NPM or Yarn.
+
+```bash
+npm install @plusui/core
+```
+
+### Usage
+
+You can import the components directly from the library and use them in your application.
+
+```javascript
+import '@plusui/core/dist/plusui.css';
+import { PlusButton } from '@plusui/core';
+
+<PlusButton>Click Me</PlusButton>;
+```
+
+### Framework Integration
+
+Plus UI components can be used in any JavaScript framework or library. Here's an example of using a Plus UI component in a React application.
+
+```bash
+npm install @plusui/react @plusui/core
+```
+
+```javascript
+import React from 'react';
+import '@plusui/core/dist/plusui.css';
+import { PlusButton } from '@plusui/react';
+
+const App = () => {
+  return <PlusButton>Click Me</PlusButton>;
+};
+
+export default App;
+```
+
+### Documentation
+
+For detailed usage instructions, component API, and live examples, please refer to the [official documentation](https://docs.plusui.com/).
+
+## Contributing
+
+We welcome contributions from the community to help us improve the Plus UI library. Please refer to our [contribution guidelines](CONTRIBUTING.md) for more information.
+
+## License
+
+Plus UI is licensed under the [MIT License](LICENSE).
+
+## Contact
+
+For any queries or feedback, please reach out to us at [https://plusui.com/](https://plusui.com/).

package/cdn/base-Cl6v8-BZ.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
+
+export { e };

package/cdn/base-hbm3XPKy.js

@@ -0,0 +1,6 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e=(e,t,o)=>(o.configurable=!0,o.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,o),o);export{e};

package/cdn/components/accordion/accordion.js

@@ -0,0 +1,205 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { i, x } from '../../lit-element-ByzbtpGk.js';
+import { accordionStyle } from './accordion.style.js';
+import Tailwind from '../base/tailwind-base.js';
+import '../../index-B9iart53.js';
+import '../../global-Dh9axYQH.js';
+
+/**
+ * @tag plus-accordion
+ * @summary Accordion component for displaying collapsible content.
+ *
+ * @slot header - The header content of the accordion
+ * @slot helper - Optional helper text displayed next to the header
+ * @slot panel - The content that is shown when the accordion is expanded
+ *
+ * @csspart header - The header container
+ * @csspart panel - The panel container
+ * @csspart icon - The expand/collapse icon
+ * @csspart helper - The helper text container
+ *
+ * @event plus-accordion-toggle - Emitted when the accordion is toggled
+ * @eventDetail {boolean} expand - Whether the accordion is expanded
+ *
+ * @example
+ * ```html
+ * <plus-accordion>
+ *   <div slot="header">Header</div>
+ *   <div slot="helper">Helper text</div>
+ *   <div slot="panel">Content</div>
+ * </plus-accordion>
+ * ```
+ */
+class PlusAccordion extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether the accordion is expanded
+         * @type {boolean}
+         * @default false
+         * @attr expand
+         */
+        this.expand = false;
+        /**
+         * Whether the accordion is part of a group
+         * @type {boolean}
+         * @default false
+         * @attr is-grouped
+         */
+        this.isGrouped = false;
+        /**
+         * Whether the accordion is the last item in a group
+         * @type {boolean}
+         * @default false
+         * @attr is-last
+         */
+        this.isLast = false;
+        /**
+         * Whether the accordion is the first item in a group
+         * @type {boolean}
+         * @default false
+         * @attr is-first
+         */
+        this.isFirst = false;
+        /**
+         * The size of the accordion
+         * @type {'sm' | 'md' | 'lg'}
+         * @default 'md'
+         * @attr size
+         */
+        this.size = 'md';
+        /**
+         * Whether the accordion is disabled
+         * @type {boolean}
+         * @default false
+         * @attr disabled
+         */
+        this.disabled = false;
+    }
+    // private handleHeaderSlotChange(event: Event): void {
+    //   const slot = event.target as HTMLSlotElement;
+    //   this.hasHeaderSlot = slot.assignedNodes().length > 0;
+    // }
+    // private handleHelperSlotChange(event: Event): void {
+    //   const slot = event.target as HTMLSlotElement;
+    //   this.hasHelperSlot = slot.assignedNodes().length > 0;
+    // }
+    // private handlePanelSlotChange(event: Event): void {
+    //   const slot = event.target as HTMLSlotElement;
+    //   this.hasPanelSlot = slot.assignedNodes().length > 0;
+    // }
+    toggleOpen() {
+        if (this.disabled)
+            return;
+        this.expand = !this.expand;
+        this.emit('plus-accordion-toggle', { detail: { expand: this.expand } });
+    }
+    render() {
+        const { base, header, panel, icon, helper, headerContainer } = accordionStyle({
+            expand: this.expand,
+            isGrouped: this.isGrouped,
+            isLast: this.isLast,
+            isFirst: this.isFirst,
+            size: this.size,
+            disabled: this.disabled,
+            // hasHelper: this.hasHelperSlot,
+        });
+        return x `
+      <div
+        class=${base()}
+        role="region"
+        aria-expanded=${this.expand}
+        aria-disabled=${this.disabled}
+      >
+        <div
+          class=${header()}
+          @click=${this.toggleOpen}
+          role="button"
+          tabindex=${this.disabled ? '-1' : '0'}
+          aria-controls="panel"
+          @keydown=${(e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.toggleOpen();
+            }
+        }}
+        >
+          <div class=${headerContainer()}>
+            <slot name="header" part="header"></slot>
+            <span class=${helper()} part="helper">
+              <slot name="helper"></slot>
+            </span>
+          </div>
+          <i class=${icon()} part="icon" aria-hidden="true"></i>
+        </div>
+        <div
+          class=${panel()}
+          id="panel"
+          part="panel"
+          role="region"
+          aria-labelledby="header"
+        >
+          <slot name="panel"></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+// @state()
+// private hasHeaderSlot = false;
+// @state()
+// private hasHelperSlot = false;
+// @state()
+// private hasPanelSlot = false;
+PlusAccordion.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      :host([is-grouped]) {
+        border-radius: 0;
+      }
+
+      :host([is-grouped][is-first]) .header {
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+      }
+
+      :host([is-grouped][is-last]) .header {
+        border-bottom-left-radius: 5px;
+        border-bottom-right-radius: 5px;
+      }
+
+      :host([is-grouped][is-last][expand]) .header {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    `,
+];
+__decorate([
+    n({
+        type: Boolean,
+        converter: (expand) => expand != 'false',
+        reflect: true,
+    })
+], PlusAccordion.prototype, "expand", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'is-grouped' })
+], PlusAccordion.prototype, "isGrouped", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'is-last' })
+], PlusAccordion.prototype, "isLast", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'is-first' })
+], PlusAccordion.prototype, "isFirst", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], PlusAccordion.prototype, "size", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], PlusAccordion.prototype, "disabled", void 0);
+
+export { PlusAccordion, PlusAccordion as default };

package/cdn/components/accordion/accordion.style.js

@@ -0,0 +1,91 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+/**
+ * Style configuration for the accordion component
+ */
+const accordionStyle = ce({
+    slots: {
+        base: 'accordion-base font-sans antialiased border border-color-default rounded bg-color-surface ',
+        header: 'header flex cursor-pointer flex-row items-center justify-between font-medium text-color-default',
+        panel: '',
+        icon: 'text-base text-center',
+        helper: 'text-color-caption font-normal',
+        headerContainer: 'flex flex-row items-center gap-3',
+    },
+    variants: {
+        size: {
+            sm: {
+                header: 'py-2 px-4 text-base gap-2',
+                panel: 'p-4 gap-4 text-base',
+                helper: 'text-base',
+            },
+            md: {
+                header: 'py-2.5 px-5 text-lg gap-3 h-[48px]',
+                panel: 'p-5 gap-5 text-lg',
+                helper: 'text-lg',
+            },
+            lg: {
+                header: 'py-3 px-6 text-xl gap-3  h-[52px]',
+                panel: 'p-6 gap-6 text-xl',
+                helper: 'text-xl',
+            },
+        },
+        expand: {
+            true: {
+                panel: 'block',
+                icon: 'fa-solid fa-angle-up',
+            },
+            false: {
+                panel: 'hidden',
+                icon: 'fa-solid fa-angle-down',
+            },
+        },
+        isGrouped: {
+            true: {
+                base: 'border-t-0 border-l-0 border-r-0 rounded-b-0',
+            },
+            false: {
+                base: '',
+            },
+        },
+        isLast: {
+            true: {
+                base: 'border-b-0',
+            },
+            false: {
+                base: 'border-b',
+            },
+        },
+        isFirst: {
+            true: {
+                base: '',
+            },
+            false: {
+                base: '',
+            },
+        },
+        disabled: {
+            true: {
+                base: 'cursor-not-allowed',
+                header: 'cursor-not-allowed bg-color-disabled text-color-disabled',
+                panel: 'bg-color-disabled',
+            },
+        },
+        // hasHelper: {
+        //   true: {
+        //     headerContainer: 'justify-between',
+        //   },
+        //   false: {
+        //     headerContainer: 'justify-end',
+        //   },
+        // },
+    },
+    defaultVariants: {
+        expand: false,
+        disabled: false,
+        isFirst: false,
+        hasHelper: false,
+    },
+});
+
+export { accordionStyle };

package/cdn/components/accordion/index.js

@@ -0,0 +1,11 @@
+import PlusAccordion from './accordion.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import './accordion.style.js';
+import '../../index-B9iart53.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+
+customElements.define('plus-accordion', PlusAccordion);
+
+export { PlusAccordion };

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

@@ -0,0 +1,181 @@
+import { _ as __decorate, n as n$1 } from '../../property-DiPQx9S3.js';
+import { i, x } from '../../lit-element-ByzbtpGk.js';
+import { e } from '../../base-Cl6v8-BZ.js';
+import Tailwind from '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */function n(n){return (o,r)=>{const{slot:e$1}=n??{},s="slot"+(e$1?`[name=${e$1}]`:":not([name])");return e(o,r,{get(){const t=this.renderRoot?.querySelector(s);return t?.assignedNodes(n)??[]}})}}
+
+/**
+ * @tag plus-accordion-group
+ * @summary A container for grouping accordion items together.
+ *
+ * @slot default - Accordion items to be grouped
+ *
+ * @csspart container - The container element
+ *
+ * @example
+ * ```html
+ * <plus-accordion-group>
+ *   <plus-accordion>
+ *     <div slot="header">First Item</div>
+ *     <div slot="panel">Content</div>
+ *   </plus-accordion>
+ *   <plus-accordion>
+ *     <div slot="header">Second Item</div>
+ *     <div slot="panel">Content</div>
+ *   </plus-accordion>
+ * </plus-accordion-group>
+ * ```
+ */
+class PlusAccordionGroup extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Whether multiple accordions can be expanded at the same time
+         * @type {boolean}
+         * @default false
+         * @attr multi
+         */
+        this.multi = false;
+        /**
+         * The visual style of the accordion group
+         * @type {'bordered' | 'divided' | 'separated'}
+         * @default 'bordered'
+         * @attr kind
+         */
+        this.kind = 'bordered';
+        /**
+         * The size of the accordions in the group
+         * @type {'sm' | 'md' | 'lg'}
+         * @default 'md'
+         * @attr size
+         */
+        this.size = 'md';
+        // @state()
+        // private hasAccordions = false;
+        this.toggleListener = (event) => {
+            const customEvent = event;
+            if (!this.multi && customEvent.detail?.expand) {
+                const accordions = this.accordions.filter((el) => el instanceof HTMLElement &&
+                    el.tagName.toLowerCase() === 'plus-accordion');
+                accordions.forEach((el) => {
+                    if (el !== event.target) {
+                        el.setAttribute('expand', 'false');
+                    }
+                });
+            }
+        };
+    }
+    handleSlotChange() {
+        const accordions = this.accordions.filter((el) => el instanceof HTMLElement &&
+            el.tagName.toLowerCase() === 'plus-accordion');
+        // this.hasAccordions = accordions.length > 0;
+        accordions.forEach((accordion, index) => {
+            if (this.kind !== 'separated') {
+                accordion.setAttribute('is-grouped', 'true');
+                accordion.setAttribute('is-first', index === 0 ? 'true' : 'false');
+                accordion.setAttribute('is-last', index === accordions.length - 1 ? 'true' : 'false');
+            }
+            accordion.setAttribute('size', this.size);
+            // Remove existing listeners before adding new ones
+            accordion.removeEventListener('plus-accordion-toggle', this.toggleListener);
+            accordion.addEventListener('plus-accordion-toggle', this.toggleListener);
+        });
+    }
+    disconnectedCallback() {
+        // Clean up event listeners when component is removed
+        const accordions = this.accordions.filter((el) => el instanceof HTMLElement &&
+            el.tagName.toLowerCase() === 'plus-accordion');
+        accordions.forEach((accordion) => {
+            accordion.removeEventListener('plus-accordion-toggle', this.toggleListener);
+        });
+        super.disconnectedCallback();
+    }
+    render() {
+        return x `
+      <div
+        class="font-sans antialiased"
+        part="container"
+        role="group"
+        aria-label="Accordion group"
+      >
+        <slot @slotchange=${this.handleSlotChange}></slot>
+      </div>
+    `;
+    }
+}
+PlusAccordionGroup.styles = [
+    ...Tailwind.styles,
+    i `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      :host([kind='bordered']) {
+        border: 1px solid var(--plus-color-border-default);
+        border-radius: 5px;
+      }
+
+      :host([kind='divided']) {
+        border: none;
+      }
+
+      :host([kind='bordered']) ::slotted(plus-accordion) {
+        border-bottom: 1px solid var(--plus-color-border-default);
+      }
+
+      :host([kind='bordered']) ::slotted(plus-accordion:last-of-type) {
+        border-bottom: none;
+      }
+
+      :host([kind='divided']) ::slotted(plus-accordion) {
+        border-bottom: 1px solid var(--plus-color-border-default);
+      }
+
+      :host([kind='divided']) ::slotted(plus-accordion:last-of-type) {
+        border-bottom: none;
+      }
+
+      :host([kind='separated'])::part(container) {
+        display: flex;
+        flex-direction: column;
+        gap: var(--accordion-gap);
+      }
+
+      :host([size='sm']) {
+        --accordion-gap: 14px;
+      }
+
+      :host([size='md']) {
+        --accordion-gap: 16px;
+      }
+
+      :host([size='lg']) {
+        --accordion-gap: 20px;
+      }
+    `,
+];
+__decorate([
+    n({ flatten: true })
+], PlusAccordionGroup.prototype, "accordions", void 0);
+__decorate([
+    n$1({
+        type: Boolean,
+        reflect: true,
+        converter: (value) => value != 'false',
+    })
+], PlusAccordionGroup.prototype, "multi", void 0);
+__decorate([
+    n$1({ type: String, reflect: true })
+], PlusAccordionGroup.prototype, "kind", void 0);
+__decorate([
+    n$1({ type: String, reflect: true })
+], PlusAccordionGroup.prototype, "size", void 0);
+
+export { PlusAccordionGroup, PlusAccordionGroup as default };

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

@@ -0,0 +1,10 @@
+import PlusAccordionGroup from './accordion-group.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../../base-Cl6v8-BZ.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+
+customElements.define('plus-accordion-group', PlusAccordionGroup);
+
+export { PlusAccordionGroup };