@faskai/ui-commons 0.0.0-alpha.22 → 0.0.0-alpha.24

package/dist/components/connections/app-icon.d.ts

@@ -0,0 +1,8 @@
+interface AppIconProps {
+    src?: string;
+    icon?: string;
+    alt?: string;
+    className?: string;
+}
+export declare function AppIcon({ src, icon, alt, className }: AppIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,24 @@
+"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");
+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,
+};
+const FallbackIcon = lucide_react_1.Blocks;
+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) });
+    }
+    const Icon = (icon && iconMap[icon]) || FallbackIcon;
+    return (0, jsx_runtime_1.jsx)(Icon, { className: (0, utils_1.cn)('text-muted-foreground', className) });
+}

package/dist/components/connections/app-search-grid.d.ts

@@ -0,0 +1,10 @@
+import type { FaskSearchableApp } from '../../types/connections';
+interface AppSearchGridProps {
+    connectedAppKeys: string[];
+    onSearch: (query: string) => Promise<FaskSearchableApp[]>;
+    onConnect: (app: FaskSearchableApp) => void;
+    connecting?: string | null;
+    initialApps?: FaskSearchableApp[];
+}
+export declare function AppSearchGrid({ connectedAppKeys, onSearch, onConnect, connecting, initialApps, }: AppSearchGridProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,36 @@
+"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 utils_1 = require("../../lib/utils");
+const app_icon_1 = require("./app-icon");
+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)(() => {
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(async () => {
+            if (!query.trim()) {
+                setApps(initialApps || []);
+                return;
+            }
+            setSearching(true);
+            const results = await onSearch(query);
+            setApps(results);
+            setSearching(false);
+        }, 300);
+        return () => {
+            if (debounceRef.current)
+                clearTimeout(debounceRef.current);
+        };
+    }, [query, onSearch, initialApps]);
+    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.jsxs)("svg", { className: "size-4 animate-spin", fill: "none", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })] }), (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)("span", { className: "bg-primary text-primary-foreground inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-medium", children: "Connected" })) : ((0, jsx_runtime_1.jsxs)("button", { className: (0, utils_1.cn)('inline-flex items-center rounded-md border px-3 py-1.5 text-sm font-medium', 'hover:bg-accent disabled:opacity-50'), onClick: () => onConnect(app), disabled: connecting === app.name_slug, children: [connecting === app.name_slug && ((0, jsx_runtime_1.jsxs)("svg", { className: "mr-1 size-3 animate-spin", fill: "none", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), (0, jsx_runtime_1.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" })] })), "Connect"] }))] }, app.name_slug))) }))] }));
+}

package/dist/components/connections/available-apps-list.d.ts

@@ -0,0 +1,8 @@
+import type { FaskConnection } from '../../types/connections';
+interface AvailableAppsListProps {
+    connections: FaskConnection[];
+    onConnect: (connection: FaskConnection) => void;
+    connecting?: string | null;
+}
+export declare function AvailableAppsList({ connections, onConnect, connecting, }: AvailableAppsListProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,12 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvailableAppsList = AvailableAppsList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const app_icon_1 = require("./app-icon");
+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) => ((0, jsx_runtime_1.jsxs)("div", { className: "rounded-lg border p-4 transition-all hover:shadow-md", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex 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)("div", { className: "min-w-0 flex-1", children: (0, jsx_runtime_1.jsx)("p", { className: "truncate text-base font-semibold", children: conn.app?.name }) })] }), (0, jsx_runtime_1.jsxs)("button", { onClick: () => onConnect(conn), disabled: connecting === conn.appKey, className: "bg-primary text-primary-foreground hover:bg-primary/90 flex w-full items-center justify-center gap-2 rounded-md px-3 py-2 text-sm font-medium disabled:opacity-50", children: [(0, jsx_runtime_1.jsx)("svg", { className: "size-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" }) }), connecting === conn.appKey ? 'Connecting...' : 'Connect'] })] }, conn.id || conn.appKey))) }));
+}

package/dist/components/connections/connected-apps-list.d.ts

