@faskai/ui-commons 0.0.0-alpha.25 → 0.0.0-alpha.27

package/dist/components/connections/app-icon.js

@@ -1,24 +1,21 @@
-"use strict";
 'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppIcon = AppIcon;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const lucide_react_1 = require("lucide-react");
-const utils_1 = require("../../lib/utils");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Blocks, Landmark, Building2, CreditCard, ShoppingCart, Calendar, Mail, MessageSquare, } from 'lucide-react';
+import { cn } from '../../lib/utils';
 const iconMap = {
-    landmark: lucide_react_1.Landmark,
-    building2: lucide_react_1.Building2,
-    'credit-card': lucide_react_1.CreditCard,
-    'shopping-cart': lucide_react_1.ShoppingCart,
-    calendar: lucide_react_1.Calendar,
-    mail: lucide_react_1.Mail,
-    'message-square': lucide_react_1.MessageSquare,
+    landmark: Landmark,
+    building2: Building2,
+    'credit-card': CreditCard,
+    'shopping-cart': ShoppingCart,
+    calendar: Calendar,
+    mail: Mail,
+    'message-square': MessageSquare,
 };
-const FallbackIcon = lucide_react_1.Blocks;
-function AppIcon({ src, icon, alt, className }) {
+const FallbackIcon = Blocks;
+export function AppIcon({ src, icon, alt, className }) {
     if (src) {
-        return (0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, className: (0, utils_1.cn)('rounded', className) });
+        return _jsx("img", { src: src, alt: alt, className: cn('rounded', className) });
     }
     const Icon = (icon && iconMap[icon]) || FallbackIcon;
-    return (0, jsx_runtime_1.jsx)(Icon, { className: (0, utils_1.cn)('text-muted-foreground', className) });
+    return _jsx(Icon, { className: cn('text-muted-foreground', className) });
 }

package/dist/components/connections/app-search-grid.js

@@ -1,19 +1,16 @@
-"use strict";
 'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AppSearchGrid = AppSearchGrid;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const lucide_react_1 = require("lucide-react");
-const app_icon_1 = require("./app-icon");
-const badge_1 = require("../ui/badge");
-const button_1 = require("../ui/button");
-function AppSearchGrid({ connectedAppKeys, onSearch, onConnect, connecting, initialApps, }) {
-    const [query, setQuery] = (0, react_1.useState)('');
-    const [apps, setApps] = (0, react_1.useState)(initialApps || []);
-    const [searching, setSearching] = (0, react_1.useState)(false);
-    const debounceRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { Loader2 } from 'lucide-react';
+import { AppIcon } from './app-icon';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+export function AppSearchGrid({ connectedAppKeys, onSearch, onConnect, connecting, initialApps, }) {
+    const [query, setQuery] = useState('');
+    const [apps, setApps] = useState(initialApps || []);
+    const [searching, setSearching] = useState(false);
+    const debounceRef = useRef(null);
+    useEffect(() => {
         if (debounceRef.current)
             clearTimeout(debounceRef.current);
         debounceRef.current = setTimeout(async () => {
@@ -34,5 +31,5 @@ function AppSearchGrid({ connectedAppKeys, onSearch, onConnect, connecting, init
     function isConnected(slug) {
         return connectedAppKeys.includes(slug);
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-sm font-medium", children: "Connect Apps" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted-foreground text-xs", children: "Search and connect apps for your agent." })] }), (0, jsx_runtime_1.jsx)("input", { className: "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-sm transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", placeholder: "Search apps (e.g. Slack, Google Sheets, HubSpot)...", value: query, onChange: (e) => setQuery(e.target.value) }), searching && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 py-4", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "size-4 animate-spin" }), (0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground text-sm", children: "Searching..." })] })), apps.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "grid gap-2 sm:grid-cols-2 lg:grid-cols-3", children: apps.map((app) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 rounded-lg border p-3", children: [(0, jsx_runtime_1.jsx)(app_icon_1.AppIcon, { src: app.img_src, alt: app.name, className: "size-8" }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("p", { className: "truncate text-sm font-medium", children: app.name }), isConnected(app.name_slug) && ((0, jsx_runtime_1.jsx)("span", { className: "text-muted-foreground text-xs", children: "Connected" }))] }), isConnected(app.name_slug) ? ((0, jsx_runtime_1.jsx)(badge_1.Badge, { children: "Connected" })) : ((0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "outline", size: "sm", onClick: () => onConnect(app), disabled: connecting === app.name_slug, children: [connecting === app.name_slug && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin" })), "Connect"] }))] }, app.name_slug))) }))] }));
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("h3", { className: "text-sm font-medium", children: "Connect Apps" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Search and connect apps for your agent." })] }), _jsx("input", { className: "border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-sm transition-colors focus-visible:ring-1 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", placeholder: "Search apps (e.g. Slack, Google Sheets, HubSpot)...", value: query, onChange: (e) => setQuery(e.target.value) }), searching && (_jsxs("div", { className: "flex items-center gap-2 py-4", children: [_jsx(Loader2, { className: "size-4 animate-spin" }), _jsx("span", { className: "text-muted-foreground text-sm", children: "Searching..." })] })), apps.length > 0 && (_jsx("div", { className: "grid gap-2 sm:grid-cols-2 lg:grid-cols-3", children: apps.map((app) => (_jsxs("div", { className: "flex items-center gap-3 rounded-lg border p-3", children: [_jsx(AppIcon, { src: app.img_src, alt: app.name, className: "size-8" }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-medium", children: app.name }), isConnected(app.name_slug) && (_jsx("span", { className: "text-muted-foreground text-xs", children: "Connected" }))] }), isConnected(app.name_slug) ? (_jsx(Badge, { children: "Connected" })) : (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => onConnect(app), disabled: connecting === app.name_slug, children: [connecting === app.name_slug && (_jsx(Loader2, { className: "animate-spin" })), "Connect"] }))] }, app.name_slug))) }))] }));
 }

