@frontmcp/ui 0.5.0

package/src/components/button.js

@@ -0,0 +1,336 @@
+"use strict";
+/**
+ * @file button.ts
+ * @description Button Component for FrontMCP UI.
+ *
+ * Versatile button component with multiple variants, sizes, and states.
+ * Includes HTMX support for dynamic interactions without JavaScript.
+ *
+ * @example Basic button
+ * ```typescript
+ * import { button } from '@frontmcp/ui';
+ *
+ * // Primary button (default)
+ * const html = button('Click Me');
+ * // <button type="button" class="...bg-primary...">Click Me</button>
+ * ```
+ *
+ * @example Button variants
+ * ```typescript
+ * import { button, primaryButton, dangerButton, outlineButton } from '@frontmcp/ui';
+ *
+ * // Using variant option
+ * const secondary = button('Save', { variant: 'secondary' });
+ * const danger = button('Delete', { variant: 'danger' });
+ *
+ * // Using shorthand functions
+ * const primary = primaryButton('Submit');
+ * const outline = outlineButton('Cancel');
+ * ```
+ *
+ * @example Button with loading state
+ * ```typescript
+ * const loadingBtn = button('Saving...', {
+ *   loading: true,
+ *   disabled: true,
+ * });
+ * ```
+ *
+ * @example Button with HTMX
+ * ```typescript
+ * const htmxBtn = button('Load More', {
+ *   htmx: {
+ *     get: '/api/items?page=2',
+ *     target: '#items-list',
+ *     swap: 'beforeend',
+ *   },
+ * });
+ * ```
+ *
+ * @example Button group
+ * ```typescript
+ * import { button, buttonGroup } from '@frontmcp/ui';
+ *
+ * const group = buttonGroup([
+ *   button('Edit', { variant: 'outline' }),
+ *   button('Delete', { variant: 'danger' }),
+ * ], { attached: true });
+ * ```
+ *
+ * @module @frontmcp/ui/components/button
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.linkButton = exports.dangerButton = exports.ghostButton = exports.outlineButton = exports.secondaryButton = exports.primaryButton = void 0;
+exports.button = button;
+exports.buttonGroup = buttonGroup;
+const base_1 = require("../layouts/base");
+const validation_1 = require("../validation");
+const button_schema_1 = require("./button.schema");
+// ============================================
+// Button Builder
+// ============================================
+/**
+ * Get variant CSS classes
+ */
+function getVariantClasses(variant) {
+    const variants = {
+        primary: 'bg-primary hover:bg-primary/90 text-white shadow-sm',
+        secondary: 'bg-secondary hover:bg-secondary/90 text-white shadow-sm',
+        outline: 'border-2 border-primary text-primary hover:bg-primary/10',
+        ghost: 'text-text-primary hover:bg-gray-100',
+        danger: 'bg-danger hover:bg-danger/90 text-white shadow-sm',
+        success: 'bg-success hover:bg-success/90 text-white shadow-sm',
+        link: 'text-primary hover:text-primary/80 hover:underline',
+    };
+    return variants[variant];
+}
+/**
+ * Get size CSS classes
+ */
+function getSizeClasses(size, iconOnly) {
+    if (iconOnly) {
+        const iconSizes = {
+            xs: 'p-1.5',
+            sm: 'p-2',
+            md: 'p-2.5',
+            lg: 'p-3',
+            xl: 'p-4',
+        };
+        return iconSizes[size];
+    }
+    const sizes = {
+        xs: 'px-2.5 py-1.5 text-xs',
+        sm: 'px-3 py-2 text-sm',
+        md: 'px-4 py-2.5 text-sm',
+        lg: 'px-5 py-3 text-base',
+        xl: 'px-6 py-3.5 text-lg',
+    };
+    return sizes[size];
+}
+/**
+ * Sanitize a data-* attribute key to prevent malformed attributes / injection
+ * Returns null if the key is invalid after sanitization
+ */
+function sanitizeDataKey(key) {
+    // Only allow lowercase letters, numbers, underscores, and hyphens
+    const sanitized = key
+        .toLowerCase()
+        .replace(/[^a-z0-9_-]/g, '-')
+        .replace(/-+/g, '-')
+        .replace(/^-|-$/g, '');
+    if (!sanitized) {
+        console.warn(`[frontmcp/ui] Dropping invalid data-* key: "${key}"`);
+        return null;
+    }
+    return sanitized;
+}
+/**
+ * Build HTMX attributes string
+ */
+function buildHtmxAttrs(htmx) {
+    if (!htmx)
+        return '';
+    const attrs = [];
+    if (htmx.get)
+        attrs.push(`hx-get="${(0, base_1.escapeHtml)(htmx.get)}"`);
+    if (htmx.post)
+        attrs.push(`hx-post="${(0, base_1.escapeHtml)(htmx.post)}"`);
+    if (htmx.put)
+        attrs.push(`hx-put="${(0, base_1.escapeHtml)(htmx.put)}"`);
+    if (htmx.delete)
+        attrs.push(`hx-delete="${(0, base_1.escapeHtml)(htmx.delete)}"`);
+    if (htmx.target)
+        attrs.push(`hx-target="${(0, base_1.escapeHtml)(htmx.target)}"`);
+    if (htmx.swap)
+        attrs.push(`hx-swap="${(0, base_1.escapeHtml)(htmx.swap)}"`);
+    if (htmx.trigger)
+        attrs.push(`hx-trigger="${(0, base_1.escapeHtml)(htmx.trigger)}"`);
+    if (htmx.confirm)
+        attrs.push(`hx-confirm="${(0, base_1.escapeHtml)(htmx.confirm)}"`);
+    if (htmx.indicator)
+        attrs.push(`hx-indicator="${(0, base_1.escapeHtml)(htmx.indicator)}"`);
+    return attrs.join(' ');
+}
+/**
+ * Loading spinner SVG
+ */
+const loadingSpinner = `<svg class="animate-spin -ml-1 mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24">
+  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+</svg>`;
+/**
+ * Validate href protocol to prevent javascript: and other dangerous protocols
+ */
+function isValidHrefProtocol(href) {
+    const trimmed = href.trim().toLowerCase();
+    // Allow only safe protocols (allowlist approach is more secure than blocklist)
+    return (trimmed.startsWith('http://') ||
+        trimmed.startsWith('https://') ||
+        trimmed.startsWith('/') ||
+        trimmed.startsWith('#') ||
+        trimmed.startsWith('mailto:') ||
+        trimmed.startsWith('tel:'));
+}
+/**
+ * Build a button component
+ *
+ * @param text - Button label text (used as aria-label for icon-only buttons)
+ * @param options - Button configuration options
+ * @returns HTML string for the button, or validation error box on invalid input
+ *
+ * @remarks
+ * **Security considerations:**
+ * - The `iconBefore` and `iconAfter` options accept raw HTML strings for SVG icons.
+ *   These are NOT escaped and should only contain trusted content (e.g., icon library output).
+ *   Never pass user-provided content to these options.
+ * - The `href` option uses an allowlist for safe protocols. Only the following are allowed:
+ *   - `http://`, `https://` - absolute URLs
+ *   - `/` - absolute paths (e.g., "/login", "/api/users")
+ *   - `#` - anchor links (e.g., "#section")
+ *   - `mailto:` - email links
+ *   - `tel:` - phone links
+ *   Note: Bare relative URLs like "login" or "./foo" are NOT allowed and will fall back to
+ *   button behavior. Use absolute paths ("/login") instead.
+ * - The `data` option keys are sanitized to prevent malformed attributes.
+ *
+ * **Accessibility:**
+ * - When `iconOnly: true`, the `text` parameter is automatically used as `aria-label`
+ *   unless an explicit `ariaLabel` option is provided.
+ * - Empty button text with `iconOnly: false` will log a warning for accessibility.
+ * - Icon-only buttons without text or ariaLabel will log a warning.
+ */
+function button(text, options = {}) {
+    // Validate options using Zod schema
+    const validation = (0, validation_1.validateOptions)(options, {
+        schema: button_schema_1.ButtonOptionsSchema,
+        componentName: 'button',
+    });
+    if (!validation.success) {
+        return validation.error;
+    }
+    const validatedOptions = validation.data;
+    const { variant = 'primary', size = 'md', type = 'button', disabled = false, loading = false, fullWidth = false, iconBefore, iconAfter, iconOnly = false, className = '', id, name, value, href, target, htmx, data, ariaLabel, } = validatedOptions;
+    // Warn about empty button text (accessibility concern)
+    if (!iconOnly && !text.trim()) {
+        console.warn('[frontmcp/ui] Button has empty text. Consider providing text or using iconOnly with ariaLabel.');
+    }
+    // Warn about icon-only buttons without accessible label
+    if (iconOnly && !ariaLabel && !text.trim()) {
+        console.warn('[frontmcp/ui] iconOnly button requires non-empty text or ariaLabel for accessibility; control will have no label.');
+    }
+    // Validate href protocol
+    if (href && !isValidHrefProtocol(href)) {
+        console.warn(`[frontmcp/ui] Button href contains potentially dangerous protocol: "${href.slice(0, 20)}..."`);
+        // Don't render the href - fall back to button behavior
+    }
+    const variantClasses = getVariantClasses(variant);
+    const sizeClasses = getSizeClasses(size, iconOnly);
+    // Escape className to prevent XSS via attribute injection (e.g., `btn" onclick="...`)
+    const safeClassName = className ? (0, base_1.escapeHtml)(className) : '';
+    const baseClasses = [
+        'inline-flex items-center justify-center',
+        'font-medium',
+        'rounded-lg',
+        'transition-colors duration-200',
+        'focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2',
+        disabled || loading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',
+        fullWidth ? 'w-full' : '',
+        variantClasses,
+        sizeClasses,
+        safeClassName,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const htmxAttrs = buildHtmxAttrs(htmx);
+    const dataAttrs = data
+        ? Object.entries(data)
+            .map(([key, val]) => {
+            const safeKey = sanitizeDataKey(key);
+            return safeKey ? `data-${safeKey}="${(0, base_1.escapeHtml)(val)}"` : '';
+        })
+            .filter(Boolean)
+            .join(' ')
+        : '';
+    const idAttr = id ? `id="${(0, base_1.escapeHtml)(id)}"` : '';
+    const nameAttr = name ? `name="${(0, base_1.escapeHtml)(name)}"` : '';
+    const valueAttr = value ? `value="${(0, base_1.escapeHtml)(value)}"` : '';
+    const disabledAttr = disabled || loading ? 'disabled' : '';
+    const targetAttr = target ? `target="${(0, base_1.escapeHtml)(target)}"` : '';
+    // Add rel="noopener noreferrer" for target="_blank" to prevent window.opener access
+    const relAttr = target === '_blank' ? 'rel="noopener noreferrer"' : '';
+    // For icon-only buttons, use text as aria-label if no explicit ariaLabel provided (WCAG)
+    const trimmedText = text.trim();
+    const effectiveAriaLabel = ariaLabel ?? (iconOnly && trimmedText ? trimmedText : undefined);
+    const ariaLabelAttr = effectiveAriaLabel ? `aria-label="${(0, base_1.escapeHtml)(effectiveAriaLabel)}"` : '';
+    // Build content (both icons hide during loading for consistent visual behavior)
+    const iconBeforeHtml = iconBefore && !loading ? `<span class="${iconOnly ? '' : 'mr-2'}">${iconBefore}</span>` : '';
+    const iconAfterHtml = iconAfter && !loading ? `<span class="${iconOnly ? '' : 'ml-2'}">${iconAfter}</span>` : '';
+    const loadingHtml = loading ? loadingSpinner : '';
+    const textHtml = iconOnly ? '' : (0, base_1.escapeHtml)(text);
+    const contentHtml = `${loadingHtml}${iconBeforeHtml}${textHtml}${iconAfterHtml}`;
+    // Use anchor tag if href provided and protocol is safe
+    if (href && !disabled && !loading && isValidHrefProtocol(href)) {
+        return `<a href="${(0, base_1.escapeHtml)(href)}" class="${baseClasses}" ${idAttr} ${htmxAttrs} ${dataAttrs} ${ariaLabelAttr} ${targetAttr} ${relAttr}>
+      ${contentHtml}
+    </a>`;
+    }
+    return `<button type="${type}" class="${baseClasses}" ${idAttr} ${nameAttr} ${valueAttr} ${disabledAttr} ${htmxAttrs} ${dataAttrs} ${ariaLabelAttr}>
+    ${contentHtml}
+  </button>`;
+}
+/**
+ * Build a button group
+ *
+ * @param buttons - Array of button HTML strings
+ * @param options - Button group configuration options
+ * @returns HTML string for the button group, or validation error box on invalid input
+ */
+function buttonGroup(buttons, options = {}) {
+    if (buttons.length === 0) {
+        console.warn('[frontmcp/ui] buttonGroup called with empty buttons array');
+        return '';
+    }
+    // Validate options using Zod schema
+    const validation = (0, validation_1.validateOptions)(options, {
+        schema: button_schema_1.ButtonGroupOptionsSchema,
+        componentName: 'buttonGroup',
+    });
+    if (!validation.success) {
+        return validation.error;
+    }
+    const validatedOptions = validation.data;
+    const { attached = false, direction = 'horizontal', gap = 'md', className = '' } = validatedOptions;
+    // Escape className to prevent XSS via attribute injection
+    const safeClassName = className ? (0, base_1.escapeHtml)(className) : '';
+    if (attached) {
+        const classes = direction === 'horizontal'
+            ? 'inline-flex rounded-lg shadow-sm [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px'
+            : 'inline-flex flex-col rounded-lg shadow-sm [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-mt-px';
+        return `<div class="${classes} ${safeClassName}">${buttons.join('')}</div>`;
+    }
+    const gapClasses = { sm: 'gap-2', md: 'gap-3', lg: 'gap-4' };
+    const directionClasses = direction === 'horizontal' ? 'flex flex-row' : 'flex flex-col';
+    return `<div class="${directionClasses} ${gapClasses[gap]} ${safeClassName}">${buttons.join('')}</div>`;
+}
+// ============================================
+// Convenience Functions
+// ============================================
+/** Primary button shorthand */
+const primaryButton = (text, opts) => button(text, { ...opts, variant: 'primary' });
+exports.primaryButton = primaryButton;
+/** Secondary button shorthand */
+const secondaryButton = (text, opts) => button(text, { ...opts, variant: 'secondary' });
+exports.secondaryButton = secondaryButton;
+/** Outline button shorthand */
+const outlineButton = (text, opts) => button(text, { ...opts, variant: 'outline' });
+exports.outlineButton = outlineButton;
+/** Ghost button shorthand */
+const ghostButton = (text, opts) => button(text, { ...opts, variant: 'ghost' });
+exports.ghostButton = ghostButton;
+/** Danger button shorthand */
+const dangerButton = (text, opts) => button(text, { ...opts, variant: 'danger' });
+exports.dangerButton = dangerButton;
+/** Link button shorthand */
+const linkButton = (text, opts) => button(text, { ...opts, variant: 'link' });
+exports.linkButton = linkButton;
+//# sourceMappingURL=button.js.map

package/src/components/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @file button.ts\n * @description Button Component for FrontMCP UI.\n *\n * Versatile button component with multiple variants, sizes, and states.\n * Includes HTMX support for dynamic interactions without JavaScript.\n *\n * @example Basic button\n * ```typescript\n * import { button } from '@frontmcp/ui';\n *\n * // Primary button (default)\n * const html = button('Click Me');\n * // <button type=\"button\" class=\"...bg-primary...\">Click Me</button>\n * ```\n *\n * @example Button variants\n * ```typescript\n * import { button, primaryButton, dangerButton, outlineButton } from '@frontmcp/ui';\n *\n * // Using variant option\n * const secondary = button('Save', { variant: 'secondary' });\n * const danger = button('Delete', { variant: 'danger' });\n *\n * // Using shorthand functions\n * const primary = primaryButton('Submit');\n * const outline = outlineButton('Cancel');\n * ```\n *\n * @example Button with loading state\n * ```typescript\n * const loadingBtn = button('Saving...', {\n *   loading: true,\n *   disabled: true,\n * });\n * ```\n *\n * @example Button with HTMX\n * ```typescript\n * const htmxBtn = button('Load More', {\n *   htmx: {\n *     get: '/api/items?page=2',\n *     target: '#items-list',\n *     swap: 'beforeend',\n *   },\n * });\n * ```\n *\n * @example Button group\n * ```typescript\n * import { button, buttonGroup } from '@frontmcp/ui';\n *\n * const group = buttonGroup([\n *   button('Edit', { variant: 'outline' }),\n *   button('Delete', { variant: 'danger' }),\n * ], { attached: true });\n * ```\n *\n * @module @frontmcp/ui/components/button\n */\n\nimport { escapeHtml } from '../layouts/base';\nimport { validateOptions } from '../validation';\nimport {\n  ButtonOptionsSchema,\n  ButtonGroupOptionsSchema,\n  type ButtonOptions,\n  type ButtonVariant,\n  type ButtonSize,\n  type ButtonGroupOptions,\n} from './button.schema';\n\n// Re-export types from schema\nexport type { ButtonOptions, ButtonVariant, ButtonSize, ButtonGroupOptions };\n\n// ============================================\n// Button Builder\n// ============================================\n\n/**\n * Get variant CSS classes\n */\nfunction getVariantClasses(variant: ButtonVariant): string {\n  const variants: Record<ButtonVariant, string> = {\n    primary: 'bg-primary hover:bg-primary/90 text-white shadow-sm',\n    secondary: 'bg-secondary hover:bg-secondary/90 text-white shadow-sm',\n    outline: 'border-2 border-primary text-primary hover:bg-primary/10',\n    ghost: 'text-text-primary hover:bg-gray-100',\n    danger: 'bg-danger hover:bg-danger/90 text-white shadow-sm',\n    success: 'bg-success hover:bg-success/90 text-white shadow-sm',\n    link: 'text-primary hover:text-primary/80 hover:underline',\n  };\n  return variants[variant];\n}\n\n/**\n * Get size CSS classes\n */\nfunction getSizeClasses(size: ButtonSize, iconOnly: boolean): string {\n  if (iconOnly) {\n    const iconSizes: Record<ButtonSize, string> = {\n      xs: 'p-1.5',\n      sm: 'p-2',\n      md: 'p-2.5',\n      lg: 'p-3',\n      xl: 'p-4',\n    };\n    return iconSizes[size];\n  }\n\n  const sizes: Record<ButtonSize, string> = {\n    xs: 'px-2.5 py-1.5 text-xs',\n    sm: 'px-3 py-2 text-sm',\n    md: 'px-4 py-2.5 text-sm',\n    lg: 'px-5 py-3 text-base',\n    xl: 'px-6 py-3.5 text-lg',\n  };\n  return sizes[size];\n}\n\n/**\n * Sanitize a data-* attribute key to prevent malformed attributes / injection\n * Returns null if the key is invalid after sanitization\n */\nfunction sanitizeDataKey(key: string): string | null {\n  // Only allow lowercase letters, numbers, underscores, and hyphens\n  const sanitized = key\n    .toLowerCase()\n    .replace(/[^a-z0-9_-]/g, '-')\n    .replace(/-+/g, '-')\n    .replace(/^-|-$/g, '');\n  if (!sanitized) {\n    console.warn(`[frontmcp/ui] Dropping invalid data-* key: \"${key}\"`);\n    return null;\n  }\n  return sanitized;\n}\n\n/**\n * Build HTMX attributes string\n */\nfunction buildHtmxAttrs(htmx?: ButtonOptions['htmx']): string {\n  if (!htmx) return '';\n  const attrs: string[] = [];\n  if (htmx.get) attrs.push(`hx-get=\"${escapeHtml(htmx.get)}\"`);\n  if (htmx.post) attrs.push(`hx-post=\"${escapeHtml(htmx.post)}\"`);\n  if (htmx.put) attrs.push(`hx-put=\"${escapeHtml(htmx.put)}\"`);\n  if (htmx.delete) attrs.push(`hx-delete=\"${escapeHtml(htmx.delete)}\"`);\n  if (htmx.target) attrs.push(`hx-target=\"${escapeHtml(htmx.target)}\"`);\n  if (htmx.swap) attrs.push(`hx-swap=\"${escapeHtml(htmx.swap)}\"`);\n  if (htmx.trigger) attrs.push(`hx-trigger=\"${escapeHtml(htmx.trigger)}\"`);\n  if (htmx.confirm) attrs.push(`hx-confirm=\"${escapeHtml(htmx.confirm)}\"`);\n  if (htmx.indicator) attrs.push(`hx-indicator=\"${escapeHtml(htmx.indicator)}\"`);\n  return attrs.join(' ');\n}\n\n/**\n * Loading spinner SVG\n */\nconst loadingSpinner = `<svg class=\"animate-spin -ml-1 mr-2 h-4 w-4\" fill=\"none\" viewBox=\"0 0 24 24\">\n  <circle class=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"4\"></circle>\n  <path class=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n</svg>`;\n\n/**\n * Validate href protocol to prevent javascript: and other dangerous protocols\n */\nfunction isValidHrefProtocol(href: string): boolean {\n  const trimmed = href.trim().toLowerCase();\n  // Allow only safe protocols (allowlist approach is more secure than blocklist)\n  return (\n    trimmed.startsWith('http://') ||\n    trimmed.startsWith('https://') ||\n    trimmed.startsWith('/') ||\n    trimmed.startsWith('#') ||\n    trimmed.startsWith('mailto:') ||\n    trimmed.startsWith('tel:')\n  );\n}\n\n/**\n * Build a button component\n *\n * @param text - Button label text (used as aria-label for icon-only buttons)\n * @param options - Button configuration options\n * @returns HTML string for the button, or validation error box on invalid input\n *\n * @remarks\n * **Security considerations:**\n * - The `iconBefore` and `iconAfter` options accept raw HTML strings for SVG icons.\n *   These are NOT escaped and should only contain trusted content (e.g., icon library output).\n *   Never pass user-provided content to these options.\n * - The `href` option uses an allowlist for safe protocols. Only the following are allowed:\n *   - `http://`, `https://` - absolute URLs\n *   - `/` - absolute paths (e.g., \"/login\", \"/api/users\")\n *   - `#` - anchor links (e.g., \"#section\")\n *   - `mailto:` - email links\n *   - `tel:` - phone links\n *   Note: Bare relative URLs like \"login\" or \"./foo\" are NOT allowed and will fall back to\n *   button behavior. Use absolute paths (\"/login\") instead.\n * - The `data` option keys are sanitized to prevent malformed attributes.\n *\n * **Accessibility:**\n * - When `iconOnly: true`, the `text` parameter is automatically used as `aria-label`\n *   unless an explicit `ariaLabel` option is provided.\n * - Empty button text with `iconOnly: false` will log a warning for accessibility.\n * - Icon-only buttons without text or ariaLabel will log a warning.\n */\nexport function button(text: string, options: ButtonOptions = {}): string {\n  // Validate options using Zod schema\n  const validation = validateOptions<ButtonOptions>(options, {\n    schema: ButtonOptionsSchema,\n    componentName: 'button',\n  });\n\n  if (!validation.success) {\n    return validation.error;\n  }\n\n  const validatedOptions = validation.data;\n  const {\n    variant = 'primary',\n    size = 'md',\n    type = 'button',\n    disabled = false,\n    loading = false,\n    fullWidth = false,\n    iconBefore,\n    iconAfter,\n    iconOnly = false,\n    className = '',\n    id,\n    name,\n    value,\n    href,\n    target,\n    htmx,\n    data,\n    ariaLabel,\n  } = validatedOptions;\n\n  // Warn about empty button text (accessibility concern)\n  if (!iconOnly && !text.trim()) {\n    console.warn('[frontmcp/ui] Button has empty text. Consider providing text or using iconOnly with ariaLabel.');\n  }\n\n  // Warn about icon-only buttons without accessible label\n  if (iconOnly && !ariaLabel && !text.trim()) {\n    console.warn(\n      '[frontmcp/ui] iconOnly button requires non-empty text or ariaLabel for accessibility; control will have no label.',\n    );\n  }\n\n  // Validate href protocol\n  if (href && !isValidHrefProtocol(href)) {\n    console.warn(`[frontmcp/ui] Button href contains potentially dangerous protocol: \"${href.slice(0, 20)}...\"`);\n    // Don't render the href - fall back to button behavior\n  }\n\n  const variantClasses = getVariantClasses(variant);\n  const sizeClasses = getSizeClasses(size, iconOnly);\n\n  // Escape className to prevent XSS via attribute injection (e.g., `btn\" onclick=\"...`)\n  const safeClassName = className ? escapeHtml(className) : '';\n\n  const baseClasses = [\n    'inline-flex items-center justify-center',\n    'font-medium',\n    'rounded-lg',\n    'transition-colors duration-200',\n    'focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2',\n    disabled || loading ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer',\n    fullWidth ? 'w-full' : '',\n    variantClasses,\n    sizeClasses,\n    safeClassName,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const htmxAttrs = buildHtmxAttrs(htmx);\n  const dataAttrs = data\n    ? Object.entries(data)\n        .map(([key, val]) => {\n          const safeKey = sanitizeDataKey(key);\n          return safeKey ? `data-${safeKey}=\"${escapeHtml(val)}\"` : '';\n        })\n        .filter(Boolean)\n        .join(' ')\n    : '';\n\n  const idAttr = id ? `id=\"${escapeHtml(id)}\"` : '';\n  const nameAttr = name ? `name=\"${escapeHtml(name)}\"` : '';\n  const valueAttr = value ? `value=\"${escapeHtml(value)}\"` : '';\n  const disabledAttr = disabled || loading ? 'disabled' : '';\n  const targetAttr = target ? `target=\"${escapeHtml(target)}\"` : '';\n  // Add rel=\"noopener noreferrer\" for target=\"_blank\" to prevent window.opener access\n  const relAttr = target === '_blank' ? 'rel=\"noopener noreferrer\"' : '';\n\n  // For icon-only buttons, use text as aria-label if no explicit ariaLabel provided (WCAG)\n  const trimmedText = text.trim();\n  const effectiveAriaLabel = ariaLabel ?? (iconOnly && trimmedText ? trimmedText : undefined);\n  const ariaLabelAttr = effectiveAriaLabel ? `aria-label=\"${escapeHtml(effectiveAriaLabel)}\"` : '';\n\n  // Build content (both icons hide during loading for consistent visual behavior)\n  const iconBeforeHtml = iconBefore && !loading ? `<span class=\"${iconOnly ? '' : 'mr-2'}\">${iconBefore}</span>` : '';\n  const iconAfterHtml = iconAfter && !loading ? `<span class=\"${iconOnly ? '' : 'ml-2'}\">${iconAfter}</span>` : '';\n  const loadingHtml = loading ? loadingSpinner : '';\n  const textHtml = iconOnly ? '' : escapeHtml(text);\n\n  const contentHtml = `${loadingHtml}${iconBeforeHtml}${textHtml}${iconAfterHtml}`;\n\n  // Use anchor tag if href provided and protocol is safe\n  if (href && !disabled && !loading && isValidHrefProtocol(href)) {\n    return `<a href=\"${escapeHtml(\n      href,\n    )}\" class=\"${baseClasses}\" ${idAttr} ${htmxAttrs} ${dataAttrs} ${ariaLabelAttr} ${targetAttr} ${relAttr}>\n      ${contentHtml}\n    </a>`;\n  }\n\n  return `<button type=\"${type}\" class=\"${baseClasses}\" ${idAttr} ${nameAttr} ${valueAttr} ${disabledAttr} ${htmxAttrs} ${dataAttrs} ${ariaLabelAttr}>\n    ${contentHtml}\n  </button>`;\n}\n\n/**\n * Build a button group\n *\n * @param buttons - Array of button HTML strings\n * @param options - Button group configuration options\n * @returns HTML string for the button group, or validation error box on invalid input\n */\nexport function buttonGroup(buttons: string[], options: ButtonGroupOptions = {}): string {\n  if (buttons.length === 0) {\n    console.warn('[frontmcp/ui] buttonGroup called with empty buttons array');\n    return '';\n  }\n\n  // Validate options using Zod schema\n  const validation = validateOptions<ButtonGroupOptions>(options, {\n    schema: ButtonGroupOptionsSchema,\n    componentName: 'buttonGroup',\n  });\n\n  if (!validation.success) {\n    return validation.error;\n  }\n\n  const validatedOptions = validation.data;\n  const { attached = false, direction = 'horizontal', gap = 'md', className = '' } = validatedOptions;\n\n  // Escape className to prevent XSS via attribute injection\n  const safeClassName = className ? escapeHtml(className) : '';\n\n  if (attached) {\n    const classes =\n      direction === 'horizontal'\n        ? 'inline-flex rounded-lg shadow-sm [&>*:first-child]:rounded-r-none [&>*:last-child]:rounded-l-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-ml-px'\n        : 'inline-flex flex-col rounded-lg shadow-sm [&>*:first-child]:rounded-b-none [&>*:last-child]:rounded-t-none [&>*:not(:first-child):not(:last-child)]:rounded-none [&>*:not(:first-child)]:-mt-px';\n    return `<div class=\"${classes} ${safeClassName}\">${buttons.join('')}</div>`;\n  }\n\n  const gapClasses = { sm: 'gap-2', md: 'gap-3', lg: 'gap-4' };\n  const directionClasses = direction === 'horizontal' ? 'flex flex-row' : 'flex flex-col';\n\n  return `<div class=\"${directionClasses} ${gapClasses[gap]} ${safeClassName}\">${buttons.join('')}</div>`;\n}\n\n// ============================================\n// Convenience Functions\n// ============================================\n\n/** Primary button shorthand */\nexport const primaryButton = (text: string, opts?: Omit<ButtonOptions, 'variant'>) =>\n  button(text, { ...opts, variant: 'primary' });\n\n/** Secondary button shorthand */\nexport const secondaryButton = (text: string, opts?: Omit<ButtonOptions, 'variant'>) =>\n  button(text, { ...opts, variant: 'secondary' });\n\n/** Outline button shorthand */\nexport const outlineButton = (text: string, opts?: Omit<ButtonOptions, 'variant'>) =>\n  button(text, { ...opts, variant: 'outline' });\n\n/** Ghost button shorthand */\nexport const ghostButton = (text: string, opts?: Omit<ButtonOptions, 'variant'>) =>\n  button(text, { ...opts, variant: 'ghost' });\n\n/** Danger button shorthand */\nexport const dangerButton = (text: string, opts?: Omit<ButtonOptions, 'variant'>) =>\n  button(text, { ...opts, variant: 'danger' });\n\n/** Link button shorthand */\nexport const linkButton = (text: string, opts?: Omit<ButtonOptions, 'variant'>) =>\n  button(text, { ...opts, variant: 'link' });\n"]}

package/src/components/button.schema.d.ts

@@ -0,0 +1,148 @@
+/**
+ * @file button.schema.ts
+ * @description Zod schemas for Button component options validation.
+ *
+ * Provides strict validation schemas for button options including variants,
+ * sizes, HTMX attributes, and data attributes. All schemas use .strict()
+ * to reject unknown properties.
+ *
+ * @example
+ * ```typescript
+ * import { ButtonOptionsSchema } from '@frontmcp/ui';
+ *
+ * // Validate button options
+ * const result = ButtonOptionsSchema.safeParse({ variant: 'primary' });
+ * if (result.success) {
+ *   // Use result.data
+ * }
+ * ```
+ *
+ * @module @frontmcp/ui/components/button.schema
+ */
+import { z } from 'zod';
+/**
+ * Button variant enum schema
+ */
+export declare const ButtonVariantSchema: z.ZodEnum<{
+    primary: "primary";
+    secondary: "secondary";
+    link: "link";
+    success: "success";
+    danger: "danger";
+    outline: "outline";
+    ghost: "ghost";
+}>;
+/**
+ * Button variant type
+ */
+export type ButtonVariant = z.infer<typeof ButtonVariantSchema>;
+/**
+ * Button size enum schema
+ */
+export declare const ButtonSizeSchema: z.ZodEnum<{
+    xs: "xs";
+    sm: "sm";
+    lg: "lg";
+    xl: "xl";
+    md: "md";
+}>;
+/**
+ * Button size type
+ */
+export type ButtonSize = z.infer<typeof ButtonSizeSchema>;
+/**
+ * HTMX attributes schema for button
+ */
+export declare const ButtonHtmxSchema: z.ZodOptional<z.ZodObject<{
+    get: z.ZodOptional<z.ZodString>;
+    post: z.ZodOptional<z.ZodString>;
+    put: z.ZodOptional<z.ZodString>;
+    delete: z.ZodOptional<z.ZodString>;
+    target: z.ZodOptional<z.ZodString>;
+    swap: z.ZodOptional<z.ZodString>;
+    trigger: z.ZodOptional<z.ZodString>;
+    confirm: z.ZodOptional<z.ZodString>;
+    indicator: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>>;
+/**
+ * HTMX attributes type
+ */
+export type ButtonHtmx = z.infer<typeof ButtonHtmxSchema>;
+/**
+ * Complete button options schema
+ */
+export declare const ButtonOptionsSchema: z.ZodObject<{
+    variant: z.ZodOptional<z.ZodEnum<{
+        primary: "primary";
+        secondary: "secondary";
+        link: "link";
+        success: "success";
+        danger: "danger";
+        outline: "outline";
+        ghost: "ghost";
+    }>>;
+    size: z.ZodOptional<z.ZodEnum<{
+        xs: "xs";
+        sm: "sm";
+        lg: "lg";
+        xl: "xl";
+        md: "md";
+    }>>;
+    type: z.ZodOptional<z.ZodEnum<{
+        button: "button";
+        submit: "submit";
+        reset: "reset";
+    }>>;
+    disabled: z.ZodOptional<z.ZodBoolean>;
+    loading: z.ZodOptional<z.ZodBoolean>;
+    fullWidth: z.ZodOptional<z.ZodBoolean>;
+    iconBefore: z.ZodOptional<z.ZodString>;
+    iconAfter: z.ZodOptional<z.ZodString>;
+    iconOnly: z.ZodOptional<z.ZodBoolean>;
+    className: z.ZodOptional<z.ZodString>;
+    id: z.ZodOptional<z.ZodString>;
+    name: z.ZodOptional<z.ZodString>;
+    value: z.ZodOptional<z.ZodString>;
+    href: z.ZodOptional<z.ZodString>;
+    target: z.ZodOptional<z.ZodEnum<{
+        _blank: "_blank";
+        _self: "_self";
+    }>>;
+    htmx: z.ZodOptional<z.ZodObject<{
+        get: z.ZodOptional<z.ZodString>;
+        post: z.ZodOptional<z.ZodString>;
+        put: z.ZodOptional<z.ZodString>;
+        delete: z.ZodOptional<z.ZodString>;
+        target: z.ZodOptional<z.ZodString>;
+        swap: z.ZodOptional<z.ZodString>;
+        trigger: z.ZodOptional<z.ZodString>;
+        confirm: z.ZodOptional<z.ZodString>;
+        indicator: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>>;
+    data: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
+    ariaLabel: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>;
+/**
+ * Button options type (derived from schema)
+ */
+export type ButtonOptions = z.infer<typeof ButtonOptionsSchema>;
+/**
+ * Button group options schema
+ */
+export declare const ButtonGroupOptionsSchema: z.ZodObject<{
+    attached: z.ZodOptional<z.ZodBoolean>;
+    direction: z.ZodOptional<z.ZodEnum<{
+        horizontal: "horizontal";
+        vertical: "vertical";
+    }>>;
+    gap: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        lg: "lg";
+        md: "md";
+    }>>;
+    className: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>;
+/**
+ * Button group options type
+ */
+export type ButtonGroupOptions = z.infer<typeof ButtonGroupOptionsSchema>;

package/src/components/button.schema.js

@@ -0,0 +1,121 @@
+"use strict";
+/**
+ * @file button.schema.ts
+ * @description Zod schemas for Button component options validation.
+ *
+ * Provides strict validation schemas for button options including variants,
+ * sizes, HTMX attributes, and data attributes. All schemas use .strict()
+ * to reject unknown properties.
+ *
+ * @example
+ * ```typescript
+ * import { ButtonOptionsSchema } from '@frontmcp/ui';
+ *
+ * // Validate button options
+ * const result = ButtonOptionsSchema.safeParse({ variant: 'primary' });
+ * if (result.success) {
+ *   // Use result.data
+ * }
+ * ```
+ *
+ * @module @frontmcp/ui/components/button.schema
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ButtonGroupOptionsSchema = exports.ButtonOptionsSchema = exports.ButtonHtmxSchema = exports.ButtonSizeSchema = exports.ButtonVariantSchema = void 0;
+const zod_1 = require("zod");
+// ============================================
+// Variant and Size Schemas
+// ============================================
+/**
+ * Button variant enum schema
+ */
+exports.ButtonVariantSchema = zod_1.z.enum(['primary', 'secondary', 'outline', 'ghost', 'danger', 'success', 'link']);
+/**
+ * Button size enum schema
+ */
+exports.ButtonSizeSchema = zod_1.z.enum(['xs', 'sm', 'md', 'lg', 'xl']);
+// ============================================
+// HTMX Schema
+// ============================================
+/**
+ * HTMX attributes schema for button
+ */
+exports.ButtonHtmxSchema = zod_1.z
+    .object({
+    get: zod_1.z.string().optional(),
+    post: zod_1.z.string().optional(),
+    put: zod_1.z.string().optional(),
+    delete: zod_1.z.string().optional(),
+    target: zod_1.z.string().optional(),
+    swap: zod_1.z.string().optional(),
+    trigger: zod_1.z.string().optional(),
+    confirm: zod_1.z.string().optional(),
+    indicator: zod_1.z.string().optional(),
+})
+    .strict()
+    .optional();
+// ============================================
+// Button Options Schema
+// ============================================
+/**
+ * Complete button options schema
+ */
+exports.ButtonOptionsSchema = zod_1.z
+    .object({
+    /** Button variant */
+    variant: exports.ButtonVariantSchema.optional(),
+    /** Button size */
+    size: exports.ButtonSizeSchema.optional(),
+    /** Button type attribute */
+    type: zod_1.z.enum(['button', 'submit', 'reset']).optional(),
+    /** Disabled state */
+    disabled: zod_1.z.boolean().optional(),
+    /** Loading state */
+    loading: zod_1.z.boolean().optional(),
+    /** Full width */
+    fullWidth: zod_1.z.boolean().optional(),
+    /** Icon before text (HTML string) */
+    iconBefore: zod_1.z.string().optional(),
+    /** Icon after text (HTML string) */
+    iconAfter: zod_1.z.string().optional(),
+    /** Icon only (no text) */
+    iconOnly: zod_1.z.boolean().optional(),
+    /** Additional CSS classes */
+    className: zod_1.z.string().optional(),
+    /** Button ID */
+    id: zod_1.z.string().optional(),
+    /** Name attribute */
+    name: zod_1.z.string().optional(),
+    /** Value attribute */
+    value: zod_1.z.string().optional(),
+    /** Click handler (URL for links) */
+    href: zod_1.z.string().optional(),
+    /** Open in new tab */
+    target: zod_1.z.enum(['_blank', '_self']).optional(),
+    /** HTMX attributes */
+    htmx: exports.ButtonHtmxSchema,
+    /** Data attributes */
+    data: zod_1.z.record(zod_1.z.string(), zod_1.z.string()).optional(),
+    /** ARIA label */
+    ariaLabel: zod_1.z.string().optional(),
+})
+    .strict();
+// ============================================
+// Button Group Schema
+// ============================================
+/**
+ * Button group options schema
+ */
+exports.ButtonGroupOptionsSchema = zod_1.z
+    .object({
+    /** Attach buttons visually */
+    attached: zod_1.z.boolean().optional(),
+    /** Direction */
+    direction: zod_1.z.enum(['horizontal', 'vertical']).optional(),
+    /** Gap between buttons */
+    gap: zod_1.z.enum(['sm', 'md', 'lg']).optional(),
+    /** Additional CSS classes */
+    className: zod_1.z.string().optional(),
+})
+    .strict();
+//# sourceMappingURL=button.schema.js.map