0xtrails 0.0.1 → 0.0.2

package/dist/widget/image-C90L4Rf6.js

@@ -0,0 +1,9 @@
+import "./index-CK94R-H7.js";
+import { b as C } from "./lit-html-BRjl1r6K.js";
+const o = C`<svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+  <path d="M4.98926 3.73932C4.2989 3.73932 3.73926 4.29896 3.73926 4.98932C3.73926 5.67968 4.2989 6.23932 4.98926 6.23932C5.67962 6.23932 6.23926 5.67968 6.23926 4.98932C6.23926 4.29896 5.67962 3.73932 4.98926 3.73932Z" fill="currentColor"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.60497 0.500001H6.39504C5.41068 0.499977 4.59185 0.499958 3.93178 0.571471C3.24075 0.64634 2.60613 0.809093 2.04581 1.21619C1.72745 1.44749 1.44749 1.72745 1.21619 2.04581C0.809093 2.60613 0.64634 3.24075 0.571471 3.93178C0.499958 4.59185 0.499977 5.41065 0.500001 6.39501V7.57815C0.499998 8.37476 0.499995 9.05726 0.534869 9.62725C0.570123 10.2034 0.644114 10.7419 0.828442 11.2302C0.925651 11.4877 1.05235 11.7287 1.21619 11.9542C1.44749 12.2726 1.72745 12.5525 2.04581 12.7838C2.60613 13.1909 3.24075 13.3537 3.93178 13.4285C4.59185 13.5001 5.41066 13.5 6.39503 13.5H7.60496C8.58933 13.5 9.40815 13.5001 10.0682 13.4285C10.7593 13.3537 11.3939 13.1909 11.9542 12.7838C12.2726 12.5525 12.5525 12.2726 12.7838 11.9542C13.1909 11.3939 13.3537 10.7593 13.4285 10.0682C13.5 9.40816 13.5 8.58935 13.5 7.60497V6.39505C13.5 5.41068 13.5 4.59185 13.4285 3.93178C13.3537 3.24075 13.1909 2.60613 12.7838 2.04581C12.5525 1.72745 12.2726 1.44749 11.9542 1.21619C11.3939 0.809093 10.7593 0.64634 10.0682 0.571471C9.40816 0.499958 8.58933 0.499977 7.60497 0.500001ZM3.22138 2.83422C3.38394 2.71612 3.62634 2.61627 4.14721 2.55984C4.68679 2.50138 5.39655 2.5 6.45 2.5H7.55C8.60345 2.5 9.31322 2.50138 9.8528 2.55984C10.3737 2.61627 10.6161 2.71612 10.7786 2.83422C10.9272 2.94216 11.0578 3.07281 11.1658 3.22138C11.2839 3.38394 11.3837 3.62634 11.4402 4.14721C11.4986 4.68679 11.5 5.39655 11.5 6.45V6.49703C10.9674 6.11617 10.386 5.84936 9.74213 5.81948C8.40536 5.75745 7.3556 6.73051 6.40509 7.84229C6.33236 7.92737 6.27406 7.98735 6.22971 8.02911L6.1919 8.00514L6.17483 7.99427C6.09523 7.94353 5.98115 7.87083 5.85596 7.80302C5.56887 7.64752 5.18012 7.4921 4.68105 7.4921C4.66697 7.4921 4.6529 7.49239 4.63884 7.49299C3.79163 7.52878 3.09922 8.1106 2.62901 8.55472C2.58751 8.59392 2.54594 8.6339 2.50435 8.6745C2.50011 8.34653 2.5 7.97569 2.5 7.55V6.45C2.5 5.39655 2.50138 4.68679 2.55984 4.14721C2.61627 3.62634 2.71612 3.38394 2.83422 3.22138C2.94216 3.07281 3.07281 2.94216 3.22138 2.83422ZM10.3703 8.14825C10.6798 8.37526 11.043 8.71839 11.4832 9.20889C11.4744 9.44992 11.4608 9.662 11.4402 9.8528C11.3837 10.3737 11.2839 10.6161 11.1658 10.7786C11.0578 10.9272 10.9272 11.0578 10.7786 11.1658C10.6161 11.2839 10.3737 11.3837 9.8528 11.4402C9.31322 11.4986 8.60345 11.5 7.55 11.5H6.45C5.39655 11.5 4.68679 11.4986 4.14721 11.4402C3.62634 11.3837 3.38394 11.2839 3.22138 11.1658C3.15484 11.1174 3.0919 11.0645 3.03298 11.0075C3.10126 10.9356 3.16806 10.8649 3.23317 10.7959L3.29772 10.7276C3.55763 10.4525 3.78639 10.2126 4.00232 10.0087C4.22016 9.80294 4.39412 9.66364 4.53524 9.57742C4.63352 9.51738 4.69022 9.49897 4.71275 9.49345C4.76387 9.49804 4.81803 9.51537 4.90343 9.56162C4.96409 9.59447 5.02355 9.63225 5.11802 9.69238L5.12363 9.69595C5.20522 9.74789 5.32771 9.82587 5.46078 9.89278C5.76529 10.0459 6.21427 10.186 6.74977 10.0158C7.21485 9.86796 7.59367 9.52979 7.92525 9.14195C8.91377 7.98571 9.38267 7.80495 9.64941 7.81733C9.7858 7.82366 10.0101 7.884 10.3703 8.14825Z" fill="currentColor"/>
+</svg>`;
+export {
+  o as imageSvg
+};

