@growthcurve/flowmate-components 0.1.0

package/dist/index.mjs

@@ -0,0 +1,618 @@
+// src/styles.ts
+var baseStyles = `
+  :host {
+    --fm-primary: var(--flowmate-primary, #6366f1);
+    --fm-bg: var(--flowmate-background, #ffffff);
+    --fm-text: var(--flowmate-foreground, #1a1a2e);
+    --fm-border: var(--flowmate-border, #e2e8f0);
+    --fm-radius: var(--flowmate-radius, 12px);
+    --fm-font: var(--flowmate-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    --fm-shadow: var(--flowmate-shadow, 0 4px 24px rgba(0,0,0,0.12));
+
+    font-family: var(--fm-font);
+    color: var(--fm-text);
+    box-sizing: border-box;
+  }
+
+  *, *::before, *::after { box-sizing: inherit; }
+
+  .fm-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.5);
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: fm-fade-in 0.2s ease;
+  }
+
+  .fm-card {
+    background: var(--fm-bg);
+    border-radius: var(--fm-radius);
+    box-shadow: var(--fm-shadow);
+    border: 1px solid var(--fm-border);
+    max-width: 480px;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .fm-header {
+    padding: 20px 24px 0;
+  }
+
+  .fm-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 0 0 8px;
+    color: var(--fm-text);
+  }
+
+  .fm-body {
+    padding: 12px 24px;
+    font-size: 14px;
+    line-height: 1.6;
+    color: color-mix(in srgb, var(--fm-text) 80%, transparent);
+  }
+
+  .fm-actions {
+    padding: 16px 24px;
+    display: flex;
+    gap: 8px;
+    justify-content: flex-end;
+  }
+
+  .fm-btn {
+    padding: 8px 16px;
+    border-radius: calc(var(--fm-radius) * 0.6);
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    border: none;
+    transition: opacity 0.15s;
+    font-family: var(--fm-font);
+  }
+
+  .fm-btn:hover { opacity: 0.85; }
+
+  .fm-btn-primary {
+    background: var(--fm-primary);
+    color: white;
+  }
+
+  .fm-btn-secondary {
+    background: transparent;
+    color: var(--fm-text);
+    border: 1px solid var(--fm-border);
+  }
+
+  .fm-close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 4px;
+    color: var(--fm-text);
+    opacity: 0.5;
+    font-size: 18px;
+  }
+
+  .fm-close:hover { opacity: 1; }
+
+  @keyframes fm-fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes fm-slide-up {
+    from { opacity: 0; transform: translateY(10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  @keyframes fm-slide-down {
+    from { opacity: 0; transform: translateY(-10px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+`;
+
+// src/base-element.ts
+var FlowmateBaseElement = class extends HTMLElement {
+  constructor() {
+    super();
+    this.shadow = this.attachShadow({ mode: "open" });
+  }
+  createStyle(additionalCSS = "") {
+    const style = document.createElement("style");
+    style.textContent = baseStyles + additionalCSS;
+    return style;
+  }
+  emitAction(action, detail) {
+    this.dispatchEvent(new CustomEvent("flowmate-action", {
+      bubbles: true,
+      composed: true,
+      detail: { action, ...detail }
+    }));
+  }
+  emitDismiss() {
+    this.dispatchEvent(new CustomEvent("flowmate-dismiss", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  get blockData() {
+    const raw = this.getAttribute("data-block");
+    try {
+      return raw ? JSON.parse(raw) : {};
+    } catch {
+      return {};
+    }
+  }
+  get blockActions() {
+    const raw = this.getAttribute("data-actions");
+    try {
+      return raw ? JSON.parse(raw) : [];
+    } catch {
+      return [];
+    }
+  }
+  get blockTitle() {
+    return this.getAttribute("title") || "";
+  }
+  get blockBody() {
+    return this.getAttribute("body") || "";
+  }
+  get dismissible() {
+    return this.hasAttribute("dismissible");
+  }
+};
+
+// src/elements/flowmate-modal.ts
+var FlowmateModal = class extends FlowmateBaseElement {
+  connectedCallback() {
+    const data = this.blockData;
+    const actions = this.blockActions;
+    this.shadow.appendChild(this.createStyle(`
+      :host { position: fixed; inset: 0; z-index: 10000; }
+    `));
+    const overlay = document.createElement("div");
+    overlay.className = "fm-overlay";
+    overlay.innerHTML = `
+      <div class="fm-card" style="position:relative; animation: fm-slide-up 0.25s ease;">
+        ${this.dismissible ? '<button class="fm-close">&times;</button>' : ""}
+        ${data.title ? `<div class="fm-header"><h2 class="fm-title">${data.title}</h2></div>` : ""}
+        ${data.body ? `<div class="fm-body">${data.body}</div>` : ""}
+        <div class="fm-actions">
+          ${actions.map((a) => `<button class="fm-btn ${a.variant === "secondary" ? "fm-btn-secondary" : "fm-btn-primary"}" data-key="${a.key}">${a.label}</button>`).join("")}
+        </div>
+      </div>
+    `;
+    overlay.addEventListener("click", (e) => {
+      const target = e.target;
+      if (target.classList.contains("fm-close")) this.emitDismiss();
+      if (target.classList.contains("fm-overlay")) this.emitDismiss();
+      if (target.dataset.key) this.emitAction(target.dataset.key);
+    });
+    this.shadow.appendChild(overlay);
+  }
+  disconnectedCallback() {
+    this.shadow.innerHTML = "";
+  }
+};
+
+// src/elements/flowmate-banner.ts
+var FlowmateBanner = class extends FlowmateBaseElement {
+  connectedCallback() {
+    const data = this.blockData;
+    const actions = this.blockActions;
+    const position = data.position || "top";
+    this.shadow.appendChild(this.createStyle(`
+      :host {
+        position: fixed;
+        left: 0; right: 0;
+        ${position === "bottom" ? "bottom: 0;" : "top: 0;"}
+        z-index: 10000;
+        animation: ${position === "bottom" ? "fm-slide-up" : "fm-slide-down"} 0.3s ease;
+      }
+      .fm-banner {
+        background: var(--fm-primary);
+        color: white;
+        padding: 12px 24px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+        font-family: var(--fm-font);
+      }
+      .fm-banner-content { flex: 1; }
+      .fm-banner-title { font-weight: 600; font-size: 14px; }
+      .fm-banner-body { font-size: 13px; opacity: 0.9; margin-top: 2px; }
+      .fm-banner-actions { display: flex; gap: 8px; }
+      .fm-banner-btn {
+        padding: 6px 14px; border-radius: 6px; font-size: 13px;
+        font-weight: 500; cursor: pointer; border: 1px solid rgba(255,255,255,0.3);
+        background: rgba(255,255,255,0.15); color: white; font-family: var(--fm-font);
+      }
+      .fm-banner-btn:hover { background: rgba(255,255,255,0.25); }
+      .fm-banner-close {
+        background: none; border: none; color: white; cursor: pointer;
+        font-size: 18px; opacity: 0.7; padding: 4px;
+      }
+      .fm-banner-close:hover { opacity: 1; }
+    `));
+    const banner = document.createElement("div");
+    banner.className = "fm-banner";
+    banner.innerHTML = `
+      <div class="fm-banner-content">
+        ${data.title ? `<div class="fm-banner-title">${data.title}</div>` : ""}
+        ${data.body ? `<div class="fm-banner-body">${data.body}</div>` : ""}
+      </div>
+      <div class="fm-banner-actions">
+        ${actions.map((a) => `<button class="fm-banner-btn" data-key="${a.key}">${a.label}</button>`).join("")}
+      </div>
+      ${this.dismissible ? '<button class="fm-banner-close">&times;</button>' : ""}
+    `;
+    banner.addEventListener("click", (e) => {
+      const target = e.target;
+      if (target.classList.contains("fm-banner-close")) this.emitDismiss();
+      if (target.dataset.key) this.emitAction(target.dataset.key);
+    });
+    this.shadow.appendChild(banner);
+  }
+  disconnectedCallback() {
+    this.shadow.innerHTML = "";
+  }
+};
+
+// src/elements/flowmate-tooltip.ts
+var FlowmateTooltip = class extends FlowmateBaseElement {
+  connectedCallback() {
+    const data = this.blockData;
+    const actions = this.blockActions;
+    const targetSelector = data.targetSelector || data.selector;
+    const placement = data.placement || "bottom";
+    this.shadow.appendChild(this.createStyle(`
+      :host { position: absolute; z-index: 10001; }
+      .fm-tooltip {
+        animation: fm-slide-up 0.2s ease;
+        max-width: 320px;
+      }
+      .fm-arrow {
+        position: absolute;
+        width: 10px; height: 10px;
+        background: var(--fm-bg);
+        border: 1px solid var(--fm-border);
+        transform: rotate(45deg);
+      }
+    `));
+    const tooltip = document.createElement("div");
+    tooltip.className = "fm-card fm-tooltip";
+    tooltip.innerHTML = `
+      ${this.dismissible ? '<button class="fm-close">&times;</button>' : ""}
+      ${data.title ? `<div class="fm-header"><h3 class="fm-title" style="font-size:15px;">${data.title}</h3></div>` : ""}
+      ${data.body ? `<div class="fm-body">${data.body}</div>` : ""}
+      ${actions.length ? `<div class="fm-actions">${actions.map((a) => `<button class="fm-btn ${a.variant === "secondary" ? "fm-btn-secondary" : "fm-btn-primary"}" data-key="${a.key}">${a.label}</button>`).join("")}</div>` : ""}
+    `;
+    tooltip.addEventListener("click", (e) => {
+      const target = e.target;
+      if (target.classList.contains("fm-close")) this.emitDismiss();
+      if (target.dataset.key) this.emitAction(target.dataset.key);
+    });
+    this.shadow.appendChild(tooltip);
+    if (targetSelector) {
+      requestAnimationFrame(() => {
+        const el = document.querySelector(targetSelector);
+        if (el) {
+          const rect = el.getBoundingClientRect();
+          const tooltipRect = tooltip.getBoundingClientRect();
+          let top = 0, left = 0;
+          switch (placement) {
+            case "top":
+              top = rect.top - tooltipRect.height - 12 + window.scrollY;
+              left = rect.left + rect.width / 2 - tooltipRect.width / 2 + window.scrollX;
+              break;
+            case "bottom":
+              top = rect.bottom + 12 + window.scrollY;
+              left = rect.left + rect.width / 2 - tooltipRect.width / 2 + window.scrollX;
+              break;
+            case "left":
+              top = rect.top + rect.height / 2 - tooltipRect.height / 2 + window.scrollY;
+              left = rect.left - tooltipRect.width - 12 + window.scrollX;
+              break;
+            case "right":
+              top = rect.top + rect.height / 2 - tooltipRect.height / 2 + window.scrollY;
+              left = rect.right + 12 + window.scrollX;
+              break;
+          }
+          this.style.top = `${Math.max(8, top)}px`;
+          this.style.left = `${Math.max(8, left)}px`;
+        }
+      });
+    }
+  }
+  disconnectedCallback() {
+    this.shadow.innerHTML = "";
+  }
+};
+
+// src/elements/flowmate-card.ts
+var FlowmateCard = class extends FlowmateBaseElement {
+  connectedCallback() {
+    const data = this.blockData;
+    const actions = this.blockActions;
+    const position = data.position || "bottom-right";
+    const posMap = {
+      "bottom-right": "bottom: 24px; right: 24px;",
+      "bottom-left": "bottom: 24px; left: 24px;",
+      "top-right": "top: 24px; right: 24px;",
+      "top-left": "top: 24px; left: 24px;"
+    };
+    this.shadow.appendChild(this.createStyle(`
+      :host { position: fixed; ${posMap[position] || posMap["bottom-right"]} z-index: 10000; }
+      .fm-card { animation: fm-slide-up 0.25s ease; max-width: 360px; position: relative; }
+    `));
+    const card = document.createElement("div");
+    card.className = "fm-card";
+    card.innerHTML = `
+      ${this.dismissible ? '<button class="fm-close">&times;</button>' : ""}
+      ${data.title ? `<div class="fm-header"><h3 class="fm-title">${data.title}</h3></div>` : ""}
+      ${data.body ? `<div class="fm-body">${data.body}</div>` : ""}
+      ${actions.length ? `<div class="fm-actions">${actions.map((a) => `<button class="fm-btn ${a.variant === "secondary" ? "fm-btn-secondary" : "fm-btn-primary"}" data-key="${a.key}">${a.label}</button>`).join("")}</div>` : ""}
+    `;
+    card.addEventListener("click", (e) => {
+      const target = e.target;
+      if (target.classList.contains("fm-close")) this.emitDismiss();
+      if (target.dataset.key) this.emitAction(target.dataset.key);
+    });
+    this.shadow.appendChild(card);
+  }
+  disconnectedCallback() {
+    this.shadow.innerHTML = "";
+  }
+};
+
+// src/elements/flowmate-hint.ts
+var FlowmateHint = class extends FlowmateBaseElement {
+  connectedCallback() {
+    const data = this.blockData;
+    const targetSelector = data.targetSelector || data.selector;
+    this.shadow.appendChild(this.createStyle(`
+      :host { position: absolute; z-index: 10001; pointer-events: none; }
+      .fm-hint {
+        width: 16px; height: 16px;
+        border-radius: 50%;
+        background: var(--fm-primary);
+        position: relative;
+        pointer-events: auto;
+        cursor: pointer;
+      }
+      .fm-hint::after {
+        content: '';
+        position: absolute;
+        inset: -4px;
+        border-radius: 50%;
+        border: 2px solid var(--fm-primary);
+        animation: fm-pulse 2s infinite;
+      }
+      @keyframes fm-pulse {
+        0%, 100% { opacity: 1; transform: scale(1); }
+        50% { opacity: 0.4; transform: scale(1.5); }
+      }
+    `));
+    const hint = document.createElement("div");
+    hint.className = "fm-hint";
+    hint.addEventListener("click", () => this.emitAction("hint-click"));
+    this.shadow.appendChild(hint);
+    if (targetSelector) {
+      requestAnimationFrame(() => {
+        const el = document.querySelector(targetSelector);
+        if (el) {
+          const rect = el.getBoundingClientRect();
+          this.style.top = `${rect.top - 8 + window.scrollY}px`;
+          this.style.left = `${rect.right - 8 + window.scrollX}px`;
+        }
+      });
+    }
+  }
+  disconnectedCallback() {
+    this.shadow.innerHTML = "";
+  }
+};
+
+// src/elements/flowmate-sidebar.ts
+var FlowmateSidebar = class extends FlowmateBaseElement {
+  connectedCallback() {
+    const data = this.blockData;
+    const actions = this.blockActions;
+    const side = data.side || "right";
+    const width = data.width || "380px";
+    this.shadow.appendChild(this.createStyle(`
+      :host { position: fixed; inset: 0; z-index: 10000; }
+      .fm-sidebar-overlay {
+        position: fixed; inset: 0;
+        background: rgba(0,0,0,0.4);
+        animation: fm-fade-in 0.2s ease;
+      }
+      .fm-sidebar-panel {
+        position: fixed; top: 0; bottom: 0;
+        ${side === "left" ? "left: 0;" : "right: 0;"}
+        width: ${width};
+        max-width: 90vw;
+        background: var(--fm-bg);
+        box-shadow: var(--fm-shadow);
+        display: flex;
+        flex-direction: column;
+        animation: fm-slide-${side === "left" ? "right" : "left"} 0.3s ease;
+      }
+      .fm-sidebar-header {
+        padding: 20px 24px;
+        border-bottom: 1px solid var(--fm-border);
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+      .fm-sidebar-body { padding: 24px; flex: 1; overflow-y: auto; font-size: 14px; line-height: 1.6; }
+      .fm-sidebar-footer { padding: 16px 24px; border-top: 1px solid var(--fm-border); display: flex; gap: 8px; justify-content: flex-end; }
+      @keyframes fm-slide-right { from { transform: translateX(-100%); } to { transform: translateX(0); } }
+      @keyframes fm-slide-left { from { transform: translateX(100%); } to { transform: translateX(0); } }
+    `));
+    const container = document.createElement("div");
+    container.innerHTML = `
+      <div class="fm-sidebar-overlay"></div>
+      <div class="fm-sidebar-panel">
+        <div class="fm-sidebar-header">
+          <h2 class="fm-title" style="margin:0;">${data.title || ""}</h2>
+          <button class="fm-close" style="position:static;">&times;</button>
+        </div>
+        ${data.body ? `<div class="fm-sidebar-body">${data.body}</div>` : ""}
+        ${actions.length ? `<div class="fm-sidebar-footer">${actions.map((a) => `<button class="fm-btn ${a.variant === "secondary" ? "fm-btn-secondary" : "fm-btn-primary"}" data-key="${a.key}">${a.label}</button>`).join("")}</div>` : ""}
+      </div>
+    `;
+    container.addEventListener("click", (e) => {
+      const target = e.target;
+      if (target.classList.contains("fm-sidebar-overlay") || target.classList.contains("fm-close")) this.emitDismiss();
+      if (target.dataset.key) this.emitAction(target.dataset.key);
+    });
+    this.shadow.appendChild(container);
+  }
+  disconnectedCallback() {
+    this.shadow.innerHTML = "";
+  }
+};
+
+// src/elements/flowmate-checklist.ts
+var FlowmateChecklist = class extends FlowmateBaseElement {
+  constructor() {
+    super(...arguments);
+    this.checkedItems = /* @__PURE__ */ new Set();
+  }
+  connectedCallback() {
+    const data = this.blockData;
+    const items = data.items || [];
+    this.shadow.appendChild(this.createStyle(`
+      :host { position: fixed; bottom: 24px; right: 24px; z-index: 10000; }
+      .fm-checklist {
+        width: 340px; max-height: 480px;
+        animation: fm-slide-up 0.25s ease;
+        overflow: hidden; display: flex; flex-direction: column;
+      }
+      .fm-checklist-header {
+        padding: 16px 20px;
+        border-bottom: 1px solid var(--fm-border);
+        display: flex; align-items: center; justify-content: space-between;
+      }
+      .fm-checklist-items { padding: 8px 0; overflow-y: auto; flex: 1; }
+      .fm-checklist-item {
+        padding: 12px 20px;
+        display: flex; align-items: flex-start; gap: 12px;
+        cursor: pointer; transition: background 0.1s;
+      }
+      .fm-checklist-item:hover { background: color-mix(in srgb, var(--fm-primary) 5%, transparent); }
+      .fm-check {
+        width: 20px; height: 20px; border-radius: 50%;
+        border: 2px solid var(--fm-border); flex-shrink: 0;
+        display: flex; align-items: center; justify-content: center;
+        transition: all 0.2s;
+      }
+      .fm-check.checked {
+        background: var(--fm-primary); border-color: var(--fm-primary);
+      }
+      .fm-check.checked::after { content: '\u2713'; color: white; font-size: 12px; }
+      .fm-item-title { font-size: 14px; font-weight: 500; }
+      .fm-item-title.checked { text-decoration: line-through; opacity: 0.5; }
+      .fm-item-desc { font-size: 12px; opacity: 0.6; margin-top: 2px; }
+      .fm-progress { height: 4px; background: var(--fm-border); border-radius: 2px; margin: 0 20px 12px; }
+      .fm-progress-bar { height: 100%; background: var(--fm-primary); border-radius: 2px; transition: width 0.3s; }
+    `));
+    this.render(data, items);
+  }
+  render(data, items) {
+    const existing = this.shadow.querySelector(".fm-checklist");
+    if (existing) existing.remove();
+    const pct = items.length ? this.checkedItems.size / items.length * 100 : 0;
+    const el = document.createElement("div");
+    el.className = "fm-card fm-checklist";
+    el.innerHTML = `
+      <div class="fm-checklist-header">
+        <div>
+          <div class="fm-title" style="font-size:15px; margin:0;">${data.title || "Getting Started"}</div>
+          <div style="font-size:12px; opacity:0.6; margin-top:2px;">${this.checkedItems.size}/${items.length} complete</div>
+        </div>
+        ${data.dismissible !== false ? '<button class="fm-close" style="position:static;">&times;</button>' : ""}
+      </div>
+      <div class="fm-progress"><div class="fm-progress-bar" style="width:${pct}%"></div></div>
+      <div class="fm-checklist-items">
+        ${items.map((item, i) => {
+      const checked = this.checkedItems.has(i);
+      return `<div class="fm-checklist-item" data-index="${i}">
+            <div class="fm-check ${checked ? "checked" : ""}"></div>
+            <div>
+              <div class="fm-item-title ${checked ? "checked" : ""}">${item.title}</div>
+              ${item.description ? `<div class="fm-item-desc">${item.description}</div>` : ""}
+            </div>
+          </div>`;
+    }).join("")}
+      </div>
+    `;
+    el.addEventListener("click", (e) => {
+      const target = e.target.closest(".fm-checklist-item");
+      if (target) {
+        const idx = parseInt(target.dataset.index || "0");
+        if (this.checkedItems.has(idx)) this.checkedItems.delete(idx);
+        else this.checkedItems.add(idx);
+        this.render(data, items);
+        if (this.checkedItems.size === items.length) {
+          setTimeout(() => this.emitAction("complete"), 500);
+        }
+      }
+      if (e.target.classList.contains("fm-close")) this.emitDismiss();
+    });
+    this.shadow.appendChild(el);
+  }
+  disconnectedCallback() {
+    this.shadow.innerHTML = "";
+  }
+};
+
+// src/elements/flowmate-floating-blocks.ts
+var FlowmateFloatingBlocks = class extends FlowmateBaseElement {
+  connectedCallback() {
+    this.shadow.appendChild(this.createStyle(`
+      :host { display: contents; }
+    `));
+    const slot = document.createElement("slot");
+    this.shadow.appendChild(slot);
+  }
+};
+
+// src/setup.ts
+var registry = {
+  "flowmate-modal": FlowmateModal,
+  "flowmate-banner": FlowmateBanner,
+  "flowmate-tooltip": FlowmateTooltip,
+  "flowmate-card": FlowmateCard,
+  "flowmate-hint": FlowmateHint,
+  "flowmate-sidebar": FlowmateSidebar,
+  "flowmate-checklist": FlowmateChecklist,
+  "flowmate-floating-blocks": FlowmateFloatingBlocks
+};
+function setupComponents(options) {
+  const components = { ...registry, ...options?.components || {} };
+  for (const [name, constructor] of Object.entries(components)) {
+    if (!customElements.get(name)) {
+      customElements.define(name, constructor);
+    }
+  }
+}
+export {
+  FlowmateBanner,
+  FlowmateCard,
+  FlowmateChecklist,
+  FlowmateFloatingBlocks,
+  FlowmateHint,
+  FlowmateModal,
+  FlowmateSidebar,
+  FlowmateTooltip,
+  setupComponents
+};

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@growthcurve/flowmate-components",
+  "version": "0.1.0",
+  "description": "Flowmate Web Components — framework-agnostic UI components for tooltips, modals, banners, tours and checklists",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./index.css": "./dist/index.css"
+  },
+  "files": ["dist", "README.md"],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": ["flowmate", "web-components", "custom-elements", "tooltips", "modals", "onboarding"],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/snoopyshell/flowmate-maker",
+    "directory": "packages/components"
+  },
+  "homepage": "https://flowmate.dev",
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  }
+}