zenput 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,401 @@
+import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type InputSize = 'sm' | 'md' | 'lg';
+type InputVariant = 'outlined' | 'filled' | 'underlined';
+type ValidationState = 'default' | 'error' | 'success' | 'warning';
+interface BaseInputProps {
+    /** Visual size of the input */
+    size?: InputSize;
+    /** Visual variant/style */
+    variant?: InputVariant;
+    /** Validation state */
+    validationState?: ValidationState;
+    /** Label text */
+    label?: string;
+    /** Helper text displayed below the input */
+    helperText?: string;
+    /** Error message (shown when validationState is 'error') */
+    errorMessage?: string;
+    /** Success message */
+    successMessage?: string;
+    /** Warning message */
+    warningMessage?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is read-only */
+    readOnly?: boolean;
+    /** Prefix icon/element */
+    prefixIcon?: React.ReactNode;
+    /** Suffix icon/element */
+    suffixIcon?: React.ReactNode;
+    /** Whether to show the label as floating */
+    floatingLabel?: boolean;
+    /** Full width mode */
+    fullWidth?: boolean;
+    /** Custom className for the wrapper element */
+    wrapperClassName?: string;
+    /** Custom style for the wrapper element */
+    wrapperStyle?: React.CSSProperties;
+    /** Custom className for the label element */
+    labelClassName?: string;
+    /** Custom style for the label element */
+    labelStyle?: React.CSSProperties;
+    /** Custom className for the input element */
+    inputClassName?: string;
+    /** Custom style for the input element */
+    inputStyle?: React.CSSProperties;
+    /** Custom className for the helper text element */
+    helperTextClassName?: string;
+    /** Custom style for the helper text element */
+    helperTextStyle?: React.CSSProperties;
+}
+
+interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, BaseInputProps {
+}
+
+declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, BaseInputProps {
+    /** Auto resize to fit content */
+    autoResize?: boolean;
+    /** Show character count */
+    showCharCount?: boolean;
+}
+
+declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange'>, BaseInputProps {
+    /** Current value */
+    value?: number;
+    /** Default value */
+    defaultValue?: number;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Hide the increment/decrement buttons */
+    hideControls?: boolean;
+    /** Called when the value changes */
+    onChange?: (value: number | undefined) => void;
+}
+
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, BaseInputProps {
+    /** Show a password strength indicator */
+    showStrengthIndicator?: boolean;
+    /** Custom toggle visibility icon when password is visible */
+    showIcon?: React.ReactNode;
+    /** Custom toggle visibility icon when password is hidden */
+    hideIcon?: React.ReactNode;
+}
+
+declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface SelectInputProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>, BaseInputProps {
+    /** List of options */
+    options: SelectOption[];
+    /** Placeholder text shown as first disabled option */
+    placeholder?: string;
+}
+
+declare const SelectInput: React.ForwardRefExoticComponent<SelectInputProps & React.RefAttributes<HTMLSelectElement>>;
+
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, Pick<BaseInputProps, 'size' | 'validationState' | 'label' | 'helperText' | 'errorMessage' | 'required' | 'disabled' | 'wrapperClassName' | 'wrapperStyle' | 'labelClassName' | 'labelStyle' | 'inputClassName' | 'inputStyle' | 'helperTextClassName' | 'helperTextStyle'> {
+    /** Whether the checkbox is indeterminate */
+    indeterminate?: boolean;
+}
+
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+interface CheckboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface CheckboxGroupProps extends Pick<BaseInputProps, 'size' | 'validationState' | 'label' | 'helperText' | 'errorMessage' | 'required' | 'disabled' | 'wrapperClassName' | 'wrapperStyle' | 'labelClassName' | 'labelStyle' | 'helperTextClassName' | 'helperTextStyle'> {
+    /** List of checkbox options */
+    options: CheckboxOption[];
+    /** Currently selected values (controlled) */
+    value?: string[];
+    /** Default selected values (uncontrolled) */
+    defaultValue?: string[];
+    /** Called when selection changes */
+    onChange?: (values: string[]) => void;
+    /** Layout direction */
+    direction?: 'horizontal' | 'vertical';
+    /** id for the group */
+    id?: string;
+}
+
+declare const CheckboxGroup: React.ForwardRefExoticComponent<CheckboxGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface RadioGroupProps extends Pick<BaseInputProps, 'size' | 'validationState' | 'label' | 'helperText' | 'errorMessage' | 'required' | 'disabled' | 'wrapperClassName' | 'wrapperStyle' | 'labelClassName' | 'labelStyle' | 'helperTextClassName' | 'helperTextStyle'> {
+    /** Name attribute for radio inputs */
+    name: string;
+    /** List of radio options */
+    options: RadioOption[];
+    /** Currently selected value (controlled) */
+    value?: string;
+    /** Default selected value (uncontrolled) */
+    defaultValue?: string;
+    /** Called when selection changes */
+    onChange?: (value: string) => void;
+    /** Layout direction */
+    direction?: 'horizontal' | 'vertical';
+    /** id for the group */
+    id?: string;
+}
+
+declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ToggleProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, Pick<BaseInputProps, 'size' | 'validationState' | 'label' | 'helperText' | 'errorMessage' | 'required' | 'disabled' | 'wrapperClassName' | 'wrapperStyle' | 'labelClassName' | 'labelStyle' | 'inputClassName' | 'inputStyle' | 'helperTextClassName' | 'helperTextStyle'> {
+    /** Label position relative to the toggle */
+    labelPosition?: 'left' | 'right';
+}
+
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
+
+interface DateInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, BaseInputProps {
+    /** Minimum date (YYYY-MM-DD) */
+    min?: string;
+    /** Maximum date (YYYY-MM-DD) */
+    max?: string;
+}
+
+declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface TimeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, BaseInputProps {
+    /** Minimum time (HH:mm) */
+    min?: string;
+    /** Maximum time (HH:mm) */
+    max?: string;
+}
+
+declare const TimeInput: React.ForwardRefExoticComponent<TimeInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface FileInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, BaseInputProps {
+    /** Button label text */
+    buttonLabel?: string;
+    /** Show selected file names */
+    showFileNames?: boolean;
+    /** Allow drag-and-drop */
+    dropzone?: boolean;
+}
+
+declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface RangeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, BaseInputProps {
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Show the current numeric value */
+    showValue?: boolean;
+    /** Format the displayed value */
+    formatValue?: (value: number) => string;
+}
+
+declare const RangeInput: React.ForwardRefExoticComponent<RangeInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface ColorInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, BaseInputProps {
+    /** Show the hex value text next to the color picker */
+    showHexValue?: boolean;
+}
+
+declare const ColorInput: React.ForwardRefExoticComponent<ColorInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, BaseInputProps {
+    /** Called when the user submits the search (Enter key or search button click) */
+    onSearch?: (value: string) => void;
+    /** Show a clear button when there is a value */
+    showClearButton?: boolean;
+    /** Whether to show a search icon */
+    showSearchIcon?: boolean;
+}
+
+declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface CountryCode {
+    code: string;
+    dialCode: string;
+    flag: string;
+    name: string;
+}
+interface PhoneInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange'>, BaseInputProps {
+    /** Selected dial code (e.g. "+1") */
+    dialCode?: string;
+    /** Default dial code */
+    defaultDialCode?: string;
+    /** List of country codes to show */
+    countries?: CountryCode[];
+    /** Called when the full phone value changes */
+    onChange?: (phoneNumber: string, dialCode: string) => void;
+    /** Current phone number value (without dial code) */
+    phoneValue?: string;
+}
+
+declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLInputElement>>;
+
+type OTPInputType = 'numeric' | 'alphanumeric';
+interface OTPInputProps extends Pick<BaseInputProps, 'size' | 'validationState' | 'label' | 'helperText' | 'errorMessage' | 'required' | 'disabled' | 'wrapperClassName' | 'wrapperStyle' | 'labelClassName' | 'labelStyle' | 'helperTextClassName' | 'helperTextStyle'> {
+    /** Number of OTP digits */
+    length?: number;
+    /** Current value */
+    value?: string;
+    /** Default value */
+    defaultValue?: string;
+    /** Called when the OTP value changes */
+    onChange?: (value: string) => void;
+    /** Called when all digits are filled */
+    onComplete?: (value: string) => void;
+    /** Input type restriction */
+    inputType?: OTPInputType;
+    /** Mask the input like a password */
+    mask?: boolean;
+    /** id prefix */
+    id?: string;
+}
+
+declare const OTPInput: React.ForwardRefExoticComponent<OTPInputProps & React.RefAttributes<HTMLDivElement>>;
+
+interface AutoCompleteOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface AutoCompleteProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange' | 'onSelect'>, BaseInputProps {
+    /** List of options to display */
+    options: AutoCompleteOption[];
+    /** Currently selected value (controlled) */
+    value?: string;
+    /** Default value */
+    defaultValue?: string;
+    /** Called when the input value changes */
+    onChange?: (value: string) => void;
+    /** Called when an option is selected */
+    onSelect?: (option: AutoCompleteOption) => void;
+    /** Called when the user types (for async search) */
+    onSearch?: (query: string) => void;
+    /** Whether the dropdown is in a loading state */
+    loading?: boolean;
+    /** Message shown when no options match */
+    noOptionsMessage?: string;
+    /** Allow entering a custom value not in the options list */
+    allowCustomValue?: boolean;
+}
+
+declare const AutoComplete: React.ForwardRefExoticComponent<AutoCompleteProps & React.RefAttributes<HTMLInputElement>>;
+
+type DataTableRecord = Record<string, any>;
+interface DataTableColumn<T extends DataTableRecord = DataTableRecord> {
+    /** Unique key that maps to a field in the row data */
+    key: string;
+    /** Text displayed in the column header */
+    header: string;
+    /** Whether this column supports checkbox-based filtering */
+    filterable?: boolean;
+    /** Custom cell renderer; receives the raw cell value and the full row */
+    render?: (value: unknown, row: T) => React.ReactNode;
+    /** Optional column width (e.g. '150px' or '20%') */
+    width?: string | number;
+}
+interface DataTableProps<T extends DataTableRecord = DataTableRecord> {
+    /** Column definitions */
+    columns: DataTableColumn<T>[];
+    /** Row data */
+    data: T[];
+    /**
+     * Returns a stable, unique key for each row.
+     * When omitted the row's array index is used as a fallback.
+     */
+    rowKey?: (row: T, index: number) => string | number;
+    /** Additional CSS class applied to the outermost wrapper */
+    className?: string;
+    /** Additional inline style applied to the outermost wrapper */
+    style?: React.CSSProperties;
+    /** Message displayed when data array is empty or all rows are filtered out */
+    emptyMessage?: string;
+}
+
+declare function DataTable<T extends DataTableRecord = DataTableRecord>({ columns, data, rowKey, className, style, emptyMessage, }: Readonly<DataTableProps<T>>): react_jsx_runtime.JSX.Element;
+declare namespace DataTable {
+    var displayName: string;
+}
+
+interface UseFormFieldOptions {
+    id?: string;
+    label?: string;
+    helperText?: string;
+    errorMessage?: string;
+    validationState?: ValidationState;
+    required?: boolean;
+    disabled?: boolean;
+}
+interface UseFormFieldResult {
+    inputId: string;
+    helperId: string;
+    labelProps: {
+        htmlFor: string;
+    };
+    inputAriaProps: {
+        'aria-describedby'?: string;
+        'aria-invalid'?: boolean;
+        'aria-required'?: boolean;
+        'aria-disabled'?: boolean;
+    };
+}
+declare function useFormField({ id, helperText, errorMessage, validationState, required, disabled, }: UseFormFieldOptions): UseFormFieldResult;
+
+type UseControllableOptions<T> = {
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+};
+declare function useControllable<T>({ value, defaultValue, onChange, }: UseControllableOptions<T>): [T | undefined, (newValue: T) => void];
+
+interface Theme {
+    primaryColor?: string;
+    errorColor?: string;
+    successColor?: string;
+    warningColor?: string;
+    borderRadius?: string;
+    fontFamily?: string;
+    fontSize?: string;
+    borderColor?: string;
+    bgColor?: string;
+    textColor?: string;
+    placeholderColor?: string;
+    focusRingColor?: string;
+    disabledBg?: string;
+    disabledText?: string;
+}
+interface ThemeContextValue {
+    theme: Theme;
+}
+interface ThemeProviderProps {
+    theme: Theme;
+    children: React.ReactNode;
+}
+declare function ThemeProvider({ theme, children }: ThemeProviderProps): JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+export { AutoComplete, Checkbox, CheckboxGroup, ColorInput, DataTable, DateInput, FileInput, NumberInput, OTPInput, PasswordInput, PhoneInput, RadioGroup, RangeInput, SearchInput, SelectInput, TextArea, TextInput, ThemeProvider, TimeInput, Toggle, useControllable, useFormField, useTheme };
+export type { AutoCompleteOption, AutoCompleteProps, BaseInputProps, CheckboxGroupProps, CheckboxOption, CheckboxProps, ColorInputProps, CountryCode, DataTableColumn, DataTableProps, DataTableRecord, DateInputProps, FileInputProps, InputSize, InputVariant, NumberInputProps, OTPInputProps, OTPInputType, PasswordInputProps, PhoneInputProps, RadioGroupProps, RadioOption, RangeInputProps, SearchInputProps, SelectInputProps, SelectOption, TextAreaProps, TextInputProps, Theme, TimeInputProps, ToggleProps, ValidationState };

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "zenput",
+  "version": "1.0.0",
+  "description": "Zenput — a production-ready, accessible React TypeScript input components library",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "rollup -c",
+    "test": "jest",
+    "test:coverage": "jest --coverage",
+    "lint": "eslint 'src/**/*.{ts,tsx}'",
+    "lint:fix": "eslint 'src/**/*.{ts,tsx}' --fix",
+    "format": "prettier --write 'src/**/*.{ts,tsx,css}'",
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17.0.0",
+    "react-dom": ">=17.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint": "^8.0.0",
+    "eslint-plugin-react": "^7.0.0",
+    "eslint-plugin-react-hooks": "^4.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
+    "prettier": "^3.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.0.0",
+    "rollup-plugin-dts": "^6.0.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.0",
+    "ts-jest": "^29.0.0",
+    "tslib": "^2.8.1",
+    "typescript": "^5.3.0"
+  },
+  "keywords": [
+    "react",
+    "input",
+    "components",
+    "typescript",
+    "accessible",
+    "form",
+    "ui"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/konarsubhojit/zenput"
+  },
+  "author": "konarsubhojit"
+}