@growthcurve/flowmate-components 0.1.0

package/README.md

@@ -0,0 +1,87 @@
+# @growthcurve/flowmate-components
+
+Framework-agnostic Web Components for [Flowmate](https://flowmate.dev) — the open-source product adoption platform.
+
+These components work with any framework: Vue, Svelte, Angular, Solid, or plain HTML.
+
+## Installation
+
+```bash
+npm install @growthcurve/flowmate-components
+```
+
+## Setup
+
+```typescript
+import { setupComponents } from "@growthcurve/flowmate-components";
+
+// Register all Flowmate custom elements
+setupComponents();
+```
+
+## Usage with @growthcurve/flowmate-js
+
+```typescript
+import { init } from "@growthcurve/flowmate-js";
+import { setupComponents } from "@growthcurve/flowmate-components";
+
+setupComponents();
+
+init({
+  organizationId: "your-org-id",
+  apiKey: "your-api-key",
+  userId: currentUser.id,
+});
+```
+
+## Available Components
+
+| Element | Description |
+|---------|-------------|
+| `<flowmate-modal>` | Centered overlay dialog |
+| `<flowmate-banner>` | Top/bottom notification bar |
+| `<flowmate-tooltip>` | Positioned tooltip near target elements |
+| `<flowmate-card>` | Floating info card |
+| `<flowmate-hint>` | Pulsing indicator on elements |
+| `<flowmate-sidebar>` | Slide-in panel |
+| `<flowmate-checklist>` | Task completion checklist |
+| `<flowmate-floating-blocks>` | Container mount point |
+
+## Theming
+
+Components use CSS custom properties that can be set globally:
+
+```css
+:root {
+  --flowmate-primary: #6366f1;
+  --flowmate-background: #ffffff;
+  --flowmate-foreground: #1a1a2e;
+  --flowmate-border: #e2e8f0;
+  --flowmate-radius: 12px;
+  --flowmate-font-family: Inter, sans-serif;
+  --flowmate-shadow: 0 4px 24px rgba(0,0,0,0.12);
+}
+```
+
+## Framework Notes
+
+### Vue / Nuxt
+Tell Vue about Flowmate custom elements:
+```typescript
+// nuxt.config.ts or vite.config.ts
+vue: {
+  compilerOptions: {
+    isCustomElement: (tag) => tag.startsWith('flowmate-'),
+  }
+}
+```
+
+### Angular
+Add `CUSTOM_ELEMENTS_SCHEMA` to your module:
+```typescript
+@NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,78 @@
+declare class FlowmateBaseElement extends HTMLElement {
+    protected shadow: ShadowRoot;
+    constructor();
+    protected createStyle(additionalCSS?: string): HTMLStyleElement;
+    protected emitAction(action: string, detail?: any): void;
+    protected emitDismiss(): void;
+    get blockData(): Record<string, any>;
+    get blockActions(): Array<{
+        label: string;
+        key: string;
+        variant?: string;
+    }>;
+    get blockTitle(): string;
+    get blockBody(): string;
+    get dismissible(): boolean;
+}
+
+declare class FlowmateModal extends FlowmateBaseElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare class FlowmateBanner extends FlowmateBaseElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare class FlowmateTooltip extends FlowmateBaseElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare class FlowmateCard extends FlowmateBaseElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare class FlowmateHint extends FlowmateBaseElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare class FlowmateSidebar extends FlowmateBaseElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare class FlowmateChecklist extends FlowmateBaseElement {
+    private checkedItems;
+    connectedCallback(): void;
+    private render;
+    disconnectedCallback(): void;
+}
+
+declare class FlowmateFloatingBlocks extends FlowmateBaseElement {
+    connectedCallback(): void;
+}
+
+declare function setupComponents(options?: {
+    components?: Record<string, typeof HTMLElement>;
+}): void;
+
+interface FlowmateComponentProps {
+    title?: string;
+    body?: string;
+    primaryAction?: {
+        label: string;
+        key: string;
+    };
+    secondaryAction?: {
+        label: string;
+        key: string;
+    };
+    dismissible?: boolean;
+    theme?: Record<string, string>;
+}
+
+export { FlowmateBanner, FlowmateCard, FlowmateChecklist, type FlowmateComponentProps, FlowmateFloatingBlocks, FlowmateHint, FlowmateModal, FlowmateSidebar, FlowmateTooltip, setupComponents };

package/dist/index.d.ts

@@ -0,0 +1,78 @@
+declare class FlowmateBaseElement extends HTMLElement {
+    protected shadow: ShadowRoot;
+    constructor();
+    protected createStyle(additionalCSS?: string): HTMLStyleElement;
+    protected emitAction(action: string, detail?: any): void;
+    protected emitDismiss(): void;
+    get blockData(): Record<string, any>;
+    get blockActions(): Array<{
+        label: string;
+        key: string;
+        variant?: string;
+    }>;
+    get blockTitle(): string;
+    get blockBody(): string;
+    get dismissible(): boolean;
+}
+
+declare class FlowmateModal extends FlowmateBaseElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare class FlowmateBanner extends FlowmateBaseElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare class FlowmateTooltip extends FlowmateBaseElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare class FlowmateCard extends FlowmateBaseElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare class FlowmateHint extends FlowmateBaseElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare class FlowmateSidebar extends FlowmateBaseElement {
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+
+declare class FlowmateChecklist extends FlowmateBaseElement {
+    private checkedItems;
+    connectedCallback(): void;
+    private render;
+    disconnectedCallback(): void;
+}
+
+declare class FlowmateFloatingBlocks extends FlowmateBaseElement {
+    connectedCallback(): void;
+}
+
+declare function setupComponents(options?: {
+    components?: Record<string, typeof HTMLElement>;
+}): void;
+
+interface FlowmateComponentProps {
+    title?: string;
+    body?: string;
+    primaryAction?: {
+        label: string;
+        key: string;
+    };
+    secondaryAction?: {
+        label: string;
+        key: string;
+    };
+    dismissible?: boolean;
+    theme?: Record<string, string>;
+}
+
+export { FlowmateBanner, FlowmateCard, FlowmateChecklist, type FlowmateComponentProps, FlowmateFloatingBlocks, FlowmateHint, FlowmateModal, FlowmateSidebar, FlowmateTooltip, setupComponents };