package/dist/components/connections/available-apps-list.js

@@ -1,18 +1,15 @@
-"use strict";
 'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvailableAppsList = AvailableAppsList;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const lucide_react_1 = require("lucide-react");
-const app_icon_1 = require("./app-icon");
-const card_1 = require("../ui/card");
-const button_1 = require("../ui/button");
-function AvailableAppsList({ connections, onConnect, connecting, }) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, Loader2 } from 'lucide-react';
+import { AppIcon } from './app-icon';
+import { Card, CardHeader, CardFooter } from '../ui/card';
+import { Button } from '../ui/button';
+export function AvailableAppsList({ connections, onConnect, connecting, }) {
     const available = connections.filter((c) => c.status !== 'connected');
     if (available.length === 0)
         return null;
-    return ((0, jsx_runtime_1.jsx)("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: available.map((conn) => {
+    return (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: available.map((conn) => {
             const isConnecting = connecting === conn.appKey;
-            return ((0, jsx_runtime_1.jsxs)(card_1.Card, { className: "gap-4 py-4", children: [(0, jsx_runtime_1.jsxs)(card_1.CardHeader, { className: "flex-row items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-background flex size-12 shrink-0 items-center justify-center rounded-lg border p-2", children: (0, jsx_runtime_1.jsx)(app_icon_1.AppIcon, { src: conn.app?.img, icon: conn.app?.icon, alt: conn.app?.name, className: "size-full object-contain" }) }), (0, jsx_runtime_1.jsx)("p", { className: "min-w-0 flex-1 truncate text-base font-semibold", children: conn.app?.name })] }), (0, jsx_runtime_1.jsx)(card_1.CardFooter, { children: (0, jsx_runtime_1.jsxs)(button_1.Button, { className: "w-full", onClick: () => onConnect(conn), disabled: isConnecting, children: [isConnecting ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Link, {})), isConnecting ? 'Connecting...' : 'Connect'] }) })] }, conn.id || conn.appKey));
+            return (_jsxs(Card, { className: "gap-4 py-4", children: [_jsxs(CardHeader, { className: "flex-row items-center gap-3", children: [_jsx("div", { className: "bg-background flex size-12 shrink-0 items-center justify-center rounded-lg border p-2", children: _jsx(AppIcon, { src: conn.app?.img, icon: conn.app?.icon, alt: conn.app?.name, className: "size-full object-contain" }) }), _jsx("p", { className: "min-w-0 flex-1 truncate text-base font-semibold", children: conn.app?.name })] }), _jsx(CardFooter, { children: _jsxs(Button, { className: "w-full", onClick: () => onConnect(conn), disabled: isConnecting, children: [isConnecting ? (_jsx(Loader2, { className: "animate-spin" })) : (_jsx(Link, {})), isConnecting ? 'Connecting...' : 'Connect'] }) })] }, conn.id || conn.appKey));
         }) }));
 }

package/dist/components/connections/connected-apps-list.js

@@ -1,24 +1,21 @@
-"use strict";
 'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConnectedAppsList = ConnectedAppsList;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const lucide_react_1 = require("lucide-react");
