zenput 1.0.0

package/dist/cjs/types/components/FileInput/FileInput.types.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BaseInputProps } from '../../types';
+export 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;
+}

package/dist/cjs/types/components/FileInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FileInput';
+export * from './FileInput.types';

package/dist/cjs/types/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NumberInputProps } from './NumberInput.types';
+export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/cjs/types/components/NumberInput/NumberInput.types.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { BaseInputProps } from '../../types';
+export 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;
+}

package/dist/cjs/types/components/NumberInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './NumberInput';
+export * from './NumberInput.types';

package/dist/cjs/types/components/OTPInput/OTPInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { OTPInputProps } from './OTPInput.types';
+export declare const OTPInput: React.ForwardRefExoticComponent<OTPInputProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/types/components/OTPInput/OTPInput.types.d.ts

@@ -0,0 +1,20 @@
+import { BaseInputProps } from '../../types';
+export type OTPInputType = 'numeric' | 'alphanumeric';
+export 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;
+}

package/dist/cjs/types/components/OTPInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './OTPInput';
+export * from './OTPInput.types';

package/dist/cjs/types/components/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PasswordInputProps } from './PasswordInput.types';
+export declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/cjs/types/components/PasswordInput/PasswordInput.types.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BaseInputProps } from '../../types';
+export 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;
+}

package/dist/cjs/types/components/PasswordInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PasswordInput';
+export * from './PasswordInput.types';

package/dist/cjs/types/components/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { PhoneInputProps } from './PhoneInput.types';
+export declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/cjs/types/components/PhoneInput/PhoneInput.types.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { BaseInputProps } from '../../types';
+export interface CountryCode {
+    code: string;
+    dialCode: string;
+    flag: string;
+    name: string;
+}
+export 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;
+}

package/dist/cjs/types/components/PhoneInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PhoneInput';
+export * from './PhoneInput.types';

package/dist/cjs/types/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { RadioGroupProps } from './RadioGroup.types';
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/cjs/types/components/RadioGroup/RadioGroup.types.d.ts

@@ -0,0 +1,22 @@
+import { BaseInputProps } from '../../types';
+export interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export 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;
+}

package/dist/cjs/types/components/RadioGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RadioGroup';
+export * from './RadioGroup.types';

package/dist/cjs/types/components/RangeInput/RangeInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { RangeInputProps } from './RangeInput.types';
+export declare const RangeInput: React.ForwardRefExoticComponent<RangeInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/cjs/types/components/RangeInput/RangeInput.types.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { BaseInputProps } from '../../types';
+export 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;
+}

package/dist/cjs/types/components/RangeInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RangeInput';
+export * from './RangeInput.types';

package/dist/cjs/types/components/SearchInput/SearchInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SearchInputProps } from './SearchInput.types';
+export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/cjs/types/components/SearchInput/SearchInput.types.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BaseInputProps } from '../../types';
+export 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;
+}

package/dist/cjs/types/components/SearchInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SearchInput';
+export * from './SearchInput.types';

package/dist/cjs/types/components/SelectInput/SelectInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SelectInputProps } from './SelectInput.types';
+export declare const SelectInput: React.ForwardRefExoticComponent<SelectInputProps & React.RefAttributes<HTMLSelectElement>>;

package/dist/cjs/types/components/SelectInput/SelectInput.types.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { BaseInputProps } from '../../types';
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface SelectInputProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>, BaseInputProps {
+    /** List of options */
+    options: SelectOption[];
+    /** Placeholder text shown as first disabled option */
+    placeholder?: string;
+}

package/dist/cjs/types/components/SelectInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SelectInput';
+export * from './SelectInput.types';

package/dist/cjs/types/components/TextArea/TextArea.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TextAreaProps } from './TextArea.types';
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/cjs/types/components/TextArea/TextArea.types.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BaseInputProps } from '../../types';
+export interface TextAreaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'>, BaseInputProps {
+    /** Auto resize to fit content */
+    autoResize?: boolean;
+    /** Show character count */
+    showCharCount?: boolean;
+}

package/dist/cjs/types/components/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TextArea';
+export * from './TextArea.types';

package/dist/cjs/types/components/TextInput/TextInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TextInputProps } from './TextInput.types';
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/cjs/types/components/TextInput/TextInput.types.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BaseInputProps } from '../../types';
+export interface TextInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, BaseInputProps {
+}

package/dist/cjs/types/components/TextInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TextInput';
+export * from './TextInput.types';

