@frontmcp/ui 0.5.1 → 0.6.1

package/src/web-components/elements/fmcp-button.d.ts

@@ -1,124 +0,0 @@
-/**
- * @file fmcp-button.ts
- * @description FrontMCP Button Web Component.
- *
- * A custom element wrapper around the button() HTML function.
- * Works natively in React, Vue, Angular, and plain HTML.
- *
- * @example Basic usage
- * ```html
- * <fmcp-button>Click Me</fmcp-button>
- * <fmcp-button variant="danger">Delete</fmcp-button>
- * <fmcp-button disabled>Disabled</fmcp-button>
- * ```
- *
- * @example With HTMX
- * ```html
- * <fmcp-button hx-post="/api/submit" hx-target="#result">
- *   Submit
- * </fmcp-button>
- * ```
- *
- * @example In React
- * ```tsx
- * import { registerFmcpButton } from '@frontmcp/ui/web-components';
- * registerFmcpButton();
- *
- * function App() {
- *   return (
- *     <fmcp-button variant="primary" onClick={handleClick}>
- *       Click Me
- *     </fmcp-button>
- *   );
- * }
- * ```
- *
- * @module @frontmcp/ui/web-components/elements/fmcp-button
- */
-import { FmcpElement, type FmcpElementConfig } from '../core';
-import { type ButtonOptions } from '../../components/button';
-/**
- * FmcpButton Web Component
- *
- * Attributes:
- * - `variant` - 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'link'
- * - `size` - 'xs' | 'sm' | 'md' | 'lg' | 'xl'
- * - `type` - 'button' | 'submit' | 'reset'
- * - `disabled` - boolean (presence = true)
- * - `loading` - boolean
- * - `full-width` - boolean
- * - `icon-only` - boolean
- * - `href` - URL for link-style buttons
- * - `target` - '_blank' | '_self'
- * - `hx-get`, `hx-post`, etc. - HTMX attributes
- *
- * Properties (for React/Vue):
- * - All attributes can be set as properties
- * - `options` - Set all options at once
- *
- * Events:
- * - `fmcp:render` - Fired after render with { options } detail
- * - `fmcp:click` - Fired on button click with { options } detail
- */
-export declare class FmcpButton extends FmcpElement<ButtonOptions> {
-    protected readonly config: FmcpElementConfig<ButtonOptions>;
-    /**
-     * Attributes to observe for changes.
-     */
-    static get observedAttributes(): string[];
-    /**
-     * Render the button HTML using the button() function.
-     */
-    protected renderHtml(options: ButtonOptions, content: string): string;
-    set variant(value: ButtonOptions['variant']);
-    get variant(): ButtonOptions['variant'];
-    set size(value: ButtonOptions['size']);
-    get size(): ButtonOptions['size'];
-    set type(value: ButtonOptions['type']);
-    get type(): ButtonOptions['type'];
-    set disabled(value: boolean);
-    get disabled(): boolean;
-    set loading(value: boolean);
-    get loading(): boolean;
-    set fullWidth(value: boolean);
-    get fullWidth(): boolean;
-    set iconOnly(value: boolean);
-    get iconOnly(): boolean;
-    set iconBefore(value: string | undefined);
-    get iconBefore(): string | undefined;
-    set iconAfter(value: string | undefined);
-    get iconAfter(): string | undefined;
-    set href(value: string | undefined);
-    get href(): string | undefined;
-    set buttonAriaLabel(value: string | undefined);
-    get buttonAriaLabel(): string | undefined;
-    connectedCallback(): void;
-    private _handleClick;
-    /**
-     * Focus the inner button element.
-     */
-    focus(): void;
-    /**
-     * Blur the inner button element.
-     */
-    blur(): void;
-    /**
-     * Click the inner button programmatically.
-     */
-    click(): void;
-}
-/**
- * Register the fmcp-button custom element.
- *
- * @example
- * ```typescript
- * import { registerFmcpButton } from '@frontmcp/ui/web-components';
- *
- * // Register once on app startup
- * registerFmcpButton();
- *
- * // Then use in HTML
- * // <fmcp-button variant="primary">Click</fmcp-button>
- * ```
- */
-export declare function registerFmcpButton(): void;

