@getflip/swirl-components-react 0.1.0 → 0.1.1

package/dist/flip-tabs.entry.0c8b74db.js

@@ -0,0 +1,91 @@
+import { r as o, c as r, h as s, H as n, g as b } from "./main.c9b46168.js";
+import { c as l } from "./index-3c78bcaf.2675909b.js";
+import "react";
+import "react-dom";
+const d = ".sc-flip-tabs-h{display:block;width:100%}.sc-flip-tabs-h *.sc-flip-tabs{box-sizing:border-box}.tabs.sc-flip-tabs{width:100%}.tabs__tab-bar.sc-flip-tabs{position:relative;display:flex;width:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (--from-tablet){.tabs__tab-bar.sc-flip-tabs{padding-right:0;padding-left:0}}.tabs__tab.sc-flip-tabs{display:block;min-width:0;margin:0;padding:var(--s-space-4) 0;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tabs__tab.sc-flip-tabs:focus-visible{outline:none}.tabs__tab.sc-flip-tabs:focus-visible .tabs__tab-label.sc-flip-tabs{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tabs__tab.sc-flip-tabs:not(:first-of-type){padding-left:var(--s-space-8)}.tabs__tab.sc-flip-tabs:not(:last-of-type){padding-right:var(--s-space-8)}.tabs__tab-label.sc-flip-tabs{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tabs__tab--active.sc-flip-tabs{color:var(--s-text-highlight)}.tabs__indicator.sc-flip-tabs{position:absolute;bottom:0;left:0;width:0;height:0.125rem;border-radius:0.0625rem;background-color:var(--s-border-highlight);transition:background-color 0.15s, transform 0.15s, width 0.15s;transform:translate3d(0, 0, 0);pointer-events:none}@media (prefers-reduced-motion){.tabs__indicator.sc-flip-tabs{transition:none}}", c = class {
+  constructor(t) {
+    o(this, t), this.tabActivated = r(this, "tabActivated", 7), this.tabs = [], this.onKeyDown = (i) => {
+      i.code === "ArrowLeft" ? (i.preventDefault(), this.activatePreviousTab()) : i.code === "ArrowRight" && (i.preventDefault(), this.activateNextTab());
+    }, this.onMouseEnter = (i, a) => {
+      if (a.tabId === this.activeTab) {
+        this.highlightedTab = void 0;
+        return;
+      }
+      this.highlightedTab = i.target.closest(".tabs__tab") || void 0;
+    }, this.onMouseLeave = () => {
+      this.highlightedTab = void 0;
+    };
+  }
+  componentWillLoad() {
+    this.collectTabs();
+  }
+  componentDidRender() {
+    this.updateIndicatorPosition();
+  }
+  onWindowResize() {
+    this.updateIndicatorPosition();
+  }
+  async activateTab(t) {
+    if (this.activeTab === t)
+      return;
+    this.activeTab = t, this.tabs.forEach((a) => a.active = !1);
+    const i = this.tabs.find((a) => a.tabId === t);
+    !Boolean(i) || (this.highlightedTab = void 0, i.active = !0, this.tabActivated.emit(i));
+  }
+  activateNextTab() {
+    const t = this.tabs.findIndex((a) => a.tabId === this.activeTab), i = Math.min(this.tabs.length - 1, t + 1);
+    this.activateTab(this.tabs[i].tabId), requestAnimationFrame(() => {
+      var a;
+      (a = this.el.querySelector(".tabs__tab--active")) === null || a === void 0 || a.focus();
+    });
+  }
+  activatePreviousTab() {
+    const t = this.tabs.findIndex((a) => a.tabId === this.activeTab), i = Math.max(0, t - 1);
+    this.activateTab(this.tabs[i].tabId), requestAnimationFrame(() => {
+      var a;
+      (a = this.el.querySelector(".tabs__tab--active")) === null || a === void 0 || a.focus();
+    });
+  }
+  collectTabs() {
+    if (this.tabs = Array.from(this.el.querySelectorAll("flip-tab")), this.tabs.length === 0)
+      return;
+    const t = this.tabs.find((i) => i.tabId === this.initialTab);
+    this.activateTab(Boolean(t) ? t.tabId : this.tabs[0].tabId);
+  }
+  updateIndicatorPosition() {
+    const t = this.tabs.find((e) => e.tabId === this.activeTab);
+    if (!Boolean(t) && !Boolean(this.highlightedTab)) {
+      this.indicatorEl.style.width = "", this.indicatorEl.style.transform = "", this.indicatorEl.style.backgroundColor = "";
+      return;
+    }
+    const a = (this.highlightedTab || this.el.querySelector(`#tab-${t.tabId}`)).querySelector(".tabs__tab-label");
+    this.indicatorEl.style.width = `${a.getBoundingClientRect().width / 16}rem`, this.indicatorEl.style.transform = `translate3d(${a.offsetLeft / 16}rem, 0, 0)`, this.indicatorEl.style.backgroundColor = Boolean(this.highlightedTab) ? "var(--s-border-default)" : "";
+  }
+  render() {
+    return s(n, null, s("div", { class: "tabs" }, s("div", { "aria-label": this.label, class: "tabs__tab-bar", onKeyDown: this.onKeyDown, role: "tablist" }, this.tabs.map((t) => {
+      const i = t.tabId === this.activeTab, a = l("tabs__tab", {
+        "tabs__tab--active": i
+      });
+      return s("button", {
+        "aria-controls": t.tabId,
+        "aria-selected": i ? "true" : "false",
+        class: a,
+        id: `tab-${t.tabId}`,
+        key: t.tabId,
+        onClick: () => this.activateTab(t.tabId),
+        onMouseEnter: (e) => this.onMouseEnter(e, t),
+        onMouseLeave: this.onMouseLeave,
+        role: "tab",
+        tabIndex: i ? 0 : -1,
+        type: "button"
+      }, s("span", { class: "tabs__tab-label" }, t.label));
+    }), s("span", { class: "tabs__indicator", ref: (t) => this.indicatorEl = t })), s("slot", null)));
+  }
+  get el() {
+    return b(this);
+  }
+};
+c.style = d;
+export {
+  c as flip_tabs
+};

