@frontmcp/ui 0.5.0

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

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

package/src/components/card.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Card Component
+ *
+ * Versatile card component for content containers.
+ */
+/**
+ * Card variant styles
+ */
+export type CardVariant = 'default' | 'outlined' | 'elevated' | 'filled' | 'ghost';
+/**
+ * Card size options
+ */
+export type CardSize = 'sm' | 'md' | 'lg';
+/**
+ * Card component options
+ */
+export interface CardOptions {
+    /** Card variant */
+    variant?: CardVariant;
+    /** Card size (padding) */
+    size?: CardSize;
+    /** Card title */
+    title?: string;
+    /** Card subtitle/description */
+    subtitle?: string;
+    /** Header actions (HTML) */
+    headerActions?: string;
+    /** Footer content (HTML) */
+    footer?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** Card ID */
+    id?: string;
+    /** HTMX attributes */
+    htmx?: {
+        get?: string;
+        post?: string;
+        target?: string;
+        swap?: string;
+        trigger?: string;
+    };
+    /** Data attributes */
+    data?: Record<string, string>;
+    /** Clickable card (adds hover effects) */
+    clickable?: boolean;
+    /** Click handler URL */
+    href?: string;
+}
+/**
+ * Build a card component
+ */
+export declare function card(content: string, options?: CardOptions): string;
+/**
+ * Build a card group (horizontal or vertical)
+ */
+export declare function cardGroup(cards: string[], options?: {
+    direction?: 'horizontal' | 'vertical';
+    gap?: 'sm' | 'md' | 'lg';
+    className?: string;
+}): string;

package/src/components/card.js

@@ -0,0 +1,117 @@
+"use strict";
+/**
+ * Card Component
+ *
+ * Versatile card component for content containers.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.card = card;
+exports.cardGroup = cardGroup;
+const base_1 = require("../layouts/base");
+// ============================================
+// Card Builder
+// ============================================
+/**
+ * Get variant CSS classes
+ */
+function getVariantClasses(variant) {
+    const variants = {
+        default: 'bg-white border border-border rounded-xl shadow-sm',
+        outlined: 'bg-transparent border-2 border-border rounded-xl',
+        elevated: 'bg-white rounded-xl shadow-lg',
+        filled: 'bg-gray-50 rounded-xl',
+        ghost: 'bg-transparent',
+    };
+    return variants[variant];
+}
+/**
+ * Get size CSS classes
+ */
+function getSizeClasses(size) {
+    const sizes = {
+        sm: 'p-4',
+        md: 'p-6',
+        lg: 'p-8',
+    };
+    return sizes[size];
+}
+/**
+ * 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.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)}"`);
+    return attrs.join(' ');
+}
+/**
+ * Build data attributes string
+ */
+function buildDataAttrs(data) {
+    if (!data)
+        return '';
+    return Object.entries(data)
+        .map(([key, value]) => `data-${key}="${(0, base_1.escapeHtml)(value)}"`)
+        .join(' ');
+}
+/**
+ * Build a card component
+ */
+function card(content, options = {}) {
+    const { variant = 'default', size = 'md', title, subtitle, headerActions, footer, className = '', id, htmx, data, clickable = false, href, } = options;
+    const variantClasses = getVariantClasses(variant);
+    const sizeClasses = getSizeClasses(size);
+    const clickableClasses = clickable ? 'cursor-pointer hover:shadow-md transition-shadow' : '';
+    const allClasses = [variantClasses, sizeClasses, clickableClasses, className].filter(Boolean).join(' ');
+    const htmxAttrs = buildHtmxAttrs(htmx);
+    const dataAttrs = buildDataAttrs(data);
+    const idAttr = id ? `id="${(0, base_1.escapeHtml)(id)}"` : '';
+    // Build header if title exists
+    const hasHeader = title || subtitle || headerActions;
+    const headerHtml = hasHeader
+        ? `<div class="flex items-start justify-between mb-4">
+        <div>
+          ${title ? `<h3 class="text-lg font-semibold text-text-primary">${(0, base_1.escapeHtml)(title)}</h3>` : ''}
+          ${subtitle ? `<p class="text-sm text-text-secondary mt-1">${(0, base_1.escapeHtml)(subtitle)}</p>` : ''}
+        </div>
+        ${headerActions ? `<div class="flex items-center gap-2">${headerActions}</div>` : ''}
+      </div>`
+        : '';
+    // Build footer if exists
+    const footerHtml = footer ? `<div class="mt-4 pt-4 border-t border-divider">${footer}</div>` : '';
+    // Wrap in anchor tag if href provided
+    if (href) {
+        return `<a href="${(0, base_1.escapeHtml)(href)}" class="${allClasses}" ${idAttr} ${htmxAttrs} ${dataAttrs}>
+      ${headerHtml}
+      ${content}
+      ${footerHtml}
+    </a>`;
+    }
+    return `<div class="${allClasses}" ${idAttr} ${htmxAttrs} ${dataAttrs}>
+    ${headerHtml}
+    ${content}
+    ${footerHtml}
+  </div>`;
+}
+/**
+ * Build a card group (horizontal or vertical)
+ */
+function cardGroup(cards, options = {}) {
+    const { direction = 'vertical', gap = 'md', className = '' } = options;
+    const gapClasses = { sm: 'gap-2', md: 'gap-4', lg: 'gap-6' };
+    const directionClasses = direction === 'horizontal' ? 'flex flex-row flex-wrap' : 'flex flex-col';
+    return `<div class="${directionClasses} ${gapClasses[gap]} ${className}">
+    ${cards.join('\n')}
+  </div>`;
+}
+//# sourceMappingURL=card.js.map

