@frontmcp/ui 0.5.0 → 0.6.0

package/web-components/register.d.ts

@@ -0,0 +1,57 @@
+/**
+ * @file register.ts
+ * @description Registration utilities for FrontMCP Web Components.
+ *
+ * Provides functions to register custom elements either all at once
+ * or individually for tree-shaking optimization.
+ *
+ * @example Register all components
+ * ```typescript
+ * import { registerAllComponents } from '@frontmcp/ui/web-components';
+ *
+ * // Register all FrontMCP components
+ * registerAllComponents();
+ *
+ * // Then use in HTML:
+ * // <fmcp-button variant="primary">Click</fmcp-button>
+ * ```
+ *
+ * @example Register individual components (tree-shakeable)
+ * ```typescript
+ * import { registerFmcpButton, registerFmcpCard } from '@frontmcp/ui/web-components';
+ *
+ * // Only register what you need
+ * registerFmcpButton();
+ * registerFmcpCard();
+ * ```
+ *
+ * @module @frontmcp/ui/web-components/register
+ */
+import { registerFmcpButton } from './elements/fmcp-button';
+import { registerFmcpCard } from './elements/fmcp-card';
+import { registerFmcpAlert } from './elements/fmcp-alert';
+import { registerFmcpBadge } from './elements/fmcp-badge';
+import { registerFmcpInput } from './elements/fmcp-input';
+import { registerFmcpSelect } from './elements/fmcp-select';
+/**
+ * Register all FrontMCP Web Components.
+ *
+ * This function registers all available custom elements:
+ * - `<fmcp-button>` - Button component
+ * - `<fmcp-card>` - Card component
+ * - `<fmcp-alert>` - Alert/notification component
+ * - `<fmcp-badge>` - Badge component
+ * - `<fmcp-input>` - Form input component
+ * - `<fmcp-select>` - Form select component
+ *
+ * @example
+ * ```typescript
+ * import { registerAllComponents } from '@frontmcp/ui/web-components';
+ *
+ * // Call once on app startup
+ * registerAllComponents();
+ * ```
+ */
+export declare function registerAllComponents(): void;
+export { registerFmcpButton, registerFmcpCard, registerFmcpAlert, registerFmcpBadge, registerFmcpInput, registerFmcpSelect, };
+//# sourceMappingURL=register.d.ts.map

package/web-components/register.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"register.d.ts","sourceRoot":"","sources":["../../src/web-components/register.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAE5D;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,qBAAqB,IAAI,IAAI,CAO5C;AAGD,OAAO,EACL,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,GACnB,CAAC"}

package/web-components/types.d.ts

