@getflip/swirl-components-react 0.1.0 → 0.2.0

package/dist/{flip-thumbnail.entry.449e93ef.js → flip-thumbnail.entry.54ea67cf.js}

@@ -1,7 +1,8 @@
-import { r as t, h as a, H as s } from "./main.7e7363a7.js";
-import { c as l } from "./index-3c78bcaf.2675909b.js";
+import { r as t, h as a, H as s } from "./index.b6e7bb76.js";
+import { c as l } from "./index-6d2e18c6.289636d4.js";
 import "react";
 import "react-dom";
+import "./_commonjsHelpers-44457d8d.ba94af77.js";
 const m = ":host{display:inline-flex}:host *{box-sizing:border-box}.thumbnail{position:relative;display:inline-flex;overflow:hidden;border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1)}.thumbnail--size-s{--flip-thumbnail-size:2.5rem}.thumbnail--size-m{--flip-thumbnail-size:3rem}.thumbnail--size-l{--flip-thumbnail-size:4rem}.thumbnail--format-landscape{width:var(--flip-thumbnail-size);aspect-ratio:4 / 3}.thumbnail--format-landscape .thumbnail__image{width:100%}.thumbnail--format-portrait{height:var(--flip-thumbnail-size);aspect-ratio:3 / 4}.thumbnail--format-portrait .thumbnail__image{height:100%}.thumbnail--format-square{width:var(--flip-thumbnail-size);height:var(--flip-thumbnail-size)}.thumbnail--format-square .thumbnail__image{width:100%}.thumbnail__image{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}", r = class {
   constructor(i) {
     t(this, i), this.format = "landscape", this.size = "m";

package/dist/{flip-toast-provider.entry.59025e1a.js → flip-toast-provider.entry.0ee21f8b.js}

@@ -1,4 +1,4 @@
-import { r, h as a, H as n } from "./main.7e7363a7.js";
+import { r, h as a, H as n } from "./index.b6e7bb76.js";
 import "react";
 import "react-dom";
 const l = class {

package/dist/{flip-toast.entry.78522d59.js → flip-toast.entry.29ea2ead.js}

@@ -1,7 +1,8 @@
-import { r as i, c as a, h as t, H as e } from "./main.7e7363a7.js";
-import { c as o } from "./index-3c78bcaf.2675909b.js";
+import { r as i, c as a, h as t, H as e } from "./index.b6e7bb76.js";
+import { c as o } from "./index-6d2e18c6.289636d4.js";
 import "react";
 import "react-dom";
+import "./_commonjsHelpers-44457d8d.ba94af77.js";
 const n = ":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:0.75rem;color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast__icon{display:inline-flex;margin-top:calc(-1 * var(--s-space-2));margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}.toast__content{flex-grow:1;line-height:var(--s-line-height-base);text-align:left}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-top:calc(-1 * var(--s-space-2));margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}", r = class {
   constructor(s) {
     i(this, s), this.dismiss = a(this, "dismiss", 7), this.accessibleDismissLabel = "Dismiss", this.intent = "default", this.onDismiss = () => {

package/dist/flip-tooltip.entry.e6a904e4.js

@@ -0,0 +1,94 @@
+import { r as n, h as o, H as l } from "./index.b6e7bb76.js";
+import { c as r, o as p, s as h, f as d } from "./floating-ui.dom.esm-1a4e8b8a.87557233.js";
+import "react";
+import "react-dom";
+const c = ":host{display:inline-flex}:host *{box-sizing:border-box}.tooltip{display:inline-flex}.tooltip .tooltip__reference{display:inline-flex}.tooltip__popper{position:fixed;z-index:var(--s-z-40);max-width:17.5rem}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);-webkit-animation:tooltip-fade-in 0.1s;animation:tooltip-fade-in 0.1s;backgrund-color:red}.tooltip__arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--s-surface-neutral-default)}@-webkit-keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}", u = class {
+  constructor(e) {
+    n(this, e), this.delay = 300, this.position = "top", this.visible = !1, this.onKeydown = (t) => {
+      t.code === "Escape" && this.hide();
+    }, this.reposition = async () => {
+      !Boolean(this.referenceEl) || !Boolean(this.popperEl) || (this.actualPosition = await r(this.referenceEl, this.popperEl, this.options));
+    }, this.show = () => {
+      this.visible = !0, requestAnimationFrame(() => {
+        this.reposition();
+      });
+    }, this.showWithDelay = () => {
+      Boolean(this.showTimeout) && (clearTimeout(this.showTimeout), this.showTimeout = void 0), this.showTimeout = setTimeout(() => {
+        this.show();
+      }, this.delay);
+    }, this.hide = () => {
+      Boolean(this.showTimeout) && (clearTimeout(this.showTimeout), this.showTimeout = void 0), this.visible = !1;
+    }, this.updateOptions = () => {
+      const t = +getComputedStyle(document.documentElement).getPropertyValue("--s-space-12").replace("rem", "") * 16;
+      this.options = {
+        middleware: [p(t), h(), d()],
+        placement: this.position,
+        strategy: "fixed"
+      };
+    }, this.getArrowStyles = () => {
+      var t, s, i, a;
+      if (((t = this.actualPosition) === null || t === void 0 ? void 0 : t.placement) === "top")
+        return {
+          top: "100%",
+          left: "50%",
+          transform: "translate3d(-50%, -50%, 0) rotate(45deg)"
+        };
+      if (((s = this.actualPosition) === null || s === void 0 ? void 0 : s.placement) === "bottom")
+        return {
+          bottom: "100%",
+          left: "50%",
+          transform: "translate3d(-50%, 50%, 0) rotate(45deg)"
+        };
+      if (((i = this.actualPosition) === null || i === void 0 ? void 0 : i.placement) === "right")
+        return {
+          top: "50%",
+          right: "100%",
+          transform: "translate3d(50%, -50%, 0) rotate(45deg)"
+        };
+      if (((a = this.actualPosition) === null || a === void 0 ? void 0 : a.placement) === "left")
+        return {
+          top: "50%",
+          left: "100%",
+          transform: "translate3d(-50%, -50%, 0) rotate(45deg)"
+        };
+    };
+  }
+  watchPosition() {
+    this.updateOptions();
+  }
+  onMouseEnter() {
+    this.showWithDelay();
+  }
+  onMouseLeave() {
+    this.hide();
+  }
+  onWindowResize() {
+    this.reposition();
+  }
+  onWindowScroll() {
+    this.reposition();
+  }
+  componentWillLoad() {
+    this.reposition();
+  }
+  componentDidLoad() {
+    this.updateOptions();
+  }
+  render() {
+    var e, t;
+    const s = this.getArrowStyles();
+    return o(l, { onKeydown: this.onKeydown }, o("span", { class: "tooltip" }, o("span", { class: "tooltip__reference", "aria-describedby": "tooltip", onBlur: this.hide, onClick: this.hide, onFocus: this.show, ref: (i) => this.referenceEl = i, tabIndex: 0 }, o("slot", null)), o("span", { class: "tooltip__popper", ref: (i) => this.popperEl = i, style: {
+      top: Boolean(this.actualPosition) ? `${(e = this.actualPosition) === null || e === void 0 ? void 0 : e.y}px` : "",
+      left: Boolean(this.actualPosition) ? `${(t = this.actualPosition) === null || t === void 0 ? void 0 : t.x}px` : ""
+    } }, this.visible && o("span", { class: "tooltip__bubble", id: "tooltip", role: "tooltip" }, o("span", { class: "tooltip__content", innerHTML: this.content }), o("span", { class: "tooltip__arrow", style: s })))));
+  }
+  static get watchers() {
+    return {
+      position: ["watchPosition"]
+    };
+  }
+};
+u.style = c;
+export {
+  u as flip_tooltip
+};

package/dist/flip-video-thumbnail.entry.f3cf1c28.js

@@ -0,0 +1,83 @@
+import { r as t, h as n, H as a } from "./index.b6e7bb76.js";
+import "react";
+import "react-dom";
+const e = `:host {
+  display: flex;
+  width: 100%;
+}
+
+  :host * {
+    box-sizing: border-box;
+  }
+
+.video-thumbnail {
+  position: relative;
+  display: inline-flex;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  container-type: inline-size;
+  container-name: video-thumbnail;
+}
+
+.video-thumbnail:after {
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.05);
+    content: "";
+    inset: 0;
+  }
+
+.video-thumbnail:focus {
+    outline-color: var(--s-focus-default);
+  }
+
+.video-thumbnail__image {
+  width: 100%;
+}
+
+.video-thumbnail__duration {
+  position: absolute;
+  bottom: var(--s-space-8);
+  left: var(--s-space-8);
+  padding: var(--s-space-2) var(--s-space-8);
+  border-radius: var(--s-border-radius-sm);
+  color: var(--s-text-on-image);
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
+    rgba(255, 255, 255, 0.1);
+  font-size: var(--s-font-size-sm);
+  font-weight: var(--s-font-weight-medium);
+  line-height: var(--s-line-height-sm);
+  letter-spacing: var(--s-letter-spacing-tighter);
+}
+
+.video-thumbnail__play-icon {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  width: 2.5rem;
+  height: 2.5rem;
+  transform: translate3d(-50%, -50%, 0);
+}
+
+@container video-thumbnail (min-width: 448px) {
+  .video-thumbnail__play-icon {
+    width: 3.5rem;
+    height: 4.5rem;
+  }
+}
+`, o = class {
+  constructor(i) {
+    t(this, i), this.durationLabel = "Duration";
+  }
+  render() {
+    return n(a, null, n("button", { "aria-describedby": this.duration !== void 0 ? "duration" : void 0, "aria-label": this.label, class: "video-thumbnail", type: "button" }, n("img", { alt: "", class: "video-thumbnail__image", loading: "lazy", src: this.src }), this.duration && n("span", { class: "video-thumbnail__duration", id: "duration" }, n("flip-visually-hidden", null, this.durationLabel), this.duration), n("svg", { class: "video-thumbnail__play-icon", fill: "none", viewBox: "0 0 40 40", xmlns: "http://www.w3.org/2000/svg" }, n("path", { d: "M15 14.65V25.35C15 26.1167 15.35 26.7 16.05 27.1C16.75 27.5 17.4333 27.4667 18.1 27L26.4 21.7C27.0333 21.3 27.35 20.7333 27.35 20C27.35 19.2667 27.0333 18.7 26.4 18.3L18.1 13C17.4333 12.5333 16.75 12.5 16.05 12.9C15.35 13.3 15 13.8833 15 14.65ZM20 40C17.2333 40 14.6333 39.4747 12.2 38.424C9.76667 37.3747 7.65 35.95 5.85 34.15C4.05 32.35 2.62533 30.2333 1.576 27.8C0.525334 25.3667 0 22.7667 0 20C0 17.2333 0.525334 14.6333 1.576 12.2C2.62533 9.76667 4.05 7.65 5.85 5.85C7.65 4.05 9.76667 2.62467 12.2 1.574C14.6333 0.524667 17.2333 0 20 0C22.7667 0 25.3667 0.524667 27.8 1.574C30.2333 2.62467 32.35 4.05 34.15 5.85C35.95 7.65 37.3747 9.76667 38.424 12.2C39.4747 14.6333 40 17.2333 40 20C40 22.7667 39.4747 25.3667 38.424 27.8C37.3747 30.2333 35.95 32.35 34.15 34.15C32.35 35.95 30.2333 37.3747 27.8 38.424C25.3667 39.4747 22.7667 40 20 40Z", fill: "white", "fill-opacity": "0.95" }))));
+  }
+};
+o.style = e;
+export {
+  o as flip_video_thumbnail
+};

package/dist/{flip-visually-hidden.entry.ae0ff292.js → flip-visually-hidden.entry.47d25a46.js}

@@ -1,4 +1,4 @@
-import { r, h as i, H as l } from "./main.7e7363a7.js";
+import { r, h as i, H as l } from "./index.b6e7bb76.js";
 import "react";
 import "react-dom";
 const t = ":host{position:absolute;display:inline;overflow:hidden;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;word-wrap:normal;clip:rect(0, 0, 0, 0)}", o = class {