@frontmcp/ui 0.5.1 → 0.6.0

package/react/Alert.d.ts

@@ -0,0 +1,102 @@
+/**
+ * @file Alert.tsx
+ * @description React Alert component with static HTML rendering support.
+ *
+ * This is the single source of truth for the Alert component. It can be used:
+ * 1. As a React component: `<Alert variant="success" title="Success!">Message</Alert>`
+ * 2. As a static HTML generator: `await renderAlert({ variant: 'success', children: 'Message' })`
+ *
+ * @example React usage
+ * ```tsx
+ * import { Alert } from '@frontmcp/ui/react';
+ *
+ * function App() {
+ *   return (
+ *     <Alert variant="success" title="Success!">
+ *       Your changes have been saved.
+ *     </Alert>
+ *   );
+ * }
+ * ```
+ *
+ * @example Dismissible alert
+ * ```tsx
+ * <Alert variant="warning" dismissible onDismiss={() => setShow(false)}>
+ *   This action cannot be undone.
+ * </Alert>
+ * ```
+ *
+ * @example Static HTML generation
+ * ```typescript
+ * import { renderAlert } from '@frontmcp/ui/react';
+ *
+ * const html = await renderAlert({
+ *   variant: 'info',
+ *   title: 'Note',
+ *   children: 'Please review before submitting.',
+ * });
+ * ```
+ *
+ * @module @frontmcp/ui/react/Alert
+ */
+import type { ReactNode, ReactElement } from 'react';
+import { type AlertVariant } from '../styles/variants';
+/**
+ * Alert component props
+ */
+export interface AlertProps {
+    /** Alert variant */
+    variant?: AlertVariant;
+    /** Alert title */
+    title?: string;
+    /** Custom icon (React element) */
+    icon?: ReactNode;
+    /** Show default icon based on variant */
+    showIcon?: boolean;
+    /** Dismissible alert */
+    dismissible?: boolean;
+    /** Dismiss callback */
+    onDismiss?: () => void;
+    /** Additional CSS classes */
+    className?: string;
+    /** Alert content */
+    children?: ReactNode;
+}
+/**
+ * Alert component.
+ *
+ * A notification component for displaying important messages.
+ * Uses Tailwind CSS classes for styling.
+ */
+export declare function Alert({ variant, title, icon, showIcon, dismissible, onDismiss, className, children, }: AlertProps): ReactElement;
+/**
+ * Props for static render functions (children is always a string)
+ */
+export interface AlertRenderProps extends Omit<AlertProps, 'children' | 'icon' | 'onDismiss'> {
+    /** Alert content as string */
+    children?: string;
+    /** Icon as HTML string */
+    icon?: string;
+}
+/**
+ * Render Alert component to static HTML string (async).
+ *
+ * Uses React 19's prerender API for optimal static HTML generation.
+ *
+ * @param props - Alert props (with string children)
+ * @returns Promise resolving to HTML string
+ */
+export declare function renderAlert(props: AlertRenderProps): Promise<string>;
+/**
+ * Render Alert component to static HTML string (sync).
+ *
+ * Uses React's renderToStaticMarkup for synchronous rendering.
+ * Does NOT wait for Suspense boundaries.
+ *
+ * @param props - Alert props (with string children)
+ * @returns HTML string
+ */
+export declare function renderAlertSync(props: AlertRenderProps): string;
+export type { AlertVariant };
+export default Alert;
+//# sourceMappingURL=Alert.d.ts.map

package/react/Alert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/react/Alert.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EACL,KAAK,YAAY,EAMlB,MAAM,oBAAoB,CAAC;AAG5B;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,oBAAoB;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wBAAwB;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAgB,EAChB,KAAK,EACL,IAAI,EACJ,QAAe,EACf,WAAmB,EACnB,SAAS,EACT,SAAS,EACT,QAAQ,GACT,EAAE,UAAU,GAAG,YAAY,CAoC3B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,GAAG,WAAW,CAAC;IAC3F,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;GAOG;AACH,wBAAsB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,CAQ1E;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAQ/D;AAGD,YAAY,EAAE,YAAY,EAAE,CAAC;AAE7B,eAAe,KAAK,CAAC"}

package/react/Badge.d.ts

