@frontmcp/ui 0.5.1 → 0.6.0

package/src/components/alert.schema.js

@@ -1,105 +0,0 @@
-"use strict";
-/**
- * @file alert.schema.ts
- * @description Zod schemas for Alert and Toast component options validation.
- *
- * Provides strict validation schemas for alert options including variants,
- * dismissible alerts, and toast notifications with positioning.
- *
- * @example
- * ```typescript
- * import { AlertOptionsSchema, ToastOptionsSchema } from '@frontmcp/ui';
- *
- * const alertResult = AlertOptionsSchema.safeParse({ variant: 'success' });
- * const toastResult = ToastOptionsSchema.safeParse({ position: 'top-right' });
- * ```
- *
- * @module @frontmcp/ui/components/alert.schema
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToastOptionsSchema = exports.ToastPositionSchema = exports.AlertOptionsSchema = exports.AlertOnDismissSchema = exports.AlertVariantSchema = void 0;
-const zod_1 = require("zod");
-// ============================================
-// Variant Schema
-// ============================================
-/**
- * Alert variant enum schema
- */
-exports.AlertVariantSchema = zod_1.z.enum(['info', 'success', 'warning', 'danger', 'neutral']);
-// ============================================
-// OnDismiss Schema
-// ============================================
-/**
- * Dismiss button HTMX options schema
- */
-exports.AlertOnDismissSchema = zod_1.z
-    .object({
-    delete: zod_1.z.string().optional(),
-    target: zod_1.z.string().optional(),
-    swap: zod_1.z.string().optional(),
-})
-    .strict()
-    .optional();
-// ============================================
-// Alert Options Schema
-// ============================================
-/**
- * Complete alert options schema
- */
-exports.AlertOptionsSchema = zod_1.z
-    .object({
-    /** Alert variant */
-    variant: exports.AlertVariantSchema.optional(),
-    /** Alert title */
-    title: zod_1.z.string().optional(),
-    /** Show icon */
-    showIcon: zod_1.z.boolean().optional(),
-    /** Custom icon (HTML string, overrides default) */
-    icon: zod_1.z.string().optional(),
-    /** Dismissible alert */
-    dismissible: zod_1.z.boolean().optional(),
-    /** Additional CSS classes */
-    className: zod_1.z.string().optional(),
-    /** Alert ID */
-    id: zod_1.z.string().optional(),
-    /** Actions (HTML string for buttons) */
-    actions: zod_1.z.string().optional(),
-    /** HTMX for dismiss */
-    onDismiss: exports.AlertOnDismissSchema,
-})
-    .strict();
-// ============================================
-// Toast Position Schema
-// ============================================
-/**
- * Toast position enum schema
- */
-exports.ToastPositionSchema = zod_1.z.enum([
-    'top-right',
-    'top-left',
-    'bottom-right',
-    'bottom-left',
-    'top-center',
-    'bottom-center',
-]);
-// ============================================
-// Toast Options Schema
-// ============================================
-/**
- * Complete toast options schema
- */
-exports.ToastOptionsSchema = zod_1.z
-    .object({
-    /** Toast variant */
-    variant: exports.AlertVariantSchema.optional(),
-    /** Toast title */
-    title: zod_1.z.string().optional(),
-    /** Duration in ms (0 = no auto-dismiss) */
-    duration: zod_1.z.number().min(0).optional(),
-    /** Position */
-    position: exports.ToastPositionSchema.optional(),
-    /** Toast ID */
-    id: zod_1.z.string().optional(),
-})
-    .strict();
-//# sourceMappingURL=alert.schema.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"alert.schema.js","sourceRoot":"","sources":["../../../src/components/alert.schema.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;GAgBG;;;AAEH,6BAAwB;AAExB,+CAA+C;AAC/C,iBAAiB;AACjB,+CAA+C;AAE/C;;GAEG;AACU,QAAA,kBAAkB,GAAG,OAAC,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC,CAAC;AAO9F,+CAA+C;AAC/C,mBAAmB;AACnB,+CAA+C;AAE/C;;GAEG;AACU,QAAA,oBAAoB,GAAG,OAAC;KAClC,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;CAC5B,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,kBAAkB;IAClB,KAAK,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC5B,gBAAgB;IAChB,QAAQ,EAAE,OAAC,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE;IAChC,mDAAmD;IACnD,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC3B,wBAAwB;IACxB,WAAW,EAAE,OAAC,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE;IACnC,6BAA6B;IAC7B,SAAS,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAChC,eAAe;IACf,EAAE,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IACzB,wCAAwC;IACxC,OAAO,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC9B,uBAAuB;IACvB,SAAS,EAAE,4BAAoB;CAChC,CAAC;KACD,MAAM,EAAE,CAAC;AAOZ,+CAA+C;AAC/C,wBAAwB;AACxB,+CAA+C;AAE/C;;GAEG;AACU,QAAA,mBAAmB,GAAG,OAAC,CAAC,IAAI,CAAC;IACxC,WAAW;IACX,UAAU;IACV,cAAc;IACd,aAAa;IACb,YAAY;IACZ,eAAe;CAChB,CAAC,CAAC;AAOH,+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,kBAAkB;IAClB,KAAK,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC5B,2CAA2C;IAC3C,QAAQ,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE;IACtC,eAAe;IACf,QAAQ,EAAE,2BAAmB,CAAC,QAAQ,EAAE;IACxC,eAAe;IACf,EAAE,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;CAC1B,CAAC;KACD,MAAM,EAAE,CAAC","sourcesContent":["/**\n * @file alert.schema.ts\n * @description Zod schemas for Alert and Toast component options validation.\n *\n * Provides strict validation schemas for alert options including variants,\n * dismissible alerts, and toast notifications with positioning.\n *\n * @example\n * ```typescript\n * import { AlertOptionsSchema, ToastOptionsSchema } from '@frontmcp/ui';\n *\n * const alertResult = AlertOptionsSchema.safeParse({ variant: 'success' });\n * const toastResult = ToastOptionsSchema.safeParse({ position: 'top-right' });\n * ```\n *\n * @module @frontmcp/ui/components/alert.schema\n */\n\nimport { z } from 'zod';\n\n// ============================================\n// Variant Schema\n// ============================================\n\n/**\n * Alert variant enum schema\n */\nexport const AlertVariantSchema = z.enum(['info', 'success', 'warning', 'danger', 'neutral']);\n\n/**\n * Alert variant type\n */\nexport type AlertVariant = z.infer<typeof AlertVariantSchema>;\n\n// ============================================\n// OnDismiss Schema\n// ============================================\n\n/**\n * Dismiss button HTMX options schema\n */\nexport const AlertOnDismissSchema = z\n  .object({\n    delete: z.string().optional(),\n    target: z.string().optional(),\n    swap: z.string().optional(),\n  })\n  .strict()\n  .optional();\n\n/**\n * Alert onDismiss type\n */\nexport type AlertOnDismiss = z.infer<typeof AlertOnDismissSchema>;\n\n// ============================================\n// Alert Options Schema\n// ============================================\n\n/**\n * Complete alert options schema\n */\nexport const AlertOptionsSchema = z\n  .object({\n    /** Alert variant */\n    variant: AlertVariantSchema.optional(),\n    /** Alert title */\n    title: z.string().optional(),\n    /** Show icon */\n    showIcon: z.boolean().optional(),\n    /** Custom icon (HTML string, overrides default) */\n    icon: z.string().optional(),\n    /** Dismissible alert */\n    dismissible: z.boolean().optional(),\n    /** Additional CSS classes */\n    className: z.string().optional(),\n    /** Alert ID */\n    id: z.string().optional(),\n    /** Actions (HTML string for buttons) */\n    actions: z.string().optional(),\n    /** HTMX for dismiss */\n    onDismiss: AlertOnDismissSchema,\n  })\n  .strict();\n\n/**\n * Alert options type (derived from schema)\n */\nexport type AlertOptions = z.infer<typeof AlertOptionsSchema>;\n\n// ============================================\n// Toast Position Schema\n// ============================================\n\n/**\n * Toast position enum schema\n */\nexport const ToastPositionSchema = z.enum([\n  'top-right',\n  'top-left',\n  'bottom-right',\n  'bottom-left',\n  'top-center',\n  'bottom-center',\n]);\n\n/**\n * Toast position type\n */\nexport type ToastPosition = z.infer<typeof ToastPositionSchema>;\n\n// ============================================\n// Toast Options Schema\n// ============================================\n\n/**\n * Complete toast options schema\n */\nexport const ToastOptionsSchema = z\n  .object({\n    /** Toast variant */\n    variant: AlertVariantSchema.optional(),\n    /** Toast title */\n    title: z.string().optional(),\n    /** Duration in ms (0 = no auto-dismiss) */\n    duration: z.number().min(0).optional(),\n    /** Position */\n    position: ToastPositionSchema.optional(),\n    /** Toast ID */\n    id: z.string().optional(),\n  })\n  .strict();\n\n/**\n * Toast options type (derived from schema)\n */\nexport type ToastOptions = z.infer<typeof ToastOptionsSchema>;\n"]}

