@plusui/library 0.1.0

package/cdn/components/chip/chip.js

@@ -0,0 +1,188 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { E, x } from '../../lit-element-ByzbtpGk.js';
+import Tailwind from '../base/tailwind-base.js';
+import { chipStyle } from './chip.style.js';
+import { o } from '../../style-map-DC_vNus2.js';
+import '../../global-Dh9axYQH.js';
+import '../../index-B9iart53.js';
+import '../../directive-DZCF8pFJ.js';
+
+/**
+ * @tag plus-chip
+ * @since 0.0.0
+ * @status experimental
+ *
+ * PlusChip component provides a compact element for displaying information, tags, or actions.
+ * Supports various visual styles, sizes, and states.
+ *
+ * @slot - The default slot for chip content
+ *
+ * @csspart base - The component's base wrapper
+ * @csspart icon - The dismiss icon wrapper
+ *
+ * @cssproperty --text-color - Controls the text color of the chip
+ * @cssproperty --border-color - Controls the border color of the chip
+ * @cssproperty --bg-default - Controls the default background color
+ * @cssproperty --bg-hovered - Controls the background color when hovered
+ * @cssproperty --bg-pressed - Controls the background color when pressed
+ * @cssproperty --bg-focused - Controls the background color when focused
+ */
+class PlusChip extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * Determines the visual style of the chip
+         * - filled: Solid background color
+         * - outlined: Transparent background with border
+         * @default 'filled'
+         */
+        this.kind = 'filled';
+        /**
+         * Sets the size of the chip
+         * - sm: Small size
+         * - md: Medium size
+         * - lg: Large size
+         * @default 'md'
+         */
+        this.size = 'md';
+        /**
+         * Defines the type of chip
+         * - default: Standard chip
+         * - avatar: Chip with avatar support
+         * @default 'default'
+         */
+        this.type = 'default';
+        /**
+         * Sets the status/color variant of the chip
+         * - default: Neutral color scheme
+         * - success: Green color scheme
+         * - warning: Yellow color scheme
+         * - danger: Red color scheme
+         * - info: Blue color scheme
+         * @default 'default'
+         */
+        this.status = 'default';
+        /**
+         * Controls the border radius style
+         * - full: Fully rounded corners
+         * - rounded: Slightly rounded corners
+         * @default 'full'
+         */
+        this.shape = 'full';
+        /**
+         * Toggles inverted color scheme
+         * @default false
+         */
+        this.invert = false;
+        /**
+         * Shows/hides the dismiss button
+         * @default false
+         */
+        this.dismiss = false;
+        /**
+         * Disables the chip interaction
+         * @default false
+         */
+        this.disabled = false;
+    }
+    /**
+     * Handles the dismiss event
+     * @private
+     */
+    onDismiss() {
+        if (!this.disabled) {
+            this.emit('dismiss');
+        }
+    }
+    render() {
+        const filledStyles = {
+            '--i-bg-default': `var(--plus-color-background-${this.status}-default)`,
+            '--i-bg-hovered': `var(--plus-color-background-${this.status}-hovered)`,
+            '--i-bg-focused': `var(--plus-color-background-${this.status}-pressed)`,
+            '--i-bg-pressed': `var(--plus-color-background-${this.status}-focused)`,
+            '--i-text-color': `var(--plus-color-text-${this.status === 'default' ? 'default' : 'base'})`,
+            '--i-border-color': 'transparent',
+        };
+        const filledInvertStyles = {
+            '--i-bg-default': `var(--plus-color-background-${this.status}-invert-default)`,
+            '--i-bg-hovered': `var(--plus-color-background-${this.status}-invert-hovered)`,
+            '--i-bg-focused': `var(--plus-color-background-${this.status}-invert-pressed)`,
+            '--i-bg-pressed': `var(--plus-color-background-${this.status}-invert-focused)`,
+            '--i-text-color': `var(--plus-color-text-${this.status === 'default' ? 'base' : 'default'})`,
+            '--i-border-color': 'transparent',
+        };
+        const outlinedStyles = {
+            '--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-${this.status})`,
+            '--i-border-color': `var(--plus-color-border-${this.status})`,
+        };
+        const styles = {
+            filled: this.invert ? filledInvertStyles : filledStyles,
+            outlined: outlinedStyles,
+        };
+        const style = o(styles[this.kind]);
+        const { base, icon } = chipStyle({
+            kind: this.kind,
+            size: this.size,
+            type: this.type,
+            shape: this.shape,
+            disabled: this.disabled,
+            status: this.status,
+        });
+        return x `
+      <div
+        role="status"
+        aria-live="polite"
+        tabindex=${this.disabled ? '-1' : '0'}
+        aria-disabled=${this.disabled}
+        aria-label=${`${this.status} chip`}
+        class=${base()}
+        style=${style}
+        part="base"
+      >
+        <slot></slot>
+        ${this.dismiss
+            ? x `<plus-icon
+              class=${icon()}
+              role="button"
+              tabindex="0"
+              part="icon"
+              aria-label="Remove"
+              @click=${this.onDismiss}
+              iconName="xmark"
+            >
+            </plus-icon>`
+            : E}
+      </div>
+    `;
+    }
+}
+__decorate([
+    n({ type: String })
+], PlusChip.prototype, "kind", void 0);
+__decorate([
+    n({ type: String })
+], PlusChip.prototype, "size", void 0);
+__decorate([
+    n({ type: String })
+], PlusChip.prototype, "type", void 0);
+__decorate([
+    n({ type: String })
+], PlusChip.prototype, "status", void 0);
+__decorate([
+    n({ type: String })
+], PlusChip.prototype, "shape", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value !== 'false' })
+], PlusChip.prototype, "invert", void 0);
+__decorate([
+    n({ type: Boolean, converter: (value) => value !== 'false' })
+], PlusChip.prototype, "dismiss", void 0);
+__decorate([
+    n({ type: Boolean })
+], PlusChip.prototype, "disabled", void 0);
+
+export { PlusChip, PlusChip as default };