@@ -0,0 +1,101 @@
+/**
+ * @file Badge.tsx
+ * @description React Badge component with static HTML rendering support.
+ *
+ * This is the single source of truth for the Badge component. It can be used:
+ * 1. As a React component: `<Badge variant="success">Active</Badge>`
+ * 2. As a static HTML generator: `await renderBadge({ variant: 'success', children: 'Active' })`
+ *
+ * @example React usage
+ * ```tsx
+ * import { Badge } from '@frontmcp/ui/react';
+ *
+ * function App() {
+ *   return (
+ *     <Badge variant="success">Active</Badge>
+ *   );
+ * }
+ * ```
+ *
+ * @example Pill badge
+ * ```tsx
+ * <Badge variant="info" pill>
+ *   New Feature
+ * </Badge>
+ * ```
+ *
+ * @example Static HTML generation
+ * ```typescript
+ * import { renderBadge } from '@frontmcp/ui/react';
+ *
+ * const html = await renderBadge({
+ *   variant: 'success',
+ *   children: 'Active',
+ * });
+ * ```
+ *
+ * @module @frontmcp/ui/react/Badge
+ */
+import type { ReactNode, ReactElement } from 'react';
+import { type BadgeVariant, type BadgeSize } from '../styles/variants';
+/**
+ * Badge component props
+ */
+export interface BadgeProps {
+    /** Badge variant */
+    variant?: BadgeVariant;
+    /** Badge size */
+    size?: BadgeSize;
+    /** Rounded pill style */
+    pill?: boolean;
+    /** Icon before text (React element) */
+    icon?: ReactNode;
+    /** Dot indicator (no text) */
+    dot?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Removable badge */
+    removable?: boolean;
+    /** Remove callback */
+    onRemove?: () => void;
+    /** Badge content */
+    children?: ReactNode;
+}
+/**
+ * Badge component.
+ *
+ * A small status indicator or label component.
+ * Uses Tailwind CSS classes for styling.
+ */
+export declare function Badge({ variant, size, pill, icon, dot, className, removable, onRemove, children, }: BadgeProps): ReactElement;
+/**
+ * Props for static render functions (children is always a string)
+ */
+export interface BadgeRenderProps extends Omit<BadgeProps, 'children' | 'icon' | 'onRemove'> {
+    /** Badge content as string */
+    children?: string;
+    /** Icon as HTML string */
+    icon?: string;
+}
+/**
+ * Render Badge component to static HTML string (async).
+ *
+ * Uses React 19's prerender API for optimal static HTML generation.
+ *
+ * @param props - Badge props (with string children)
+ * @returns Promise resolving to HTML string
+ */
+export declare function renderBadge(props: BadgeRenderProps): Promise<string>;
+/**
+ * Render Badge component to static HTML string (sync).
+ *
+ * Uses React's renderToStaticMarkup for synchronous rendering.
+ * Does NOT wait for Suspense boundaries.
+ *
+ * @param props - Badge props (with string children)
+ * @returns HTML string
+ */
+export declare function renderBadgeSync(props: BadgeRenderProps): string;
+export type { BadgeVariant, BadgeSize };
+export default Badge;
+//# sourceMappingURL=Badge.d.ts.map

package/react/Badge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../src/react/Badge.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,SAAS,EAOf,MAAM,oBAAoB,CAAC;AAG5B;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,oBAAoB;IACpB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,iBAAiB;IACjB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,yBAAyB;IACzB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,8BAA8B;IAC9B,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sBAAsB;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sBAAsB;IACtB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,EACpB,OAAmB,EACnB,IAAW,EACX,IAAY,EACZ,IAAI,EACJ,GAAW,EACX,SAAS,EACT,SAAiB,EACjB,QAAQ,EACR,QAAQ,GACT,EAAE,UAAU,GAAG,YAAY,CA4C3B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;IAC1F,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;GAOG;AACH,wBAAsB,WAAW,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO,CAAC,MAAM,CAAC,CAQ1E;AAED;;;;;;;;GAQG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,GAAG,MAAM,CAQ/D;AAGD,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,CAAC;AAExC,eAAe,KAAK,CAAC"}

package/react/Button.d.ts