-const app_icon_1 = require("./app-icon");
-const card_1 = require("../ui/card");
-const badge_1 = require("../ui/badge");
-const button_1 = require("../ui/button");
-function ConnectedAppsList({ connections, variant, onReimport, onDisconnect, reimporting, disconnecting, }) {
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Loader2, RefreshCw, Unlink } from 'lucide-react';
+import { AppIcon } from './app-icon';
+import { Card, CardHeader, CardFooter, CardAction } from '../ui/card';
+import { Badge } from '../ui/badge';
+import { Button } from '../ui/button';
+export function ConnectedAppsList({ connections, variant, onReimport, onDisconnect, reimporting, disconnecting, }) {
     const connected = connections.filter((c) => c.status === 'connected');
     if (connected.length === 0)
         return null;
     if (variant === 'badges') {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap gap-2", children: connected.map((conn) => ((0, jsx_runtime_1.jsxs)(badge_1.Badge, { children: [(0, jsx_runtime_1.jsx)(app_icon_1.AppIcon, { src: conn.app?.img, icon: conn.app?.icon, alt: conn.app?.name, className: "size-4" }), conn.app?.name] }, conn.appKey))) }));
+        return (_jsx("div", { className: "flex flex-wrap gap-2", children: connected.map((conn) => (_jsxs(Badge, { children: [_jsx(AppIcon, { src: conn.app?.img, icon: conn.app?.icon, alt: conn.app?.name, className: "size-4" }), conn.app?.name] }, conn.appKey))) }));
     }
     // cards variant
-    return ((0, jsx_runtime_1.jsx)("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: connected.map((conn) => {
+    return (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: connected.map((conn) => {
             const isReimporting = reimporting === (conn.providerConnectionId || conn.appKey);
             const isDisconnecting = disconnecting === (conn.id || conn.appKey);
-            return ((0, jsx_runtime_1.jsxs)(card_1.Card, { className: "gap-4 py-4", children: [(0, jsx_runtime_1.jsxs)(card_1.CardHeader, { className: "flex-row items-center gap-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-background flex size-12 shrink-0 items-center justify-center rounded-lg border p-2", children: (0, jsx_runtime_1.jsx)(app_icon_1.AppIcon, { src: conn.app?.img, icon: conn.app?.icon, alt: conn.app?.name, className: "size-full object-contain" }) }), (0, jsx_runtime_1.jsx)("p", { className: "min-w-0 flex-1 truncate text-base font-semibold", children: conn.app?.name }), (0, jsx_runtime_1.jsx)(card_1.CardAction, { children: (0, jsx_runtime_1.jsxs)(badge_1.Badge, { variant: "outline", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Check, { className: "size-3" }), "Connected"] }) })] }), (0, jsx_runtime_1.jsxs)(card_1.CardFooter, { className: "gap-2", children: [onReimport && ((0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "outline", size: "sm", onClick: () => onReimport(conn), disabled: isReimporting, children: [isReimporting ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.RefreshCw, {})), isReimporting ? 'Reimporting...' : 'Reimport'] })), onDisconnect && ((0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "outline", size: "sm", className: "text-destructive hover:text-destructive", onClick: () => onDisconnect(conn), disabled: isDisconnecting, children: [isDisconnecting ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { className: "animate-spin" })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Unlink, {})), isDisconnecting ? 'Disconnecting...' : 'Disconnect'] }))] })] }, conn.id || conn.appKey));
+            return (_jsxs(Card, { className: "gap-4 py-4", children: [_jsxs(CardHeader, { className: "flex-row items-center gap-3", children: [_jsx("div", { className: "bg-background flex size-12 shrink-0 items-center justify-center rounded-lg border p-2", children: _jsx(AppIcon, { src: conn.app?.img, icon: conn.app?.icon, alt: conn.app?.name, className: "size-full object-contain" }) }), _jsx("p", { className: "min-w-0 flex-1 truncate text-base font-semibold", children: conn.app?.name }), _jsx(CardAction, { children: _jsxs(Badge, { variant: "outline", children: [_jsx(Check, { className: "size-3" }), "Connected"] }) })] }), _jsxs(CardFooter, { className: "gap-2", children: [onReimport && (_jsxs(Button, { variant: "outline", size: "sm", onClick: () => onReimport(conn), disabled: isReimporting, children: [isReimporting ? (_jsx(Loader2, { className: "animate-spin" })) : (_jsx(RefreshCw, {})), isReimporting ? 'Reimporting...' : 'Reimport'] })), onDisconnect && (_jsxs(Button, { variant: "outline", size: "sm", className: "text-destructive hover:text-destructive", onClick: () => onDisconnect(conn), disabled: isDisconnecting, children: [isDisconnecting ? (_jsx(Loader2, { className: "animate-spin" })) : (_jsx(Unlink, {})), isDisconnecting ? 'Disconnecting...' : 'Disconnect'] }))] })] }, conn.id || conn.appKey));
         }) }));
 }

package/dist/components/connections/connections-api-provider.js

@@ -1,18 +1,14 @@
-"use strict";
 'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useConnectionsApi = useConnectionsApi;
