mtrl 0.3.7 → 0.3.9

package/dist/components/textfield/constants.d.ts

@@ -0,0 +1,148 @@
+/**
+ * Textfield variant constants
+ * @category Components
+ */
+export declare const TEXTFIELD_VARIANTS: {
+    /** Filled variant with background and animated label */
+    readonly FILLED: "filled";
+    /** Outlined variant with border and animated label */
+    readonly OUTLINED: "outlined";
+};
+/**
+ * Textfield size constants
+ * @category Components
+ */
+export declare const TEXTFIELD_SIZES: {
+    /** Small textfield */
+    readonly SMALL: "small";
+    /** Medium textfield (default) */
+    readonly MEDIUM: "medium";
+    /** Large textfield */
+    readonly LARGE: "large";
+};
+/**
+ * Textfield state constants
+ * @category Components
+ */
+export declare const TEXTFIELD_STATES: {
+    /** Textfield is active (focused) */
+    readonly ACTIVE: "active";
+    /** Textfield is inactive (not focused) */
+    readonly INACTIVE: "inactive";
+    /** Textfield is disabled */
+    readonly DISABLED: "disabled";
+};
+/**
+ * Textfield type constants
+ * @category Components
+ */
+export declare const TEXTFIELD_TYPES: {
+    /** Standard text input */
+    readonly TEXT: "text";
+    /** Password input with obscured characters */
+    readonly PASSWORD: "password";
+    /** Email input with email validation */
+    readonly EMAIL: "email";
+    /** Numeric input */
+    readonly NUMBER: "number";
+    /** Telephone number input */
+    readonly TEL: "tel";
+    /** URL input with URL validation */
+    readonly URL: "url";
+    /** Search input */
+    readonly SEARCH: "search";
+    /** Multiline text input (textarea) */
+    readonly MULTILINE: "multiline";
+};
+/**
+ * Textfield event constants
+ * @category Components
+ */
+export declare const TEXTFIELD_EVENTS: {
+    /** Fired when textfield value changes */
+    readonly CHANGE: "change";
+    /** Fired during input */
+    readonly INPUT: "input";
+    /** Fired when textfield receives focus */
+    readonly FOCUS: "focus";
+    /** Fired when textfield loses focus */
+    readonly BLUR: "blur";
+    /** Fired when enter key is pressed */
+    readonly ENTER: "enter";
+    /** Fired when a key is pressed down */
+    readonly KEYDOWN: "keydown";
+    /** Fired when a key is released */
+    readonly KEYUP: "keyup";
+};
+/**
+ * Default textfield configuration values
+ * @category Components
+ */
+export declare const TEXTFIELD_DEFAULTS: {
+    /** Default input type */
+    readonly TYPE: "text";
+    /** Default visual variant */
+    readonly VARIANT: "filled";
+    /** Default textfield size */
+    readonly SIZE: "medium";
+    /** Default disabled state */
+    readonly DISABLED: false;
+    /** Default required state */
+    readonly REQUIRED: false;
+    /** Default error state */
+    readonly ERROR: false;
+    /** Default label floating behavior (always floats on focus) */
+    readonly FLOAT_LABEL: true;
+    /** Default animation duration in milliseconds */
+    readonly ANIMATION_DURATION: 150;
+};
+/**
+ * CSS class names used by the textfield component
+ * @category Components
+ */
+export declare const TEXTFIELD_CLASSES: {
+    /** Root element class */
+    readonly ROOT: "textfield";
+    /** Input element class */
+    readonly INPUT: "textfield-input";
+    /** Label element class */
+    readonly LABEL: "textfield-label";
+    /** Container element class */
+    readonly CONTAINER: "textfield-container";
+    /** Filled variant class */
+    readonly FILLED: "textfield--filled";
+    /** Outlined variant class */
+    readonly OUTLINED: "textfield--outlined";
+    /** Small size class */
+    readonly SMALL: "textfield--small";
+    /** Medium size class */
+    readonly MEDIUM: "textfield--medium";
+    /** Large size class */
+    readonly LARGE: "textfield--large";
+    /** Focused state class */
+    readonly FOCUSED: "textfield--focused";
+    /** Disabled state class */
+    readonly DISABLED: "textfield--disabled";
+    /** Error state class */
+    readonly ERROR: "textfield--error";
+    /** Required indicator class */
+    readonly REQUIRED: "textfield--required";
+    /** Floating label class */
+    readonly LABEL_FLOATING: "textfield-label--floating";
+    /** Supporting text class */
+    readonly SUPPORTING_TEXT: "textfield-supporting-text";
+    /** Supporting text error class */
+    readonly SUPPORTING_TEXT_ERROR: "textfield-supporting-text--error";
+    /** Leading icon class */
+    readonly LEADING_ICON: "textfield-leading-icon";
+    /** Trailing icon class */
+    readonly TRAILING_ICON: "textfield-trailing-icon";
+    /** Prefix text class */
+    readonly PREFIX_TEXT: "textfield-prefix-text";
+    /** Suffix text class */
+    readonly SUFFIX_TEXT: "textfield-suffix-text";
+    /** Outline element class (for outlined variant) */
+    readonly OUTLINE: "textfield-outline";
+    /** Multiline class */
+    readonly MULTILINE: "textfield--multiline";
+};