@@ -0,0 +1,109 @@
+/**
+ * @file Button.tsx
+ * @description React Button component with static HTML rendering support.
+ *
+ * This is the single source of truth for the Button component. It can be used:
+ * 1. As a React component: `<Button variant="primary">Click Me</Button>`
+ * 2. As a static HTML generator: `await renderButton({ variant: 'primary', children: 'Click Me' })`
+ *
+ * @example React usage
+ * ```tsx
+ * import { Button } from '@frontmcp/ui/react';
+ *
+ * function App() {
+ *   return (
+ *     <Button variant="primary" onClick={() => alert('Clicked!')}>
+ *       Click Me
+ *     </Button>
+ *   );
+ * }
+ * ```
+ *
+ * @example With loading state
+ * ```tsx
+ * <Button variant="primary" loading>
+ *   Saving...
+ * </Button>
+ * ```
+ *
+ * @example Static HTML generation
+ * ```typescript
+ * import { renderButton } from '@frontmcp/ui/react';
+ *
+ * const html = await renderButton({
+ *   variant: 'primary',
+ *   children: 'Submit',
+ * });
+ * ```
+ *
+ * @module @frontmcp/ui/react/Button
+ */
+import type { ReactNode, ReactElement } from 'react';
+import { type ButtonVariant, type ButtonSize } from '../styles/variants';
+/**
+ * Button component props
+ */
+export interface ButtonProps {
+    /** Button variant */
+    variant?: ButtonVariant;
+    /** Button size */
+    size?: ButtonSize;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Loading state */
+    loading?: boolean;
+    /** Full width */
+    fullWidth?: boolean;
+    /** Icon position */
+    iconPosition?: 'left' | 'right';
+    /** Icon content (React element) */
+    icon?: ReactNode;
+    /** Icon only (no text) */
+    iconOnly?: boolean;
+    /** Button type */
+    type?: 'button' | 'submit' | 'reset';
+    /** Additional CSS classes */
+    className?: string;
+    /** Click handler */
+    onClick?: () => void;
+    /** Button content */
+    children?: ReactNode;
+}
+/**
+ * Button component.
+ *
+ * A versatile button component with multiple variants, sizes, and states.
+ * Uses Tailwind CSS classes for styling.
+ */
+export declare function Button({ variant, size, disabled, loading, fullWidth, iconPosition, icon, iconOnly, type, className, onClick, children, }: ButtonProps): ReactElement;
+/**
+ * Props for static render functions (children is always a string)
+ */
+export interface ButtonRenderProps extends Omit<ButtonProps, 'children' | 'icon' | 'onClick'> {
+    /** Button content as string */
+    children?: string;
+    /** Icon as HTML string */
+    icon?: string;
+}
+/**
+ * Render Button component to static HTML string (async).
+ *
+ * Uses React 19's prerender API for optimal static HTML generation.
+ *
+ * @param props - Button props (with string children)
+ * @returns Promise resolving to HTML string
+ */
+export declare function renderButton(props: ButtonRenderProps): Promise<string>;
+/**
+ * Render Button component to static HTML string (sync).
+ *
+ * Uses React's renderToStaticMarkup for synchronous rendering.
+ * Does NOT wait for Suspense boundaries.
+ *
+ * @param props - Button props (with string children)
+ * @returns HTML string
+ */
+export declare function renderButtonSync(props: ButtonRenderProps): string;
+export type { ButtonVariant, ButtonSize };
+export default Button;
+//# sourceMappingURL=Button.d.ts.map

package/react/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/react/Button.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,UAAU,EAMhB,MAAM,oBAAoB,CAAC;AAG5B;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,kBAAkB;IAClB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,iBAAiB;IACjB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oBAAoB;IACpB,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,mCAAmC;IACnC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,MAAM,CAAC,EACrB,OAAmB,EACnB,IAAW,EACX,QAAgB,EAChB,OAAe,EACf,SAAiB,EACjB,YAAqB,EACrB,IAAI,EACJ,QAAgB,EAChB,IAAe,EACf,SAAS,EACT,OAAO,EACP,QAAQ,GACT,EAAE,WAAW,GAAG,YAAY,CAmB5B;AAED;;GAEG;AACH,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,CAAC;IAC3F,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;GAOG;AACH,wBAAsB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,CAQ5E;AAED;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,iBAAiB,GAAG,MAAM,CAQjE;AAGD,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,CAAC;AAE1C,eAAe,MAAM,CAAC"}

package/react/Card.d.ts