package/dist/widget/index-B3SlQ9v3.js

@@ -0,0 +1,46 @@
+import { i as p, r as f, a as d } from "./index-CK94R-H7.js";
+import { x as u } from "./lit-html-BRjl1r6K.js";
+import { n as m, c as g } from "./if-defined-DRXJEhv7.js";
+const x = p`
+  :host {
+    position: relative;
+    display: flex;
+    width: 100%;
+    height: 1px;
+    background-color: var(--wui-color-gray-glass-005);
+    justify-content: center;
+    align-items: center;
+  }
+
+  :host > wui-text {
+    position: absolute;
+    padding: 0px 10px;
+    background-color: var(--wui-color-modal-bg);
+    transition: background-color var(--wui-duration-lg) var(--wui-ease-out-power-1);
+    will-change: background-color;
+  }
+`;
+var c = function(o, e, r, i) {
+  var n = arguments.length, t = n < 3 ? e : i === null ? i = Object.getOwnPropertyDescriptor(e, r) : i, a;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") t = Reflect.decorate(o, e, r, i);
+  else for (var s = o.length - 1; s >= 0; s--) (a = o[s]) && (t = (n < 3 ? a(t) : n > 3 ? a(e, r, t) : a(e, r)) || t);
+  return n > 3 && t && Object.defineProperty(e, r, t), t;
+};
+let l = class extends d {
+  constructor() {
+    super(...arguments), this.text = "";
+  }
+  render() {
+    return u`${this.template()}`;
+  }
+  template() {
+    return this.text ? u`<wui-text variant="small-500" color="fg-200">${this.text}</wui-text>` : null;
+  }
+};
+l.styles = [f, x];
+c([
+  m()
+], l.prototype, "text", void 0);
+l = c([
+  g("wui-separator")
+], l);

package/dist/widget/index-B8LPuLXQ.js

@@ -0,0 +1,78 @@
+import { i as d, a as g } from "./index-CK94R-H7.js";
+import { x as h } from "./lit-html-BRjl1r6K.js";
+import { n, c as b } from "./if-defined-DRXJEhv7.js";
+const p = d`
+  :host {
+    display: block;
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+    background: linear-gradient(
+      120deg,
+      var(--wui-color-bg-200) 5%,
+      var(--wui-color-bg-200) 48%,
+      var(--wui-color-bg-300) 55%,
+      var(--wui-color-bg-300) 60%,
+      var(--wui-color-bg-300) calc(60% + 10px),
+      var(--wui-color-bg-200) calc(60% + 12px),
+      var(--wui-color-bg-200) 100%
+    );
+    background-size: 250%;
+    animation: shimmer 3s linear infinite reverse;
+  }
+
+  :host([variant='light']) {
+    background: linear-gradient(
+      120deg,
+      var(--wui-color-bg-150) 5%,
+      var(--wui-color-bg-150) 48%,
+      var(--wui-color-bg-200) 55%,
+      var(--wui-color-bg-200) 60%,
+      var(--wui-color-bg-200) calc(60% + 10px),
+      var(--wui-color-bg-150) calc(60% + 12px),
+      var(--wui-color-bg-150) 100%
+    );
+    background-size: 250%;
+  }
+
+  @keyframes shimmer {
+    from {
+      background-position: -250% 0;
+    }
+    to {
+      background-position: 250% 0;
+    }
+  }
+`;
+var t = function(a, i, e, c) {
+  var s = arguments.length, r = s < 3 ? i : c === null ? c = Object.getOwnPropertyDescriptor(i, e) : c, l;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") r = Reflect.decorate(a, i, e, c);
+  else for (var u = a.length - 1; u >= 0; u--) (l = a[u]) && (r = (s < 3 ? l(r) : s > 3 ? l(i, e, r) : l(i, e)) || r);
+  return s > 3 && r && Object.defineProperty(i, e, r), r;
+};
+let o = class extends g {
+  constructor() {
+    super(...arguments), this.width = "", this.height = "", this.borderRadius = "m", this.variant = "default";
+  }
+  render() {
+    return this.style.cssText = `
+      width: ${this.width};
+      height: ${this.height};
+      border-radius: ${`clamp(0px,var(--wui-border-radius-${this.borderRadius}), 40px)`};
+    `, h`<slot></slot>`;
+  }
+};
+o.styles = [p];
+t([
+  n()
+], o.prototype, "width", void 0);
+t([
+  n()
+], o.prototype, "height", void 0);
+t([
+  n()
+], o.prototype, "borderRadius", void 0);
+t([
+  n()
+], o.prototype, "variant", void 0);
+o = t([
+  b("wui-shimmer")
+], o);

