@frontmcp/ui 0.5.0

package/src/components/avatar.schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.schema.js","sourceRoot":"","sources":["../../../src/components/avatar.schema.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;GAkBG;;;AAEH,6BAAwB;AAExB,+CAA+C;AAC/C,kCAAkC;AAClC,+CAA+C;AAE/C;;GAEG;AACU,QAAA,gBAAgB,GAAG,OAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;AAO9E;;GAEG;AACU,QAAA,iBAAiB,GAAG,OAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;AAOzE;;GAEG;AACU,QAAA,kBAAkB,GAAG,OAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC,CAAC;AAOxF,+CAA+C;AAC/C,wBAAwB;AACxB,+CAA+C;AAE/C;;GAEG;AACU,QAAA,mBAAmB,GAAG,OAAC;KACjC,MAAM,CAAC;IACN,uBAAuB;IACvB,GAAG,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC1B,iCAAiC;IACjC,GAAG,EAAE,OAAC,CAAC,MAAM,EAAE;IACf,kBAAkB;IAClB,IAAI,EAAE,wBAAgB,CAAC,QAAQ,EAAE;IACjC,mBAAmB;IACnB,KAAK,EAAE,yBAAiB,CAAC,QAAQ,EAAE;IACnC,uBAAuB;IACvB,MAAM,EAAE,0BAAkB,CAAC,QAAQ,EAAE;IACrC,6BAA6B;IAC7B,SAAS,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAChC,wBAAwB;IACxB,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC3B,kDAAkD;IAClD,QAAQ,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC/B,gDAAgD;IAChD,OAAO,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;CAC/B,CAAC;KACD,MAAM,EAAE,CAAC;AAOZ,+CAA+C;AAC/C,sBAAsB;AACtB,+CAA+C;AAE/C;;GAEG;AACU,QAAA,mBAAmB,GAAG,OAAC,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AAExE;;GAEG;AACU,QAAA,wBAAwB,GAAG,OAAC;KACtC,MAAM,CAAC;IACN,8BAA8B;IAC9B,GAAG,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;IACjC,kBAAkB;IAClB,IAAI,EAAE,wBAAgB,CAAC,QAAQ,EAAE;IACjC,qBAAqB;IACrB,OAAO,EAAE,2BAAmB,CAAC,QAAQ,EAAE;IACvC,6BAA6B;IAC7B,SAAS,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;CACjC,CAAC;KACD,MAAM,EAAE,CAAC;AAOZ,+CAA+C;AAC/C,0BAA0B;AAC1B,+CAA+C;AAE/C;;GAEG;AACU,QAAA,2BAA2B,GAAG,2BAAmB,CAAC,MAAM,CAAC;IACpE,0BAA0B;IAC1B,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE;IAChB,yCAAyC;IACzC,QAAQ,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC/B,qBAAqB;IACrB,KAAK,EAAE,OAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,EAAE;CAC5C,CAAC,CAAC,MAAM,EAAE,CAAC","sourcesContent":["/**\n * @file avatar.schema.ts\n * @description Zod schemas for Avatar component options validation.\n *\n * Provides strict validation schemas for avatar options including sizes,\n * shapes, status indicators, and avatar groups with text.\n *\n * @example\n * ```typescript\n * import { AvatarOptionsSchema } from '@frontmcp/ui';\n *\n * const result = AvatarOptionsSchema.safeParse({\n *   alt: 'John Doe',\n *   size: 'lg',\n * });\n * ```\n *\n * @module @frontmcp/ui/components/avatar.schema\n */\n\nimport { z } from 'zod';\n\n// ============================================\n// Size, Shape, and Status Schemas\n// ============================================\n\n/**\n * Avatar size enum schema\n */\nexport const AvatarSizeSchema = z.enum(['xs', 'sm', 'md', 'lg', 'xl', '2xl']);\n\n/**\n * Avatar size type\n */\nexport type AvatarSize = z.infer<typeof AvatarSizeSchema>;\n\n/**\n * Avatar shape enum schema\n */\nexport const AvatarShapeSchema = z.enum(['circle', 'square', 'rounded']);\n\n/**\n * Avatar shape type\n */\nexport type AvatarShape = z.infer<typeof AvatarShapeSchema>;\n\n/**\n * Avatar status enum schema\n */\nexport const AvatarStatusSchema = z.enum(['online', 'offline', 'busy', 'away', 'none']);\n\n/**\n * Avatar status type\n */\nexport type AvatarStatus = z.infer<typeof AvatarStatusSchema>;\n\n// ============================================\n// Avatar Options Schema\n// ============================================\n\n/**\n * Complete avatar options schema\n */\nexport const AvatarOptionsSchema = z\n  .object({\n    /** Image source URL */\n    src: z.string().optional(),\n    /** Alt text / name (required) */\n    alt: z.string(),\n    /** Avatar size */\n    size: AvatarSizeSchema.optional(),\n    /** Avatar shape */\n    shape: AvatarShapeSchema.optional(),\n    /** Status indicator */\n    status: AvatarStatusSchema.optional(),\n    /** Additional CSS classes */\n    className: z.string().optional(),\n    /** Click handler URL */\n    href: z.string().optional(),\n    /** Custom initials (overrides auto-generation) */\n    initials: z.string().optional(),\n    /** Background color for initials (CSS color) */\n    bgColor: z.string().optional(),\n  })\n  .strict();\n\n/**\n * Avatar options type (derived from schema)\n */\nexport type AvatarOptions = z.infer<typeof AvatarOptionsSchema>;\n\n// ============================================\n// Avatar Group Schema\n// ============================================\n\n/**\n * Avatar group spacing schema\n */\nexport const AvatarSpacingSchema = z.enum(['tight', 'normal', 'loose']);\n\n/**\n * Avatar group options schema\n */\nexport const AvatarGroupOptionsSchema = z\n  .object({\n    /** Maximum visible avatars */\n    max: z.number().min(1).optional(),\n    /** Avatar size */\n    size: AvatarSizeSchema.optional(),\n    /** Overlap amount */\n    spacing: AvatarSpacingSchema.optional(),\n    /** Additional CSS classes */\n    className: z.string().optional(),\n  })\n  .strict();\n\n/**\n * Avatar group options type\n */\nexport type AvatarGroupOptions = z.infer<typeof AvatarGroupOptionsSchema>;\n\n// ============================================\n// Avatar with Text Schema\n// ============================================\n\n/**\n * Avatar with text options schema\n */\nexport const AvatarWithTextOptionsSchema = AvatarOptionsSchema.extend({\n  /** Primary text (name) */\n  name: z.string(),\n  /** Secondary text (email, role, etc.) */\n  subtitle: z.string().optional(),\n  /** Text alignment */\n  align: z.enum(['left', 'right']).optional(),\n}).strict();\n\n/**\n * Avatar with text options type\n */\nexport type AvatarWithTextOptions = z.infer<typeof AvatarWithTextOptionsSchema>;\n"]}

