@muraldevkit/ui-toolkit 1.15.8 → 1.16.0

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

@@ -1,3 +1,4 @@
+import React from 'react';
 export type InputStates = 'disabled' | 'error';
 export type InputKinds = 'default' | 'inline';
 export type InputSizes = 'default' | 'large';
@@ -43,7 +44,7 @@ export interface StaticIconConfig {
     theme?: string;
 }
 export interface RightActionConfig extends StaticIconConfig {
-    action: (event: MouseEvent) => void;
+    action: (event: React.MouseEvent | React.KeyboardEvent) => void;
     label: string;
 }
 export declare const allowedLabelValues: {

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

@@ -1,3 +1,4 @@
 export * from './select/MrlSelect';
 export * from './select/MrlSelectItem';
 export * from './select/MrlSelectMenu';
+export * from './text-input/MrlTextInput';

package/dist/components/form/text-input/MrlTextInput/MrlTextInput.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import { AttrsObject } from '../../../../utils';
+import { RightActionConfig, InputStates } from '../../constants';
+/**
+ * @todo - we need to add static icon support for right
+ */
+interface MrlTextInputProps {
+    /** Applies additional HTML attributes to the text input element */
+    attrs?: AttrsObject;
+    /** Additional function to be run when the input's value is cleared */
+    hookClear?: () => void;
+    /** Id of the text input */
+    inputId: string;
+    /** The value of the text input used to make it a controlled input */
+    value?: string;
+    /** Text placeholder for the text input */
+    placeholder?: string;
+    /**
+     * Changes the state of the input based on user permissions or actions.
+     */
+    state?: InputStates;
+    /** Configures a static icon to persistently display on the left side of the input */
+    persistIcon?: Record<string, unknown>;
+    /** Configures an icon to the right side of the input */
+    dynamicIcon?: RightActionConfig;
+    /** Preset for setting up a clearable input via a right icon */
+    isClearable?: boolean;
+}
+/**
+ * Allows the user to input plain text
+ *
+ * @param {MrlTextInputProps} props - the component props
+ * @returns a text input element
+ */
+export declare function MrlTextInput({ attrs, inputId, isClearable, dynamicIcon, hookClear, persistIcon, placeholder, state, value }: MrlTextInputProps): JSX.Element;
+export {};

package/dist/components/form/text-input/MrlTextInput/MrlTextInputRightIcon.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+export interface MrlTextInputRightIconProps {
+    /** the action that should be executed when interacting with the icon */
+    action: (event: React.MouseEvent | React.KeyboardEvent) => void;
+    /** the icon that will be rendered */
+    icon: Record<string, unknown>;
+    /** data-qa attribute for the icon */
+    dataQa?: string;
+    /** describes the purpouse of the icon button */
+    label: string;
+    /** determines if the icon has active color or not */
+    hasActiveColor: boolean;
+    setHasActiveColor: (hasActiveColor: boolean) => void;
+    /** the text input value used to calculate the active style */
+    value?: string;
+}
+/**
+ * Renders the right icon in the text input
+ *
+ * @param {MrlTextInputRightIconProps} props - the component props
+ * @returns a button element with an icon
+ */
+export declare function MrlTextInputRightIcon({ action, dataQa, hasActiveColor, icon, label, setHasActiveColor, value }: MrlTextInputRightIconProps): JSX.Element;

package/dist/components/form/text-input/MrlTextInput/index.d.ts

@@ -0,0 +1 @@
+export { MrlTextInput } from './MrlTextInput';

package/dist/components/form/text-input/MrlTextInput/useActiveColor.d.ts

@@ -0,0 +1,13 @@
+import { InputStates } from '../../constants';
+type useActiveColorReturn = {
+    hasActiveColor: boolean;
+    setHasActiveColor: (hasActiveColor: boolean) => void;
+};
+/**
+ * Custom hook used to track the active color state of the text input
+ *
+ * @param {InputStates | undefined} state - the text input state
+ * @returns the hasActiveColor state and handler
+ */
+export declare function useActiveColor(state?: InputStates): useActiveColorReturn;
+export {};