package/dist/widget/index-BDbworWA.js

@@ -0,0 +1,171 @@
+import { i as v, r as b, j as g, a as h } from "./index-CK94R-H7.js";
+import { x as l } from "./lit-html-BRjl1r6K.js";
+import { n as r, c as w } from "./if-defined-DRXJEhv7.js";
+import "./index-CDlhy529.js";
+const p = v`
+  button {
+    border: none;
+    border-radius: var(--wui-border-radius-3xl);
+  }
+
+  button[data-variant='main'] {
+    background-color: var(--wui-color-accent-100);
+    color: var(--wui-color-inverse-100);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  button[data-variant='accent'] {
+    background-color: var(--wui-color-accent-glass-010);
+    color: var(--wui-color-accent-100);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-005);
+  }
+
+  button[data-variant='gray'] {
+    background-color: transparent;
+    color: var(--wui-color-fg-200);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  button[data-variant='shade'] {
+    background-color: transparent;
+    color: var(--wui-color-accent-100);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  button[data-size='sm'] {
+    height: 32px;
+    padding: 0 var(--wui-spacing-s);
+  }
+
+  button[data-size='md'] {
+    height: 40px;
+    padding: 0 var(--wui-spacing-l);
+  }
+
+  button[data-size='sm'] > wui-image {
+    width: 16px;
+    height: 16px;
+  }
+
+  button[data-size='md'] > wui-image {
+    width: 24px;
+    height: 24px;
+  }
+
+  button[data-size='sm'] > wui-icon {
+    width: 12px;
+    height: 12px;
+  }
+
+  button[data-size='md'] > wui-icon {
+    width: 14px;
+    height: 14px;
+  }
+
+  wui-image {
+    border-radius: var(--wui-border-radius-3xl);
+    overflow: hidden;
+  }
+
+  button.disabled > wui-icon,
+  button.disabled > wui-image {
+    filter: grayscale(1);
+  }
+
+  button[data-variant='main'] > wui-image {
+    box-shadow: inset 0 0 0 1px var(--wui-color-accent-090);
+  }
+
+  button[data-variant='shade'] > wui-image,
+  button[data-variant='gray'] > wui-image {
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-010);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    button[data-variant='main']:focus-visible {
+      background-color: var(--wui-color-accent-090);
+    }
+
+    button[data-variant='main']:hover:enabled {
+      background-color: var(--wui-color-accent-090);
+    }
+
+    button[data-variant='main']:active:enabled {
+      background-color: var(--wui-color-accent-080);
+    }
+
+    button[data-variant='accent']:hover:enabled {
+      background-color: var(--wui-color-accent-glass-015);
+    }
+
+    button[data-variant='accent']:active:enabled {
+      background-color: var(--wui-color-accent-glass-020);
+    }
+
+    button[data-variant='shade']:focus-visible,
+    button[data-variant='gray']:focus-visible,
+    button[data-variant='shade']:hover,
+    button[data-variant='gray']:hover {
+      background-color: var(--wui-color-gray-glass-002);
+    }
+
+    button[data-variant='gray']:active,
+    button[data-variant='shade']:active {
+      background-color: var(--wui-color-gray-glass-005);
+    }
+  }
+
+  button.disabled {
+    color: var(--wui-color-gray-glass-020);
+    background-color: var(--wui-color-gray-glass-002);
+    box-shadow: inset 0 0 0 1px var(--wui-color-gray-glass-002);
+    pointer-events: none;
+  }
+`;
+var i = function(n, t, e, s) {
+  var c = arguments.length, o = c < 3 ? t : s === null ? s = Object.getOwnPropertyDescriptor(t, e) : s, u;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") o = Reflect.decorate(n, t, e, s);
+  else for (var d = n.length - 1; d >= 0; d--) (u = n[d]) && (o = (c < 3 ? u(o) : c > 3 ? u(t, e, o) : u(t, e)) || o);
+  return c > 3 && o && Object.defineProperty(t, e, o), o;
+};
+let a = class extends h {
+  constructor() {
+    super(...arguments), this.variant = "accent", this.imageSrc = "", this.disabled = !1, this.icon = "externalLink", this.size = "md", this.text = "";
+  }
+  render() {
+    const t = this.size === "sm" ? "small-600" : "paragraph-600";
+    return l`
+      <button
+        class=${this.disabled ? "disabled" : ""}
+        data-variant=${this.variant}
+        data-size=${this.size}
+      >
+        ${this.imageSrc ? l`<wui-image src=${this.imageSrc}></wui-image>` : null}
+        <wui-text variant=${t} color="inherit"> ${this.text} </wui-text>
+        <wui-icon name=${this.icon} color="inherit" size="inherit"></wui-icon>
+      </button>
+    `;
+  }
+};
+a.styles = [b, g, p];
+i([
+  r()
+], a.prototype, "variant", void 0);
+i([
+  r()
+], a.prototype, "imageSrc", void 0);
+i([
+  r({ type: Boolean })
+], a.prototype, "disabled", void 0);
+i([
+  r()
+], a.prototype, "icon", void 0);
+i([
+  r()
+], a.prototype, "size", void 0);
+i([
+  r()
+], a.prototype, "text", void 0);
+a = i([
+  w("wui-chip-button")
+], a);

