@bolttech/molecules-input-combo 0.1.0

package/index.d.ts

@@ -0,0 +1 @@
+export * from "./src/index";

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@bolttech/molecules-input-combo",
+  "version": "0.1.0",
+  "dependencies": {
+    "react": "19.1.2",
+    "react-dom": "19.1.2",
+    "styled-components": "6.1.1",
+    "@bolttech/atoms-icon": "0.24.8",
+    "@bolttech/atoms-select": "0.27.2",
+    "@bolttech/atoms-tooltip": "0.24.8",
+    "@bolttech/molecules-dropdown": "0.37.2",
+    "@bolttech/ui-utils": "0.6.5",
+    "@bolttech/default-theme": "0.18.0"
+  },
+  "main": "./index.cjs.js",
+  "type": "commonjs",
+  "types": "./index.d.ts"
+}

package/src/index.d.ts

@@ -0,0 +1,2 @@
+export { InputCombo } from './lib/molecules-input-combo';
+export type { InputComboProps, DropdownOption, InputComboVariants, } from './lib/molecules-input-combo.type';

package/src/lib/molecules-input-combo.d.ts

@@ -0,0 +1,29 @@
+export declare const InputCombo: import("react").ForwardRefExoticComponent<import("@bolttech/ui-utils").DefaultProps & {
+    id?: string;
+    dataTestId?: string;
+    variant?: import("./molecules-input-combo.type").InputComboVariants;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    errorMessage?: string;
+    helperMessage?: string;
+    value?: string;
+    dropdownValue?: string;
+    dropdownOptions: import("./molecules-input-combo.type").DropdownOption[];
+    dropdownLabel?: string;
+    dropdownPlaceholder?: string;
+    dropdownDisableSearch?: boolean;
+    fullWidth?: boolean;
+    icon?: string;
+    usePortal?: boolean;
+    tooltip?: {
+        text: import("react").ReactNode;
+        variant: "dark" | "grey" | "light";
+        size: "short" | "long";
+    };
+    onChange?: (combo: import("./molecules-input-combo.type").ComboValue) => void;
+    onDropdownChange?: (option: import("./molecules-input-combo.type").DropdownOption) => void;
+    onBlur?: (evt: import("react").FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (evt: import("react").FocusEvent<HTMLInputElement>) => void;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/src/lib/molecules-input-combo.styles.d.ts

@@ -0,0 +1,35 @@
+import { InputComboVariants } from './molecules-input-combo.type';
+type ContainerStyledProps = {
+    $variant: InputComboVariants;
+    $hasError?: boolean;
+    $hasValue?: boolean;
+    $hasHelperText?: boolean;
+    disabled?: boolean;
+};
+export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    disabled?: boolean;
+    $fullWidth?: boolean;
+}>>;
+export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerStyledProps>>;
+export declare const DropdownSection: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $variant: InputComboVariants;
+    disabled?: boolean;
+    $hasError: boolean;
+}>>;
+export declare const DividerWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $variant: InputComboVariants;
+}>>;
+export declare const InputSection: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $variant: InputComboVariants;
+    $hasError?: boolean;
+    $hasValue?: boolean;
+    disabled?: boolean;
+}>>;
+export declare const ErrorMessage: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $variant: InputComboVariants;
+}>>;
+export declare const HelperText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    disabled?: boolean;
+    $variant: InputComboVariants;
+}>>;
+export {};

package/src/lib/molecules-input-combo.type.d.ts

@@ -0,0 +1,71 @@
+import { DefaultProps } from '@bolttech/ui-utils';
+import { OptionType } from '@bolttech/atoms-select';
+import { FocusEvent, ReactNode } from 'react';
+export type InputComboVariants = 'grey' | 'border';
+export type DropdownOption = OptionType;
+export type ComboValue = {
+    /** Value provided by the dropdown selected option id */
+    id: string;
+    /** Unified value from dropdown and input */
+    label: string;
+    /** Value from typed input */
+    value: string;
+};
+export type InputComboProps = DefaultProps & {
+    /** Unique identifier for the component */
+    id?: string;
+    /** Data test id for testing */
+    dataTestId?: string;
+    /** Visual variant */
+    variant?: InputComboVariants;
+    /** Field label text for the input */
+    label?: string;
+    /** Placeholder for the text input */
+    placeholder?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Error message — triggers error state when set */
+    errorMessage?: string;
+    /** Helper text displayed below the field */
+    helperMessage?: string;
+    /** Text input value */
+    value?: string;
+    /** Currently selected dropdown value (option id) */
+    dropdownValue?: string;
+    /** Options for the dropdown prefix selector */
+    dropdownOptions: DropdownOption[];
+    /** Label for the dropdown (visually hidden, used for a11y) */
+    dropdownLabel?: string;
+    /** Placeholder for the dropdown search input */
+    dropdownPlaceholder?: string;
+    /** Disable search/typing in the dropdown */
+    dropdownDisableSearch?: boolean;
+    /** Whether the component should take the full width of its container */
+    fullWidth?: boolean;
+    /** Icon name for the input (Material Symbols Sharp). When set, always shows the icon. Defaults to 'info' when tooltip is provided. */
+    icon?: string;
+    /** Render dropdown options in a portal, useful when inside overflow containers like modals */
+    usePortal?: boolean;
+    /** Tooltip configuration for the info icon */
+    tooltip?: {
+        text: ReactNode;
+        variant: 'dark' | 'grey' | 'light';
+        size: 'short' | 'long';
+    };
+    /**
+     * Unified onChange callback.
+     * Called on both input typing and dropdown selection.
+     * Compatible with the form engine's custom event `(event) => {
+     *    return { _value: event.value, _metadata: event }
+     *  }`.
+     */
+    onChange?: (combo: ComboValue) => void;
+    /** Callback when dropdown selection changes (in addition to onChange) */
+    onDropdownChange?: (option: DropdownOption) => void;
+    /** Callback when input loses focus */
+    onBlur?: (evt: FocusEvent<HTMLInputElement>) => void;
+    /** Callback when input gains focus */
+    onFocus?: (evt: FocusEvent<HTMLInputElement>) => void;
+};