package/src/components/badge.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Badge Component
+ *
+ * Small status indicators and labels.
+ */
+/**
+ * Badge variant styles
+ */
+export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'outline';
+/**
+ * Badge size options
+ */
+export type BadgeSize = 'sm' | 'md' | 'lg';
+/**
+ * Badge component options
+ */
+export interface BadgeOptions {
+    /** Badge variant */
+    variant?: BadgeVariant;
+    /** Badge size */
+    size?: BadgeSize;
+    /** Rounded pill style */
+    pill?: boolean;
+    /** Icon before text */
+    icon?: string;
+    /** Dot indicator (no text) */
+    dot?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Removable badge */
+    removable?: boolean;
+    /** Remove button HTMX */
+    onRemove?: {
+        delete?: string;
+        target?: string;
+        swap?: string;
+        confirm?: string;
+    };
+}
+/**
+ * Build a badge component
+ */
+export declare function badge(text: string, options?: BadgeOptions): string;
+/**
+ * Build a badge group
+ */
+export declare function badgeGroup(badges: string[], options?: {
+    gap?: 'sm' | 'md' | 'lg';
+    className?: string;
+}): string;
+/** Active status badge */
+export declare const activeBadge: (text?: string) => string;
+/** Inactive status badge */
+export declare const inactiveBadge: (text?: string) => string;
+/** Pending status badge */
+export declare const pendingBadge: (text?: string) => string;
+/** Error status badge */
+export declare const errorBadge: (text?: string) => string;
+/** New badge */
+export declare const newBadge: (text?: string) => string;
+/** Beta badge */
+export declare const betaBadge: (text?: string) => string;
+/** Online status dot */
+export declare const onlineDot: (label?: string) => string;
+/** Offline status dot */
+export declare const offlineDot: (label?: string) => string;
+/** Busy status dot */
+export declare const busyDot: (label?: string) => string;
+/** Away status dot */
+export declare const awayDot: (label?: string) => string;

package/src/components/badge.js

