@frontmcp/ui 0.5.0

package/src/pages/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Page Templates Module
+ *
+ * Minimal page templates that complement SDK auth flows.
+ * Login/Register flows are handled by @frontmcp/sdk auth system.
+ */
+export { type ClientInfo, type UserInfo, type ConsentPageOptions, type ConsentSuccessOptions, type ConsentDeniedOptions, consentPage, consentSuccessPage, consentDeniedPage, } from './consent';
+export { type ErrorPageOptions, type OAuthErrorPageOptions, errorPage, notFoundPage, forbiddenPage, unauthorizedPage, serverErrorPage, maintenancePage, rateLimitPage, offlinePage, sessionExpiredPage, oauthErrorPage, } from './error';

package/src/pages/index.js

@@ -0,0 +1,27 @@
+"use strict";
+/**
+ * Page Templates Module
+ *
+ * Minimal page templates that complement SDK auth flows.
+ * Login/Register flows are handled by @frontmcp/sdk auth system.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.oauthErrorPage = exports.sessionExpiredPage = exports.offlinePage = exports.rateLimitPage = exports.maintenancePage = exports.serverErrorPage = exports.unauthorizedPage = exports.forbiddenPage = exports.notFoundPage = exports.errorPage = exports.consentDeniedPage = exports.consentSuccessPage = exports.consentPage = void 0;
+// Consent pages (OAuth/OpenID consent flows)
+var consent_1 = require("./consent");
+Object.defineProperty(exports, "consentPage", { enumerable: true, get: function () { return consent_1.consentPage; } });
+Object.defineProperty(exports, "consentSuccessPage", { enumerable: true, get: function () { return consent_1.consentSuccessPage; } });
+Object.defineProperty(exports, "consentDeniedPage", { enumerable: true, get: function () { return consent_1.consentDeniedPage; } });
+// Error pages (generic error display)
+var error_1 = require("./error");
+Object.defineProperty(exports, "errorPage", { enumerable: true, get: function () { return error_1.errorPage; } });
+Object.defineProperty(exports, "notFoundPage", { enumerable: true, get: function () { return error_1.notFoundPage; } });
+Object.defineProperty(exports, "forbiddenPage", { enumerable: true, get: function () { return error_1.forbiddenPage; } });
+Object.defineProperty(exports, "unauthorizedPage", { enumerable: true, get: function () { return error_1.unauthorizedPage; } });
+Object.defineProperty(exports, "serverErrorPage", { enumerable: true, get: function () { return error_1.serverErrorPage; } });
+Object.defineProperty(exports, "maintenancePage", { enumerable: true, get: function () { return error_1.maintenancePage; } });
+Object.defineProperty(exports, "rateLimitPage", { enumerable: true, get: function () { return error_1.rateLimitPage; } });
+Object.defineProperty(exports, "offlinePage", { enumerable: true, get: function () { return error_1.offlinePage; } });
+Object.defineProperty(exports, "sessionExpiredPage", { enumerable: true, get: function () { return error_1.sessionExpiredPage; } });
+Object.defineProperty(exports, "oauthErrorPage", { enumerable: true, get: function () { return error_1.oauthErrorPage; } });
+//# sourceMappingURL=index.js.map

package/src/pages/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pages/index.ts"],"names":[],"mappings":";AAAA;;;;;GAKG;;;AAEH,6CAA6C;AAC7C,qCASmB;AAHjB,sGAAA,WAAW,OAAA;AACX,6GAAA,kBAAkB,OAAA;AAClB,4GAAA,iBAAiB,OAAA;AAGnB,sCAAsC;AACtC,iCAaiB;AAVf,kGAAA,SAAS,OAAA;AACT,qGAAA,YAAY,OAAA;AACZ,sGAAA,aAAa,OAAA;AACb,yGAAA,gBAAgB,OAAA;AAChB,wGAAA,eAAe,OAAA;AACf,wGAAA,eAAe,OAAA;AACf,sGAAA,aAAa,OAAA;AACb,oGAAA,WAAW,OAAA;AACX,2GAAA,kBAAkB,OAAA;AAClB,uGAAA,cAAc,OAAA","sourcesContent":["/**\n * Page Templates Module\n *\n * Minimal page templates that complement SDK auth flows.\n * Login/Register flows are handled by @frontmcp/sdk auth system.\n */\n\n// Consent pages (OAuth/OpenID consent flows)\nexport {\n  type ClientInfo,\n  type UserInfo,\n  type ConsentPageOptions,\n  type ConsentSuccessOptions,\n  type ConsentDeniedOptions,\n  consentPage,\n  consentSuccessPage,\n  consentDeniedPage,\n} from './consent';\n\n// Error pages (generic error display)\nexport {\n  type ErrorPageOptions,\n  type OAuthErrorPageOptions,\n  errorPage,\n  notFoundPage,\n  forbiddenPage,\n  unauthorizedPage,\n  serverErrorPage,\n  maintenancePage,\n  rateLimitPage,\n  offlinePage,\n  sessionExpiredPage,\n  oauthErrorPage,\n} from './error';\n"]}

