@getflip/swirl-components-react 0.4.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@getflip/swirl-components-react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "files": [
     "dist"
@@ -18,7 +18,7 @@
     "build": "tsc && vite build"
   },
   "dependencies": {
-    "@getflip/swirl-components": "^0.5.0",
+    "@getflip/swirl-components": "^0.6.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

package/dist/flip-form-control.entry.82737412.js

@@ -1,58 +0,0 @@
-import { r as e, h as t, H as i, g as l } from "./index.b66ff9f0.js";
-import { c as n } from "./index-6d2e18c6.289636d4.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const a = ".sc-flip-form-control-h{display:block;width:100%}.sc-flip-form-control-h *.sc-flip-form-control{box-sizing:border-box}.form-control.sc-flip-form-control{display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-flip-form-control:not(.form-control--disabled) .form-control__label.sc-flip-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-flip-form-control:not(.form-control--has-value):not(.form-control--has-focus) .form-control__input.sc-flip-form-control{overflow:hidden;max-height:0}.form-control.sc-flip-form-control:not(.form-control--has-value):not(.form-control--has-focus) .form-control__label-text.sc-flip-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%)}.form-control--invalid.form-control--has-focus.sc-flip-form-control:not(.form-control--disabled) .form-control__label.sc-flip-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-flip-form-control .form-control__label.sc-flip-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-flip-form-control .form-control__label.sc-flip-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-flip-form-control .form-control__description.sc-flip-form-control{color:var(--s-text-disabled)}.form-control__label.sc-flip-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__label-text.sc-flip-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__description.sc-flip-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-flip-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4)}", c = class {
-  constructor(r) {
-    e(this, r), this.descriptionId = `form-control-description-${Math.round(Math.random() * 1e5)}`, this.listenToInputValueChanges = () => {
-      this.inputEl.addEventListener("valueChange", this.checkInputValue);
-    }, this.checkInputValue = () => {
-      var o;
-      this.inputValue = (o = this.inputEl) === null || o === void 0 ? void 0 : o.value;
-    }, this.onFocusIn = () => {
-      this.hasFocus = !0;
-    }, this.onFocusOut = (o) => {
-      Boolean(o.relatedTarget) && (this.hasFocus = !1);
-    };
-  }
-  componentWillLoad() {
-    this.inputEl = this.el.children[0], this.associateDescriptionWithInputElement(), this.setInputElementDisabledState(), this.setInputElementInvalidState(), this.checkInputValue(), this.listenToInputValueChanges();
-  }
-  associateDescriptionWithInputElement() {
-    !Boolean(this.description) || !Boolean(this.inputEl) || this.inputEl.setAttribute("flip-aria-describedby", this.descriptionId);
-  }
-  setInputElementDisabledState() {
-    !Boolean(this.inputEl) || (this.disabled ? this.inputEl.setAttribute("disabled", "true") : this.inputEl.removeAttribute("disabled"));
-  }
-  setInputElementInvalidState() {
-    !Boolean(this.inputEl) || (this.invalid ? this.inputEl.setAttribute("invalid", "true") : this.inputEl.removeAttribute("invalid"));
-  }
-  onWindowClick(r) {
-    const o = r.target;
-    this.el.contains(o) || (this.hasFocus = !1);
-  }
-  render() {
-    const r = Boolean(this.errorMessage), o = Boolean(this.description) && !r, s = n("form-control", {
-      "form-control--disabled": this.disabled,
-      "form-control--has-focus": this.hasFocus,
-      "form-control--has-value": Boolean(this.inputValue),
-      "form-control--invalid": this.invalid
-    });
-    return t(i, { onFocusin: this.onFocusIn, onFocusout: this.onFocusOut }, t("div", { class: s, role: "group" }, t("label", { class: "form-control__label" }, t("span", { class: "form-control__label-text" }, this.label), t("span", { class: "form-control__input" }, t("slot", null))), o && t("span", { class: "form-control__description", id: this.descriptionId }, this.description), r && t("span", { "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, t("flip-inline-error", { message: this.errorMessage, size: "s" }))));
-  }
-  get el() {
-    return l(this);
-  }
-  static get watchers() {
-    return {
-      description: ["associateDescriptionWithInputElement"],
-      disabled: ["setInputElementDisabledState"],
-      invalid: ["setInputElementInvalidState"]
-    };
-  }
-};
-c.style = a;
-export {
-  c as flip_form_control
-};

package/dist/flip-heading.entry.00139b62.js

@@ -1,18 +0,0 @@
-import { r as n, h as e, H as s } from "./index.b66ff9f0.js";
-import { c as a } from "./index-6d2e18c6.289636d4.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const l = ".sc-flip-heading-h{display:block;width:100%}.sc-flip-heading-h *.sc-flip-heading{box-sizing:border-box}.heading.sc-flip-heading{display:block;width:100%;margin:0;padding:0;text-align:start}.heading--align-start.sc-flip-heading{text-align:start}.heading--align-center.sc-flip-heading{text-align:center}.heading--align-end.sc-flip-heading{text-align:end}.heading--level-1.sc-flip-heading{font-size:var(--s-font-size-2xl);font-weight:var(--s-font-weight-bold);line-height:var(--s-line-height-2xl);letter-spacing:var(--s-letter-spacing-tight)}.heading--level-2.sc-flip-heading{font-size:var(--s-font-size-xl);font-weight:var(--s-font-weight-bold);line-height:var(--s-line-height-xl)}.heading--level-3.sc-flip-heading{font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}.heading--level-4.sc-flip-heading,.heading--level-5.sc-flip-heading,.heading--level-6.sc-flip-heading{font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-base)}", h = class {
-  constructor(i) {
-    n(this, i), this.align = "start", this.level = 1;
-  }
-  render() {
-    const i = this.as || `h${this.level}`, t = a("heading", `heading--align-${this.align}`, `heading--level-${this.level}`);
-    return e(s, null, e(i, { class: t, id: this.headingId }, this.text));
-  }
-};
-h.style = l;
-export {
-  h as flip_heading
-};

package/dist/flip-popover.entry.0f8879c7.js

@@ -1,99 +0,0 @@
-import { r as p, h as i, H as l, g as d } from "./index.b66ff9f0.js";
-import { c, s as m, f as v, a as h } from "./floating-ui.dom.esm-1a4e8b8a.87557233.js";
-import { e as a, d as f } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
-import { c as u } from "./index-6d2e18c6.289636d4.js";
-import { i as n, q as s } from "./utils-39b2afe8.37b54ba4.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const g = ":host{position:relative;z-index:var(--s-z-40);display:inline-flex}:host *{box-sizing:border-box}.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:0.15s popover-fade-in;animation:0.15s popover-fade-in}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__backdrop{-webkit-animation:none;animation:none}}.popover--active:not(.popover--closing) .popover__content{-webkit-animation:0.15s popover-slide-in;animation:0.15s popover-slide-in}@media (min-width: 768px){.popover--active:not(.popover--closing) .popover__content{transform-origin:top left;-webkit-animation:0.15s popover-fade-scale-in;animation:0.15s popover-fade-scale-in}}@media (prefers-reduced-motion){.popover--active:not(.popover--closing) .popover__content{-webkit-animation:none;animation:none}}.popover--closing .popover__backdrop{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.popover--closing .popover__backdrop{-webkit-animation:none;animation:none}}.popover--closing .popover__content{-webkit-animation:0.15s popover-slide-out;animation:0.15s popover-slide-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (min-width: 768px){.popover--closing .popover__content{-webkit-animation:0.15s popover-fade-out;animation:0.15s popover-fade-out}}@media (prefers-reduced-motion){.popover--closing .popover__content{-webkit-animation:none;animation:none}}.popover--inactive .popover__content{display:none}.popover__backdrop{position:fixed;z-index:0;background-color:rgba(0, 0, 0, 0.2);-webkit-animation:0.15s popover-backdrop-fade-in;animation:0.15s popover-backdrop-fade-in;inset:0}@media (prefers-reduced-motion){.popover__backdrop{-webkit-animation:none;animation:none}}@media (min-width: 768px){.popover__backdrop{display:none}}.popover__content{position:fixed;z-index:2;right:0;bottom:0;left:0;overflow:hidden;border-top-left-radius:var(--s-border-radius-xl);border-top-right-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default)}@media (min-width: 768px){.popover__content{right:unset;bottom:unset;left:unset;max-width:22.5rem;border-radius:var(--s-border-radius-sm);-webkit-animation:none;animation:none;box-shadow:0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)}}.popover__scroll-container{overflow-x:hidden;overflow-y:auto;width:100%;max-height:90vh;padding-top:var(--s-space-24);padding-bottom:var(--s-space-24);overscroll-behavior:contain}@media (min-width: 768px){.popover__scroll-container{max-height:22rem;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8)}}.popover__handle{position:absolute;top:var(--s-space-8);left:50%;width:2.5rem;height:0.375rem;border-radius:0.1875rem;background-color:var(--s-border-default);transform:translatex(-50%)}@media (min-width: 768px){.popover__handle{display:none}}@-webkit-keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes popover-slide-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@-webkit-keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes popover-slide-out{from{transform:translateY(0)}to{transform:translateY(100%)}}@-webkit-keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@keyframes popover-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@keyframes popover-fade-out{from{opacity:1}to{opacity:0}}@-webkit-keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}@keyframes popover-fade-scale-in{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}", b = class {
-  constructor(o) {
-    p(this, o), this.placement = "bottom-start", this.active = !1, this.closing = !1, this.onFocusOut = (e) => {
-      if (!this.active)
-        return;
-      const t = e.relatedTarget || e.target;
-      !this.el.contains(t) && this.close();
-    }, this.toggle = (e) => {
-      e.stopPropagation(), this.active ? this.close() : this.open();
-    }, this.onKeydown = (e) => {
-      e.code === "Escape" && this.active && this.close();
-    }, this.reposition = async () => {
-      const e = n();
-      if (!(!Boolean(this.triggerEl) || !Boolean(this.contentContainer))) {
-        if (e) {
-          this.position = void 0;
-          return;
-        }
-        this.position = await c(this.triggerEl, this.contentContainer, {
-          middleware: [m(), v()],
-          placement: this.placement,
-          strategy: "fixed"
-        });
-      }
-    }, this.onCloseButtonClick = () => {
-      this.close();
-    };
-  }
-  componentDidLoad() {
-    this.connectTrigger(), this.updateChildMenuItems(), this.updateTriggerAttributes();
-  }
-  disconnectedCallback() {
-    a(this.scrollContainer);
-  }
-  onWindowClick(o) {
-    const e = o.target;
-    this.el.contains(e) || this.close();
-  }
-  async close() {
-    var o;
-    this.closing || !this.active || (this.disableAutoUpdate && this.disableAutoUpdate(), this.closing = !0, setTimeout(() => {
-      this.active = !1, this.closing = !1, this.updateTriggerAttributes();
-    }, 150), this.unlockBodyScroll(), (o = this.getNativeTriggerElement()) === null || o === void 0 || o.focus());
-  }
-  async open() {
-    this.active = !0, this.updateChildMenuItems(), this.updateTriggerAttributes(), requestAnimationFrame(async () => {
-      await this.reposition(), this.childMenuItems.length > 0 ? this.childMenuItems[0].focus() : this.contentContainer.focus(), this.disableAutoUpdate && this.disableAutoUpdate(), this.disableAutoUpdate = h(this.triggerEl, this.contentContainer, this.reposition), this.scrollContainer.scrollTop = 0, this.lockBodyScroll();
-    });
-  }
-  connectTrigger() {
-    this.triggerEl = s(document.body, `#${this.trigger}`)[0], Boolean(this.triggerEl) && this.triggerEl.addEventListener("click", this.toggle);
-  }
-  getNativeTriggerElement() {
-    var o, e, t;
-    return this.triggerEl.tagName.startsWith("FLIP-") ? ((o = this.triggerEl) === null || o === void 0 ? void 0 : o.children[0]) || ((t = (e = this.triggerEl) === null || e === void 0 ? void 0 : e.shadowRoot) === null || t === void 0 ? void 0 : t.children[0]) || this.triggerEl : this.triggerEl;
-  }
-  updateTriggerAttributes() {
-    if (!Boolean(this.triggerEl))
-      return;
-    const o = this.getNativeTriggerElement();
-    o.setAttribute("aria-controls", this.popoverId), o.setAttribute("aria-expanded", String(this.active)), o.setAttribute("aria-haspopup", "dialog");
-  }
-  updateChildMenuItems() {
-    this.childMenuItems = s(this.el, '[role="menuitem"]');
-  }
-  lockBodyScroll() {
-    !n() || f(this.scrollContainer);
-  }
-  unlockBodyScroll() {
-    a(this.scrollContainer);
-  }
-  render() {
-    var o, e;
-    const t = u("popover", {
-      "popover--closing": this.closing,
-      "popover--active": this.active,
-      "popover--inactive": !this.active
-    });
-    return i(l, { id: this.popoverId, onFocusout: this.onFocusOut }, i("div", { class: t, onKeyDown: this.onKeydown }, i("div", { "aria-hidden": this.active ? "false" : "true", "aria-label": this.label, class: "popover__content", role: "dialog", tabindex: "-1", ref: (r) => this.contentContainer = r, style: {
-      top: Boolean(this.position) ? `${(o = this.position) === null || o === void 0 ? void 0 : o.y}px` : "",
-      left: Boolean(this.position) ? `${(e = this.position) === null || e === void 0 ? void 0 : e.x}px` : ""
-    } }, i("span", { class: "popover__handle" }), i("div", { class: "popover__scroll-container", ref: (r) => this.scrollContainer = r }, i("slot", null))), this.active && i("div", { class: "popover__backdrop", onClick: this.onCloseButtonClick })));
-  }
-  get el() {
-    return d(this);
-  }
-};
-b.style = g;
-export {
-  b as flip_popover
-};