@@ -0,0 +1,149 @@
+"use strict";
+/**
+ * Badge Component
+ *
+ * Small status indicators and labels.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.awayDot = exports.busyDot = exports.offlineDot = exports.onlineDot = exports.betaBadge = exports.newBadge = exports.errorBadge = exports.pendingBadge = exports.inactiveBadge = exports.activeBadge = void 0;
+exports.badge = badge;
+exports.badgeGroup = badgeGroup;
+const base_1 = require("../layouts/base");
+// ============================================
+// Badge Builder
+// ============================================
+/**
+ * Get variant CSS classes
+ */
+function getVariantClasses(variant) {
+    const variants = {
+        default: 'bg-gray-100 text-gray-800',
+        primary: 'bg-primary/10 text-primary',
+        secondary: 'bg-secondary/10 text-secondary',
+        success: 'bg-success/10 text-success',
+        warning: 'bg-warning/10 text-warning',
+        danger: 'bg-danger/10 text-danger',
+        info: 'bg-blue-100 text-blue-800',
+        outline: 'border border-border text-text-primary bg-transparent',
+    };
+    return variants[variant];
+}
+/**
+ * Get size CSS classes
+ */
+function getSizeClasses(size, dot) {
+    if (dot) {
+        const dotSizes = {
+            sm: 'w-2 h-2',
+            md: 'w-2.5 h-2.5',
+            lg: 'w-3 h-3',
+        };
+        return dotSizes[size];
+    }
+    const sizes = {
+        sm: 'px-2 py-0.5 text-xs',
+        md: 'px-2.5 py-1 text-xs',
+        lg: 'px-3 py-1.5 text-sm',
+    };
+    return sizes[size];
+}
+/**
+ * Build a badge component
+ */
+function badge(text, options = {}) {
+    const { variant = 'default', size = 'md', pill = false, icon, dot = false, className = '', removable = false, onRemove, } = options;
+    // Dot badge (status indicator)
+    if (dot) {
+        const dotVariants = {
+            default: 'bg-gray-400',
+            primary: 'bg-primary',
+            secondary: 'bg-secondary',
+            success: 'bg-success',
+            warning: 'bg-warning',
+            danger: 'bg-danger',
+            info: 'bg-blue-500',
+            outline: 'border border-current',
+        };
+        const dotClasses = ['inline-block rounded-full', getSizeClasses(size, true), dotVariants[variant], className]
+            .filter(Boolean)
+            .join(' ');
+        return `<span class="${dotClasses}" aria-label="${(0, base_1.escapeHtml)(text)}" title="${(0, base_1.escapeHtml)(text)}"></span>`;
+    }
+    const variantClasses = getVariantClasses(variant);
+    const sizeClasses = getSizeClasses(size, false);
+    const baseClasses = [
+        'inline-flex items-center font-medium',
+        pill ? 'rounded-full' : 'rounded-md',
+        variantClasses,
+        sizeClasses,
+        className,
+    ]
+        .filter(Boolean)
+        .join(' ');
+    const iconHtml = icon ? `<span class="mr-1">${icon}</span>` : '';
+    const removeHtml = removable
+        ? `<button
+        type="button"
+        class="ml-1.5 -mr-1 hover:opacity-70 transition-opacity"
+        ${onRemove?.delete ? `hx-delete="${(0, base_1.escapeHtml)(onRemove.delete)}"` : ''}
+        ${onRemove?.target ? `hx-target="${(0, base_1.escapeHtml)(onRemove.target)}"` : ''}
+        ${onRemove?.swap ? `hx-swap="${(0, base_1.escapeHtml)(onRemove.swap)}"` : ''}
+        ${onRemove?.confirm ? `hx-confirm="${(0, base_1.escapeHtml)(onRemove.confirm)}"` : ''}
+        aria-label="Remove"
+      >
+        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+        </svg>
+      </button>`
+        : '';
+    return `<span class="${baseClasses}">
+    ${iconHtml}${(0, base_1.escapeHtml)(text)}${removeHtml}
+  </span>`;
+}
+/**
+ * Build a badge group
+ */
+function badgeGroup(badges, options = {}) {
+    const { gap = 'sm', className = '' } = options;
+    const gapClasses = { sm: 'gap-1', md: 'gap-2', lg: 'gap-3' };
+    return `<div class="inline-flex flex-wrap ${gapClasses[gap]} ${className}">
+    ${badges.join('\n')}
+  </div>`;
+}
+// ============================================
+// Status Badge Presets
+// ============================================
+/** Active status badge */
+const activeBadge = (text = 'Active') => badge(text, { variant: 'success', dot: false });
+exports.activeBadge = activeBadge;
+/** Inactive status badge */
+const inactiveBadge = (text = 'Inactive') => badge(text, { variant: 'default', dot: false });
+exports.inactiveBadge = inactiveBadge;
+/** Pending status badge */
+const pendingBadge = (text = 'Pending') => badge(text, { variant: 'warning', dot: false });
+exports.pendingBadge = pendingBadge;
+/** Error status badge */
+const errorBadge = (text = 'Error') => badge(text, { variant: 'danger', dot: false });
+exports.errorBadge = errorBadge;
+/** New badge */
+const newBadge = (text = 'New') => badge(text, { variant: 'primary', size: 'sm', pill: true });
+exports.newBadge = newBadge;
+/** Beta badge */
+const betaBadge = (text = 'Beta') => badge(text, { variant: 'secondary', size: 'sm', pill: true });
+exports.betaBadge = betaBadge;
+// ============================================
+// Status Dot Presets
+// ============================================
+/** Online status dot */
+const onlineDot = (label = 'Online') => badge(label, { variant: 'success', dot: true });
+exports.onlineDot = onlineDot;
+/** Offline status dot */
+const offlineDot = (label = 'Offline') => badge(label, { variant: 'default', dot: true });
+exports.offlineDot = offlineDot;
+/** Busy status dot */
+const busyDot = (label = 'Busy') => badge(label, { variant: 'danger', dot: true });
+exports.busyDot = busyDot;
+/** Away status dot */
+const awayDot = (label = 'Away') => badge(label, { variant: 'warning', dot: true });
+exports.awayDot = awayDot;
+//# sourceMappingURL=badge.js.map