package/dist/{flip-tag.entry.31a7d0f7.js → flip-tag.entry.202b87db.js}

@@ -1,4 +1,4 @@
-import { r as e, c as s, h as t, H as n } from "./main.7e7363a7.js";
+import { r as e, c as s, h as t, H as n } from "./main.c9b46168.js";
 import { c as i } from "./index-3c78bcaf.2675909b.js";
 import "react";
 import "react-dom";

package/dist/{flip-theme-provider.entry.9c054d33.js → flip-theme-provider.entry.6402a4bc.js}

@@ -1,4 +1,4 @@
-import { r as C, h as b, H } from "./main.7e7363a7.js";
+import { r as C, h as b, H } from "./main.c9b46168.js";
 import "react";
 import "react-dom";
 function h(e, t, n) {

package/dist/{flip-thumbnail.entry.449e93ef.js → flip-thumbnail.entry.9c3af9fe.js}

@@ -1,4 +1,4 @@
-import { r as t, h as a, H as s } from "./main.7e7363a7.js";
+import { r as t, h as a, H as s } from "./main.c9b46168.js";
 import { c as l } from "./index-3c78bcaf.2675909b.js";
 import "react";
 import "react-dom";

package/dist/{flip-toast-provider.entry.59025e1a.js → flip-toast-provider.entry.cbe2040b.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 "./main.c9b46168.js";
 import "react";
 import "react-dom";
 const l = class {

package/dist/{flip-toast.entry.78522d59.js → flip-toast.entry.647ec44c.js}

@@ -1,4 +1,4 @@
-import { r as i, c as a, h as t, H as e } from "./main.7e7363a7.js";
+import { r as i, c as a, h as t, H as e } from "./main.c9b46168.js";
 import { c as o } from "./index-3c78bcaf.2675909b.js";
 import "react";
 import "react-dom";

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

@@ -0,0 +1,94 @@
+import { r as n, h as o, H as l } from "./main.c9b46168.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-visually-hidden.entry.ae0ff292.js → flip-visually-hidden.entry.70e706df.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 "./main.c9b46168.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 {