-exports.ConnectionsApiProvider = ConnectionsApiProvider;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const ConnectionsApiContext = (0, react_1.createContext)(null);
-function useConnectionsApi() {
-    const api = (0, react_1.useContext)(ConnectionsApiContext);
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const ConnectionsApiContext = createContext(null);
+export function useConnectionsApi() {
+    const api = useContext(ConnectionsApiContext);
     if (!api) {
         throw new Error('useConnectionsApi must be used within a ConnectionsApiProvider');
     }
     return api;
 }
-function ConnectionsApiProvider({ api, children, }) {
-    return ((0, jsx_runtime_1.jsx)(ConnectionsApiContext.Provider, { value: api, children: children }));
+export function ConnectionsApiProvider({ api, children, }) {
+    return (_jsx(ConnectionsApiContext.Provider, { value: api, children: children }));
 }

package/dist/components/connections/connections-panel.d.ts

@@ -1,8 +1,7 @@
 import type { FaskConnection } from '../../types/connections';
 interface ConnectionsPanelProps {
     variant: 'full-page' | 'compact';
-    showSearch?: boolean;
     onConnectionsLoaded?: (connections: FaskConnection[]) => void;
 }
-export declare function ConnectionsPanel({ variant, showSearch, onConnectionsLoaded, }: ConnectionsPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function ConnectionsPanel({ variant, onConnectionsLoaded, }: ConnectionsPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/connections/connections-panel.js

@@ -1,48 +1,36 @@
-"use strict";
 'use client';
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ConnectionsPanel = ConnectionsPanel;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const connections_api_provider_1 = require("./connections-api-provider");
-const connected_apps_list_1 = require("./connected-apps-list");
-const available_apps_list_1 = require("./available-apps-list");
-const app_search_grid_1 = require("./app-search-grid");
-const app_icon_1 = require("./app-icon");
-const badge_1 = require("../ui/badge");
-const card_1 = require("../ui/card");
-function ConnectionsPanel({ variant, showSearch, onConnectionsLoaded, }) {
-    const api = (0, connections_api_provider_1.useConnectionsApi)();
-    const [connections, setConnections] = (0, react_1.useState)([]);
-    const [loading, setLoading] = (0, react_1.useState)(true);
-    const [connecting, setConnecting] = (0, react_1.useState)(null);
-    const [disconnecting, setDisconnecting] = (0, react_1.useState)(null);
-    const prevConnectionsRef = (0, react_1.useRef)([]);
-    const pollIntervalRef = (0, react_1.useRef)(null);
-    const loadData = (0, react_1.useCallback)(async () => {
-        setLoading(true);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
+import { createFrontendClient } from '@pipedream/sdk/browser';
+import { useConnectionsApi } from './connections-api-provider';
+import { ConnectedAppsList } from './connected-apps-list';
+import { AvailableAppsList } from './available-apps-list';
+import { AppSearchGrid } from './app-search-grid';
+import { Card } from '../ui/card';
+export function ConnectionsPanel({ variant, onConnectionsLoaded, }) {
+    const api = useConnectionsApi();
+    const [connections, setConnections] = useState([]);
+    const [initialApps, setInitialApps] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [connecting, setConnecting] = useState(null);
+    const [disconnecting, setDisconnecting] = useState(null);
+    const loadData = useCallback(async () => {
         const conns = await api.getConnections();
-        // Salesforce polling detection
-        const wasConnected = prevConnectionsRef.current.some((c) => c.appKey === 'salesforce' && c.status === 'connected');
-        const isConnected = conns.some((c) => c.appKey === 'salesforce' && c.status === 'connected');
-        if (prevConnectionsRef.current.length > 0 &&
-            !wasConnected &&
-            isConnected) {
-            if (pollIntervalRef.current)
-                clearInterval(pollIntervalRef.current);
-        }
-        prevConnectionsRef.current = conns;
         setConnections(conns);
         onConnectionsLoaded?.(conns);
-        setLoading(false);
     }, [api, onConnectionsLoaded]);
-    (0, react_1.useEffect)(() => {
-        loadData();
-        return () => {
-            if (pollIntervalRef.current)
-                clearInterval(pollIntervalRef.current);
-        };
-    }, [loadData]);
+    useEffect(() => {
+        async function init() {
+            setLoading(true);
+            const [, apps] = await Promise.all([
+                loadData(),
+                api.searchApps(''),
+            ]);
+            setInitialApps(apps);
+            setLoading(false);
+        }
+        init();
+    }, [loadData, api]);
     const connectedAppKeys = connections
         .filter((c) => c.status === 'connected')
         .map((c) => c.appKey);
@@ -50,19 +38,23 @@ function ConnectionsPanel({ variant, showSearch, onConnectionsLoaded, }) {
         const appKey = 'appKey' in app ? app.appKey : app.name_slug;
         setConnecting(appKey);
         try {
-            const response = await api.connect(app);
-            window.open(response.connect_link, '_blank', 'width=600,height=700');
-            if (appKey === 'salesforce') {
-                prevConnectionsRef.current = connections;
-                pollIntervalRef.current = setInterval(loadData, 2000);
-                setTimeout(() => {
-                    if (pollIntervalRef.current)
-                        clearInterval(pollIntervalRef.current);
-                }, 60000);
-            }
-            else {
-                setTimeout(loadData, 3000);
-            }
+            const { token, expiresAt } = await api.getConnectToken(appKey);
+            const pd = createFrontendClient({
+                externalUserId: 'user',
+                tokenCallback: async () => ({
+                    token,
+                    expiresAt: new Date(expiresAt),
+                    connectLinkUrl: '',
+                }),
+            });
+            await new Promise((resolve, reject) => {
+                pd.connectAccount({
+                    app: appKey,
+                    onSuccess: () => resolve(),
+                    onError: (err) => reject(err),
+                });
+            });
+            await loadData();
         }
         finally {
             setConnecting(null);
@@ -79,19 +71,11 @@ function ConnectionsPanel({ variant, showSearch, onConnectionsLoaded, }) {
             setDisconnecting(null);
         }
     }
-    async function handleSearchConnect(app) {
-        await handleConnect(app);
-    }
     if (loading) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: [1, 2, 3].map((i) => ((0, jsx_runtime_1.jsx)(card_1.Card, { className: "h-28 animate-pulse bg-muted/50" }, i))) }));
+        return (_jsx("div", { className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3", children: [1, 2, 3].map((i) => (_jsx(Card, { className: "h-28 animate-pulse bg-muted/50" }, i))) }));
     }
     if (variant === 'compact') {
-        const availableAppsWithActions = connections.filter((c) => c.status !== 'connected' && c.actions && c.actions.length > 0);
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(connectedAppKeys.length > 0 ||
-                    availableAppsWithActions.length > 0) && ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsx)("h3", { className: "text-sm font-medium", children: "Connected Apps" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-2", children: [connections
-                                    .filter((c) => c.status === 'connected')
-                                    .map((conn) => ((0, jsx_runtime_1.jsxs)(badge_1.Badge, { children: [(0, jsx_runtime_1.jsx)(app_icon_1.AppIcon, { src: conn.app?.img, icon: conn.app?.icon, alt: conn.app?.name, className: "size-4" }), conn.app?.name] }, conn.appKey))), availableAppsWithActions.map((conn) => ((0, jsx_runtime_1.jsxs)(badge_1.Badge, { variant: "secondary", className: "opacity-60", children: [(0, jsx_runtime_1.jsx)(app_icon_1.AppIcon, { src: conn.app?.img, icon: conn.app?.icon, alt: conn.app?.name, className: "size-4" }), conn.app?.name, (0, jsx_runtime_1.jsx)("span", { className: "text-[10px]", children: "Not connected" })] }, conn.appKey)))] })] })), showSearch && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("hr", { className: "border-border" }), (0, jsx_runtime_1.jsx)(app_search_grid_1.AppSearchGrid, { connectedAppKeys: connectedAppKeys, onSearch: (q) => api.searchApps(q), onConnect: handleSearchConnect, connecting: connecting })] }))] }));
+        return (_jsxs("div", { className: "space-y-6", children: [_jsx(ConnectedAppsList, { connections: connections, variant: "badges", onDisconnect: handleDisconnect, disconnecting: disconnecting }), _jsx(AppSearchGrid, { connectedAppKeys: connectedAppKeys, onSearch: (q) => api.searchApps(q), onConnect: (app) => handleConnect(app), connecting: connecting, initialApps: initialApps })] }));
     }