package/src/components/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sourceRoot":"","sources":["../../../src/components/badge.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Badge Component\n *\n * Small status indicators and labels.\n */\n\nimport { escapeHtml } from '../layouts/base';\n\n// ============================================\n// Badge Types\n// ============================================\n\n/**\n * Badge variant styles\n */\nexport type BadgeVariant = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' | 'outline';\n\n/**\n * Badge size options\n */\nexport type BadgeSize = 'sm' | 'md' | 'lg';\n\n/**\n * Badge component options\n */\nexport interface BadgeOptions {\n  /** Badge variant */\n  variant?: BadgeVariant;\n  /** Badge size */\n  size?: BadgeSize;\n  /** Rounded pill style */\n  pill?: boolean;\n  /** Icon before text */\n  icon?: string;\n  /** Dot indicator (no text) */\n  dot?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Removable badge */\n  removable?: boolean;\n  /** Remove button HTMX */\n  onRemove?: {\n    delete?: string;\n    target?: string;\n    swap?: string;\n    confirm?: string;\n  };\n}\n\n// ============================================\n// Badge Builder\n// ============================================\n\n/**\n * Get variant CSS classes\n */\nfunction getVariantClasses(variant: BadgeVariant): string {\n  const variants: Record<BadgeVariant, string> = {\n    default: 'bg-gray-100 text-gray-800',\n    primary: 'bg-primary/10 text-primary',\n    secondary: 'bg-secondary/10 text-secondary',\n    success: 'bg-success/10 text-success',\n    warning: 'bg-warning/10 text-warning',\n    danger: 'bg-danger/10 text-danger',\n    info: 'bg-blue-100 text-blue-800',\n    outline: 'border border-border text-text-primary bg-transparent',\n  };\n  return variants[variant];\n}\n\n/**\n * Get size CSS classes\n */\nfunction getSizeClasses(size: BadgeSize, dot: boolean): string {\n  if (dot) {\n    const dotSizes: Record<BadgeSize, string> = {\n      sm: 'w-2 h-2',\n      md: 'w-2.5 h-2.5',\n      lg: 'w-3 h-3',\n    };\n    return dotSizes[size];\n  }\n\n  const sizes: Record<BadgeSize, string> = {\n    sm: 'px-2 py-0.5 text-xs',\n    md: 'px-2.5 py-1 text-xs',\n    lg: 'px-3 py-1.5 text-sm',\n  };\n  return sizes[size];\n}\n\n/**\n * Build a badge component\n */\nexport function badge(text: string, options: BadgeOptions = {}): string {\n  const {\n    variant = 'default',\n    size = 'md',\n    pill = false,\n    icon,\n    dot = false,\n    className = '',\n    removable = false,\n    onRemove,\n  } = options;\n\n  // Dot badge (status indicator)\n  if (dot) {\n    const dotVariants: Record<BadgeVariant, string> = {\n      default: 'bg-gray-400',\n      primary: 'bg-primary',\n      secondary: 'bg-secondary',\n      success: 'bg-success',\n      warning: 'bg-warning',\n      danger: 'bg-danger',\n      info: 'bg-blue-500',\n      outline: 'border border-current',\n    };\n\n    const dotClasses = ['inline-block rounded-full', getSizeClasses(size, true), dotVariants[variant], className]\n      .filter(Boolean)\n      .join(' ');\n\n    return `<span class=\"${dotClasses}\" aria-label=\"${escapeHtml(text)}\" title=\"${escapeHtml(text)}\"></span>`;\n  }\n\n  const variantClasses = getVariantClasses(variant);\n  const sizeClasses = getSizeClasses(size, false);\n\n  const baseClasses = [\n    'inline-flex items-center font-medium',\n    pill ? 'rounded-full' : 'rounded-md',\n    variantClasses,\n    sizeClasses,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const iconHtml = icon ? `<span class=\"mr-1\">${icon}</span>` : '';\n\n  const removeHtml = removable\n    ? `<button\n        type=\"button\"\n        class=\"ml-1.5 -mr-1 hover:opacity-70 transition-opacity\"\n        ${onRemove?.delete ? `hx-delete=\"${escapeHtml(onRemove.delete)}\"` : ''}\n        ${onRemove?.target ? `hx-target=\"${escapeHtml(onRemove.target)}\"` : ''}\n        ${onRemove?.swap ? `hx-swap=\"${escapeHtml(onRemove.swap)}\"` : ''}\n        ${onRemove?.confirm ? `hx-confirm=\"${escapeHtml(onRemove.confirm)}\"` : ''}\n        aria-label=\"Remove\"\n      >\n        <svg class=\"w-3 h-3\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n        </svg>\n      </button>`\n    : '';\n\n  return `<span class=\"${baseClasses}\">\n    ${iconHtml}${escapeHtml(text)}${removeHtml}\n  </span>`;\n}\n\n/**\n * Build a badge group\n */\nexport function badgeGroup(badges: string[], options: { gap?: 'sm' | 'md' | 'lg'; className?: string } = {}): string {\n  const { gap = 'sm', className = '' } = options;\n  const gapClasses = { sm: 'gap-1', md: 'gap-2', lg: 'gap-3' };\n\n  return `<div class=\"inline-flex flex-wrap ${gapClasses[gap]} ${className}\">\n    ${badges.join('\\n')}\n  </div>`;\n}\n\n// ============================================\n// Status Badge Presets\n// ============================================\n\n/** Active status badge */\nexport const activeBadge = (text = 'Active') => badge(text, { variant: 'success', dot: false });\n\n/** Inactive status badge */\nexport const inactiveBadge = (text = 'Inactive') => badge(text, { variant: 'default', dot: false });\n\n/** Pending status badge */\nexport const pendingBadge = (text = 'Pending') => badge(text, { variant: 'warning', dot: false });\n\n/** Error status badge */\nexport const errorBadge = (text = 'Error') => badge(text, { variant: 'danger', dot: false });\n\n/** New badge */\nexport const newBadge = (text = 'New') => badge(text, { variant: 'primary', size: 'sm', pill: true });\n\n/** Beta badge */\nexport const betaBadge = (text = 'Beta') => badge(text, { variant: 'secondary', size: 'sm', pill: true });\n\n// ============================================\n// Status Dot Presets\n// ============================================\n\n/** Online status dot */\nexport const onlineDot = (label = 'Online') => badge(label, { variant: 'success', dot: true });\n\n/** Offline status dot */\nexport const offlineDot = (label = 'Offline') => badge(label, { variant: 'default', dot: true });\n\n/** Busy status dot */\nexport const busyDot = (label = 'Busy') => badge(label, { variant: 'danger', dot: true });\n\n/** Away status dot */\nexport const awayDot = (label = 'Away') => badge(label, { variant: 'warning', dot: true });\n"]}

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