package/src/react/Alert.d.ts

@@ -0,0 +1,101 @@
+/**
+ * @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;

package/src/react/Alert.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = Alert;
+exports.renderAlert = renderAlert;
+exports.renderAlertSync = renderAlertSync;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const variants_1 = require("../styles/variants");
+const prerender_1 = require("../render/prerender");
+/**
+ * Alert component.
+ *
+ * A notification component for displaying important messages.
+ * Uses Tailwind CSS classes for styling.
+ */
+function Alert({ variant = 'info', title, icon, showIcon = true, dismissible = false, onDismiss, className, children, }) {
+    const variantStyles = (0, variants_1.getAlertVariantClasses)(variant);
+    const allClasses = (0, variants_1.cn)(variants_1.ALERT_BASE_CLASSES, variantStyles.container, className);
+    // Use custom icon or default variant icon
+    const iconContent = icon ||
+        (showIcon ? ((0, jsx_runtime_1.jsx)("span", { className: (0, variants_1.cn)('flex-shrink-0', variantStyles.icon), dangerouslySetInnerHTML: { __html: variants_1.ALERT_ICONS[variant] } })) : null);
+    return ((0, jsx_runtime_1.jsx)("div", { className: allClasses, role: "alert", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex", children: [iconContent && (0, jsx_runtime_1.jsx)("div", { className: "flex-shrink-0 mr-3", children: iconContent }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [title && (0, jsx_runtime_1.jsx)("h4", { className: "font-semibold mb-1", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm", children: children })] }), dismissible && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "flex-shrink-0 ml-3 hover:opacity-70 transition-opacity", "aria-label": "Dismiss", onClick: onDismiss, children: (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: variants_1.CLOSE_ICON } }) }))] }) }));
+}
+/**
+ * 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
+ */
+async function renderAlert(props) {
+    const { children, icon, ...rest } = props;
+    const element = ((0, jsx_runtime_1.jsx)(Alert, { ...rest, icon: icon ? (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : undefined, children: children }));
+    return (0, prerender_1.renderToString)(element);
+}
+/**
+ * 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
+ */
+function renderAlertSync(props) {
+    const { children, icon, ...rest } = props;
+    const element = ((0, jsx_runtime_1.jsx)(Alert, { ...rest, icon: icon ? (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : undefined, children: children }));
+    return (0, prerender_1.renderToStringSync)(element);
+}
+exports.default = Alert;
+//# sourceMappingURL=Alert.js.map

package/src/react/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../../src/react/Alert.tsx"],"names":[],"mappings":";;AAkFA,sBA6CC;AAoBD,kCAQC;AAWD,0CAQC;;AAlID,iDAO4B;AAC5B,mDAAyE;AAwBzE;;;;;GAKG;AACH,SAAgB,KAAK,CAAC,EACpB,OAAO,GAAG,MAAM,EAChB,KAAK,EACL,IAAI,EACJ,QAAQ,GAAG,IAAI,EACf,WAAW,GAAG,KAAK,EACnB,SAAS,EACT,SAAS,EACT,QAAQ,GACG;IACX,MAAM,aAAa,GAAG,IAAA,iCAAsB,EAAC,OAAO,CAAC,CAAC;IAEtD,MAAM,UAAU,GAAG,IAAA,aAAE,EAAC,6BAAkB,EAAE,aAAa,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;IAE9E,0CAA0C;IAC1C,MAAM,WAAW,GACf,IAAI;QACJ,CAAC,QAAQ,CAAC,CAAC,CAAC,CACV,iCACE,SAAS,EAAE,IAAA,aAAE,EAAC,eAAe,EAAE,aAAa,CAAC,IAAI,CAAC,EAClD,uBAAuB,EAAE,EAAE,MAAM,EAAE,sBAAW,CAAC,OAAO,CAAC,EAAE,GACzD,CACH,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAEZ,OAAO,CACL,gCAAK,SAAS,EAAE,UAAU,EAAE,IAAI,EAAC,OAAO,YACtC,iCAAK,SAAS,EAAC,MAAM,aAClB,WAAW,IAAI,gCAAK,SAAS,EAAC,oBAAoB,YAAE,WAAW,GAAO,EACvE,iCAAK,SAAS,EAAC,QAAQ,aACpB,KAAK,IAAI,+BAAI,SAAS,EAAC,oBAAoB,YAAE,KAAK,GAAM,EACzD,gCAAK,SAAS,EAAC,SAAS,YAAE,QAAQ,GAAO,IACrC,EACL,WAAW,IAAI,CACd,mCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wDAAwD,gBACvD,SAAS,EACpB,OAAO,EAAE,SAAS,YAElB,iCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,qBAAU,EAAE,GAAI,GAClD,CACV,IACG,GACF,CACP,CAAC;AACJ,CAAC;AAYD;;;;;;;GAOG;AACI,KAAK,UAAU,WAAW,CAAC,KAAuB;IACvD,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC1C,MAAM,OAAO,GAAG,CACd,uBAAC,KAAK,OAAK,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,iCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAAC,CAAC,CAAC,SAAS,YAC1F,QAAQ,GACH,CACT,CAAC;IACF,OAAO,IAAA,0BAAc,EAAC,OAAO,CAAC,CAAC;AACjC,CAAC;AAED;;;;;;;;GAQG;AACH,SAAgB,eAAe,CAAC,KAAuB;IACrD,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC1C,MAAM,OAAO,GAAG,CACd,uBAAC,KAAK,OAAK,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,iCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAAC,CAAC,CAAC,SAAS,YAC1F,QAAQ,GACH,CACT,CAAC;IACF,OAAO,IAAA,8BAAkB,EAAC,OAAO,CAAC,CAAC;AACrC,CAAC;AAKD,kBAAe,KAAK,CAAC","sourcesContent":["/**\n * @file Alert.tsx\n * @description React Alert component with static HTML rendering support.\n *\n * This is the single source of truth for the Alert component. It can be used:\n * 1. As a React component: `<Alert variant=\"success\" title=\"Success!\">Message</Alert>`\n * 2. As a static HTML generator: `await renderAlert({ variant: 'success', children: 'Message' })`\n *\n * @example React usage\n * ```tsx\n * import { Alert } from '@frontmcp/ui/react';\n *\n * function App() {\n *   return (\n *     <Alert variant=\"success\" title=\"Success!\">\n *       Your changes have been saved.\n *     </Alert>\n *   );\n * }\n * ```\n *\n * @example Dismissible alert\n * ```tsx\n * <Alert variant=\"warning\" dismissible onDismiss={() => setShow(false)}>\n *   This action cannot be undone.\n * </Alert>\n * ```\n *\n * @example Static HTML generation\n * ```typescript\n * import { renderAlert } from '@frontmcp/ui/react';\n *\n * const html = await renderAlert({\n *   variant: 'info',\n *   title: 'Note',\n *   children: 'Please review before submitting.',\n * });\n * ```\n *\n * @module @frontmcp/ui/react/Alert\n */\n\nimport React from 'react';\nimport type { ReactNode, ReactElement } from 'react';\nimport {\n  type AlertVariant,\n  getAlertVariantClasses,\n  ALERT_BASE_CLASSES,\n  ALERT_ICONS,\n  CLOSE_ICON,\n  cn,\n} from '../styles/variants';\nimport { renderToString, renderToStringSync } from '../render/prerender';\n\n/**\n * Alert component props\n */\nexport interface AlertProps {\n  /** Alert variant */\n  variant?: AlertVariant;\n  /** Alert title */\n  title?: string;\n  /** Custom icon (React element) */\n  icon?: ReactNode;\n  /** Show default icon based on variant */\n  showIcon?: boolean;\n  /** Dismissible alert */\n  dismissible?: boolean;\n  /** Dismiss callback */\n  onDismiss?: () => void;\n  /** Additional CSS classes */\n  className?: string;\n  /** Alert content */\n  children?: ReactNode;\n}\n\n/**\n * Alert component.\n *\n * A notification component for displaying important messages.\n * Uses Tailwind CSS classes for styling.\n */\nexport function Alert({\n  variant = 'info',\n  title,\n  icon,\n  showIcon = true,\n  dismissible = false,\n  onDismiss,\n  className,\n  children,\n}: AlertProps): ReactElement {\n  const variantStyles = getAlertVariantClasses(variant);\n\n  const allClasses = cn(ALERT_BASE_CLASSES, variantStyles.container, className);\n\n  // Use custom icon or default variant icon\n  const iconContent =\n    icon ||\n    (showIcon ? (\n      <span\n        className={cn('flex-shrink-0', variantStyles.icon)}\n        dangerouslySetInnerHTML={{ __html: ALERT_ICONS[variant] }}\n      />\n    ) : null);\n\n  return (\n    <div className={allClasses} role=\"alert\">\n      <div className=\"flex\">\n        {iconContent && <div className=\"flex-shrink-0 mr-3\">{iconContent}</div>}\n        <div className=\"flex-1\">\n          {title && <h4 className=\"font-semibold mb-1\">{title}</h4>}\n          <div className=\"text-sm\">{children}</div>\n        </div>\n        {dismissible && (\n          <button\n            type=\"button\"\n            className=\"flex-shrink-0 ml-3 hover:opacity-70 transition-opacity\"\n            aria-label=\"Dismiss\"\n            onClick={onDismiss}\n          >\n            <span dangerouslySetInnerHTML={{ __html: CLOSE_ICON }} />\n          </button>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/**\n * Props for static render functions (children is always a string)\n */\nexport interface AlertRenderProps extends Omit<AlertProps, 'children' | 'icon' | 'onDismiss'> {\n  /** Alert content as string */\n  children?: string;\n  /** Icon as HTML string */\n  icon?: string;\n}\n\n/**\n * Render Alert component to static HTML string (async).\n *\n * Uses React 19's prerender API for optimal static HTML generation.\n *\n * @param props - Alert props (with string children)\n * @returns Promise resolving to HTML string\n */\nexport async function renderAlert(props: AlertRenderProps): Promise<string> {\n  const { children, icon, ...rest } = props;\n  const element = (\n    <Alert {...rest} icon={icon ? <span dangerouslySetInnerHTML={{ __html: icon }} /> : undefined}>\n      {children}\n    </Alert>\n  );\n  return renderToString(element);\n}\n\n/**\n * Render Alert component to static HTML string (sync).\n *\n * Uses React's renderToStaticMarkup for synchronous rendering.\n * Does NOT wait for Suspense boundaries.\n *\n * @param props - Alert props (with string children)\n * @returns HTML string\n */\nexport function renderAlertSync(props: AlertRenderProps): string {\n  const { children, icon, ...rest } = props;\n  const element = (\n    <Alert {...rest} icon={icon ? <span dangerouslySetInnerHTML={{ __html: icon }} /> : undefined}>\n      {children}\n    </Alert>\n  );\n  return renderToStringSync(element);\n}\n\n// Re-export types\nexport type { AlertVariant };\n\nexport default Alert;\n"]}

package/src/react/Badge.d.ts

@@ -0,0 +1,100 @@
+/**
+ * @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;

package/src/react/Badge.js

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = Badge;
+exports.renderBadge = renderBadge;
+exports.renderBadgeSync = renderBadgeSync;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const variants_1 = require("../styles/variants");
+const prerender_1 = require("../render/prerender");
+/**
+ * Badge component.
+ *
+ * A small status indicator or label component.
+ * Uses Tailwind CSS classes for styling.
+ */
+function Badge({ variant = 'default', size = 'md', pill = false, icon, dot = false, className, removable = false, onRemove, children, }) {
+    // Handle dot badge (status indicator)
+    if (dot) {
+        const dotClasses = (0, variants_1.cn)('inline-block rounded-full', (0, variants_1.getBadgeDotSizeClasses)(size), (0, variants_1.getBadgeDotVariantClasses)(variant), className);
+        const label = typeof children === 'string' ? children : undefined;
+        return (0, jsx_runtime_1.jsx)("span", { className: dotClasses, "aria-label": label, title: label });
+    }
+    const variantClasses = (0, variants_1.getBadgeVariantClasses)(variant);
+    const sizeClasses = (0, variants_1.getBadgeSizeClasses)(size);
+    const baseClasses = (0, variants_1.cn)('inline-flex items-center font-medium', pill ? 'rounded-full' : 'rounded-md', variantClasses, sizeClasses, className);
+    return ((0, jsx_runtime_1.jsxs)("span", { className: baseClasses, children: [icon && (0, jsx_runtime_1.jsx)("span", { className: "mr-1", children: icon }), children, removable && ((0, jsx_runtime_1.jsx)("button", { type: "button", className: "ml-1.5 -mr-1 hover:opacity-70 transition-opacity", "aria-label": "Remove", onClick: onRemove, children: (0, jsx_runtime_1.jsx)("svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) }) }))] }));
+}
+/**
+ * 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
+ */
+async function renderBadge(props) {
+    const { children, icon, ...rest } = props;
+    const element = ((0, jsx_runtime_1.jsx)(Badge, { ...rest, icon: icon ? (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : undefined, children: children }));
+    return (0, prerender_1.renderToString)(element);
+}
+/**
+ * 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
+ */
+function renderBadgeSync(props) {
+    const { children, icon, ...rest } = props;
+    const element = ((0, jsx_runtime_1.jsx)(Badge, { ...rest, icon: icon ? (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : undefined, children: children }));
+    return (0, prerender_1.renderToStringSync)(element);
+}
+exports.default = Badge;
+//# sourceMappingURL=Badge.js.map

package/src/react/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/react/Badge.tsx"],"names":[],"mappings":";;AAmFA,sBAsDC;AAoBD,kCAQC;AAWD,0CAQC;;AA/ID,iDAS4B;AAC5B,mDAAyE;AA0BzE;;;;;GAKG;AACH,SAAgB,KAAK,CAAC,EACpB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,KAAK,EACZ,IAAI,EACJ,GAAG,GAAG,KAAK,EACX,SAAS,EACT,SAAS,GAAG,KAAK,EACjB,QAAQ,EACR,QAAQ,GACG;IACX,sCAAsC;IACtC,IAAI,GAAG,EAAE,CAAC;QACR,MAAM,UAAU,GAAG,IAAA,aAAE,EACnB,2BAA2B,EAC3B,IAAA,iCAAsB,EAAC,IAAI,CAAC,EAC5B,IAAA,oCAAyB,EAAC,OAAO,CAAC,EAClC,SAAS,CACV,CAAC;QAEF,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;QAElE,OAAO,iCAAM,SAAS,EAAE,UAAU,gBAAc,KAAK,EAAE,KAAK,EAAE,KAAK,GAAI,CAAC;IAC1E,CAAC;IAED,MAAM,cAAc,GAAG,IAAA,iCAAsB,EAAC,OAAO,CAAC,CAAC;IACvD,MAAM,WAAW,GAAG,IAAA,8BAAmB,EAAC,IAAI,CAAC,CAAC;IAE9C,MAAM,WAAW,GAAG,IAAA,aAAE,EACpB,sCAAsC,EACtC,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,EACpC,cAAc,EACd,WAAW,EACX,SAAS,CACV,CAAC;IAEF,OAAO,CACL,kCAAM,SAAS,EAAE,WAAW,aACzB,IAAI,IAAI,iCAAM,SAAS,EAAC,MAAM,YAAE,IAAI,GAAQ,EAC5C,QAAQ,EACR,SAAS,IAAI,CACZ,mCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,kDAAkD,gBACjD,QAAQ,EACnB,OAAO,EAAE,QAAQ,YAEjB,gCAAK,SAAS,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,YAC5E,iCAAM,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO,EAAC,WAAW,EAAC,GAAG,EAAC,CAAC,EAAC,sBAAsB,GAAG,GAC1F,GACC,CACV,IACI,CACR,CAAC;AACJ,CAAC;AAYD;;;;;;;GAOG;AACI,KAAK,UAAU,WAAW,CAAC,KAAuB;IACvD,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC1C,MAAM,OAAO,GAAG,CACd,uBAAC,KAAK,OAAK,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,iCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAAC,CAAC,CAAC,SAAS,YAC1F,QAAQ,GACH,CACT,CAAC;IACF,OAAO,IAAA,0BAAc,EAAC,OAAO,CAAC,CAAC;AACjC,CAAC;AAED;;;;;;;;GAQG;AACH,SAAgB,eAAe,CAAC,KAAuB;IACrD,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC1C,MAAM,OAAO,GAAG,CACd,uBAAC,KAAK,OAAK,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,iCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAAC,CAAC,CAAC,SAAS,YAC1F,QAAQ,GACH,CACT,CAAC;IACF,OAAO,IAAA,8BAAkB,EAAC,OAAO,CAAC,CAAC;AACrC,CAAC;AAKD,kBAAe,KAAK,CAAC","sourcesContent":["/**\n * @file Badge.tsx\n * @description React Badge component with static HTML rendering support.\n *\n * This is the single source of truth for the Badge component. It can be used:\n * 1. As a React component: `<Badge variant=\"success\">Active</Badge>`\n * 2. As a static HTML generator: `await renderBadge({ variant: 'success', children: 'Active' })`\n *\n * @example React usage\n * ```tsx\n * import { Badge } from '@frontmcp/ui/react';\n *\n * function App() {\n *   return (\n *     <Badge variant=\"success\">Active</Badge>\n *   );\n * }\n * ```\n *\n * @example Pill badge\n * ```tsx\n * <Badge variant=\"info\" pill>\n *   New Feature\n * </Badge>\n * ```\n *\n * @example Static HTML generation\n * ```typescript\n * import { renderBadge } from '@frontmcp/ui/react';\n *\n * const html = await renderBadge({\n *   variant: 'success',\n *   children: 'Active',\n * });\n * ```\n *\n * @module @frontmcp/ui/react/Badge\n */\n\nimport React from 'react';\nimport type { ReactNode, ReactElement } from 'react';\nimport {\n  type BadgeVariant,\n  type BadgeSize,\n  getBadgeVariantClasses,\n  getBadgeSizeClasses,\n  getBadgeDotSizeClasses,\n  getBadgeDotVariantClasses,\n  CLOSE_ICON,\n  cn,\n} from '../styles/variants';\nimport { renderToString, renderToStringSync } from '../render/prerender';\n\n/**\n * Badge component props\n */\nexport interface BadgeProps {\n  /** Badge variant */\n  variant?: BadgeVariant;\n  /** Badge size */\n  size?: BadgeSize;\n  /** Rounded pill style */\n  pill?: boolean;\n  /** Icon before text (React element) */\n  icon?: ReactNode;\n  /** Dot indicator (no text) */\n  dot?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Removable badge */\n  removable?: boolean;\n  /** Remove callback */\n  onRemove?: () => void;\n  /** Badge content */\n  children?: ReactNode;\n}\n\n/**\n * Badge component.\n *\n * A small status indicator or label component.\n * Uses Tailwind CSS classes for styling.\n */\nexport function Badge({\n  variant = 'default',\n  size = 'md',\n  pill = false,\n  icon,\n  dot = false,\n  className,\n  removable = false,\n  onRemove,\n  children,\n}: BadgeProps): ReactElement {\n  // Handle dot badge (status indicator)\n  if (dot) {\n    const dotClasses = cn(\n      'inline-block rounded-full',\n      getBadgeDotSizeClasses(size),\n      getBadgeDotVariantClasses(variant),\n      className,\n    );\n\n    const label = typeof children === 'string' ? children : undefined;\n\n    return <span className={dotClasses} aria-label={label} title={label} />;\n  }\n\n  const variantClasses = getBadgeVariantClasses(variant);\n  const sizeClasses = getBadgeSizeClasses(size);\n\n  const baseClasses = cn(\n    'inline-flex items-center font-medium',\n    pill ? 'rounded-full' : 'rounded-md',\n    variantClasses,\n    sizeClasses,\n    className,\n  );\n\n  return (\n    <span className={baseClasses}>\n      {icon && <span className=\"mr-1\">{icon}</span>}\n      {children}\n      {removable && (\n        <button\n          type=\"button\"\n          className=\"ml-1.5 -mr-1 hover:opacity-70 transition-opacity\"\n          aria-label=\"Remove\"\n          onClick={onRemove}\n        >\n          <svg className=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth=\"2\" d=\"M6 18L18 6M6 6l12 12\" />\n          </svg>\n        </button>\n      )}\n    </span>\n  );\n}\n\n/**\n * Props for static render functions (children is always a string)\n */\nexport interface BadgeRenderProps extends Omit<BadgeProps, 'children' | 'icon' | 'onRemove'> {\n  /** Badge content as string */\n  children?: string;\n  /** Icon as HTML string */\n  icon?: string;\n}\n\n/**\n * Render Badge component to static HTML string (async).\n *\n * Uses React 19's prerender API for optimal static HTML generation.\n *\n * @param props - Badge props (with string children)\n * @returns Promise resolving to HTML string\n */\nexport async function renderBadge(props: BadgeRenderProps): Promise<string> {\n  const { children, icon, ...rest } = props;\n  const element = (\n    <Badge {...rest} icon={icon ? <span dangerouslySetInnerHTML={{ __html: icon }} /> : undefined}>\n      {children}\n    </Badge>\n  );\n  return renderToString(element);\n}\n\n/**\n * Render Badge component to static HTML string (sync).\n *\n * Uses React's renderToStaticMarkup for synchronous rendering.\n * Does NOT wait for Suspense boundaries.\n *\n * @param props - Badge props (with string children)\n * @returns HTML string\n */\nexport function renderBadgeSync(props: BadgeRenderProps): string {\n  const { children, icon, ...rest } = props;\n  const element = (\n    <Badge {...rest} icon={icon ? <span dangerouslySetInnerHTML={{ __html: icon }} /> : undefined}>\n      {children}\n    </Badge>\n  );\n  return renderToStringSync(element);\n}\n\n// Re-export types\nexport type { BadgeVariant, BadgeSize };\n\nexport default Badge;\n"]}

package/src/react/Button.d.ts

@@ -0,0 +1,108 @@
+/**
+ * @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;

package/src/react/Button.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = Button;
+exports.renderButton = renderButton;
+exports.renderButtonSync = renderButtonSync;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const variants_1 = require("../styles/variants");
+const prerender_1 = require("../render/prerender");
+/**
+ * Button component.
+ *
+ * A versatile button component with multiple variants, sizes, and states.
+ * Uses Tailwind CSS classes for styling.
+ */
+function Button({ variant = 'primary', size = 'md', disabled = false, loading = false, fullWidth = false, iconPosition = 'left', icon, iconOnly = false, type = 'button', className, onClick, children, }) {
+    const variantClasses = (0, variants_1.getButtonVariantClasses)(variant);
+    const sizeClasses = (0, variants_1.getButtonSizeClasses)(size, iconOnly);
+    const disabledClasses = disabled || loading ? 'opacity-50 cursor-not-allowed' : '';
+    const widthClasses = fullWidth ? 'w-full' : '';
+    const allClasses = (0, variants_1.cn)(variants_1.BUTTON_BASE_CLASSES, variantClasses, sizeClasses, disabledClasses, widthClasses, className);
+    const iconElement = icon && (0, jsx_runtime_1.jsx)("span", { className: iconPosition === 'left' ? 'mr-2' : 'ml-2', children: icon });
+    return ((0, jsx_runtime_1.jsxs)("button", { type: type, className: allClasses, disabled: disabled || loading, onClick: onClick, children: [loading && (0, jsx_runtime_1.jsx)("span", { className: "mr-2", dangerouslySetInnerHTML: { __html: variants_1.LOADING_SPINNER } }), !loading && icon && iconPosition === 'left' && iconElement, !iconOnly && children, !loading && icon && iconPosition === 'right' && iconElement] }));
+}
+/**
+ * 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
+ */
+async function renderButton(props) {
+    const { children, icon, ...rest } = props;
+    const element = ((0, jsx_runtime_1.jsx)(Button, { ...rest, icon: icon ? (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : undefined, children: children }));
+    return (0, prerender_1.renderToString)(element);
+}
+/**
+ * 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
+ */
+function renderButtonSync(props) {
+    const { children, icon, ...rest } = props;
+    const element = ((0, jsx_runtime_1.jsx)(Button, { ...rest, icon: icon ? (0, jsx_runtime_1.jsx)("span", { dangerouslySetInnerHTML: { __html: icon } }) : undefined, children: children }));
+    return (0, prerender_1.renderToStringSync)(element);
+}
+exports.default = Button;
+//# sourceMappingURL=Button.js.map

package/src/react/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/react/Button.tsx"],"names":[],"mappings":";;AA0FA,wBAgCC;AAoBD,oCAQC;AAWD,4CAQC;;AA9HD,iDAQ4B;AAC5B,mDAAyE;AAgCzE;;;;;GAKG;AACH,SAAgB,MAAM,CAAC,EACrB,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,YAAY,GAAG,MAAM,EACrB,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,OAAO,EACP,QAAQ,GACI;IACZ,MAAM,cAAc,GAAG,IAAA,kCAAuB,EAAC,OAAO,CAAC,CAAC;IACxD,MAAM,WAAW,GAAG,IAAA,+BAAoB,EAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAEzD,MAAM,eAAe,GAAG,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,EAAE,CAAC;IACnF,MAAM,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAE/C,MAAM,UAAU,GAAG,IAAA,aAAE,EAAC,8BAAmB,EAAE,cAAc,EAAE,WAAW,EAAE,eAAe,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;IAElH,MAAM,WAAW,GAAG,IAAI,IAAI,iCAAM,SAAS,EAAE,YAAY,KAAK,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,YAAG,IAAI,GAAQ,CAAC;IAEtG,OAAO,CACL,oCAAQ,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,IAAI,OAAO,EAAE,OAAO,EAAE,OAAO,aACvF,OAAO,IAAI,iCAAM,SAAS,EAAC,MAAM,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,0BAAe,EAAE,GAAI,EAC1F,CAAC,OAAO,IAAI,IAAI,IAAI,YAAY,KAAK,MAAM,IAAI,WAAW,EAC1D,CAAC,QAAQ,IAAI,QAAQ,EACrB,CAAC,OAAO,IAAI,IAAI,IAAI,YAAY,KAAK,OAAO,IAAI,WAAW,IACrD,CACV,CAAC;AACJ,CAAC;AAYD;;;;;;;GAOG;AACI,KAAK,UAAU,YAAY,CAAC,KAAwB;IACzD,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC1C,MAAM,OAAO,GAAG,CACd,uBAAC,MAAM,OAAK,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,iCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAAC,CAAC,CAAC,SAAS,YAC3F,QAAQ,GACF,CACV,CAAC;IACF,OAAO,IAAA,0BAAc,EAAC,OAAO,CAAC,CAAC;AACjC,CAAC;AAED;;;;;;;;GAQG;AACH,SAAgB,gBAAgB,CAAC,KAAwB;IACvD,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC1C,MAAM,OAAO,GAAG,CACd,uBAAC,MAAM,OAAK,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,iCAAM,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAAC,CAAC,CAAC,SAAS,YAC3F,QAAQ,GACF,CACV,CAAC;IACF,OAAO,IAAA,8BAAkB,EAAC,OAAO,CAAC,CAAC;AACrC,CAAC;AAKD,kBAAe,MAAM,CAAC","sourcesContent":["/**\n * @file Button.tsx\n * @description React Button component with static HTML rendering support.\n *\n * This is the single source of truth for the Button component. It can be used:\n * 1. As a React component: `<Button variant=\"primary\">Click Me</Button>`\n * 2. As a static HTML generator: `await renderButton({ variant: 'primary', children: 'Click Me' })`\n *\n * @example React usage\n * ```tsx\n * import { Button } from '@frontmcp/ui/react';\n *\n * function App() {\n *   return (\n *     <Button variant=\"primary\" onClick={() => alert('Clicked!')}>\n *       Click Me\n *     </Button>\n *   );\n * }\n * ```\n *\n * @example With loading state\n * ```tsx\n * <Button variant=\"primary\" loading>\n *   Saving...\n * </Button>\n * ```\n *\n * @example Static HTML generation\n * ```typescript\n * import { renderButton } from '@frontmcp/ui/react';\n *\n * const html = await renderButton({\n *   variant: 'primary',\n *   children: 'Submit',\n * });\n * ```\n *\n * @module @frontmcp/ui/react/Button\n */\n\nimport React from 'react';\nimport type { ReactNode, ReactElement } from 'react';\nimport {\n  type ButtonVariant,\n  type ButtonSize,\n  getButtonVariantClasses,\n  getButtonSizeClasses,\n  BUTTON_BASE_CLASSES,\n  LOADING_SPINNER,\n  cn,\n} from '../styles/variants';\nimport { renderToString, renderToStringSync } from '../render/prerender';\n\n/**\n * Button component props\n */\nexport interface ButtonProps {\n  /** Button variant */\n  variant?: ButtonVariant;\n  /** Button size */\n  size?: ButtonSize;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Loading state */\n  loading?: boolean;\n  /** Full width */\n  fullWidth?: boolean;\n  /** Icon position */\n  iconPosition?: 'left' | 'right';\n  /** Icon content (React element) */\n  icon?: ReactNode;\n  /** Icon only (no text) */\n  iconOnly?: boolean;\n  /** Button type */\n  type?: 'button' | 'submit' | 'reset';\n  /** Additional CSS classes */\n  className?: string;\n  /** Click handler */\n  onClick?: () => void;\n  /** Button content */\n  children?: ReactNode;\n}\n\n/**\n * Button component.\n *\n * A versatile button component with multiple variants, sizes, and states.\n * Uses Tailwind CSS classes for styling.\n */\nexport function Button({\n  variant = 'primary',\n  size = 'md',\n  disabled = false,\n  loading = false,\n  fullWidth = false,\n  iconPosition = 'left',\n  icon,\n  iconOnly = false,\n  type = 'button',\n  className,\n  onClick,\n  children,\n}: ButtonProps): ReactElement {\n  const variantClasses = getButtonVariantClasses(variant);\n  const sizeClasses = getButtonSizeClasses(size, iconOnly);\n\n  const disabledClasses = disabled || loading ? 'opacity-50 cursor-not-allowed' : '';\n  const widthClasses = fullWidth ? 'w-full' : '';\n\n  const allClasses = cn(BUTTON_BASE_CLASSES, variantClasses, sizeClasses, disabledClasses, widthClasses, className);\n\n  const iconElement = icon && <span className={iconPosition === 'left' ? 'mr-2' : 'ml-2'}>{icon}</span>;\n\n  return (\n    <button type={type} className={allClasses} disabled={disabled || loading} onClick={onClick}>\n      {loading && <span className=\"mr-2\" dangerouslySetInnerHTML={{ __html: LOADING_SPINNER }} />}\n      {!loading && icon && iconPosition === 'left' && iconElement}\n      {!iconOnly && children}\n      {!loading && icon && iconPosition === 'right' && iconElement}\n    </button>\n  );\n}\n\n/**\n * Props for static render functions (children is always a string)\n */\nexport interface ButtonRenderProps extends Omit<ButtonProps, 'children' | 'icon' | 'onClick'> {\n  /** Button content as string */\n  children?: string;\n  /** Icon as HTML string */\n  icon?: string;\n}\n\n/**\n * Render Button component to static HTML string (async).\n *\n * Uses React 19's prerender API for optimal static HTML generation.\n *\n * @param props - Button props (with string children)\n * @returns Promise resolving to HTML string\n */\nexport async function renderButton(props: ButtonRenderProps): Promise<string> {\n  const { children, icon, ...rest } = props;\n  const element = (\n    <Button {...rest} icon={icon ? <span dangerouslySetInnerHTML={{ __html: icon }} /> : undefined}>\n      {children}\n    </Button>\n  );\n  return renderToString(element);\n}\n\n/**\n * Render Button component to static HTML string (sync).\n *\n * Uses React's renderToStaticMarkup for synchronous rendering.\n * Does NOT wait for Suspense boundaries.\n *\n * @param props - Button props (with string children)\n * @returns HTML string\n */\nexport function renderButtonSync(props: ButtonRenderProps): string {\n  const { children, icon, ...rest } = props;\n  const element = (\n    <Button {...rest} icon={icon ? <span dangerouslySetInnerHTML={{ __html: icon }} /> : undefined}>\n      {children}\n    </Button>\n  );\n  return renderToStringSync(element);\n}\n\n// Re-export types\nexport type { ButtonVariant, ButtonSize };\n\nexport default Button;\n"]}