@easemate/web-kit 0.1.0

package/build/elements/button/index.js

@@ -0,0 +1,210 @@
+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

@@ -0,0 +1,316 @@
+"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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,14 @@
+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;
+}