@frontmcp/ui 0.5.1 → 0.6.0

package/src/pages/index.d.ts

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

@@ -1,27 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

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

@@ -1,51 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

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

@@ -1,55 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

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

@@ -1,52 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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"]}