package/src/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Card Component\n *\n * Versatile card component for content containers.\n */\n\nimport { escapeHtml } from '../layouts/base';\n\n// ============================================\n// Card Types\n// ============================================\n\n/**\n * Card variant styles\n */\nexport type CardVariant = 'default' | 'outlined' | 'elevated' | 'filled' | 'ghost';\n\n/**\n * Card size options\n */\nexport type CardSize = 'sm' | 'md' | 'lg';\n\n/**\n * Card component options\n */\nexport interface CardOptions {\n  /** Card variant */\n  variant?: CardVariant;\n  /** Card size (padding) */\n  size?: CardSize;\n  /** Card title */\n  title?: string;\n  /** Card subtitle/description */\n  subtitle?: string;\n  /** Header actions (HTML) */\n  headerActions?: string;\n  /** Footer content (HTML) */\n  footer?: string;\n  /** Additional CSS classes */\n  className?: string;\n  /** Card ID */\n  id?: string;\n  /** HTMX attributes */\n  htmx?: {\n    get?: string;\n    post?: string;\n    target?: string;\n    swap?: string;\n    trigger?: string;\n  };\n  /** Data attributes */\n  data?: Record<string, string>;\n  /** Clickable card (adds hover effects) */\n  clickable?: boolean;\n  /** Click handler URL */\n  href?: string;\n}\n\n// ============================================\n// Card Builder\n// ============================================\n\n/**\n * Get variant CSS classes\n */\nfunction getVariantClasses(variant: CardVariant): string {\n  const variants: Record<CardVariant, string> = {\n    default: 'bg-white border border-border rounded-xl shadow-sm',\n    outlined: 'bg-transparent border-2 border-border rounded-xl',\n    elevated: 'bg-white rounded-xl shadow-lg',\n    filled: 'bg-gray-50 rounded-xl',\n    ghost: 'bg-transparent',\n  };\n  return variants[variant];\n}\n\n/**\n * Get size CSS classes\n */\nfunction getSizeClasses(size: CardSize): string {\n  const sizes: Record<CardSize, string> = {\n    sm: 'p-4',\n    md: 'p-6',\n    lg: 'p-8',\n  };\n  return sizes[size];\n}\n\n/**\n * Build HTMX attributes string\n */\nfunction buildHtmxAttrs(htmx?: CardOptions['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.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  return attrs.join(' ');\n}\n\n/**\n * Build data attributes string\n */\nfunction buildDataAttrs(data?: Record<string, string>): string {\n  if (!data) return '';\n  return Object.entries(data)\n    .map(([key, value]) => `data-${key}=\"${escapeHtml(value)}\"`)\n    .join(' ');\n}\n\n/**\n * Build a card component\n */\nexport function card(content: string, options: CardOptions = {}): string {\n  const {\n    variant = 'default',\n    size = 'md',\n    title,\n    subtitle,\n    headerActions,\n    footer,\n    className = '',\n    id,\n    htmx,\n    data,\n    clickable = false,\n    href,\n  } = options;\n\n  const variantClasses = getVariantClasses(variant);\n  const sizeClasses = getSizeClasses(size);\n  const clickableClasses = clickable ? 'cursor-pointer hover:shadow-md transition-shadow' : '';\n\n  const allClasses = [variantClasses, sizeClasses, clickableClasses, className].filter(Boolean).join(' ');\n  const htmxAttrs = buildHtmxAttrs(htmx);\n  const dataAttrs = buildDataAttrs(data);\n  const idAttr = id ? `id=\"${escapeHtml(id)}\"` : '';\n\n  // Build header if title exists\n  const hasHeader = title || subtitle || headerActions;\n  const headerHtml = hasHeader\n    ? `<div class=\"flex items-start justify-between mb-4\">\n        <div>\n          ${title ? `<h3 class=\"text-lg font-semibold text-text-primary\">${escapeHtml(title)}</h3>` : ''}\n          ${subtitle ? `<p class=\"text-sm text-text-secondary mt-1\">${escapeHtml(subtitle)}</p>` : ''}\n        </div>\n        ${headerActions ? `<div class=\"flex items-center gap-2\">${headerActions}</div>` : ''}\n      </div>`\n    : '';\n\n  // Build footer if exists\n  const footerHtml = footer ? `<div class=\"mt-4 pt-4 border-t border-divider\">${footer}</div>` : '';\n\n  // Wrap in anchor tag if href provided\n  if (href) {\n    return `<a href=\"${escapeHtml(href)}\" class=\"${allClasses}\" ${idAttr} ${htmxAttrs} ${dataAttrs}>\n      ${headerHtml}\n      ${content}\n      ${footerHtml}\n    </a>`;\n  }\n\n  return `<div class=\"${allClasses}\" ${idAttr} ${htmxAttrs} ${dataAttrs}>\n    ${headerHtml}\n    ${content}\n    ${footerHtml}\n  </div>`;\n}\n\n/**\n * Build a card group (horizontal or vertical)\n */\nexport function cardGroup(\n  cards: string[],\n  options: {\n    direction?: 'horizontal' | 'vertical';\n    gap?: 'sm' | 'md' | 'lg';\n    className?: string;\n  } = {},\n): string {\n  const { direction = 'vertical', gap = 'md', className = '' } = options;\n\n  const gapClasses = { sm: 'gap-2', md: 'gap-4', lg: 'gap-6' };\n  const directionClasses = direction === 'horizontal' ? 'flex flex-row flex-wrap' : 'flex flex-col';\n\n  return `<div class=\"${directionClasses} ${gapClasses[gap]} ${className}\">\n    ${cards.join('\\n')}\n  </div>`;\n}\n"]}

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