package/cdn/components/chip/chip.style.js

@@ -0,0 +1,71 @@
+import { c as ce } from '../../index-B9iart53.js';
+
+const chipStyle = ce({
+    slots: {
+        base: [
+            'chip antialiased',
+            'font-sans font-normal',
+            'inline-flex items-center justify-center',
+            'border',
+        ],
+        icon: ['icon'],
+    },
+    variants: {
+        size: {
+            sm: 'small py-0.5 px-1.5 text-xs gap-1',
+            md: 'medium py-1 px-2 text-sm gap-1.5',
+            lg: 'large py-1.5 px-2.5 text-base gap-2',
+        },
+        kind: {
+            filled: 'filled',
+            outlined: 'outlined',
+        },
+        status: {
+            default: 'default',
+            primary: 'primary',
+            success: 'success',
+            warning: 'warning',
+            danger: 'danger',
+            info: 'info',
+        },
+        disabled: {
+            true: {
+                base: [
+                    'disabled cursor-not-allowed',
+                    'bg-color-disabled text-color-disabled border-color-disabled',
+                ],
+                icon: [''],
+            },
+            false: {
+                base: [
+                    'text-color-dynamic',
+                    'border-color-dynamic',
+                    'bg-color-dynamic-default',
+                    'hover:bg-color-dynamic-hovered',
+                    'active:bg-color-dynamic-pressed',
+                    'focus-visible:bg-color-dynamic-focused',
+                    'focus-visible:ring-default',
+                ],
+                icon: ['cursor-pointer'],
+            },
+        },
+        type: {
+            avatar: '',
+            default: '',
+        },
+        shape: {
+            full: 'full-rounded rounded-full',
+            rounded: 'rounded rounded-md',
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+        kind: 'filled',
+        type: 'default',
+        disabled: false,
+        shape: 'full',
+        status: 'default',
+    },
+});
+
+export { chipStyle };

package/cdn/components/chip/index.js

@@ -0,0 +1,11 @@
+import PlusChip from './chip.js';
+import '../../property-DiPQx9S3.js';
+import '../../lit-element-ByzbtpGk.js';
+import '../base/tailwind-base.js';
+import '../../global-Dh9axYQH.js';
+import './chip.style.js';
+import '../../index-B9iart53.js';
+import '../../style-map-DC_vNus2.js';
+import '../../directive-DZCF8pFJ.js';
+
+customElements.define('plus-chip', PlusChip);

package/cdn/components/divider/divider.js

@@ -0,0 +1,126 @@
+import { _ as __decorate, n } from '../../property-DiPQx9S3.js';
+import { x } from '../../lit-element-ByzbtpGk.js';
+import { r } from '../../state-D1d5Sfj8.js';
+import { dividerStyle, baseDividerStyle } from './divider.style.js';
+import Tailwind from '../base/tailwind-base.js';
+import '../../index-B9iart53.js';
+import '../../global-Dh9axYQH.js';
+
+/**
+ * @tag plus-divider
+ * @since 0.0.0
+ * @status stable
+ *
+ * PlusDivider component is used to visually separate content in a list or group.
+ *
+ * @slot - The default slot for optional divider content (for text dividers)
+ *
+ * @csspart divider - The component's base wrapper
+ * @csspart label - The text content container
+ *
+ * @cssproperty --divider-color - Controls the color of the divider
+ * @cssproperty --divider-thickness - Controls the thickness of the divider
+ * @cssproperty --divider-spacing - Controls the spacing around the divider
+ */
+class PlusDivider extends Tailwind {
+    constructor() {
+        super(...arguments);
+        /**
+         * The orientation of the divider.
+         * @default 'horizontal'
+         */
+        this.orientation = 'horizontal';
+        /**
+         * The Kind of the divider.
+         * @default 'solid'
+         */
+        this.kind = 'solid';
+        /**
+         * The position of the text content (only applicable with hasContent=true)
+         * @default 'center'
+         */
+        this.contentPosition = 'center';
+        /**
+         * The thickness of the divider
+         * @default 'thin'
+         */
+        this.thickness = 'thin';
+        /**
+         * Whether the divider has content or not
+         * @default false
+         */
+        this.hasContent = false;
+    }
+    handleSlotChange(event) {
+        const slot = event.target;
+        this.hasContent = slot.assignedNodes().length > 0;
+    }
+    render() {
+        const { base, line, slotArea } = baseDividerStyle({
+            orientation: this.orientation,
+            kind: this.kind,
+            hasContent: this.hasContent,
+        });
+        // // For a divider with content
+        // if (this.hasContent) {
+        //   // For horizontal divider with content
+        //   if (this.orientation === 'horizontal') {
+        //     return html`
+        //       <div class=${base()} part="divider">
+        //         ${this.contentPosition !== 'right'
+        //           ? html`<hr class="plus-divider" />`
+        //           : ''}
+        //         <div class="divider-content" part="label">
+        //           <slot></slot>
+        //         </div>
+        //         ${this.contentPosition !== 'left'
+        //           ? html`<hr class="plus-divider" />`
+        //           : ''}
+        //       </div>
+        //     `;
+        //   }
+        //   // For vertical divider with content
+        //   return html`
+        //     <div class=${base()} part="divider">
+        //       ${this.contentPosition !== 'right'
+        //         ? html`<div class="plus-divider"></div>`
+        //         : ''}
+        //       <div class="divider-content" part="label">
+        //         <slot></slot>
+        //       </div>
+        //       ${this.contentPosition !== 'left'
+        //         ? html`<div class="plus-divider"></div>`
+        //         : ''}
+        //     </div>
+        //   `;
+        // }
+        // For a simple divider without content
+        return x `
+      <div class=${base()} part="divider">
+        <div class=${line()}></div>
+        <div class=${slotArea()}>
+          <slot @slotchange=${this.handleSlotChange}></slot>
+        </div>
+        <div class=${line()}></div>
+      </div>
+    `;
+    }
+}
+PlusDivider.styles = [...Tailwind.styles, dividerStyle];
+__decorate([
+    n({ type: String, reflect: true })
+], PlusDivider.prototype, "orientation", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], PlusDivider.prototype, "kind", void 0);
+__decorate([
+    n({ type: String, reflect: true, attribute: 'content-position' })
+], PlusDivider.prototype, "contentPosition", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], PlusDivider.prototype, "thickness", void 0);
+__decorate([
+    r()
+], PlusDivider.prototype, "hasContent", void 0);
+
+export { PlusDivider, PlusDivider as default };