package/dist/flip-text.entry.a01cf4bc.js

@@ -1,18 +0,0 @@
-import { r as i, h as e, H as o } from "./index.b66ff9f0.js";
-import { c as l } from "./index-6d2e18c6.289636d4.js";
-import "react";
-import "react-dom";
-import "./_commonjsHelpers-44457d8d.ba94af77.js";
-const n = ":host{display:block}:host *{box-sizing:border-box}.text{margin:0;padding:0}.text--align-start{text-align:start}.text--align-center{text-align:center}.text--align-end{text-align:end}.text--color-default{color:var(--s-text-default)}.text--color-subdued{color:var(--s-text-subdued)}.text--color-critical{color:var(--s-text-critical)}.text--color-success{color:var(--s-text-success)}.text--color-warning{color:var(--s-text-warning)}.text--size-sm{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.text--size-base{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}.text--size-lg{font-size:var(--s-font-size-lg);line-height:var(--s-line-height-lg)}.text--weight-normal{font-weight:var(--s-font-weight-normal)}.text--weight-medium{font-weight:var(--s-font-weight-medium)}.text--weight-semibold{font-weight:var(--s-font-weight-semibold)}.text--weight-bold{font-weight:var(--s-font-weight-bold)}.text--font-style-normal{font-style:normal}.text--font-style-italic{font-style:italic}", a = class {
-  constructor(t) {
-    i(this, t), this.align = "start", this.as = "p", this.color = "default", this.fontStyle = "normal", this.size = "base", this.weight = "normal";
-  }
-  render() {
-    const t = this.as, s = l("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--weight-${this.weight}`);
-    return e(o, null, e(t, { class: s }, e("slot", null)));
-  }
-};
-a.style = n;
-export {
-  a as flip_text
-};