@@ -0,0 +1,109 @@
+/**
+ * @file badge.schema.ts
+ * @description Zod schemas for Badge component options validation.
+ *
+ * Provides strict validation schemas for badge options including variants,
+ * sizes, dot indicators, and removable badges with HTMX support.
+ *
+ * @example
+ * ```typescript
+ * import { BadgeOptionsSchema } from '@frontmcp/ui';
+ *
+ * const result = BadgeOptionsSchema.safeParse({ variant: 'success' });
+ * ```
+ *
+ * @module @frontmcp/ui/components/badge.schema
+ */
+import { z } from 'zod';
+/**
+ * Badge variant enum schema
+ */
+export declare const BadgeVariantSchema: z.ZodEnum<{
+    primary: "primary";
+    secondary: "secondary";
+    default: "default";
+    success: "success";
+    warning: "warning";
+    danger: "danger";
+    info: "info";
+    outline: "outline";
+}>;
+/**
+ * Badge variant type
+ */
+export type BadgeVariant = z.infer<typeof BadgeVariantSchema>;
+/**
+ * Badge size enum schema
+ */
+export declare const BadgeSizeSchema: z.ZodEnum<{
+    sm: "sm";
+    lg: "lg";
+    md: "md";
+}>;
+/**
+ * Badge size type
+ */
+export type BadgeSize = z.infer<typeof BadgeSizeSchema>;
+/**
+ * Remove button HTMX options schema
+ */
+export declare const BadgeOnRemoveSchema: z.ZodOptional<z.ZodObject<{
+    delete: z.ZodOptional<z.ZodString>;
+    target: z.ZodOptional<z.ZodString>;
+    swap: z.ZodOptional<z.ZodString>;
+    confirm: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>>;
+/**
+ * Badge onRemove type
+ */
+export type BadgeOnRemove = z.infer<typeof BadgeOnRemoveSchema>;
+/**
+ * Complete badge options schema
+ */
+export declare const BadgeOptionsSchema: z.ZodObject<{
+    variant: z.ZodOptional<z.ZodEnum<{
+        primary: "primary";
+        secondary: "secondary";
+        default: "default";
+        success: "success";
+        warning: "warning";
+        danger: "danger";
+        info: "info";
+        outline: "outline";
+    }>>;
+    size: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        lg: "lg";
+        md: "md";
+    }>>;
+    pill: z.ZodOptional<z.ZodBoolean>;
+    icon: z.ZodOptional<z.ZodString>;
+    dot: z.ZodOptional<z.ZodBoolean>;
+    className: z.ZodOptional<z.ZodString>;
+    removable: z.ZodOptional<z.ZodBoolean>;
+    onRemove: z.ZodOptional<z.ZodObject<{
+        delete: z.ZodOptional<z.ZodString>;
+        target: z.ZodOptional<z.ZodString>;
+        swap: z.ZodOptional<z.ZodString>;
+        confirm: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>>;
+}, z.core.$strict>;
+/**
+ * Badge options type (derived from schema)
+ */
+export type BadgeOptions = z.infer<typeof BadgeOptionsSchema>;
+/**
+ * Badge group options schema
+ */
+export declare const BadgeGroupOptionsSchema: z.ZodObject<{
+    gap: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        lg: "lg";
+        md: "md";
+    }>>;
+    className: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>;
+/**
+ * Badge group options type
+ */
+export type BadgeGroupOptions = z.infer<typeof BadgeGroupOptionsSchema>;

package/src/components/badge.schema.js

@@ -0,0 +1,96 @@
+"use strict";
+/**
+ * @file badge.schema.ts
+ * @description Zod schemas for Badge component options validation.
+ *
+ * Provides strict validation schemas for badge options including variants,
+ * sizes, dot indicators, and removable badges with HTMX support.
+ *
+ * @example
+ * ```typescript
+ * import { BadgeOptionsSchema } from '@frontmcp/ui';
+ *
+ * const result = BadgeOptionsSchema.safeParse({ variant: 'success' });
+ * ```
+ *
+ * @module @frontmcp/ui/components/badge.schema
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgeGroupOptionsSchema = exports.BadgeOptionsSchema = exports.BadgeOnRemoveSchema = exports.BadgeSizeSchema = exports.BadgeVariantSchema = void 0;
+const zod_1 = require("zod");
+// ============================================
+// Variant and Size Schemas
+// ============================================
+/**
+ * Badge variant enum schema
+ */
+exports.BadgeVariantSchema = zod_1.z.enum([
+    'default',
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+    'danger',
+    'info',
+    'outline',
+]);
+/**
+ * Badge size enum schema
+ */
+exports.BadgeSizeSchema = zod_1.z.enum(['sm', 'md', 'lg']);
+// ============================================
+// OnRemove Schema
+// ============================================
+/**
+ * Remove button HTMX options schema
+ */
+exports.BadgeOnRemoveSchema = zod_1.z
+    .object({
+    delete: zod_1.z.string().optional(),
+    target: zod_1.z.string().optional(),
+    swap: zod_1.z.string().optional(),
+    confirm: zod_1.z.string().optional(),
+})
+    .strict()
+    .optional();
+// ============================================
+// Badge Options Schema
+// ============================================
+/**
+ * Complete badge options schema
+ */
+exports.BadgeOptionsSchema = zod_1.z
+    .object({
+    /** Badge variant */
+    variant: exports.BadgeVariantSchema.optional(),
+    /** Badge size */
+    size: exports.BadgeSizeSchema.optional(),
+    /** Rounded pill style */
+    pill: zod_1.z.boolean().optional(),
+    /** Icon before text (HTML string) */
+    icon: zod_1.z.string().optional(),
+    /** Dot indicator (no text) */
+    dot: zod_1.z.boolean().optional(),
+    /** Additional CSS classes */
+    className: zod_1.z.string().optional(),
+    /** Removable badge */
+    removable: zod_1.z.boolean().optional(),
+    /** Remove button HTMX options */
+    onRemove: exports.BadgeOnRemoveSchema,
+})
+    .strict();
+// ============================================
+// Badge Group Schema
+// ============================================
+/**
+ * Badge group options schema
+ */
+exports.BadgeGroupOptionsSchema = zod_1.z
+    .object({
+    /** Gap between badges */
+    gap: zod_1.z.enum(['sm', 'md', 'lg']).optional(),
+    /** Additional CSS classes */
+    className: zod_1.z.string().optional(),
+})
+    .strict();
+//# sourceMappingURL=badge.schema.js.map

package/src/components/badge.schema.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.schema.js","sourceRoot":"","sources":["../../../src/components/badge.schema.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;;;AAEH,6BAAwB;AAExB,+CAA+C;AAC/C,2BAA2B;AAC3B,+CAA+C;AAE/C;;GAEG;AACU,QAAA,kBAAkB,GAAG,OAAC,CAAC,IAAI,CAAC;IACvC,SAAS;IACT,SAAS;IACT,WAAW;IACX,SAAS;IACT,SAAS;IACT,QAAQ;IACR,MAAM;IACN,SAAS;CACV,CAAC,CAAC;AAOH;;GAEG;AACU,QAAA,eAAe,GAAG,OAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;AAO1D,+CAA+C;AAC/C,kBAAkB;AAClB,+CAA+C;AAE/C;;GAEG;AACU,QAAA,mBAAmB,GAAG,OAAC;KACjC,MAAM,CAAC;IACN,MAAM,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC7B,MAAM,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC7B,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC3B,OAAO,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;CAC/B,CAAC;KACD,MAAM,EAAE;KACR,QAAQ,EAAE,CAAC;AAOd,+CAA+C;AAC/C,uBAAuB;AACvB,+CAA+C;AAE/C;;GAEG;AACU,QAAA,kBAAkB,GAAG,OAAC;KAChC,MAAM,CAAC;IACN,oBAAoB;IACpB,OAAO,EAAE,0BAAkB,CAAC,QAAQ,EAAE;IACtC,iBAAiB;IACjB,IAAI,EAAE,uBAAe,CAAC,QAAQ,EAAE;IAChC,yBAAyB;IACzB,IAAI,EAAE,OAAC,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE;IAC5B,qCAAqC;IACrC,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC3B,8BAA8B;IAC9B,GAAG,EAAE,OAAC,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE;IAC3B,6BAA6B;IAC7B,SAAS,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAChC,sBAAsB;IACtB,SAAS,EAAE,OAAC,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE;IACjC,iCAAiC;IACjC,QAAQ,EAAE,2BAAmB;CAC9B,CAAC;KACD,MAAM,EAAE,CAAC;AAOZ,+CAA+C;AAC/C,qBAAqB;AACrB,+CAA+C;AAE/C;;GAEG;AACU,QAAA,uBAAuB,GAAG,OAAC;KACrC,MAAM,CAAC;IACN,yBAAyB;IACzB,GAAG,EAAE,OAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,QAAQ,EAAE;IAC1C,6BAA6B;IAC7B,SAAS,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;CACjC,CAAC;KACD,MAAM,EAAE,CAAC","sourcesContent":["/**\n * @file badge.schema.ts\n * @description Zod schemas for Badge component options validation.\n *\n * Provides strict validation schemas for badge options including variants,\n * sizes, dot indicators, and removable badges with HTMX support.\n *\n * @example\n * ```typescript\n * import { BadgeOptionsSchema } from '@frontmcp/ui';\n *\n * const result = BadgeOptionsSchema.safeParse({ variant: 'success' });\n * ```\n *\n * @module @frontmcp/ui/components/badge.schema\n */\n\nimport { z } from 'zod';\n\n// ============================================\n// Variant and Size Schemas\n// ============================================\n\n/**\n * Badge variant enum schema\n */\nexport const BadgeVariantSchema = z.enum([\n  'default',\n  'primary',\n  'secondary',\n  'success',\n  'warning',\n  'danger',\n  'info',\n  'outline',\n]);\n\n/**\n * Badge variant type\n */\nexport type BadgeVariant = z.infer<typeof BadgeVariantSchema>;\n\n/**\n * Badge size enum schema\n */\nexport const BadgeSizeSchema = z.enum(['sm', 'md', 'lg']);\n\n/**\n * Badge size type\n */\nexport type BadgeSize = z.infer<typeof BadgeSizeSchema>;\n\n// ============================================\n// OnRemove Schema\n// ============================================\n\n/**\n * Remove button HTMX options schema\n */\nexport const BadgeOnRemoveSchema = z\n  .object({\n    delete: z.string().optional(),\n    target: z.string().optional(),\n    swap: z.string().optional(),\n    confirm: z.string().optional(),\n  })\n  .strict()\n  .optional();\n\n/**\n * Badge onRemove type\n */\nexport type BadgeOnRemove = z.infer<typeof BadgeOnRemoveSchema>;\n\n// ============================================\n// Badge Options Schema\n// ============================================\n\n/**\n * Complete badge options schema\n */\nexport const BadgeOptionsSchema = z\n  .object({\n    /** Badge variant */\n    variant: BadgeVariantSchema.optional(),\n    /** Badge size */\n    size: BadgeSizeSchema.optional(),\n    /** Rounded pill style */\n    pill: z.boolean().optional(),\n    /** Icon before text (HTML string) */\n    icon: z.string().optional(),\n    /** Dot indicator (no text) */\n    dot: z.boolean().optional(),\n    /** Additional CSS classes */\n    className: z.string().optional(),\n    /** Removable badge */\n    removable: z.boolean().optional(),\n    /** Remove button HTMX options */\n    onRemove: BadgeOnRemoveSchema,\n  })\n  .strict();\n\n/**\n * Badge options type (derived from schema)\n */\nexport type BadgeOptions = z.infer<typeof BadgeOptionsSchema>;\n\n// ============================================\n// Badge Group Schema\n// ============================================\n\n/**\n * Badge group options schema\n */\nexport const BadgeGroupOptionsSchema = z\n  .object({\n    /** Gap between badges */\n    gap: z.enum(['sm', 'md', 'lg']).optional(),\n    /** Additional CSS classes */\n    className: z.string().optional(),\n  })\n  .strict();\n\n/**\n * Badge group options type\n */\nexport type BadgeGroupOptions = z.infer<typeof BadgeGroupOptionsSchema>;\n"]}

package/src/components/button.d.ts

@@ -0,0 +1,111 @@
+/**
+ * @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
+ */
+import { type ButtonOptions, type ButtonVariant, type ButtonSize, type ButtonGroupOptions } from './button.schema';
+export type { ButtonOptions, ButtonVariant, ButtonSize, ButtonGroupOptions };
+/**
+ * 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.
+ */
+export declare function button(text: string, options?: ButtonOptions): string;
+/**
+ * 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
+ */
+export declare function buttonGroup(buttons: string[], options?: ButtonGroupOptions): string;
+/** Primary button shorthand */
+export declare const primaryButton: (text: string, opts?: Omit<ButtonOptions, "variant">) => string;
+/** Secondary button shorthand */
+export declare const secondaryButton: (text: string, opts?: Omit<ButtonOptions, "variant">) => string;
+/** Outline button shorthand */
+export declare const outlineButton: (text: string, opts?: Omit<ButtonOptions, "variant">) => string;
+/** Ghost button shorthand */
+export declare const ghostButton: (text: string, opts?: Omit<ButtonOptions, "variant">) => string;
+/** Danger button shorthand */
+export declare const dangerButton: (text: string, opts?: Omit<ButtonOptions, "variant">) => string;
+/** Link button shorthand */
+export declare const linkButton: (text: string, opts?: Omit<ButtonOptions, "variant">) => string;