package/{src/components/textfield/features/index.ts → dist/components/textfield/features/index.d.ts}

@@ -1,17 +1,12 @@
-// src/components/textfield/features/index.ts
-
-// Export features
 export { withLeadingIcon } from './leading-icon';
 export { withTrailingIcon } from './trailing-icon';
 export { withPrefixText } from './prefix-text';
 export { withSuffixText } from './suffix-text';
 export { withSupportingText } from './supporting-text';
 export { withPlacement } from './placement';
-
-// Export interfaces
 export type { LeadingIconComponent, LeadingIconConfig } from './leading-icon';
 export type { TrailingIconComponent, TrailingIconConfig } from './trailing-icon';
 export type { PrefixTextComponent, PrefixTextConfig } from './prefix-text';
 export type { SuffixTextComponent, SuffixTextConfig } from './suffix-text';
 export type { SupportingTextComponent, SupportingTextConfig } from './supporting-text';
-export type { PlacementComponent } from './placement';
+export type { PlacementComponent } from './placement';

package/dist/components/textfield/features/leading-icon.d.ts

@@ -0,0 +1,55 @@
+import { BaseComponent, ElementComponent } from '../../../core/compose/component';
+/**
+ * Extended element component with input field
+ */
+interface InputElementComponent extends ElementComponent {
+    input?: HTMLInputElement | HTMLTextAreaElement;
+    lifecycle?: {
+        destroy: () => void;
+    };
+}
+/**
+ * Configuration for leading icon feature
+ */
+export interface LeadingIconConfig {
+    /**
+     * Leading icon HTML content
+     */
+    leadingIcon?: string;
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name
+     */
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Component with leading icon capabilities
+ */
+export interface LeadingIconComponent extends BaseComponent {
+    /**
+     * Leading icon element
+     */
+    leadingIcon: HTMLElement | null;
+    /**
+     * Sets leading icon content
+     * @param html - HTML content for the icon
+     * @returns Component instance for chaining
+     */
+    setLeadingIcon: (html: string) => LeadingIconComponent;
+    /**
+     * Removes leading icon
+     * @returns Component instance for chaining
+     */
+    removeLeadingIcon: () => LeadingIconComponent;
+}
+/**
+ * Adds leading icon to a textfield component
+ * @param config - Configuration with leading icon settings
+ * @returns Function that enhances a component with leading icon
+ */
+export declare const withLeadingIcon: <T extends LeadingIconConfig>(config: T) => <C extends InputElementComponent>(component: C) => C & LeadingIconComponent;
+export {};

package/dist/components/textfield/features/placement.d.ts

@@ -0,0 +1,28 @@
+import { BaseComponent, ElementComponent } from '../../../core/compose/component';
+/**
+ * Extended element component with input field
+ */
+interface InputElementComponent extends ElementComponent {
+    input?: HTMLInputElement | HTMLTextAreaElement;
+    lifecycle?: {
+        destroy: () => void;
+    };
+}
+/**
+ * Component with placement management capabilities
+ */
+export interface PlacementComponent extends BaseComponent {
+    /**
+     * Updates positions of all elements in the textfield
+     * @returns The component instance for chaining
+     */
+    updateElementPositions: () => PlacementComponent;
+}
+/**
+ * Handles dynamic positioning of textfield elements (label, prefix, suffix)
+ * This feature should be added last in the pipe to ensure all elements exist
+ *
+ * @returns Function that enhances a component with dynamic positioning
+ */
+export declare const withPlacement: () => <C extends InputElementComponent>(component: C) => C & PlacementComponent;
+export {};

package/dist/components/textfield/features/prefix-text.d.ts

@@ -0,0 +1,54 @@
+import { BaseComponent, ElementComponent } from '../../../core/compose/component';
+/**
+ * Extended element component with lifecycle
+ */
+interface LifecycleElementComponent extends ElementComponent {
+    lifecycle?: {
+        destroy: () => void;
+    };
+}
+/**
+ * Configuration for prefix text feature
+ */
+export interface PrefixTextConfig {
+    /**
+     * Prefix text content to display before the input
+     */
+    prefixText?: string;
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name
+     */
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Component with prefix text capabilities
+ */
+export interface PrefixTextComponent extends BaseComponent {
+    /**
+     * Prefix text element
+     */
+    prefixTextElement: HTMLElement | null;
+    /**
+     * Sets prefix text content
+     * @param text - Text content to display before the input
+     * @returns Component instance for chaining
+     */
+    setPrefixText: (text: string) => PrefixTextComponent;
+    /**
+     * Removes prefix text
+     * @returns Component instance for chaining
+     */
+    removePrefixText: () => PrefixTextComponent;
+}
+/**
+ * Adds prefix text to a textfield component
+ * @param config - Configuration with prefix text settings
+ * @returns Function that enhances a component with prefix text
+ */
+export declare const withPrefixText: <T extends PrefixTextConfig>(config: T) => <C extends LifecycleElementComponent>(component: C) => C & PrefixTextComponent;
+export {};

package/dist/components/textfield/features/suffix-text.d.ts

@@ -0,0 +1,54 @@
+import { BaseComponent, ElementComponent } from '../../../core/compose/component';
+/**
+ * Extended element component with lifecycle
+ */
+interface LifecycleElementComponent extends ElementComponent {
+    lifecycle?: {
+        destroy: () => void;
+    };
+}
+/**
+ * Configuration for suffix text feature
+ */
+export interface SuffixTextConfig {
+    /**
+     * Suffix text content to display after the input
+     */
+    suffixText?: string;
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name
+     */
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Component with suffix text capabilities
+ */
+export interface SuffixTextComponent extends BaseComponent {
+    /**
+     * Suffix text element
+     */
+    suffixTextElement: HTMLElement | null;
+    /**
+     * Sets suffix text content
+     * @param text - Text content to display after the input
+     * @returns Component instance for chaining
+     */
+    setSuffixText: (text: string) => SuffixTextComponent;
+    /**
+     * Removes suffix text
+     * @returns Component instance for chaining
+     */
+    removeSuffixText: () => SuffixTextComponent;
+}
+/**
+ * Adds suffix text to a textfield component
+ * @param config - Configuration with suffix text settings
+ * @returns Function that enhances a component with suffix text
+ */
+export declare const withSuffixText: <T extends SuffixTextConfig>(config: T) => <C extends LifecycleElementComponent>(component: C) => C & SuffixTextComponent;
+export {};

package/dist/components/textfield/features/supporting-text.d.ts

@@ -0,0 +1,59 @@
+import { BaseComponent, ElementComponent } from '../../../core/compose/component';
+/**
+ * Extended element component with lifecycle
+ */
+interface LifecycleElementComponent extends ElementComponent {
+    lifecycle?: {
+        destroy: () => void;
+    };
+}
+/**
+ * Configuration for supporting text feature
+ */
+export interface SupportingTextConfig {
+    /**
+     * Supporting text content
+     */
+    supportingText?: string;
+    /**
+     * Whether supporting text indicates an error
+     */
+    error?: boolean;
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name
+     */
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Component with supporting text capabilities
+ */
+export interface SupportingTextComponent extends BaseComponent {
+    /**
+     * Supporting text element
+     */
+    supportingTextElement: HTMLElement | null;
+    /**
+     * Sets supporting text content
+     * @param text - Text content
+     * @param isError - Whether text represents an error
+     * @returns Component instance for chaining
+     */
+    setSupportingText: (text: string, isError?: boolean) => SupportingTextComponent;
+    /**
+     * Removes supporting text
+     * @returns Component instance for chaining
+     */
+    removeSupportingText: () => SupportingTextComponent;
+}
+/**
+ * Adds supporting text to a textfield component
+ * @param config - Configuration with supporting text settings
+ * @returns Function that enhances a component with supporting text
+ */
+export declare const withSupportingText: <T extends SupportingTextConfig>(config: T) => <C extends LifecycleElementComponent>(component: C) => C & SupportingTextComponent;
+export {};

package/dist/components/textfield/features/trailing-icon.d.ts

@@ -0,0 +1,55 @@
+import { BaseComponent, ElementComponent } from '../../../core/compose/component';
+/**
+ * Extended element component with input field
+ */
+interface InputElementComponent extends ElementComponent {
+    input?: HTMLInputElement | HTMLTextAreaElement;
+    lifecycle?: {
+        destroy: () => void;
+    };
+}
+/**
+ * Configuration for trailing icon feature
+ */
+export interface TrailingIconConfig {
+    /**
+     * Trailing icon HTML content
+     */
+    trailingIcon?: string;
+    /**
+     * CSS class prefix
+     */
+    prefix?: string;
+    /**
+     * Component name
+     */
+    componentName?: string;
+    [key: string]: any;
+}
+/**
+ * Component with trailing icon capabilities
+ */
+export interface TrailingIconComponent extends BaseComponent {
+    /**
+     * Trailing icon element
+     */
+    trailingIcon: HTMLElement | null;
+    /**
+     * Sets trailing icon content
+     * @param html - HTML content for the icon
+     * @returns Component instance for chaining
+     */
+    setTrailingIcon: (html: string) => TrailingIconComponent;
+    /**
+     * Removes trailing icon
+     * @returns Component instance for chaining
+     */
+    removeTrailingIcon: () => TrailingIconComponent;
+}
+/**
+ * Adds trailing icon to a textfield component
+ * @param config - Configuration with trailing icon settings
+ * @returns Function that enhances a component with trailing icon
+ */
+export declare const withTrailingIcon: <T extends TrailingIconConfig>(config: T) => <C extends InputElementComponent>(component: C) => C & TrailingIconComponent;
+export {};

package/dist/components/textfield/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './textfield';
+export { TEXTFIELD_VARIANTS, TEXTFIELD_SIZES, TEXTFIELD_STATES, TEXTFIELD_TYPES, TEXTFIELD_EVENTS, TEXTFIELD_DEFAULTS, TEXTFIELD_CLASSES } from './constants';
+export { TextfieldConfig, TextfieldComponent } from './types';

package/dist/components/textfield/textfield.d.ts

@@ -0,0 +1,36 @@
+import { TextfieldConfig, TextfieldComponent } from './types';
+/**
+ * Creates a new Textfield component
+ *
+ * Textfields allow users to enter text into a UI. They typically appear in forms and dialogs.
+ * This implementation follows Material Design 3 guidelines for accessible, customizable textfields.
+ *
+ * @param {TextfieldConfig} config - Textfield configuration options
+ * @returns {TextfieldComponent} A fully configured textfield component instance
+ * @throws {Error} Throws an error if textfield creation fails
+ *
+ * @example
+ * // Create a basic text field
+ * const textfield = createTextfield({
+ *   label: 'Username',
+ *   name: 'username'
+ * });
+ *
+ * document.querySelector('.form').appendChild(textfield.element);
+ *
+ * @example
+ * // Create a text field with prefix and suffix
+ * const currencyField = createTextfield({
+ *   label: 'Amount',
+ *   type: 'number',
+ *   prefixText: '$',
+ *   suffixText: 'USD'
+ * });
+ *
+ * // Add event listener
+ * currencyField.on('input', (e) => {
+ *   console.log('Amount entered:', e.target.value);
+ * });
+ */
+declare const createTextfield: (config?: TextfieldConfig) => TextfieldComponent;
+export default createTextfield;