@hybr1d-tech/charizard 0.6.68 → 0.6.69

package/dist/components/alert/Alert.d.ts

@@ -1,5 +1,4 @@
-import { AlertPropTypes } from './types';
-
+import * as React from 'react';
 export declare enum ALERT_TYPES {
     DEFAULT = "default",
     POSITIVE = "positive"
@@ -8,6 +7,12 @@ export declare enum ALERT_ACTION_TYPES {
     CLOSE = "close",
     SHOW_MORE = "show-more"
 }
+interface AlertPropTypes {
+    alertType: string;
+    actionType: string;
+    header: React.ReactNode;
+    body?: React.ReactNode;
+}
 export declare function Alert({ alertType, actionType, header, body }: AlertPropTypes): import("react/jsx-runtime").JSX.Element;
 export declare const alertTypeMap: {
     [key: string]: {
@@ -16,3 +21,4 @@ export declare const alertTypeMap: {
         icon: string;
     };
 };
+export {};

package/dist/components/index.d.ts

@@ -33,10 +33,12 @@ export * from './pill';
 export * from './table-v3';
 export * from './select-v2';
 export * from './skeleton';
-export * from './AsyncImage';
+export * from './asyncImage';
 export * from './date-picker';
 export * from './drawer-v2';
 export * from './toasts';
 export * from './checkbox-v2';
 export * from './alert';
 export * from './upload';
+export * from './input-v2';
+export * from './search-v2';

package/dist/components/input-v2/Input.d.ts

@@ -0,0 +1,20 @@
+import { InputV2Props } from './types';
+import * as React from 'react';
+/**
+ * InputV2 component - A custom input component with extended functionality and built-in error handling.
+ *
+ * @param {InputV2Props} props - The props object containing configurations and attributes for the input element.
+ * @param {React.Ref<HTMLInputElement>} ref - A React ref that can be used to access the input element directly.
+ *
+ * @returns {JSX.Element} A JSX element representing the custom input field.
+ *
+ * @example
+ * <InputV2 placeholder="Enter your name" />
+ *
+ * @example
+ * <InputV2 errorMsg="Name is required" placeholder="Enter your name" />
+ * @example
+ * with formik
+ * <InputV2 {...formik.getFieldProps(key)} placeholder="Enter your name" />
+ */
+export declare const InputV2: React.ForwardRefExoticComponent<InputV2Props & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input-v2/InputAdornment.d.ts

@@ -0,0 +1,64 @@
+import { InputAdornmentProps, INPUT_COMPONENTS } from './types';
+
+/**
+ * Component for rendering an adornment on the left side of an input.
+ * It can either display static content or function as a dropdown trigger.
+ *
+ * @param {InputAdornmentProps} props - The properties for the InputLeftAdornment component.
+ * @param {React.ReactNode} props.children - The content to display inside the adornment.
+ * @param {boolean} [props.isLoading=false] - Indicates if the dropdown is in a loading state.
+ * @param {boolean} [props.disabled] - Whether the adornment is disabled.
+ * @param {boolean} [props.isDropdown] - Whether the adornment is a dropdown trigger.
+ * @param {DropdownOption[]} [props.options] - Options to display in the dropdown.
+ * @param {boolean} [props.hideSearch=false] - Whether to hide the search input in the dropdown.
+ * @param {(value: string) => void} [props.onOptionSelect] - Callback for when an option is selected.
+ *
+ * @returns {JSX.Element} The left adornment for an input field.
+ *
+ * @example
+ *  <InputGroupV2>
+ *   <InputV2 />
+ *   <InputLeftAdornment>...</InputLeftAdornment>
+ * </InputGroupV2>
+ *
+ * @example
+ *  <InputGroupV2>
+ *   <InputLeftAdornment isDropdown options={options} onOptionSelect={handleSelect}>...</InputLeftAdornment>
+ *   <InputV2 />
+ * </InputGroupV2>
+ */
+export declare function InputLeftAdornment({ children, isLoading, disabled, isDropdown, options, hideSearch, onOptionSelect, }: InputAdornmentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputLeftAdornment {
+    var displayName: INPUT_COMPONENTS;
+}
+/**
+ * Component for rendering an adornment on the right side of an input.
+ * It can either display static content or function as a dropdown trigger.
+ *
+ * @param {InputAdornmentProps} props - The properties for the InputRightAdornment component.
+ * @param {React.ReactNode} props.children - The content to display inside the adornment.
+ * @param {boolean} [props.isLoading=false] - Indicates if the dropdown is in a loading state.
+ * @param {boolean} [props.disabled] - Whether the adornment is disabled.
+ * @param {boolean} [props.isDropdown] - Whether the adornment is a dropdown trigger.
+ * @param {DropdownOption[]} [props.options] - Options to display in the dropdown.
+ * @param {boolean} [props.hideSearch=false] - Whether to hide the search input in the dropdown.
+ * @param {(value: string) => void} [props.onOptionSelect] - Callback for when an option is selected.
+ *
+ * @returns {JSX.Element} The right adornment for an input field.
+ *
+ * @example
+ *  <InputGroupV2>
+ *   <InputV2 />
+ *   <InputRightAdornment>...</InputRightAdornment>
+ * </InputGroupV2>
+ *
+ * @example
+ *  <InputGroupV2>
+ *   <InputRightAdornment isDropdown options={options} onOptionSelect={handleSelect}>...</InputRightAdornment>
+ *   <InputV2 />
+ * </InputGroupV2>
+ */
+export declare function InputRightAdornment({ children, isLoading, disabled, isDropdown, options, hideSearch, onOptionSelect, }: InputAdornmentProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputRightAdornment {
+    var displayName: INPUT_COMPONENTS;
+}

package/dist/components/input-v2/InputControl.d.ts

@@ -0,0 +1,27 @@
+import { InputControlPropsV2, INPUT_COMPONENTS } from './types';
+
+/**
+ * InputControlV2 is a wrapper component that provides a container for form control elements.
+ * It applies consistent styling to its children, typically used for grouping form elements like
+ * labels, inputs, and additional controls.
+ *
+ * @param {InputControlPropsV2} props - The properties for the InputControlV2 component.
+ * @param {string} [props.className=''] - Additional class names to apply to the control container.
+ * @param {React.ReactNode} props.children - The content to be rendered within the control container.
+ * @param {React.HTMLAttributes<HTMLDivElement>} [props] - Additional HTML attributes to apply to the control container.
+ *
+ * @returns {JSX.Element} The rendered control container with the specified children.
+ *
+ * @example
+ * <InputControlV2>
+ *   <LabelV2>Username</LabelV2>
+ *   <InputV2
+ *   placeholder="Enter"
+ *   errorMsg="This field is required"
+ *  />
+ * </InputControlV2>
+ */
+export declare function InputControlV2({ className, children, ...props }: InputControlPropsV2): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputControlV2 {
+    var displayName: INPUT_COMPONENTS;
+}

package/dist/components/input-v2/InputCount.d.ts

@@ -0,0 +1,32 @@
+import { INPUT_COMPONENTS, InputCountProps } from './types';
+
+/**
+ * InputCount is a specialized input component that allows users to increment
+ * or decrement a numeric value within a specified range. It includes buttons
+ * for incrementing and decrementing the value, and supports keyboard input for
+ * adjusting the count.
+ *
+ * @param {InputCountProps} props - The properties for the InputCount component.
+ * @param {(value: number) => void} props.onCountChange - Callback function called when the count value changes.
+ * @param {number} [props.min=-Infinity] - The minimum value that the count can be set to.
+ * @param {number} [props.max=Infinity] - The maximum value that the count can be set to.
+ * @param {number} [props.count=0] - The current count value.
+ * @param {string} [props.countContainerClassName] - Additional class names to apply to the container.
+ * @param {boolean} [props.disabled] - Whether the input is disabled.
+ * @param {React.InputHTMLAttributes<HTMLInputElement>} [props] - Additional HTML input attributes.
+ *
+ * @returns {JSX.Element} The rendered InputCount component.
+ *
+ * @example
+ * <InputCount
+ *   onCountChange={(value) => console.log(value)}
+ *   min={0}
+ *   max={10}
+ *   count={5}
+ *   disabled={false}
+ * />
+ */
+export declare function InputCount({ onCountChange, min, max, count, countContainerClassName, disabled, ...props }: InputCountProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputCount {
+    var displayName: INPUT_COMPONENTS;
+}

package/dist/components/input-v2/InputGroup.d.ts

@@ -0,0 +1,6 @@
+import { InputGroupPropsV2, INPUT_COMPONENTS } from './types';
+
+export declare function InputGroupV2({ className, children, ...props }: InputGroupPropsV2): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputGroupV2 {
+    var displayName: INPUT_COMPONENTS;
+}

package/dist/components/input-v2/InputIcon.d.ts

@@ -0,0 +1,48 @@
+import { InputIconProps, INPUT_COMPONENTS } from './types';
+
+/**
+ * InputLeftIcon renders an icon on the left side of an input field.
+ * If `onClick` is provided, the icon is rendered as a button.
+ *
+ * @param {InputIconProps} props - The properties for the InputLeftIcon component.
+ * @param {string} props.icon - The SVG path for the icon to display.
+ * @param {() => void} [props.onClick] - Optional click handler for the icon. When provided, the icon is rendered as a button.
+ * @param {React.CSSProperties} [props.iconStyles] - Optional inline styles to apply to the icon.
+ * @param {boolean} [props.disabled=false] - Whether the icon or button is disabled.
+ * @param {string} [props.className] - Additional class names to apply to the icon container.
+ *
+ * @returns {JSX.Element} The rendered InputLeftIcon component.
+ *
+ * @example
+ *  <InputGroupV2>
+ *   <InputLeftIcon icon={...} />
+ *   <InputV2 />
+ * </InputGroupV2>
+ */
+export declare function InputLeftIcon({ icon, onClick, iconStyles, disabled, className, }: InputIconProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputLeftIcon {
+    var displayName: INPUT_COMPONENTS;
+}
+/**
+ * InputRightIcon renders an icon on the right side of an input field.
+ * If `onClick` is provided, the icon is rendered as a button.
+ *
+ * @param {InputIconProps} props - The properties for the InputRightIcon component.
+ * @param {string} props.icon - The SVG path for the icon to display.
+ * @param {() => void} [props.onClick] - Optional click handler for the icon. When provided, the icon is rendered as a button.
+ * @param {React.CSSProperties} [props.iconStyles] - Optional inline styles to apply to the icon.
+ * @param {boolean} [props.disabled=false] - Whether the icon or button is disabled.
+ * @param {string} [props.className] - Additional class names to apply to the icon container.
+ *
+ * @returns {JSX.Element} The rendered InputRightIcon component.
+ *
+ * @example
+ *  <InputGroupV2>
+ *   <InputV2 />
+ *   <InputRightIcon icon={...} />
+ * </InputGroupV2>
+ */
+export declare function InputRightIcon({ icon, onClick, iconStyles, disabled, className, }: InputIconProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputRightIcon {
+    var displayName: INPUT_COMPONENTS;
+}

package/dist/components/input-v2/InputNumber.d.ts

@@ -0,0 +1,24 @@
+import { INPUT_COMPONENTS, InputNumberProps } from './types';
+
+/**
+ * InputNumber is a numeric input component with increment and decrement controls.
+ * It ensures that the value stays within the specified min and max bounds.
+ *
+ * @param {InputNumberProps} props - The properties for the InputNumber component.
+ * @param {(value: number) => void} props.onCountChange - Callback function that is called when the numeric value changes.
+ * @param {number} [props.min=-Infinity] - The minimum value allowed.
+ * @param {number} [props.max=Infinity] - The maximum value allowed.
+ * @param {number} [props.count=0] - The initial value of the input.
+ * @param {string} [props.countContainerClassName] - Additional class names for the container of the numeric input.
+ * @param {boolean} [props.disabled=false] - Whether the input and controls are disabled.
+ * @param {React.InputHTMLAttributes<HTMLInputElement>} props - Additional props are passed to the underlying input component.
+ *
+ * @returns {JSX.Element} The rendered InputNumber component.
+ *
+ * @example
+ * <InputNumber onCountChange={(value) => ...)} count={5} min={0} max={10} />
+ */
+export declare function InputNumber({ onCountChange, min, max, count, countContainerClassName, disabled, ...props }: InputNumberProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace InputNumber {
+    var displayName: INPUT_COMPONENTS;
+}

package/dist/components/input-v2/Label.d.ts

@@ -0,0 +1,24 @@
+import { LabelPropsV2, INPUT_COMPONENTS } from './types';
+
+/**
+ * LabelV2 is a label component that can display additional information via a tooltip,
+ * mark the field as required, and adjust styles based on the disabled state.
+ *
+ * @param {LabelPropsV2} props - The properties for the LabelV2 component.
+ * @param {string} [props.className=''] - Additional class names to apply to the label element.
+ * @param {string} [props.info=''] - Information text to be displayed in a tooltip. If provided, an info icon will appear next to the label.
+ * @param {boolean} [props.disabled=false] - Whether the label and its associated input are disabled.
+ * @param {boolean} [props.required=false] - Whether the associated input field is required. If true, an asterisk (*) will be displayed.
+ * @param {object} [props.tooltipProps={}] - Optional props to pass to the TooltipV2 component.
+ * @param {React.ReactNode} props.children - The content of the label, usually text.
+ * @returns {JSX.Element} The rendered LabelV2 component.
+ *
+ * @example
+ * <LabelV2 required info="This field is required">
+ *   Username
+ * </LabelV2>
+ */
+export declare function LabelV2({ className, info, disabled, required, tooltipProps, children, ...props }: LabelPropsV2): import("react/jsx-runtime").JSX.Element;
+export declare namespace LabelV2 {
+    var displayName: INPUT_COMPONENTS;
+}

package/dist/components/input-v2/NumberAdornment.d.ts

@@ -0,0 +1,24 @@
+import { INPUT_COMPONENTS, NumberAdornmentProps } from './types';
+
+/**
+ * NumberAdornment provides increment and decrement buttons for numeric inputs.
+ * It allows users to adjust the numeric value up or down within a controlled component i.e. InputNumber.
+ *
+ * @param {NumberAdornmentProps} props - The properties for the NumberAdornment component.
+ * @param {() => void} [props.onDecrement] - Callback function to be called when the decrement button is clicked.
+ * @param {() => void} [props.onIncrement] - Callback function to be called when the increment button is clicked.
+ * @param {boolean} [props.disabled=false] - Whether the buttons are disabled or not.
+ * @returns {JSX.Element} The rendered NumberAdornment component.
+ *
+ * @example
+ * <NumberAdornment
+ *   onIncrement={handleIncrement}
+ *   onDecrement={handleDecrement}
+ *   disabled={false}
+ * />
+ */
+declare function NumberAdornment({ onDecrement, onIncrement, disabled, }: NumberAdornmentProps): import("react/jsx-runtime").JSX.Element;
+declare namespace NumberAdornment {
+    var displayName: INPUT_COMPONENTS;
+}
+export default NumberAdornment;

package/dist/components/input-v2/Textarea.d.ts

@@ -0,0 +1,23 @@
+import { TextareaV2Props } from './types';
+import * as React from 'react';
+/**
+ * TextareaV2 is a styled textarea component with optional error message display.
+ * It provides a flexible way to render a textarea with custom styles and error handling.
+ *
+ * @param {TextareaV2Props} props - The properties for the TextareaV2 component.
+ * @param {string} [props.errorMsg=''] - Error message to display below the textarea.
+ * @param {string} [props.containerClassName=''] - Additional CSS classes to apply to the container.
+ * @param {string} [props.className=''] - Additional CSS classes to apply to the textarea.
+ * @param {React.CSSProperties} [props.inputStyles={}] - Used for internal styling when grouping it with multiple components. use className for styling textarea.
+ * @param {React.CSSProperties} [props.containerStyles={}] -Used for internal styling when grouping it with multiple components. use containerClassName for styling textarea container.
+ * @param {React.TextareaHTMLAttributes<HTMLTextAreaElement>} [props] - Other standard textarea attributes.
+ * @param {React.Ref<HTMLTextAreaElement>} ref - Ref to the underlying textarea element.
+ * @returns {JSX.Element} The rendered TextareaV2 component.
+ *
+ * @example
+ * <TextareaV2
+ *   errorMsg="This field is required."
+ *   placeholder="Enter text..."
+ * />
+ */
+export declare const TextareaV2: React.ForwardRefExoticComponent<TextareaV2Props & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/input-v2/index.d.ts

@@ -0,0 +1,10 @@
+export * from './Input';
+export * from './InputControl';
+export * from './Label';
+export * from './InputGroup';
+export * from './InputIcon';
+export * from './InputAdornment';
+export * from './Textarea';
+export * from './InputCount';
+export * from './InputNumber';
+export * from './NumberAdornment';