package/src/web-components/elements/fmcp-button.js

@@ -1,233 +0,0 @@
-"use strict";
-/**
- * @file fmcp-button.ts
- * @description FrontMCP Button Web Component.
- *
- * A custom element wrapper around the button() HTML function.
- * Works natively in React, Vue, Angular, and plain HTML.
- *
- * @example Basic usage
- * ```html
- * <fmcp-button>Click Me</fmcp-button>
- * <fmcp-button variant="danger">Delete</fmcp-button>
- * <fmcp-button disabled>Disabled</fmcp-button>
- * ```
- *
- * @example With HTMX
- * ```html
- * <fmcp-button hx-post="/api/submit" hx-target="#result">
- *   Submit
- * </fmcp-button>
- * ```
- *
- * @example In React
- * ```tsx
- * import { registerFmcpButton } from '@frontmcp/ui/web-components';
- * registerFmcpButton();
- *
- * function App() {
- *   return (
- *     <fmcp-button variant="primary" onClick={handleClick}>
- *       Click Me
- *     </fmcp-button>
- *   );
- * }
- * ```
- *
- * @module @frontmcp/ui/web-components/elements/fmcp-button
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FmcpButton = void 0;
-exports.registerFmcpButton = registerFmcpButton;
-const core_1 = require("../core");
-const button_1 = require("../../components/button");
-const button_schema_1 = require("../../components/button.schema");
-/**
- * FmcpButton Web Component
- *
- * Attributes:
- * - `variant` - 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'link'
- * - `size` - 'xs' | 'sm' | 'md' | 'lg' | 'xl'
- * - `type` - 'button' | 'submit' | 'reset'
- * - `disabled` - boolean (presence = true)
- * - `loading` - boolean
- * - `full-width` - boolean
- * - `icon-only` - boolean
- * - `href` - URL for link-style buttons
- * - `target` - '_blank' | '_self'
- * - `hx-get`, `hx-post`, etc. - HTMX attributes
- *
- * Properties (for React/Vue):
- * - All attributes can be set as properties
- * - `options` - Set all options at once
- *
- * Events:
- * - `fmcp:render` - Fired after render with { options } detail
- * - `fmcp:click` - Fired on button click with { options } detail
- */
-class FmcpButton extends core_1.FmcpElement {
-    config = {
-        name: 'button',
-        schema: button_schema_1.ButtonOptionsSchema,
-        defaults: {
-            variant: 'primary',
-            size: 'md',
-            type: 'button',
-        },
-    };
-    /**
-     * Attributes to observe for changes.
-     */
-    static get observedAttributes() {
-        return (0, core_1.getObservedAttributesFromSchema)(button_schema_1.ButtonOptionsSchema);
-    }
-    /**
-     * Render the button HTML using the button() function.
-     */
-    renderHtml(options, content) {
-        return (0, button_1.button)(content, options);
-    }
-    // ============================================
-    // Property Setters (Individual Props)
-    // ============================================
-    set variant(value) {
-        this._options.variant = value;
-        this._scheduleRender();
-    }
-    get variant() {
-        return this._options.variant;
-    }
-    set size(value) {
-        this._options.size = value;
-        this._scheduleRender();
-    }
-    get size() {
-        return this._options.size;
-    }
-    set type(value) {
-        this._options.type = value;
-        this._scheduleRender();
-    }
-    get type() {
-        return this._options.type;
-    }
-    set disabled(value) {
-        this._options.disabled = value;
-        this._scheduleRender();
-    }
-    get disabled() {
-        return this._options.disabled ?? false;
-    }
-    set loading(value) {
-        this._options.loading = value;
-        this._scheduleRender();
-    }
-    get loading() {
-        return this._options.loading ?? false;
-    }
-    set fullWidth(value) {
-        this._options.fullWidth = value;
-        this._scheduleRender();
-    }
-    get fullWidth() {
-        return this._options.fullWidth ?? false;
-    }
-    set iconOnly(value) {
-        this._options.iconOnly = value;
-        this._scheduleRender();
-    }
-    get iconOnly() {
-        return this._options.iconOnly ?? false;
-    }
-    set iconBefore(value) {
-        this._options.iconBefore = value;
-        this._scheduleRender();
-    }
-    get iconBefore() {
-        return this._options.iconBefore;
-    }
-    set iconAfter(value) {
-        this._options.iconAfter = value;
-        this._scheduleRender();
-    }
-    get iconAfter() {
-        return this._options.iconAfter;
-    }
-    set href(value) {
-        this._options.href = value;
-        this._scheduleRender();
-    }
-    get href() {
-        return this._options.href;
-    }
-    set buttonAriaLabel(value) {
-        this._options.ariaLabel = value;
-        this._scheduleRender();
-    }
-    get buttonAriaLabel() {
-        return this._options.ariaLabel;
-    }
-    // ============================================
-    // Event Forwarding
-    // ============================================
-    connectedCallback() {
-        super.connectedCallback();
-        // Forward click events from inner button
-        this.addEventListener('click', this._handleClick.bind(this));
-    }
-    _handleClick(e) {
-        // Only dispatch if click originated from inner button
-        const innerButton = this.getInnerElement();
-        if (innerButton && (e.target === innerButton || innerButton.contains(e.target))) {
-            this.dispatchEvent(new CustomEvent('fmcp:click', {
-                bubbles: true,
-                detail: { options: this.options },
-            }));
-        }
-    }
-    // ============================================
-    // Public API
-    // ============================================
-    /**
-     * Focus the inner button element.
-     */
-    focus() {
-        const inner = this.getInnerElement();
-        inner?.focus();
-    }
-    /**
-     * Blur the inner button element.
-     */
-    blur() {
-        const inner = this.getInnerElement();
-        inner?.blur();
-    }
-    /**
-     * Click the inner button programmatically.
-     */
-    click() {
-        const inner = this.getInnerElement();
-        inner?.click();
-    }
-}
-exports.FmcpButton = FmcpButton;
-/**
- * Register the fmcp-button custom element.
- *
- * @example
- * ```typescript
- * import { registerFmcpButton } from '@frontmcp/ui/web-components';
- *
- * // Register once on app startup
- * registerFmcpButton();
- *
- * // Then use in HTML
- * // <fmcp-button variant="primary">Click</fmcp-button>
- * ```
- */
-function registerFmcpButton() {
-    if (typeof customElements !== 'undefined' && !customElements.get('fmcp-button')) {
-        customElements.define('fmcp-button', FmcpButton);
-    }
-}
-//# sourceMappingURL=fmcp-button.js.map