@@ -0,0 +1,11 @@
+import type { FaskConnection } from '../../types/connections';
+interface ConnectedAppsListProps {
+    connections: FaskConnection[];
+    variant: 'cards' | 'badges';
+    onReimport?: (connection: FaskConnection) => void;
+    onDisconnect?: (connection: FaskConnection) => void;
+    reimporting?: string | null;
+    disconnecting?: string | null;
+}
+export declare function ConnectedAppsList({ connections, variant, onReimport, onDisconnect, reimporting, disconnecting, }: ConnectedAppsListProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,22 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectedAppsList = ConnectedAppsList;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("../../lib/utils");
+const app_icon_1 = require("./app-icon");
+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)("span", { className: "bg-primary text-primary-foreground inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium", 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))) }));
+    }
+    // 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) => ((0, jsx_runtime_1.jsxs)("div", { className: "relative rounded-lg border p-4 transition-all hover:shadow-md", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute top-0 right-0", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-primary/10 rounded-bl-lg p-2", children: (0, jsx_runtime_1.jsx)("svg", { className: "text-primary size-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3 flex 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)("div", { className: "min-w-0 flex-1", children: (0, jsx_runtime_1.jsx)("p", { className: "truncate text-base font-semibold", children: conn.app?.name }) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "inline-flex w-full items-center justify-center rounded-md border px-2.5 py-0.5 text-xs font-medium", children: "Connected" }), onReimport && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => onReimport(conn), disabled: reimporting === (conn.providerConnectionId || conn.appKey), className: (0, utils_1.cn)('flex w-full items-center justify-center gap-2 rounded-md border px-3 py-1.5 text-sm', 'hover:bg-accent disabled:opacity-50'), children: [(0, jsx_runtime_1.jsx)("svg", { className: (0, utils_1.cn)('size-4', reimporting === (conn.providerConnectionId || conn.appKey) &&
+                                        'animate-spin'), fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" }) }), reimporting === (conn.providerConnectionId || conn.appKey)
+                                    ? 'Reimporting...'
+                                    : 'Reimport'] })), onDisconnect && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => onDisconnect(conn), disabled: disconnecting === (conn.id || conn.appKey), className: (0, utils_1.cn)('text-destructive hover:text-destructive flex w-full items-center justify-center gap-2 rounded-md border px-3 py-1.5 text-sm', 'hover:bg-accent disabled:opacity-50'), children: [(0, jsx_runtime_1.jsx)("svg", { className: "size-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13.181 8.68a4 4 0 00-5.5-5.5M6.5 12.5l-2-2m8 8l-2-2m2-6l6 6m-2-6l2 2" }) }), disconnecting === (conn.id || conn.appKey)
+                                    ? 'Disconnecting...'
+                                    : 'Disconnect'] }))] })] }, conn.id || conn.appKey))) }));
+}

package/dist/components/connections/connections-api-provider.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+import type { ConnectionsApi } from '../../types/connections-api';
+export declare function useConnectionsApi(): ConnectionsApi;
+interface ConnectionsApiProviderProps {
+    api: ConnectionsApi;
+    children: ReactNode;
+}
+export declare function ConnectionsApiProvider({ api, children, }: ConnectionsApiProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+"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);
+    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 }));
+}

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

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

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

@@ -0,0 +1,115 @@
+"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");
+function ConnectionsPanel({ variant, showSearch, showReimport, 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 [reimporting, setReimporting] = (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);
+        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]);
+    const connectedAppKeys = connections
+        .filter((c) => c.status === 'connected')
+        .map((c) => c.appKey);
+    async function handleConnect(app) {
+        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);
+            }
+        }
+        finally {
+            setConnecting(null);
+        }
+    }
+    async function handleReimport(conn) {
+        const key = conn.providerConnectionId || conn.appKey;
+        setReimporting(key);
+        try {
+            await api.reimport?.(conn.providerConnectionId, conn.appKey);
+        }
+        finally {
+            setReimporting(null);
+        }
+    }
+    async function handleDisconnect(conn) {
+        const key = conn.id || conn.appKey;
+        setDisconnecting(key);
+        try {
+            await api.disconnect(conn.id);
+            await loadData();
+        }
+        finally {
+            setDisconnecting(null);
+        }
+    }
+    async function handleSearchConnect(app) {
+        await handleConnect(app);
+    }
+    if (loading) {
+        return ((0, jsx_runtime_1.jsx)("div", { className: "space-y-4", children: [1, 2, 3].map((i) => ((0, jsx_runtime_1.jsx)("div", { className: "bg-muted/50 h-20 animate-pulse rounded-lg" }, 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)("span", { className: "bg-primary text-primary-foreground inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium", children: [(0, jsx_runtime_1.jsx)(AppIconInline, { src: conn.app?.img, icon: conn.app?.icon, alt: conn.app?.name }), conn.app?.name] }, conn.appKey))), availableAppsWithActions.map((conn) => ((0, jsx_runtime_1.jsxs)("span", { className: "bg-secondary text-secondary-foreground inline-flex items-center gap-1.5 rounded-md px-2.5 py-1 text-xs font-medium opacity-60", children: [(0, jsx_runtime_1.jsx)(AppIconInline, { src: conn.app?.img, icon: conn.app?.icon, alt: conn.app?.name }), 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 })] }))] }));
+    }
+    // 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", onReimport: showReimport ? handleReimport : undefined, onDisconnect: handleDisconnect, reimporting: reimporting, 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 }))] }));
+}
+/**
+ * Tiny inline icon for badge usage (avoids importing the full AppIcon component tree).
+ */
+function AppIconInline({ src, icon, alt, }) {
+    if (src) {
+        return (0, jsx_runtime_1.jsx)("img", { src: src, alt: alt, className: "size-4 rounded" });
+    }
+    // For badges, just show a small placeholder square
+    return ((0, jsx_runtime_1.jsx)("span", { className: "bg-muted-foreground/20 inline-block size-4 rounded" }));
+}