@@ -0,0 +1,122 @@
+/**
+ * @file types.ts
+ * @description TypeScript type declarations for FrontMCP Web Components.
+ *
+ * Provides JSX.IntrinsicElements augmentation for React/Preact compatibility,
+ * and HTMLElementTagNameMap augmentation for TypeScript DOM APIs.
+ *
+ * @example React usage with types
+ * ```tsx
+ * import '@frontmcp/ui/web-components'; // Includes type augmentations
+ *
+ * function App() {
+ *   return (
+ *     <fmcp-button variant="primary" onClick={handleClick}>
+ *       Click Me
+ *     </fmcp-button>
+ *   );
+ * }
+ * ```
+ *
+ * @module @frontmcp/ui/web-components/types
+ */
+import type { ButtonOptions } from '../components/button';
+import type { CardOptions } from '../components/card';
+import type { AlertOptions } from '../components/alert';
+import type { BadgeOptions } from '../components/badge';
+import type { InputOptions, SelectOptions } from '../components/form';
+/**
+ * Props for fmcp-button element
+ */
+export interface FmcpButtonProps extends Partial<ButtonOptions> {
+    children?: string;
+    class?: string;
+    style?: string;
+    'onfmcp:click'?: (e: CustomEvent) => void;
+    'onfmcp:render'?: (e: CustomEvent) => void;
+}
+/**
+ * Props for fmcp-card element
+ */
+export interface FmcpCardProps extends Partial<Omit<CardOptions, 'title'>> {
+    /** Card title (renamed to avoid conflict with HTMLElement.title) */
+    'card-title'?: string;
+    children?: string;
+    class?: string;
+    style?: string;
+    'onfmcp:render'?: (e: CustomEvent) => void;
+}
+/**
+ * Props for fmcp-alert element
+ */
+export interface FmcpAlertProps extends Partial<Omit<AlertOptions, 'title'>> {
+    /** Alert title (renamed to avoid conflict with HTMLElement.title) */
+    'alert-title'?: string;
+    children?: string;
+    class?: string;
+    style?: string;
+    'onfmcp:render'?: (e: CustomEvent) => void;
+}
+/**
+ * Props for fmcp-badge element
+ */
+export interface FmcpBadgeProps extends Partial<BadgeOptions> {
+    children?: string;
+    class?: string;
+    style?: string;
+    'onfmcp:render'?: (e: CustomEvent) => void;
+}
+/**
+ * Props for fmcp-input element
+ */
+export interface FmcpInputProps extends Partial<InputOptions> {
+    class?: string;
+    style?: string;
+    'onfmcp:input'?: (e: CustomEvent<{
+        value: string;
+        name: string;
+    }>) => void;
+    'onfmcp:change'?: (e: CustomEvent<{
+        value: string;
+        name: string;
+    }>) => void;
+    'onfmcp:render'?: (e: CustomEvent) => void;
+}
+/**
+ * Props for fmcp-select element
+ */
+export interface FmcpSelectProps extends Partial<SelectOptions> {
+    class?: string;
+    style?: string;
+    'onfmcp:change'?: (e: CustomEvent<{
+        value: string;
+        name: string;
+        selectedOptions: string[];
+    }>) => void;
+    'onfmcp:render'?: (e: CustomEvent) => void;
+}
+declare global {
+    /**
+     * HTMLElementTagNameMap augmentation for DOM APIs
+     */
+    interface HTMLElementTagNameMap {
+        'fmcp-button': HTMLElement & FmcpButtonProps;
+        'fmcp-card': HTMLElement & FmcpCardProps;
+        'fmcp-alert': HTMLElement & FmcpAlertProps;
+        'fmcp-badge': HTMLElement & FmcpBadgeProps;
+        'fmcp-input': HTMLElement & FmcpInputProps;
+        'fmcp-select': HTMLElement & FmcpSelectProps;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'fmcp-button': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpButtonProps, HTMLElement>;
+            'fmcp-card': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpCardProps, HTMLElement>;
+            'fmcp-alert': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpAlertProps, HTMLElement>;
+            'fmcp-badge': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpBadgeProps, HTMLElement>;
+            'fmcp-input': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpInputProps, HTMLElement>;
+            'fmcp-select': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & FmcpSelectProps, HTMLElement>;
+        }
+    }
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/web-components/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/web-components/types.ts"],"names":[],"mappings":"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"}

package/widgets/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Widgets Module
+ *
+ * Specialized widgets for OpenAI App SDK and common UI patterns.
+ */
+export { type ResourceType, type ResourceMeta, type ResourceAction, type ResourceOptions, type ResourceListOptions, type CodePreviewOptions, type ImagePreviewOptions, resourceWidget, resourceList, resourceItem, codePreview, imagePreview, } from './resource';
+export { type ProgressBarOptions, type Step, type StepProgressOptions, type CircularProgressOptions, type StatusIndicatorOptions, type SkeletonOptions, progressBar, stepProgress, circularProgress, statusIndicator, skeleton, contentSkeleton, } from './progress';
+//# sourceMappingURL=index.d.ts.map

package/widgets/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/widgets/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,mBAAmB,EACxB,cAAc,EACd,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,YAAY,GACb,MAAM,YAAY,CAAC;AAGpB,OAAO,EACL,KAAK,kBAAkB,EACvB,KAAK,IAAI,EACT,KAAK,mBAAmB,EACxB,KAAK,uBAAuB,EAC5B,KAAK,sBAAsB,EAC3B,KAAK,eAAe,EACpB,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,QAAQ,EACR,eAAe,GAChB,MAAM,YAAY,CAAC"}