@@ -0,0 +1,104 @@
+/**
+ * @file Card.tsx
+ * @description React Card component with static HTML rendering support.
+ *
+ * This is the single source of truth for the Card component. It can be used:
+ * 1. As a React component: `<Card title="Hello">Content</Card>`
+ * 2. As a static HTML generator: `await renderCard({ title: 'Hello', children: 'Content' })`
+ *
+ * @example React usage
+ * ```tsx
+ * import { Card } from '@frontmcp/ui/react';
+ *
+ * function App() {
+ *   return (
+ *     <Card title="Welcome" variant="elevated">
+ *       <p>Card content goes here</p>
+ *     </Card>
+ *   );
+ * }
+ * ```
+ *
+ * @example Static HTML generation
+ * ```typescript
+ * import { renderCard } from '@frontmcp/ui/react';
+ *
+ * const html = await renderCard({
+ *   title: 'Product',
+ *   subtitle: 'Details',
+ *   variant: 'elevated',
+ *   children: '<p>Product description...</p>',
+ * });
+ * ```
+ *
+ * @module @frontmcp/ui/react/Card
+ */
+import type { ReactNode, ReactElement } from 'react';
+import { type CardVariant, type CardSize } from '../styles/variants';
+/**
+ * Card component props
+ */
+export interface CardProps {
+    /** Card title */
+    title?: string;
+    /** Card subtitle/description */
+    subtitle?: string;
+    /** Header actions (React elements) */
+    headerActions?: ReactNode;
+    /** Footer content (React elements) */
+    footer?: ReactNode;
+    /** Card variant */
+    variant?: CardVariant;
+    /** Card size (padding) */
+    size?: CardSize;
+    /** Additional CSS classes */
+    className?: string;
+    /** Card ID */
+    id?: string;
+    /** Clickable card (adds hover effects) */
+    clickable?: boolean;
+    /** Click handler URL */
+    href?: string;
+    /** Card content */
+    children?: ReactNode;
+}
+/**
+ * Card component.
+ *
+ * A versatile container component for grouping related content.
+ * Uses Tailwind CSS classes for styling.
+ */
+export declare function Card({ title, subtitle, headerActions, footer, variant, size, className, id, clickable, href, children, }: CardProps): ReactElement;
+/**
+ * Props for static render functions (children is always a string)
+ */
+export interface CardRenderProps extends Omit<CardProps, 'children' | 'headerActions' | 'footer'> {
+    /** Card content as HTML string */
+    children?: string;
+    /** Header actions as HTML string */
+    headerActions?: string;
+    /** Footer content as HTML string */
+    footer?: string;
+}
+/**
+ * Render Card component to static HTML string (async).
+ *
+ * Uses React 19's prerender API for optimal static HTML generation.
+ *
+ * @param props - Card props (with string children)
+ * @returns Promise resolving to HTML string
+ */
+export declare function renderCard(props: CardRenderProps): Promise<string>;
+/**
+ * Render Card component to static HTML string (sync).
+ *
+ * Uses React's renderToStaticMarkup for synchronous rendering.
+ * Does NOT wait for Suspense boundaries.
+ *
+ * @param props - Card props (with string children)
+ * @returns HTML string
+ */
+export declare function renderCardSync(props: CardRenderProps): string;
+export type { CardVariant, CardSize };
+export default Card;
+//# sourceMappingURL=Card.d.ts.map

package/react/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/react/Card.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAGH,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrD,OAAO,EAAE,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAiD,MAAM,oBAAoB,CAAC;AAGpH;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,sCAAsC;IACtC,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,sCAAsC;IACtC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,mBAAmB;IACnB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,wBAAwB;IACxB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EACnB,KAAK,EACL,QAAQ,EACR,aAAa,EACb,MAAM,EACN,OAAmB,EACnB,IAAW,EACX,SAAS,EACT,EAAE,EACF,SAAS,EACT,IAAI,EACJ,QAAQ,GACT,EAAE,SAAS,GAAG,YAAY,CAqC1B;AAED;;GAEG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,eAAe,GAAG,QAAQ,CAAC;IAC/F,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;GAOG;AACH,wBAAsB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,CAYxE;AAED;;;;;;;;GAQG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,CAY7D;AAGD,YAAY,EAAE,WAAW,EAAE,QAAQ,EAAE,CAAC;AAEtC,eAAe,IAAI,CAAC"}