package/src/components/avatar.d.ts

@@ -1,76 +0,0 @@
-/**
- * Avatar Component
- *
- * User avatars and avatar groups.
- */
-/**
- * Avatar size options
- */
-export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-/**
- * Avatar shape options
- */
-export type AvatarShape = 'circle' | 'square' | 'rounded';
-/**
- * Avatar status options
- */
-export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away' | 'none';
-/**
- * Avatar component options
- */
-export interface AvatarOptions {
-    /** Image source URL */
-    src?: string;
-    /** Alt text / name */
-    alt: string;
-    /** Avatar size */
-    size?: AvatarSize;
-    /** Avatar shape */
-    shape?: AvatarShape;
-    /** Status indicator */
-    status?: AvatarStatus;
-    /** Additional CSS classes */
-    className?: string;
-    /** Click handler URL */
-    href?: string;
-    /** Custom initials (overrides auto-generation) */
-    initials?: string;
-    /** Background color for initials (CSS color) */
-    bgColor?: string;
-}
-/**
- * Build an avatar component
- */
-export declare function avatar(options: AvatarOptions): string;
-/**
- * Avatar group options
- */
-export interface AvatarGroupOptions {
-    /** Maximum visible avatars */
-    max?: number;
-    /** Avatar size */
-    size?: AvatarSize;
-    /** Overlap amount */
-    spacing?: 'tight' | 'normal' | 'loose';
-    /** Additional CSS classes */
-    className?: string;
-}
-/**
- * Build an avatar group
- */
-export declare function avatarGroup(avatars: AvatarOptions[], options?: AvatarGroupOptions): string;
-/**
- * Avatar with name/details options
- */
-export interface AvatarWithTextOptions extends AvatarOptions {
-    /** Primary text (name) */
-    name: string;
-    /** Secondary text (email, role, etc.) */
-    subtitle?: string;
-    /** Text alignment */
-    align?: 'left' | 'right';
-}
-/**
- * Build avatar with name and details
- */
-export declare function avatarWithText(options: AvatarWithTextOptions): string;

