@getflip/swirl-components-react 0.84.0 → 0.85.0

package/dist/swirl-tab-bar.entry.3f7c646f.js

@@ -1,33 +0,0 @@
-import { r, c as i, h as e, H as s } from "./index.c8fa66c0.js";
-import { c as b } from "./index-d280dafb.186cdb0e.js";
-import "react";
-import "react-dom";
-const o = '.sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--swirl-tab-bar-border-width) solid var(--s-border-default)}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);border:none;color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tab-bar__tab.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:"";transform:translateX(-50%);pointer-events:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-label.sc-swirl-tab-bar{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:"";transform:translateX(-50%);pointer-events:none}', n = class {
-  constructor(a) {
-    r(this, a), this.activateNextTab = i(this, "activateNextTab", 7), this.activatePreviousTab = i(this, "activatePreviousTab", 7), this.activateTab = i(this, "activateTab", 7), this.onKeyDown = (t) => {
-      t.code === "ArrowLeft" ? (t.preventDefault(), this.activatePreviousTab.emit()) : t.code === "ArrowRight" && (t.preventDefault(), this.activateNextTab.emit());
-    }, this.disableTabSemantics = void 0, this.label = void 0, this.tabs = [];
-  }
-  render() {
-    return e(s, null, e("div", { "aria-label": this.label, class: "tab-bar", onKeyDown: this.onKeyDown, role: this.disableTabSemantics ? void 0 : "tablist" }, this.tabs.map((a) => {
-      const t = b("tab-bar__tab", {
-        "tab-bar__tab--active": a.active
-      });
-      return e("button", {
-        "aria-controls": this.disableTabSemantics ? void 0 : a.id,
-        "aria-selected": this.disableTabSemantics ? void 0 : a.active ? "true" : "false",
-        class: t,
-        id: `tab-${a.id}`,
-        key: a.id,
-        onClick: () => this.activateTab.emit(a.id),
-        role: this.disableTabSemantics ? void 0 : "tab",
-        tabIndex: this.disableTabSemantics ? void 0 : a.active ? 0 : -1,
-        type: "button"
-      }, e("span", { class: "tab-bar__tab-label" }, a.label));
-    })));
-  }
-};
-n.style = o;
-export {
-  n as swirl_tab_bar
-};

package/dist/swirl-tag.entry.8578f7de.js

@@ -1,23 +0,0 @@
-import { r as o, c as s, h as t, H as n, g as i } from "./index.c8fa66c0.js";
-import { c } from "./index-d280dafb.186cdb0e.js";
-import "react";
-import "react-dom";
-const l = ":host{display:inline-flex}:host *{box-sizing:border-box}.tag{display:inline-flex;padding:var(--s-space-2) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);white-space:nowrap;gap:var(--s-space-4)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--icon-info)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--icon-critical)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--icon-warning)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--icon-success)}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer}.tag__removal-button:focus:not(:focus-visible){outline:none}.tag__removal-button:focus-visible{outline-color:var(--s-focus-default)}", u = class {
-  constructor(e) {
-    o(this, e), this.remove = s(this, "remove", 7), this.onRemove = (r) => {
-      var a;
-      (a = this.remove) == null || a.emit(r);
-    }, this.intent = "default", this.label = void 0, this.removable = void 0, this.removalButtonLabel = "Remove";
-  }
-  render() {
-    const e = c("tag", `tag--intent-${this.intent}`);
-    return t(n, null, t("span", { class: e, part: "tag" }, this.label, this.removable && t("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : void 0, type: "button" }, t("swirl-icon-close", { size: 16 }))));
-  }
-  get el() {
-    return i(this);
-  }
-};
-u.style = l;
-export {
-  u as swirl_tag
-};