package/react/hooks/context.d.ts

@@ -0,0 +1,179 @@
+/**
+ * @file context.tsx
+ * @description React context for FrontMcpBridge.
+ *
+ * Provides a context provider that initializes and exposes the MCP bridge
+ * to all child components via hooks.
+ *
+ * @example
+ * ```tsx
+ * import { McpBridgeProvider, useMcpBridge } from '@frontmcp/ui/react';
+ *
+ * function App() {
+ *   return (
+ *     <McpBridgeProvider>
+ *       <MyComponent />
+ *     </McpBridgeProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @module @frontmcp/ui/react/hooks
+ */
+import { type ReactNode } from 'react';
+import type { FrontMcpBridgeInterface, BridgeConfig, AdapterCapabilities, HostContext, DisplayMode } from '../../bridge/types';
+/**
+ * MCP Bridge context value.
+ */
+export interface McpBridgeContextValue {
+    /** The bridge instance (null until initialized) */
+    bridge: FrontMcpBridgeInterface | null;
+    /** Whether the bridge is currently initializing */
+    loading: boolean;
+    /** Initialization error, if any */
+    error: Error | null;
+    /** Whether the bridge is initialized and ready */
+    ready: boolean;
+    /** Current adapter ID */
+    adapterId: string | undefined;
+    /** Current adapter capabilities */
+    capabilities: AdapterCapabilities | undefined;
+}
+/**
+ * Props for McpBridgeProvider.
+ */
+export interface McpBridgeProviderProps {
+    /** Child components */
+    children: ReactNode;
+    /** Bridge configuration */
+    config?: BridgeConfig;
+    /** Callback when bridge is ready */
+    onReady?: (bridge: FrontMcpBridgeInterface) => void;
+    /** Callback when bridge initialization fails */
+    onError?: (error: Error) => void;
+}
+/**
+ * Provider component that initializes the MCP bridge.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <McpBridgeProvider>
+ *   <App />
+ * </McpBridgeProvider>
+ * ```
+ *
+ * @example With configuration
+ * ```tsx
+ * <McpBridgeProvider
+ *   config={{ debug: true, forceAdapter: 'generic' }}
+ *   onReady={(bridge) => console.log('Bridge ready:', bridge.adapterId)}
+ *   onError={(err) => console.error('Bridge error:', err)}
+ * >
+ *   <App />
+ * </McpBridgeProvider>
+ * ```
+ */
+export declare function McpBridgeProvider({ children, config, onReady, onError }: McpBridgeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the MCP bridge context.
+ *
+ * During client-side rendering, must be used within a McpBridgeProvider.
+ * During SSR (outside of provider), returns a default "not ready" state.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { bridge, loading, error, ready } = useMcpBridgeContext();
+ *
+ *   if (loading) return <div>Loading...</div>;
+ *   if (error) return <div>Error: {error.message}</div>;
+ *   if (!ready) return null;
+ *
+ *   return <div>Adapter: {bridge.adapterId}</div>;
+ * }
+ * ```
+ */
+export declare function useMcpBridgeContext(): McpBridgeContextValue;
+/**
+ * Hook to get the MCP bridge instance.
+ * Returns null while loading or if not initialized.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const bridge = useMcpBridge();
+ *
+ *   if (!bridge) return <div>Loading...</div>;
+ *
+ *   const theme = bridge.getTheme();
+ *   const input = bridge.getToolInput();
+ *
+ *   return <div>Theme: {theme}</div>;
+ * }
+ * ```
+ */
+export declare function useMcpBridge(): FrontMcpBridgeInterface | null;
+/**
+ * Hook to get the current theme from the bridge.
+ * Automatically updates when theme changes.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const theme = useTheme();
+ *   return <div className={theme === 'dark' ? 'bg-black' : 'bg-white'}>...</div>;
+ * }
+ * ```
+ */
+export declare function useTheme(): 'light' | 'dark';
+/**
+ * Hook to get the current display mode from the bridge.
+ * Automatically updates when display mode changes.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const displayMode = useDisplayMode();
+ *   return <div>Mode: {displayMode}</div>;
+ * }
+ * ```
+ */
+export declare function useDisplayMode(): DisplayMode;
+/**
+ * Hook to get the full host context from the bridge.
+ * Automatically updates when context changes.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const context = useHostContext();
+ *   return (
+ *     <div>
+ *       Theme: {context?.theme}
+ *       Locale: {context?.locale}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useHostContext(): HostContext | null;
+/**
+ * Hook to check if the bridge has a specific capability.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const canCallTools = useCapability('canCallTools');
+ *   const canSendMessages = useCapability('canSendMessages');
+ *
+ *   return (
+ *     <div>
+ *       {canCallTools && <button>Call Tool</button>}
+ *       {canSendMessages && <button>Send Message</button>}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+export declare function useCapability(cap: keyof AdapterCapabilities): boolean;
+//# sourceMappingURL=context.d.ts.map

package/react/hooks/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/context.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,EAAwE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7G,OAAO,KAAK,EACV,uBAAuB,EACvB,YAAY,EACZ,mBAAmB,EACnB,WAAW,EACX,WAAW,EACZ,MAAM,oBAAoB,CAAC;AAO5B;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,mDAAmD;IACnD,MAAM,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACvC,mDAAmD;IACnD,OAAO,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,kDAAkD;IAClD,KAAK,EAAE,OAAO,CAAC;IACf,yBAAyB;IACzB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,mCAAmC;IACnC,YAAY,EAAE,mBAAmB,GAAG,SAAS,CAAC;CAC/C;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,uBAAuB;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,2BAA2B;IAC3B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,oCAAoC;IACpC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,uBAAuB,KAAK,IAAI,CAAC;IACpD,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CAClC;AAQD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,EAAE,EAAE,sBAAsB,2CAoD/F;AAoBD;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,mBAAmB,IAAI,qBAAqB,CAS3D;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,YAAY,IAAI,uBAAuB,GAAG,IAAI,CAG7D;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,QAAQ,IAAI,OAAO,GAAG,MAAM,CAqB3C;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,IAAI,WAAW,CAqB5C;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,IAAI,WAAW,GAAG,IAAI,CAsBnD;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,mBAAmB,GAAG,OAAO,CAGrE"}

package/react/hooks/index.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @file index.ts
+ * @description React hooks for FrontMCP bridge and tools.
+ *
+ * @example Provider setup
+ * ```tsx
+ * import { McpBridgeProvider } from '@frontmcp/ui/react';
+ *
+ * function App() {
+ *   return (
+ *     <McpBridgeProvider>
+ *       <MyWidget />
+ *     </McpBridgeProvider>
+ *   );
+ * }
+ * ```
+ *
+ * @example Using hooks
+ * ```tsx
+ * import {
+ *   useMcpBridge,
+ *   useToolInput,
+ *   useToolOutput,
+ *   useCallTool,
+ *   useTheme,
+ * } from '@frontmcp/ui/react';
+ *
+ * function MyWidget() {
+ *   const bridge = useMcpBridge();
+ *   const input = useToolInput<{ location: string }>();
+ *   const theme = useTheme();
+ *   const [callTool, { data, loading }] = useCallTool('my_tool');
+ *
+ *   return <div>...</div>;
+ * }
+ * ```
+ *
+ * @module @frontmcp/ui/react/hooks
+ */
+export { McpBridgeProvider, useMcpBridgeContext, useMcpBridge, useTheme, useDisplayMode, useHostContext, useCapability, type McpBridgeContextValue, type McpBridgeProviderProps, } from './context';
+export { useToolInput, useToolOutput, useStructuredContent, useCallTool, useToolCalls, useSendMessage, useOpenLink, type ToolState, type UseCallToolOptions, type UseCallToolReturn, } from './tools';
+//# sourceMappingURL=index.d.ts.map

package/react/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/react/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAGH,OAAO,EACL,iBAAiB,EACjB,mBAAmB,EACnB,YAAY,EACZ,QAAQ,EACR,cAAc,EACd,cAAc,EACd,aAAa,EACb,KAAK,qBAAqB,EAC1B,KAAK,sBAAsB,GAC5B,MAAM,WAAW,CAAC;AAGnB,OAAO,EACL,YAAY,EACZ,aAAa,EACb,oBAAoB,EACpB,WAAW,EACX,YAAY,EACZ,cAAc,EACd,WAAW,EACX,KAAK,SAAS,EACd,KAAK,kBAAkB,EACvB,KAAK,iBAAiB,GACvB,MAAM,SAAS,CAAC"}