@@ -0,0 +1,113 @@
+/**
+ * @file card.schema.ts
+ * @description Zod schemas for Card component options validation.
+ *
+ * Provides strict validation schemas for card options including variants,
+ * sizes, HTMX attributes, and clickable behavior.
+ *
+ * @example
+ * ```typescript
+ * import { CardOptionsSchema } from '@frontmcp/ui';
+ *
+ * const result = CardOptionsSchema.safeParse({ variant: 'elevated' });
+ * ```
+ *
+ * @module @frontmcp/ui/components/card.schema
+ */
+import { z } from 'zod';
+/**
+ * Card variant enum schema
+ */
+export declare const CardVariantSchema: z.ZodEnum<{
+    elevated: "elevated";
+    default: "default";
+    ghost: "ghost";
+    outlined: "outlined";
+    filled: "filled";
+}>;
+/**
+ * Card variant type
+ */
+export type CardVariant = z.infer<typeof CardVariantSchema>;
+/**
+ * Card size enum schema
+ */
+export declare const CardSizeSchema: z.ZodEnum<{
+    sm: "sm";
+    lg: "lg";
+    md: "md";
+}>;
+/**
+ * Card size type
+ */
+export type CardSize = z.infer<typeof CardSizeSchema>;
+/**
+ * HTMX attributes schema for card
+ */
+export declare const CardHtmxSchema: z.ZodOptional<z.ZodObject<{
+    get: z.ZodOptional<z.ZodString>;
+    post: z.ZodOptional<z.ZodString>;
+    target: z.ZodOptional<z.ZodString>;
+    swap: z.ZodOptional<z.ZodString>;
+    trigger: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>>;
+/**
+ * Card HTMX type
+ */
+export type CardHtmx = z.infer<typeof CardHtmxSchema>;
+/**
+ * Complete card options schema
+ */
+export declare const CardOptionsSchema: z.ZodObject<{
+    variant: z.ZodOptional<z.ZodEnum<{
+        elevated: "elevated";
+        default: "default";
+        ghost: "ghost";
+        outlined: "outlined";
+        filled: "filled";
+    }>>;
+    size: z.ZodOptional<z.ZodEnum<{
+        sm: "sm";
+        lg: "lg";
+        md: "md";
+    }>>;
+    title: z.ZodOptional<z.ZodString>;
+    subtitle: z.ZodOptional<z.ZodString>;
+    headerActions: z.ZodOptional<z.ZodString>;
+    footer: z.ZodOptional<z.ZodString>;
+    className: z.ZodOptional<z.ZodString>;
+    id: z.ZodOptional<z.ZodString>;
+    htmx: z.ZodOptional<z.ZodObject<{
+        get: z.ZodOptional<z.ZodString>;
+        post: z.ZodOptional<z.ZodString>;
+        target: z.ZodOptional<z.ZodString>;
+        swap: z.ZodOptional<z.ZodString>;
+        trigger: z.ZodOptional<z.ZodString>;
+    }, z.core.$strict>>;
+    data: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
+    clickable: z.ZodOptional<z.ZodBoolean>;
+    href: z.ZodOptional<z.ZodString>;
+}, z.core.$strict>;
+/**
+ * Card options type (derived from schema)
+ */
+export type CardOptions = z.infer<typeof CardOptionsSchema>;
+/**
+ * Card group options schema
+ */
+export declare const CardGroupOptionsSchema: z.ZodObject<{
+    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>;
+/**
+ * Card group options type
+ */
+export type CardGroupOptions = z.infer<typeof CardGroupOptionsSchema>;

package/src/components/card.schema.js

@@ -0,0 +1,98 @@
+"use strict";
+/**
+ * @file card.schema.ts
+ * @description Zod schemas for Card component options validation.
+ *
+ * Provides strict validation schemas for card options including variants,
+ * sizes, HTMX attributes, and clickable behavior.
+ *
+ * @example
+ * ```typescript
+ * import { CardOptionsSchema } from '@frontmcp/ui';
+ *
+ * const result = CardOptionsSchema.safeParse({ variant: 'elevated' });
+ * ```
+ *
+ * @module @frontmcp/ui/components/card.schema
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardGroupOptionsSchema = exports.CardOptionsSchema = exports.CardHtmxSchema = exports.CardSizeSchema = exports.CardVariantSchema = void 0;
+const zod_1 = require("zod");
+// ============================================
+// Variant and Size Schemas
+// ============================================
+/**
+ * Card variant enum schema
+ */
+exports.CardVariantSchema = zod_1.z.enum(['default', 'outlined', 'elevated', 'filled', 'ghost']);
+/**
+ * Card size enum schema
+ */
+exports.CardSizeSchema = zod_1.z.enum(['sm', 'md', 'lg']);
+// ============================================
+// HTMX Schema
+// ============================================
+/**
+ * HTMX attributes schema for card
+ */
+exports.CardHtmxSchema = zod_1.z
+    .object({
+    get: zod_1.z.string().optional(),
+    post: zod_1.z.string().optional(),
+    target: zod_1.z.string().optional(),
+    swap: zod_1.z.string().optional(),
+    trigger: zod_1.z.string().optional(),
+})
+    .strict()
+    .optional();
+// ============================================
+// Card Options Schema
+// ============================================
+/**
+ * Complete card options schema
+ */
+exports.CardOptionsSchema = zod_1.z
+    .object({
+    /** Card variant */
+    variant: exports.CardVariantSchema.optional(),
+    /** Card size (padding) */
+    size: exports.CardSizeSchema.optional(),
+    /** Card title */
+    title: zod_1.z.string().optional(),
+    /** Card subtitle/description */
+    subtitle: zod_1.z.string().optional(),
+    /** Header actions (HTML string) */
+    headerActions: zod_1.z.string().optional(),
+    /** Footer content (HTML string) */
+    footer: zod_1.z.string().optional(),
+    /** Additional CSS classes */
+    className: zod_1.z.string().optional(),
+    /** Card ID */
+    id: zod_1.z.string().optional(),
+    /** HTMX attributes */
+    htmx: exports.CardHtmxSchema,
+    /** Data attributes */
+    data: zod_1.z.record(zod_1.z.string(), zod_1.z.string()).optional(),
+    /** Clickable card (adds hover effects) */
+    clickable: zod_1.z.boolean().optional(),
+    /** Click handler URL */
+    href: zod_1.z.string().optional(),
+})
+    .strict();
+// ============================================
+// Card Group Schema
+// ============================================
+/**
+ * Card group options schema
+ */
+exports.CardGroupOptionsSchema = zod_1.z
+    .object({
+    /** Direction */
+    direction: zod_1.z.enum(['horizontal', 'vertical']).optional(),
+    /** Gap between cards */
+    gap: zod_1.z.enum(['sm', 'md', 'lg']).optional(),
+    /** Additional CSS classes */
+    className: zod_1.z.string().optional(),
+})
+    .strict();
+//# sourceMappingURL=card.schema.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.schema.js","sourceRoot":"","sources":["../../../src/components/card.schema.ts"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;;;AAEH,6BAAwB;AAExB,+CAA+C;AAC/C,2BAA2B;AAC3B,+CAA+C;AAE/C;;GAEG;AACU,QAAA,iBAAiB,GAAG,OAAC,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;AAOhG;;GAEG;AACU,QAAA,cAAc,GAAG,OAAC,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC;AAOzD,+CAA+C;AAC/C,cAAc;AACd,+CAA+C;AAE/C;;GAEG;AACU,QAAA,cAAc,GAAG,OAAC;KAC5B,MAAM,CAAC;IACN,GAAG,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC1B,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC3B,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,sBAAsB;AACtB,+CAA+C;AAE/C;;GAEG;AACU,QAAA,iBAAiB,GAAG,OAAC;KAC/B,MAAM,CAAC;IACN,mBAAmB;IACnB,OAAO,EAAE,yBAAiB,CAAC,QAAQ,EAAE;IACrC,0BAA0B;IAC1B,IAAI,EAAE,sBAAc,CAAC,QAAQ,EAAE;IAC/B,iBAAiB;IACjB,KAAK,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC5B,gCAAgC;IAChC,QAAQ,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC/B,mCAAmC;IACnC,aAAa,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IACpC,mCAAmC;IACnC,MAAM,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAC7B,6BAA6B;IAC7B,SAAS,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IAChC,cAAc;IACd,EAAE,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;IACzB,sBAAsB;IACtB,IAAI,EAAE,sBAAc;IACpB,sBAAsB;IACtB,IAAI,EAAE,OAAC,CAAC,MAAM,CAAC,OAAC,CAAC,MAAM,EAAE,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,CAAC,QAAQ,EAAE;IACjD,0CAA0C;IAC1C,SAAS,EAAE,OAAC,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE;IACjC,wBAAwB;IACxB,IAAI,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE;CAC5B,CAAC;KACD,MAAM,EAAE,CAAC;AAOZ,+CAA+C;AAC/C,oBAAoB;AACpB,+CAA+C;AAE/C;;GAEG;AACU,QAAA,sBAAsB,GAAG,OAAC;KACpC,MAAM,CAAC;IACN,gBAAgB;IAChB,SAAS,EAAE,OAAC,CAAC,IAAI,CAAC,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC,CAAC,QAAQ,EAAE;IACxD,wBAAwB;IACxB,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 card.schema.ts\n * @description Zod schemas for Card component options validation.\n *\n * Provides strict validation schemas for card options including variants,\n * sizes, HTMX attributes, and clickable behavior.\n *\n * @example\n * ```typescript\n * import { CardOptionsSchema } from '@frontmcp/ui';\n *\n * const result = CardOptionsSchema.safeParse({ variant: 'elevated' });\n * ```\n *\n * @module @frontmcp/ui/components/card.schema\n */\n\nimport { z } from 'zod';\n\n// ============================================\n// Variant and Size Schemas\n// ============================================\n\n/**\n * Card variant enum schema\n */\nexport const CardVariantSchema = z.enum(['default', 'outlined', 'elevated', 'filled', 'ghost']);\n\n/**\n * Card variant type\n */\nexport type CardVariant = z.infer<typeof CardVariantSchema>;\n\n/**\n * Card size enum schema\n */\nexport const CardSizeSchema = z.enum(['sm', 'md', 'lg']);\n\n/**\n * Card size type\n */\nexport type CardSize = z.infer<typeof CardSizeSchema>;\n\n// ============================================\n// HTMX Schema\n// ============================================\n\n/**\n * HTMX attributes schema for card\n */\nexport const CardHtmxSchema = z\n  .object({\n    get: z.string().optional(),\n    post: z.string().optional(),\n    target: z.string().optional(),\n    swap: z.string().optional(),\n    trigger: z.string().optional(),\n  })\n  .strict()\n  .optional();\n\n/**\n * Card HTMX type\n */\nexport type CardHtmx = z.infer<typeof CardHtmxSchema>;\n\n// ============================================\n// Card Options Schema\n// ============================================\n\n/**\n * Complete card options schema\n */\nexport const CardOptionsSchema = z\n  .object({\n    /** Card variant */\n    variant: CardVariantSchema.optional(),\n    /** Card size (padding) */\n    size: CardSizeSchema.optional(),\n    /** Card title */\n    title: z.string().optional(),\n    /** Card subtitle/description */\n    subtitle: z.string().optional(),\n    /** Header actions (HTML string) */\n    headerActions: z.string().optional(),\n    /** Footer content (HTML string) */\n    footer: z.string().optional(),\n    /** Additional CSS classes */\n    className: z.string().optional(),\n    /** Card ID */\n    id: z.string().optional(),\n    /** HTMX attributes */\n    htmx: CardHtmxSchema,\n    /** Data attributes */\n    data: z.record(z.string(), z.string()).optional(),\n    /** Clickable card (adds hover effects) */\n    clickable: z.boolean().optional(),\n    /** Click handler URL */\n    href: z.string().optional(),\n  })\n  .strict();\n\n/**\n * Card options type (derived from schema)\n */\nexport type CardOptions = z.infer<typeof CardOptionsSchema>;\n\n// ============================================\n// Card Group Schema\n// ============================================\n\n/**\n * Card group options schema\n */\nexport const CardGroupOptionsSchema = z\n  .object({\n    /** Direction */\n    direction: z.enum(['horizontal', 'vertical']).optional(),\n    /** Gap between cards */\n    gap: z.enum(['sm', 'md', 'lg']).optional(),\n    /** Additional CSS classes */\n    className: z.string().optional(),\n  })\n  .strict();\n\n/**\n * Card group options type\n */\nexport type CardGroupOptions = z.infer<typeof CardGroupOptionsSchema>;\n"]}

package/src/components/form.d.ts

@@ -0,0 +1,239 @@
+/**
+ * Form Components
+ *
+ * Form elements including inputs, selects, textareas, and form layouts.
+ */
+/**
+ * Input type options
+ */
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'date' | 'time' | 'datetime-local' | 'hidden';
+/**
+ * Input size options
+ */
+export type InputSize = 'sm' | 'md' | 'lg';
+/**
+ * Input state
+ */
+export type InputState = 'default' | 'error' | 'success' | 'warning';
+/**
+ * Base input options
+ */
+export interface InputOptions {
+    /** Input type */
+    type?: InputType;
+    /** Input name */
+    name: string;
+    /** Input ID (defaults to name) */
+    id?: string;
+    /** Input value */
+    value?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Label text */
+    label?: string;
+    /** Helper text */
+    helper?: string;
+    /** Error message */
+    error?: string;
+    /** Input size */
+    size?: InputSize;
+    /** Input state */
+    state?: InputState;
+    /** Required field */
+    required?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Readonly state */
+    readonly?: boolean;
+    /** Autocomplete attribute */
+    autocomplete?: string;
+    /** Pattern for validation */
+    pattern?: string;
+    /** Min value (for number/date) */
+    min?: string | number;
+    /** Max value (for number/date) */
+    max?: string | number;
+    /** Step value (for number) */
+    step?: string | number;
+    /** Additional CSS classes */
+    className?: string;
+    /** HTMX attributes */
+    htmx?: {
+        post?: string;
+        get?: string;
+        target?: string;
+        swap?: string;
+        trigger?: string;
+        validate?: boolean;
+    };
+    /** Data attributes */
+    data?: Record<string, string>;
+    /** Icon before input */
+    iconBefore?: string;
+    /** Icon after input */
+    iconAfter?: string;
+}
+/**
+ * Select options
+ */
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    selected?: boolean;
+}
+export interface SelectOptions extends Omit<InputOptions, 'type' | 'pattern' | 'min' | 'max' | 'step' | 'autocomplete'> {
+    /** Select options */
+    options: SelectOption[];
+    /** Multiple selection */
+    multiple?: boolean;
+}
+/**
+ * Textarea options
+ */
+export interface TextareaOptions extends Omit<InputOptions, 'type' | 'pattern' | 'min' | 'max' | 'step'> {
+    /** Number of rows */
+    rows?: number;
+    /** Resize behavior */
+    resize?: 'none' | 'vertical' | 'horizontal' | 'both';
+}
+/**
+ * Checkbox options
+ */
+export interface CheckboxOptions {
+    /** Input name */
+    name: string;
+    /** Input ID */
+    id?: string;
+    /** Input value */
+    value?: string;
+    /** Label text */
+    label: string;
+    /** Checked state */
+    checked?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Helper text */
+    helper?: string;
+    /** Error message */
+    error?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** HTMX attributes */
+    htmx?: {
+        post?: string;
+        get?: string;
+        target?: string;
+        swap?: string;
+        trigger?: string;
+    };
+}
+/**
+ * Radio group options
+ */
+export interface RadioGroupOptions {
+    /** Group name */
+    name: string;
+    /** Radio options */
+    options: Array<{
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }>;
+    /** Selected value */
+    value?: string;
+    /** Label for the group */
+    label?: string;
+    /** Helper text */
+    helper?: string;
+    /** Error message */
+    error?: string;
+    /** Layout direction */
+    direction?: 'horizontal' | 'vertical';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Build a text input component
+ */
+export declare function input(options: InputOptions): string;
+/**
+ * Build a select component
+ */
+export declare function select(options: SelectOptions): string;
+/**
+ * Build a textarea component
+ */
+export declare function textarea(options: TextareaOptions): string;
+/**
+ * Build a checkbox component
+ */
+export declare function checkbox(options: CheckboxOptions): string;
+/**
+ * Build a radio group component
+ */
+export declare function radioGroup(options: RadioGroupOptions): string;
+/**
+ * Form wrapper options
+ */
+export interface FormOptions {
+    /** Form action URL */
+    action?: string;
+    /** HTTP method */
+    method?: 'get' | 'post';
+    /** Form ID */
+    id?: string;
+    /** Additional CSS classes */
+    className?: string;
+    /** HTMX attributes */
+    htmx?: {
+        post?: string;
+        get?: string;
+        put?: string;
+        delete?: string;
+        target?: string;
+        swap?: string;
+        indicator?: string;
+        confirm?: string;
+    };
+    /** Prevent default submission */
+    preventDefault?: boolean;
+    /** Autocomplete */
+    autocomplete?: 'on' | 'off';
+    /** Enctype for file uploads */
+    enctype?: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+}
+/**
+ * Build form wrapper
+ */
+export declare function form(content: string, options?: FormOptions): string;
+/**
+ * Build form row (for horizontal forms)
+ */
+export declare function formRow(fields: string[], options?: {
+    gap?: 'sm' | 'md' | 'lg';
+    className?: string;
+}): string;
+/**
+ * Build form section with title
+ */
+export declare function formSection(content: string, options?: {
+    title?: string;
+    description?: string;
+    className?: string;
+}): string;
+/**
+ * Build form actions (submit/cancel buttons area)
+ */
+export declare function formActions(buttons: string[], options?: {
+    align?: 'left' | 'center' | 'right' | 'between';
+    className?: string;
+}): string;
+/**
+ * Build a hidden input
+ */
+export declare function hiddenInput(name: string, value: string): string;
+/**
+ * Build CSRF token hidden input
+ */
+export declare function csrfInput(token: string): string;