@frontmcp/ui 0.5.1 → 0.6.0

package/src/components/button.js

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

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

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

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