-    // full-page variant
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-6", children: [(0, jsx_runtime_1.jsx)(connected_apps_list_1.ConnectedAppsList, { connections: connections, variant: "cards", onDisconnect: handleDisconnect, disconnecting: disconnecting }), (0, jsx_runtime_1.jsx)(available_apps_list_1.AvailableAppsList, { connections: connections, onConnect: handleConnect, connecting: connecting }), showSearch && ((0, jsx_runtime_1.jsx)(app_search_grid_1.AppSearchGrid, { connectedAppKeys: connectedAppKeys, onSearch: (q) => api.searchApps(q), onConnect: handleSearchConnect, connecting: connecting }))] }));
+    return (_jsxs("div", { className: "space-y-6", children: [_jsx(ConnectedAppsList, { connections: connections, variant: "cards", onDisconnect: handleDisconnect, disconnecting: disconnecting }), _jsx(AvailableAppsList, { connections: connections, onConnect: handleConnect, connecting: connecting }), _jsx(AppSearchGrid, { connectedAppKeys: connectedAppKeys, onSearch: (q) => api.searchApps(q), onConnect: (app) => handleConnect(app), connecting: connecting, initialApps: initialApps })] }));
 }

package/dist/components/gtm/gtm-provider.js

@@ -1,17 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.GTMProvider = GTMProvider;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const script_1 = __importDefault(require("next/script"));
-function GTMProvider({ gtmId, children }) {
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(script_1.default, { id: "gtm-head", strategy: "afterInteractive", children: `
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Script from 'next/script';
+export function GTMProvider({ gtmId, children }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Script, { id: "gtm-head", strategy: "afterInteractive", children: `
           (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
           new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
           j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
           'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
           })(window,document,'script','dataLayer','${gtmId}');
-        ` }), (0, jsx_runtime_1.jsx)("noscript", { children: (0, jsx_runtime_1.jsx)("iframe", { src: `https://www.googletagmanager.com/ns.html?id=${gtmId}`, height: "0", width: "0", style: { display: 'none', visibility: 'hidden' } }) }), children] }));
+        ` }), _jsx("noscript", { children: _jsx("iframe", { src: `https://www.googletagmanager.com/ns.html?id=${gtmId}`, height: "0", width: "0", style: { display: 'none', visibility: 'hidden' } }) }), children] }));
 }

package/dist/components/layout/grid.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare const GRID_STYLES: {
+    readonly 2: "grid-cols-1 gap-4 sm:grid-cols-2";
+    readonly 3: "grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3";
+    readonly 4: "grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 xl:grid-cols-4";
+};
+declare function Grid({ columns, className, ...props }: React.ComponentProps<'div'> & {
+    columns: keyof typeof GRID_STYLES;
+}): import("react/jsx-runtime").JSX.Element;
+export { Grid };

package/dist/components/layout/grid.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+const GRID_STYLES = {
+    2: 'grid-cols-1 gap-4 sm:grid-cols-2',
+    3: 'grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3',
+    4: 'grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3 xl:grid-cols-4',
+};
+function Grid({ columns, className, ...props }) {
+    return (_jsx("div", { "data-slot": "grid", className: cn('grid', GRID_STYLES[columns], className), ...props }));
+}
+export { Grid };

package/dist/components/layout/row.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+declare function Row({ gap, fill, wrap, className, ...props }: React.ComponentProps<'div'> & {
+    gap?: 0 | 1 | 1.5 | 2 | 3 | 4 | 6 | 8;
+    fill?: boolean;
+    wrap?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Row };

package/dist/components/layout/row.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+const GAP_MAP = {
+    0: 'gap-0',
+    1: 'gap-1',
+    1.5: 'gap-1.5',
+    2: 'gap-2',
+    3: 'gap-3',
+    4: 'gap-4',
+    6: 'gap-6',
+    8: 'gap-8',
+};
+function Row({ gap = 2, fill = false, wrap = false, className, ...props }) {
+    return (_jsx("div", { "data-slot": "row", className: cn('flex flex-row min-w-0 overflow-hidden items-center', GAP_MAP[gap], fill && 'flex-1', wrap && 'flex-wrap', className), ...props }));
+}
+export { Row };

package/dist/components/layout/split-view.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare function SplitView({ desktop, mobile, className, ...props }: Omit<React.ComponentProps<'div'>, 'children'> & {
+    desktop: React.ReactNode;
+    mobile: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export { SplitView };

package/dist/components/layout/split-view.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+function SplitView({ desktop, mobile, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "split-view", className: cn('flex min-h-0 flex-1 flex-col', className), ...props, children: [_jsx("div", { className: "hidden min-h-0 flex-1 overflow-hidden lg:block", children: desktop }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col lg:hidden", children: mobile })] }));
+}
+export { SplitView };

package/dist/components/layout/stack.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare function Stack({ gap, fill, className, ...props }: React.ComponentProps<'div'> & {
+    gap?: 0 | 1 | 1.5 | 2 | 3 | 4 | 6 | 8;
+    fill?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Stack };

package/dist/components/layout/stack.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+const GAP_MAP = {
+    0: 'gap-0',
+    1: 'gap-1',
+    1.5: 'gap-1.5',
+    2: 'gap-2',
+    3: 'gap-3',
+    4: 'gap-4',
+    6: 'gap-6',
+    8: 'gap-8',
+};
+function Stack({ gap = 4, fill = false, className, ...props }) {
+    return (_jsx("div", { "data-slot": "stack", className: cn('flex flex-col min-h-0 overflow-hidden', GAP_MAP[gap], fill && 'flex-1', className), ...props }));
+}
+export { Stack };

package/dist/components/ui/badge.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const badgeVariants: (props?: ({
     variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/badge.js

@@ -1,12 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.badgeVariants = void 0;
-exports.Badge = Badge;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_slot_1 = require("@radix-ui/react-slot");
-const class_variance_authority_1 = require("class-variance-authority");
-const utils_1 = require("../../lib/utils");
-const badgeVariants = (0, class_variance_authority_1.cva)('inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+const badgeVariants = cva('inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', {
     variants: {
         variant: {
             default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
@@ -19,8 +15,8 @@ const badgeVariants = (0, class_variance_authority_1.cva)('inline-flex items-cen
         variant: 'default',
     },
 });
-exports.badgeVariants = badgeVariants;
 function Badge({ className, variant, asChild = false, ...props }) {
-    const Comp = asChild ? react_slot_1.Slot : 'span';
-    return ((0, jsx_runtime_1.jsx)(Comp, { "data-slot": "badge", className: (0, utils_1.cn)(badgeVariants({ variant }), className), ...props }));
+    const Comp = asChild ? Slot : 'span';
+    return (_jsx(Comp, { "data-slot": "badge", className: cn(badgeVariants({ variant }), className), ...props }));
 }
+export { Badge, badgeVariants };

package/dist/components/ui/button.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
     size?: "icon" | "default" | "sm" | "lg" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/button.js

@@ -1,12 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonVariants = void 0;
-exports.Button = Button;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_slot_1 = require("@radix-ui/react-slot");
-const class_variance_authority_1 = require("class-variance-authority");
-const utils_1 = require("../../lib/utils");
-const buttonVariants = (0, class_variance_authority_1.cva)("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
     variants: {
         variant: {
             default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
@@ -28,8 +24,8 @@ const buttonVariants = (0, class_variance_authority_1.cva)("inline-flex items-ce
         size: 'default',
     },
 });
-exports.buttonVariants = buttonVariants;
 function Button({ className, variant, size, asChild = false, ...props }) {
-    const Comp = asChild ? react_slot_1.Slot : 'button';
-    return ((0, jsx_runtime_1.jsx)(Comp, { "data-slot": "button", className: (0, utils_1.cn)(buttonVariants({ variant, size, className })), ...props }));
+    const Comp = asChild ? Slot : 'button';
+    return (_jsx(Comp, { "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props }));
 }
+export { Button, buttonVariants };

package/dist/components/ui/card.js

@@ -1,32 +1,24 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Card = Card;
-exports.CardHeader = CardHeader;
-exports.CardFooter = CardFooter;
-exports.CardTitle = CardTitle;
-exports.CardAction = CardAction;
-exports.CardDescription = CardDescription;
-exports.CardContent = CardContent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("../../lib/utils");
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
 function Card({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "card", className: (0, utils_1.cn)('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className), ...props }));
+    return (_jsx("div", { "data-slot": "card", className: cn('bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm', className), ...props }));
 }
 function CardHeader({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "card-header", className: (0, utils_1.cn)('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', className), ...props }));
+    return (_jsx("div", { "data-slot": "card-header", className: cn('@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6', className), ...props }));
 }
 function CardTitle({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "card-title", className: (0, utils_1.cn)('leading-none font-semibold', className), ...props }));
+    return (_jsx("div", { "data-slot": "card-title", className: cn('leading-none font-semibold', className), ...props }));
 }
 function CardDescription({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "card-description", className: (0, utils_1.cn)('text-muted-foreground text-sm', className), ...props }));
+    return (_jsx("div", { "data-slot": "card-description", className: cn('text-muted-foreground text-sm', className), ...props }));
 }
 function CardAction({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "card-action", className: (0, utils_1.cn)('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className), ...props }));
+    return (_jsx("div", { "data-slot": "card-action", className: cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className), ...props }));
 }
 function CardContent({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "card-content", className: (0, utils_1.cn)('px-6', className), ...props }));
+    return (_jsx("div", { "data-slot": "card-content", className: cn('px-6', className), ...props }));
 }
 function CardFooter({ className, ...props }) {
-    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "card-footer", className: (0, utils_1.cn)('flex items-center px-6 [.border-t]:pt-6', className), ...props }));
+    return (_jsx("div", { "data-slot": "card-footer", className: cn('flex items-center px-6 [.border-t]:pt-6', className), ...props }));
 }
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/data/betaMarketingData.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.betaOfferData = void 0;
-exports.betaOfferData = {
+export const betaOfferData = {
     badge: 'LIMITED TIME',
     title: 'Beta Launch Special',
     description: 'Join our exclusive Beta program and get direct access to our founders.',

package/dist/index.d.ts

@@ -11,4 +11,8 @@ export type { ConnectionsApi } from './types/connections-api';
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } from './components/ui/card';
 export { Badge, badgeVariants } from './components/ui/badge';
 export { Button, buttonVariants } from './components/ui/button';
+export { Stack } from './components/layout/stack';
+export { Row } from './components/layout/row';
+export { Grid } from './components/layout/grid';
+export { SplitView } from './components/layout/split-view';
 export { cn } from './lib/utils';

package/dist/index.js

@@ -1,39 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cn = exports.buttonVariants = exports.Button = exports.badgeVariants = exports.Badge = exports.CardContent = exports.CardDescription = exports.CardAction = exports.CardTitle = exports.CardFooter = exports.CardHeader = exports.Card = exports.ConnectionsPanel = exports.AppSearchGrid = exports.AvailableAppsList = exports.ConnectedAppsList = exports.AppIcon = exports.useConnectionsApi = exports.ConnectionsApiProvider = exports.betaOfferData = exports.GTMProvider = void 0;
-var gtm_provider_1 = require("./components/gtm/gtm-provider");
-Object.defineProperty(exports, "GTMProvider", { enumerable: true, get: function () { return gtm_provider_1.GTMProvider; } });
-var betaMarketingData_1 = require("./data/betaMarketingData");
-Object.defineProperty(exports, "betaOfferData", { enumerable: true, get: function () { return betaMarketingData_1.betaOfferData; } });
+export { GTMProvider } from './components/gtm/gtm-provider';
+export { betaOfferData } from './data/betaMarketingData';
 // Connections
-var connections_api_provider_1 = require("./components/connections/connections-api-provider");
-Object.defineProperty(exports, "ConnectionsApiProvider", { enumerable: true, get: function () { return connections_api_provider_1.ConnectionsApiProvider; } });
-Object.defineProperty(exports, "useConnectionsApi", { enumerable: true, get: function () { return connections_api_provider_1.useConnectionsApi; } });
-var app_icon_1 = require("./components/connections/app-icon");
-Object.defineProperty(exports, "AppIcon", { enumerable: true, get: function () { return app_icon_1.AppIcon; } });
-var connected_apps_list_1 = require("./components/connections/connected-apps-list");
-Object.defineProperty(exports, "ConnectedAppsList", { enumerable: true, get: function () { return connected_apps_list_1.ConnectedAppsList; } });
-var available_apps_list_1 = require("./components/connections/available-apps-list");
-Object.defineProperty(exports, "AvailableAppsList", { enumerable: true, get: function () { return available_apps_list_1.AvailableAppsList; } });
-var app_search_grid_1 = require("./components/connections/app-search-grid");
-Object.defineProperty(exports, "AppSearchGrid", { enumerable: true, get: function () { return app_search_grid_1.AppSearchGrid; } });
-var connections_panel_1 = require("./components/connections/connections-panel");
-Object.defineProperty(exports, "ConnectionsPanel", { enumerable: true, get: function () { return connections_panel_1.ConnectionsPanel; } });
+export { ConnectionsApiProvider, useConnectionsApi, } from './components/connections/connections-api-provider';
+export { AppIcon } from './components/connections/app-icon';
+export { ConnectedAppsList } from './components/connections/connected-apps-list';
+export { AvailableAppsList } from './components/connections/available-apps-list';
+export { AppSearchGrid } from './components/connections/app-search-grid';
+export { ConnectionsPanel } from './components/connections/connections-panel';
 // UI primitives (shadcn)
-var card_1 = require("./components/ui/card");
-Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return card_1.Card; } });
-Object.defineProperty(exports, "CardHeader", { enumerable: true, get: function () { return card_1.CardHeader; } });
-Object.defineProperty(exports, "CardFooter", { enumerable: true, get: function () { return card_1.CardFooter; } });
-Object.defineProperty(exports, "CardTitle", { enumerable: true, get: function () { return card_1.CardTitle; } });
-Object.defineProperty(exports, "CardAction", { enumerable: true, get: function () { return card_1.CardAction; } });
-Object.defineProperty(exports, "CardDescription", { enumerable: true, get: function () { return card_1.CardDescription; } });
-Object.defineProperty(exports, "CardContent", { enumerable: true, get: function () { return card_1.CardContent; } });
-var badge_1 = require("./components/ui/badge");
-Object.defineProperty(exports, "Badge", { enumerable: true, get: function () { return badge_1.Badge; } });
-Object.defineProperty(exports, "badgeVariants", { enumerable: true, get: function () { return badge_1.badgeVariants; } });
-var button_1 = require("./components/ui/button");
-Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return button_1.Button; } });
-Object.defineProperty(exports, "buttonVariants", { enumerable: true, get: function () { return button_1.buttonVariants; } });
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } from './components/ui/card';
+export { Badge, badgeVariants } from './components/ui/badge';
+export { Button, buttonVariants } from './components/ui/button';
+// Layout primitives
+export { Stack } from './components/layout/stack';
+export { Row } from './components/layout/row';
+export { Grid } from './components/layout/grid';
+export { SplitView } from './components/layout/split-view';
 // Utilities
-var utils_1 = require("./lib/utils");
-Object.defineProperty(exports, "cn", { enumerable: true, get: function () { return utils_1.cn; } });
+export { cn } from './lib/utils';

package/dist/lib/utils.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.cn = cn;
-const clsx_1 = require("clsx");
-const tailwind_merge_1 = require("tailwind-merge");
-function cn(...inputs) {
-    return (0, tailwind_merge_1.twMerge)((0, clsx_1.clsx)(inputs));
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
 }

package/dist/types/connections-api.d.ts

@@ -2,9 +2,9 @@ import type { FaskConnection, FaskSearchableApp } from './connections';
 export interface ConnectionsApi {
     getConnections(): Promise<FaskConnection[]>;
     searchApps(query: string): Promise<FaskSearchableApp[]>;
-    connect(app: FaskConnection | FaskSearchableApp): Promise<{
-        connect_link: string;
+    getConnectToken(appKey: string): Promise<{
+        token: string;
+        expiresAt: string;
     }>;
     disconnect(connectionId: string): Promise<void>;
-    reimport?(connectionId: string, appKey: string): Promise<void>;
 }

package/dist/types/connections-api.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/types/connections.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@faskai/ui-commons",
   "author": "Fask AI <arko@fask.ai>",
-  "version": "0.0.0-alpha.25",
+  "version": "0.0.0-alpha.27",
   "description": "Common UI components for Fask applications.",
   "private": false,
   "main": "dist/index.js",
@@ -14,6 +14,7 @@
     "build": "tsc"
   },
   "peerDependencies": {
+    "@pipedream/sdk": ">=2.3.0",
     "@radix-ui/react-slot": ">=1.0.0",
     "class-variance-authority": ">=0.7.0",
     "clsx": ">=2.0.0",
@@ -23,6 +24,7 @@
     "tailwind-merge": ">=2.0.0"
   },
   "devDependencies": {
+    "@pipedream/sdk": "^2.3.6",
     "@radix-ui/react-slot": "^1.1.0",
     "@types/react": "^18.0.0",
     "class-variance-authority": "^0.7.0",