@getflip/swirl-components-react 0.1.0 → 0.2.0

package/dist/{flip-description-list-item.entry.c789511e.js → flip-description-list-item.entry.f4e6faf7.js}

@@ -1,4 +1,4 @@
-import { r as t, h as i, H as s } from "./main.7e7363a7.js";
+import { r as t, h as i, H as s } from "./index.b6e7bb76.js";
 import "react";
 import "react-dom";
 const e = `:host {

package/dist/{flip-description-list.entry.3b158436.js → flip-description-list.entry.2b1d4579.js}

@@ -1,4 +1,4 @@
-import { r as i, h as t, H as o } from "./main.7e7363a7.js";
+import { r as i, h as t, H as o } from "./index.b6e7bb76.js";
 import "react";
 import "react-dom";
 const r = ":host{display:block;container-type:inline-size;container-name:description-list}:host *{box-sizing:border-box}.description-list{display:block;max-width:100%;margin:0}.description-list ::slotted(*){padding-bottom:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.description-list ::slotted(*:not(:last-child)){margin-bottom:var(--s-space-16)}", e = class {

package/dist/flip-dialog.entry.2bbc3bff.js

@@ -0,0 +1,45 @@
+import { r as e, c as t, h as o, H as n } from "./index.b6e7bb76.js";
+import { A as s } from "./a11y-dialog.esm-d7a94c8c.bd6ae411.js";
+import { c as l } from "./index-6d2e18c6.289636d4.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-44457d8d.ba94af77.js";
+const r = ':host{--flip-ghost-button-background-default:var(--s-surface-overlay-default);--flip-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--flip-ghost-button-background-pressed:var(--s-surface-overlay-pressed);display:block}:host *{box-sizing:border-box}.dialog{position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.dialog[aria-hidden="true"]{display:none}.dialog:not(.dialog--closing) .dialog__backdrop{-webkit-animation:0.15s dialog-backdrop-fade-in;animation:0.15s dialog-backdrop-fade-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__backdrop{-webkit-animation:none;animation:none}}.dialog:not(.dialog--closing) .dialog__body{-webkit-animation:0.15s dialog-scale-in;animation:0.15s dialog-scale-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__body{-webkit-animation:none;animation:none}}.dialog--closing{-webkit-animation:0.15s dialog-fade-out;animation:0.15s dialog-fade-out;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@media (prefers-reduced-motion){.dialog--closing{-webkit-animation:none;animation:none}}.dialog__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.dialog__body{z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;width:18.5rem;max-height:90vh;padding-top:var(--s-space-24);padding-right:var(--s-space-8);padding-bottom:var(--s-space-8);padding-left:var(--s-space-8);border-radius:var(--s-border-radius-xl);background-color:var(--s-surface-overlay-default);text-align:center;box-shadow:0.125rem 0.25rem 1rem rgba(0, 0, 0, 0.14)}.dialog__heading{margin:0;margin-bottom:var(--s-space-8);font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}.dialog__content{margin-bottom:var(--s-space-24);line-height:var(--s-line-height-base)}.dialog__content ::slotted(*){margin:0}@-webkit-keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@-webkit-keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@-webkit-keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}@keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}', d = class {
+  constructor(i) {
+    e(this, i), this.primaryAction = t(this, "primaryAction", 7), this.secondaryAction = t(this, "secondaryAction", 7), this.intent = "primary", this.closing = !1, this.onKeyDown = (a) => {
+      a.code === "Escape" && this.close();
+    }, this.onBackdropClick = () => {
+      this.close();
+    }, this.onPrimaryAction = (a) => {
+      this.primaryAction.emit(a), this.close();
+    }, this.onSecondaryAction = (a) => {
+      this.secondaryAction.emit(a), this.close();
+    };
+  }
+  componentDidLoad() {
+    this.dialog = new s(this.dialogEl), this.dialog.on("show", () => {
+      var i;
+      (i = this.controlsContainerEl.querySelector("flip-button button")) === null || i === void 0 || i.focus();
+    });
+  }
+  disconnectedCallback() {
+    var i;
+    (i = this.dialog) === null || i === void 0 || i.destroy();
+  }
+  async open() {
+    this.dialog.show();
+  }
+  async close() {
+    this.closing || (this.closing = !0, setTimeout(() => {
+      this.dialog.hide(), this.closing = !1;
+    }, 150));
+  }
+  render() {
+    const i = l("dialog", { "dialog--closing": this.closing });
+    return o(n, null, o("div", { "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? void 0 : "label", "aria-label": this.hideLabel ? this.label : void 0, "aria-modal": "true", class: i, onKeyDown: this.onKeyDown, ref: (a) => this.dialogEl = a, role: "alertdialog" }, o("div", { class: "dialog__backdrop", onClick: this.onBackdropClick }), o("div", { class: "dialog__body", role: "document" }, !this.hideLabel && o("h2", { class: "dialog__heading", id: "label" }, this.label), o("div", { class: "dialog__content", id: "content" }, o("slot", null)), o("flip-button-group", { class: "dialog__controls", ref: (a) => this.controlsContainerEl = a, stretch: !0, wrap: !0 }, this.secondaryActionLabel && o("flip-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction }), this.primaryActionLabel && o("flip-button", { intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: this.intent === "critical" ? "ghost" : "flat" })))));
+  }
+};
+d.style = r;
+export {
+  d as flip_dialog
+};

package/dist/flip-empty-state.entry.376592fa.js

@@ -0,0 +1,15 @@
+import { r as e, h as t, H as i } from "./index.b6e7bb76.js";
+import "react";
+import "react-dom";
+const a = ":host{display:block}:host *{box-sizing:border-box}.empty-state{display:flex;max-width:28rem;align-items:center;flex-direction:column;gap:var(--s-space-16)}.empty-state__illustration{max-width:16rem}.empty-state__body{display:flex;align-items:center;flex-direction:column;gap:var(--s-space-8)}", l = class {
+  constructor(s) {
+    e(this, s);
+  }
+  render() {
+    return t(i, null, t("div", { class: "empty-state" }, this.illustration && t("img", { alt: "", class: "empty-state__illustration", src: this.illustration }), t("div", { class: "empty-state__body" }, this.heading && t("flip-heading", { align: "center", as: "p", text: this.heading }), t("div", { class: "empty-state__content" }, t("flip-text", { align: "center", color: "subdued" }, t("slot", null))))));
+  }
+};
+l.style = a;
+export {
+  l as flip_empty_state
+};

package/dist/flip-file-uploader.entry.c0ddf5a7.js

@@ -0,0 +1,32 @@
+import { r as s, c as r, h as e, H as d } from "./index.b6e7bb76.js";
+import { c as p } from "./index-6d2e18c6.289636d4.js";
+import "react";
+import "react-dom";
+import "./_commonjsHelpers-44457d8d.ba94af77.js";
+const t = ".sc-flip-file-uploader-h{display:block;width:100%}.sc-flip-file-uploader-h *.sc-flip-file-uploader{box-sizing:border-box}.file-uploader.sc-flip-file-uploader{width:100%}.file-uploader--show-dropzone.sc-flip-file-uploader .file-uploader__dropzone.sc-flip-file-uploader{position:relative;display:flex;width:100%;height:10rem;margin-top:var(--s-space-16);justify-content:center;align-items:center;border:var(--s-border-width-default) dashed var(--s-border-strong);border-radius:var(--s-border-radius-s);flex-direction:column}.file-uploader--show-dropzone.sc-flip-file-uploader .file-uploader__dropzone.sc-flip-file-uploader:focus-within{border-color:var(--s-focus-default);border-width:0.125rem}.file-uploader--show-dropzone.sc-flip-file-uploader .file-uploader__input.sc-flip-file-uploader{position:absolute;display:block;cursor:pointer;opacity:0;inset:0}.file-uploader--disabled.sc-flip-file-uploader .file-uploader__input.sc-flip-file-uploader{cursor:default}.file-uploader--disabled.sc-flip-file-uploader .file-uploader__dropzone-cta.sc-flip-file-uploader,.file-uploader--disabled.sc-flip-file-uploader .file-uploader__drag-drop-label.sc-flip-file-uploader{color:var(--s-text-disabled)}.file-uploader--disabled.sc-flip-file-uploader .file-uploader__dropzone-icon.sc-flip-file-uploader{color:var(--s-text-disabled)}.file-uploader__label.sc-flip-file-uploader{display:block;font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-base)}.file-uploader__description.sc-flip-file-uploader{display:block;margin-top:var(--s-space-4);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.file-uploader__dropzone-icon.sc-flip-file-uploader{color:var(--s-icon-highlight)}.file-uploader__dropzone-label.sc-flip-file-uploader{margin-top:var(--s-space-16);line-height:var(--s-line-height-base)}.file-uploader__dropzone-cta.sc-flip-file-uploader{color:var(--s-interactive-primary-default);font-weight:var(--s-font-weight-medium)}.file-uploader__upload-button.sc-flip-file-uploader{margin-top:var(--s-space-16)}.file-uploader__input.sc-flip-file-uploader{display:none}", n = class {
+  constructor(l) {
+    s(this, l), this.valueChange = r(this, "valueChange", 7), this.ctaLabel = "Click to upload", this.dragDropLabel = "or drag and drop.", this.showDropzone = !0, this.uploadButtonLabel = "Select file", this.onChange = (i) => {
+      const o = i.target.files;
+      this.valueChange.emit(o);
+    }, this.onUploadButtonClick = () => {
+      this.inputEl.click();
+    };
+  }
+  async reset() {
+    this.inputEl.value = "";
+  }
+  render() {
+    const l = Boolean(this.description) ? `${this.inputId}-description ${this.inputId}-additional-label` : `${this.inputId}-additional-label`, i = this.showDropzone ? 0 : -1, o = p("file-uploader", {
+      "file-uploader--disabled": this.disabled,
+      "file-uploader--show-dropzone": this.showDropzone
+    });
+    return e(d, null, e("div", { class: o }, e("label", { class: "file-uploader__label", htmlFor: this.inputId, id: `${this.inputEl}-label` }, this.label), this.description && e("span", { class: "file-uploader__description", id: `${this.inputId}-description` }, this.description), e("div", { class: "file-uploader__dropzone" }, this.showDropzone ? [
+      e("flip-icon-cloud-upload", { class: "file-uploader__dropzone-icon" }),
+      e("div", { class: "file-uploader__dropzone-label", id: `${this.inputId}-additional-label` }, e("span", { class: "file-uploader__dropzone-cta" }, this.ctaLabel), " ", e("span", { class: "file-uploader__drag-drop-label" }, this.dragDropLabel))
+    ] : e("flip-button", { class: "file-uploader__upload-button", disabled: this.disabled, flipAriaDescribedby: l, intent: "primary", label: this.uploadButtonLabel, onClick: this.onUploadButtonClick, variant: "flat" }), e("input", { accept: this.accept, "aria-describedby": l, "aria-disabled": this.disabled, autoComplete: "off", class: "file-uploader__input", disabled: this.disabled, id: this.inputId, multiple: this.multiple, name: this.inputName, onChange: this.onChange, ref: (a) => this.inputEl = a, tabIndex: i, type: "file" }))));
+  }
+};
+n.style = t;
+export {
+  n as flip_file_uploader
+};