package/src/components/avatar.js

@@ -1,176 +0,0 @@
-"use strict";
-/**
- * Avatar Component
- *
- * User avatars and avatar groups.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.avatar = avatar;
-exports.avatarGroup = avatarGroup;
-exports.avatarWithText = avatarWithText;
-const base_1 = require("../layouts/base");
-// ============================================
-// Avatar Helpers
-// ============================================
-/**
- * Get size CSS classes
- */
-function getSizeClasses(size) {
-    const sizes = {
-        xs: { container: 'w-6 h-6', text: 'text-xs', status: 'w-2 h-2 border' },
-        sm: { container: 'w-8 h-8', text: 'text-xs', status: 'w-2.5 h-2.5 border' },
-        md: { container: 'w-10 h-10', text: 'text-sm', status: 'w-3 h-3 border-2' },
-        lg: { container: 'w-12 h-12', text: 'text-base', status: 'w-3.5 h-3.5 border-2' },
-        xl: { container: 'w-16 h-16', text: 'text-lg', status: 'w-4 h-4 border-2' },
-        '2xl': { container: 'w-24 h-24', text: 'text-2xl', status: 'w-5 h-5 border-2' },
-    };
-    return sizes[size];
-}
-/**
- * Get shape CSS classes
- */
-function getShapeClasses(shape) {
-    const shapes = {
-        circle: 'rounded-full',
-        square: 'rounded-none',
-        rounded: 'rounded-lg',
-    };
-    return shapes[shape];
-}
-/**
- * Get status CSS classes
- */
-function getStatusClasses(status) {
-    const statuses = {
-        online: 'bg-success',
-        offline: 'bg-gray-400',
-        busy: 'bg-danger',
-        away: 'bg-warning',
-        none: '',
-    };
-    return statuses[status];
-}
-/**
- * Generate initials from name
- */
-function generateInitials(name) {
-    const parts = name.trim().split(/\s+/);
-    if (parts.length === 1) {
-        return parts[0].charAt(0).toUpperCase();
-    }
-    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
-}
-/**
- * Generate background color from name (deterministic)
- */
-function generateBgColor(name) {
-    const colors = [
-        'bg-blue-500',
-        'bg-green-500',
-        'bg-yellow-500',
-        'bg-purple-500',
-        'bg-pink-500',
-        'bg-indigo-500',
-        'bg-red-500',
-        'bg-orange-500',
-        'bg-teal-500',
-        'bg-cyan-500',
-    ];
-    let hash = 0;
-    for (let i = 0; i < name.length; i++) {
-        hash = name.charCodeAt(i) + ((hash << 5) - hash);
-    }
-    return colors[Math.abs(hash) % colors.length];
-}
-// ============================================
-// Avatar Builder
-// ============================================
-/**
- * Build an avatar component
- */
-function avatar(options) {
-    const { src, alt, size = 'md', shape = 'circle', status = 'none', className = '', href, initials, bgColor } = options;
-    const sizeClasses = getSizeClasses(size);
-    const shapeClasses = getShapeClasses(shape);
-    const statusColor = getStatusClasses(status);
-    const displayInitials = initials || generateInitials(alt);
-    const displayBgColor = bgColor || generateBgColor(alt);
-    const containerClasses = [
-        'relative inline-flex items-center justify-center',
-        'overflow-hidden',
-        sizeClasses.container,
-        shapeClasses,
-        className,
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const contentHtml = src
-        ? `<img src="${(0, base_1.escapeHtml)(src)}" alt="${(0, base_1.escapeHtml)(alt)}" class="w-full h-full object-cover">`
-        : `<span class="font-medium text-white ${sizeClasses.text}">${(0, base_1.escapeHtml)(displayInitials)}</span>`;
-    const bgClasses = src ? 'bg-gray-200' : displayBgColor;
-    const statusHtml = status !== 'none'
-        ? `<span class="absolute bottom-0 right-0 block ${sizeClasses.status} ${shapeClasses} ${statusColor} border-white"></span>`
-        : '';
-    const innerHtml = `
-    <div class="${containerClasses} ${bgClasses}">
-      ${contentHtml}
-      ${statusHtml}
-    </div>
-  `;
-    if (href) {
-        return `<a href="${(0, base_1.escapeHtml)(href)}" class="inline-block">${innerHtml}</a>`;
-    }
-    return innerHtml;
-}
-/**
- * Build an avatar group
- */
-function avatarGroup(avatars, options = {}) {
-    const { max = 5, size = 'md', spacing = 'normal', className = '' } = options;
-    const spacingClasses = {
-        tight: '-space-x-3',
-        normal: '-space-x-2',
-        loose: '-space-x-1',
-    };
-    const visibleAvatars = avatars.slice(0, max);
-    const remainingCount = avatars.length - max;
-    const avatarsHtml = visibleAvatars
-        .map((opts, index) => {
-        const avatarHtml = avatar({ ...opts, size });
-        return `<div class="relative ring-2 ring-white rounded-full" style="z-index: ${visibleAvatars.length - index}">
-        ${avatarHtml}
-      </div>`;
-    })
-        .join('\n');
-    const sizeClasses = getSizeClasses(size);
-    const overflowHtml = remainingCount > 0
-        ? `<div class="relative ring-2 ring-white rounded-full" style="z-index: 0">
-        <div class="${sizeClasses.container} rounded-full bg-gray-200 flex items-center justify-center">
-          <span class="${sizeClasses.text} font-medium text-gray-600">+${remainingCount}</span>
-        </div>
-      </div>`
-        : '';
-    return `<div class="flex ${spacingClasses[spacing]} ${className}">
-    ${avatarsHtml}
-    ${overflowHtml}
-  </div>`;
-}
-/**
- * Build avatar with name and details
- */
-function avatarWithText(options) {
-    const { name, subtitle, align = 'left', ...avatarOptions } = options;
-    const avatarHtml = avatar({ ...avatarOptions, alt: avatarOptions.alt || name });
-    const textHtml = `
-    <div class="${align === 'right' ? 'text-right' : ''}">
-      <div class="font-medium text-text-primary">${(0, base_1.escapeHtml)(name)}</div>
-      ${subtitle ? `<div class="text-sm text-text-secondary">${(0, base_1.escapeHtml)(subtitle)}</div>` : ''}
-    </div>
-  `;
-    const flexDirection = align === 'right' ? 'flex-row-reverse' : 'flex-row';
-    return `<div class="flex items-center gap-3 ${flexDirection}">
-    ${avatarHtml}
-    ${textHtml}
-  </div>`;
-}
-//# sourceMappingURL=avatar.js.map

package/src/components/avatar.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Avatar Component\n *\n * User avatars and avatar groups.\n */\n\nimport { escapeHtml } from '../layouts/base';\n\n// ============================================\n// Avatar Types\n// ============================================\n\n/**\n * Avatar size options\n */\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/**\n * Avatar shape options\n */\nexport type AvatarShape = 'circle' | 'square' | 'rounded';\n\n/**\n * Avatar status options\n */\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away' | 'none';\n\n/**\n * Avatar component options\n */\nexport interface AvatarOptions {\n  /** Image source URL */\n  src?: string;\n  /** Alt text / name */\n  alt: string;\n  /** Avatar size */\n  size?: AvatarSize;\n  /** Avatar shape */\n  shape?: AvatarShape;\n  /** Status indicator */\n  status?: AvatarStatus;\n  /** Additional CSS classes */\n  className?: string;\n  /** Click handler URL */\n  href?: string;\n  /** Custom initials (overrides auto-generation) */\n  initials?: string;\n  /** Background color for initials (CSS color) */\n  bgColor?: string;\n}\n\n// ============================================\n// Avatar Helpers\n// ============================================\n\n/**\n * Get size CSS classes\n */\nfunction getSizeClasses(size: AvatarSize): { container: string; text: string; status: string } {\n  const sizes: Record<AvatarSize, { container: string; text: string; status: string }> = {\n    xs: { container: 'w-6 h-6', text: 'text-xs', status: 'w-2 h-2 border' },\n    sm: { container: 'w-8 h-8', text: 'text-xs', status: 'w-2.5 h-2.5 border' },\n    md: { container: 'w-10 h-10', text: 'text-sm', status: 'w-3 h-3 border-2' },\n    lg: { container: 'w-12 h-12', text: 'text-base', status: 'w-3.5 h-3.5 border-2' },\n    xl: { container: 'w-16 h-16', text: 'text-lg', status: 'w-4 h-4 border-2' },\n    '2xl': { container: 'w-24 h-24', text: 'text-2xl', status: 'w-5 h-5 border-2' },\n  };\n  return sizes[size];\n}\n\n/**\n * Get shape CSS classes\n */\nfunction getShapeClasses(shape: AvatarShape): string {\n  const shapes: Record<AvatarShape, string> = {\n    circle: 'rounded-full',\n    square: 'rounded-none',\n    rounded: 'rounded-lg',\n  };\n  return shapes[shape];\n}\n\n/**\n * Get status CSS classes\n */\nfunction getStatusClasses(status: AvatarStatus): string {\n  const statuses: Record<AvatarStatus, string> = {\n    online: 'bg-success',\n    offline: 'bg-gray-400',\n    busy: 'bg-danger',\n    away: 'bg-warning',\n    none: '',\n  };\n  return statuses[status];\n}\n\n/**\n * Generate initials from name\n */\nfunction generateInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/);\n  if (parts.length === 1) {\n    return parts[0].charAt(0).toUpperCase();\n  }\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();\n}\n\n/**\n * Generate background color from name (deterministic)\n */\nfunction generateBgColor(name: string): string {\n  const colors = [\n    'bg-blue-500',\n    'bg-green-500',\n    'bg-yellow-500',\n    'bg-purple-500',\n    'bg-pink-500',\n    'bg-indigo-500',\n    'bg-red-500',\n    'bg-orange-500',\n    'bg-teal-500',\n    'bg-cyan-500',\n  ];\n  let hash = 0;\n  for (let i = 0; i < name.length; i++) {\n    hash = name.charCodeAt(i) + ((hash << 5) - hash);\n  }\n  return colors[Math.abs(hash) % colors.length];\n}\n\n// ============================================\n// Avatar Builder\n// ============================================\n\n/**\n * Build an avatar component\n */\nexport function avatar(options: AvatarOptions): string {\n  const { src, alt, size = 'md', shape = 'circle', status = 'none', className = '', href, initials, bgColor } = options;\n\n  const sizeClasses = getSizeClasses(size);\n  const shapeClasses = getShapeClasses(shape);\n  const statusColor = getStatusClasses(status);\n\n  const displayInitials = initials || generateInitials(alt);\n  const displayBgColor = bgColor || generateBgColor(alt);\n\n  const containerClasses = [\n    'relative inline-flex items-center justify-center',\n    'overflow-hidden',\n    sizeClasses.container,\n    shapeClasses,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const contentHtml = src\n    ? `<img src=\"${escapeHtml(src)}\" alt=\"${escapeHtml(alt)}\" class=\"w-full h-full object-cover\">`\n    : `<span class=\"font-medium text-white ${sizeClasses.text}\">${escapeHtml(displayInitials)}</span>`;\n\n  const bgClasses = src ? 'bg-gray-200' : displayBgColor;\n\n  const statusHtml =\n    status !== 'none'\n      ? `<span class=\"absolute bottom-0 right-0 block ${sizeClasses.status} ${shapeClasses} ${statusColor} border-white\"></span>`\n      : '';\n\n  const innerHtml = `\n    <div class=\"${containerClasses} ${bgClasses}\">\n      ${contentHtml}\n      ${statusHtml}\n    </div>\n  `;\n\n  if (href) {\n    return `<a href=\"${escapeHtml(href)}\" class=\"inline-block\">${innerHtml}</a>`;\n  }\n\n  return innerHtml;\n}\n\n// ============================================\n// Avatar Group\n// ============================================\n\n/**\n * Avatar group options\n */\nexport interface AvatarGroupOptions {\n  /** Maximum visible avatars */\n  max?: number;\n  /** Avatar size */\n  size?: AvatarSize;\n  /** Overlap amount */\n  spacing?: 'tight' | 'normal' | 'loose';\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Build an avatar group\n */\nexport function avatarGroup(avatars: AvatarOptions[], options: AvatarGroupOptions = {}): string {\n  const { max = 5, size = 'md', spacing = 'normal', className = '' } = options;\n\n  const spacingClasses: Record<string, string> = {\n    tight: '-space-x-3',\n    normal: '-space-x-2',\n    loose: '-space-x-1',\n  };\n\n  const visibleAvatars = avatars.slice(0, max);\n  const remainingCount = avatars.length - max;\n\n  const avatarsHtml = visibleAvatars\n    .map((opts, index) => {\n      const avatarHtml = avatar({ ...opts, size });\n      return `<div class=\"relative ring-2 ring-white rounded-full\" style=\"z-index: ${visibleAvatars.length - index}\">\n        ${avatarHtml}\n      </div>`;\n    })\n    .join('\\n');\n\n  const sizeClasses = getSizeClasses(size);\n  const overflowHtml =\n    remainingCount > 0\n      ? `<div class=\"relative ring-2 ring-white rounded-full\" style=\"z-index: 0\">\n        <div class=\"${sizeClasses.container} rounded-full bg-gray-200 flex items-center justify-center\">\n          <span class=\"${sizeClasses.text} font-medium text-gray-600\">+${remainingCount}</span>\n        </div>\n      </div>`\n      : '';\n\n  return `<div class=\"flex ${spacingClasses[spacing]} ${className}\">\n    ${avatarsHtml}\n    ${overflowHtml}\n  </div>`;\n}\n\n// ============================================\n// Avatar with Text\n// ============================================\n\n/**\n * Avatar with name/details options\n */\nexport interface AvatarWithTextOptions extends AvatarOptions {\n  /** Primary text (name) */\n  name: string;\n  /** Secondary text (email, role, etc.) */\n  subtitle?: string;\n  /** Text alignment */\n  align?: 'left' | 'right';\n}\n\n/**\n * Build avatar with name and details\n */\nexport function avatarWithText(options: AvatarWithTextOptions): string {\n  const { name, subtitle, align = 'left', ...avatarOptions } = options;\n\n  const avatarHtml = avatar({ ...avatarOptions, alt: avatarOptions.alt || name });\n\n  const textHtml = `\n    <div class=\"${align === 'right' ? 'text-right' : ''}\">\n      <div class=\"font-medium text-text-primary\">${escapeHtml(name)}</div>\n      ${subtitle ? `<div class=\"text-sm text-text-secondary\">${escapeHtml(subtitle)}</div>` : ''}\n    </div>\n  `;\n\n  const flexDirection = align === 'right' ? 'flex-row-reverse' : 'flex-row';\n\n  return `<div class=\"flex items-center gap-3 ${flexDirection}\">\n    ${avatarHtml}\n    ${textHtml}\n  </div>`;\n}\n"]}

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

@@ -1,169 +0,0 @@
-/**
- * @file avatar.schema.ts
- * @description Zod schemas for Avatar component options validation.
- *
- * Provides strict validation schemas for avatar options including sizes,
- * shapes, status indicators, and avatar groups with text.
- *
- * @example
- * ```typescript
- * import { AvatarOptionsSchema } from '@frontmcp/ui';
- *
- * const result = AvatarOptionsSchema.safeParse({
- *   alt: 'John Doe',
- *   size: 'lg',
- * });
- * ```
- *
- * @module @frontmcp/ui/components/avatar.schema
- */
-import { z } from 'zod';
-/**
- * Avatar size enum schema
- */
-export declare const AvatarSizeSchema: z.ZodEnum<{
-    xs: "xs";
-    sm: "sm";
-    lg: "lg";
-    xl: "xl";
-    "2xl": "2xl";
-    md: "md";
-}>;
-/**
- * Avatar size type
- */
-export type AvatarSize = z.infer<typeof AvatarSizeSchema>;
-/**
- * Avatar shape enum schema
- */
-export declare const AvatarShapeSchema: z.ZodEnum<{
-    circle: "circle";
-    square: "square";
-    rounded: "rounded";
-}>;
-/**
- * Avatar shape type
- */
-export type AvatarShape = z.infer<typeof AvatarShapeSchema>;
-/**
- * Avatar status enum schema
- */
-export declare const AvatarStatusSchema: z.ZodEnum<{
-    none: "none";
-    online: "online";
-    offline: "offline";
-    busy: "busy";
-    away: "away";
-}>;
-/**
- * Avatar status type
- */
-export type AvatarStatus = z.infer<typeof AvatarStatusSchema>;
-/**
- * Complete avatar options schema
- */
-export declare const AvatarOptionsSchema: z.ZodObject<{
-    src: z.ZodOptional<z.ZodString>;
-    alt: z.ZodString;
-    size: z.ZodOptional<z.ZodEnum<{
-        xs: "xs";
-        sm: "sm";
-        lg: "lg";
-        xl: "xl";
-        "2xl": "2xl";
-        md: "md";
-    }>>;
-    shape: z.ZodOptional<z.ZodEnum<{
-        circle: "circle";
-        square: "square";
-        rounded: "rounded";
-    }>>;
-    status: z.ZodOptional<z.ZodEnum<{
-        none: "none";
-        online: "online";
-        offline: "offline";
-        busy: "busy";
-        away: "away";
-    }>>;
-    className: z.ZodOptional<z.ZodString>;
-    href: z.ZodOptional<z.ZodString>;
-    initials: z.ZodOptional<z.ZodString>;
-    bgColor: z.ZodOptional<z.ZodString>;
-}, z.core.$strict>;
-/**
- * Avatar options type (derived from schema)
- */
-export type AvatarOptions = z.infer<typeof AvatarOptionsSchema>;
-/**
- * Avatar group spacing schema
- */
-export declare const AvatarSpacingSchema: z.ZodEnum<{
-    normal: "normal";
-    tight: "tight";
-    loose: "loose";
-}>;
-/**
- * Avatar group options schema
- */
-export declare const AvatarGroupOptionsSchema: z.ZodObject<{
-    max: z.ZodOptional<z.ZodNumber>;
-    size: z.ZodOptional<z.ZodEnum<{
-        xs: "xs";
-        sm: "sm";
-        lg: "lg";
-        xl: "xl";
-        "2xl": "2xl";
-        md: "md";
-    }>>;
-    spacing: z.ZodOptional<z.ZodEnum<{
-        normal: "normal";
-        tight: "tight";
-        loose: "loose";
-    }>>;
-    className: z.ZodOptional<z.ZodString>;
-}, z.core.$strict>;
-/**
- * Avatar group options type
- */
-export type AvatarGroupOptions = z.infer<typeof AvatarGroupOptionsSchema>;
-/**
- * Avatar with text options schema
- */
-export declare const AvatarWithTextOptionsSchema: z.ZodObject<{
-    src: z.ZodOptional<z.ZodString>;
-    alt: z.ZodString;
-    size: z.ZodOptional<z.ZodEnum<{
-        xs: "xs";
-        sm: "sm";
-        lg: "lg";
-        xl: "xl";
-        "2xl": "2xl";
-        md: "md";
-    }>>;
-    shape: z.ZodOptional<z.ZodEnum<{
-        circle: "circle";
-        square: "square";
-        rounded: "rounded";
-    }>>;
-    status: z.ZodOptional<z.ZodEnum<{
-        none: "none";
-        online: "online";
-        offline: "offline";
-        busy: "busy";
-        away: "away";
-    }>>;
-    className: z.ZodOptional<z.ZodString>;
-    href: z.ZodOptional<z.ZodString>;
-    initials: z.ZodOptional<z.ZodString>;
-    bgColor: z.ZodOptional<z.ZodString>;
-    name: z.ZodString;
-    subtitle: z.ZodOptional<z.ZodString>;
-    align: z.ZodOptional<z.ZodEnum<{
-        left: "left";
-        right: "right";
-    }>>;
-}, z.core.$strict>;
-/**
- * Avatar with text options type
- */
-export type AvatarWithTextOptions = z.infer<typeof AvatarWithTextOptionsSchema>;

package/src/components/avatar.schema.js

@@ -1,103 +0,0 @@
-"use strict";
-/**
- * @file avatar.schema.ts
- * @description Zod schemas for Avatar component options validation.
- *
- * Provides strict validation schemas for avatar options including sizes,
- * shapes, status indicators, and avatar groups with text.
- *
- * @example
- * ```typescript
- * import { AvatarOptionsSchema } from '@frontmcp/ui';
- *
- * const result = AvatarOptionsSchema.safeParse({
- *   alt: 'John Doe',
- *   size: 'lg',
- * });
- * ```
- *
- * @module @frontmcp/ui/components/avatar.schema
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AvatarWithTextOptionsSchema = exports.AvatarGroupOptionsSchema = exports.AvatarSpacingSchema = exports.AvatarOptionsSchema = exports.AvatarStatusSchema = exports.AvatarShapeSchema = exports.AvatarSizeSchema = void 0;
-const zod_1 = require("zod");
-// ============================================
-// Size, Shape, and Status Schemas
-// ============================================
-/**
- * Avatar size enum schema
- */
-exports.AvatarSizeSchema = zod_1.z.enum(['xs', 'sm', 'md', 'lg', 'xl', '2xl']);
-/**
- * Avatar shape enum schema
- */
-exports.AvatarShapeSchema = zod_1.z.enum(['circle', 'square', 'rounded']);
-/**
- * Avatar status enum schema
- */
-exports.AvatarStatusSchema = zod_1.z.enum(['online', 'offline', 'busy', 'away', 'none']);
-// ============================================
-// Avatar Options Schema
-// ============================================
-/**
- * Complete avatar options schema
- */
-exports.AvatarOptionsSchema = zod_1.z
-    .object({
-    /** Image source URL */
-    src: zod_1.z.string().optional(),
-    /** Alt text / name (required) */
-    alt: zod_1.z.string(),
-    /** Avatar size */
-    size: exports.AvatarSizeSchema.optional(),
-    /** Avatar shape */
-    shape: exports.AvatarShapeSchema.optional(),
-    /** Status indicator */
-    status: exports.AvatarStatusSchema.optional(),
-    /** Additional CSS classes */
-    className: zod_1.z.string().optional(),
-    /** Click handler URL */
-    href: zod_1.z.string().optional(),
-    /** Custom initials (overrides auto-generation) */
-    initials: zod_1.z.string().optional(),
-    /** Background color for initials (CSS color) */
-    bgColor: zod_1.z.string().optional(),
-})
-    .strict();
-// ============================================
-// Avatar Group Schema
-// ============================================
-/**
- * Avatar group spacing schema
- */
-exports.AvatarSpacingSchema = zod_1.z.enum(['tight', 'normal', 'loose']);
-/**
- * Avatar group options schema
- */
-exports.AvatarGroupOptionsSchema = zod_1.z
-    .object({
-    /** Maximum visible avatars */
-    max: zod_1.z.number().min(1).optional(),
-    /** Avatar size */
-    size: exports.AvatarSizeSchema.optional(),
-    /** Overlap amount */
-    spacing: exports.AvatarSpacingSchema.optional(),
-    /** Additional CSS classes */
-    className: zod_1.z.string().optional(),
-})
-    .strict();
-// ============================================
-// Avatar with Text Schema
-// ============================================
-/**
- * Avatar with text options schema
- */
-exports.AvatarWithTextOptionsSchema = exports.AvatarOptionsSchema.extend({
-    /** Primary text (name) */
-    name: zod_1.z.string(),
-    /** Secondary text (email, role, etc.) */
-    subtitle: zod_1.z.string().optional(),
-    /** Text alignment */
-    align: zod_1.z.enum(['left', 'right']).optional(),
-}).strict();
-//# sourceMappingURL=avatar.schema.js.map