package/cdn/components/divider/divider.style.js

@@ -0,0 +1,151 @@
+import { i } from '../../lit-element-ByzbtpGk.js';
+import { c as ce } from '../../index-B9iart53.js';
+
+const baseDividerStyle = ce({
+    slots: {
+        base: [
+            'plus-divider',
+            'plus-ui-element',
+            'flex items-center justify-center',
+        ],
+        line: 'plus-divider-line',
+        slotArea: '',
+    },
+    variants: {
+        orientation: {
+            horizontal: {
+                base: 'horizontal-divider',
+                line: '',
+            },
+            vertical: {
+                base: 'vertical-divider',
+                line: '',
+            },
+        },
+        kind: {
+            solid: {
+                base: 'divider-solid',
+                line: '',
+            },
+            dashed: {
+                base: 'divider-dashed',
+                line: '',
+            },
+            dotted: {
+                base: 'divider-dotted',
+                line: '',
+            },
+        },
+        hasContent: {
+            true: {
+                slotArea: 'mx-(--divider-spacing)',
+            },
+            false: {
+                slotArea: '',
+            },
+        },
+    },
+    defaultVariants: {
+        orientation: 'horizontal',
+        kind: 'solid',
+        hasContent: false,
+    },
+});
+const dividerStyle = i `
+  :host {
+    --divider-color: var(
+      --plus-color-background-divider
+    );
+    --divider-thickness-thin: 1px;
+    --divider-thickness-medium: 2px;
+    --divider-thickness-thick: 4px;
+    --divider-spacing: 8px;
+    --divider-type: solid;
+  }
+
+  :host([orientation='horizontal']) {
+    width: 100%;
+    display: block;
+    margin: var(--divider-spacing) 0;
+  }
+
+  :host([orientation='vertical']) {
+    height: 100%;
+    margin: 0 var(--divider-spacing);
+    display: inline-block;
+  }
+
+  :host([orientation='horizontal'])
+    .plus-divider {
+    height: 0;
+    width: 100%;
+  }
+  :host([orientation='horizontal'])
+    .plus-divider-line {
+    height: 0;
+    width: 100%;
+    border-top-width: var(
+      --divider-thickness,
+      var(--divider-thickness-thin)
+    );
+    border-top-style: var(--divider-type, solid);
+    border-color: var(--divider-color);
+  }
+
+  :host([orientation='vertical']) .plus-divider {
+    width: 0;
+    height: 100%;
+  }
+  :host([orientation='vertical'])
+    .plus-divider-line {
+    width: 0;
+    height: 100%;
+    border-left-width: var(
+      --divider-thickness,
+      var(--divider-thickness-thin)
+    );
+    border-left-style: var(--divider-type, solid);
+    border-color: var(--divider-color);
+    display: inline-block;
+  }
+
+  :host([Kind='dashed'][orientation='horizontal'])
+    .plus-divider-line {
+    border-top-style: dashed;
+  }
+
+  :host([Kind='dotted'][orientation='horizontal'])
+    .plus-divider-line {
+    border-top-style: dotted;
+  }
+
+  :host([Kind='dashed'][orientation='vertical'])
+    .plus-divider-line {
+    border-left-style: dashed;
+  }
+
+  :host([Kind='dotted'][orientation='vertical'])
+    .plus-divider-line {
+    border-left-style: dotted;
+  }
+
+  :host([thickness='thin']) {
+    --divider-thickness: var(
+      --divider-thickness-thin
+    );
+  }
+
+  :host([thickness='medium']) {
+    --divider-thickness: var(
+      --divider-thickness-medium
+    );
+  }
+
+  :host([thickness='thick']) {
+    --divider-thickness: var(
+      --divider-thickness-thick
+    );
+  }
+`;
+
+export { baseDividerStyle, dividerStyle };

package/cdn/components/divider/index.js

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