package/dist/data/betaMarketingData.js

@@ -8,17 +8,17 @@ exports.betaOfferData = {
     callouts: [
         {
             emoji: '🌟',
-            title: 'Help shape the future',
+            title: 'Help Shape the Future',
             description: 'Have significant influence in shaping our product roadmap and stay ahead of your competition.',
         },
         {
             emoji: '🔧',
-            title: 'Deep customizations',
+            title: 'Deep Customizations',
             description: 'Deeply customize AI agents on Fask to perform any task, enhance your CX and grow your business.',
         },
         {
             emoji: '💰',
-            title: '50% OFF First Year',
+            title: '50% Off First Year',
             description: 'Exclusive Beta pricing for early adopters. Save hundreds on your first year subscription.',
         },
         {

package/dist/index.d.ts

@@ -1,2 +1,11 @@
 export { GTMProvider } from './components/gtm/gtm-provider';
 export { betaOfferData } from './data/betaMarketingData';
+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';
+export type { FaskConnection, FaskSearchableApp } from './types/connections';
+export type { ConnectionsApi } from './types/connections-api';
+export { cn } from './lib/utils';

package/dist/index.js

@@ -1,7 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.betaOfferData = exports.GTMProvider = void 0;
+exports.cn = 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; } });
+// 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; } });
+// Utilities
+var utils_1 = require("./lib/utils");
+Object.defineProperty(exports, "cn", { enumerable: true, get: function () { return utils_1.cn; } });

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/utils.js

@@ -0,0 +1,8 @@
+"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));
+}

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

@@ -0,0 +1,10 @@
+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;
+    }>;
+    disconnect(connectionId: string): Promise<void>;
+    reimport?(connectionId: string, appKey: string): Promise<void>;
+}

package/dist/types/connections-api.js

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

package/dist/types/connections.d.ts

@@ -0,0 +1,24 @@
+export interface FaskConnection {
+    id?: string;
+    appKey: string;
+    provider: string;
+    providerConnectionId?: string;
+    status: 'connected' | 'available' | 'disconnected' | 'pending' | 'error';
+    app: {
+        name: string;
+        img?: string;
+        icon?: string;
+    };
+    actions?: {
+        key: string;
+        appKey: string;
+        name: string;
+        description: string;
+    }[];
+}
+export interface FaskSearchableApp {
+    name_slug: string;
+    name: string;
+    img_src: string;
+    provider: string;
+}

package/dist/types/connections.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@faskai/ui-commons",
   "author": "Fask AI <arko@fask.ai>",
-  "version": "0.0.0-alpha.22",
+  "version": "0.0.0-alpha.24",
   "description": "Common UI components for Fask applications.",
   "private": false,
   "main": "dist/index.js",
@@ -14,12 +14,18 @@
     "build": "tsc"
   },
   "peerDependencies": {
+    "clsx": ">=2.0.0",
+    "lucide-react": ">=0.300.0",
     "next": ">=13.0.0",
-    "react": ">=18.0.0"
+    "react": ">=18.0.0",
+    "tailwind-merge": ">=2.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.400.0",
     "next": "^14.0.0",
+    "tailwind-merge": "^2.2.0",
     "typescript": "^5.0.0"
   },
   "dependencies": {}