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

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

@@ -4,8 +4,10 @@ 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 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 || []);
@@ -32,5 +34,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.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))) }))] }));
+    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))) }))] }));
 }

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

@@ -3,10 +3,16 @@
 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, }) {
     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))) }));
+    return ((0, jsx_runtime_1.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));
+        }) }));
 }

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

@@ -3,20 +3,22 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ConnectedAppsList = ConnectedAppsList;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const utils_1 = require("../../lib/utils");
+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, }) {
     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))) }));
+        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))) }));
     }
     // 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))) }));
+    return ((0, jsx_runtime_1.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));
+        }) }));
 }

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

@@ -2,8 +2,7 @@ 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 declare function ConnectionsPanel({ variant, showSearch, onConnectionsLoaded, }: ConnectionsPanelProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,12 +8,14 @@ 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 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 [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);
@@ -66,16 +68,6 @@ function ConnectionsPanel({ variant, showSearch, showReimport, onConnectionsLoad
             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);
@@ -91,25 +83,15 @@ function ConnectionsPanel({ variant, showSearch, showReimport, onConnectionsLoad
         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))) }));
+        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))) }));
     }
     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 })] }))] }));
+                                    .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 })] }))] }));
     }
     // 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" }));
+    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 }))] }));
 }

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

@@ -0,0 +1,9 @@
+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;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/ui/badge.js

@@ -0,0 +1,26 @@
+"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', {
+    variants: {
+        variant: {
+            default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+            secondary: 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+            destructive: 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+            outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        },
+    },
+    defaultVariants: {
+        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 }));
+}

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+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;
+declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Button, buttonVariants };

package/dist/components/ui/button.js

@@ -0,0 +1,35 @@
+"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", {
+    variants: {
+        variant: {
+            default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
+            destructive: 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+            outline: 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+            secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
+            ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+            link: 'text-primary underline-offset-4 hover:underline',
+        },
+        size: {
+            default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+            sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+            lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+            icon: 'size-9',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        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 }));
+}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare function Card({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/components/ui/card.js

@@ -0,0 +1,32 @@
+"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");
+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 }));
+}
+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 }));
+}
+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 }));
+}
+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 }));
+}
+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 }));
+}
+function CardContent({ className, ...props }) {
+    return ((0, jsx_runtime_1.jsx)("div", { "data-slot": "card-content", className: (0, utils_1.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 }));
+}

package/dist/index.d.ts

@@ -8,4 +8,7 @@ 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 { 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 { cn } from './lib/utils';

package/dist/index.js

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

package/package.json

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