@easemate/web-kit 0.2.0 → 0.3.1

package/build/elements/button/index.js

@@ -1,210 +0,0 @@
-import { html } from 'lit-html';
-import { Component } from '../../decorators/Component';
-import { Prop } from '../../decorators/Prop';
-@Component({
-    tag: 'ease-button',
-    autoSlot: true,
-    shadowMode: 'open',
-    styles: `
-    :host {
-      display: block;
-      width: 100%;
-    }
-
-    :host([data-variant="headless"]) {
-      display: inline-flex;
-      width: auto;
-    }
-
-    button {
-      appearance: none;
-      font-family: var(--ease-font-family, inherit);
-      font-optical-sizing: auto;
-      font-size: var(--ease-button-font-size, var(--ease-font-size-sm, 12px));
-      font-weight: 550;
-      color: var(--ease-button-color, var(--color-blue-100));
-      min-width: 0;
-      padding: var(--ease-button-padding, 7px 8px);
-      display: block;
-      border-radius: var(--ease-button-radius, 5px);
-      background-color: var(--ease-button-background, var(--color-gray-850));
-      border: none;
-      outline: none;
-      margin: 0;
-      line-height: var(--ease-button-line-height, 14px);
-      box-shadow: inset 0 1px .25px 0 var(--color-white-4), 0 1px 2.5px 0 var(--color-black-8);
-      transition: color 0.2s, background-color 0.2s, scale 0.2s, box-shadow 0.2s;
-      cursor: pointer;
-      min-width: var(--ease-button-min-width, 88px);
-      white-space: nowrap;
-      overflow: hidden;
-      position: relative;
-      text-overflow: ellipsis;
-      text-align: center;
-
-      &[data-pill="true"] {
-        border-radius: 999px;
-      }
-
-      &[data-full-width="true"] {
-        width: 100%;
-      }
-
-      &[data-block="icon"] {
-        --ease-icon-size: 16px;
-        width: 28px;
-        height: 28px;
-        min-width: 28px;
-        padding: 0;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: var(--color-gray-700);
-
-        &:hover,
-        &:focus-visible {
-          color: var(--ease-button-hover-color, var(--color-blue-100));
-        }
-
-        &[data-variant="headless"] {
-          --ease-icon-size: 16px;
-          width: auto;
-          height: auto;
-          padding: 0;
-          min-width: 0;
-          margin: -1px;
-        }
-      }
-      
-      &[data-block="small"] {
-        padding: 5px 8px;
-        font-size: 12px;
-        line-height: 14px;
-        border-radius: 5px;
-      }
-      
-      &[data-block="large"] {
-        padding: 9px 12px;
-        font-size: 13px;
-        line-height: 14px;
-        border-radius: 8px;
-      }
-
-      &:hover,
-      &:focus-visible {
-        background-color: var(--ease-button-hover-background-color, var(--color-gray-825));
-        color: var(--ease-button-hover-color, var(--color-blue-100));
-      }
-
-      &[data-variant="headless"],
-      &[data-variant="headless-muted"] {
-        background-color: transparent;
-        box-shadow: none;
-        min-width: 0;
-        width: auto;
-        padding: 0;
-        transition: scale 0.2s, color 0.2s;
-
-        &:hover,
-        &:focus-visible {
-          scale: 1.05;
-        }
-
-        &:active {
-          scale: 0.95;
-        }
-      }
-
-      &[data-variant="headless-muted"] {
-        color: var(--ease-button-color, var(--color-gray-600));
-
-        &:hover,
-        &:focus-visible {
-          color: var(--ease-button-hover-color, var(--color-blue-100));
-        }
-      }
-
-      &[data-variant="link"] {
-        background-color: transparent;
-        box-shadow: none;
-
-        &:hover,
-        &:focus-visible {
-          background-color: var(--ease-button-hover-background-color, var(--color-gray-875));
-        }
-      }
-
-      &[data-variant="primary"] {
-        color: var(--color-blue-100);
-        font-weight: 450;
-        border-radius: 36px;
-        
-        background: radial-gradient(217.29% 45.98% at 99.13% 4.17%, rgba(21, 24, 220, 0.40) 0%, rgba(21, 24, 220, 0.00) 100%), radial-gradient(104.75% 41.7% at 3.06% 100%, rgba(233, 208, 254, 0.30) 0%, rgba(21, 24, 220, 0.00) 100%), radial-gradient(30.53% 47.92% at 46.51% -14.58%, rgba(233, 208, 254, 0.60) 0%, rgba(21, 24, 220, 0.00) 100%), radial-gradient(22.57% 35.42% at 46.29% 112.5%, rgba(233, 208, 254, 0.20) 0%, rgba(21, 24, 220, 0.00) 100%), rgba(255, 255, 255, 0.12);
-        background-repeat: no-repeat;
-
-        box-shadow: 
-          0px 1px 0px 0px rgba(255, 255, 255, 0.2), 
-          inset 0px 0px 50px 0px rgba(255, 255, 255, 0.02), 
-          inset 0px 0px 0px 1px rgba(255, 255, 255, 0.02), 
-          inset 0px 0px 4px 0px rgba(69, 40, 255, 0.4);
-
-
-        &::before {
-          content: '';
-          position: absolute;
-          inset: 0;
-          background-color: var(--color-white-2);
-          box-shadow: inset 0px 0.5px 0.75px 0px var(--color-white-30);
-          mix-blend-mode: overlay;
-          pointer-events: none;
-          z-index: 1;
-          border-radius: inherit;
-        }
-
-        &:hover,
-        &:focus-visible {
-           filter: brightness(1.1);
-        }
-      }
-    }
-  `
-})
-export class Button extends HTMLElement {
-    @Prop({ type: Boolean, reflect: true })
-    accessor disabled = false;
-    @Prop({ type: Boolean, reflect: true })
-    accessor pill = false;
-    @Prop({ type: Boolean, reflect: true })
-    accessor fullWidth = false;
-    @Prop({ type: String, reflect: true, defaultValue: 'button' })
-    accessor type;
-    @Prop({
-        type: String,
-        reflect: true,
-        defaultValue: 'medium',
-        onAttributeChange() {
-            this.requestRender?.();
-        }
-    })
-    accessor block = 'medium';
-    @Prop({
-        type: String,
-        reflect: true,
-        defaultValue: 'default'
-    })
-    accessor variant;
-    render() {
-        return html `
-      <button
-        type=${this.type}
-        ?disabled=${this.disabled}
-        data-variant=${this.variant}
-        data-full-width=${this.fullWidth}
-        data-pill=${this.pill}
-        data-block="${this.block}"
-      >
-        <slot></slot>
-      </button>
-    `;
-    }
-}