package/src/web-components/elements/fmcp-button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fmcp-button.js","sourceRoot":"","sources":["../../../../src/web-components/elements/fmcp-button.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @file fmcp-button.ts\n * @description FrontMCP Button Web Component.\n *\n * A custom element wrapper around the button() HTML function.\n * Works natively in React, Vue, Angular, and plain HTML.\n *\n * @example Basic usage\n * ```html\n * <fmcp-button>Click Me</fmcp-button>\n * <fmcp-button variant=\"danger\">Delete</fmcp-button>\n * <fmcp-button disabled>Disabled</fmcp-button>\n * ```\n *\n * @example With HTMX\n * ```html\n * <fmcp-button hx-post=\"/api/submit\" hx-target=\"#result\">\n *   Submit\n * </fmcp-button>\n * ```\n *\n * @example In React\n * ```tsx\n * import { registerFmcpButton } from '@frontmcp/ui/web-components';\n * registerFmcpButton();\n *\n * function App() {\n *   return (\n *     <fmcp-button variant=\"primary\" onClick={handleClick}>\n *       Click Me\n *     </fmcp-button>\n *   );\n * }\n * ```\n *\n * @module @frontmcp/ui/web-components/elements/fmcp-button\n */\n\nimport { FmcpElement, type FmcpElementConfig, getObservedAttributesFromSchema } from '../core';\nimport { button, type ButtonOptions } from '../../components/button';\nimport { ButtonOptionsSchema } from '../../components/button.schema';\n\n/**\n * FmcpButton Web Component\n *\n * Attributes:\n * - `variant` - 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger' | 'success' | 'link'\n * - `size` - 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n * - `type` - 'button' | 'submit' | 'reset'\n * - `disabled` - boolean (presence = true)\n * - `loading` - boolean\n * - `full-width` - boolean\n * - `icon-only` - boolean\n * - `href` - URL for link-style buttons\n * - `target` - '_blank' | '_self'\n * - `hx-get`, `hx-post`, etc. - HTMX attributes\n *\n * Properties (for React/Vue):\n * - All attributes can be set as properties\n * - `options` - Set all options at once\n *\n * Events:\n * - `fmcp:render` - Fired after render with { options } detail\n * - `fmcp:click` - Fired on button click with { options } detail\n */\nexport class FmcpButton extends FmcpElement<ButtonOptions> {\n  protected readonly config: FmcpElementConfig<ButtonOptions> = {\n    name: 'button',\n    schema: ButtonOptionsSchema,\n    defaults: {\n      variant: 'primary',\n      size: 'md',\n      type: 'button',\n    },\n  };\n\n  /**\n   * Attributes to observe for changes.\n   */\n  static get observedAttributes(): string[] {\n    return getObservedAttributesFromSchema(ButtonOptionsSchema);\n  }\n\n  /**\n   * Render the button HTML using the button() function.\n   */\n  protected renderHtml(options: ButtonOptions, content: string): string {\n    return button(content, options);\n  }\n\n  // ============================================\n  // Property Setters (Individual Props)\n  // ============================================\n\n  set variant(value: ButtonOptions['variant']) {\n    this._options.variant = value;\n    this._scheduleRender();\n  }\n  get variant(): ButtonOptions['variant'] {\n    return this._options.variant;\n  }\n\n  set size(value: ButtonOptions['size']) {\n    this._options.size = value;\n    this._scheduleRender();\n  }\n  get size(): ButtonOptions['size'] {\n    return this._options.size;\n  }\n\n  set type(value: ButtonOptions['type']) {\n    this._options.type = value;\n    this._scheduleRender();\n  }\n  get type(): ButtonOptions['type'] {\n    return this._options.type;\n  }\n\n  set disabled(value: boolean) {\n    this._options.disabled = value;\n    this._scheduleRender();\n  }\n  get disabled(): boolean {\n    return this._options.disabled ?? false;\n  }\n\n  set loading(value: boolean) {\n    this._options.loading = value;\n    this._scheduleRender();\n  }\n  get loading(): boolean {\n    return this._options.loading ?? false;\n  }\n\n  set fullWidth(value: boolean) {\n    this._options.fullWidth = value;\n    this._scheduleRender();\n  }\n  get fullWidth(): boolean {\n    return this._options.fullWidth ?? false;\n  }\n\n  set iconOnly(value: boolean) {\n    this._options.iconOnly = value;\n    this._scheduleRender();\n  }\n  get iconOnly(): boolean {\n    return this._options.iconOnly ?? false;\n  }\n\n  set iconBefore(value: string | undefined) {\n    this._options.iconBefore = value;\n    this._scheduleRender();\n  }\n  get iconBefore(): string | undefined {\n    return this._options.iconBefore;\n  }\n\n  set iconAfter(value: string | undefined) {\n    this._options.iconAfter = value;\n    this._scheduleRender();\n  }\n  get iconAfter(): string | undefined {\n    return this._options.iconAfter;\n  }\n\n  set href(value: string | undefined) {\n    this._options.href = value;\n    this._scheduleRender();\n  }\n  get href(): string | undefined {\n    return this._options.href;\n  }\n\n  set buttonAriaLabel(value: string | undefined) {\n    this._options.ariaLabel = value;\n    this._scheduleRender();\n  }\n  get buttonAriaLabel(): string | undefined {\n    return this._options.ariaLabel;\n  }\n\n  // ============================================\n  // Event Forwarding\n  // ============================================\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    // Forward click events from inner button\n    this.addEventListener('click', this._handleClick.bind(this));\n  }\n\n  private _handleClick(e: Event): void {\n    // Only dispatch if click originated from inner button\n    const innerButton = this.getInnerElement<HTMLButtonElement>();\n    if (innerButton && (e.target === innerButton || innerButton.contains(e.target as Node))) {\n      this.dispatchEvent(\n        new CustomEvent('fmcp:click', {\n          bubbles: true,\n          detail: { options: this.options },\n        }),\n      );\n    }\n  }\n\n  // ============================================\n  // Public API\n  // ============================================\n\n  /**\n   * Focus the inner button element.\n   */\n  public override focus(): void {\n    const inner = this.getInnerElement<HTMLButtonElement>();\n    inner?.focus();\n  }\n\n  /**\n   * Blur the inner button element.\n   */\n  public override blur(): void {\n    const inner = this.getInnerElement<HTMLButtonElement>();\n    inner?.blur();\n  }\n\n  /**\n   * Click the inner button programmatically.\n   */\n  public override click(): void {\n    const inner = this.getInnerElement<HTMLButtonElement>();\n    inner?.click();\n  }\n}\n\n/**\n * Register the fmcp-button custom element.\n *\n * @example\n * ```typescript\n * import { registerFmcpButton } from '@frontmcp/ui/web-components';\n *\n * // Register once on app startup\n * registerFmcpButton();\n *\n * // Then use in HTML\n * // <fmcp-button variant=\"primary\">Click</fmcp-button>\n * ```\n */\nexport function registerFmcpButton(): void {\n  if (typeof customElements !== 'undefined' && !customElements.get('fmcp-button')) {\n    customElements.define('fmcp-button', FmcpButton);\n  }\n}\n"]}

package/src/web-components/elements/fmcp-card.d.ts

@@ -1,52 +0,0 @@
-/**
- * @file fmcp-card.ts
- * @description FrontMCP Card Web Component.
- *
- * A custom element wrapper around the card() HTML function.
- *
- * @example Basic usage
- * ```html
- * <fmcp-card title="Welcome" subtitle="Description">
- *   <p>Card content goes here</p>
- * </fmcp-card>
- * ```
- *
- * @example Clickable card
- * ```html
- * <fmcp-card clickable href="/details" title="Item">
- *   <p>Click to view details</p>
- * </fmcp-card>
- * ```
- *
- * @module @frontmcp/ui/web-components/elements/fmcp-card
- */
-import { FmcpElement, type FmcpElementConfig } from '../core';
-import { type CardOptions } from '../../components/card';
-/**
- * FmcpCard Web Component
- */
-export declare class FmcpCard extends FmcpElement<CardOptions> {
-    protected readonly config: FmcpElementConfig<CardOptions>;
-    static get observedAttributes(): string[];
-    protected renderHtml(options: CardOptions, content: string): string;
-    set variant(value: CardOptions['variant']);
-    get variant(): CardOptions['variant'];
-    set size(value: CardOptions['size']);
-    get size(): CardOptions['size'];
-    set cardTitle(value: string | undefined);
-    get cardTitle(): string | undefined;
-    set subtitle(value: string | undefined);
-    get subtitle(): string | undefined;
-    set clickable(value: boolean);
-    get clickable(): boolean;
-    set href(value: string | undefined);
-    get href(): string | undefined;
-    set footer(value: string | undefined);
-    get footer(): string | undefined;
-    set headerActions(value: string | undefined);
-    get headerActions(): string | undefined;
-}
-/**
- * Register the fmcp-card custom element.
- */
-export declare function registerFmcpCard(): void;

package/src/web-components/elements/fmcp-card.js

@@ -1,115 +0,0 @@
-"use strict";
-/**
- * @file fmcp-card.ts
- * @description FrontMCP Card Web Component.
- *
- * A custom element wrapper around the card() HTML function.
- *
- * @example Basic usage
- * ```html
- * <fmcp-card title="Welcome" subtitle="Description">
- *   <p>Card content goes here</p>
- * </fmcp-card>
- * ```
- *
- * @example Clickable card
- * ```html
- * <fmcp-card clickable href="/details" title="Item">
- *   <p>Click to view details</p>
- * </fmcp-card>
- * ```
- *
- * @module @frontmcp/ui/web-components/elements/fmcp-card
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FmcpCard = void 0;
-exports.registerFmcpCard = registerFmcpCard;
-const core_1 = require("../core");
-const card_1 = require("../../components/card");
-const card_schema_1 = require("../../components/card.schema");
-/**
- * FmcpCard Web Component
- */
-class FmcpCard extends core_1.FmcpElement {
-    config = {
-        name: 'card',
-        schema: card_schema_1.CardOptionsSchema,
-        defaults: {
-            variant: 'default',
-            size: 'md',
-        },
-    };
-    static get observedAttributes() {
-        return (0, core_1.getObservedAttributesFromSchema)(card_schema_1.CardOptionsSchema);
-    }
-    renderHtml(options, content) {
-        return (0, card_1.card)(content, options);
-    }
-    // Property setters
-    set variant(value) {
-        this._options.variant = value;
-        this._scheduleRender();
-    }
-    get variant() {
-        return this._options.variant;
-    }
-    set size(value) {
-        this._options.size = value;
-        this._scheduleRender();
-    }
-    get size() {
-        return this._options.size;
-    }
-    set cardTitle(value) {
-        this._options.title = value;
-        this._scheduleRender();
-    }
-    get cardTitle() {
-        return this._options.title;
-    }
-    set subtitle(value) {
-        this._options.subtitle = value;
-        this._scheduleRender();
-    }
-    get subtitle() {
-        return this._options.subtitle;
-    }
-    set clickable(value) {
-        this._options.clickable = value;
-        this._scheduleRender();
-    }
-    get clickable() {
-        return this._options.clickable ?? false;
-    }
-    set href(value) {
-        this._options.href = value;
-        this._scheduleRender();
-    }
-    get href() {
-        return this._options.href;
-    }
-    set footer(value) {
-        this._options.footer = value;
-        this._scheduleRender();
-    }
-    get footer() {
-        return this._options.footer;
-    }
-    set headerActions(value) {
-        this._options.headerActions = value;
-        this._scheduleRender();
-    }
-    get headerActions() {
-        return this._options.headerActions;
-    }
-}
-exports.FmcpCard = FmcpCard;
-/**
- * Register the fmcp-card custom element.
- */
-function registerFmcpCard() {
-    if (typeof customElements !== 'undefined' && !customElements.get('fmcp-card')) {
-        customElements.define('fmcp-card', FmcpCard);
-    }
-}
-//# sourceMappingURL=fmcp-card.js.map

package/src/web-components/elements/fmcp-card.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fmcp-card.js","sourceRoot":"","sources":["../../../../src/web-components/elements/fmcp-card.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @file fmcp-card.ts\n * @description FrontMCP Card Web Component.\n *\n * A custom element wrapper around the card() HTML function.\n *\n * @example Basic usage\n * ```html\n * <fmcp-card title=\"Welcome\" subtitle=\"Description\">\n *   <p>Card content goes here</p>\n * </fmcp-card>\n * ```\n *\n * @example Clickable card\n * ```html\n * <fmcp-card clickable href=\"/details\" title=\"Item\">\n *   <p>Click to view details</p>\n * </fmcp-card>\n * ```\n *\n * @module @frontmcp/ui/web-components/elements/fmcp-card\n */\n\nimport { FmcpElement, type FmcpElementConfig, getObservedAttributesFromSchema } from '../core';\nimport { card, type CardOptions } from '../../components/card';\nimport { CardOptionsSchema } from '../../components/card.schema';\n\n/**\n * FmcpCard Web Component\n */\nexport class FmcpCard extends FmcpElement<CardOptions> {\n  protected readonly config: FmcpElementConfig<CardOptions> = {\n    name: 'card',\n    schema: CardOptionsSchema,\n    defaults: {\n      variant: 'default',\n      size: 'md',\n    },\n  };\n\n  static get observedAttributes(): string[] {\n    return getObservedAttributesFromSchema(CardOptionsSchema);\n  }\n\n  protected renderHtml(options: CardOptions, content: string): string {\n    return card(content, options);\n  }\n\n  // Property setters\n  set variant(value: CardOptions['variant']) {\n    this._options.variant = value;\n    this._scheduleRender();\n  }\n  get variant(): CardOptions['variant'] {\n    return this._options.variant;\n  }\n\n  set size(value: CardOptions['size']) {\n    this._options.size = value;\n    this._scheduleRender();\n  }\n  get size(): CardOptions['size'] {\n    return this._options.size;\n  }\n\n  set cardTitle(value: string | undefined) {\n    this._options.title = value;\n    this._scheduleRender();\n  }\n  get cardTitle(): string | undefined {\n    return this._options.title;\n  }\n\n  set subtitle(value: string | undefined) {\n    this._options.subtitle = value;\n    this._scheduleRender();\n  }\n  get subtitle(): string | undefined {\n    return this._options.subtitle;\n  }\n\n  set clickable(value: boolean) {\n    this._options.clickable = value;\n    this._scheduleRender();\n  }\n  get clickable(): boolean {\n    return this._options.clickable ?? false;\n  }\n\n  set href(value: string | undefined) {\n    this._options.href = value;\n    this._scheduleRender();\n  }\n  get href(): string | undefined {\n    return this._options.href;\n  }\n\n  set footer(value: string | undefined) {\n    this._options.footer = value;\n    this._scheduleRender();\n  }\n  get footer(): string | undefined {\n    return this._options.footer;\n  }\n\n  set headerActions(value: string | undefined) {\n    this._options.headerActions = value;\n    this._scheduleRender();\n  }\n  get headerActions(): string | undefined {\n    return this._options.headerActions;\n  }\n}\n\n/**\n * Register the fmcp-card custom element.\n */\nexport function registerFmcpCard(): void {\n  if (typeof customElements !== 'undefined' && !customElements.get('fmcp-card')) {\n    customElements.define('fmcp-card', FmcpCard);\n  }\n}\n"]}

package/src/web-components/elements/fmcp-input.d.ts

@@ -1,95 +0,0 @@
-/**
- * @file fmcp-input.ts
- * @description FrontMCP Input Web Component.
- *
- * A custom element wrapper around the input() HTML function.
- *
- * @example Basic usage
- * ```html
- * <fmcp-input name="email" type="email" label="Email Address"></fmcp-input>
- * <fmcp-input name="password" type="password" label="Password" required></fmcp-input>
- * ```
- *
- * @example With validation
- * ```html
- * <fmcp-input
- *   name="username"
- *   label="Username"
- *   helper="Choose a unique username"
- *   pattern="[a-z0-9]+"
- * ></fmcp-input>
- * ```
- *
- * @module @frontmcp/ui/web-components/elements/fmcp-input
- */
-import { FmcpElement, type FmcpElementConfig } from '../core';
-import { type InputOptions } from '../../components/form';
-/**
- * FmcpInput Web Component
- */
-export declare class FmcpInput extends FmcpElement<InputOptions> {
-    protected readonly config: FmcpElementConfig<InputOptions>;
-    static get observedAttributes(): string[];
-    protected renderHtml(options: InputOptions, _content: string): string;
-    set name(value: string);
-    get name(): string;
-    set type(value: InputOptions['type']);
-    get type(): InputOptions['type'];
-    set label(value: string | undefined);
-    get label(): string | undefined;
-    set placeholder(value: string | undefined);
-    get placeholder(): string | undefined;
-    set helper(value: string | undefined);
-    get helper(): string | undefined;
-    set error(value: string | undefined);
-    get error(): string | undefined;
-    set size(value: InputOptions['size']);
-    get size(): InputOptions['size'];
-    set state(value: InputOptions['state']);
-    get state(): InputOptions['state'];
-    set required(value: boolean);
-    get required(): boolean;
-    set disabled(value: boolean);
-    get disabled(): boolean;
-    set readonly(value: boolean);
-    get readonly(): boolean;
-    connectedCallback(): void;
-    private _handleInput;
-    private _handleChange;
-    /**
-     * Get current input value.
-     */
-    get value(): string;
-    /**
-     * Set input value.
-     */
-    set value(val: string);
-    /**
-     * Get validity state.
-     */
-    get validity(): ValidityState | undefined;
-    /**
-     * Check validity.
-     */
-    checkValidity(): boolean;
-    /**
-     * Report validity.
-     */
-    reportValidity(): boolean;
-    /**
-     * Focus the input.
-     */
-    focus(): void;
-    /**
-     * Blur the input.
-     */
-    blur(): void;
-    /**
-     * Select all text.
-     */
-    select(): void;
-}
-/**
- * Register the fmcp-input custom element.
- */
-export declare function registerFmcpInput(): void;