package/dist/widget/index-BTlDgFSK.js

@@ -0,0 +1,98 @@
+import { i as d, r as f, a as p } from "./index-CK94R-H7.js";
+import { x as g } from "./lit-html-BRjl1r6K.js";
+import { n as c, c as m } from "./if-defined-DRXJEhv7.js";
+const u = d`
+  :host {
+    display: flex;
+  }
+
+  :host([data-size='sm']) > svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  :host([data-size='md']) > svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  :host([data-size='lg']) > svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  :host([data-size='xl']) > svg {
+    width: 32px;
+    height: 32px;
+  }
+
+  svg {
+    animation: rotate 2s linear infinite;
+  }
+
+  circle {
+    fill: none;
+    stroke: var(--local-color);
+    stroke-width: 4px;
+    stroke-dasharray: 1, 124;
+    stroke-dashoffset: 0;
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out infinite;
+  }
+
+  :host([data-size='md']) > svg > circle {
+    stroke-width: 6px;
+  }
+
+  :host([data-size='sm']) > svg > circle {
+    stroke-width: 8px;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes dash {
+    0% {
+      stroke-dasharray: 1, 124;
+      stroke-dashoffset: 0;
+    }
+
+    50% {
+      stroke-dasharray: 90, 124;
+      stroke-dashoffset: -35;
+    }
+
+    100% {
+      stroke-dashoffset: -125;
+    }
+  }
+`;
+var l = function(i, t, s, r) {
+  var a = arguments.length, e = a < 3 ? t : r === null ? r = Object.getOwnPropertyDescriptor(t, s) : r, n;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") e = Reflect.decorate(i, t, s, r);
+  else for (var h = i.length - 1; h >= 0; h--) (n = i[h]) && (e = (a < 3 ? n(e) : a > 3 ? n(t, s, e) : n(t, s)) || e);
+  return a > 3 && e && Object.defineProperty(t, s, e), e;
+};
+let o = class extends p {
+  constructor() {
+    super(...arguments), this.color = "accent-100", this.size = "lg";
+  }
+  render() {
+    return this.style.cssText = `--local-color: ${this.color === "inherit" ? "inherit" : `var(--wui-color-${this.color})`}`, this.dataset.size = this.size, g`<svg viewBox="25 25 50 50">
+      <circle r="20" cy="50" cx="50"></circle>
+    </svg>`;
+  }
+};
+o.styles = [f, u];
+l([
+  c()
+], o.prototype, "color", void 0);
+l([
+  c()
+], o.prototype, "size", void 0);
+o = l([
+  m("wui-loading-spinner")
+], o);