package/build/elements/checkbox/index.cjs

@@ -1,316 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Checkbox = void 0;
-const lit_html_1 = require("lit-html");
-const shared_1 = require("../shared.cjs");
-const Component_1 = require("../../decorators/Component");
-const Listen_1 = require("../../decorators/Listen");
-const Prop_1 = require("../../decorators/Prop");
-const Query_1 = require("../../decorators/Query");
-@(0, Component_1.Component)({
-    tag: 'ease-checkbox',
-    styles: `
-    .checkbox {
-      display: table;
-      border-radius: var(--ease-checkbox-radius, 5px);
-      position: relative;
-
-      svg {
-        display: block;
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        top: 0;
-        pointer-events: none;
-        fill: var(--ease-checkbox-check-color, var(--color-blue-100));
-        transform: scale(1.01) translateZ(0);
-
-        .tick {
-          fill: none;
-          stroke-width: 3px;
-          stroke-linecap: round;
-          stroke-linejoin: round;
-          stroke: var(--ease-checkbox-check-color, var(--color-blue-100));
-          transform-origin: 10.5px 16px;
-          transform: scale(1) translateZ(0);
-        }
-
-        .dot {
-          transform-origin: 10.5px 15.5px;
-          transform: scale(1) translateZ(0);
-          transform-box: fill-box;
-        }
-
-         .drop {
-          transform-origin: 25px -1px;
-          transform: scale(1) translateZ(0);
-          opacity: 0;
-        }
-      }
-    }
-
-    [part="checkbox"] {
-      display: table;
-      margin: 0;
-      padding: 0;
-      appearance: none;
-      cursor: pointer;
-      background: none;
-      border: none;
-      outline: none;
-    }
-
-    [part="control"] {
-      appearance: none;
-      outline: none;
-      border: none;
-      background: none;
-      display: block;
-      cursor: pointer;
-      margin: 0;
-      padding: 0;
-      border-radius: inherit;
-      width: var(--ease-checkbox-size, 24px);
-      height: var(--ease-checkbox-size, 24px);
-    }
-
-    [part="control"] {
-      box-shadow: inset 0 0 0 var(--ease-checkbox-border-width, 2px) var(--ease-checkbox-border-color, var(--color-gray-700));
-    }
-
-    .tick {
-      stroke-dasharray: 16px 33px;
-      stroke-dashoffset: 20.5px;
-    }
-
-    .dot {
-      transform: translate(14px, -14px) scale(1) translateZ(0);
-      opacity: 0;
-    }
-
-    [part="control"]:checked {
-      box-shadow: inset 0 0 0 var(--ease-checkbox-checked-fill-size, 12px) var(--ease-checkbox-checked-fill, var(--color-blue-800));
-    }
-
-    [part="control"]:checked + svg .tick {
-      stroke-dasharray: 16.5px 33px;
-      stroke-dashoffset: 46.5px;
-    }
-
-    [part="control"]:checked + svg .dot {
-      transform: translate(0px, 0px) scale(1) translateZ(0);
-      opacity: 1;
-    }
-
-    [part="checkbox"] [part="control"].anim-checked {
-      animation: checkbox-border-fill 0.2s ease-out forwards, checkbox-morph 0.5s ease-out forwards;
-    }
-
-    [part="checkbox"] [part="control"].anim-checked + svg {
-      .tick {
-        animation: checkbox-tick 0.65s ease-out forwards;
-      }
-
-      .dot {
-        animation: checkbox-dot-move 0.6s ease-out forwards;
-      }
-    }
-
-    [part="checkbox"] [part="control"].anim-unchecked {
-      animation: checkbox-border-default 0.4s ease-out forwards;
-    }
-
-    [part="checkbox"] [part="control"].anim-unchecked + svg {
-      .tick {
-        animation: checkbox-tick-default 0.2s ease-out forwards;
-      }
-      .dot {
-        animation: checkbox-dot-hide 0.2s ease-out forwards;
-      }
-    }
-      
-    @keyframes checkbox-border-fill {
-      0% {
-        box-shadow: inset 0 0 0 var(--ease-checkbox-border-width, 2px) var(--ease-checkbox-border-color, var(--color-gray-700));
-      }
-        100% {
-            box-shadow: inset 0 0 0 var(--ease-checkbox-checked-fill-size, 12px) var(--ease-checkbox-checked-fill, var(--color-blue-800));
-        }
-    }
-
-    @keyframes checkbox-morph {
-      0%, 40% {
-        border-radius: 5px 14px 5px 5px;
-      }
-      100% {
-        border-radius: 5px;
-      }
-    }
-
-    @keyframes checkbox-tick {
-        0% {
-            stroke-dasharray: 16px 33px;
-            stroke-dashoffset: 20.5px;
-        }
-        47% {
-            stroke-dasharray: 14px 33px;
-            stroke-dashoffset: 48px;
-        }
-        100% {
-            stroke-dasharray: 16.5px 33px;
-            stroke-dashoffset: 46.5px;
-        }
-    }
-
-    @keyframes checkbox-dot-move {
-        0%, 40% {
-            transform: translate(14px, -14px) scale(1) translateZ(0);
-            opacity: 0;
-        }
-        100% {
-            transform: translate(0px, 0px) scale(1) translateZ(0);
-            opacity: 1;
-        }
-    }
-
-    @keyframes checkbox-dot-hide {
-        0% {
-            transform: translate(0px, 0px) scale(1) translateZ(0);
-            opacity: 1;
-        }
-        100% {
-            transform: translate(14px, -14px) scale(1) translateZ(0);
-            opacity: 0;
-        }
-    }
-
-    @keyframes checkbox-border-default {
-        0%,
-        40% {
-            box-shadow: inset 0 0 0 var(--ease-checkbox-checked-fill-size, 12px) var(--ease-checkbox-checked-fill, var(--color-blue-800));
-        }
-        100% {
-            box-shadow: inset 0 0 0 var(--ease-checkbox-border-width, 2px) var(--ease-checkbox-border-color, var(--color-gray-700));
-        }
-    }
-
-    @keyframes checkbox-tick-default {
-        0% {
-            stroke-dasharray: 16.5px 33px;
-            stroke-dashoffset: 46.5px;
-        }
-        100% {
-            stroke-dasharray: 16px 33px;
-            stroke-dashoffset: 20.5px;
-        }
-    }
-  `,
-    template() {
-        return (0, lit_html_1.html) `
-      <button
-        part="checkbox"
-        type="button"
-        role="checkbox"
-        aria-checked=${this.checked}
-        ?disabled=${this.disabled}
-      >
-        <div class="checkbox">
-          <input
-            part="control"
-            name=${this.name}
-            value=${this.value}
-            ?checked=${this.checked}
-            ?disabled=${this.disabled}
-            type="checkbox"
-          />
-          <svg viewBox="0 0 24 24" filter="url(#${this.filterId})">
-            <path class="tick" d="M4.5 10L10.5 16L24.5 1" />
-            <circle class="dot" cx="10.5" cy="15.5" r="1.5" />
-            <circle class="drop" cx="25" cy="-1" r="2" />
-          </svg>
-        </div>
-
-        <svg style="display: none;">
-          <defs>
-            <filter id="${this.filterId}">
-              <feGaussianBlur
-                in="SourceGraphic"
-                stdDeviation="1.25"
-                result="blur"
-              />
-              <feColorMatrix
-                in="blur"
-                mode="matrix"
-                values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9"
-                result="gooey"
-              />
-              <feBlend in="SourceGraphic" in2="gooey" />
-            </filter>
-          </defs>
-        </svg>
-      </button>
-    `;
-    }
-})
-class Checkbox extends HTMLElement {
-    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
-    accessor checked;
-    @(0, Prop_1.Prop)({ reflect: true })
-    accessor name;
-    @(0, Prop_1.Prop)({ reflect: true })
-    accessor value;
-    @(0, Prop_1.Prop)({ type: Boolean, reflect: true })
-    accessor disabled;
-    @(0, Query_1.Query)('button')
-    accessor control;
-    _prevChecked;
-    filterId = `goo-${crypto.randomUUID()}`;
-    connectedCallback() {
-        this._prevChecked = this.checked;
-    }
-    afterRender() {
-        if (!this.control) {
-            return;
-        }
-        const changed = typeof this._prevChecked !== 'undefined' && this.checked !== this._prevChecked;
-        if (changed) {
-            this._triggerAnimation(this.checked);
-            this._prevChecked = this.checked;
-        }
-        const control = this.control;
-        control.setAttribute('aria-checked', this.checked ? 'true' : 'false');
-        control.disabled = Boolean(this.disabled);
-        (0, shared_1.setBooleanAttribute)(this, 'disabled', Boolean(this.disabled));
-    }
-    _triggerAnimation(checked) {
-        const control = this.shadowRoot?.querySelector('[part="control"]');
-        const svg = this.shadowRoot?.querySelector('svg');
-        if (!control || !svg) {
-            return;
-        }
-        control.classList.remove('anim-checked', 'anim-unchecked');
-        svg.classList.remove('anim-checked', 'anim-unchecked');
-        const animClass = checked ? 'anim-checked' : 'anim-unchecked';
-        const duration = checked ? 650 : 400;
-        control.classList.add(animClass);
-        svg.classList.add(animClass);
-        setTimeout(() => {
-            control.classList.remove(animClass);
-            svg.classList.remove(animClass);
-        }, duration);
-    }
-    @(0, Listen_1.Listen)('click', {
-        selector: 'button'
-    })
-    handleClick(event) {
-        if (this.disabled) {
-            event.preventDefault();
-            event.stopPropagation();
-            return;
-        }
-        this.checked = !this.checked;
-        (0, shared_1.dispatchControlEvent)(this, 'checkbox', { value: this.checked, event });
-    }
-}
-exports.Checkbox = Checkbox;

package/build/elements/checkbox/index.d.cts

@@ -1,14 +0,0 @@
-export declare class Checkbox extends HTMLElement {
-    requestRender: () => void;
-    accessor checked: boolean;
-    accessor name: string | null;
-    accessor value: string | null;
-    accessor disabled: boolean;
-    accessor control: HTMLButtonElement | null;
-    private _prevChecked?;
-    filterId: string;
-    connectedCallback(): void;
-    afterRender(): void;
-    private _triggerAnimation;
-    handleClick(event: MouseEvent): void;
-}

package/build/elements/checkbox/index.d.ts

@@ -1,14 +0,0 @@
-export declare class Checkbox extends HTMLElement {
-    requestRender: () => void;
-    accessor checked: boolean;
-    accessor name: string | null;
-    accessor value: string | null;
-    accessor disabled: boolean;
-    accessor control: HTMLButtonElement | null;
-    private _prevChecked?;
-    filterId: string;
-    connectedCallback(): void;
-    afterRender(): void;
-    private _triggerAnimation;
-    handleClick(event: MouseEvent): void;
-}