package/dist/cjs/types/components/TimeInput/TimeInput.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TimeInputProps } from './TimeInput.types';
+export declare const TimeInput: React.ForwardRefExoticComponent<TimeInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/cjs/types/components/TimeInput/TimeInput.types.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BaseInputProps } from '../../types';
+export interface TimeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'>, BaseInputProps {
+    /** Minimum time (HH:mm) */
+    min?: string;
+    /** Maximum time (HH:mm) */
+    max?: string;
+}

package/dist/cjs/types/components/TimeInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TimeInput';
+export * from './TimeInput.types';

package/dist/cjs/types/components/Toggle/Toggle.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ToggleProps } from './Toggle.types';
+export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;

package/dist/cjs/types/components/Toggle/Toggle.types.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BaseInputProps } from '../../types';
+export 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';
+}

package/dist/cjs/types/components/Toggle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Toggle';
+export * from './Toggle.types';

package/dist/cjs/types/components/index.d.ts

@@ -0,0 +1,19 @@
+export * from './TextInput';
+export * from './TextArea';
+export * from './NumberInput';
+export * from './PasswordInput';
+export * from './SelectInput';
+export * from './Checkbox';
+export * from './CheckboxGroup';
+export * from './RadioGroup';
+export * from './Toggle';
+export * from './DateInput';
+export * from './TimeInput';
+export * from './FileInput';
+export * from './RangeInput';
+export * from './ColorInput';
+export * from './SearchInput';
+export * from './PhoneInput';
+export * from './OTPInput';
+export * from './AutoComplete';
+export * from './DataTable';

package/dist/cjs/types/context/ThemeProvider.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+export 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;
+}
+export declare function ThemeProvider({ theme, children }: ThemeProviderProps): JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export {};

package/dist/cjs/types/context/index.d.ts

@@ -0,0 +1 @@
+export * from './ThemeProvider';

package/dist/cjs/types/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useFormField';
+export * from './useControllable';

package/dist/cjs/types/hooks/useControllable.d.ts

@@ -0,0 +1,7 @@
+type UseControllableOptions<T> = {
+    value?: T;
+    defaultValue?: T;
+    onChange?: (value: T) => void;
+};
+export declare function useControllable<T>({ value, defaultValue, onChange, }: UseControllableOptions<T>): [T | undefined, (newValue: T) => void];
+export {};

package/dist/cjs/types/hooks/useFormField.d.ts

@@ -0,0 +1,25 @@
+import { ValidationState } from '../types';
+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;
+    };
+}
+export declare function useFormField({ id, helperText, errorMessage, validationState, required, disabled, }: UseFormFieldOptions): UseFormFieldResult;
+export {};

package/dist/cjs/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './types';
+export * from './hooks';
+export * from './context';

package/dist/cjs/types/types/common.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+export type InputSize = 'sm' | 'md' | 'lg';
+export type InputVariant = 'outlined' | 'filled' | 'underlined';
+export type ValidationState = 'default' | 'error' | 'success' | 'warning';
+export 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;
+}

package/dist/cjs/types/types/index.d.ts

@@ -0,0 +1 @@
+export * from './common';

package/dist/cjs/types/utils/classNames.d.ts

@@ -0,0 +1,3 @@
+type ClassValue = string | undefined | null | false | Record<string, boolean>;
+export declare function classNames(...args: ClassValue[]): string;
+export {};

package/dist/cjs/types/utils/constants.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Common constants used across the library
+ */
+/** Delay before closing dropdown after blur to allow click events to fire (in milliseconds) */
+export declare const DROPDOWN_BLUR_DELAY_MS = 150;
+/** Default color for ColorInput component */
+export declare const DEFAULT_COLOR = "#3b82f6";
+/** Minimum password length for strength indicator */
+export declare const MIN_PASSWORD_LENGTH = 8;

package/dist/cjs/types/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './classNames';
+export * from './validation';
+export * from './constants';

package/dist/cjs/types/utils/validation.d.ts

@@ -0,0 +1,23 @@
+import type { ValidationState } from '../types/common';
+/**
+ * Gets the appropriate message based on validation state
+ * @param validationState - Current validation state
+ * @param errorMessage - Message to show in error state
+ * @param successMessage - Message to show in success state
+ * @param warningMessage - Message to show in warning state
+ * @param helperText - Default helper text
+ * @returns The active message to display
+ */
+export declare function getValidationMessage(validationState?: ValidationState, errorMessage?: string, successMessage?: string, warningMessage?: string, helperText?: string): string | undefined;
+/**
+ * Gets the CSS class name for validation message styling
+ * @param validationState - Current validation state
+ * @param styles - CSS modules styles object containing message class names
+ * @returns The appropriate CSS class name
+ */
+export declare function getValidationMessageClass(validationState: ValidationState | undefined, styles: {
+    errorText?: string;
+    successText?: string;
+    warningText?: string;
+    helperText?: string;
+}): string | undefined;